Order based on fractional index in history action

Introducing independent change detection for appState and elements

Generalizing object change, cleanup, refactoring, comments, solving typing issues

Shaping increment, change, delta hierarchy

Structural clone of elements

Introducing store and incremental API

Disabling buttons for canvas actions, smaller store and changes improvements

Update history entry based on latest changes, iterate through the stack for visible changes to limit empty commands

Solving concurrency issues, solving (partly) linear element issues,  introducing commitToStore breaking change

Fixing existing tests, updating snapshots

Trying to be smarter on the appstate change detection

Extending collab test, refactoring action / updateScene params, bugfixes

Resetting snapshots

Resetting snapshots

UI / API tests for history - WIP

Changing actions related to the observed appstate to at least update the store snapshot - WIP

Adding skipping of snapshot update flag for most no-breaking changes compatible solution

Ignoring uncomitted elements from local async actions, updating store directly in updateScene

Bound element issues - WIP

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.isMobile) {
+  if (device.editor.isMobile) {
     return (
       <Footer>
         <button

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/ref#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/excalidraw-api#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/excalidraw-element-skeleton.mdx

@@ -10,13 +10,17 @@ The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/
 
 **_Signature_**
 
-<pre>
-  convertToExcalidrawElements(elements:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133">
-    ExcalidrawElementSkeleton
-  </a>
-  )
-</pre>
+```ts
+convertToExcalidrawElements(
+  elements: ExcalidrawElementSkeleton,
+  opts?: { regenerateIds: boolean }
+): ExcalidrawElement[]
+```
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `elements` | [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L137) |  | The Excalidraw element Skeleton which needs to be converted to Excalidraw elements. |
+| `opts` | `{ regenerateIds: boolean }` | ` {regenerateIds: true}` | By default `id` will be regenerated for all the elements irrespective of whether you pass the `id` so if you don't want the ids to regenerated, you can set this attribute to `false`. |
 
 **_How to use_**
 
@@ -24,13 +28,13 @@ The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/
 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/ref#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/excalidraw-api#updatescene) if you are using the Skeleton API
 
 ## Supported Features
 
 ### Rectangle, Ellipse, and Diamond
 
-To create these shapes you need to pass its `type` and `x` and `y` coordinates for position. The rest of the attributes are optional_.
+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.
 
@@ -427,3 +431,45 @@ 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/excalidraw-api.mdx

@@ -1,29 +1,28 @@
-# ref
+# excalidrawAPI
 
 <pre>
-  <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> } }
+  (api:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L616">
+    ExcalidrawAPI
+  </a>
+  ) => void;
 </pre>
 
-You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
+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/src/types.ts#L616). We expose the below APIs :point_down:
 
 | 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 the library |
+| [updateLibrary](#updatelibrary) | `function` | updates the library |
 | [addFiles](#addfiles) | `function` | add files data to the appState |
 | [resetScene](#resetscene) | `function` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
 | [getSceneElementsIncludingDeleted](#getsceneelementsincludingdeleted) | `function` | Returns all the elements including the deleted in the scene |
@@ -39,54 +38,15 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
 | [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 |
 
-## readyPromise
+:::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`.
 
-<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>
+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.
 
-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
 
@@ -105,7 +65,8 @@ You can use this function to update the scene with the sceneData. It accepts the
 | `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`. |
+| `commitToStore` | `boolean` | Implies if the `store` should update it's snapshot, capture the update and calculates the diff. Captured changes are emmitted and listened to by other components, such as `History` for undo / redo purposes. Defaults to `false`. |
+| `skipSnapshotUpdate` | `boolean` | Implies whether the `store` should skip update of its snapshot, which is necessary for correct diff calculation. Relevant only when `elements` or `appState` are passed in. When `true`, `commitToStore` value will be ignored. Defaults to `false`. |
 
 ```jsx live
 function App() {
@@ -387,14 +348,25 @@ 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.
 
-<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>
+```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/src/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 |
 
 ## setCursor
 
@@ -421,3 +393,51 @@ 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/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. |
-| [`ref`](/docs/@excalidraw/excalidraw/api/props/ref) | `object` | _ | `Ref` to be passed to Excalidraw |
+| [`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 |
 | [`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. |
@@ -37,7 +37,7 @@ Beyond attributes that Excalidraw elements already support, you can store `custo
 
 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/ref#updatescene) / [`updateLibrary`](/docs/@excalidraw/excalidraw/api/props/ref#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/excalidraw-api#updatescene) / [`updateLibrary`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatelibrary) afterwards.
 
 ```js showLineNumbers
 {
@@ -93,8 +93,16 @@ This callback is triggered when mouse pointer is updated.
 
 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/src/types.ts#L115"> AppState["activeTool"]</a>, pointerDownState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/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
@@ -110,7 +118,11 @@ 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/src/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.
@@ -136,8 +148,11 @@ 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/src/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:
@@ -180,30 +195,30 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 ### 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
@@ -236,4 +251,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/ui-options.mdx

@@ -1,6 +1,6 @@
 # UIOptions
 
-This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) and [`welcomeScreen`](#welcmescreen).
+This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) [`welcomeScreen`](#welcmescreen) and [`tools`](#tools).
 
 <pre>
   &#123;
@@ -70,3 +70,12 @@ 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/utils-intro.md

@@ -129,7 +129,7 @@ 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>,
+  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/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/>
@@ -164,9 +164,9 @@ import { isLinearElement } from "@excalidraw/excalidraw";
 
 **Signature**
 
-```tsx
+<pre>
 isLinearElement(elementType?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L80">ExcalidrawElement</a>): boolean
-```
+</pre>
 
 ### getNonDeletedElements
 
@@ -195,8 +195,10 @@ import { mergeLibraryItems } from "@excalidraw/excalidraw";
 **_Signature_**
 
 <pre>
-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>
+mergeLibraryItems(<br/>&nbsp;
+  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><br/>
+): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L250">LibraryItems</a>
 </pre>
 
 ### parseLibraryTokensFromUrl
@@ -299,7 +301,7 @@ Open the `main menu` in the below example to view the footer.
 ```jsx live noInline
 const MobileFooter = ({}) => {
   const device = useDevice();
-  if (device.isMobile) {
+  if (device.editor.isMobile) {
     return (
       <Footer>
         <button
@@ -331,14 +333,15 @@ const App = () => (
 render(<App />);
 ```
 
-The `device` has the following `attributes`
+The `device` has the following `attributes`, some grouped into `viewport` and `editor` objects, per context.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `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` |
+| `viewport.isMobile` | `boolean` | Set to `true` when viewport is in `mobile` breakpoint |
+| `viewport.isLandscape` | `boolean` | Set to `true` when the viewport is in `landscape` mode |
+| `editor.canFitSidebar` | `boolean` | Set to `true` if there's enough space to fit the `sidebar` |
+| `editor.isMobile` | `boolean` | Set to `true` when editor container is in `mobile` breakpoint |
+| `isTouchScreen` | `boolean` | Set to `true` for `touch` when touch event detected |
 
 ### i18n
 
@@ -383,3 +386,94 @@ 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/development.mdx

@@ -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 version
+yarn prerelease:excalidraw
 ```
 
 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
+yarn release:excalidraw
 ```
 
 This will publish the package.

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

@@ -31,6 +31,17 @@ 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": process.env.IS_PREACT,
+  },
+```
 
 ## Need help?
 

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

@@ -30,25 +30,74 @@ function App() {
 }
 ```
 
-### Rendering Excalidraw only on client
+### Next.js
 
 Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.
 
-The following workflow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
+Here are two ways on how you can render **Excalidraw** on **Next.js**.
+
+
+
+1. Using **Next.js Dynamic** import [Recommended].
+
+Since Excalidraw doesn't support server side rendering so you can also use `dynamic import` to render by setting `ssr` to `false`.
+
+```jsx showLineNumbers
+import dynamic from "next/dynamic";
+const Excalidraw = dynamic(
+  async () => (await import("@excalidraw/excalidraw")).Excalidraw,
+  {
+    ssr: false,
+  },
+);
+export default function App() {
+  return <Excalidraw />;
+}
+```
+
+Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-dynamic-k8yjq2).
+
+
+2. Importing Excalidraw once **client** is rendered.
 
 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
 export default function App() {
   const [Excalidraw, setExcalidraw] = useState(null);
   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": process.env.IS_PREACT,
+  },
+```
+::: 
+
 ## Browser
 
 To use it in a browser directly:

dev-docs/docs/codebase/frames.mdx

@@ -19,4 +19,4 @@ Frames should be ordered where frame children come first, followed by the frame
 ]
 ```
 
-If not oredered 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.
+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/docusaurus.config.js

@@ -1,6 +1,11 @@
 // @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",
@@ -139,7 +144,15 @@ const config = {
       },
     }),
   themes: ["@docusaurus/theme-live-codeblock"],
-  plugins: ["docusaurus-plugin-sass"],
+  plugins: [
+    "docusaurus-plugin-sass",
+    [
+      "docusaurus2-dotenv",
+      {
+        systemvars: true,
+      },
+    ],
+  ],
 };
 
 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.15.2-eb020d0",
+    "@excalidraw/excalidraw": "0.17.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",
@@ -30,6 +30,7 @@
   "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

@@ -53,7 +53,7 @@ const sidebars = {
               },
               items: [
                 "@excalidraw/excalidraw/api/props/initialdata",
-                "@excalidraw/excalidraw/api/props/ref",
+                "@excalidraw/excalidraw/api/props/excalidraw-api",
                 "@excalidraw/excalidraw/api/props/render-props",
                 "@excalidraw/excalidraw/api/props/ui-options",
               ],

dev-docs/yarn.lock

@@ -1718,10 +1718,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@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==
+"@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==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
@@ -3567,6 +3567,13 @@ 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"
@@ -3652,6 +3659,25 @@ 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/collab/Collab.tsx

@@ -302,7 +302,6 @@ class Collab extends PureComponent<Props, CollabState> {
 
       this.excalidrawAPI.updateScene({
         elements,
-        commitToHistory: false,
       });
     }
   };
@@ -449,14 +448,12 @@ class Collab extends PureComponent<Props, CollabState> {
         }
         return element;
       });
-      // remove deleted elements from elements array & history to ensure we don't
+      // remove deleted elements from elements array to ensure we don't
       // expose potentially sensitive user data in case user manually deletes
       // existing elements (or clears scene), which would otherwise be persisted
       // to database even if deleted before creating the room.
-      this.excalidrawAPI.history.clear();
       this.excalidrawAPI.updateScene({
         elements,
-        commitToHistory: true,
       });
 
       this.saveCollabRoomToFirebase(getSyncableElements(elements));
@@ -491,9 +488,7 @@ class Collab extends PureComponent<Props, CollabState> {
               this.initializeRoom({ fetchScene: false });
               const remoteElements = decryptedData.payload.elements;
               const reconciledElements = this.reconcileElements(remoteElements);
-              this.handleRemoteSceneUpdate(reconciledElements, {
-                init: true,
-              });
+              this.handleRemoteSceneUpdate(reconciledElements);
               // noop if already resolved via init from firebase
               scenePromise.resolve({
                 elements: reconciledElements,
@@ -649,21 +644,11 @@ class Collab extends PureComponent<Props, CollabState> {
     });
   }, LOAD_IMAGES_TIMEOUT);
 
-  private handleRemoteSceneUpdate = (
-    elements: ReconciledElements,
-    { init = false }: { init?: boolean } = {},
-  ) => {
+  private handleRemoteSceneUpdate = (elements: ReconciledElements) => {
     this.excalidrawAPI.updateScene({
       elements,
-      commitToHistory: !!init,
     });
 
-    // We haven't yet implemented multiplayer undo functionality, so we clear the undo stack
-    // when we receive any messages from another peer. This UX can be pretty rough -- if you
-    // undo, a user makes a change, and then try to redo, your element(s) will be lost. However,
-    // right now we think this is the right tradeoff.
-    this.excalidrawAPI.history.clear();
-
     this.loadImageFiles();
   };
 

excalidraw-app/collab/Portal.tsx

@@ -18,7 +18,6 @@ import throttle from "lodash.throttle";
 import { newElementWith } from "../../src/element/mutateElement";
 import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../src/data/encryption";
-import { PRECEDING_ELEMENT_KEY } from "../../src/constants";
 
 class Portal {
   collab: TCollabClass;
@@ -150,11 +149,7 @@ class Portal {
               this.broadcastedElementVersions.get(element.id)!) &&
           isSyncableElement(element)
         ) {
-          acc.push({
-            ...element,
-            // z-index info for the reconciler
-            [PRECEDING_ELEMENT_KEY]: idx === 0 ? "^" : elements[idx - 1]?.id,
-          });
+          acc.push(element);
         }
         return acc;
       },

excalidraw-app/collab/reconciliation.ts

@@ -1,15 +1,13 @@
-import { PRECEDING_ELEMENT_KEY } from "../../src/constants";
 import { ExcalidrawElement } from "../../src/element/types";
 import { AppState } from "../../src/types";
-import { arrayToMapWithIndex } from "../../src/utils";
+import { arrayToMap } from "../../src/utils";
+import { orderByFractionalIndex } from "../../src/fractionalIndex";
 
 export type ReconciledElements = readonly ExcalidrawElement[] & {
   _brand: "reconciledElements";
 };
 
-export type BroadcastedExcalidrawElement = ExcalidrawElement & {
-  [PRECEDING_ELEMENT_KEY]?: string;
-};
+export type BroadcastedExcalidrawElement = ExcalidrawElement;
 
 const shouldDiscardRemoteElement = (
   localAppState: AppState,
@@ -21,7 +19,7 @@ const shouldDiscardRemoteElement = (
     // local element is being edited
     (local.id === localAppState.editingElement?.id ||
       local.id === localAppState.resizingElement?.id ||
-      local.id === localAppState.draggingElement?.id ||
+      local.id === localAppState.draggingElement?.id || // Is this still valid? As draggingElement is selection element, which is never part of the elements array
       // local element is newer
       local.version > remote.version ||
       // resolve conflicting edits deterministically by taking the one with
@@ -39,116 +37,43 @@ export const reconcileElements = (
   remoteElements: readonly BroadcastedExcalidrawElement[],
   localAppState: AppState,
 ): ReconciledElements => {
-  const localElementsData =
-    arrayToMapWithIndex<ExcalidrawElement>(localElements);
+  const localElementsData = arrayToMap(localElements);
+  const reconciledElements: ExcalidrawElement[] = [];
+  const added = new Set<string>();
 
-  const reconciledElements: ExcalidrawElement[] = localElements.slice();
-
-  const duplicates = new WeakMap<ExcalidrawElement, true>();
-
-  let cursor = 0;
-  let offset = 0;
-
-  let remoteElementIdx = -1;
+  // process remote elements
   for (const remoteElement of remoteElements) {
-    remoteElementIdx++;
+    if (localElementsData.has(remoteElement.id)) {
+      const localElement = localElementsData.get(remoteElement.id);
 
-    const local = localElementsData.get(remoteElement.id);
-
-    if (shouldDiscardRemoteElement(localAppState, local?.[0], remoteElement)) {
-      if (remoteElement[PRECEDING_ELEMENT_KEY]) {
-        delete remoteElement[PRECEDING_ELEMENT_KEY];
-      }
-
-      continue;
-    }
-
-    // Mark duplicate for removal as it'll be replaced with the remote element
-    if (local) {
-      // Unless the remote and local elements are the same element in which case
-      // we need to keep it as we'd otherwise discard it from the resulting
-      // array.
-      if (local[0] === remoteElement) {
+      if (
+        localElement &&
+        shouldDiscardRemoteElement(localAppState, localElement, remoteElement)
+      ) {
         continue;
-      }
-      duplicates.set(local[0], true);
-    }
-
-    // parent may not be defined in case the remote client is running an older
-    // excalidraw version
-    const parent =
-      remoteElement[PRECEDING_ELEMENT_KEY] ||
-      remoteElements[remoteElementIdx - 1]?.id ||
-      null;
-
-    if (parent != null) {
-      delete remoteElement[PRECEDING_ELEMENT_KEY];
-
-      // ^ indicates the element is the first in elements array
-      if (parent === "^") {
-        offset++;
-        if (cursor === 0) {
-          reconciledElements.unshift(remoteElement);
-          localElementsData.set(remoteElement.id, [
-            remoteElement,
-            cursor - offset,
-          ]);
-        } else {
-          reconciledElements.splice(cursor + 1, 0, remoteElement);
-          localElementsData.set(remoteElement.id, [
-            remoteElement,
-            cursor + 1 - offset,
-          ]);
-          cursor++;
-        }
       } else {
-        let idx = localElementsData.has(parent)
-          ? localElementsData.get(parent)![1]
-          : null;
-        if (idx != null) {
-          idx += offset;
-        }
-        if (idx != null && idx >= cursor) {
-          reconciledElements.splice(idx + 1, 0, remoteElement);
-          offset++;
-          localElementsData.set(remoteElement.id, [
-            remoteElement,
-            idx + 1 - offset,
-          ]);
-          cursor = idx + 1;
-        } else if (idx != null) {
-          reconciledElements.splice(cursor + 1, 0, remoteElement);
-          offset++;
-          localElementsData.set(remoteElement.id, [
-            remoteElement,
-            cursor + 1 - offset,
-          ]);
-          cursor++;
-        } else {
+        if (!added.has(remoteElement.id)) {
           reconciledElements.push(remoteElement);
-          localElementsData.set(remoteElement.id, [
-            remoteElement,
-            reconciledElements.length - 1 - offset,
-          ]);
+          added.add(remoteElement.id);
         }
       }
-      // no parent z-index information, local element exists → replace in place
-    } else if (local) {
-      reconciledElements[local[1]] = remoteElement;
-      localElementsData.set(remoteElement.id, [remoteElement, local[1]]);
-      // otherwise push to the end
     } else {
-      reconciledElements.push(remoteElement);
-      localElementsData.set(remoteElement.id, [
-        remoteElement,
-        reconciledElements.length - 1 - offset,
-      ]);
+      if (!added.has(remoteElement.id)) {
+        reconciledElements.push(remoteElement);
+        added.add(remoteElement.id);
+      }
     }
   }
 
-  const ret: readonly ExcalidrawElement[] = reconciledElements.filter(
-    (element) => !duplicates.has(element),
-  );
+  // process local elements
+  for (const localElement of localElements) {
+    if (!added.has(localElement.id)) {
+      reconciledElements.push(localElement);
+      added.add(localElement.id);
+    }
+  }
 
-  return ret as ReconciledElements;
+  return orderByFractionalIndex(
+    reconciledElements,
+  ) as readonly ExcalidrawElement[] as ReconciledElements;
 };

excalidraw-app/data/index.ts

@@ -278,7 +278,7 @@ export const loadScene = async (
     // in the scene database/localStorage, and instead fetch them async
     // from a different database
     files: data.files,
-    commitToHistory: false,
+    commitToStore: false,
   };
 };
 

excalidraw-app/index.tsx

@@ -409,7 +409,7 @@ const ExcalidrawWrapper = () => {
             excalidrawAPI.updateScene({
               ...data.scene,
               ...restore(data.scene, null, null, { repairBindings: true }),
-              commitToHistory: true,
+              commitToStore: true,
             });
           }
         });
@@ -590,6 +590,7 @@ const ExcalidrawWrapper = () => {
           if (didChange) {
             excalidrawAPI.updateScene({
               elements,
+              skipSnapshotUpdate: true,
             });
           }
         }
@@ -691,7 +692,7 @@ const ExcalidrawWrapper = () => {
       })}
     >
       <Excalidraw
-        ref={excalidrawRefCallback}
+        excalidrawAPI={excalidrawRefCallback}
         onChange={onChange}
         initialData={initialStatePromiseRef.current.promise}
         isCollaborating={isCollaborating}

excalidraw-app/tests/MobileMenu.test.tsx

@@ -17,8 +17,10 @@ describe("Test MobileMenu", () => {
 
   beforeEach(async () => {
     await render(<ExcalidrawApp />);
-    //@ts-ignore
-    h.app.refreshDeviceState(h.app.excalidrawContainerRef.current!);
+    // @ts-ignore
+    h.app.refreshViewportBreakpoints();
+    // @ts-ignore
+    h.app.refreshEditorBreakpoints();
   });
 
   afterAll(() => {
@@ -28,11 +30,15 @@ describe("Test MobileMenu", () => {
   it("should set device correctly", () => {
     expect(h.app.device).toMatchInlineSnapshot(`
       {
-        "canDeviceFitSidebar": false,
-        "isLandscape": true,
-        "isMobile": true,
-        "isSmScreen": false,
+        "editor": {
+          "canFitSidebar": false,
+          "isMobile": true,
+        },
         "isTouchScreen": false,
+        "viewport": {
+          "isLandscape": false,
+          "isMobile": true,
+        },
       }
     `);
   });

excalidraw-app/tests/collab.test.tsx

@@ -64,7 +64,7 @@ vi.mock("socket.io-client", () => {
 });
 
 describe("collaboration", () => {
-  it("creating room should reset deleted elements", async () => {
+  it("creating room should reset deleted elements while keeping store snapshot in sync", async () => {
     await render(<ExcalidrawApp />);
     // To update the scene with deleted elements before starting collab
     updateSceneData({
@@ -76,26 +76,43 @@ describe("collaboration", () => {
           isDeleted: true,
         }),
       ],
+      commitToStore: true,
     });
     await waitFor(() => {
+      expect(API.getUndoStack().length).toBe(1);
       expect(h.elements).toEqual([
         expect.objectContaining({ id: "A" }),
         expect.objectContaining({ id: "B", isDeleted: true }),
       ]);
-      expect(API.getStateHistory().length).toBe(1);
+      expect(Array.from(h.store.snapshot.elements.values())).toEqual([
+        expect.objectContaining({ id: "A" }),
+        expect.objectContaining({ id: "B", isDeleted: true }),
+      ]);
     });
     window.collab.startCollaboration(null);
     await waitFor(() => {
+      expect(API.getUndoStack().length).toBe(1);
       expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);
-      expect(API.getStateHistory().length).toBe(1);
+      // We never delete from the local store as it is used for correct diff calculation
+      expect(Array.from(h.store.snapshot.elements.values())).toEqual([
+        expect.objectContaining({ id: "A" }),
+        expect.objectContaining({ id: "B", isDeleted: true }),
+      ]);
     });
 
     const undoAction = createUndoAction(h.history);
     // noop
     h.app.actionManager.executeAction(undoAction);
+
+    // As it was introduced #2270, undo is a noop here, but we might want to re-enable it,
+    // since inability to undo your own deletions could be a bigger upsetting factor here
     await waitFor(() => {
+      expect(h.history.isUndoStackEmpty).toBeTruthy();
       expect(h.elements).toEqual([expect.objectContaining({ id: "A" })]);
-      expect(API.getStateHistory().length).toBe(1);
+      expect(Array.from(h.store.snapshot.elements.values())).toEqual([
+        expect.objectContaining({ id: "A" }),
+        expect.objectContaining({ id: "B", isDeleted: true }),
+      ]);
     });
   });
 });

excalidraw-app/tests/reconciliation.test.ts

@@ -1,5 +1,4 @@
 import { expect } from "chai";
-import { PRECEDING_ELEMENT_KEY } from "../../src/constants";
 import { ExcalidrawElement } from "../../src/element/types";
 import {
   BroadcastedExcalidrawElement,
@@ -8,13 +7,13 @@ import {
 } from "../../excalidraw-app/collab/reconciliation";
 import { randomInteger } from "../../src/random";
 import { AppState } from "../../src/types";
+import { cloneJSON } from "../../src/utils";
 
 type Id = string;
 type ElementLike = {
   id: string;
   version: number;
   versionNonce: number;
-  [PRECEDING_ELEMENT_KEY]?: string | null;
 };
 
 type Cache = Record<string, ExcalidrawElement | undefined>;
@@ -43,7 +42,6 @@ const createElement = (opts: { uid: string } | ElementLike) => {
     id,
     version,
     versionNonce: versionNonce || randomInteger(),
-    [PRECEDING_ELEMENT_KEY]: parent || null,
   };
 };
 
@@ -52,20 +50,15 @@ const idsToElements = (
   cache: Cache = {},
 ): readonly ExcalidrawElement[] => {
   return ids.reduce((acc, _uid, idx) => {
-    const {
-      uid,
-      id,
-      version,
-      [PRECEDING_ELEMENT_KEY]: parent,
-      versionNonce,
-    } = createElement(typeof _uid === "string" ? { uid: _uid } : _uid);
+    const { uid, id, version, versionNonce } = createElement(
+      typeof _uid === "string" ? { uid: _uid } : _uid,
+    );
     const cached = cache[uid];
     const elem = {
       id,
       version: version ?? 0,
       versionNonce,
       ...cached,
-      [PRECEDING_ELEMENT_KEY]: parent,
     } as BroadcastedExcalidrawElement;
     // @ts-ignore
     cache[uid] = elem;
@@ -76,7 +69,6 @@ const idsToElements = (
 
 const addParents = (elements: BroadcastedExcalidrawElement[]) => {
   return elements.map((el, idx, els) => {
-    el[PRECEDING_ELEMENT_KEY] = els[idx - 1]?.id || "^";
     return el;
   });
 };
@@ -93,8 +85,6 @@ const cleanElements = (elements: ReconciledElements) => {
   });
 };
 
-const cloneDeep = (data: any) => JSON.parse(JSON.stringify(data));
-
 const test = <U extends `${string}:${"L" | "R"}`>(
   local: (Id | ElementLike)[],
   remote: (Id | ElementLike)[],
@@ -115,15 +105,15 @@ const test = <U extends `${string}:${"L" | "R"}`>(
     "remote reconciliation",
   );
 
-  const __local = cleanElements(cloneDeep(_remote));
-  const __remote = addParents(cleanElements(cloneDeep(remoteReconciled)));
+  const __local = cleanElements(cloneJSON(_remote) as ReconciledElements);
+  const __remote = addParents(cleanElements(cloneJSON(remoteReconciled)));
   if (bidirectional) {
     try {
       expect(
         cleanElements(
           reconcileElements(
-            cloneDeep(__local),
-            cloneDeep(__remote),
+            cloneJSON(__local),
+            cloneJSON(__remote),
             {} as AppState,
           ),
         ),
@@ -390,13 +380,11 @@ describe("elements reconciliation", () => {
         id: "A",
         version: 1,
         versionNonce: 1,
-        [PRECEDING_ELEMENT_KEY]: null,
       },
       {
         id: "B",
         version: 1,
         versionNonce: 1,
-        [PRECEDING_ELEMENT_KEY]: null,
       },
     ];
 
@@ -409,13 +397,11 @@ describe("elements reconciliation", () => {
       id: "A",
       version: 1,
       versionNonce: 1,
-      [PRECEDING_ELEMENT_KEY]: null,
     };
     const el2 = {
       id: "B",
       version: 1,
       versionNonce: 1,
-      [PRECEDING_ELEMENT_KEY]: null,
     };
     testIdentical([el1, el2], [el2, el1], ["A", "B"]);
   });

package.json

@@ -20,9 +20,9 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
-    "@excalidraw/mermaid-to-excalidraw": "0.1.2",
     "@excalidraw/laser-pointer": "1.2.0",
-    "@excalidraw/random-username": "1.0.0",
+    "@excalidraw/mermaid-to-excalidraw": "0.1.2",
+    "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
     "@sentry/browser": "6.2.5",
@@ -37,6 +37,7 @@
     "eslint-plugin-react": "7.32.2",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
+    "fractional-indexing-jittered": "0.9.0",
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
     "image-blob-reduce": "3.0.1",
@@ -96,7 +97,7 @@
     "vitest-canvas-mock": "0.3.2"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": "18.0.0 - 20.x.x"
   },
   "homepage": ".",
   "name": "excalidraw",
@@ -128,8 +129,8 @@
     "test:coverage:watch": "vitest --coverage --watch",
     "test:ui": "yarn test --ui --coverage.enabled=true",
     "autorelease": "node scripts/autorelease.js",
-    "prerelease": "node scripts/prerelease.js",
+    "prerelease:excalidraw": "node scripts/prerelease.js",
     "build:preview": "yarn build && vite preview --port 5000",
-    "release": "node scripts/release.js"
+    "release:excalidraw": "node scripts/release.js"
   }
 }

src/actions/actionAddToLibrary.ts

@@ -3,6 +3,7 @@ import { deepCopyElement } from "../element/newElement";
 import { randomId } from "../random";
 import { t } from "../i18n";
 import { LIBRARY_DISABLED_TYPES } from "../constants";
+import { StoreAction } from "./types";
 
 export const actionAddToLibrary = register({
   name: "addToLibrary",
@@ -17,7 +18,7 @@ export const actionAddToLibrary = register({
     for (const type of LIBRARY_DISABLED_TYPES) {
       if (selectedElements.some((element) => element.type === type)) {
         return {
-          commitToHistory: false,
+          storeAction: StoreAction.NONE,
           appState: {
             ...appState,
             errorMessage: t(`errors.libraryElementTypeError.${type}`),
@@ -41,7 +42,7 @@ export const actionAddToLibrary = register({
       })
       .then(() => {
         return {
-          commitToHistory: false,
+          storeAction: StoreAction.NONE,
           appState: {
             ...appState,
             toast: { message: t("toast.addedToLibrary") },
@@ -50,7 +51,7 @@ export const actionAddToLibrary = register({
       })
       .catch((error) => {
         return {
-          commitToHistory: false,
+          storeAction: StoreAction.NONE,
           appState: {
             ...appState,
             errorMessage: error.message,

src/actions/actionAlign.tsx

@@ -9,6 +9,7 @@ import {
 } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
@@ -17,6 +18,7 @@ import { isSomeElementSelected } from "../scene";
 import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 const alignActionsPredicate = (
   elements: readonly ExcalidrawElement[],
@@ -28,7 +30,7 @@ const alignActionsPredicate = (
   return (
     selectedElements.length > 1 &&
     // TODO enable aligning frames when implemented properly
-    !selectedElements.some((el) => el.type === "frame")
+    !selectedElements.some((el) => isFrameLikeElement(el))
   );
 };
 
@@ -62,7 +64,7 @@ export const actionAlignTop = register({
         position: "start",
         axis: "y",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>
@@ -93,7 +95,7 @@ export const actionAlignBottom = register({
         position: "end",
         axis: "y",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>
@@ -124,7 +126,7 @@ export const actionAlignLeft = register({
         position: "start",
         axis: "x",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>
@@ -155,7 +157,7 @@ export const actionAlignRight = register({
         position: "end",
         axis: "x",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>
@@ -186,7 +188,7 @@ export const actionAlignVerticallyCentered = register({
         position: "center",
         axis: "y",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (
@@ -213,7 +215,7 @@ export const actionAlignHorizontallyCentered = register({
         position: "center",
         axis: "x",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData, app }) => (

src/actions/actionBoundText.tsx

@@ -33,6 +33,7 @@ import { AppState } from "../types";
 import { Mutable } from "../utility-types";
 import { getFontString } from "../utils";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 export const actionUnbindText = register({
   name: "unbindText",
@@ -80,7 +81,7 @@ export const actionUnbindText = register({
     return {
       elements,
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
 });
@@ -149,7 +150,7 @@ export const actionBindText = register({
     return {
       elements: pushTextAboveContainer(elements, container, textElement),
       appState: { ...appState, selectedElementIds: { [container.id]: true } },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
 });
@@ -299,7 +300,7 @@ export const actionWrapTextInContainer = register({
         ...appState,
         selectedElementIds: containerIds,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
 });

src/actions/actionCanvas.tsx

@@ -1,7 +1,13 @@
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { ZoomInIcon, ZoomOutIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
-import { CURSOR_TYPE, MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
+import {
+  CURSOR_TYPE,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  THEME,
+  ZOOM_STEP,
+} from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
@@ -22,6 +28,7 @@ import {
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { Bounds } from "../element/bounds";
 import { setCursor } from "../cursor";
+import { StoreAction } from "./types";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -35,7 +42,9 @@ export const actionChangeViewBackgroundColor = register({
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
-      commitToHistory: !!value.viewBackgroundColor,
+      storeAction: !!value.viewBackgroundColor
+        ? StoreAction.CAPTURE
+        : StoreAction.NONE,
     };
   },
   PanelComponent: ({ elements, appState, updateData, appProps }) => {
@@ -88,7 +97,7 @@ export const actionClearCanvas = register({
             ? { ...appState.activeTool, type: "selection" }
             : appState.activeTool,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
 });
@@ -110,16 +119,17 @@ export const actionZoomIn = register({
           appState,
         ),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
-  PanelComponent: ({ updateData }) => (
+  PanelComponent: ({ updateData, appState }) => (
     <ToolButton
       type="button"
       className="zoom-in-button zoom-button"
       icon={ZoomInIcon}
       title={`${t("buttons.zoomIn")} — ${getShortcutKey("CtrlOrCmd++")}`}
       aria-label={t("buttons.zoomIn")}
+      disabled={appState.zoom.value >= MAX_ZOOM}
       onClick={() => {
         updateData(null);
       }}
@@ -147,16 +157,17 @@ export const actionZoomOut = register({
           appState,
         ),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
-  PanelComponent: ({ updateData }) => (
+  PanelComponent: ({ updateData, appState }) => (
     <ToolButton
       type="button"
       className="zoom-out-button zoom-button"
       icon={ZoomOutIcon}
       title={`${t("buttons.zoomOut")} — ${getShortcutKey("CtrlOrCmd+-")}`}
       aria-label={t("buttons.zoomOut")}
+      disabled={appState.zoom.value <= MIN_ZOOM}
       onClick={() => {
         updateData(null);
       }}
@@ -184,7 +195,7 @@ export const actionResetZoom = register({
           appState,
         ),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   PanelComponent: ({ updateData, appState }) => (
@@ -261,11 +272,25 @@ export const zoomToFit = ({
 
     // Apply clamping to newZoomValue to be between 10% and 3000%
     newZoomValue = Math.min(
-      Math.max(newZoomValue, 0.1),
-      30.0,
+      Math.max(newZoomValue, MIN_ZOOM),
+      MAX_ZOOM,
     ) as NormalizedZoomValue;
 
-    scrollX = (appState.width / 2) * (1 / newZoomValue) - centerX;
+    let appStateWidth = appState.width;
+
+    if (appState.openSidebar) {
+      const sidebarDOMElem = document.querySelector(
+        ".sidebar",
+      ) as HTMLElement | null;
+      const sidebarWidth = sidebarDOMElem?.offsetWidth ?? 0;
+      const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+
+      appStateWidth = !isRTL
+        ? appState.width - sidebarWidth
+        : appState.width + sidebarWidth;
+    }
+
+    scrollX = (appStateWidth / 2) * (1 / newZoomValue) - centerX;
     scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
   } else {
     newZoomValue = zoomValueToFitBoundsOnViewport(commonBounds, {
@@ -293,7 +318,7 @@ export const zoomToFit = ({
       scrollY,
       zoom: { value: newZoomValue },
     },
-    commitToHistory: false,
+    storeAction: StoreAction.NONE,
   };
 };
 
@@ -363,7 +388,7 @@ export const actionToggleTheme = register({
         theme:
           value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
@@ -400,7 +425,7 @@ export const actionToggleEraserTool = register({
         activeEmbeddable: null,
         activeTool,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) => event.key === KEYS.E,
@@ -435,8 +460,9 @@ export const actionToggleHandTool = register({
         activeEmbeddable: null,
         activeTool,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
-  keyTest: (event) => event.key === KEYS.H,
+  keyTest: (event) =>
+    !event.altKey && !event[KEYS.CTRL_OR_CMD] && event.key === KEYS.H,
 });

src/actions/actionClipboard.tsx

@@ -9,10 +9,11 @@ import {
   readSystemClipboard,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { exportCanvas } from "../data/index";
-import { getNonDeletedElements, isTextElement } from "../element";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
+import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
+import { StoreAction } from "./types";
 
 export const actionCopy = register({
   name: "copy",
@@ -28,7 +29,7 @@ export const actionCopy = register({
       await copyToClipboard(elementsToCopy, app.files, event);
     } catch (error: any) {
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
         appState: {
           ...appState,
           errorMessage: error.message,
@@ -37,7 +38,7 @@ export const actionCopy = register({
     }
 
     return {
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.copy",
@@ -63,7 +64,7 @@ export const actionPaste = register({
 
       if (isFirefox) {
         return {
-          commitToHistory: false,
+          storeAction: StoreAction.NONE,
           appState: {
             ...appState,
             errorMessage: t("hints.firefox_clipboard_write"),
@@ -72,7 +73,7 @@ export const actionPaste = register({
       }
 
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
         appState: {
           ...appState,
           errorMessage: t("errors.asyncPasteFailedOnRead"),
@@ -85,7 +86,7 @@ export const actionPaste = register({
     } catch (error: any) {
       console.error(error);
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
         appState: {
           ...appState,
           errorMessage: t("errors.asyncPasteFailedOnParse"),
@@ -94,7 +95,7 @@ export const actionPaste = register({
     }
 
     return {
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.paste",
@@ -119,26 +120,29 @@ export const actionCopyAsSvg = register({
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     }
-    const selectedElements = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    });
+
+    const { exportedElements, exportingFrame } = prepareElementsForExport(
+      elements,
+      appState,
+      true,
+    );
+
     try {
       await exportCanvas(
         "clipboard-svg",
-        selectedElements.length
-          ? selectedElements
-          : getNonDeletedElements(elements),
+        exportedElements,
         appState,
         app.files,
-        appState,
+        {
+          ...appState,
+          exportingFrame,
+        },
       );
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     } catch (error: any) {
       console.error(error);
@@ -147,7 +151,7 @@ export const actionCopyAsSvg = register({
           ...appState,
           errorMessage: error.message,
         },
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     }
   },
@@ -163,7 +167,7 @@ export const actionCopyAsPng = register({
   perform: async (elements, appState, _data, app) => {
     if (!app.canvas) {
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     }
     const selectedElements = app.scene.getSelectedElements({
@@ -171,16 +175,17 @@ export const actionCopyAsPng = register({
       includeBoundTextElement: true,
       includeElementsInFrames: true,
     });
+
+    const { exportedElements, exportingFrame } = prepareElementsForExport(
+      elements,
+      appState,
+      true,
+    );
     try {
-      await exportCanvas(
-        "clipboard",
-        selectedElements.length
-          ? selectedElements
-          : getNonDeletedElements(elements),
-        appState,
-        app.files,
-        appState,
-      );
+      await exportCanvas("clipboard", exportedElements, appState, app.files, {
+        ...appState,
+        exportingFrame,
+      });
       return {
         appState: {
           ...appState,
@@ -195,7 +200,7 @@ export const actionCopyAsPng = register({
             }),
           },
         },
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     } catch (error: any) {
       console.error(error);
@@ -204,7 +209,7 @@ export const actionCopyAsPng = register({
           ...appState,
           errorMessage: error.message,
         },
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     }
   },
@@ -234,7 +239,7 @@ export const copyText = register({
       .join("\n\n");
     copyTextToSystemClipboard(text);
     return {
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   predicate: (elements, appState, _, app) => {

src/actions/actionDeleteSelected.tsx

@@ -10,9 +10,10 @@ import { newElementWith } from "../element/mutateElement";
 import { getElementsInGroup } from "../groups";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { fixBindingsAfterDeletion } from "../element/binding";
-import { isBoundToContainer } from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { updateActiveTool } from "../utils";
 import { TrashIcon } from "../components/icons";
+import { StoreAction } from "./types";
 
 const deleteSelectedElements = (
   elements: readonly ExcalidrawElement[],
@@ -20,7 +21,7 @@ const deleteSelectedElements = (
 ) => {
   const framesToBeDeleted = new Set(
     getSelectedElements(
-      elements.filter((el) => el.type === "frame"),
+      elements.filter((el) => isFrameLikeElement(el)),
       appState,
     ).map((el) => el.id),
   );
@@ -109,7 +110,7 @@ export const actionDeleteSelected = register({
             ...nextAppState,
             editingLinearElement: null,
           },
-          commitToHistory: false,
+          storeAction: StoreAction.UPDATE,
         };
       }
 
@@ -141,7 +142,7 @@ export const actionDeleteSelected = register({
                 : [0],
           },
         },
-        commitToHistory: true,
+        storeAction: StoreAction.CAPTURE,
       };
     }
     let { elements: nextElements, appState: nextAppState } =
@@ -161,10 +162,12 @@ export const actionDeleteSelected = register({
         multiElement: null,
         activeEmbeddable: null,
       },
-      commitToHistory: isSomeElementSelected(
+      storeAction: isSomeElementSelected(
         getNonDeletedElements(elements),
         appState,
-      ),
+      )
+        ? StoreAction.CAPTURE
+        : StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.delete",

src/actions/actionDistribute.tsx

@@ -5,6 +5,7 @@ import {
 import { ToolButton } from "../components/ToolButton";
 import { distributeElements, Distribution } from "../distribute";
 import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { t } from "../i18n";
@@ -13,13 +14,14 @@ import { isSomeElementSelected } from "../scene";
 import { AppClassProperties, AppState } from "../types";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);
   return (
     selectedElements.length > 1 &&
     // TODO enable distributing frames when implemented properly
-    !selectedElements.some((el) => el.type === "frame")
+    !selectedElements.some((el) => isFrameLikeElement(el))
   );
 };
 
@@ -52,7 +54,7 @@ export const distributeHorizontally = register({
         space: "between",
         axis: "x",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>
@@ -82,7 +84,7 @@ export const distributeVertically = register({
         space: "between",
         axis: "y",
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>

src/actions/actionDuplicateSelection.tsx

@@ -14,23 +14,24 @@ import {
 } from "../groups";
 import { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
-import { ActionResult } from "./types";
+import { ActionResult, StoreAction } from "./types";
 import { GRID_SIZE } from "../constants";
 import {
   bindTextToShapeAfterDuplication,
   getBoundTextElement,
 } from "../element/textElement";
-import { isBoundToContainer, isFrameElement } from "../element/typeChecks";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import {
   bindElementsToFramesAfterDuplication,
-  getFrameElements,
+  getFrameChildren,
 } from "../frame";
 import {
   excludeElementsInFramesFromSelection,
   getSelectedElements,
 } from "../scene/selection";
+import { fixFractionalIndices } from "../fractionalIndex";
 
 export const actionDuplicateSelection = register({
   name: "duplicateSelection",
@@ -47,13 +48,13 @@ export const actionDuplicateSelection = register({
       return {
         elements,
         appState: ret.appState,
-        commitToHistory: true,
+        storeAction: StoreAction.CAPTURE,
       };
     }
 
     return {
       ...duplicateElements(elements, appState),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.duplicateSelection",
@@ -85,6 +86,7 @@ const duplicateElements = (
   const newElements: ExcalidrawElement[] = [];
   const oldElements: ExcalidrawElement[] = [];
   const oldIdToDuplicatedId = new Map();
+  const duplicatedElementsMap = new Map<string, ExcalidrawElement>();
 
   const duplicateAndOffsetElement = (element: ExcalidrawElement) => {
     const newElement = duplicateElement(
@@ -96,6 +98,7 @@ const duplicateElements = (
         y: element.y + GRID_SIZE / 2,
       },
     );
+    duplicatedElementsMap.set(newElement.id, newElement);
     oldIdToDuplicatedId.set(element.id, newElement.id);
     oldElements.push(element);
     newElements.push(newElement);
@@ -140,11 +143,11 @@ const duplicateElements = (
     }
 
     const boundTextElement = getBoundTextElement(element);
-    const isElementAFrame = isFrameElement(element);
+    const isElementAFrameLike = isFrameLikeElement(element);
 
     if (idsOfElementsToDuplicate.get(element.id)) {
       // if a group or a container/bound-text or frame, duplicate atomically
-      if (element.groupIds.length || boundTextElement || isElementAFrame) {
+      if (element.groupIds.length || boundTextElement || isElementAFrameLike) {
         const groupId = getSelectedGroupForElement(appState, element);
         if (groupId) {
           // TODO:
@@ -154,8 +157,8 @@ const duplicateElements = (
             sortedElements,
             groupId,
           ).flatMap((element) =>
-            isFrameElement(element)
-              ? [...getFrameElements(elements, element.id), element]
+            isFrameLikeElement(element)
+              ? [...getFrameChildren(elements, element.id), element]
               : [element],
           );
 
@@ -180,8 +183,8 @@ const duplicateElements = (
           );
           continue;
         }
-        if (isElementAFrame) {
-          const elementsInFrame = getFrameElements(sortedElements, element.id);
+        if (isElementAFrameLike) {
+          const elementsInFrame = getFrameChildren(sortedElements, element.id);
 
           elementsWithClones.push(
             ...markAsProcessed([
@@ -234,7 +237,10 @@ const duplicateElements = (
 
   // step (3)
 
-  const finalElements = finalElementsReversed.reverse();
+  const finalElements = fixFractionalIndices(
+    finalElementsReversed.reverse(),
+    duplicatedElementsMap,
+  );
 
   // ---------------------------------------------------------------------------
 

src/actions/actionElementLock.ts

@@ -1,8 +1,10 @@
 import { newElementWith } from "../element/mutateElement";
+import { isFrameLikeElement } from "../element/typeChecks";
 import { ExcalidrawElement } from "../element/types";
 import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 const shouldLock = (elements: readonly ExcalidrawElement[]) =>
   elements.every((el) => !el.locked);
@@ -43,7 +45,7 @@ export const actionToggleElementLock = register({
           ? null
           : appState.selectedLinearElement,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: (elements, appState, app) => {
@@ -51,7 +53,7 @@ export const actionToggleElementLock = register({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: false,
     });
-    if (selected.length === 1 && selected[0].type !== "frame") {
+    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
       return selected[0].locked
         ? "labels.elementLock.unlock"
         : "labels.elementLock.lock";
@@ -97,7 +99,7 @@ export const actionUnlockAllElements = register({
           lockedElements.map((el) => [el.id, true]),
         ),
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.elementLock.unlockAll",

src/actions/actionExport.tsx

@@ -19,12 +19,16 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
 
 import "../components/ToolIcon.scss";
+import { StoreAction } from "./types";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
   trackEvent: false,
   perform: (_elements, appState, value) => {
-    return { appState: { ...appState, name: value }, commitToHistory: false };
+    return {
+      appState: { ...appState, name: value },
+      storeAction: StoreAction.UPDATE,
+    };
   },
   PanelComponent: ({ appState, updateData, appProps, data }) => (
     <ProjectName
@@ -45,7 +49,7 @@ export const actionChangeExportScale = register({
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportScale: value },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   PanelComponent: ({ elements: allElements, appState, updateData }) => {
@@ -94,7 +98,7 @@ export const actionChangeExportBackground = register({
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportBackground: value },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   PanelComponent: ({ appState, updateData }) => (
@@ -113,7 +117,7 @@ export const actionChangeExportEmbedScene = register({
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportEmbedScene: value },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   PanelComponent: ({ appState, updateData }) => (
@@ -148,7 +152,7 @@ export const actionSaveToActiveFile = register({
         : await saveAsJSON(elements, appState, app.files);
 
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
         appState: {
           ...appState,
           fileHandle,
@@ -170,7 +174,7 @@ export const actionSaveToActiveFile = register({
       } else {
         console.warn(error);
       }
-      return { commitToHistory: false };
+      return { storeAction: StoreAction.NONE };
     }
   },
   keyTest: (event) =>
@@ -192,7 +196,7 @@ export const actionSaveFileToDisk = register({
         app.files,
       );
       return {
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
         appState: {
           ...appState,
           openDialog: null,
@@ -206,7 +210,7 @@ export const actionSaveFileToDisk = register({
       } else {
         console.warn(error);
       }
-      return { commitToHistory: false };
+      return { storeAction: StoreAction.NONE };
     }
   },
   keyTest: (event) =>
@@ -217,7 +221,7 @@ export const actionSaveFileToDisk = register({
       icon={saveAs}
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
-      showAriaLabel={useDevice().isMobile}
+      showAriaLabel={useDevice().editor.isMobile}
       hidden={!nativeFileSystemSupported}
       onClick={() => updateData(null)}
       data-testid="save-as-button"
@@ -244,7 +248,7 @@ export const actionLoadScene = register({
         elements: loadedElements,
         appState: loadedAppState,
         files,
-        commitToHistory: true,
+        storeAction: StoreAction.CAPTURE,
       };
     } catch (error: any) {
       if (error?.name === "AbortError") {
@@ -255,7 +259,7 @@ export const actionLoadScene = register({
         elements,
         appState: { ...appState, errorMessage: error.message },
         files: app.files,
-        commitToHistory: false,
+        storeAction: StoreAction.NONE,
       };
     }
   },
@@ -268,7 +272,7 @@ export const actionExportWithDarkMode = register({
   perform: (_elements, appState, value) => {
     return {
       appState: { ...appState, exportWithDarkMode: value },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   PanelComponent: ({ appState, updateData }) => (

src/actions/actionFinalize.tsx

@@ -16,6 +16,7 @@ import {
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import { AppState } from "../types";
 import { resetCursor } from "../cursor";
+import { StoreAction } from "./types";
 
 export const actionFinalize = register({
   name: "finalize",
@@ -49,7 +50,7 @@ export const actionFinalize = register({
             cursorButton: "up",
             editingLinearElement: null,
           },
-          commitToHistory: true,
+          storeAction: StoreAction.CAPTURE,
         };
       }
     }
@@ -190,7 +191,10 @@ export const actionFinalize = register({
             : appState.selectedLinearElement,
         pendingImageElementId: null,
       },
-      commitToHistory: appState.activeTool.type === "freedraw",
+      storeAction:
+        appState.activeTool.type === "freedraw"
+          ? StoreAction.CAPTURE
+          : StoreAction.UPDATE,
     };
   },
   keyTest: (event, appState) =>

src/actions/actionFlip.ts

@@ -13,6 +13,7 @@ import {
   unbindLinearElements,
 } from "../element/binding";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
+import { StoreAction } from "./types";
 
 export const actionFlipHorizontal = register({
   name: "flipHorizontal",
@@ -25,7 +26,7 @@ export const actionFlipHorizontal = register({
         app,
       ),
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) => event.shiftKey && event.code === CODES.H,
@@ -43,7 +44,7 @@ export const actionFlipVertical = register({
         app,
       ),
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>

src/actions/actionFrame.ts

@@ -1,29 +1,34 @@
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { removeAllElementsFromFrame } from "../frame";
-import { getFrameElements } from "../frame";
+import { getFrameChildren } from "../frame";
 import { KEYS } from "../keys";
 import { AppClassProperties, AppState } from "../types";
 import { updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { register } from "./register";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { StoreAction } from "./types";
 
 const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
   const selectedElements = app.scene.getSelectedElements(appState);
 
-  return selectedElements.length === 1 && selectedElements[0].type === "frame";
+  return (
+    selectedElements.length === 1 && isFrameLikeElement(selectedElements[0])
+  );
 };
 
 export const actionSelectAllElementsInFrame = register({
   name: "selectAllElementsInFrame",
   trackEvent: { category: "canvas" },
   perform: (elements, appState, _, app) => {
-    const selectedFrame = app.scene.getSelectedElements(appState)[0];
+    const selectedElement =
+      app.scene.getSelectedElements(appState).at(0) || null;
 
-    if (selectedFrame && selectedFrame.type === "frame") {
-      const elementsInFrame = getFrameElements(
+    if (isFrameLikeElement(selectedElement)) {
+      const elementsInFrame = getFrameChildren(
         getNonDeletedElements(elements),
-        selectedFrame.id,
+        selectedElement.id,
       ).filter((element) => !(element.type === "text" && element.containerId));
 
       return {
@@ -35,14 +40,14 @@ export const actionSelectAllElementsInFrame = register({
             return acc;
           }, {} as Record<ExcalidrawElement["id"], true>),
         },
-        commitToHistory: false,
+        storeAction: StoreAction.CAPTURE,
       };
     }
 
     return {
       elements,
       appState,
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.selectAllElementsInFrame",
@@ -54,25 +59,30 @@ export const actionRemoveAllElementsFromFrame = register({
   name: "removeAllElementsFromFrame",
   trackEvent: { category: "history" },
   perform: (elements, appState, _, app) => {
-    const selectedFrame = app.scene.getSelectedElements(appState)[0];
+    const selectedElement =
+      app.scene.getSelectedElements(appState).at(0) || null;
 
-    if (selectedFrame && selectedFrame.type === "frame") {
+    if (isFrameLikeElement(selectedElement)) {
       return {
-        elements: removeAllElementsFromFrame(elements, selectedFrame, appState),
+        elements: removeAllElementsFromFrame(
+          elements,
+          selectedElement,
+          appState,
+        ),
         appState: {
           ...appState,
           selectedElementIds: {
-            [selectedFrame.id]: true,
+            [selectedElement.id]: true,
           },
         },
-        commitToHistory: true,
+        storeAction: StoreAction.CAPTURE,
       };
     }
 
     return {
       elements,
       appState,
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.removeAllElementsFromFrame",
@@ -94,7 +104,7 @@ export const actionupdateFrameRendering = register({
           enabled: !appState.frameRendering.enabled,
         },
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.updateFrameRendering",
@@ -122,7 +132,7 @@ export const actionSetFrameAsActiveTool = register({
           type: "frame",
         }),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   keyTest: (event) =>

src/actions/actionGroup.tsx

@@ -17,19 +17,17 @@ import {
 import { getNonDeletedElements } from "../element";
 import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
-import {
-  ExcalidrawElement,
-  ExcalidrawFrameElement,
-  ExcalidrawTextElement,
-} from "../element/types";
+import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import {
   getElementsInResizingFrame,
-  groupByFrames,
+  getFrameLikeElements,
+  groupByFrameLikes,
   removeElementsFromFrame,
   replaceAllElementsInFrame,
 } from "../frame";
+import { StoreAction } from "./types";
 
 const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
   if (elements.length >= 2) {
@@ -72,7 +70,7 @@ export const actionGroup = register({
     });
     if (selectedElements.length < 2) {
       // nothing to group
-      return { appState, elements, commitToHistory: false };
+      return { appState, elements, storeAction: StoreAction.NONE };
     }
     // if everything is already grouped into 1 group, there is nothing to do
     const selectedGroupIds = getSelectedGroupIds(appState);
@@ -92,7 +90,7 @@ export const actionGroup = register({
       ]);
       if (combinedSet.size === elementIdsInGroup.size) {
         // no incremental ids in the selected ids
-        return { appState, elements, commitToHistory: false };
+        return { appState, elements, storeAction: StoreAction.NONE };
       }
     }
 
@@ -105,7 +103,7 @@ export const actionGroup = register({
     // when it happens, we want to remove elements that are in the frame
     // and are going to be grouped from the frame (mouthful, I know)
     if (groupingElementsFromDifferentFrames) {
-      const frameElementsMap = groupByFrames(selectedElements);
+      const frameElementsMap = groupByFrameLikes(selectedElements);
 
       frameElementsMap.forEach((elementsInFrame, frameId) => {
         nextElements = removeElementsFromFrame(
@@ -158,7 +156,7 @@ export const actionGroup = register({
         ),
       },
       elements: nextElements,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.group",
@@ -185,18 +183,11 @@ export const actionUngroup = register({
   perform: (elements, appState, _, app) => {
     const groupIds = getSelectedGroupIds(appState);
     if (groupIds.length === 0) {
-      return { appState, elements, commitToHistory: false };
+      return { appState, elements, storeAction: StoreAction.NONE, };
     }
 
     let nextElements = [...elements];
 
-    const selectedElements = app.scene.getSelectedElements(appState);
-    const frames = selectedElements
-      .filter((element) => element.frameId)
-      .map((element) =>
-        app.scene.getElement(element.frameId!),
-      ) as ExcalidrawFrameElement[];
-
     const boundTextElementIds: ExcalidrawTextElement["id"][] = [];
     nextElements = nextElements.map((element) => {
       if (isBoundToContainer(element)) {
@@ -221,7 +212,19 @@ export const actionUngroup = register({
       null,
     );
 
-    frames.forEach((frame) => {
+    const selectedElements = app.scene.getSelectedElements(appState);
+
+    const selectedElementFrameIds = new Set(
+      selectedElements
+        .filter((element) => element.frameId)
+        .map((element) => element.frameId!),
+    );
+
+    const targetFrames = getFrameLikeElements(elements).filter((frame) =>
+      selectedElementFrameIds.has(frame.id),
+    );
+
+    targetFrames.forEach((frame) => {
       if (frame) {
         nextElements = replaceAllElementsInFrame(
           nextElements,
@@ -248,7 +251,7 @@ export const actionUngroup = register({
     return {
       appState: { ...appState, ...updateAppState },
       elements: nextElements,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   keyTest: (event) =>

src/actions/actionHistory.tsx

@@ -1,62 +1,51 @@
-import { Action, ActionResult } from "./types";
+import { Action, ActionResult, StoreAction } from "./types";
 import { UndoIcon, RedoIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
-import History, { HistoryEntry } from "../history";
-import { ExcalidrawElement } from "../element/types";
+import { History } from "../history";
 import { AppState } from "../types";
 import { KEYS } from "../keys";
-import { newElementWith } from "../element/mutateElement";
-import { fixBindingsAfterDeletion } from "../element/binding";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
+import { ExcalidrawElement } from "../element/types";
+import { fixBindingsAfterDeletion } from "../element/binding";
+import { orderByFractionalIndex } from "../fractionalIndex";
 
 const writeData = (
-  prevElements: readonly ExcalidrawElement[],
-  appState: AppState,
-  updater: () => HistoryEntry | null,
+  appState: Readonly<AppState>,
+  updater: () => [Map<string, ExcalidrawElement>, AppState] | void,
 ): ActionResult => {
-  const commitToHistory = false;
   if (
     !appState.multiElement &&
     !appState.resizingElement &&
     !appState.editingElement &&
     !appState.draggingElement
   ) {
-    const data = updater();
-    if (data === null) {
-      return { commitToHistory };
+    const result = updater();
+
+    if (!result) {
+      return { storeAction: StoreAction.NONE };
     }
 
-    const prevElementMap = arrayToMap(prevElements);
-    const nextElements = data.elements;
-    const nextElementMap = arrayToMap(nextElements);
-
-    const deletedElements = prevElements.filter(
-      (prevElement) => !nextElementMap.has(prevElement.id),
+    // TODO_UNDO: worth detecting z-index deltas or do we just order based on fractional indices?
+    const [nextElementsMap, nextAppState] = result;
+    const nextElements = orderByFractionalIndex(
+      Array.from(nextElementsMap.values()),
     );
-    const elements = nextElements
-      .map((nextElement) =>
-        newElementWith(
-          prevElementMap.get(nextElement.id) || nextElement,
-          nextElement,
-        ),
-      )
-      .concat(
-        deletedElements.map((prevElement) =>
-          newElementWith(prevElement, { isDeleted: true }),
-        ),
-      );
-    fixBindingsAfterDeletion(elements, deletedElements);
+
+    // TODO_UNDO: these are all deleted elements, but ideally we should get just those that were delted at this moment
+    const deletedElements = nextElements.filter((element) => element.isDeleted);
+    // TODO_UNDO: this doesn't really work for bound text
+    fixBindingsAfterDeletion(nextElements, deletedElements);
 
     return {
-      elements,
-      appState: { ...appState, ...data.appState },
-      commitToHistory,
-      syncHistory: true,
+      appState: nextAppState,
+      elements: nextElements,
+      storeAction: StoreAction.UPDATE,
     };
   }
-  return { commitToHistory };
+
+  return { storeAction: StoreAction.NONE };
 };
 
 type ActionCreator = (history: History) => Action;
@@ -65,7 +54,7 @@ export const createUndoAction: ActionCreator = (history) => ({
   name: "undo",
   trackEvent: { category: "history" },
   perform: (elements, appState) =>
-    writeData(elements, appState, () => history.undoOnce()),
+    writeData(appState, () => history.undo(arrayToMap(elements), appState)),
   keyTest: (event) =>
     event[KEYS.CTRL_OR_CMD] &&
     event.key.toLowerCase() === KEYS.Z &&
@@ -77,16 +66,16 @@ export const createUndoAction: ActionCreator = (history) => ({
       aria-label={t("buttons.undo")}
       onClick={updateData}
       size={data?.size || "medium"}
+      disabled={history.isUndoStackEmpty}
     />
   ),
-  commitToHistory: () => false,
 });
 
 export const createRedoAction: ActionCreator = (history) => ({
   name: "redo",
   trackEvent: { category: "history" },
   perform: (elements, appState) =>
-    writeData(elements, appState, () => history.redoOnce()),
+    writeData(appState, () => history.redo(arrayToMap(elements), appState)),
   keyTest: (event) =>
     (event[KEYS.CTRL_OR_CMD] &&
       event.shiftKey &&
@@ -99,7 +88,7 @@ export const createRedoAction: ActionCreator = (history) => ({
       aria-label={t("buttons.redo")}
       onClick={updateData}
       size={data?.size || "medium"}
+      disabled={history.isRedoStackEmpty}
     />
   ),
-  commitToHistory: () => false,
 });

src/actions/actionLinearEditor.ts

@@ -2,6 +2,7 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { isLinearElement } from "../element/typeChecks";
 import { ExcalidrawLinearElement } from "../element/types";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 export const actionToggleLinearEditor = register({
   name: "toggleLinearEditor",
@@ -30,7 +31,7 @@ export const actionToggleLinearEditor = register({
         ...appState,
         editingLinearElement,
       },
-      commitToHistory: false,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: (elements, appState, app) => {

src/actions/actionMenu.tsx

@@ -3,8 +3,8 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
-import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
+import { StoreAction } from "./types";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -14,7 +14,7 @@ export const actionToggleCanvasMenu = register({
       ...appState,
       openMenu: appState.openMenu === "canvas" ? null : "canvas",
     },
-    commitToHistory: false,
+    storeAction: StoreAction.NONE,
   }),
   PanelComponent: ({ appState, updateData }) => (
     <ToolButton
@@ -35,7 +35,7 @@ export const actionToggleEditMenu = register({
       ...appState,
       openMenu: appState.openMenu === "shape" ? null : "shape",
     },
-    commitToHistory: false,
+    storeAction: StoreAction.NONE,
   }),
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton
@@ -52,23 +52,6 @@ export const actionToggleEditMenu = register({
   ),
 });
 
-export const actionFullScreen = register({
-  name: "toggleFullScreen",
-  viewMode: true,
-  trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
-  perform: () => {
-    if (!isFullScreen()) {
-      allowFullScreen();
-    }
-    if (isFullScreen()) {
-      exitFullScreen();
-    }
-    return {
-      commitToHistory: false,
-    };
-  },
-});
-
 export const actionShortcuts = register({
   name: "toggleShortcuts",
   viewMode: true,
@@ -82,7 +65,7 @@ export const actionShortcuts = register({
         ...appState,
         openDialog: appState.openDialog === "help" ? null : "help",
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,

src/actions/actionNavigate.tsx

@@ -3,6 +3,7 @@ import { Avatar } from "../components/Avatar";
 import { centerScrollOn } from "../scene/scroll";
 import { Collaborator } from "../types";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
@@ -11,7 +12,7 @@ export const actionGoToCollaborator = register({
   perform: (_elements, appState, value) => {
     const point = value as Collaborator["pointer"];
     if (!point) {
-      return { appState, commitToHistory: false };
+      return { appState, storeAction: StoreAction.NONE };
     }
 
     return {
@@ -28,7 +29,7 @@ export const actionGoToCollaborator = register({
         // Close mobile menu
         openMenu: appState.openMenu === "canvas" ? null : appState.openMenu,
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   PanelComponent: ({ updateData, data }) => {

src/actions/actionProperties.tsx

@@ -92,6 +92,7 @@ import {
 import { hasStrokeColor } from "../scene/comparisons";
 import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -222,7 +223,7 @@ const changeFontSize = (
           ? [...newFontSizes][0]
           : fallbackValue ?? appState.currentItemFontSize,
     },
-    commitToHistory: true,
+    storeAction: StoreAction.CAPTURE,
   };
 };
 
@@ -251,7 +252,9 @@ export const actionChangeStrokeColor = register({
         ...appState,
         ...value,
       },
-      commitToHistory: !!value.currentItemStrokeColor,
+      storeAction: !!value.currentItemStrokeColor
+        ? StoreAction.CAPTURE
+        : StoreAction.NONE,
     };
   },
   PanelComponent: ({ elements, appState, updateData, appProps }) => (
@@ -294,7 +297,9 @@ export const actionChangeBackgroundColor = register({
         ...appState,
         ...value,
       },
-      commitToHistory: !!value.currentItemBackgroundColor,
+      storeAction: !!value.currentItemBackgroundColor
+        ? StoreAction.CAPTURE
+        : StoreAction.NONE,
     };
   },
   PanelComponent: ({ elements, appState, updateData, appProps }) => (
@@ -328,7 +333,7 @@ export const actionChangeFillStyle = register({
     trackEvent(
       "element",
       "changeFillStyle",
-      `${value} (${app.device.isMobile ? "mobile" : "desktop"})`,
+      `${value} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
     );
     return {
       elements: changeProperty(elements, appState, (el) =>
@@ -337,7 +342,7 @@ export const actionChangeFillStyle = register({
         }),
       ),
       appState: { ...appState, currentItemFillStyle: value },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
@@ -409,7 +414,7 @@ export const actionChangeStrokeWidth = register({
         }),
       ),
       appState: { ...appState, currentItemStrokeWidth: value },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -463,7 +468,7 @@ export const actionChangeSloppiness = register({
         }),
       ),
       appState: { ...appState, currentItemRoughness: value },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -513,7 +518,7 @@ export const actionChangeStrokeStyle = register({
         }),
       ),
       appState: { ...appState, currentItemStrokeStyle: value },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -567,7 +572,7 @@ export const actionChangeOpacity = register({
         true,
       ),
       appState: { ...appState, currentItemOpacity: value },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -725,7 +730,7 @@ export const actionChangeFontFamily = register({
         ...appState,
         currentItemFontFamily: value,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
@@ -814,7 +819,7 @@ export const actionChangeTextAlign = register({
         ...appState,
         currentItemTextAlign: value,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
@@ -894,7 +899,7 @@ export const actionChangeVerticalAlign = register({
       appState: {
         ...appState,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
@@ -967,7 +972,7 @@ export const actionChangeRoundness = register({
         ...appState,
         currentItemRoundness: value,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
@@ -1047,7 +1052,7 @@ export const actionChangeArrowhead = register({
           ? "currentItemStartArrowhead"
           : "currentItemEndArrowhead"]: value.type,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {

src/actions/actionSelectAll.ts

@@ -6,6 +6,7 @@ import { ExcalidrawElement } from "../element/types";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { excludeElementsInFramesFromSelection } from "../scene/selection";
+import { StoreAction } from "./types";
 
 export const actionSelectAll = register({
   name: "selectAll",
@@ -46,7 +47,7 @@ export const actionSelectAll = register({
             ? new LinearElementEditor(elements[0], app.scene)
             : null,
       },
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.selectAll",

src/actions/actionStyles.ts

@@ -20,9 +20,12 @@ import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
   getDefaultRoundnessTypeForElement,
-  isFrameElement,
+  isFrameLikeElement,
+  isArrowElement,
 } from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
+import { ExcalidrawTextElement } from "../element/types";
+import { StoreAction } from "./types";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -46,7 +49,7 @@ export const actionCopyStyles = register({
         ...appState,
         toast: { message: t("toast.copyStyles") },
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   contextItemLabel: "labels.copyStyles",
@@ -62,7 +65,7 @@ export const actionPasteStyles = register({
     const pastedElement = elementsCopied[0];
     const boundTextElement = elementsCopied[1];
     if (!isExcalidrawElement(pastedElement)) {
-      return { elements, commitToHistory: false };
+      return { elements, storeAction: StoreAction.NONE };
     }
 
     const selectedElements = getSelectedElements(elements, appState, {
@@ -99,16 +102,19 @@ export const actionPasteStyles = register({
 
           if (isTextElement(newElement)) {
             const fontSize =
-              elementStylesToCopyFrom?.fontSize || DEFAULT_FONT_SIZE;
+              (elementStylesToCopyFrom as ExcalidrawTextElement).fontSize ||
+              DEFAULT_FONT_SIZE;
             const fontFamily =
-              elementStylesToCopyFrom?.fontFamily || DEFAULT_FONT_FAMILY;
+              (elementStylesToCopyFrom as ExcalidrawTextElement).fontFamily ||
+              DEFAULT_FONT_FAMILY;
             newElement = newElementWith(newElement, {
               fontSize,
               fontFamily,
               textAlign:
-                elementStylesToCopyFrom?.textAlign || DEFAULT_TEXT_ALIGN,
+                (elementStylesToCopyFrom as ExcalidrawTextElement).textAlign ||
+                DEFAULT_TEXT_ALIGN,
               lineHeight:
-                elementStylesToCopyFrom.lineHeight ||
+                (elementStylesToCopyFrom as ExcalidrawTextElement).lineHeight ||
                 getDefaultLineHeight(fontFamily),
             });
             let container = null;
@@ -123,14 +129,17 @@ export const actionPasteStyles = register({
             redrawTextBoundingBox(newElement, container);
           }
 
-          if (newElement.type === "arrow") {
+          if (
+            newElement.type === "arrow" &&
+            isArrowElement(elementStylesToCopyFrom)
+          ) {
             newElement = newElementWith(newElement, {
               startArrowhead: elementStylesToCopyFrom.startArrowhead,
               endArrowhead: elementStylesToCopyFrom.endArrowhead,
             });
           }
 
-          if (isFrameElement(element)) {
+          if (isFrameLikeElement(element)) {
             newElement = newElementWith(newElement, {
               roundness: null,
               backgroundColor: "transparent",
@@ -141,7 +150,7 @@ export const actionPasteStyles = register({
         }
         return element;
       }),
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.pasteStyles",

src/actions/actionToggleGridMode.tsx

@@ -2,6 +2,7 @@ import { CODES, KEYS } from "../keys";
 import { register } from "./register";
 import { GRID_SIZE } from "../constants";
 import { AppState } from "../types";
+import { StoreAction } from "./types";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
@@ -17,7 +18,7 @@ export const actionToggleGridMode = register({
         gridSize: this.checked!(appState) ? null : GRID_SIZE,
         objectsSnapModeEnabled: false,
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,

src/actions/actionToggleObjectsSnapMode.tsx

@@ -1,5 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 export const actionToggleObjectsSnapMode = register({
   name: "objectsSnapMode",
@@ -15,7 +16,7 @@ export const actionToggleObjectsSnapMode = register({
         objectsSnapModeEnabled: !this.checked!(appState),
         gridSize: null,
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   checked: (appState) => appState.objectsSnapModeEnabled,

src/actions/actionToggleStats.tsx

@@ -1,5 +1,6 @@
 import { register } from "./register";
 import { CODES, KEYS } from "../keys";
+import { StoreAction } from "./types";
 
 export const actionToggleStats = register({
   name: "stats",
@@ -11,7 +12,7 @@ export const actionToggleStats = register({
         ...appState,
         showStats: !this.checked!(appState),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   checked: (appState) => appState.showStats,

src/actions/actionToggleViewMode.tsx

@@ -1,5 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 export const actionToggleViewMode = register({
   name: "viewMode",
@@ -14,7 +15,7 @@ export const actionToggleViewMode = register({
         ...appState,
         viewModeEnabled: !this.checked!(appState),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   checked: (appState) => appState.viewModeEnabled,

src/actions/actionToggleZenMode.tsx

@@ -1,5 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { StoreAction } from "./types";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
@@ -14,7 +15,7 @@ export const actionToggleZenMode = register({
         ...appState,
         zenModeEnabled: !this.checked!(appState),
       },
-      commitToHistory: false,
+      storeAction: StoreAction.NONE,
     };
   },
   checked: (appState) => appState.zenModeEnabled,

src/actions/actionZindex.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   moveOneLeft,
   moveOneRight,
@@ -16,6 +15,7 @@ import {
   SendToBackIcon,
 } from "../components/icons";
 import { isDarwin } from "../constants";
+import { StoreAction } from "./types";
 
 export const actionSendBackward = register({
   name: "sendBackward",
@@ -24,7 +24,7 @@ export const actionSendBackward = register({
     return {
       elements: moveOneLeft(elements, appState),
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.sendBackward",
@@ -52,7 +52,7 @@ export const actionBringForward = register({
     return {
       elements: moveOneRight(elements, appState),
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.bringForward",
@@ -80,7 +80,7 @@ export const actionSendToBack = register({
     return {
       elements: moveAllLeft(elements, appState),
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.sendToBack",
@@ -116,7 +116,7 @@ export const actionBringToFront = register({
     return {
       elements: moveAllRight(elements, appState),
       appState,
-      commitToHistory: true,
+      storeAction: StoreAction.CAPTURE,
     };
   },
   contextItemLabel: "labels.bringToFront",

src/actions/index.ts

@@ -44,7 +44,6 @@ export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
 export {
   actionToggleCanvasMenu,
   actionToggleEditMenu,
-  actionFullScreen,
   actionShortcuts,
 } from "./actionMenu";
 

src/actions/manager.tsx

@@ -29,7 +29,7 @@ const trackAction = (
           trackEvent(
             action.trackEvent.category,
             action.trackEvent.action || action.name,
-            `${source} (${app.device.isMobile ? "mobile" : "desktop"})`,
+            `${source} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
           );
         }
       }

src/actions/types.ts

@@ -10,6 +10,12 @@ import { MarkOptional } from "../utility-types";
 
 export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api";
 
+export enum StoreAction {
+  NONE = "none",
+  UPDATE = "update", // TODO_UNDO: think about better naming as this one is confusing
+  CAPTURE = "capture",
+}
+
 /** if false, the action should be prevented */
 export type ActionResult =
   | {
@@ -19,8 +25,7 @@ export type ActionResult =
         "offsetTop" | "offsetLeft" | "width" | "height"
       > | null;
       files?: BinaryFiles | null;
-      commitToHistory: boolean;
-      syncHistory?: boolean;
+      storeAction: StoreAction;
       replaceFiles?: boolean;
     }
   | false;

src/change.ts

@@ -0,0 +1,567 @@
+import { newElementWith } from "./element/mutateElement";
+import { ExcalidrawElement } from "./element/types";
+import {
+  AppState,
+  ObservedAppState,
+  ObservedElementsAppState,
+  ObservedStandaloneAppState,
+} from "./types";
+import { SubtypeOf } from "./utility-types";
+import { isShallowEqual } from "./utils";
+
+/**
+ * Represents the difference between two `T` objects.
+ *
+ * Keeping it as pure object (without transient state, side-effects, etc.), so we don't have to instantiate it on load.
+ */
+class Delta<T> {
+  private constructor(
+    public readonly from: Partial<T>,
+    public readonly to: Partial<T>,
+  ) {}
+
+  public static create<T>(
+    from: Partial<T>,
+    to: Partial<T>,
+    modifier?: (delta: Partial<T>) => Partial<T>,
+    modifierOptions?: "from" | "to",
+  ) {
+    const modifiedFrom =
+      modifier && modifierOptions !== "to" ? modifier(from) : from;
+    const modifiedTo =
+      modifier && modifierOptions !== "from" ? modifier(to) : to;
+
+    return new Delta(modifiedFrom, modifiedTo);
+  }
+
+  /**
+   * Calculates the delta between two objects.
+   *
+   * @param prevObject - The previous state of the object.
+   * @param nextObject - The next state of the object.
+   *
+   * @returns new Delta instance.
+   */
+  public static calculate<T extends Object>(
+    prevObject: T,
+    nextObject: T,
+    modifier?: (delta: Partial<T>) => Partial<T>,
+  ): Delta<T> {
+    if (prevObject === nextObject) {
+      return Delta.empty();
+    }
+
+    const from = {} as Partial<T>;
+    const to = {} as Partial<T>;
+
+    const unionOfKeys = new Set([
+      ...Object.keys(prevObject),
+      ...Object.keys(nextObject),
+    ]);
+
+    for (const key of unionOfKeys) {
+      const prevValue = prevObject[key as keyof T];
+      const nextValue = nextObject[key as keyof T];
+
+      if (prevValue !== nextValue) {
+        from[key as keyof T] = prevValue;
+        to[key as keyof T] = nextValue;
+      }
+    }
+    return Delta.create(from, to, modifier);
+  }
+
+  public static empty() {
+    return new Delta({}, {});
+  }
+
+  public static isEmpty<T>(delta: Delta<T>): boolean {
+    return !Object.keys(delta.from).length && !Object.keys(delta.to).length;
+  }
+
+  /**
+   * Compares if the delta contains any different values compared to the object.
+   *
+   * WARN: it's based on shallow compare performed only on the first level, won't work for objects with deeper props.
+   */
+  public static containsDifference<T>(delta: Partial<T>, object: T): boolean {
+    const anyDistinctKey = this.distinctKeysIterator(delta, object).next()
+      .value;
+    return !!anyDistinctKey;
+  }
+
+  /**
+   * Returns all the keys that have distinct values.
+   *
+   * WARN: it's based on shallow compare performed only on the first level, won't work for objects with deeper props.
+   */
+  public static gatherDifferences<T>(delta: Partial<T>, object: T) {
+    const distinctKeys = new Set<string>();
+
+    for (const key of this.distinctKeysIterator(delta, object)) {
+      distinctKeys.add(key);
+    }
+
+    return Array.from(distinctKeys);
+  }
+
+  private static *distinctKeysIterator<T>(delta: Partial<T>, object: T) {
+    for (const [key, deltaValue] of Object.entries(delta)) {
+      const objectValue = object[key as keyof T];
+
+      if (deltaValue !== objectValue) {
+        // TODO_UNDO: staticly fail (typecheck) on deeper objects?
+        if (
+          typeof deltaValue === "object" &&
+          typeof objectValue === "object" &&
+          deltaValue !== null &&
+          objectValue !== null &&
+          isShallowEqual(
+            deltaValue as Record<string, any>,
+            objectValue as Record<string, any>,
+          )
+        ) {
+          continue;
+        }
+
+        yield key;
+      }
+    }
+  }
+}
+
+/**
+ * Encapsulates the modifications captured as `Delta`/s.
+ */
+interface Change<T> {
+  /**
+   * Inverses the `Delta`s inside while creating a new `Change`.
+   */
+  inverse(): Change<T>;
+
+  /**
+   * Applies the `Change` to the previous object.
+   *
+   * @returns new object instance and boolean, indicating if there was any visible change made.
+   */
+  applyTo(previous: Readonly<T>, ...options: unknown[]): [T, boolean];
+
+  /**
+   * Checks whether there are actually `Delta`s.
+   */
+  isEmpty(): boolean;
+}
+
+export class AppStateChange implements Change<AppState> {
+  private constructor(private readonly delta: Delta<ObservedAppState>) {}
+
+  public static calculate<T extends Partial<ObservedAppState>>(
+    prevAppState: T,
+    nextAppState: T,
+  ): AppStateChange {
+    const delta = Delta.calculate(prevAppState, nextAppState);
+    return new AppStateChange(delta);
+  }
+
+  public static empty() {
+    return new AppStateChange(Delta.create({}, {}));
+  }
+
+  public inverse(): AppStateChange {
+    const inversedDelta = Delta.create(this.delta.to, this.delta.from);
+    return new AppStateChange(inversedDelta);
+  }
+
+  public applyTo(
+    appState: Readonly<AppState>,
+    elements: Readonly<Map<string, ExcalidrawElement>>,
+  ): [AppState, boolean] {
+    const constainsVisibleChanges = this.checkForVisibleChanges(
+      appState,
+      elements,
+    );
+
+    const newAppState = {
+      ...appState,
+      ...this.delta.to, // TODO_UNDO: probably shouldn't apply element related changes
+    };
+
+    return [newAppState, constainsVisibleChanges];
+  }
+
+  public isEmpty(): boolean {
+    return Delta.isEmpty(this.delta);
+  }
+
+  private checkForVisibleChanges(
+    appState: ObservedAppState,
+    elements: Map<string, ExcalidrawElement>,
+  ): boolean {
+    const containsStandaloneDifference = Delta.containsDifference(
+      AppStateChange.stripElementsProps(this.delta.to),
+      appState,
+    );
+
+    if (containsStandaloneDifference) {
+      // We detected a a difference which is unrelated to the elements
+      return true;
+    }
+
+    const containsElementsDifference = Delta.containsDifference(
+      AppStateChange.stripStandaloneProps(this.delta.to),
+      appState,
+    );
+
+    if (!containsStandaloneDifference && !containsElementsDifference) {
+      // There is no difference detected at all
+      return false;
+    }
+
+    // We need to handle elements differences separately,
+    // as they could be related to deleted elements and/or they could on their own result in no visible action
+    const changedDeltaKeys = Delta.gatherDifferences(
+      AppStateChange.stripStandaloneProps(this.delta.to),
+      appState,
+    ) as Array<keyof ObservedElementsAppState>;
+
+    // Check whether delta properties are related to the existing non-deleted elements
+    for (const key of changedDeltaKeys) {
+      switch (key) {
+        case "selectedElementIds":
+          if (
+            AppStateChange.checkForSelectedElementsDifferences(
+              this.delta.to[key],
+              appState,
+              elements,
+            )
+          ) {
+            return true;
+          }
+          break;
+        case "selectedLinearElement":
+        case "editingLinearElement":
+          if (
+            AppStateChange.checkForLinearElementDifferences(
+              this.delta.to[key],
+              elements,
+            )
+          ) {
+            return true;
+          }
+          break;
+        case "editingGroupId":
+        case "selectedGroupIds":
+          return AppStateChange.checkForGroupsDifferences();
+        default: {
+          // WARN: this exhaustive check in the switch statement is here to catch unexpected future changes
+          // TODO_UNDO: use assertNever
+          const exhaustiveCheck: never = key;
+          throw new Error(
+            `Unknown ObservedElementsAppState key '${exhaustiveCheck}'.`,
+          );
+        }
+      }
+    }
+
+    return false;
+  }
+
+  private static checkForSelectedElementsDifferences(
+    deltaIds: ObservedElementsAppState["selectedElementIds"] | undefined,
+    appState: Pick<AppState, "selectedElementIds">,
+    elements: Map<string, ExcalidrawElement>,
+  ) {
+    if (!deltaIds) {
+      // There are no selectedElementIds in the delta
+      return;
+    }
+
+    // TODO_UNDO: it could have been visible before (and now it's not)
+    // TODO_UNDO: it could have been selected 
+    for (const id of Object.keys(deltaIds)) {
+      const element = elements.get(id);
+
+      if (element && !element.isDeleted) {
+        // // TODO_UNDO: breaks multi selection
+        // if (appState.selectedElementIds[id]) {
+        //   // Element is already selected
+        //   return;
+        // }
+
+        // Found related visible element!
+        return true;
+      }
+    }
+  }
+
+  private static checkForLinearElementDifferences(
+    linearElement:
+      | ObservedElementsAppState["editingLinearElement"]
+      | ObservedAppState["selectedLinearElement"]
+      | undefined,
+    elements: Map<string, ExcalidrawElement>,
+  ) {
+    if (!linearElement) {
+      return;
+    }
+
+    const element = elements.get(linearElement.elementId);
+
+    if (element && !element.isDeleted) {
+      // Found related visible element!
+      return true;
+    }
+  }
+
+  // Currently we don't have an index of elements by groupIds, which means
+  // the calculation for getting the visible elements based on the groupIds stored in delta
+  // is not worth performing - due to perf. and dev. complexity.
+  //
+  // Therefore we are accepting in these cases empty undos / redos, which should be pretty rare:
+  // - only when one of these (or both) are in delta and the are no non deleted elements containing these group ids
+  private static checkForGroupsDifferences() {
+    return true;
+  }
+
+  private static stripElementsProps(
+    delta: Partial<ObservedAppState>,
+  ): Partial<ObservedStandaloneAppState> {
+    // WARN: Do not remove the type-casts as they here for exhaustive type checks
+    const {
+      editingGroupId,
+      selectedGroupIds,
+      selectedElementIds,
+      editingLinearElement,
+      selectedLinearElement,
+      ...standaloneProps
+    } = delta as ObservedAppState;
+
+    return standaloneProps as SubtypeOf<
+      typeof standaloneProps,
+      ObservedStandaloneAppState
+    >;
+  }
+
+  private static stripStandaloneProps(
+    delta: Partial<ObservedAppState>,
+  ): Partial<ObservedElementsAppState> {
+    // WARN: Do not remove the type-casts as they here for exhaustive type checks
+    const { name, viewBackgroundColor, ...elementsProps } =
+      delta as ObservedAppState;
+
+    return elementsProps as SubtypeOf<
+      typeof elementsProps,
+      ObservedElementsAppState
+    >;
+  }
+}
+
+/**
+ * Elements change is a low level primitive to capture a change between two sets of elements.
+ * It does so by encapsulating forward and backward `Delta`s, which allow to travel in both directions.
+ *
+ * We could be smarter about the change in the future, ideas for improvements are:
+ * - for memory, share the same delta instances between different deltas (flyweight-like)
+ * - for serialization, compress the deltas into a tree-like structures with custom pointers or let one delta instance contain multiple element ids
+ * - for performance, emit the changes directly by the user actions, then apply them in from store into the state (no diffing!)
+ * - for performance, add operations in addition to deltas, which increment (decrement) properties by given value (could be used i.e. for presence-like move)
+ */
+export class ElementsChange implements Change<Map<string, ExcalidrawElement>> {
+  private constructor(
+    // TODO_UNDO: re-think the possible need for added/ remove/ updated deltas (possibly for handling edge cases with deletion, fixing bindings for deletion, showing changes added/modified/updated for version end etc.)
+    private readonly deltas: Map<string, Delta<ExcalidrawElement>>,
+  ) {}
+
+  public static create(deltas: Map<string, Delta<ExcalidrawElement>>) {
+    return new ElementsChange(deltas);
+  }
+
+  /**
+   * Calculates the `Delta`s between the previous and next set of elements.
+   *
+   * @param prevElements - Map representing the previous state of elements.
+   * @param nextElements - Map representing the next state of elements.
+   *
+   * @returns `ElementsChange` instance representing the `Delta` changes between the two sets of elements.
+   */
+  public static calculate<T extends ExcalidrawElement>(
+    prevElements: Map<string, ExcalidrawElement>,
+    nextElements: Map<string, ExcalidrawElement>,
+  ): ElementsChange {
+    if (prevElements === nextElements) {
+      return ElementsChange.empty();
+    }
+
+    const deltas = new Map<string, Delta<T>>();
+
+    // This might be needed only in same edge cases, like during collab, when `isDeleted` elements get removed
+    for (const prevElement of prevElements.values()) {
+      const nextElement = nextElements.get(prevElement.id);
+
+      // Element got removed
+      if (!nextElement) {
+        const from = { ...prevElement, isDeleted: false } as T;
+        const to = { isDeleted: true } as T;
+
+        const delta = Delta.create(
+          from,
+          to,
+          ElementsChange.stripIrrelevantProps,
+        );
+
+        deltas.set(prevElement.id, delta as Delta<T>);
+      }
+    }
+
+    for (const nextElement of nextElements.values()) {
+      const prevElement = prevElements.get(nextElement.id);
+
+      // Element got added
+      if (!prevElement) {
+        if (nextElement.isDeleted) {
+          // Special case when an element is added as deleted (i.e. through the API).
+          // Creating a delta for it wouldn't make sense, as it would go from isDeleted `true` into `true` again.
+          // We are going to skip it for now, later we could be have separate `added` & `removed` entries in the elements change,
+          // so that we would distinguish between actual addition, removal and "soft" (un)deletion.
+          continue;
+        }
+
+        const from = { isDeleted: true } as T;
+        const to = { ...nextElement, isDeleted: false } as T;
+
+        const delta = Delta.create(
+          from,
+          to,
+          ElementsChange.stripIrrelevantProps,
+        );
+
+        deltas.set(nextElement.id, delta as Delta<T>);
+
+        continue;
+      }
+
+      // Element got updated
+      if (prevElement.versionNonce !== nextElement.versionNonce) {
+        // O(n^2) here, but it's not as bad as it looks:
+        // - we do this only on history recordings, not on every frame
+        // - we do this only on changed elements
+        // - # of element's properties is reasonably small
+        // - otherwise we would have to emit deltas on user actions & apply them on every frame
+        const delta = Delta.calculate<ExcalidrawElement>(
+          prevElement,
+          nextElement,
+          ElementsChange.stripIrrelevantProps,
+        );
+
+        // Make sure there are at least some changes (except changes to irrelevant data)
+        if (!Delta.isEmpty(delta)) {
+          deltas.set(nextElement.id, delta as Delta<T>);
+        }
+      }
+    }
+
+    return new ElementsChange(deltas);
+  }
+
+  public static empty() {
+    return new ElementsChange(new Map());
+  }
+
+  public inverse(): ElementsChange {
+    const deltas = new Map<string, Delta<ExcalidrawElement>>();
+
+    for (const [id, delta] of this.deltas.entries()) {
+      deltas.set(id, Delta.create(delta.to, delta.from));
+    }
+
+    return new ElementsChange(deltas);
+  }
+
+  public applyTo(
+    elements: Readonly<Map<string, ExcalidrawElement>>,
+  ): [Map<string, ExcalidrawElement>, boolean] {
+    let containsVisibleDifference = false;
+
+    for (const [id, delta] of this.deltas.entries()) {
+      const existingElement = elements.get(id);
+
+      if (existingElement) {
+        // Check if there was actually any visible change before applying
+        if (!containsVisibleDifference) {
+          // Special case, when delta deletes element, it results in a visible change
+          if (existingElement.isDeleted && delta.to.isDeleted === false) {
+            containsVisibleDifference = true;
+          } else if (!existingElement.isDeleted) {
+            // Check for any difference on a visible element
+            containsVisibleDifference = Delta.containsDifference(
+              delta.to,
+              existingElement,
+            );
+          }
+        }
+
+        elements.set(id, newElementWith(existingElement, delta.to, true));
+      }
+    }
+
+    return [elements, containsVisibleDifference];
+  }
+
+  public isEmpty(): boolean {
+    // TODO_UNDO: might need to go through all deltas and check for emptiness
+    return this.deltas.size === 0;
+  }
+
+  /**
+   * Update the delta/s based on the existing elements.
+   *
+   * @param elements current elements
+   * @param modifierOptions defines which of the delta (`from` or `to`) will be updated
+   * @returns new instance with modified delta/s
+   */
+  public applyLatestChanges(
+    elements: Map<string, ExcalidrawElement>,
+    modifierOptions: "from" | "to",
+  ): ElementsChange {
+    const modifier =
+      (element: ExcalidrawElement) => (partial: Partial<ExcalidrawElement>) => {
+        const modifiedPartial: { [key: string]: unknown } = {};
+
+        for (const key of Object.keys(partial)) {
+          modifiedPartial[key] = element[key as keyof ExcalidrawElement];
+        }
+
+        return modifiedPartial;
+      };
+
+    const deltas = new Map<string, Delta<ExcalidrawElement>>();
+
+    for (const [id, delta] of this.deltas.entries()) {
+      const existingElement = elements.get(id);
+
+      if (existingElement) {
+        const modifiedDelta = Delta.create(
+          delta.from,
+          delta.to,
+          modifier(existingElement),
+          modifierOptions,
+        );
+
+        deltas.set(id, modifiedDelta);
+      } else {
+        // Keep whatever we had
+        deltas.set(id, delta);
+      }
+    }
+
+    return ElementsChange.create(deltas);
+  }
+
+  private static stripIrrelevantProps(delta: Partial<ExcalidrawElement>) {
+    // TODO_UNDO: is seed correctly stripped?
+    const { id, updated, version, versionNonce, seed, ...strippedDelta } =
+      delta;
+
+    return strippedDelta;
+  }
+}

src/clipboard.ts

@@ -9,7 +9,10 @@ import {
   EXPORT_DATA_TYPES,
   MIME_TYPES,
 } from "./constants";
-import { isInitializedImageElement } from "./element/typeChecks";
+import {
+  isFrameLikeElement,
+  isInitializedImageElement,
+} from "./element/typeChecks";
 import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
@@ -124,7 +127,7 @@ export const serializeAsClipboardJSON = ({
   files: BinaryFiles | null;
 }) => {
   const framesToCopy = new Set(
-    elements.filter((element) => element.type === "frame"),
+    elements.filter((element) => isFrameLikeElement(element)),
   );
   let foundFile = false;
 

src/components/Actions.scss

@@ -12,6 +12,7 @@
   font-size: 0.875rem !important;
   width: var(--lg-button-size);
   height: var(--lg-button-size);
+
   svg {
     width: var(--lg-icon-size) !important;
     height: var(--lg-icon-size) !important;

src/components/Actions.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawElementType } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
@@ -13,7 +13,7 @@ import {
   hasStrokeWidth,
 } from "../scene";
 import { SHAPES } from "../shapes";
-import { AppClassProperties, UIAppState, Zoom } from "../types";
+import { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import { capitalizeString, isTransparent } from "../utils";
 import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
@@ -36,6 +36,8 @@ import {
   frameToolIcon,
   mermaidLogoIcon,
   laserPointerToolIcon,
+  OpenAIIcon,
+  MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
 
@@ -79,7 +81,8 @@ export const SelectedShapeActions = ({
   const showLinkIcon =
     targetElements.length === 1 || isSingleElementBoundContainer;
 
-  let commonSelectedType: string | null = targetElements[0]?.type || null;
+  let commonSelectedType: ExcalidrawElementType | null =
+    targetElements[0]?.type || null;
 
   for (const element of targetElements) {
     if (element.type !== commonSelectedType) {
@@ -94,7 +97,8 @@ export const SelectedShapeActions = ({
         {((hasStrokeColor(appState.activeTool.type) &&
           appState.activeTool.type !== "image" &&
           commonSelectedType !== "image" &&
-          commonSelectedType !== "frame") ||
+          commonSelectedType !== "frame" &&
+          commonSelectedType !== "magicframe") ||
           targetElements.some((element) => hasStrokeColor(element.type))) &&
           renderAction("changeStrokeColor")}
       </div>
@@ -202,8 +206,8 @@ export const SelectedShapeActions = ({
         <fieldset>
           <legend>{t("labels.actions")}</legend>
           <div className="buttonList">
-            {!device.isMobile && renderAction("duplicateSelection")}
-            {!device.isMobile && renderAction("deleteSelectedElements")}
+            {!device.editor.isMobile && renderAction("duplicateSelection")}
+            {!device.editor.isMobile && renderAction("deleteSelectedElements")}
             {renderAction("group")}
             {renderAction("ungroup")}
             {showLinkIcon && renderAction("hyperlink")}
@@ -218,10 +222,12 @@ export const ShapesSwitcher = ({
   activeTool,
   appState,
   app,
+  UIOptions,
 }: {
   activeTool: UIAppState["activeTool"];
   appState: UIAppState;
   app: AppClassProperties;
+  UIOptions: AppProps["UIOptions"];
 }) => {
   const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
 
@@ -232,6 +238,14 @@ export const ShapesSwitcher = ({
   return (
     <>
       {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+        if (
+          UIOptions.tools?.[
+            value as Extract<typeof value, keyof AppProps["UIOptions"]["tools"]>
+          ] === false
+        ) {
+          return null;
+        }
+
         const label = t(`toolBar.${value}`);
         const letter =
           key && capitalizeString(typeof key === "string" ? key : key[0]);
@@ -321,6 +335,9 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.laser")}
           </DropdownMenu.Item>
+          <div style={{ margin: "6px 0", fontSize: 14, fontWeight: 600 }}>
+            Generate
+          </div>
           <DropdownMenu.Item
             onSelect={() => app.setOpenDialog("mermaid")}
             icon={mermaidLogoIcon}
@@ -328,6 +345,25 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.mermaidToExcalidraw")}
           </DropdownMenu.Item>
+
+          {app.props.aiEnabled !== false && (
+            <>
+              <DropdownMenu.Item
+                onSelect={() => app.onMagicButtonSelect()}
+                icon={MagicIcon}
+                data-testid="toolbar-magicframe"
+              >
+                {t("toolBar.magicframe")}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onSelect={() => app.setOpenDialog("magicSettings")}
+                icon={OpenAIIcon}
+                data-testid="toolbar-magicSettings"
+              >
+                {t("toolBar.magicSettings")}
+              </DropdownMenu.Item>
+            </>
+          )}
         </DropdownMenu.Content>
       </DropdownMenu>
     </>

src/components/ColorPicker/ColorInput.tsx

@@ -98,7 +98,7 @@ export const ColorInput = ({
         }}
       />
       {/* TODO reenable on mobile with a better UX */}
-      {!device.isMobile && (
+      {!device.editor.isMobile && (
         <>
           <div
             style={{

src/components/ColorPicker/ColorPicker.tsx

@@ -80,7 +80,7 @@ const ColorPickerPopupContent = ({
   );
 
   const { container } = useExcalidrawContainer();
-  const { isMobile, isLandscape } = useDevice();
+  const device = useDevice();
 
   const colorInputJSX = (
     <div>
@@ -136,8 +136,16 @@ const ColorPickerPopupContent = ({
           updateData({ openPopup: null });
           setActiveColorPickerSection(null);
         }}
-        side={isMobile && !isLandscape ? "bottom" : "right"}
-        align={isMobile && !isLandscape ? "center" : "start"}
+        side={
+          device.editor.isMobile && !device.viewport.isLandscape
+            ? "bottom"
+            : "right"
+        }
+        align={
+          device.editor.isMobile && !device.viewport.isLandscape
+            ? "center"
+            : "start"
+        }
         alignOffset={-16}
         sideOffset={20}
         style={{

src/components/Dialog.scss

@@ -33,14 +33,16 @@
       color: var(--color-gray-40);
     }
 
-    @include isMobile {
-      top: 1.25rem;
-      right: 1.25rem;
-    }
-
     svg {
       width: 1.5rem;
       height: 1.5rem;
     }
   }
+
+  .Dialog--fullscreen {
+    .Dialog__close {
+      top: 1.25rem;
+      right: 1.25rem;
+    }
+  }
 }

src/components/Dialog.tsx

@@ -49,7 +49,7 @@ export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   const [lastActiveElement] = useState(document.activeElement);
   const { id } = useExcalidrawContainer();
-  const device = useDevice();
+  const isFullscreen = useDevice().viewport.isMobile;
 
   useEffect(() => {
     if (!islandNode) {
@@ -101,7 +101,9 @@ export const Dialog = (props: DialogProps) => {
 
   return (
     <Modal
-      className={clsx("Dialog", props.className)}
+      className={clsx("Dialog", props.className, {
+        "Dialog--fullscreen": isFullscreen,
+      })}
       labelledBy="dialog-title"
       maxWidth={getDialogSize(props.size)}
       onCloseRequest={onClose}
@@ -119,7 +121,7 @@ export const Dialog = (props: DialogProps) => {
           title={t("buttons.close")}
           aria-label={t("buttons.close")}
         >
-          {device.isMobile ? back : CloseIcon}
+          {isFullscreen ? back : CloseIcon}
         </button>
         <div className="Dialog__content">{props.children}</div>
       </Island>

src/components/HelpDialog.tsx

@@ -254,7 +254,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("helpDialog.movePageLeftRight")}
               shortcuts={["Shift+PgUp/PgDn"]}
             />
-            <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
             <Shortcut
               label={t("buttons.zenMode")}
               shortcuts={[getShortcutKey("Alt+Z")]}

src/components/HintViewer.tsx

@@ -22,7 +22,7 @@ const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
   const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
   const multiMode = appState.multiElement !== null;
 
-  if (appState.openSidebar && !device.canDeviceFitSidebar) {
+  if (appState.openSidebar && !device.editor.canFitSidebar) {
     return null;
   }
 

src/components/ImageExportDialog.tsx

@@ -22,7 +22,7 @@ import { canvasToBlob } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import { getSelectedElements, isSomeElementSelected } from "../scene";
+import { isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../packages/utils";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
@@ -34,6 +34,8 @@ 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")!;
@@ -51,44 +53,47 @@ export const ErrorCanvasPreview = () => {
 };
 
 type ImageExportModalProps = {
-  appState: UIAppState;
-  elements: readonly NonDeletedExcalidrawElement[];
+  appStateSnapshot: Readonly<UIAppState>;
+  elementsSnapshot: readonly NonDeletedExcalidrawElement[];
   files: BinaryFiles;
   actionManager: ActionManager;
   onExportImage: AppClassProperties["onExportImage"];
 };
 
 const ImageExportModal = ({
-  appState,
-  elements,
+  appStateSnapshot,
+  elementsSnapshot,
   files,
   actionManager,
   onExportImage,
 }: ImageExportModalProps) => {
+  const hasSelection = isSomeElementSelected(
+    elementsSnapshot,
+    appStateSnapshot,
+  );
+
   const appProps = useAppProps();
-  const [projectName, setProjectName] = useState(appState.name);
-
-  const someElementIsSelected = isSomeElementSelected(elements, appState);
-
-  const [exportSelected, setExportSelected] = useState(someElementIsSelected);
+  const [projectName, setProjectName] = useState(appStateSnapshot.name);
+  const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
   const [exportWithBackground, setExportWithBackground] = useState(
-    appState.exportBackground,
+    appStateSnapshot.exportBackground,
   );
   const [exportDarkMode, setExportDarkMode] = useState(
-    appState.exportWithDarkMode,
+    appStateSnapshot.exportWithDarkMode,
   );
-  const [embedScene, setEmbedScene] = useState(appState.exportEmbedScene);
-  const [exportScale, setExportScale] = useState(appState.exportScale);
+  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 = exportSelected
-    ? getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-        includeElementsInFrames: true,
-      })
-    : elements;
+  const { exportedElements, exportingFrame } = prepareElementsForExport(
+    elementsSnapshot,
+    appStateSnapshot,
+    exportSelectionOnly,
+  );
 
   useEffect(() => {
     const previewNode = previewRef.current;
@@ -102,10 +107,18 @@ const ImageExportModal = ({
     }
     exportToCanvas({
       elements: exportedElements,
-      appState,
+      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);
@@ -119,7 +132,17 @@ const ImageExportModal = ({
         console.error(error);
         setRenderError(error);
       });
-  }, [appState, files, exportedElements]);
+  }, [
+    appStateSnapshot,
+    files,
+    exportedElements,
+    exportingFrame,
+    projectName,
+    exportWithBackground,
+    exportDarkMode,
+    exportScale,
+    embedScene,
+  ]);
 
   return (
     <div className="ImageExportModal">
@@ -136,7 +159,8 @@ const ImageExportModal = ({
               value={projectName}
               style={{ width: "30ch" }}
               disabled={
-                typeof appProps.name !== "undefined" || appState.viewModeEnabled
+                typeof appProps.name !== "undefined" ||
+                appStateSnapshot.viewModeEnabled
               }
               onChange={(event) => {
                 setProjectName(event.target.value);
@@ -152,16 +176,16 @@ const ImageExportModal = ({
       </div>
       <div className="ImageExportModal__settings">
         <h3>{t("imageExportDialog.header")}</h3>
-        {someElementIsSelected && (
+        {hasSelection && (
           <ExportSetting
             label={t("imageExportDialog.label.onlySelected")}
             name="exportOnlySelected"
           >
             <Switch
               name="exportOnlySelected"
-              checked={exportSelected}
+              checked={exportSelectionOnly}
               onChange={(checked) => {
-                setExportSelected(checked);
+                setExportSelectionOnly(checked);
               }}
             />
           </ExportSetting>
@@ -243,7 +267,9 @@ const ImageExportModal = ({
             className="ImageExportModal__settings__buttons__button"
             label={t("imageExportDialog.title.exportToPng")}
             onClick={() =>
-              onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements)
+              onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements, {
+                exportingFrame,
+              })
             }
             startIcon={downloadIcon}
           >
@@ -253,7 +279,9 @@ const ImageExportModal = ({
             className="ImageExportModal__settings__buttons__button"
             label={t("imageExportDialog.title.exportToSvg")}
             onClick={() =>
-              onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements)
+              onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements, {
+                exportingFrame,
+              })
             }
             startIcon={downloadIcon}
           >
@@ -264,7 +292,9 @@ const ImageExportModal = ({
               className="ImageExportModal__settings__buttons__button"
               label={t("imageExportDialog.title.copyPngToClipboard")}
               onClick={() =>
-                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements)
+                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
+                  exportingFrame,
+                })
               }
               startIcon={copyIcon}
             >
@@ -325,15 +355,20 @@ export const ImageExportDialog = ({
   onExportImage: AppClassProperties["onExportImage"];
   onCloseRequest: () => void;
 }) => {
-  if (appState.openDialog !== "imageExport") {
-    return null;
-  }
+  // 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
-        elements={elements}
-        appState={appState}
+        elementsSnapshot={elementsSnapshot}
+        appStateSnapshot={appStateSnapshot}
         files={files}
         actionManager={actionManager}
         onExportImage={onExportImage}

src/components/LayerUI.tsx

@@ -1,7 +1,12 @@
 import clsx from "clsx";
 import React from "react";
 import { ActionManager } from "../actions/manager";
-import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
+import {
+  CLASSES,
+  DEFAULT_SIDEBAR,
+  LIBRARY_SIDEBAR_WIDTH,
+  TOOL_TYPE,
+} from "../constants";
 import { showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
@@ -56,6 +61,7 @@ import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
+import { MagicSettings } from "./MagicSettings";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -66,7 +72,7 @@ interface LayerUIProps {
   elements: readonly NonDeletedExcalidrawElement[];
   onLockToggle: () => void;
   onHandToolToggle: () => void;
-  onPenModeToggle: () => void;
+  onPenModeToggle: AppClassProperties["togglePenMode"];
   showExitZenModeBtn: boolean;
   langCode: Language["code"];
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
@@ -77,6 +83,10 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
+  openAIKey: string | null;
+  isOpenAIKeyPersisted: boolean;
+  onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
+  onMagicSettingsConfirm: (apiKey: string, shouldPersist: boolean) => void;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -133,6 +143,10 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
+  openAIKey,
+  isOpenAIKeyPersisted,
+  onOpenAIAPIKeyChange,
+  onMagicSettingsConfirm,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -161,7 +175,10 @@ const LayerUI = ({
   };
 
   const renderImageExportDialog = () => {
-    if (!UIOptions.canvasActions.saveAsImage) {
+    if (
+      !UIOptions.canvasActions.saveAsImage ||
+      appState.openDialog !== "imageExport"
+    ) {
       return null;
     }
 
@@ -246,7 +263,7 @@ const LayerUI = ({
                       >
                         <HintViewer
                           appState={appState}
-                          isMobile={device.isMobile}
+                          isMobile={device.editor.isMobile}
                           device={device}
                           app={app}
                         />
@@ -255,7 +272,7 @@ const LayerUI = ({
                           <PenModeButton
                             zenModeEnabled={appState.zenModeEnabled}
                             checked={appState.penMode}
-                            onChange={onPenModeToggle}
+                            onChange={() => onPenModeToggle(null)}
                             title={t("toolBar.penMode")}
                             penDetected={appState.penDetected}
                           />
@@ -277,6 +294,7 @@ const LayerUI = ({
                           <ShapesSwitcher
                             appState={appState}
                             activeTool={appState.activeTool}
+                            UIOptions={UIOptions}
                             app={app}
                           />
                         </Stack.Row>
@@ -291,9 +309,11 @@ const LayerUI = ({
                         >
                           <LaserPointerButton
                             title={t("toolBar.laser")}
-                            checked={appState.activeTool.type === "laser"}
+                            checked={
+                              appState.activeTool.type === TOOL_TYPE.laser
+                            }
                             onChange={() =>
-                              app.setActiveTool({ type: "laser" })
+                              app.setActiveTool({ type: TOOL_TYPE.laser })
                             }
                             isMobile
                           />
@@ -314,7 +334,7 @@ const LayerUI = ({
             )}
           >
             <UserList collaborators={appState.collaborators} />
-            {renderTopRightUI?.(device.isMobile, appState)}
+            {renderTopRightUI?.(device.editor.isMobile, appState)}
             {!appState.viewModeEnabled &&
               // hide button when sidebar docked
               (!isSidebarDocked ||
@@ -335,7 +355,7 @@ const LayerUI = ({
           trackEvent(
             "sidebar",
             `toggleDock (${docked ? "dock" : "undock"})`,
-            `(${device.isMobile ? "mobile" : "desktop"})`,
+            `(${device.editor.isMobile ? "mobile" : "desktop"})`,
           );
         }}
       />
@@ -363,7 +383,7 @@ const LayerUI = ({
             trackEvent(
               "sidebar",
               `${DEFAULT_SIDEBAR.name} (open)`,
-              `button (${device.isMobile ? "mobile" : "desktop"})`,
+              `button (${device.editor.isMobile ? "mobile" : "desktop"})`,
             );
           }
         }}
@@ -380,7 +400,7 @@ const LayerUI = ({
           {appState.errorMessage}
         </ErrorDialog>
       )}
-      {eyeDropperState && !device.isMobile && (
+      {eyeDropperState && !device.editor.isMobile && (
         <EyeDropper
           colorPickerType={eyeDropperState.colorPickerType}
           onCancel={() => {
@@ -435,6 +455,20 @@ const LayerUI = ({
           }}
         />
       )}
+      {appState.openDialog === "magicSettings" && (
+        <MagicSettings
+          openAIKey={openAIKey}
+          isPersisted={isOpenAIKeyPersisted}
+          onChange={onOpenAIAPIKeyChange}
+          onConfirm={(apiKey, shouldPersist) => {
+            setAppState({ openDialog: null });
+            onMagicSettingsConfirm(apiKey, shouldPersist);
+          }}
+          onClose={() => {
+            setAppState({ openDialog: null });
+          }}
+        />
+      )}
       <ActiveConfirmDialog />
       <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}
@@ -450,7 +484,7 @@ const LayerUI = ({
           }
         />
       )}
-      {device.isMobile && (
+      {device.editor.isMobile && (
         <MobileMenu
           app={app}
           appState={appState}
@@ -467,16 +501,17 @@ const LayerUI = ({
           renderSidebars={renderSidebars}
           device={device}
           renderWelcomeScreen={renderWelcomeScreen}
+          UIOptions={UIOptions}
         />
       )}
-      {!device.isMobile && (
+      {!device.editor.isMobile && (
         <>
           <div
             className="layer-ui__wrapper"
             style={
               appState.openSidebar &&
               isSidebarDocked &&
-              device.canDeviceFitSidebar
+              device.editor.canFitSidebar
                 ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
                 : {}
             }

src/components/LibraryUnit.tsx

@@ -47,7 +47,7 @@ export const LibraryUnit = memo(
     }, [svg]);
 
     const [isHovered, setIsHovered] = useState(false);
-    const isMobile = useDevice().isMobile;
+    const isMobile = useDevice().editor.isMobile;
     const adder = isPending && (
       <div className="library-unit__adder">{PlusIcon}</div>
     );

src/components/MagicButton.tsx

@@ -0,0 +1,38 @@
+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>
+  );
+};

src/components/MagicSettings.scss

@@ -0,0 +1,9 @@
+.excalidraw {
+  .MagicSettings-confirm {
+    padding: 0.5rem 1rem;
+  }
+
+  .MagicSettings__confirm {
+    margin-top: 2rem;
+  }
+}

src/components/MagicSettings.tsx

@@ -0,0 +1,145 @@
+import { useState } from "react";
+import { Dialog } from "./Dialog";
+import { TextField } from "./TextField";
+import { MagicIcon, OpenAIIcon } from "./icons";
+
+import "./MagicSettings.scss";
+import { FilledButton } from "./FilledButton";
+import { CheckboxItem } from "./CheckboxItem";
+import { KEYS } from "../keys";
+import { useUIAppState } from "../context/ui-appState";
+
+const InlineButton = ({ 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>
+  );
+};
+
+export const MagicSettings = (props: {
+  openAIKey: string | null;
+  isPersisted: boolean;
+  onChange: (key: string, shouldPersist: boolean) => void;
+  onConfirm: (key: string, shouldPersist: boolean) => void;
+  onClose: () => void;
+}) => {
+  const { theme } = useUIAppState();
+  const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
+  const [shouldPersist, setShouldPersist] = useState<boolean>(
+    props.isPersisted,
+  );
+
+  const onConfirm = () => {
+    props.onConfirm(keyInputValue.trim(), shouldPersist);
+  };
+
+  return (
+    <Dialog
+      onCloseRequest={() => {
+        props.onClose();
+        props.onConfirm(keyInputValue.trim(), shouldPersist);
+      }}
+      title={
+        <div style={{ display: "flex" }}>
+          Diagram to Code (AI){" "}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0.1rem 0.5rem",
+              marginLeft: "1rem",
+              fontSize: 14,
+              borderRadius: "12px",
+              background: theme === "light" ? "#FFCCCC" : "#703333",
+            }}
+          >
+            Experimental
+          </div>
+        </div>
+      }
+      className="MagicSettings"
+      autofocus={false}
+    >
+      <p
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          marginBottom: 0,
+        }}
+      >
+        For the diagram-to-code feature we use{" "}
+        <InlineButton icon={OpenAIIcon} />
+        OpenAI.
+      </p>
+      <p>
+        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>
+        .
+      </p>
+      <p>
+        Your OpenAI key does not leave the browser, and you can also set your
+        own limit in your OpenAI account dashboard if needed.
+      </p>
+      <TextField
+        isPassword
+        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()}
+      />
+      <p>
+        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.
+      </p>
+
+      <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
+        Persist API key in browser storage
+      </CheckboxItem>
+
+      <p>
+        Once API key is set, you can use the <InlineButton 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>{" "}
+        <InlineButton icon={OpenAIIcon} />.
+      </p>
+
+      <FilledButton
+        className="MagicSettings__confirm"
+        size="large"
+        label="Confirm"
+        onClick={onConfirm}
+      />
+    </Dialog>
+  );
+};

src/components/MobileMenu.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import {
   AppClassProperties,
+  AppProps,
   AppState,
   Device,
   ExcalidrawProps,
@@ -35,7 +36,7 @@ type MobileMenuProps = {
   elements: readonly NonDeletedExcalidrawElement[];
   onLockToggle: () => void;
   onHandToolToggle: () => void;
-  onPenModeToggle: () => void;
+  onPenModeToggle: AppClassProperties["togglePenMode"];
 
   renderTopRightUI?: (
     isMobile: boolean,
@@ -45,6 +46,7 @@ type MobileMenuProps = {
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderWelcomeScreen: boolean;
+  UIOptions: AppProps["UIOptions"];
   app: AppClassProperties;
 };
 
@@ -62,6 +64,7 @@ export const MobileMenu = ({
   renderSidebars,
   device,
   renderWelcomeScreen,
+  UIOptions,
   app,
 }: MobileMenuProps) => {
   const {
@@ -83,6 +86,7 @@ export const MobileMenu = ({
                     <ShapesSwitcher
                       appState={appState}
                       activeTool={appState.activeTool}
+                      UIOptions={UIOptions}
                       app={app}
                     />
                   </Stack.Row>
@@ -94,7 +98,7 @@ export const MobileMenu = ({
                   )}
                   <PenModeButton
                     checked={appState.penMode}
-                    onChange={onPenModeToggle}
+                    onChange={() => onPenModeToggle(null)}
                     title={t("toolBar.penMode")}
                     isMobile
                     penDetected={appState.penDetected}

src/components/Modal.scss

@@ -59,12 +59,6 @@
     &:focus {
       outline: none;
     }
-
-    @include isMobile {
-      max-width: 100%;
-      border: 0;
-      border-radius: 0;
-    }
   }
 
   @keyframes Modal__background__fade-in {
@@ -105,7 +99,7 @@
     }
   }
 
-  @include isMobile {
+  .Dialog--fullscreen {
     .Modal {
       padding: 0;
     }
@@ -116,6 +110,9 @@
       left: 0;
       right: 0;
       bottom: 0;
+      max-width: 100%;
+      border: 0;
+      border-radius: 0;
     }
   }
 }

src/components/PasteChartDialog.tsx

@@ -94,7 +94,7 @@ export const PasteChartDialog = ({
 
   const handleChartClick = (chartType: ChartType, elements: ChartElements) => {
     onInsertElements(elements);
-    trackEvent("magic", "chart", chartType);
+    trackEvent("paste", "chart", chartType);
     setAppState({
       currentChartType: chartType,
       pasteDialog: {

src/components/PublishLibrary.tsx

@@ -8,6 +8,7 @@ import Trans from "./Trans";
 import { LibraryItems, LibraryItem, UIAppState } from "../types";
 import { exportToCanvas, exportToSvg } from "../packages/utils";
 import {
+  EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
   MIME_TYPES,
@@ -19,6 +20,7 @@ import { chunk } from "../utils";
 import DialogActionButton from "./DialogActionButton";
 import { CloseIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
+import { EditorLocalStorage } from "../data/EditorLocalStorage";
 
 import "./PublishLibrary.scss";
 
@@ -31,34 +33,6 @@ interface PublishLibraryDataParams {
   website: string;
 }
 
-const LOCAL_STORAGE_KEY_PUBLISH_LIBRARY = "publish-library-data";
-
-const savePublishLibDataToStorage = (data: PublishLibraryDataParams) => {
-  try {
-    localStorage.setItem(
-      LOCAL_STORAGE_KEY_PUBLISH_LIBRARY,
-      JSON.stringify(data),
-    );
-  } catch (error: any) {
-    // Unable to access window.localStorage
-    console.error(error);
-  }
-};
-
-const importPublishLibDataFromStorage = () => {
-  try {
-    const data = localStorage.getItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
-    if (data) {
-      return JSON.parse(data);
-    }
-  } catch (error: any) {
-    // Unable to access localStorage
-    console.error(error);
-  }
-
-  return null;
-};
-
 const generatePreviewImage = async (libraryItems: LibraryItems) => {
   const MAX_ITEMS_PER_ROW = 6;
   const BOX_SIZE = 128;
@@ -255,7 +229,9 @@ const PublishLibrary = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   useEffect(() => {
-    const data = importPublishLibDataFromStorage();
+    const data = EditorLocalStorage.get<PublishLibraryDataParams>(
+      EDITOR_LS_KEYS.PUBLISH_LIBRARY,
+    );
     if (data) {
       setLibraryData(data);
     }
@@ -328,7 +304,7 @@ const PublishLibrary = ({
           if (response.ok) {
             return response.json().then(({ url }) => {
               // flush data from local storage
-              localStorage.removeItem(LOCAL_STORAGE_KEY_PUBLISH_LIBRARY);
+              EditorLocalStorage.delete(EDITOR_LS_KEYS.PUBLISH_LIBRARY);
               onSuccess({
                 url,
                 authorName: libraryData.authorName,
@@ -384,7 +360,7 @@ const PublishLibrary = ({
 
   const onDialogClose = useCallback(() => {
     updateItemsInStorage(clonedLibItems);
-    savePublishLibDataToStorage(libraryData);
+    EditorLocalStorage.set(EDITOR_LS_KEYS.PUBLISH_LIBRARY, libraryData);
     onClose();
   }, [clonedLibItems, onClose, updateItemsInStorage, libraryData]);
 

src/components/Sidebar/Sidebar.tsx

@@ -113,11 +113,11 @@ export const SidebarInner = forwardRef(
           if ((event.target as Element).closest(".sidebar-trigger")) {
             return;
           }
-          if (!docked || !device.canDeviceFitSidebar) {
+          if (!docked || !device.editor.canFitSidebar) {
             closeLibrary();
           }
         },
-        [closeLibrary, docked, device.canDeviceFitSidebar],
+        [closeLibrary, docked, device.editor.canFitSidebar],
       ),
     );
 
@@ -125,7 +125,7 @@ export const SidebarInner = forwardRef(
       const handleKeyDown = (event: KeyboardEvent) => {
         if (
           event.key === KEYS.ESCAPE &&
-          (!docked || !device.canDeviceFitSidebar)
+          (!docked || !device.editor.canFitSidebar)
         ) {
           closeLibrary();
         }
@@ -134,7 +134,7 @@ export const SidebarInner = forwardRef(
       return () => {
         document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
       };
-    }, [closeLibrary, docked, device.canDeviceFitSidebar]);
+    }, [closeLibrary, docked, device.editor.canFitSidebar]);
 
     return (
       <Island

src/components/Sidebar/SidebarHeader.tsx

@@ -18,7 +18,7 @@ export const SidebarHeader = ({
   const props = useContext(SidebarPropsContext);
 
   const renderDockButton = !!(
-    device.canDeviceFitSidebar && props.shouldRenderDockButton
+    device.editor.canFitSidebar && props.shouldRenderDockButton
   );
 
   return (

src/components/TextField.tsx

@@ -4,12 +4,15 @@ import {
   useImperativeHandle,
   KeyboardEvent,
   useLayoutEffect,
+  useState,
 } from "react";
 import clsx from "clsx";
 
 import "./TextField.scss";
+import { Button } from "./Button";
+import { eyeIcon, eyeClosedIcon } from "./icons";
 
-export type TextFieldProps = {
+type TextFieldProps = {
   value?: string;
 
   onChange?: (value: string) => void;
@@ -22,6 +25,7 @@ export type TextFieldProps = {
 
   label?: string;
   placeholder?: string;
+  isPassword?: boolean;
 };
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
@@ -35,6 +39,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       readonly,
       selectOnRender,
       onKeyDown,
+      isPassword = false,
     },
     ref,
   ) => {
@@ -48,6 +53,8 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       }
     }, [selectOnRender]);
 
+    const [isVisible, setIsVisible] = useState<boolean>(true);
+
     return (
       <div
         className={clsx("ExcTextField", {
@@ -64,14 +71,22 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           })}
         >
           <input
+            type={isPassword && isVisible ? "password" : undefined}
             readOnly={readonly}
-            type="text"
             value={value}
             placeholder={placeholder}
             ref={innerRef}
             onChange={(event) => onChange?.(event.target.value)}
             onKeyDown={onKeyDown}
           />
+          {isPassword && (
+            <Button
+              onSelect={() => setIsVisible(!isVisible)}
+              style={{ border: 0 }}
+            >
+              {isVisible ? eyeIcon : eyeClosedIcon}
+            </Button>
+          )}
         </div>
       </div>
     );

src/components/ToolButton.tsx

@@ -24,6 +24,7 @@ type ToolButtonBaseProps = {
   hidden?: boolean;
   visible?: boolean;
   selected?: boolean;
+  disabled?: boolean;
   className?: string;
   style?: CSSProperties;
   isLoading?: boolean;
@@ -123,10 +124,14 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
         type={type}
         onClick={onClick}
         ref={innerRef}
-        disabled={isLoading || props.isLoading}
+        disabled={isLoading || props.isLoading || !!props.disabled}
       >
         {(props.icon || props.label) && (
-          <div className="ToolIcon__icon" aria-hidden="true">
+          <div
+            className="ToolIcon__icon"
+            aria-hidden="true"
+            aria-disabled={!!props.disabled}
+          >
             {props.icon || props.label}
             {props.keyBindingLabel && (
               <span className="ToolIcon__keybinding">

src/components/ToolIcon.scss

@@ -77,8 +77,8 @@
   }
 
   .ToolIcon_type_button,
-  .Modal .ToolIcon_type_button,
-  .ToolIcon_type_button {
+  .Modal .ToolIcon_type_button
+  {
     padding: 0;
     border: none;
     margin: 0;
@@ -101,6 +101,22 @@
       background-color: var(--button-gray-3);
     }
 
+    &:disabled {
+      cursor: default;
+  
+      &:active,
+      &:focus-visible,
+      &:hover {
+        background-color: initial;
+        border: none;
+        box-shadow: none;
+      }
+  
+      svg {
+        color: var(--color-disabled);
+      }
+    }
+
     &--show {
       visibility: visible;
     }
@@ -175,7 +191,8 @@
       }
     }
 
-    .ToolIcon__LaserPointer .ToolIcon__icon {
+    .ToolIcon__LaserPointer .ToolIcon__icon,
+    .ToolIcon__MagicButton .ToolIcon__icon {
       width: var(--default-button-size);
       height: var(--default-button-size);
     }

src/components/canvases/InteractiveCanvas.tsx

@@ -189,8 +189,6 @@ const getRelevantAppStateProps = (
   suggestedBindings: appState.suggestedBindings,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,
-  openSidebar: appState.openSidebar,
-  showHyperlinkPopup: appState.showHyperlinkPopup,
   collaborators: appState.collaborators, // Necessary for collab. sessions
   activeEmbeddable: appState.activeEmbeddable,
   snapLines: appState.snapLines,

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -30,7 +30,7 @@ const MenuContent = ({
   });
 
   const classNames = clsx(`dropdown-menu ${className}`, {
-    "dropdown-menu--mobile": device.isMobile,
+    "dropdown-menu--mobile": device.editor.isMobile,
   }).trim();
 
   return (
@@ -43,7 +43,7 @@ const MenuContent = ({
       >
         {/* the zIndex ensures this menu has higher stacking order,
     see https://github.com/excalidraw/excalidraw/pull/1445 */}
-        {device.isMobile ? (
+        {device.editor.isMobile ? (
           <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
         ) : (
           <Island

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -14,7 +14,7 @@ const MenuItemContent = ({
     <>
       <div className="dropdown-menu-item__icon">{icon}</div>
       <div className="dropdown-menu-item__text">{children}</div>
-      {shortcut && !device.isMobile && (
+      {shortcut && !device.editor.isMobile && (
         <div className="dropdown-menu-item__shortcut">{shortcut}</div>
       )}
     </>

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -18,7 +18,7 @@ const MenuTrigger = ({
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
-      "dropdown-menu-button--mobile": device.isMobile,
+      "dropdown-menu-button--mobile": device.editor.isMobile,
     },
   ).trim();
   return (

src/components/icons.tsx

@@ -1688,3 +1688,57 @@ export const laserPointerToolIcon = createIcon(
 
   20,
 );
+
+export const MagicIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" />
+    <path d="M6 21l15 -15l-3 -3l-15 15l3 3" />
+    <path d="M15 6l3 3" />
+    <path d="M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
+    <path d="M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
+  </g>,
+  tablerIconProps,
+);
+
+export const OpenAIIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35" />
+    <path d="M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946" />
+    <path d="M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348" />
+    <path d="M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45" />
+    <path d="M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946" />
+    <path d="M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42" />
+  </g>,
+  tablerIconProps,
+);
+
+export const fullscreenIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+    <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+    <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+    <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+  </g>,
+  tablerIconProps,
+);
+
+export const eyeIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+    <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+  </g>,
+  tablerIconProps,
+);
+
+export const eyeClosedIcon = createIcon(
+  <g stroke="currentColor" fill="none">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+    <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+    <path d="M3 3l18 18" />
+  </g>,
+  tablerIconProps,
+);

src/components/main-menu/MainMenu.tsx

@@ -29,7 +29,7 @@ const MainMenu = Object.assign(
       const device = useDevice();
       const appState = useUIAppState();
       const setAppState = useExcalidrawSetAppState();
-      const onClickOutside = device.isMobile
+      const onClickOutside = device.editor.isMobile
         ? undefined
         : () => setAppState({ openMenu: null });
 
@@ -54,7 +54,7 @@ const MainMenu = Object.assign(
               })}
             >
               {children}
-              {device.isMobile && appState.collaborators.size > 0 && (
+              {device.editor.isMobile && appState.collaborators.size > 0 && (
                 <fieldset className="UserList-Wrapper">
                   <legend>{t("labels.collaborators")}</legend>
                   <UserList

src/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -21,7 +21,7 @@ const WelcomeScreenMenuItemContent = ({
     <>
       <div className="welcome-screen-menu-item__icon">{icon}</div>
       <div className="welcome-screen-menu-item__text">{children}</div>
-      {shortcut && !device.isMobile && (
+      {shortcut && !device.editor.isMobile && (
         <div className="welcome-screen-menu-item__shortcut">{shortcut}</div>
       )}
     </>

src/constants.ts

@@ -80,6 +80,7 @@ export enum EVENT {
   EXCALIDRAW_LINK = "excalidraw-link",
   MENU_ITEM_SELECT = "menu.itemSelect",
   MESSAGE = "message",
+  FULLSCREENCHANGE = "fullscreenchange",
 }
 
 export const YOUTUBE_STATES = {
@@ -105,6 +106,7 @@ export const FONT_FAMILY = {
   Virgil: 1,
   Helvetica: 2,
   Cascadia: 3,
+  Assistant: 4,
 };
 
 export const THEME = {
@@ -114,13 +116,18 @@ export const THEME = {
 
 export const FRAME_STYLE = {
   strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
-  strokeWidth: 1 as ExcalidrawElement["strokeWidth"],
+  strokeWidth: 2 as ExcalidrawElement["strokeWidth"],
   strokeStyle: "solid" as ExcalidrawElement["strokeStyle"],
   fillStyle: "solid" as ExcalidrawElement["fillStyle"],
   roughness: 0 as ExcalidrawElement["roughness"],
   roundness: null as ExcalidrawElement["roundness"],
   backgroundColor: "transparent" as ExcalidrawElement["backgroundColor"],
   radius: 8,
+  nameOffsetY: 3,
+  nameColorLightTheme: "#999999",
+  nameColorDarkTheme: "#7a7a7a",
+  nameFontSize: 14,
+  nameLineHeight: 1.25,
 };
 
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
@@ -189,6 +196,7 @@ export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
 export const MIN_ZOOM = 0.1;
+export const MAX_ZOOM = 30.0;
 export const HYPERLINK_TOOLTIP_DELAY = 300;
 
 // Report a user inactive after IDLE_THRESHOLD milliseconds
@@ -216,12 +224,13 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     toggleTheme: null,
     saveAsImage: true,
   },
+  tools: {
+    image: true,
+  },
 };
 
 // breakpoints
 // -----------------------------------------------------------------------------
-// sm screen
-export const MQ_SM_MAX_WIDTH = 640;
 // md screen
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
@@ -294,10 +303,6 @@ export const ROUNDNESS = {
   ADAPTIVE_RADIUS: 3,
 } as const;
 
-/** key containt id of precedeing elemnt id we use in reconciliation during
- * collaboration */
-export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
-
 export const ROUGHNESS = {
   architect: 0,
   artist: 1,
@@ -337,4 +342,33 @@ export const DEFAULT_SIDEBAR = {
   defaultTab: LIBRARY_SIDEBAR_TAB,
 } as const;
 
-export const LIBRARY_DISABLED_TYPES = new Set(["embeddable", "image"] as const);
+export const LIBRARY_DISABLED_TYPES = new Set([
+  "iframe",
+  "embeddable",
+  "image",
+] as const);
+
+// use these constants to easily identify reference sites
+export const TOOL_TYPE = {
+  selection: "selection",
+  rectangle: "rectangle",
+  diamond: "diamond",
+  ellipse: "ellipse",
+  arrow: "arrow",
+  line: "line",
+  freedraw: "freedraw",
+  text: "text",
+  image: "image",
+  eraser: "eraser",
+  hand: "hand",
+  frame: "frame",
+  magicframe: "magicframe",
+  embeddable: "embeddable",
+  laser: "laser",
+} as const;
+
+export const EDITOR_LS_KEYS = {
+  OAI_API_KEY: "excalidraw-oai-api-key",
+  // legacy naming (non)scheme
+  PUBLISH_LIBRARY: "publish-library-data",
+} as const;

src/css/styles.scss

@@ -5,9 +5,11 @@
   --zIndex-canvas: 1;
   --zIndex-interactiveCanvas: 2;
   --zIndex-wysiwyg: 3;
+  --zIndex-canvasButtons: 3;
   --zIndex-layerUI: 4;
   --zIndex-eyeDropperBackdrop: 5;
   --zIndex-eyeDropperPreview: 6;
+  --zIndex-hyperlinkContainer: 7;
 
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;

src/css/theme.scss

@@ -97,6 +97,8 @@
   --color-gray-90: #1e1e1e;
   --color-gray-100: #121212;
 
+  --color-disabled: var(--color-gray-40);
+
   --color-warning: #fceeca;
   --color-warning-dark: #f5c354;
   --color-warning-darker: #f3ab2c;

src/css/variables.module.scss

@@ -50,6 +50,15 @@
         color: var(--color-on-primary-container);
       }
     }
+
+    &[aria-disabled="true"] {
+      background: initial;
+      border: none;
+
+      svg {
+        color: var(--color-disabled);
+      }
+    }
   }
 }
 

src/cursor.ts

@@ -99,7 +99,7 @@ export const setCursorForShape = (
     interactiveCanvas.style.cursor = `url(${url}), auto`;
   } else if (!["image", "custom"].includes(appState.activeTool.type)) {
     interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
-  } else {
+  } else if (appState.activeTool.type !== "image") {
     interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
   }
 };

src/data/EditorLocalStorage.ts

@@ -0,0 +1,51 @@
+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}`);
+    }
+  };
+}

src/data/__snapshots__/transform.test.ts.snap

@@ -15,6 +15,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 300,
@@ -50,6 +51,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -86,6 +88,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     "gap": 1,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 35,
@@ -139,6 +142,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     "gap": 3.834326468444573,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -191,6 +195,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 300,
@@ -230,6 +235,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -274,6 +280,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -320,6 +327,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
     "gap": 205,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -371,6 +379,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -417,6 +426,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     "gap": 1,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -468,6 +478,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -508,6 +519,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -543,6 +555,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -584,6 +597,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
     "gap": 1,
   },
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -635,6 +649,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -679,6 +694,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -723,6 +739,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -758,6 +775,7 @@ exports[`Test Transform > should not allow duplicate ids 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 200,
@@ -790,6 +808,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -835,6 +854,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
   "endArrowhead": "triangle",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -880,6 +900,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -925,6 +946,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
   "endArrowhead": null,
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -968,6 +990,7 @@ exports[`Test Transform > should transform regular shapes 1`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -998,6 +1021,7 @@ exports[`Test Transform > should transform regular shapes 2`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1028,6 +1052,7 @@ exports[`Test Transform > should transform regular shapes 3`] = `
   "backgroundColor": "transparent",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1058,6 +1083,7 @@ exports[`Test Transform > should transform regular shapes 4`] = `
   "backgroundColor": "#c0eb75",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1088,6 +1114,7 @@ exports[`Test Transform > should transform regular shapes 5`] = `
   "backgroundColor": "#ffc9c9",
   "boundElements": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1118,6 +1145,7 @@ exports[`Test Transform > should transform regular shapes 6`] = `
   "backgroundColor": "#a5d8ff",
   "boundElements": null,
   "fillStyle": "cross-hatch",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 100,
@@ -1152,6 +1180,7 @@ exports[`Test Transform > should transform text element 1`] = `
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1191,6 +1220,7 @@ exports[`Test Transform > should transform text element 2`] = `
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1233,6 +1263,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1283,6 +1314,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1333,6 +1365,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1383,6 +1416,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "endArrowhead": "arrow",
   "endBinding": null,
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 0,
@@ -1430,6 +1464,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1469,6 +1504,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1508,6 +1544,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1548,6 +1585,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1589,6 +1627,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 35,
@@ -1624,6 +1663,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 85,
@@ -1659,6 +1699,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 170,
@@ -1694,6 +1735,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 120,
@@ -1729,6 +1771,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 85,
@@ -1764,6 +1807,7 @@ exports[`Test Transform > should transform to text containers when label provide
     },
   ],
   "fillStyle": "solid",
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 120,
@@ -1798,6 +1842,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 25,
@@ -1837,6 +1882,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1877,6 +1923,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 75,
@@ -1919,6 +1966,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 50,
@@ -1959,6 +2007,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 75,
@@ -2000,6 +2049,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "fillStyle": "solid",
   "fontFamily": 1,
   "fontSize": 20,
+  "fractionalIndex": null,
   "frameId": null,
   "groupIds": [],
   "height": 75,

src/data/ai/types.ts

@@ -0,0 +1,300 @@
+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;
+  }
+}

src/data/blob.ts

@@ -3,7 +3,7 @@ import { cleanAppStateForExport } from "../appState";
 import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { ExcalidrawElement, FileId } from "../element/types";
-import { CanvasError } from "../errors";
+import { CanvasError, ImageSceneDataError } from "../errors";
 import { t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { AppState, DataURL, LibraryItem } from "../types";
@@ -24,15 +24,12 @@ const parseFileContents = async (blob: Blob | File) => {
       ).decodePngMetadata(blob);
     } catch (error: any) {
       if (error.message === "INVALID") {
-        throw new DOMException(
+        throw new ImageSceneDataError(
           t("alerts.imageDoesNotContainScene"),
-          "EncodingError",
+          "IMAGE_NOT_CONTAINS_SCENE_DATA",
         );
       } else {
-        throw new DOMException(
-          t("alerts.cannotRestoreFromImage"),
-          "EncodingError",
-        );
+        throw new ImageSceneDataError(t("alerts.cannotRestoreFromImage"));
       }
     }
   } else {
@@ -58,15 +55,12 @@ const parseFileContents = async (blob: Blob | File) => {
         });
       } catch (error: any) {
         if (error.message === "INVALID") {
-          throw new DOMException(
+          throw new ImageSceneDataError(
             t("alerts.imageDoesNotContainScene"),
-            "EncodingError",
+            "IMAGE_NOT_CONTAINS_SCENE_DATA",
           );
         } else {
-          throw new DOMException(
-            t("alerts.cannotRestoreFromImage"),
-            "EncodingError",
-          );
+          throw new ImageSceneDataError(t("alerts.cannotRestoreFromImage"));
         }
       }
     }
@@ -131,8 +125,19 @@ export const loadSceneOrLibraryFromBlob = async (
   fileHandle?: FileSystemHandle | null,
 ) => {
   const contents = await parseFileContents(blob);
+  let data;
   try {
-    const data = JSON.parse(contents);
+    try {
+      data = JSON.parse(contents);
+    } catch (error: any) {
+      if (isSupportedImageFile(blob)) {
+        throw new ImageSceneDataError(
+          t("alerts.imageDoesNotContainScene"),
+          "IMAGE_NOT_CONTAINS_SCENE_DATA",
+        );
+      }
+      throw error;
+    }
     if (isValidExcalidrawData(data)) {
       return {
         type: MIME_TYPES.excalidraw,
@@ -162,7 +167,9 @@ export const loadSceneOrLibraryFromBlob = async (
     }
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   } catch (error: any) {
-    console.error(error.message);
+    if (error instanceof ImageSceneDataError) {
+      throw error;
+    }
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   }
 };

src/data/index.ts

@@ -3,11 +3,20 @@ import {
   copyTextToSystemClipboard,
 } from "../clipboard";
 import { DEFAULT_EXPORT_PADDING, isFirefox, MIME_TYPES } from "../constants";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import { getNonDeletedElements } from "../element";
+import { isFrameLikeElement } from "../element/typeChecks";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
 import { t } from "../i18n";
+import { elementsOverlappingBBox } from "../packages/withinBounds";
+import { isSomeElementSelected, getSelectedElements } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import { ExportType } from "../scene/types";
 import { AppState, BinaryFiles } from "../types";
+import { cloneJSON } from "../utils";
 import { canvasToBlob } from "./blob";
 import { fileSave, FileSystemHandle } from "./filesystem";
 import { serializeAsJSON } from "./json";
@@ -15,9 +24,64 @@ import { serializeAsJSON } from "./json";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 
+export type ExportedElements = readonly NonDeletedExcalidrawElement[] & {
+  _brand: "exportedElements";
+};
+
+export const prepareElementsForExport = (
+  elements: readonly ExcalidrawElement[],
+  { selectedElementIds }: Pick<AppState, "selectedElementIds">,
+  exportSelectionOnly: boolean,
+) => {
+  elements = getNonDeletedElements(elements);
+
+  const isExportingSelection =
+    exportSelectionOnly &&
+    isSomeElementSelected(elements, { selectedElementIds });
+
+  let exportingFrame: ExcalidrawFrameLikeElement | null = null;
+  let exportedElements = isExportingSelection
+    ? getSelectedElements(
+        elements,
+        { selectedElementIds },
+        {
+          includeBoundTextElement: true,
+        },
+      )
+    : elements;
+
+  if (isExportingSelection) {
+    if (
+      exportedElements.length === 1 &&
+      isFrameLikeElement(exportedElements[0])
+    ) {
+      exportingFrame = exportedElements[0];
+      exportedElements = elementsOverlappingBBox({
+        elements,
+        bounds: exportingFrame,
+        type: "overlap",
+      });
+    } else if (exportedElements.length > 1) {
+      exportedElements = getSelectedElements(
+        elements,
+        { selectedElementIds },
+        {
+          includeBoundTextElement: true,
+          includeElementsInFrames: true,
+        },
+      );
+    }
+  }
+
+  return {
+    exportingFrame,
+    exportedElements: cloneJSON(exportedElements) as ExportedElements,
+  };
+};
+
 export const exportCanvas = async (
   type: Omit<ExportType, "backend">,
-  elements: readonly NonDeletedExcalidrawElement[],
+  elements: ExportedElements,
   appState: AppState,
   files: BinaryFiles,
   {
@@ -26,12 +90,14 @@ export const exportCanvas = async (
     viewBackgroundColor,
     name,
     fileHandle = null,
+    exportingFrame = null,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
     name: string;
     fileHandle?: FileSystemHandle | null;
+    exportingFrame: ExcalidrawFrameLikeElement | null;
   },
 ) => {
   if (elements.length === 0) {
@@ -49,6 +115,7 @@ export const exportCanvas = async (
         exportEmbedScene: appState.exportEmbedScene && type === "svg",
       },
       files,
+      { exportingFrame },
     );
     if (type === "svg") {
       return await fileSave(
@@ -70,6 +137,7 @@ export const exportCanvas = async (
     exportBackground,
     viewBackgroundColor,
     exportPadding,
+    exportingFrame,
   });
 
   if (type === "png") {

src/data/library.ts

@@ -23,6 +23,7 @@ import {
   LIBRARY_SIDEBAR_TAB,
 } from "../constants";
 import { libraryItemSvgsCache } from "../hooks/useLibraryItemSvg";
+import { cloneJSON } from "../utils";
 
 export const libraryItemsAtom = atom<{
   status: "loading" | "loaded";
@@ -31,7 +32,7 @@ export const libraryItemsAtom = atom<{
 }>({ status: "loaded", isInitialized: true, libraryItems: [] });
 
 const cloneLibraryItems = (libraryItems: LibraryItems): LibraryItems =>
-  JSON.parse(JSON.stringify(libraryItems));
+  cloneJSON(libraryItems);
 
 /**
  * checks if library item does not exist already in current library

src/data/magic.ts

@@ -0,0 +1,104 @@
+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;
+}

src/data/resave.ts

@@ -1,7 +1,6 @@
 import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles } from "../types";
-import { exportCanvas } from ".";
-import { getNonDeletedElements } from "../element";
+import { exportCanvas, prepareElementsForExport } from ".";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 
 export const resaveAsImageWithScene = async (
@@ -23,18 +22,19 @@ export const resaveAsImageWithScene = async (
     exportEmbedScene: true,
   };
 
-  await exportCanvas(
-    fileHandleType,
-    getNonDeletedElements(elements),
+  const { exportedElements, exportingFrame } = prepareElementsForExport(
+    elements,
     appState,
-    files,
-    {
-      exportBackground,
-      viewBackgroundColor,
-      name,
-      fileHandle,
-    },
+    false,
   );
 
+  await exportCanvas(fileHandleType, exportedElements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    name,
+    fileHandle,
+    exportingFrame,
+  });
+
   return { fileHandle };
 };