@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/LaserTool/LaserPathManager.js

@@ -0,0 +1,225 @@
+import { LaserPointer } from "@excalidraw/laser-pointer";
+import { sceneCoordsToViewportCoords } from "../../utils";
+import { getClientColor } from "../../clients";
+// decay time in milliseconds
+const DECAY_TIME = 1000;
+// length of line in points before it starts decaying
+const DECAY_LENGTH = 50;
+const average = (a, b) => (a + b) / 2;
+function getSvgPathFromStroke(points, closed = true) {
+    const len = points.length;
+    if (len < 4) {
+        return ``;
+    }
+    let a = points[0];
+    let b = points[1];
+    const c = points[2];
+    let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(b[1], c[1]).toFixed(2)} T`;
+    for (let i = 2, max = len - 1; i < max; i++) {
+        a = points[i];
+        b = points[i + 1];
+        result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `;
+    }
+    if (closed) {
+        result += "Z";
+    }
+    return result;
+}
+function easeOutCubic(t) {
+    return 1 - Math.pow(1 - t, 3);
+}
+function instantiateCollabolatorState() {
+    return {
+        currentPath: undefined,
+        finishedPaths: [],
+        lastPoint: [-10000, -10000],
+        svg: document.createElementNS("http://www.w3.org/2000/svg", "path"),
+    };
+}
+function instantiatePath() {
+    LaserPointer.constants.cornerDetectionMaxAngle = 70;
+    return new LaserPointer({
+        simplify: 0,
+        streamline: 0.4,
+        sizeMapping: (c) => {
+            const pt = DECAY_TIME;
+            const pl = DECAY_LENGTH;
+            const t = Math.max(0, 1 - (performance.now() - c.pressure) / pt);
+            const l = (pl - Math.min(pl, c.totalLength - c.currentIndex)) / pl;
+            return Math.min(easeOutCubic(l), easeOutCubic(t));
+        },
+    });
+}
+export class LaserPathManager {
+    app;
+    ownState;
+    collaboratorsState = new Map();
+    rafId;
+    isDrawing = false;
+    container;
+    constructor(app) {
+        this.app = app;
+        this.ownState = instantiateCollabolatorState();
+    }
+    destroy() {
+        this.stop();
+        this.isDrawing = false;
+        this.ownState = instantiateCollabolatorState();
+        this.collaboratorsState = new Map();
+    }
+    startPath(x, y) {
+        this.ownState.currentPath = instantiatePath();
+        this.ownState.currentPath.addPoint([x, y, performance.now()]);
+        this.updatePath(this.ownState);
+    }
+    addPointToPath(x, y) {
+        if (this.ownState.currentPath) {
+            this.ownState.currentPath?.addPoint([x, y, performance.now()]);
+            this.updatePath(this.ownState);
+        }
+    }
+    endPath() {
+        if (this.ownState.currentPath) {
+            this.ownState.currentPath.close();
+            this.ownState.finishedPaths.push(this.ownState.currentPath);
+            this.updatePath(this.ownState);
+        }
+    }
+    updatePath(state) {
+        this.isDrawing = true;
+        if (!this.isRunning) {
+            this.start();
+        }
+    }
+    isRunning = false;
+    start(svg) {
+        if (svg) {
+            this.container = svg;
+            this.container.appendChild(this.ownState.svg);
+        }
+        this.stop();
+        this.isRunning = true;
+        this.loop();
+    }
+    stop() {
+        this.isRunning = false;
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = undefined;
+    }
+    loop() {
+        this.rafId = requestAnimationFrame(this.loop.bind(this));
+        this.updateCollabolatorsState();
+        if (this.isDrawing) {
+            this.update();
+        }
+        else {
+            this.isRunning = false;
+        }
+    }
+    draw(path) {
+        const stroke = path
+            .getStrokeOutline(path.options.size / this.app.state.zoom.value)
+            .map(([x, y]) => {
+            const result = sceneCoordsToViewportCoords({ sceneX: x, sceneY: y }, this.app.state);
+            return [result.x, result.y];
+        });
+        return getSvgPathFromStroke(stroke, true);
+    }
+    updateCollabolatorsState() {
+        if (!this.container || !this.app.state.collaborators.size) {
+            return;
+        }
+        for (const [key, collabolator] of this.app.state.collaborators.entries()) {
+            if (!this.collaboratorsState.has(key)) {
+                const state = instantiateCollabolatorState();
+                this.container.appendChild(state.svg);
+                this.collaboratorsState.set(key, state);
+                this.updatePath(state);
+            }
+            const state = this.collaboratorsState.get(key);
+            if (collabolator.pointer && collabolator.pointer.tool === "laser") {
+                if (collabolator.button === "down" && state.currentPath === undefined) {
+                    state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
+                    state.currentPath = instantiatePath();
+                    state.currentPath.addPoint([
+                        collabolator.pointer.x,
+                        collabolator.pointer.y,
+                        performance.now(),
+                    ]);
+                    this.updatePath(state);
+                }
+                if (collabolator.button === "down" && state.currentPath !== undefined) {
+                    if (collabolator.pointer.x !== state.lastPoint[0] ||
+                        collabolator.pointer.y !== state.lastPoint[1]) {
+                        state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
+                        state.currentPath.addPoint([
+                            collabolator.pointer.x,
+                            collabolator.pointer.y,
+                            performance.now(),
+                        ]);
+                        this.updatePath(state);
+                    }
+                }
+                if (collabolator.button === "up" && state.currentPath !== undefined) {
+                    state.lastPoint = [collabolator.pointer.x, collabolator.pointer.y];
+                    state.currentPath.addPoint([
+                        collabolator.pointer.x,
+                        collabolator.pointer.y,
+                        performance.now(),
+                    ]);
+                    state.currentPath.close();
+                    state.finishedPaths.push(state.currentPath);
+                    state.currentPath = undefined;
+                    this.updatePath(state);
+                }
+            }
+        }
+    }
+    update() {
+        if (!this.container) {
+            return;
+        }
+        let somePathsExist = false;
+        for (const [key, state] of this.collaboratorsState.entries()) {
+            if (!this.app.state.collaborators.has(key)) {
+                state.svg.remove();
+                this.collaboratorsState.delete(key);
+                continue;
+            }
+            state.finishedPaths = state.finishedPaths.filter((path) => {
+                const lastPoint = path.originalPoints[path.originalPoints.length - 1];
+                return !(lastPoint && lastPoint[2] < performance.now() - DECAY_TIME);
+            });
+            let paths = state.finishedPaths.map((path) => this.draw(path)).join(" ");
+            if (state.currentPath) {
+                paths += ` ${this.draw(state.currentPath)}`;
+            }
+            if (paths.trim()) {
+                somePathsExist = true;
+            }
+            state.svg.setAttribute("d", paths);
+            state.svg.setAttribute("fill", getClientColor(key));
+        }
+        this.ownState.finishedPaths = this.ownState.finishedPaths.filter((path) => {
+            const lastPoint = path.originalPoints[path.originalPoints.length - 1];
+            return !(lastPoint && lastPoint[2] < performance.now() - DECAY_TIME);
+        });
+        let paths = this.ownState.finishedPaths
+            .map((path) => this.draw(path))
+            .join(" ");
+        if (this.ownState.currentPath) {
+            paths += ` ${this.draw(this.ownState.currentPath)}`;
+        }
+        paths = paths.trim();
+        if (paths) {
+            somePathsExist = true;
+        }
+        this.ownState.svg.setAttribute("d", paths);
+        this.ownState.svg.setAttribute("fill", "red");
+        if (!somePathsExist) {
+            this.isDrawing = false;
+        }
+    }
+}

