@dwelle/excalidraw 0.5.0-da1c822 → 0.5.0-e8bcd96

package/dist/excalidraw/components/TTDDialog/TTDDialog.js

@@ -141,8 +141,8 @@ export const TTDDialogBase = withInternalFallback("TTDDialogBase", ({ tab, ...re
                                             marginLeft: "10px",
                                             fontSize: 10,
                                             borderRadius: "12px",
-                                            background: "pink",
-                                            color: "#000",
+                                            background: "var(--color-promo)",
+                                            color: "var(--color-surface-lowest)",
                                         }, children: "AI Beta" })] }) }), _jsx(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })] })), _jsx(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: _jsx(MermaidToExcalidraw, { mermaidToExcalidrawLib: mermaidToExcalidrawLib }) }), !("__fallback" in rest) && (_jsxs(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [_jsx("div", { className: "ttd-dialog-desc", children: "Currently we use Mermaid as a middle step, so you'll get best results if you describe a diagram, workflow, flow chart, and similar." }), _jsxs(TTDDialogPanels, { children: [_jsx(TTDDialogPanel, { label: t("labels.prompt"), panelAction: {
                                         action: onGenerate,
                                         label: "Generate",

package/dist/excalidraw/components/TTDDialog/TTDDialogInput.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler } from "react";
+import type { ChangeEventHandler } from "react";
 interface TTDDialogInputProps {
     input: string;
     placeholder: string;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanel.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 interface TTDDialogPanelProps {
     label: string;
     children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogPanels.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogPanels: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;

package/dist/excalidraw/components/TTDDialog/TTDDialogTabs.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 declare const TTDDialogTabs: {
     (props: {
         children: ReactNode;

package/dist/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare const TTDDialogTrigger: {
     ({ children, icon, }: {
         children?: ReactNode;

package/dist/excalidraw/components/TTDDialog/common.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { AppClassProperties, BinaryFiles } from "../../types";
+import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppClassProperties, BinaryFiles } from "../../types";
 export interface MermaidToExcalidrawLibProps {
     loaded: boolean;
     api: Promise<{

package/dist/excalidraw/components/TextField.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent } from "react";
+import type { KeyboardEvent } from "react";
 import "./TextField.scss";
 type TextFieldProps = {
     onChange?: (value: string) => void;

package/dist/excalidraw/components/Toast.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 import "./Toast.scss";
 export declare const Toast: ({ message, onClose, closable, duration, style, }: {
     message: string;

package/dist/excalidraw/components/ToolButton.d.ts

@@ -1,6 +1,7 @@
 import "./ToolIcon.scss";
-import React, { CSSProperties } from "react";
-import { PointerType } from "../element/types";
+import type { CSSProperties } from "react";
+import React from "react";
+import type { PointerType } from "../element/types";
 export type ToolButtonSize = "small" | "medium";
 type ToolButtonBaseProps = {
     icon?: React.ReactNode;
@@ -17,6 +18,7 @@ type ToolButtonBaseProps = {
     hidden?: boolean;
     visible?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     className?: string;
     style?: CSSProperties;
     isLoading?: boolean;

package/dist/excalidraw/components/ToolButton.js

@@ -52,7 +52,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
                 ToolIcon: !props.hidden,
                 "ToolIcon--selected": props.selected,
                 "ToolIcon--plain": props.type === "icon",
-            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
+            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading || !!props.disabled, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", "aria-disabled": !!props.disabled, children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
     }
     return (_jsxs("label", { className: clsx("ToolIcon", props.className), title: props.title, onPointerDown: (event) => {
             lastPointerTypeRef.current = event.pointerType || null;

package/dist/excalidraw/components/Trans.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TranslationKeys } from "../i18n";
+import type { TranslationKeys } from "../i18n";
 declare const Trans: ({ i18nKey, children, ...props }: {
     [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
     i18nKey: TranslationKeys;

package/dist/excalidraw/components/UserList.d.ts

@@ -1,6 +1,6 @@
 import "./UserList.scss";
 import React from "react";
-import { Collaborator, SocketId } from "../types";
+import type { Collaborator, SocketId } from "../types";
 export type GoToCollaboratorComponentProps = {
     socketId: SocketId;
     collaborator: Collaborator;

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { DOMAttributes } from "react";
-import type { InteractiveCanvasAppState } from "../../types";
+import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 type InteractiveCanvasProps = {
@@ -9,10 +9,11 @@ type InteractiveCanvasProps = {
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;
+    device: Device;
     renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
     handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
     onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -60,6 +60,7 @@ const InteractiveCanvas = (props) => {
                 selectionColor,
                 renderScrollbars: false,
             },
+            device: props.device,
             callback: props.renderInteractiveSceneCallback,
         }, isRenderThrottlingEnabled());
     });
@@ -102,10 +103,10 @@ const getRelevantAppStateProps = (appState) => ({
 const areEqual = (prevProps, nextProps) => {
     // This could be further optimised if needed, as we don't have to render interactive canvas on each scene mutation
     if (prevProps.selectionNonce !== nextProps.selectionNonce ||
-        prevProps.versionNonce !== nextProps.versionNonce ||
+        prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||

package/dist/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { StaticCanvasAppState } from "../../types";
 import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
 import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
@@ -9,7 +9,7 @@ type StaticCanvasProps = {
     elementsMap: RenderableElementsMap;
     allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
-    versionNonce: number | undefined;
+    sceneNonce: number | undefined;
     selectionNonce: number | undefined;
     scale: number;
     appState: StaticCanvasAppState;

package/dist/excalidraw/components/canvases/StaticCanvas.js

@@ -69,10 +69,10 @@ const getRelevantAppStateProps = (appState) => ({
     editingGroupId: appState.editingGroupId,
 });
 const areEqual = (prevProps, nextProps) => {
-    if (prevProps.versionNonce !== nextProps.versionNonce ||
+    if (prevProps.sceneNonce !== nextProps.sceneNonce ||
         prevProps.scale !== nextProps.scale ||
         // we need to memoize on elementsMap because they may have renewed
-        // even if versionNonce didn't change (e.g. we filter elements out based
+        // even if sceneNonce didn't change (e.g. we filter elements out based
         // on appState)
         prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {

package/dist/excalidraw/components/dropdownMenu/DropdownMenuItem.js

@@ -11,10 +11,10 @@ export const DropDownMenuItemBadge = ({ children, }) => {
             display: "inline-flex",
             marginLeft: "auto",
             padding: "2px 4px",
-            background: "pink",
+            background: "var(--color-promo)",
+            color: "var(--color-surface-lowest)",
             borderRadius: 6,
             fontSize: 9,
-            color: "black",
             fontFamily: "Cascadia, monospace",
         }, children: children }));
 };

package/dist/excalidraw/components/footer/Footer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ActionManager } from "../../actions/manager";
-import { UIAppState } from "../../types";
+import type { ActionManager } from "../../actions/manager";
+import type { UIAppState } from "../../types";
 declare const Footer: {
     ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }: {
         appState: UIAppState;

package/dist/excalidraw/components/hyperlink/Hyperlink.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AppState, ExcalidrawProps, UIAppState } from "../../types";
-import { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+import type { ElementsMap, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "../../element/types";
 import "./Hyperlink.scss";
 export declare const Hyperlink: ({ element, elementsMap, setAppState, onLinkOpen, setToast, updateEmbedValidationStatus, }: {
     element: NonDeletedExcalidrawElement;

package/dist/excalidraw/components/hyperlink/Hyperlink.js

@@ -10,9 +10,9 @@ import clsx from "clsx";
 import { KEYS } from "../../keys";
 import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
 import { getSelectedElements } from "../../scene";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { isLocalLink, normalizeLink } from "../../data/url";
 import "./Hyperlink.scss";
 import { trackEvent } from "../../analytics";
@@ -252,7 +252,7 @@ const shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY])
     const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords({ clientX, clientY }, appState);
     const threshold = 15 / appState.zoom.value;
     // hitbox to prevent hiding when hovered in element bounding box
-    if (isPointHittingElementBoundingBox(element, elementsMap, [sceneX, sceneY], threshold, null)) {
+    if (hitElementBoundingBox(sceneX, sceneY, element, elementsMap)) {
         return false;
     }
     const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);

package/dist/excalidraw/components/hyperlink/helpers.d.ts

@@ -1,6 +1,6 @@
-import { Bounds } from "../../element/bounds";
-import { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
-import { AppState, UIAppState } from "../../types";
+import type { Bounds } from "../../element/bounds";
+import type { ElementsMap, NonDeletedExcalidrawElement } from "../../element/types";
+import type { AppState, UIAppState } from "../../types";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
 export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => Bounds;
 export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, appState: AppState, [x, y]: readonly [number, number]) => boolean;

package/dist/excalidraw/components/hyperlink/helpers.js

@@ -1,6 +1,6 @@
 import { MIME_TYPES } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { rotate } from "../../math";
 import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
 export const EXTERNAL_LINK_IMG = document.createElement("img");
@@ -39,10 +39,9 @@ export const isPointHittingLink = (element, elementsMap, appState, [x, y], isMob
     if (!element.link || appState.selectedElementIds[element.id]) {
         return false;
     }
-    const threshold = 4 / appState.zoom.value;
     if (!isMobile &&
         appState.viewModeEnabled &&
-        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, null)) {
+        hitElementBoundingBox(x, y, element, elementsMap)) {
         return true;
     }
     return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);

package/dist/excalidraw/components/icons.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Theme } from "../element/types";
+import type { Theme } from "../element/types";
 export declare const iconFillColor: (theme: Theme) => string;
 type Opts = {
     width?: number;
@@ -195,6 +195,8 @@ export declare const pngIcon: JSX.Element;
 export declare const magnetIcon: JSX.Element;
 export declare const coffeeIcon: JSX.Element;
 export declare const DeviceDesktopIcon: JSX.Element;
-export declare const arrowBarToLeftIcon: JSX.Element;
+export declare const loginIcon: JSX.Element;
 export declare const youtubeIcon: JSX.Element;
+export declare const gridIcon: JSX.Element;
+export declare const lineEditorIcon: JSX.Element;
 export {};

package/dist/excalidraw/components/icons.js

@@ -121,10 +121,22 @@ export const shareWindows = createIcon(_jsxs(_Fragment, { children: [_jsx("path"
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(_jsx("path", { stroke: "currentColor", strokeWidth: "40", fill: "currentColor", d: "M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z" }), { width: 1024 });
-export const BringForwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.622-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.767-.622-1.39-1.39-1.39Z", fill: "currentColor" }), _jsx("path", { d: "M12.5 12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendBackwardIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.944 12.5H12.5v1.389a1.389 1.389 0 0 1-1.389 1.389H5.556a1.389 1.389 0 0 1-1.39-1.39V8.334a1.389 1.389 0 0 1 1.39-1.389h1.388", fill: "currentColor" }), _jsx("path", { d: "M13.889 4.167H8.333c-.767 0-1.389.621-1.389 1.389v5.555c0 .767.622 1.389 1.39 1.389h5.555c.767 0 1.389-.622 1.389-1.389V5.556c0-.768-.622-1.39-1.39-1.39Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const BringToFrontIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", stroke: "currentColor", strokeWidth: "1.25", children: [_jsx("path", { d: "M8.775 6.458h2.45a2.316 2.316 0 0 1 2.317 2.316v2.452a2.316 2.316 0 0 1-2.316 2.316H8.774a2.316 2.316 0 0 1-2.317-2.316V8.774a2.316 2.316 0 0 1 2.317-2.316Z", fill: "currentColor" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316ZM12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
-export const SendToBackIcon = createIcon(_jsxs(_Fragment, { children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M5.441 9.792h2.451a2.316 2.316 0 0 1 2.316 2.316v2.45a2.316 2.316 0 0 1-2.316 2.317h-2.45a2.316 2.316 0 0 1-2.317-2.316v-2.451a2.316 2.316 0 0 1 2.316-2.316Z", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("mask", { id: "SendToBackIcon", fill: "#fff", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z" }) }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.167 5.833v2.06a2.941 2.941 0 0 0 2.94 2.94h2.06v.393a2.941 2.941 0 0 1-2.941 2.94h-.393v-2.058a2.941 2.941 0 0 0-2.94-2.941h-2.06v-.393a2.941 2.941 0 0 1 2.942-2.94h.392Z", fill: "currentColor" }), _jsx("path", { d: "M9.167 5.833h1.25v-1.25h-1.25v1.25Zm5 5h1.25v-1.25h-1.25v1.25Zm-3.334 3.334h-1.25v1.25h1.25v-1.25Zm-5-5h-1.25v1.25h1.25v-1.25Zm2.084-3.334v2.06h2.5v-2.06h-2.5Zm0 2.06a4.191 4.191 0 0 0 4.19 4.19v-2.5a1.691 1.691 0 0 1-1.69-1.69h-2.5Zm4.19 4.19h2.06v-2.5h-2.06v2.5Zm.81-1.25v.393h2.5v-.393h-2.5Zm0 .393c0 .933-.758 1.69-1.691 1.69v2.5a4.191 4.191 0 0 0 4.19-4.19h-2.5Zm-1.691 1.69h-.393v2.5h.393v-2.5Zm.857 1.25v-2.058h-2.5v2.059h2.5Zm0-2.058a4.191 4.191 0 0 0-4.19-4.191v2.5c.933 0 1.69.757 1.69 1.69h2.5Zm-4.19-4.191h-2.06v2.5h2.06v-2.5Zm-.81 1.25v-.393h-2.5v.393h2.5Zm0-.393c0-.934.758-1.69 1.692-1.69v-2.5a4.191 4.191 0 0 0-4.192 4.19h2.5Zm1.692-1.69h.392v-2.5h-.392v2.5Z", fill: "currentColor", mask: "url(#SendToBackIcon)" }), _jsx("path", { d: "M12.108 3.125h2.45a2.316 2.316 0 0 1 2.317 2.316v2.451a2.316 2.316 0 0 1-2.316 2.316h-2.451a2.316 2.316 0 0 1-2.316-2.316v-2.45a2.316 2.316 0 0 1 2.316-2.317Z", stroke: "currentColor", strokeWidth: "1.25" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
+const arrowBarToTopJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 10l0 10" }), _jsx("path", { d: "M12 10l4 4" }), _jsx("path", { d: "M12 10l-4 4" }), _jsx("path", { d: "M4 4l16 0" })] }));
+const arrownNarrowUpJSX = (_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 5l0 14" }), _jsx("path", { d: "M16 9l-4 -4" }), _jsx("path", { d: "M8 9l4 -4" })] }));
+export const BringForwardIcon = createIcon(arrownNarrowUpJSX, tablerIconProps);
+export const SendBackwardIcon = createIcon(arrownNarrowUpJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
+export const BringToFrontIcon = createIcon(arrowBarToTopJSX, tablerIconProps);
+export const SendToBackIcon = createIcon(arrowBarToTopJSX, {
+    ...tablerIconProps,
+    style: {
+        transform: "rotate(180deg)",
+    },
+});
 //
 // Align action icons created from scratch to match those of z-index actions
 // Note: vertical align icons are flipped so the larger item is always the
@@ -241,6 +253,8 @@ export const pngIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_js
 export const magnetIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 13v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a2 2 0 0 0 6 0v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a8 8 0 0 1 -16 0" }), _jsx("path", { d: "M4 8l5 0" }), _jsx("path", { d: "M15 8l4 0" })] }), tablerIconProps);
 export const coffeeIcon = createIcon(_jsxs("g", { strokeWidth: 1.25, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }), _jsx("path", { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }), _jsx("path", { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }), _jsx("path", { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" })] }), tablerIconProps);
 export const DeviceDesktopIcon = createIcon(_jsxs("g", { stroke: "currentColor", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1v-10zM7 20h10M9 16v4M15 16v4" })] }), { ...tablerIconProps, strokeWidth: 1.5 });
-// arrow-bar-to-left
-export const arrowBarToLeftIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12l10 0" }), _jsx("path", { d: "M10 12l4 4" }), _jsx("path", { d: "M10 12l4 -4" }), _jsx("path", { d: "M4 4l0 16" })] }), tablerIconProps);
+// login
+export const loginIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M21 12h-13l3 -3" }), _jsx("path", { d: "M11 15l-3 -3" })] }), tablerIconProps);
 export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);
+export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);
+export const lineEditorIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M17 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M3 17m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" }), _jsx("path", { d: "M17 5c-6.627 0 -12 5.373 -12 12" })] }), tablerIconProps);

package/dist/excalidraw/components/main-menu/DefaultItems.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { Theme } from "../../element/types";
 import "./DefaultItems.scss";
+import { Theme } from "../../element/types";
 export declare const LoadScene: {
     (): JSX.Element | null;
     displayName: string;

package/dist/excalidraw/constants.d.ts

@@ -1,5 +1,5 @@
-import { AppProps, NormalizedZoomValue } from "./types";
-import { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import type { AppProps, NormalizedZoomValue } from "./types";
+import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
 export declare const isDarwin: boolean;
 export declare const isWindows: boolean;
 export declare const isAndroid: boolean;
@@ -124,6 +124,8 @@ export declare const DEFAULT_ZOOM_VALUE: NormalizedZoomValue;
 export declare const COLOR_WHITE = "#ffffff";
 export declare const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 export declare const COLOR_TRANSPARENT = "transparent";
+export declare const SIDE_RESIZING_THRESHOLD: number;
+export declare const DEFAULT_COLLISION_THRESHOLD: number;
 export declare const COLOR_VOICE_CALL = "#a2f1a6";
 export declare const CANVAS_ONLY_ACTIONS: string[];
 export declare const GRID_SIZE = 20;
@@ -176,6 +178,7 @@ export declare const VERSION_TIMEOUT = 30000;
 export declare const SCROLL_TIMEOUT = 100;
 export declare const ZOOM_STEP = 0.1;
 export declare const MIN_ZOOM = 0.1;
+export declare const MAX_ZOOM = 30;
 export declare const HYPERLINK_TOOLTIP_DELAY = 300;
 export declare const IDLE_THRESHOLD = 60000;
 export declare const ACTIVE_THRESHOLD = 3000;
@@ -224,9 +227,6 @@ export declare const ROUNDNESS: {
     readonly PROPORTIONAL_RADIUS: 2;
     readonly ADAPTIVE_RADIUS: 3;
 };
-/** key containt id of precedeing elemnt id we use in reconciliation during
- * collaboration */
-export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export declare const ROUGHNESS: {
     readonly architect: 0;
     readonly artist: 1;

package/dist/excalidraw/constants.js

@@ -132,6 +132,11 @@ export const COLOR_WHITE = "#ffffff";
 export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 export const COLOR_TRANSPARENT = "transparent";
 // -----------------------------------------------
+export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
+// a small epsilon to make side resizing always take precedence
+// (avoids an increase in renders and changes to tests)
+const EPSILON = 0.00001;
+export const DEFAULT_COLLISION_THRESHOLD = 2 * SIDE_RESIZING_THRESHOLD - EPSILON;
 // keep this in sync with CSS
 export const COLOR_VOICE_CALL = "#a2f1a6";
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
@@ -182,6 +187,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
 export const IDLE_THRESHOLD = 60_000;
@@ -266,9 +272,6 @@ export const ROUNDNESS = {
     // (see DEFAULT_ADAPTIVE_RADIUS constant)
     ADAPTIVE_RADIUS: 3,
 };
-/** 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,

package/dist/excalidraw/context/ui-appState.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { UIAppState } from "../types";
+import type { UIAppState } from "../types";
 export declare const UIAppStateContext: React.Context<UIAppState>;
 export declare const useUIAppState: () => UIAppState;

package/dist/excalidraw/cursor.d.ts

@@ -1,4 +1,4 @@
-import { AppState } from "./types";
+import type { AppState } from "./types";
 export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
 export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
 export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;

package/dist/excalidraw/data/EditorLocalStorage.d.ts

@@ -1,5 +1,5 @@
-import { EDITOR_LS_KEYS } from "../constants";
-import { JSONValue } from "../types";
+import type { EDITOR_LS_KEYS } from "../constants";
+import type { JSONValue } from "../types";
 export declare class EditorLocalStorage {
     static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): boolean;
     static get<T extends JSONValue>(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): T | null;

package/dist/excalidraw/data/blob.d.ts

@@ -1,9 +1,9 @@
 import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
-import { ExcalidrawElement, FileId } from "../element/types";
-import { AppState, DataURL, LibraryItem } from "../types";
-import { ValueOf } from "../utility-types";
-import { FileSystemHandle } from "./filesystem";
-import { ImportedLibraryData } from "./types";
+import type { ExcalidrawElement, FileId } from "../element/types";
+import type { AppState, DataURL, LibraryItem } from "../types";
+import type { ValueOf } from "../utility-types";
+import type { FileSystemHandle } from "./filesystem";
+import type { ImportedLibraryData } from "./types";
 export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "png" | "svg";

package/dist/excalidraw/data/filesystem.d.ts

@@ -1,4 +1,5 @@
-import { FileSystemHandle, supported as nativeFileSystemSupported } from "browser-fs-access";
+import type { FileSystemHandle } from "browser-fs-access";
+import { supported as nativeFileSystemSupported } from "browser-fs-access";
 import { MIME_TYPES } from "../constants";
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 export declare const fileOpen: <M extends boolean | undefined = false>(opts: {

package/dist/excalidraw/data/index.d.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
-import { ExportType } from "../scene/types";
-import { AppState, BinaryFiles } from "../types";
-import { FileSystemHandle } from "./filesystem";
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeletedExcalidrawElement } from "../element/types";
+import type { ExportType } from "../scene/types";
+import type { AppState, BinaryFiles } from "../types";
+import type { FileSystemHandle } from "./filesystem";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 export type ExportedElements = readonly NonDeletedExcalidrawElement[] & {

package/dist/excalidraw/data/json.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles, LibraryItems } from "../types";
-import { ImportedDataState, ImportedLibraryData } from "./types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles, LibraryItems } from "../types";
+import type { ImportedDataState, ImportedLibraryData } from "./types";
 export declare const serializeAsJSON: (elements: readonly ExcalidrawElement[], appState: Partial<AppState>, files: BinaryFiles, type: "local" | "database") => string;
 export declare const saveAsJSON: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, name?: string) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle | null;

package/dist/excalidraw/data/library.d.ts

@@ -1,7 +1,7 @@
-import { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
+import type { LibraryItems, ExcalidrawImperativeAPI, LibraryItemsSource, LibraryItems_anyVersion } from "../types";
 import type App from "../components/App";
-import { ExcalidrawElement } from "../element/types";
-import { MaybePromise } from "../utility-types";
+import type { ExcalidrawElement } from "../element/types";
+import type { MaybePromise } from "../utility-types";
 export type LibraryPersistedData = {
     libraryItems: LibraryItems;
 };

package/dist/excalidraw/data/magic.d.ts

@@ -1,6 +1,6 @@
-import { Theme } from "../element/types";
-import { DataURL } from "../types";
-import { OpenAIOutput } from "./ai/types";
+import type { Theme } from "../element/types";
+import type { DataURL } from "../types";
+import type { OpenAIOutput } from "./ai/types";
 export type MagicCacheData = {
     status: "pending";
 } | {

package/dist/excalidraw/data/reconcile.d.ts

@@ -0,0 +1,6 @@
+import type { OrderedExcalidrawElement } from "../element/types";
+import type { AppState } from "../types";
+import type { MakeBrand } from "../utility-types";
+export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
+export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
+export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];

package/dist/excalidraw/data/reconcile.js

@@ -0,0 +1,49 @@
+import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import { arrayToMap } from "../utils";
+const shouldDiscardRemoteElement = (localAppState, local, remote) => {
+    if (local &&
+        // local element is being edited
+        (local.id === localAppState.editingElement?.id ||
+            local.id === localAppState.resizingElement?.id ||
+            local.id === localAppState.draggingElement?.id || // TODO: 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
+            // the lowest versionNonce
+            (local.version === remote.version &&
+                local.versionNonce < remote.versionNonce))) {
+        return true;
+    }
+    return false;
+};
+export const reconcileElements = (localElements, remoteElements, localAppState) => {
+    const localElementsMap = arrayToMap(localElements);
+    const reconciledElements = [];
+    const added = new Set();
+    // process remote elements
+    for (const remoteElement of remoteElements) {
+        if (!added.has(remoteElement.id)) {
+            const localElement = localElementsMap.get(remoteElement.id);
+            const discardRemoteElement = shouldDiscardRemoteElement(localAppState, localElement, remoteElement);
+            if (localElement && discardRemoteElement) {
+                reconciledElements.push(localElement);
+                added.add(localElement.id);
+            }
+            else {
+                reconciledElements.push(remoteElement);
+                added.add(remoteElement.id);
+            }
+        }
+    }
+    // process remaining local elements
+    for (const localElement of localElements) {
+        if (!added.has(localElement.id)) {
+            reconciledElements.push(localElement);
+            added.add(localElement.id);
+        }
+    }
+    const orderedElements = orderByFractionalIndex(reconciledElements);
+    // de-duplicate indices
+    syncInvalidIndices(orderedElements);
+    return orderedElements;
+};

package/dist/excalidraw/data/resave.d.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from "../element/types";
-import { AppState, BinaryFiles } from "../types";
+import type { ExcalidrawElement } from "../element/types";
+import type { AppState, BinaryFiles } from "../types";
 export declare const resaveAsImageWithScene: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, name: string) => Promise<{
     fileHandle: import("browser-fs-access").FileSystemHandle;
 }>;

package/dist/excalidraw/data/resave.js

@@ -1,5 +1,5 @@
-import { exportAsImage } from ".";
 import { prepareElementsForExport } from ".";
+import { exportAsImage } from ".";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 export const resaveAsImageWithScene = async (elements, appState, files, name) => {
     const { exportBackground, viewBackgroundColor, fileHandle } = appState;