package/dist/packages/excalidraw/components/LaserTool/LaserPointerButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../ToolIcon.scss";
+import clsx from "clsx";
+import { laserPointerToolIcon } from "../icons";
+const DEFAULT_SIZE = "small";
+export const LaserPointerButton = (props) => {
+    return (_jsxs("label", { className: clsx("ToolIcon ToolIcon__LaserPointer", `ToolIcon_size_${DEFAULT_SIZE}`, {
+            "is-mobile": props.isMobile,
+        }), title: `${props.title}`, children: [_jsx("input", { className: "ToolIcon_type_checkbox", type: "checkbox", name: props.name, onChange: props.onChange, checked: props.checked, "aria-label": props.title, "data-testid": "toolbar-LaserPointer" }), _jsx("div", { className: "ToolIcon__icon", children: laserPointerToolIcon })] }));
+};

package/dist/packages/excalidraw/components/LaserTool/LaserTool.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import "./LaserToolOverlay.scss";
+export const LaserToolOverlay = ({ manager }) => {
+    const svgRef = useRef(null);
+    useEffect(() => {
+        if (svgRef.current) {
+            manager.start(svgRef.current);
+        }
+        return () => {
+            manager.stop();
+        };
+    }, [manager]);
+    return (_jsx("div", { className: "LaserToolOverlay", children: _jsx("svg", { ref: svgRef, className: "LaserToolOverlayCanvas" }) }));
+};

package/dist/packages/excalidraw/components/LaserTool/LaserToolOverlay.scss

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

package/dist/packages/excalidraw/components/LayerUI.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from "clsx";
+import React from "react";
+import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH, TOOL_TYPE, } from "../constants";
+import { showSelectedShapeActions } from "../element";
+import { t } from "../i18n";
+import { calculateScrollCenter } from "../scene";
+import { capitalizeString, isShallowEqual } from "../utils";
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import { ErrorDialog } from "./ErrorDialog";
+import { ImageExportDialog } from "./ImageExportDialog";
+import { FixedSideContainer } from "./FixedSideContainer";
+import { HintViewer } from "./HintViewer";
+import { Island } from "./Island";
+import { LoadingMessage } from "./LoadingMessage";
+import { LockButton } from "./LockButton";
+import { MobileMenu } from "./MobileMenu";
+import { PasteChartDialog } from "./PasteChartDialog";
+import { Section } from "./Section";
+import { HelpDialog } from "./HelpDialog";
+import Stack from "./Stack";
+import { UserList } from "./UserList";
+import { JSONExportDialog } from "./JSONExportDialog";
+import { PenModeButton } from "./PenModeButton";
+import { trackEvent } from "../analytics";
+import { useDevice } from "./App";
+import { Stats } from "./Stats";
+import { actionToggleStats } from "../actions/actionToggleStats";
+import Footer from "./footer/Footer";
+import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
+import { jotaiScope } from "../jotai";
+import { Provider, useAtom, useAtomValue } from "jotai";
+import MainMenu from "./main-menu/MainMenu";
+import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
+import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
+import { HandButton } from "./HandButton";
+import { isHandToolActive } from "../appState";
+import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
+import { LibraryIcon } from "./icons";
+import { UIAppStateContext } from "../context/ui-appState";
+import { DefaultSidebar } from "./DefaultSidebar";
+import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
+import "./LayerUI.scss";
+import "./Toolbar.scss";
+import { mutateElement } from "../element/mutateElement";
+import { ShapeCache } from "../scene/ShapeCache";
+import Scene from "../scene/Scene";
+import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
+import { MagicSettings } from "./MagicSettings";
+import { TTDDialog } from "./TTDDialog/TTDDialog";
+const DefaultMainMenu = ({ UIOptions }) => {
+    return (_jsxs(MainMenu, { __fallback: true, children: [_jsx(MainMenu.DefaultItems.LoadScene, {}), _jsx(MainMenu.DefaultItems.SaveToActiveFile, {}), UIOptions.canvasActions.export && _jsx(MainMenu.DefaultItems.Export, {}), UIOptions.canvasActions.saveAsImage && (_jsx(MainMenu.DefaultItems.SaveAsImage, {})), _jsx(MainMenu.DefaultItems.Help, {}), _jsx(MainMenu.DefaultItems.ClearCanvas, {}), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Group, { title: "Excalidraw links", children: _jsx(MainMenu.DefaultItems.Socials, {}) }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.DefaultItems.ToggleTheme, {}), _jsx(MainMenu.DefaultItems.ChangeCanvasBackground, {})] }));
+};
+const DefaultOverwriteConfirmDialog = () => {
+    return (_jsxs(OverwriteConfirmDialog, { __fallback: true, children: [_jsx(OverwriteConfirmDialog.Actions.SaveToDisk, {}), _jsx(OverwriteConfirmDialog.Actions.ExportToImage, {})] }));
+};
+const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, openAIKey, isOpenAIKeyPersisted, onOpenAIAPIKeyChange, onMagicSettingsConfirm, }) => {
+    const device = useDevice();
+    const tunnels = useInitializeTunnels();
+    const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom, jotaiScope);
+    const renderJSONExportDialog = () => {
+        if (!UIOptions.canvasActions.export) {
+            return null;
+        }
+        return (_jsx(JSONExportDialog, { elements: elements, appState: appState, files: files, actionManager: actionManager, exportOpts: UIOptions.canvasActions.export, canvas: canvas, setAppState: setAppState }));
+    };
+    const renderImageExportDialog = () => {
+        if (!UIOptions.canvasActions.saveAsImage ||
+            appState.openDialog?.name !== "imageExport") {
+            return null;
+        }
+        return (_jsx(ImageExportDialog, { elements: elements, appState: appState, files: files, actionManager: actionManager, onExportImage: onExportImage, onCloseRequest: () => setAppState({ openDialog: null }) }));
+    };
+    const renderCanvasActions = () => (_jsxs("div", { style: { position: "relative" }, children: [_jsx(tunnels.MainMenuTunnel.Out, {}), renderWelcomeScreen && _jsx(tunnels.WelcomeScreenMenuHintTunnel.Out, {})] }));
+    const renderSelectedShapeActions = () => (_jsx(Section, { heading: "selectedShapeActions", className: clsx("selected-shape-actions zen-mode-transition", {
+            "transition-left": appState.zenModeEnabled,
+        }), children: _jsx(Island, { className: CLASSES.SHAPE_ACTIONS_MENU, padding: 2, style: {
+                // we want to make sure this doesn't overflow so subtracting the
+                // approximate height of hamburgerMenu + footer
+                maxHeight: `${appState.height - 166}px`,
+            }, children: _jsx(SelectedShapeActions, { appState: appState, elements: elements, renderAction: actionManager.renderAction }) }) }));
+    const renderFixedSideContainer = () => {
+        const shouldRenderSelectedShapeActions = showSelectedShapeActions(appState, elements);
+        return (_jsx(FixedSideContainer, { side: "top", children: _jsxs("div", { className: "App-menu App-menu_top", children: [_jsxs(Stack.Col, { gap: 6, className: clsx("App-menu_top__left"), children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()] }), !appState.viewModeEnabled && (_jsx(Section, { heading: "shapes", className: "shapes-section", children: (heading) => (_jsxs("div", { style: { position: "relative" }, children: [renderWelcomeScreen && (_jsx(tunnels.WelcomeScreenToolbarHintTunnel.Out, {})), _jsx(Stack.Col, { gap: 4, align: "start", children: _jsxs(Stack.Row, { gap: 1, className: clsx("App-toolbar-container", {
+                                            "zen-mode": appState.zenModeEnabled,
+                                        }), children: [_jsxs(Island, { padding: 1, className: clsx("App-toolbar", {
+                                                    "zen-mode": appState.zenModeEnabled,
+                                                }), children: [_jsx(HintViewer, { appState: appState, isMobile: device.editor.isMobile, device: device, app: app }), heading, _jsxs(Stack.Row, { gap: 1, children: [_jsx(PenModeButton, { zenModeEnabled: appState.zenModeEnabled, checked: appState.penMode, onChange: () => onPenModeToggle(null), title: t("toolBar.penMode"), penDetected: appState.penDetected }), _jsx(LockButton, { checked: appState.activeTool.locked, onChange: onLockToggle, title: t("toolBar.lock") }), _jsx("div", { className: "App-toolbar__divider" }), _jsx(HandButton, { checked: isHandToolActive(appState), onChange: () => onHandToolToggle(), title: t("toolBar.hand"), isMobile: true }), _jsx(ShapesSwitcher, { appState: appState, activeTool: appState.activeTool, UIOptions: UIOptions, app: app })] })] }), isCollaborating && (_jsx(Island, { style: {
+                                                    marginLeft: 8,
+                                                    alignSelf: "center",
+                                                    height: "fit-content",
+                                                }, children: _jsx(LaserPointerButton, { title: t("toolBar.laser"), checked: appState.activeTool.type === TOOL_TYPE.laser, onChange: () => app.setActiveTool({ type: TOOL_TYPE.laser }), isMobile: true }) }))] }) })] })) })), _jsxs("div", { className: clsx("layer-ui__wrapper__top-right zen-mode-transition", {
+                            "transition-right": appState.zenModeEnabled,
+                        }), children: [appState.collaborators.size > 0 && (_jsx(UserList, { collaborators: appState.collaborators, userToFollow: appState.userToFollow?.socketId || null })), renderTopRightUI?.(device.editor.isMobile, appState), !appState.viewModeEnabled &&
+                                // hide button when sidebar docked
+                                (!isSidebarDocked ||
+                                    appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && (_jsx(tunnels.DefaultSidebarTriggerTunnel.Out, {}))] })] }) }));
+    };
+    const renderSidebars = () => {
+        return (_jsx(DefaultSidebar, { __fallback: true, onDock: (docked) => {
+                trackEvent("sidebar", `toggleDock (${docked ? "dock" : "undock"})`, `(${device.editor.isMobile ? "mobile" : "desktop"})`);
+            } }));
+    };
+    const isSidebarDocked = useAtomValue(isSidebarDockedAtom, jotaiScope);
+    const layerUIJSX = (_jsxs(_Fragment, { children: [children, _jsx(DefaultMainMenu, { UIOptions: UIOptions }), _jsx(DefaultSidebar.Trigger, { __fallback: true, icon: LibraryIcon, title: capitalizeString(t("toolBar.library")), onToggle: (open) => {
+                    if (open) {
+                        trackEvent("sidebar", `${DEFAULT_SIDEBAR.name} (open)`, `button (${device.editor.isMobile ? "mobile" : "desktop"})`);
+                    }
+                }, tab: DEFAULT_SIDEBAR.defaultTab, children: t("toolBar.library") }), _jsx(DefaultOverwriteConfirmDialog, {}), appState.openDialog?.name === "ttd" && _jsx(TTDDialog, { __fallback: true }), appState.isLoading && _jsx(LoadingMessage, { delay: 250 }), appState.errorMessage && (_jsx(ErrorDialog, { onClose: () => setAppState({ errorMessage: null }), children: appState.errorMessage })), eyeDropperState && !device.editor.isMobile && (_jsx(EyeDropper, { colorPickerType: eyeDropperState.colorPickerType, onCancel: () => {
+                    setEyeDropperState(null);
+                }, onChange: (colorPickerType, color, selectedElements, { altKey }) => {
+                    if (colorPickerType !== "elementBackground" &&
+                        colorPickerType !== "elementStroke") {
+                        return;
+                    }
+                    if (selectedElements.length) {
+                        for (const element of selectedElements) {
+                            mutateElement(element, {
+                                [altKey && eyeDropperState.swapPreviewOnAlt
+                                    ? colorPickerType === "elementBackground"
+                                        ? "strokeColor"
+                                        : "backgroundColor"
+                                    : colorPickerType === "elementBackground"
+                                        ? "backgroundColor"
+                                        : "strokeColor"]: color,
+                            }, false);
+                            ShapeCache.delete(element);
+                        }
+                        Scene.getScene(selectedElements[0])?.informMutation();
+                    }
+                    else if (colorPickerType === "elementBackground") {
+                        setAppState({
+                            currentItemBackgroundColor: color,
+                        });
+                    }
+                    else {
+                        setAppState({ currentItemStrokeColor: color });
+                    }
+                }, onSelect: (color, event) => {
+                    setEyeDropperState((state) => {
+                        return state?.keepOpenOnAlt && event.altKey ? state : null;
+                    });
+                    eyeDropperState?.onSelect?.(color, event);
+                } })), appState.openDialog?.name === "help" && (_jsx(HelpDialog, { onClose: () => {
+                    setAppState({ openDialog: null });
+                } })), appState.openDialog?.name === "settings" && (_jsx(MagicSettings, { openAIKey: openAIKey, isPersisted: isOpenAIKeyPersisted, onChange: onOpenAIAPIKeyChange, onConfirm: (apiKey, shouldPersist) => {
+                    const source = appState.openDialog?.name === "settings"
+                        ? appState.openDialog?.source
+                        : "settings";
+                    setAppState({ openDialog: null }, () => {
+                        onMagicSettingsConfirm(apiKey, shouldPersist, source);
+                    });
+                }, onClose: () => {
+                    setAppState({ openDialog: null });
+                } })), _jsx(ActiveConfirmDialog, {}), _jsx(tunnels.OverwriteConfirmDialogTunnel.Out, {}), renderImageExportDialog(), renderJSONExportDialog(), appState.pasteDialog.shown && (_jsx(PasteChartDialog, { setAppState: setAppState, appState: appState, onClose: () => setAppState({
+                    pasteDialog: { shown: false, data: null },
+                }) })), device.editor.isMobile && (_jsx(MobileMenu, { app: app, appState: appState, elements: elements, actionManager: actionManager, renderJSONExportDialog: renderJSONExportDialog, renderImageExportDialog: renderImageExportDialog, setAppState: setAppState, onLockToggle: onLockToggle, onHandToolToggle: onHandToolToggle, onPenModeToggle: onPenModeToggle, renderTopRightUI: renderTopRightUI, renderCustomStats: renderCustomStats, renderSidebars: renderSidebars, device: device, renderWelcomeScreen: renderWelcomeScreen, UIOptions: UIOptions })), !device.editor.isMobile && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "layer-ui__wrapper", style: appState.openSidebar &&
+                            isSidebarDocked &&
+                            device.editor.canFitSidebar
+                            ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
+                            : {}, children: [renderWelcomeScreen && _jsx(tunnels.WelcomeScreenCenterTunnel.Out, {}), renderFixedSideContainer(), _jsx(Footer, { appState: appState, actionManager: actionManager, showExitZenModeBtn: showExitZenModeBtn, renderWelcomeScreen: renderWelcomeScreen }), appState.showStats && (_jsx(Stats, { appState: appState, setAppState: setAppState, elements: elements, onClose: () => {
+                                    actionManager.executeAction(actionToggleStats);
+                                }, renderCustomStats: renderCustomStats })), appState.scrolledOutside && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
+                                    setAppState((appState) => ({
+                                        ...calculateScrollCenter(elements, appState),
+                                    }));
+                                }, children: t("buttons.scrollBackToContent") }))] }), renderSidebars()] }))] }));
+    return (_jsx(UIAppStateContext.Provider, { value: appState, children: _jsx(Provider, { scope: tunnels.jotaiScope, children: _jsx(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) }));
+};
+const stripIrrelevantAppStateProps = (appState) => {
+    const { suggestedBindings, startBoundElement, cursorButton, scrollX, scrollY, ...ret } = appState;
+    return ret;
+};
+const areEqual = (prevProps, nextProps) => {
+    // short-circuit early
+    if (prevProps.children !== nextProps.children) {
+        return false;
+    }
+    const { canvas: _pC, appState: prevAppState, ...prev } = prevProps;
+    const { canvas: _nC, appState: nextAppState, ...next } = nextProps;
+    return (isShallowEqual(
+    // asserting AppState because we're being passed the whole AppState
+    // but resolve to only the UI-relevant props
+    stripIrrelevantAppStateProps(prevAppState), stripIrrelevantAppStateProps(nextAppState), {
+        selectedElementIds: isShallowEqual,
+        selectedGroupIds: isShallowEqual,
+    }) && isShallowEqual(prev, next));
+};
+export default React.memo(LayerUI, areEqual);

package/dist/packages/excalidraw/components/LayerUI.scss

@@ -0,0 +1,112 @@
+@import "open-color/open-color";
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .layer-ui__wrapper.animate {
+    transition: width 0.1s ease-in-out;
+  }
+  .layer-ui__wrapper {
+    // when the rightside sidebar is docked, we need to resize the UI by its
+    // width, making the nested UI content shift to the left. To do this,
+    // we need the UI container to actually have dimensions set, but
+    // then we also need to disable pointer events else the canvas below
+    // wouldn't be interactive.
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: var(--zIndex-layerUI);
+
+    &__top-right {
+      display: flex;
+      gap: 0.75rem;
+    }
+
+    &__footer {
+      width: 100%;
+
+      &-right {
+        z-index: 100;
+        display: flex;
+      }
+    }
+
+    .zen-mode-transition {
+      transition: transform 0.5s ease-in-out;
+
+      :root[dir="ltr"] &.transition-left {
+        transform: translate(-999px, 0);
+      }
+
+      :root[dir="ltr"] &.transition-right {
+        transform: translate(999px, 0);
+      }
+
+      :root[dir="rtl"] &.transition-left {
+        transform: translate(999px, 0);
+      }
+
+      :root[dir="rtl"] &.transition-right {
+        transform: translate(-999px, 0);
+      }
+
+      &.layer-ui__wrapper__footer-left--transition-bottom {
+        transform: translate(0, 92px);
+      }
+    }
+
+    .disable-zen-mode {
+      padding: 10px;
+      position: absolute;
+      bottom: 0;
+      [dir="ltr"] & {
+        right: 1rem;
+      }
+      [dir="rtl"] & {
+        left: 1rem;
+      }
+      opacity: 0;
+      visibility: hidden;
+      transition: visibility 0s linear 0s, opacity 0.5s;
+
+      font-family: var(--ui-font);
+      font-size: 0.75rem;
+      font-weight: 500;
+      line-height: 1;
+
+      border-radius: var(--border-radius-lg);
+      border: 1px solid var(--default-border-color);
+      background-color: var(--island-bg-color);
+      color: var(--text-primary-color);
+
+      &:hover {
+        background-color: var(--button-hover-bg);
+      }
+      &:active {
+        border-color: var(--color-primary);
+      }
+
+      &--visible {
+        opacity: 1;
+        visibility: visible;
+        transition: visibility 0s linear 300ms, opacity 0.5s;
+        transition-delay: 0.8s;
+
+        pointer-events: var(--ui-pointerEvents);
+      }
+    }
+
+    .layer-ui__wrapper__footer-left,
+    .footer-center,
+    .layer-ui__wrapper__footer-right {
+      & > * {
+        pointer-events: var(--ui-pointerEvents);
+      }
+    }
+
+    .layer-ui__wrapper__footer-right {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+}