@myoc/excalidraw 0.18.2 → 0.18.4

package/dist/dev/index.js

@@ -158,6 +158,7 @@ import {
   STATS_PANELS,
   STROKE_WIDTH,
   SVGStringToFile,
+  SVG_DOCUMENT_PREAMBLE,
   SVG_NS,
   Scene_default,
   SelectionIcon,
@@ -582,6 +583,7 @@ import {
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   shouldRotateWithDiscreteAngle,
+  shouldTestInside,
   supportsResizeObserver,
   suppportsHorizontalAlign,
   svgIcon,
@@ -614,10 +616,10 @@ import {
   wrapEvent,
   wrapText,
   zoomAreaIcon
-} from "./chunk-WT7JKXOQ.js";
+} from "./chunk-RAK2YFHC.js";
 import {
   define_import_meta_env_default
-} from "./chunk-WBHLRU4Z.js";
+} from "./chunk-RE5EMAXD.js";
 import {
   en_default
 } from "./chunk-6MXLCRC3.js";
@@ -10729,7 +10731,9 @@ var exportCanvas = async (type, elements, appState, files, {
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
-          return new Blob([svg.outerHTML], { type: MIME_TYPES.svg });
+          return new Blob([SVG_DOCUMENT_PREAMBLE + svg.outerHTML], {
+            type: MIME_TYPES.svg
+          });
         }),
         {
           description: "Export to SVG",
@@ -10759,7 +10763,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-N5NBMO74.js").then(
+        (blob2) => import("./data/image-KBZ4SRRJ.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -12849,7 +12853,8 @@ var actionBindText = register({
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
-      autoResize: true
+      autoResize: true,
+      angle: isArrowElement(container) ? 0 : container?.angle ?? 0
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
@@ -22211,7 +22216,7 @@ import { jsx as jsx75 } from "react/jsx-runtime";
 var actionSmartZoom = register({
   name: "smartZoom",
   label: "toolBar.smartZoom",
-  trackEvent: { category: "element" },
+  trackEvent: { category: "toolbar" },
   icon: eyeIcon,
   viewMode: true,
   perform: (elements, appState, _, app) => {
@@ -22232,58 +22237,174 @@ var actionSmartZoom = register({
     };
   },
   keyTest: (event) => !event[KEYS.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS.F,
-  PanelComponent: ({ elements, appState, updateData }) => /* @__PURE__ */ jsx75(
+  PanelComponent: ({ data, updateData }) => /* @__PURE__ */ jsx75(
     ToolButton,
     {
       type: "button",
       icon: eyeIcon,
-      title: `${t("labels.smartZoom")} \u2014 ${KEYS.F.toUpperCase()}`,
       "aria-label": t("labels.smartZoom"),
       onClick: () => updateData(null),
-      visible: isSomeElementSelected(getNonDeletedElements(elements), appState)
+      size: data?.size || "medium",
+      "data-testid": "button-smart-zoom",
+      keyBindingLabel: KEYS.F.toLocaleUpperCase()
     }
   )
 });
 
-// components/BraveMeasureTextError.tsx
-import { jsx as jsx76, jsxs as jsxs40 } from "react/jsx-runtime";
-var BraveMeasureTextError = () => {
-  return /* @__PURE__ */ jsxs40("div", { "data-testid": "brave-measure-text-error", children: [
-    /* @__PURE__ */ jsx76("p", { children: /* @__PURE__ */ jsx76(
-      Trans_default,
-      {
-        i18nKey: "errors.brave_measure_text_error.line1",
-        bold: (el) => /* @__PURE__ */ jsx76("span", { style: { fontWeight: 600 }, children: el })
-      }
-    ) }),
-    /* @__PURE__ */ jsx76("p", { children: /* @__PURE__ */ jsx76(
-      Trans_default,
-      {
-        i18nKey: "errors.brave_measure_text_error.line2",
-        bold: (el) => /* @__PURE__ */ jsx76("span", { style: { fontWeight: 600 }, children: el })
-      }
-    ) }),
-    /* @__PURE__ */ jsx76("p", { children: /* @__PURE__ */ jsx76(
-      Trans_default,
-      {
-        i18nKey: "errors.brave_measure_text_error.line3",
-        link: (el) => /* @__PURE__ */ jsx76("a", { href: "http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser", children: el })
+// eraser/index.ts
+var POINTS_ON_TRAIL = 2;
+var EraserTrail = class extends AnimatedTrail {
+  constructor(animationFrameHandler, app) {
+    super(animationFrameHandler, app, {
+      streamline: 0.2,
+      size: 5,
+      keepHead: true,
+      sizeMapping: (c) => {
+        const DECAY_TIME = 200;
+        const DECAY_LENGTH = 10;
+        const t2 = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME
+        );
+        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
+        return Math.min(easeOut(l), easeOut(t2));
+      },
+      fill: () => app.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
+    });
+    __publicField(this, "elementsToErase", /* @__PURE__ */ new Set());
+    __publicField(this, "groupsToErase", /* @__PURE__ */ new Set());
+    __publicField(this, "segmentsCache", /* @__PURE__ */ new Map());
+    __publicField(this, "geometricShapesCache", /* @__PURE__ */ new Map());
+  }
+  startPath(x, y) {
+    this.endPath();
+    super.startPath(x, y);
+    this.elementsToErase.clear();
+  }
+  addPointToPath(x, y, restore2 = false) {
+    super.addPointToPath(x, y);
+    const elementsToEraser = this.updateElementsToBeErased(restore2);
+    return elementsToEraser;
+  }
+  updateElementsToBeErased(restoreToErase) {
+    let eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom(p[0], p[1])) || [];
+    eraserPath = eraserPath?.slice(eraserPath.length - POINTS_ON_TRAIL);
+    const candidateElements = this.app.visibleElements.filter(
+      (el) => !el.locked
+    );
+    const candidateElementsMap = arrayToMap(candidateElements);
+    const pathSegments = eraserPath.reduce((acc, point, index) => {
+      if (index === 0) {
+        return acc;
       }
-    ) }),
-    /* @__PURE__ */ jsx76("p", { children: /* @__PURE__ */ jsx76(
-      Trans_default,
-      {
-        i18nKey: "errors.brave_measure_text_error.line4",
-        issueLink: (el) => /* @__PURE__ */ jsx76("a", { href: "https://github.com/excalidraw/excalidraw/issues/new", children: el }),
-        discordLink: (el) => /* @__PURE__ */ jsxs40("a", { href: "https://discord.gg/UexuTaE", children: [
-          el,
-          "."
-        ] })
+      acc.push(lineSegment(eraserPath[index - 1], point));
+      return acc;
+    }, []);
+    if (pathSegments.length === 0) {
+      return [];
+    }
+    for (const element of candidateElements) {
+      if (restoreToErase && this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          candidateElementsMap,
+          this.app
+        );
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1);
+          if (this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.delete(elementInGroup.id);
+            }
+            this.groupsToErase.delete(shallowestGroupId);
+          }
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.delete(element.containerId);
+          }
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+            if (boundText) {
+              this.elementsToErase.delete(boundText);
+            }
+          }
+          this.elementsToErase.delete(element.id);
+        }
+      } else if (!restoreToErase && !this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          candidateElementsMap,
+          this.app
+        );
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1);
+          if (!this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.add(elementInGroup.id);
+            }
+            this.groupsToErase.add(shallowestGroupId);
+          }
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+            if (boundText) {
+              this.elementsToErase.add(boundText);
+            }
+          }
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.add(element.containerId);
+          }
+          this.elementsToErase.add(element.id);
+        }
       }
-    ) })
-  ] });
+    }
+    return Array.from(this.elementsToErase);
+  }
+  endPath() {
+    super.endPath();
+    super.clearTrails();
+    this.elementsToErase.clear();
+    this.groupsToErase.clear();
+    this.segmentsCache.clear();
+  }
+};
+var eraserTest = (pathSegments, element, elementsSegments, shapesCache, elementsMap, app) => {
+  let shape = shapesCache.get(element.id);
+  if (!shape) {
+    shape = getElementShape(element, elementsMap);
+    shapesCache.set(element.id, shape);
+  }
+  const lastPoint = pathSegments[pathSegments.length - 1][1];
+  if (shouldTestInside(element) && isPointInShape(lastPoint, shape)) {
+    return true;
+  }
+  let elementSegments = elementsSegments.get(element.id);
+  if (!elementSegments) {
+    elementSegments = getElementLineSegments(element, elementsMap);
+    elementsSegments.set(element.id, elementSegments);
+  }
+  return pathSegments.some(
+    (pathSegment) => elementSegments?.some(
+      (elementSegment) => lineSegmentIntersectionPoints(
+        pathSegment,
+        elementSegment,
+        app.getElementHitThreshold()
+      ) !== null
+    )
+  );
 };
-var BraveMeasureTextError_default = BraveMeasureTextError;
 
 // components/ContextMenu.tsx
 import clsx32 from "clsx";
@@ -22292,7 +22413,7 @@ import React27 from "react";
 // components/Popover.tsx
 import { useLayoutEffect as useLayoutEffect4, useRef as useRef23, useEffect as useEffect28 } from "react";
 import { unstable_batchedUpdates as unstable_batchedUpdates2 } from "react-dom";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var Popover6 = ({
   children,
   left,
@@ -22392,11 +22513,11 @@ var Popover6 = ({
       return () => document.removeEventListener("pointerdown", handler, false);
     }
   }, [onCloseRequest]);
-  return /* @__PURE__ */ jsx77("div", { className: "popover", ref: popoverRef, tabIndex: -1, children });
+  return /* @__PURE__ */ jsx76("div", { className: "popover", ref: popoverRef, tabIndex: -1, children });
 };
 
 // components/ContextMenu.tsx
-import { jsx as jsx78, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs40 } from "react/jsx-runtime";
 var CONTEXT_MENU_SEPARATOR = "separator";
 var ContextMenu = React27.memo(
   ({ actionManager, items, top, left, onClose }) => {
@@ -22413,7 +22534,7 @@ var ContextMenu = React27.memo(
       }
       return acc;
     }, []);
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx77(
       Popover6,
       {
         onCloseRequest: () => {
@@ -22426,7 +22547,7 @@ var ContextMenu = React27.memo(
         offsetTop: appState.offsetTop,
         viewportWidth: appState.width,
         viewportHeight: appState.height,
-        children: /* @__PURE__ */ jsx78(
+        children: /* @__PURE__ */ jsx77(
           "ul",
           {
             className: "context-menu",
@@ -22436,7 +22557,7 @@ var ContextMenu = React27.memo(
                 if (!filteredItems[idx - 1] || filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR) {
                   return null;
                 }
-                return /* @__PURE__ */ jsx78("hr", { className: "context-menu-item-separator" }, idx);
+                return /* @__PURE__ */ jsx77("hr", { className: "context-menu-item-separator" }, idx);
               }
               const actionName = item.name;
               let label = "";
@@ -22453,7 +22574,7 @@ var ContextMenu = React27.memo(
                   label = t(item.label);
                 }
               }
-              return /* @__PURE__ */ jsx78(
+              return /* @__PURE__ */ jsx77(
                 "li",
                 {
                   "data-testid": actionName,
@@ -22462,7 +22583,7 @@ var ContextMenu = React27.memo(
                       actionManager.executeAction(item, "contextMenu");
                     });
                   },
-                  children: /* @__PURE__ */ jsxs41(
+                  children: /* @__PURE__ */ jsxs40(
                     "button",
                     {
                       type: "button",
@@ -22471,8 +22592,8 @@ var ContextMenu = React27.memo(
                         checkmark: item.checked?.(appState)
                       }),
                       children: [
-                        /* @__PURE__ */ jsx78("div", { className: "context-menu-item__label", children: label }),
-                        /* @__PURE__ */ jsx78("kbd", { className: "context-menu-item__shortcut", children: actionName ? getShortcutFromShortcutName(actionName) : "" })
+                        /* @__PURE__ */ jsx77("div", { className: "context-menu-item__label", children: label }),
+                        /* @__PURE__ */ jsx77("kbd", { className: "context-menu-item__shortcut", children: actionName ? getShortcutFromShortcutName(actionName) : "" })
                       ]
                     }
                   )
@@ -22488,18 +22609,18 @@ var ContextMenu = React27.memo(
 );
 
 // components/FollowMode/FollowMode.tsx
-import { jsx as jsx79, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs41 } from "react/jsx-runtime";
 var FollowMode = ({
   height,
   width,
   userToFollow,
   onDisconnect
 }) => {
-  return /* @__PURE__ */ jsx79("div", { className: "follow-mode", style: { width, height }, children: /* @__PURE__ */ jsxs42("div", { className: "follow-mode__badge", children: [
-    /* @__PURE__ */ jsxs42("div", { className: "follow-mode__badge__label", children: [
+  return /* @__PURE__ */ jsx78("div", { className: "follow-mode", style: { width, height }, children: /* @__PURE__ */ jsxs41("div", { className: "follow-mode__badge", children: [
+    /* @__PURE__ */ jsxs41("div", { className: "follow-mode__badge__label", children: [
       "Following",
       " ",
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx78(
         "span",
         {
           className: "follow-mode__badge__username",
@@ -22508,7 +22629,7 @@ var FollowMode = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx78(
       "button",
       {
         type: "button",
@@ -22553,7 +22674,7 @@ var useInitializeTunnels = () => {
 // components/LoadingMessage.tsx
 import clsx33 from "clsx";
 import { useState as useState23, useEffect as useEffect29 } from "react";
-import { jsx as jsx80, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs42 } from "react/jsx-runtime";
 var LoadingMessage = ({
   delay,
   theme
@@ -22571,15 +22692,15 @@ var LoadingMessage = ({
   if (isWaiting) {
     return null;
   }
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       className: clsx33("LoadingMessage", {
         "LoadingMessage--dark": theme === THEME.DARK
       }),
       children: [
-        /* @__PURE__ */ jsx80("div", { children: /* @__PURE__ */ jsx80(Spinner_default, {}) }),
-        /* @__PURE__ */ jsx80("div", { className: "LoadingMessage-text", children: t("labels.loadingScene") })
+        /* @__PURE__ */ jsx79("div", { children: /* @__PURE__ */ jsx79(Spinner_default, {}) }),
+        /* @__PURE__ */ jsx79("div", { className: "LoadingMessage-text", children: t("labels.loadingScene") })
       ]
     }
   );
@@ -22587,12 +22708,12 @@ var LoadingMessage = ({
 
 // components/FixedSideContainer.tsx
 import clsx34 from "clsx";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var FixedSideContainer = ({
   children,
   side,
   className
-}) => /* @__PURE__ */ jsx81(
+}) => /* @__PURE__ */ jsx80(
   "div",
   {
     className: clsx34(
@@ -22606,9 +22727,9 @@ var FixedSideContainer = ({
 
 // components/HandButton.tsx
 import clsx35 from "clsx";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var HandButton = (props) => {
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx81(
     ToolButton,
     {
       className: clsx35("Shape", { fillable: false }),
@@ -22627,7 +22748,7 @@ var HandButton = (props) => {
 };
 
 // components/HintViewer.tsx
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var getHints = ({
   appState,
   isMobile,
@@ -22740,19 +22861,19 @@ var HintViewer = ({
   const hint = Array.isArray(hints) ? hints.map((hint2) => {
     return getShortcutKey(hint2).replace(/\. ?$/, "");
   }).join(". ") : getShortcutKey(hints);
-  return /* @__PURE__ */ jsx83("div", { className: "HintViewer", children: /* @__PURE__ */ jsx83("span", { children: hint }) });
+  return /* @__PURE__ */ jsx82("div", { className: "HintViewer", children: /* @__PURE__ */ jsx82("span", { children: hint }) });
 };
 
 // components/LockButton.tsx
 import clsx36 from "clsx";
-import { jsx as jsx84, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs43 } from "react/jsx-runtime";
 var DEFAULT_SIZE = "medium";
 var ICONS2 = {
   CHECKED: LockedIcon,
   UNCHECKED: UnlockedIcon
 };
 var LockButton = (props) => {
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs43(
     "label",
     {
       className: clsx36(
@@ -22764,7 +22885,7 @@ var LockButton = (props) => {
       ),
       title: `${props.title} \u2014 Q`,
       children: [
-        /* @__PURE__ */ jsx84(
+        /* @__PURE__ */ jsx83(
           "input",
           {
             className: "ToolIcon_type_checkbox",
@@ -22776,7 +22897,7 @@ var LockButton = (props) => {
             "data-testid": "toolbar-lock"
           }
         ),
-        /* @__PURE__ */ jsx84("div", { className: "ToolIcon__icon", children: props.checked ? ICONS2.CHECKED : ICONS2.UNCHECKED })
+        /* @__PURE__ */ jsx83("div", { className: "ToolIcon__icon", children: props.checked ? ICONS2.CHECKED : ICONS2.UNCHECKED })
       ]
     }
   );
@@ -22784,13 +22905,13 @@ var LockButton = (props) => {
 
 // components/PenModeButton.tsx
 import clsx37 from "clsx";
-import { jsx as jsx85, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs44 } from "react/jsx-runtime";
 var DEFAULT_SIZE2 = "medium";
 var PenModeButton = (props) => {
   if (!props.penDetected) {
     return null;
   }
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs44(
     "label",
     {
       className: clsx37(
@@ -22802,7 +22923,7 @@ var PenModeButton = (props) => {
       ),
       title: `${props.title}`,
       children: [
-        /* @__PURE__ */ jsx85(
+        /* @__PURE__ */ jsx84(
           "input",
           {
             className: "ToolIcon_type_checkbox",
@@ -22813,25 +22934,25 @@ var PenModeButton = (props) => {
             "aria-label": props.title
           }
         ),
-        /* @__PURE__ */ jsx85("div", { className: "ToolIcon__icon", children: PenModeIcon })
+        /* @__PURE__ */ jsx84("div", { className: "ToolIcon__icon", children: PenModeIcon })
       ]
     }
   );
 };
 
 // components/Section.tsx
-import { Fragment as Fragment10, jsx as jsx86, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx85, jsxs as jsxs45 } from "react/jsx-runtime";
 var Section = ({ heading, children, ...props }) => {
   const { id } = useExcalidrawContainer();
-  const header = /* @__PURE__ */ jsx86("h2", { className: "visually-hidden", id: `${id}-${heading}-title`, children: t(`headings.${heading}`) });
-  return /* @__PURE__ */ jsx86("section", { ...props, "aria-labelledby": `${id}-${heading}-title`, children: typeof children === "function" ? children(header) : /* @__PURE__ */ jsxs46(Fragment10, { children: [
+  const header = /* @__PURE__ */ jsx85("h2", { className: "visually-hidden", id: `${id}-${heading}-title`, children: t(`headings.${heading}`) });
+  return /* @__PURE__ */ jsx85("section", { ...props, "aria-labelledby": `${id}-${heading}-title`, children: typeof children === "function" ? children(header) : /* @__PURE__ */ jsxs45(Fragment10, { children: [
     header,
     children
   ] }) });
 };
 
 // components/MobileMenu.tsx
-import { Fragment as Fragment11, jsx as jsx87, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx86, jsxs as jsxs46 } from "react/jsx-runtime";
 var MobileMenu = ({
   appState,
   elements,
@@ -22854,12 +22975,12 @@ var MobileMenu = ({
     DefaultSidebarTriggerTunnel
   } = useTunnels();
   const renderToolbar = () => {
-    return /* @__PURE__ */ jsxs47(FixedSideContainer, { side: "top", className: "App-top-bar", children: [
-      renderWelcomeScreen && /* @__PURE__ */ jsx87(WelcomeScreenCenterTunnel.Out, {}),
-      /* @__PURE__ */ jsx87(Section, { heading: "shapes", children: (heading) => /* @__PURE__ */ jsx87(Stack_default.Col, { gap: 4, align: "center", children: /* @__PURE__ */ jsxs47(Stack_default.Row, { gap: 1, className: "App-toolbar-container", children: [
-        /* @__PURE__ */ jsxs47(Island, { padding: 1, className: "App-toolbar App-toolbar--mobile", children: [
+    return /* @__PURE__ */ jsxs46(FixedSideContainer, { side: "top", className: "App-top-bar", children: [
+      renderWelcomeScreen && /* @__PURE__ */ jsx86(WelcomeScreenCenterTunnel.Out, {}),
+      /* @__PURE__ */ jsx86(Section, { heading: "shapes", children: (heading) => /* @__PURE__ */ jsx86(Stack_default.Col, { gap: 4, align: "center", children: /* @__PURE__ */ jsxs46(Stack_default.Row, { gap: 1, className: "App-toolbar-container", children: [
+        /* @__PURE__ */ jsxs46(Island, { padding: 1, className: "App-toolbar App-toolbar--mobile", children: [
           heading,
-          /* @__PURE__ */ jsx87(Stack_default.Row, { gap: 1, children: /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx86(Stack_default.Row, { gap: 1, children: /* @__PURE__ */ jsx86(
             ShapesSwitcher,
             {
               appState,
@@ -22870,9 +22991,9 @@ var MobileMenu = ({
           ) })
         ] }),
         renderTopRightUI && renderTopRightUI(true, appState),
-        /* @__PURE__ */ jsxs47("div", { className: "mobile-misc-tools-container", children: [
-          !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx87(DefaultSidebarTriggerTunnel.Out, {}),
-          /* @__PURE__ */ jsx87(
+        /* @__PURE__ */ jsxs46("div", { className: "mobile-misc-tools-container", children: [
+          !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx86(DefaultSidebarTriggerTunnel.Out, {}),
+          /* @__PURE__ */ jsx86(
             PenModeButton,
             {
               checked: appState.penMode,
@@ -22882,7 +23003,7 @@ var MobileMenu = ({
               penDetected: appState.penDetected
             }
           ),
-          /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx86(
             LockButton,
             {
               checked: appState.activeTool.locked,
@@ -22891,7 +23012,7 @@ var MobileMenu = ({
               isMobile: true
             }
           ),
-          /* @__PURE__ */ jsx87(
+          /* @__PURE__ */ jsx86(
             HandButton,
             {
               checked: isHandToolActive(appState),
@@ -22902,7 +23023,7 @@ var MobileMenu = ({
           )
         ] })
       ] }) }) }),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx86(
         HintViewer,
         {
           appState,
@@ -22915,25 +23036,25 @@ var MobileMenu = ({
   };
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled || appState.openDialog?.name === "elementLinkSelector") {
-      return /* @__PURE__ */ jsx87("div", { className: "App-toolbar-content", children: /* @__PURE__ */ jsx87(MainMenuTunnel.Out, {}) });
+      return /* @__PURE__ */ jsx86("div", { className: "App-toolbar-content", children: /* @__PURE__ */ jsx86(MainMenuTunnel.Out, {}) });
     }
-    return /* @__PURE__ */ jsxs47("div", { className: "App-toolbar-content", children: [
-      /* @__PURE__ */ jsx87(MainMenuTunnel.Out, {}),
+    return /* @__PURE__ */ jsxs46("div", { className: "App-toolbar-content", children: [
+      /* @__PURE__ */ jsxs46("div", { children: [
+        actionManager.renderAction("smartZoom"),
+        actionManager.renderAction("undo"),
+        actionManager.renderAction("redo")
+      ] }),
       actionManager.renderAction("toggleEditMenu"),
       actionManager.renderAction(
         appState.multiElement ? "finalize" : "duplicateSelection"
       ),
-      actionManager.renderAction("deleteSelectedElements"),
-      /* @__PURE__ */ jsxs47("div", { children: [
-        actionManager.renderAction("undo"),
-        actionManager.renderAction("redo")
-      ] })
+      actionManager.renderAction("deleteSelectedElements")
     ] });
   };
-  return /* @__PURE__ */ jsxs47(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs46(Fragment11, { children: [
     renderSidebars(),
     !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && renderToolbar(),
-    /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx86(
       "div",
       {
         className: "App-bottom-bar",
@@ -22942,8 +23063,8 @@ var MobileMenu = ({
           marginLeft: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
           marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2
         },
-        children: /* @__PURE__ */ jsxs47(Island, { padding: 0, children: [
-          appState.openMenu === "shape" && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && showSelectedShapeActions(appState, elements) ? /* @__PURE__ */ jsx87(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: /* @__PURE__ */ jsx87(
+        children: /* @__PURE__ */ jsxs46(Island, { padding: 0, children: [
+          appState.openMenu === "shape" && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && showSelectedShapeActions(appState, elements) ? /* @__PURE__ */ jsx86(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: /* @__PURE__ */ jsx86(
             SelectedShapeActions,
             {
               appState,
@@ -22952,9 +23073,9 @@ var MobileMenu = ({
               app
             }
           ) }) : null,
-          /* @__PURE__ */ jsxs47("footer", { className: "App-toolbar", children: [
+          /* @__PURE__ */ jsxs46("footer", { className: "App-toolbar", children: [
             renderAppToolbar(),
-            appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && /* @__PURE__ */ jsx87(
+            appState.scrolledOutside && !appState.openMenu && !appState.openSidebar && /* @__PURE__ */ jsx86(
               "button",
               {
                 type: "button",
@@ -22977,7 +23098,7 @@ var MobileMenu = ({
 // components/PasteChartDialog.tsx
 import oc2 from "open-color";
 import React29, { useLayoutEffect as useLayoutEffect5, useRef as useRef24, useState as useState24 } from "react";
-import { jsx as jsx88, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs47 } from "react/jsx-runtime";
 var ChartPreviewBtn = (props) => {
   const previewRef = useRef24(null);
   const [chartElements, setChartElements] = useState24(
@@ -23020,7 +23141,7 @@ var ChartPreviewBtn = (props) => {
       previewNode.replaceChildren();
     };
   }, [props.spreadsheet, props.chartType, props.selected]);
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx87(
     "button",
     {
       type: "button",
@@ -23030,7 +23151,7 @@ var ChartPreviewBtn = (props) => {
           props.onClick(props.chartType, chartElements);
         }
       },
-      children: /* @__PURE__ */ jsx88("div", { ref: previewRef })
+      children: /* @__PURE__ */ jsx87("div", { ref: previewRef })
     }
   );
 };
@@ -23056,7 +23177,7 @@ var PasteChartDialog = ({
       }
     });
   };
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx87(
     Dialog,
     {
       size: "small",
@@ -23064,8 +23185,8 @@ var PasteChartDialog = ({
       title: t("labels.pasteCharts"),
       className: "PasteChartDialog",
       autofocus: false,
-      children: /* @__PURE__ */ jsxs48("div", { className: "container", children: [
-        /* @__PURE__ */ jsx88(
+      children: /* @__PURE__ */ jsxs47("div", { className: "container", children: [
+        /* @__PURE__ */ jsx87(
           ChartPreviewBtn,
           {
             chartType: "bar",
@@ -23074,7 +23195,7 @@ var PasteChartDialog = ({
             onClick: handleChartClick
           }
         ),
-        /* @__PURE__ */ jsx88(
+        /* @__PURE__ */ jsx87(
           ChartPreviewBtn,
           {
             chartType: "line",
@@ -23092,14 +23213,14 @@ var PasteChartDialog = ({
 import * as Popover7 from "@radix-ui/react-popover";
 import clsx38 from "clsx";
 import React30, { useLayoutEffect as useLayoutEffect6 } from "react";
-import { Fragment as Fragment12, jsx as jsx89, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx88, jsxs as jsxs48 } from "react/jsx-runtime";
 var DEFAULT_MAX_AVATARS = 4;
 var SHOW_COLLABORATORS_FILTER_AT = 8;
 var ConditionalTooltipWrapper = ({
   shouldWrap,
   children,
   username
-}) => shouldWrap ? /* @__PURE__ */ jsx89(Tooltip, { label: username || "Unknown user", children }) : /* @__PURE__ */ jsx89(Fragment12, { children });
+}) => shouldWrap ? /* @__PURE__ */ jsx88(Tooltip, { label: username || "Unknown user", children }) : /* @__PURE__ */ jsx88(Fragment12, { children });
 var renderCollaborator = ({
   actionManager,
   collaborator,
@@ -23115,7 +23236,7 @@ var renderCollaborator = ({
     isBeingFollowed
   };
   const avatarJSX = actionManager.renderAction("goToCollaborator", data);
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx88(
     ConditionalTooltipWrapper,
     {
       username: collaborator.username,
@@ -23190,7 +23311,7 @@ var UserList = React30.memo(
         isBeingFollowed: collaborator.socketId === userToFollow
       })
     );
-    return mobile ? /* @__PURE__ */ jsx89("div", { className: clsx38("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(
+    return mobile ? /* @__PURE__ */ jsx88("div", { className: clsx38("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(
       (collaborator) => renderCollaborator({
         actionManager,
         collaborator,
@@ -23198,19 +23319,19 @@ var UserList = React30.memo(
         shouldWrapWithTooltip: true,
         isBeingFollowed: collaborator.socketId === userToFollow
       })
-    ) }) : /* @__PURE__ */ jsx89("div", { className: "UserList__wrapper", ref: userListWrapper, children: /* @__PURE__ */ jsxs49(
+    ) }) : /* @__PURE__ */ jsx88("div", { className: "UserList__wrapper", ref: userListWrapper, children: /* @__PURE__ */ jsxs48(
       "div",
       {
         className: clsx38("UserList", className),
         style: { [`--max-avatars`]: maxAvatars },
         children: [
           firstNAvatarsJSX,
-          uniqueCollaboratorsArray.length > maxAvatars - 1 && /* @__PURE__ */ jsxs49(Popover7.Root, { children: [
-            /* @__PURE__ */ jsxs49(Popover7.Trigger, { className: "UserList__more", children: [
+          uniqueCollaboratorsArray.length > maxAvatars - 1 && /* @__PURE__ */ jsxs48(Popover7.Root, { children: [
+            /* @__PURE__ */ jsxs48(Popover7.Trigger, { className: "UserList__more", children: [
               "+",
               uniqueCollaboratorsArray.length - maxAvatars + 1
             ] }),
-            /* @__PURE__ */ jsx89(
+            /* @__PURE__ */ jsx88(
               Popover7.Content,
               {
                 style: {
@@ -23220,21 +23341,21 @@ var UserList = React30.memo(
                 },
                 align: "end",
                 sideOffset: 10,
-                children: /* @__PURE__ */ jsxs49(Island, { padding: 2, children: [
-                  uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ jsx89(
+                children: /* @__PURE__ */ jsxs48(Island, { padding: 2, children: [
+                  uniqueCollaboratorsArray.length >= SHOW_COLLABORATORS_FILTER_AT && /* @__PURE__ */ jsx88(
                     QuickSearch,
                     {
                       placeholder: t("quickSearch.placeholder"),
                       onChange: setSearchTerm
                     }
                   ),
-                  /* @__PURE__ */ jsx89(
+                  /* @__PURE__ */ jsx88(
                     ScrollableList,
                     {
                       className: "dropdown-menu UserList__collaborators",
                       placeholder: t("userList.empty"),
                       children: filteredCollaborators.length > 0 ? [
-                        /* @__PURE__ */ jsx89("div", { className: "hint", children: t("userList.hint.text") }),
+                        /* @__PURE__ */ jsx88("div", { className: "hint", children: t("userList.hint.text") }),
                         filteredCollaborators.map(
                           (collaborator) => renderCollaborator({
                             actionManager,
@@ -23247,7 +23368,7 @@ var UserList = React30.memo(
                       ] : []
                     }
                   ),
-                  /* @__PURE__ */ jsx89(
+                  /* @__PURE__ */ jsx88(
                     Popover7.Arrow,
                     {
                       width: 20,
@@ -23291,8 +23412,8 @@ var UserList = React30.memo(
 import clsx39 from "clsx";
 
 // components/HelpButton.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
-var HelpButton = (props) => /* @__PURE__ */ jsx90(
+import { jsx as jsx89 } from "react/jsx-runtime";
+var HelpButton = (props) => /* @__PURE__ */ jsx89(
   "button",
   {
     className: "help-icon",
@@ -23305,7 +23426,7 @@ var HelpButton = (props) => /* @__PURE__ */ jsx90(
 );
 
 // components/footer/Footer.tsx
-import { jsx as jsx91, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs49 } from "react/jsx-runtime";
 var Footer = ({
   appState,
   actionManager,
@@ -23315,27 +23436,28 @@ var Footer = ({
   const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
   const device = useDevice();
   const showFinalize = !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsxs49(
     "footer",
     {
       role: "contentinfo",
       className: "layer-ui__wrapper__footer App-menu App-menu_bottom",
       children: [
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx90(
           "div",
           {
             className: clsx39("layer-ui__wrapper__footer-left zen-mode-transition", {
               "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
             }),
-            children: /* @__PURE__ */ jsx91(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs50(Section, { heading: "canvasActions", children: [
-              /* @__PURE__ */ jsx91(
+            children: /* @__PURE__ */ jsx90(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs49(Section, { heading: "canvasActions", children: [
+              /* @__PURE__ */ jsx90(Tooltip, { label: t("buttons.smartZoom"), children: /* @__PURE__ */ jsx90("div", { className: clsx39("smart-zoom-button"), children: actionManager.renderAction("smartZoom") }) }),
+              /* @__PURE__ */ jsx90(
                 ZoomActions,
                 {
                   renderAction: actionManager.renderAction,
                   zoom: appState.zoom
                 }
               ),
-              !appState.viewModeEnabled && /* @__PURE__ */ jsx91(
+              !appState.viewModeEnabled && /* @__PURE__ */ jsx90(
                 UndoRedoActions,
                 {
                   renderAction: actionManager.renderAction,
@@ -23344,7 +23466,7 @@ var Footer = ({
                   })
                 }
               ),
-              showFinalize && /* @__PURE__ */ jsx91(
+              showFinalize && /* @__PURE__ */ jsx90(
                 FinalizeAction,
                 {
                   renderAction: actionManager.renderAction,
@@ -23356,16 +23478,16 @@ var Footer = ({
             ] }) })
           }
         ),
-        /* @__PURE__ */ jsx91(FooterCenterTunnel.Out, {}),
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx90(FooterCenterTunnel.Out, {}),
+        /* @__PURE__ */ jsx90(
           "div",
           {
             className: clsx39("layer-ui__wrapper__footer-right zen-mode-transition", {
               "transition-right": appState.zenModeEnabled
             }),
-            children: /* @__PURE__ */ jsxs50("div", { style: { position: "relative" }, children: [
-              renderWelcomeScreen && /* @__PURE__ */ jsx91(WelcomeScreenHelpHintTunnel.Out, {}),
-              /* @__PURE__ */ jsx91(
+            children: /* @__PURE__ */ jsxs49("div", { style: { position: "relative" }, children: [
+              renderWelcomeScreen && /* @__PURE__ */ jsx90(WelcomeScreenHelpHintTunnel.Out, {}),
+              /* @__PURE__ */ jsx90(
                 HelpButton,
                 {
                   onClick: () => actionManager.executeAction(actionShortcuts)
@@ -23374,7 +23496,7 @@ var Footer = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx90(
           ExitZenModeAction,
           {
             actionManager,
@@ -23409,7 +23531,7 @@ import React31 from "react";
 var SidebarPropsContext = React31.createContext({});
 
 // components/Sidebar/SidebarHeader.tsx
-import { jsx as jsx92, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs50 } from "react/jsx-runtime";
 var SidebarHeader = ({
   children,
   className
@@ -23417,15 +23539,15 @@ var SidebarHeader = ({
   const device = useDevice();
   const props = useContext2(SidebarPropsContext);
   const renderDockButton = !!(device.editor.canFitSidebar && props.shouldRenderDockButton);
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs50(
     "div",
     {
       className: clsx40("sidebar__header", className),
       "data-testid": "sidebar-header",
       children: [
         children,
-        /* @__PURE__ */ jsxs51("div", { className: "sidebar__header__buttons", children: [
-          renderDockButton && /* @__PURE__ */ jsx92(Tooltip, { label: t("labels.sidebarLock"), children: /* @__PURE__ */ jsx92(
+        /* @__PURE__ */ jsxs50("div", { className: "sidebar__header__buttons", children: [
+          renderDockButton && /* @__PURE__ */ jsx91(Tooltip, { label: t("labels.sidebarLock"), children: /* @__PURE__ */ jsx91(
             Button,
             {
               onSelect: () => props.onDock?.(!props.docked),
@@ -23436,7 +23558,7 @@ var SidebarHeader = ({
               children: PinIcon
             }
           ) }),
-          /* @__PURE__ */ jsx92(
+          /* @__PURE__ */ jsx91(
             Button,
             {
               "data-testid": "sidebar-close",
@@ -23455,14 +23577,14 @@ SidebarHeader.displayName = "SidebarHeader";
 
 // components/Sidebar/SidebarTabTrigger.tsx
 import * as RadixTabs from "@radix-ui/react-tabs";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var SidebarTabTrigger = ({
   children,
   tab,
   onSelect,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx93(RadixTabs.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx92(RadixTabs.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx92(
     "button",
     {
       type: "button",
@@ -23476,18 +23598,18 @@ SidebarTabTrigger.displayName = "SidebarTabTrigger";
 
 // components/Sidebar/SidebarTabTriggers.tsx
 import * as RadixTabs2 from "@radix-ui/react-tabs";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var SidebarTabTriggers = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx94(RadixTabs2.List, { className: "sidebar-triggers", ...rest, children });
+  return /* @__PURE__ */ jsx93(RadixTabs2.List, { className: "sidebar-triggers", ...rest, children });
 };
 SidebarTabTriggers.displayName = "SidebarTabTriggers";
 
 // components/Sidebar/SidebarTrigger.tsx
 import clsx41 from "clsx";
-import { jsx as jsx95, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs51 } from "react/jsx-runtime";
 var SidebarTrigger = ({
   name,
   tab,
@@ -23500,8 +23622,8 @@ var SidebarTrigger = ({
 }) => {
   const setAppState = useExcalidrawSetAppState();
   const appState = useUIAppState();
-  return /* @__PURE__ */ jsxs52("label", { title, className: "sidebar-trigger__label-element", children: [
-    /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsxs51("label", { title, className: "sidebar-trigger__label-element", children: [
+    /* @__PURE__ */ jsx94(
       "input",
       {
         className: "ToolIcon_type_checkbox",
@@ -23517,9 +23639,9 @@ var SidebarTrigger = ({
         "aria-keyshortcuts": "0"
       }
     ),
-    /* @__PURE__ */ jsxs52("div", { className: clsx41("sidebar-trigger", className), style, children: [
-      icon && /* @__PURE__ */ jsx95("div", { children: icon }),
-      children && /* @__PURE__ */ jsx95("div", { className: "sidebar-trigger__label", children })
+    /* @__PURE__ */ jsxs51("div", { className: clsx41("sidebar-trigger", className), style, children: [
+      icon && /* @__PURE__ */ jsx94("div", { children: icon }),
+      children && /* @__PURE__ */ jsx94("div", { className: "sidebar-trigger__label", children })
     ] })
   ] });
 };
@@ -23527,7 +23649,7 @@ SidebarTrigger.displayName = "SidebarTrigger";
 
 // components/Sidebar/SidebarTabs.tsx
 import * as RadixTabs3 from "@radix-ui/react-tabs";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var SidebarTabs = ({
   children,
   ...rest
@@ -23538,7 +23660,7 @@ var SidebarTabs = ({
     return null;
   }
   const { name } = appState.openSidebar;
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx95(
     RadixTabs3.Root,
     {
       className: "sidebar-tabs-root",
@@ -23556,18 +23678,18 @@ SidebarTabs.displayName = "SidebarTabs";
 
 // components/Sidebar/SidebarTab.tsx
 import * as RadixTabs4 from "@radix-ui/react-tabs";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var SidebarTab = ({
   tab,
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx97(RadixTabs4.Content, { ...rest, value: tab, "data-testid": tab, children });
+  return /* @__PURE__ */ jsx96(RadixTabs4.Content, { ...rest, value: tab, "data-testid": tab, children });
 };
 SidebarTab.displayName = "SidebarTab";
 
 // components/Sidebar/Sidebar.tsx
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 import { createElement } from "react";
 var isSidebarDockedAtom = atom(false);
 var SidebarInner = forwardRef4(
@@ -23641,13 +23763,13 @@ var SidebarInner = forwardRef4(
         document.removeEventListener("keydown" /* KEYDOWN */, handleKeyDown);
       };
     }, [closeLibrary, docked, device.editor.canFitSidebar]);
-    return /* @__PURE__ */ jsx98(
+    return /* @__PURE__ */ jsx97(
       Island,
       {
         ...rest,
         className: clsx42("sidebar", { "sidebar--docked": docked }, className),
         ref: islandRef,
-        children: /* @__PURE__ */ jsx98(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
+        children: /* @__PURE__ */ jsx97(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
       }
     );
   }
@@ -23695,7 +23817,7 @@ Sidebar.displayName = "Sidebar";
 
 // components/hoc/withInternalFallback.tsx
 import { useLayoutEffect as useLayoutEffect8, useRef as useRef26 } from "react";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var withInternalFallback = (componentName, Component) => {
   const renderAtom = atom(0);
   const WrapperComponent = (props) => {
@@ -23740,7 +23862,7 @@ var withInternalFallback = (componentName, Component) => {
     ) {
       return null;
     }
-    return /* @__PURE__ */ jsx99(Component, { ...props });
+    return /* @__PURE__ */ jsx98(Component, { ...props });
   };
   WrapperComponent.displayName = componentName;
   return WrapperComponent;
@@ -23789,14 +23911,14 @@ async function openConfirmModal({
 
 // components/RadioGroup.tsx
 import clsx43 from "clsx";
-import { jsx as jsx100, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs52 } from "react/jsx-runtime";
 var RadioGroup = function({
   onChange,
   value,
   choices,
   name
 }) {
-  return /* @__PURE__ */ jsx100("div", { className: "RadioGroup", children: choices.map((choice) => /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsx99("div", { className: "RadioGroup", children: choices.map((choice) => /* @__PURE__ */ jsxs52(
     "div",
     {
       className: clsx43("RadioGroup__choice", {
@@ -23804,7 +23926,7 @@ var RadioGroup = function({
       }),
       title: choice.ariaLabel,
       children: [
-        /* @__PURE__ */ jsx100(
+        /* @__PURE__ */ jsx99(
           "input",
           {
             name,
@@ -23822,7 +23944,7 @@ var RadioGroup = function({
 };
 
 // components/dropdownMenu/DropdownMenuItemContentRadio.tsx
-import { Fragment as Fragment13, jsx as jsx101, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx100, jsxs as jsxs53 } from "react/jsx-runtime";
 var DropdownMenuItemContentRadio = ({
   value,
   shortcut,
@@ -23832,10 +23954,10 @@ var DropdownMenuItemContentRadio = ({
   name
 }) => {
   const device = useDevice();
-  return /* @__PURE__ */ jsxs54(Fragment13, { children: [
-    /* @__PURE__ */ jsxs54("div", { className: "dropdown-menu-item-base dropdown-menu-item-bare", children: [
-      /* @__PURE__ */ jsx101("label", { className: "dropdown-menu-item__text", htmlFor: name, children }),
-      /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsxs53(Fragment13, { children: [
+    /* @__PURE__ */ jsxs53("div", { className: "dropdown-menu-item-base dropdown-menu-item-bare", children: [
+      /* @__PURE__ */ jsx100("label", { className: "dropdown-menu-item__text", htmlFor: name, children }),
+      /* @__PURE__ */ jsx100(
         RadioGroup,
         {
           name,
@@ -23845,14 +23967,14 @@ var DropdownMenuItemContentRadio = ({
         }
       )
     ] }),
-    shortcut && !device.editor.isMobile && /* @__PURE__ */ jsx101("div", { className: "dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned", children: shortcut })
+    shortcut && !device.editor.isMobile && /* @__PURE__ */ jsx100("div", { className: "dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned", children: shortcut })
   ] });
 };
 DropdownMenuItemContentRadio.displayName = "DropdownMenuItemContentRadio";
 var DropdownMenuItemContentRadio_default = DropdownMenuItemContentRadio;
 
 // components/main-menu/DefaultItems.tsx
-import { Fragment as Fragment14, jsx as jsx102, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx101, jsxs as jsxs54 } from "react/jsx-runtime";
 var LoadScene = () => {
   const { t: t2 } = useI18n();
   const actionManager = useExcalidrawActionManager();
@@ -23865,19 +23987,19 @@ var LoadScene = () => {
       title: t2("overwriteConfirm.modal.loadFromFile.title"),
       actionLabel: t2("overwriteConfirm.modal.loadFromFile.button"),
       color: "warning",
-      description: /* @__PURE__ */ jsx102(
+      description: /* @__PURE__ */ jsx101(
         Trans_default,
         {
           i18nKey: "overwriteConfirm.modal.loadFromFile.description",
-          bold: (text) => /* @__PURE__ */ jsx102("strong", { children: text }),
-          br: () => /* @__PURE__ */ jsx102("br", {})
+          bold: (text) => /* @__PURE__ */ jsx101("strong", { children: text }),
+          br: () => /* @__PURE__ */ jsx101("br", {})
         }
       )
     })) {
       actionManager.executeAction(actionLoadScene);
     }
   };
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       icon: LoadIcon,
@@ -23896,7 +24018,7 @@ var SaveToActiveFile = () => {
   if (!actionManager.isActionEnabled(actionSaveToActiveFile)) {
     return null;
   }
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       shortcut: getShortcutFromShortcutName("saveScene"),
@@ -23912,7 +24034,7 @@ SaveToActiveFile.displayName = "SaveToActiveFile";
 var SaveAsImage = () => {
   const setAppState = useExcalidrawSetAppState();
   const { t: t2 } = useI18n();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       icon: ExportImageIcon,
@@ -23928,7 +24050,7 @@ SaveAsImage.displayName = "SaveAsImage";
 var CommandPalette2 = (opts) => {
   const setAppState = useExcalidrawSetAppState();
   const { t: t2 } = useI18n();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       icon: boltIcon,
@@ -23948,7 +24070,7 @@ CommandPalette2.displayName = "CommandPalette";
 var SearchMenu = (opts) => {
   const { t: t2 } = useI18n();
   const actionManager = useExcalidrawActionManager();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       icon: searchIcon,
@@ -23967,7 +24089,7 @@ SearchMenu.displayName = "SearchMenu";
 var Help = () => {
   const { t: t2 } = useI18n();
   const actionManager = useExcalidrawActionManager();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       "data-testid": "help-menu-item",
@@ -23989,7 +24111,7 @@ var ToggleTheme = (props) => {
     return null;
   }
   if (props?.allowSystemTheme) {
-    return /* @__PURE__ */ jsx102(
+    return /* @__PURE__ */ jsx101(
       DropdownMenuItemContentRadio_default,
       {
         name: "theme",
@@ -24016,7 +24138,7 @@ var ToggleTheme = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       onSelect: (event) => {
@@ -24046,8 +24168,8 @@ var ChangeCanvasBackground = () => {
   if (appState.viewModeEnabled || !appProps.UIOptions.canvasActions.changeViewBackgroundColor) {
     return null;
   }
-  return /* @__PURE__ */ jsxs55("div", { style: { marginTop: "0.5rem" }, children: [
-    /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsxs54("div", { style: { marginTop: "0.5rem" }, children: [
+    /* @__PURE__ */ jsx101(
       "div",
       {
         "data-testid": "canvas-background-label",
@@ -24055,14 +24177,14 @@ var ChangeCanvasBackground = () => {
         children: t2("labels.canvasBackground")
       }
     ),
-    /* @__PURE__ */ jsx102("div", { style: { padding: "0 0.625rem" }, children: actionManager.renderAction("changeViewBackgroundColor") })
+    /* @__PURE__ */ jsx101("div", { style: { padding: "0 0.625rem" }, children: actionManager.renderAction("changeViewBackgroundColor") })
   ] });
 };
 ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
 var Export = () => {
   const { t: t2 } = useI18n();
   const setAppState = useExcalidrawSetAppState();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       icon: ExportIcon,
@@ -24078,8 +24200,8 @@ var Export = () => {
 Export.displayName = "Export";
 var Socials = () => {
   const { t: t2 } = useI18n();
-  return /* @__PURE__ */ jsxs55(Fragment14, { children: [
-    /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsxs54(Fragment14, { children: [
+    /* @__PURE__ */ jsx101(
       DropdownMenuItemLink_default,
       {
         icon: GithubIcon,
@@ -24088,7 +24210,7 @@ var Socials = () => {
         children: "GitHub"
       }
     ),
-    /* @__PURE__ */ jsx102(
+    /* @__PURE__ */ jsx101(
       DropdownMenuItemLink_default,
       {
         icon: XBrandIcon,
@@ -24097,7 +24219,7 @@ var Socials = () => {
         children: t2("labels.followUs")
       }
     ),
-    /* @__PURE__ */ jsx102(
+    /* @__PURE__ */ jsx101(
       DropdownMenuItemLink_default,
       {
         icon: DiscordIcon,
@@ -24114,7 +24236,7 @@ var LiveCollaborationTrigger = ({
   isCollaborating
 }) => {
   const { t: t2 } = useI18n();
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx101(
     DropdownMenuItem_default,
     {
       "data-testid": "collab-button",
@@ -24130,7 +24252,7 @@ var LiveCollaborationTrigger = ({
 LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";
 
 // components/main-menu/MainMenu.tsx
-import { jsx as jsx103, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs55 } from "react/jsx-runtime";
 var MainMenu = Object.assign(
   withInternalFallback(
     "MainMenu",
@@ -24143,8 +24265,8 @@ var MainMenu = Object.assign(
       const appState = useUIAppState();
       const setAppState = useExcalidrawSetAppState();
       const onClickOutside = device.editor.isMobile ? void 0 : () => setAppState({ openMenu: null });
-      return /* @__PURE__ */ jsx103(MainMenuTunnel.In, { children: /* @__PURE__ */ jsxs56(DropdownMenu_default, { open: appState.openMenu === "canvas", children: [
-        /* @__PURE__ */ jsx103(
+      return /* @__PURE__ */ jsx102(MainMenuTunnel.In, { children: /* @__PURE__ */ jsxs55(DropdownMenu_default, { open: appState.openMenu === "canvas", children: [
+        /* @__PURE__ */ jsx102(
           DropdownMenu_default.Trigger,
           {
             onToggle: () => {
@@ -24157,7 +24279,7 @@ var MainMenu = Object.assign(
             children: HamburgerMenuIcon
           }
         ),
-        /* @__PURE__ */ jsxs56(
+        /* @__PURE__ */ jsxs55(
           DropdownMenu_default.Content,
           {
             onClickOutside,
@@ -24166,9 +24288,9 @@ var MainMenu = Object.assign(
             }),
             children: [
               children,
-              device.editor.isMobile && appState.collaborators.size > 0 && /* @__PURE__ */ jsxs56("fieldset", { className: "UserList-Wrapper", children: [
-                /* @__PURE__ */ jsx103("legend", { children: t("labels.collaborators") }),
-                /* @__PURE__ */ jsx103(
+              device.editor.isMobile && appState.collaborators.size > 0 && /* @__PURE__ */ jsxs55("fieldset", { className: "UserList-Wrapper", children: [
+                /* @__PURE__ */ jsx102("legend", { children: t("labels.collaborators") }),
+                /* @__PURE__ */ jsx102(
                   UserList,
                   {
                     mobile: true,
@@ -24198,7 +24320,7 @@ var MainMenu_default = MainMenu;
 // components/FilledButton.tsx
 import clsx45 from "clsx";
 import { forwardRef as forwardRef5, useState as useState26 } from "react";
-import { jsx as jsx104, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs56 } from "react/jsx-runtime";
 var FilledButton = forwardRef5(
   ({
     children,
@@ -24235,7 +24357,7 @@ var FilledButton = forwardRef5(
     };
     const _status = isLoading ? "loading" : status;
     color = _status === "success" ? "success" : color;
-    return /* @__PURE__ */ jsx104(
+    return /* @__PURE__ */ jsx103(
       "button",
       {
         className: clsx45(
@@ -24252,9 +24374,9 @@ var FilledButton = forwardRef5(
         "aria-label": label,
         ref,
         disabled: _status === "loading" || _status === "success",
-        children: /* @__PURE__ */ jsxs57("div", { className: "ExcButton__contents", children: [
-          _status === "loading" ? /* @__PURE__ */ jsx104(Spinner_default, { className: "ExcButton__statusIcon" }) : _status === "success" && /* @__PURE__ */ jsx104("div", { className: "ExcButton__statusIcon", children: tablerCheckIcon }),
-          icon && /* @__PURE__ */ jsx104("div", { className: "ExcButton__icon", "aria-hidden": true, children: icon }),
+        children: /* @__PURE__ */ jsxs56("div", { className: "ExcButton__contents", children: [
+          _status === "loading" ? /* @__PURE__ */ jsx103(Spinner_default, { className: "ExcButton__statusIcon" }) : _status === "success" && /* @__PURE__ */ jsx103("div", { className: "ExcButton__statusIcon", children: tablerCheckIcon }),
+          icon && /* @__PURE__ */ jsx103("div", { className: "ExcButton__icon", "aria-hidden": true, children: icon }),
           variant !== "icon" && (children ?? label)
         ] })
       }
@@ -24263,17 +24385,17 @@ var FilledButton = forwardRef5(
 );
 
 // components/OverwriteConfirm/OverwriteConfirmActions.tsx
-import { jsx as jsx105, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs57 } from "react/jsx-runtime";
 var Action = ({
   title,
   children,
   actionLabel,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs58("div", { className: "OverwriteConfirm__Actions__Action", children: [
-    /* @__PURE__ */ jsx105("h4", { children: title }),
-    /* @__PURE__ */ jsx105("div", { className: "OverwriteConfirm__Actions__Action__content", children }),
-    /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsxs57("div", { className: "OverwriteConfirm__Actions__Action", children: [
+    /* @__PURE__ */ jsx104("h4", { children: title }),
+    /* @__PURE__ */ jsx104("div", { className: "OverwriteConfirm__Actions__Action__content", children }),
+    /* @__PURE__ */ jsx104(
       FilledButton,
       {
         variant: "outlined",
@@ -24290,7 +24412,7 @@ var ExportToImage = () => {
   const { t: t2 } = useI18n();
   const actionManager = useExcalidrawActionManager();
   const setAppState = useExcalidrawSetAppState();
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx104(
     Action,
     {
       title: t2("overwriteConfirm.action.exportToImage.title"),
@@ -24306,7 +24428,7 @@ var ExportToImage = () => {
 var SaveToDisk = () => {
   const { t: t2 } = useI18n();
   const actionManager = useExcalidrawActionManager();
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx104(
     Action,
     {
       title: t2("overwriteConfirm.action.saveToDisk.title"),
@@ -24320,7 +24442,7 @@ var SaveToDisk = () => {
 };
 var Actions = Object.assign(
   ({ children }) => {
-    return /* @__PURE__ */ jsx105("div", { className: "OverwriteConfirm__Actions", children });
+    return /* @__PURE__ */ jsx104("div", { className: "OverwriteConfirm__Actions", children });
   },
   {
     ExportToImage,
@@ -24329,7 +24451,7 @@ var Actions = Object.assign(
 );
 
 // components/OverwriteConfirm/OverwriteConfirm.tsx
-import { jsx as jsx106, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs58 } from "react/jsx-runtime";
 var OverwriteConfirmDialog = Object.assign(
   withInternalFallback(
     "OverwriteConfirmDialog",
@@ -24349,17 +24471,17 @@ var OverwriteConfirmDialog = Object.assign(
         overwriteConfirmState.onConfirm();
         setState((state) => ({ ...state, active: false }));
       };
-      return /* @__PURE__ */ jsx106(OverwriteConfirmDialogTunnel.In, { children: /* @__PURE__ */ jsx106(Dialog, { onCloseRequest: handleClose, title: false, size: 916, children: /* @__PURE__ */ jsxs59("div", { className: "OverwriteConfirm", children: [
-        /* @__PURE__ */ jsx106("h3", { children: overwriteConfirmState.title }),
-        /* @__PURE__ */ jsxs59(
+      return /* @__PURE__ */ jsx105(OverwriteConfirmDialogTunnel.In, { children: /* @__PURE__ */ jsx105(Dialog, { onCloseRequest: handleClose, title: false, size: 916, children: /* @__PURE__ */ jsxs58("div", { className: "OverwriteConfirm", children: [
+        /* @__PURE__ */ jsx105("h3", { children: overwriteConfirmState.title }),
+        /* @__PURE__ */ jsxs58(
           "div",
           {
             className: `OverwriteConfirm__Description OverwriteConfirm__Description--color-${overwriteConfirmState.color}`,
             children: [
-              /* @__PURE__ */ jsx106("div", { className: "OverwriteConfirm__Description__icon", children: alertTriangleIcon }),
-              /* @__PURE__ */ jsx106("div", { children: overwriteConfirmState.description }),
-              /* @__PURE__ */ jsx106("div", { className: "OverwriteConfirm__Description__spacer" }),
-              /* @__PURE__ */ jsx106(
+              /* @__PURE__ */ jsx105("div", { className: "OverwriteConfirm__Description__icon", children: alertTriangleIcon }),
+              /* @__PURE__ */ jsx105("div", { children: overwriteConfirmState.description }),
+              /* @__PURE__ */ jsx105("div", { className: "OverwriteConfirm__Description__spacer" }),
+              /* @__PURE__ */ jsx105(
                 FilledButton,
                 {
                   color: overwriteConfirmState.color,
@@ -24371,7 +24493,7 @@ var OverwriteConfirmDialog = Object.assign(
             ]
           }
         ),
-        /* @__PURE__ */ jsx106(Actions, { children })
+        /* @__PURE__ */ jsx105(Actions, { children })
       ] }) }) });
     }
   ),
@@ -24388,7 +24510,7 @@ import clsx47 from "clsx";
 import clsx46 from "clsx";
 import debounce2 from "lodash.debounce";
 import { Fragment as Fragment15, memo as memo4, useEffect as useEffect31, useRef as useRef27, useState as useState27 } from "react";
-import { Fragment as Fragment16, jsx as jsx107, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx106, jsxs as jsxs59 } from "react/jsx-runtime";
 var searchQueryAtom = atom("");
 var searchItemInFocusAtom = atom(null);
 var SEARCH_DEBOUNCE = 350;
@@ -24590,8 +24712,8 @@ var SearchMenu2 = () => {
     });
   }, [setAppState, stableState, app]);
   const matchCount = `${searchMatches.items.length} ${searchMatches.items.length === 1 ? t("search.singleResult") : t("search.multipleResults")}`;
-  return /* @__PURE__ */ jsxs60("div", { className: "layer-ui__search", children: [
-    /* @__PURE__ */ jsx107("div", { className: "layer-ui__search-header", children: /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsxs59("div", { className: "layer-ui__search", children: [
+    /* @__PURE__ */ jsx106("div", { className: "layer-ui__search-header", children: /* @__PURE__ */ jsx106(
       TextField,
       {
         className: CLASSES.SEARCH_MENU_INPUT_WRAPPER,
@@ -24624,15 +24746,15 @@ var SearchMenu2 = () => {
         selectOnRender: true
       }
     ) }),
-    /* @__PURE__ */ jsxs60("div", { className: "layer-ui__search-count", children: [
-      searchMatches.items.length > 0 && /* @__PURE__ */ jsxs60(Fragment16, { children: [
-        focusIndex !== null && focusIndex > -1 ? /* @__PURE__ */ jsxs60("div", { children: [
+    /* @__PURE__ */ jsxs59("div", { className: "layer-ui__search-count", children: [
+      searchMatches.items.length > 0 && /* @__PURE__ */ jsxs59(Fragment16, { children: [
+        focusIndex !== null && focusIndex > -1 ? /* @__PURE__ */ jsxs59("div", { children: [
           focusIndex + 1,
           " / ",
           matchCount
-        ] }) : /* @__PURE__ */ jsx107("div", { children: matchCount }),
-        /* @__PURE__ */ jsxs60("div", { className: "result-nav", children: [
-          /* @__PURE__ */ jsx107(
+        ] }) : /* @__PURE__ */ jsx106("div", { children: matchCount }),
+        /* @__PURE__ */ jsxs59("div", { className: "result-nav", children: [
+          /* @__PURE__ */ jsx106(
             Button,
             {
               onSelect: () => {
@@ -24642,7 +24764,7 @@ var SearchMenu2 = () => {
               children: collapseDownIcon
             }
           ),
-          /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx106(
             Button,
             {
               onSelect: () => {
@@ -24654,9 +24776,9 @@ var SearchMenu2 = () => {
           )
         ] })
       ] }),
-      searchMatches.items.length === 0 && searchQuery && searchedQueryRef.current && /* @__PURE__ */ jsx107("div", { style: { margin: "1rem auto" }, children: t("search.noMatch") })
+      searchMatches.items.length === 0 && searchQuery && searchedQueryRef.current && /* @__PURE__ */ jsx106("div", { style: { margin: "1rem auto" }, children: t("search.noMatch") })
     ] }),
-    /* @__PURE__ */ jsx107(
+    /* @__PURE__ */ jsx106(
       MatchList,
       {
         matches: searchMatches,
@@ -24680,7 +24802,7 @@ var ListItem = (props) => {
     ),
     props.preview.moreAfter ? "..." : ""
   ];
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx106(
     "div",
     {
       tabIndex: -1,
@@ -24693,12 +24815,12 @@ var ListItem = (props) => {
           ref?.scrollIntoView({ behavior: "auto", block: "nearest" });
         }
       },
-      children: /* @__PURE__ */ jsx107("div", { className: "preview-text", children: preview.flatMap((text, idx) => /* @__PURE__ */ jsx107(Fragment15, { children: idx === 2 ? /* @__PURE__ */ jsx107("b", { children: text }) : text }, idx)) })
+      children: /* @__PURE__ */ jsx106("div", { className: "preview-text", children: preview.flatMap((text, idx) => /* @__PURE__ */ jsx106(Fragment15, { children: idx === 2 ? /* @__PURE__ */ jsx106("b", { children: text }) : text }, idx)) })
     }
   );
 };
 var MatchListBase = (props) => {
-  return /* @__PURE__ */ jsx107("div", { className: "layer-ui__search-result-container", children: props.matches.items.map((searchMatch, index) => /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx106("div", { className: "layer-ui__search-result-container", children: props.matches.items.map((searchMatch, index) => /* @__PURE__ */ jsx106(
     ListItem,
     {
       searchQuery: props.searchQuery,
@@ -24879,13 +25001,13 @@ var handleSearch = debounce2(
 );
 
 // components/DefaultSidebar.tsx
-import { jsx as jsx108, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs60 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var DefaultSidebarTrigger = withInternalFallback(
   "DefaultSidebarTrigger",
   (props) => {
     const { DefaultSidebarTriggerTunnel } = useTunnels();
-    return /* @__PURE__ */ jsx108(DefaultSidebarTriggerTunnel.In, { children: /* @__PURE__ */ jsx108(
+    return /* @__PURE__ */ jsx107(DefaultSidebarTriggerTunnel.In, { children: /* @__PURE__ */ jsx107(
       Sidebar.Trigger,
       {
         ...props,
@@ -24898,7 +25020,7 @@ var DefaultSidebarTrigger = withInternalFallback(
 DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";
 var DefaultTabTriggers = ({ children }) => {
   const { DefaultSidebarTabTriggersTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx108(DefaultSidebarTabTriggersTunnel.In, { children });
+  return /* @__PURE__ */ jsx107(DefaultSidebarTabTriggersTunnel.In, { children });
 };
 DefaultTabTriggers.displayName = "DefaultTabTriggers";
 var DefaultSidebar = Object.assign(
@@ -24934,14 +25056,14 @@ var DefaultSidebar = Object.assign(
             )
           )
         },
-        /* @__PURE__ */ jsxs61(Sidebar.Tabs, { children: [
-          /* @__PURE__ */ jsx108(Sidebar.Header, { children: /* @__PURE__ */ jsxs61(Sidebar.TabTriggers, { children: [
-            /* @__PURE__ */ jsx108(Sidebar.TabTrigger, { tab: CANVAS_SEARCH_TAB, children: searchIcon }),
-            /* @__PURE__ */ jsx108(Sidebar.TabTrigger, { tab: LIBRARY_SIDEBAR_TAB, children: LibraryIcon }),
-            /* @__PURE__ */ jsx108(DefaultSidebarTabTriggersTunnel.Out, {})
+        /* @__PURE__ */ jsxs60(Sidebar.Tabs, { children: [
+          /* @__PURE__ */ jsx107(Sidebar.Header, { children: /* @__PURE__ */ jsxs60(Sidebar.TabTriggers, { children: [
+            /* @__PURE__ */ jsx107(Sidebar.TabTrigger, { tab: CANVAS_SEARCH_TAB, children: searchIcon }),
+            /* @__PURE__ */ jsx107(Sidebar.TabTrigger, { tab: LIBRARY_SIDEBAR_TAB, children: LibraryIcon }),
+            /* @__PURE__ */ jsx107(DefaultSidebarTabTriggersTunnel.Out, {})
           ] }) }),
-          /* @__PURE__ */ jsx108(Sidebar.Tab, { tab: LIBRARY_SIDEBAR_TAB, children: /* @__PURE__ */ jsx108(LibraryMenu, {}) }),
-          /* @__PURE__ */ jsx108(Sidebar.Tab, { tab: CANVAS_SEARCH_TAB, children: /* @__PURE__ */ jsx108(SearchMenu2, {}) }),
+          /* @__PURE__ */ jsx107(Sidebar.Tab, { tab: LIBRARY_SIDEBAR_TAB, children: /* @__PURE__ */ jsx107(LibraryMenu, {}) }),
+          /* @__PURE__ */ jsx107(Sidebar.Tab, { tab: CANVAS_SEARCH_TAB, children: /* @__PURE__ */ jsx107(SearchMenu2, {}) }),
           children
         ] })
       );
@@ -24961,7 +25083,7 @@ import { useState as useState28, useRef as useRef29, useEffect as useEffect33, u
 
 // components/TTDDialog/TTDDialogInput.tsx
 import { useEffect as useEffect32, useRef as useRef28 } from "react";
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var TTDDialogInput = ({
   input,
   placeholder,
@@ -24989,7 +25111,7 @@ var TTDDialogInput = ({
       };
     }
   }, []);
-  return /* @__PURE__ */ jsx109(
+  return /* @__PURE__ */ jsx108(
     "textarea",
     {
       className: "ttd-dialog-input",
@@ -25003,16 +25125,16 @@ var TTDDialogInput = ({
 };
 
 // components/TTDDialog/TTDDialogOutput.tsx
-import { jsx as jsx110, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs61 } from "react/jsx-runtime";
 var ErrorComp = ({ error }) => {
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs61(
     "div",
     {
       "data-testid": "ttd-dialog-output-error",
       className: "ttd-dialog-output-error",
       children: [
         "Error! ",
-        /* @__PURE__ */ jsx110("p", { children: error })
+        /* @__PURE__ */ jsx109("p", { children: error })
       ]
     }
   );
@@ -25022,22 +25144,22 @@ var TTDDialogOutput = ({
   canvasRef,
   loaded
 }) => {
-  return /* @__PURE__ */ jsxs62("div", { className: "ttd-dialog-output-wrapper", children: [
-    error && /* @__PURE__ */ jsx110(ErrorComp, { error: error.message }),
-    loaded ? /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsxs61("div", { className: "ttd-dialog-output-wrapper", children: [
+    error && /* @__PURE__ */ jsx109(ErrorComp, { error: error.message }),
+    loaded ? /* @__PURE__ */ jsx109(
       "div",
       {
         ref: canvasRef,
         style: { opacity: error ? "0.15" : 1 },
         className: "ttd-dialog-output-canvas-container"
       }
-    ) : /* @__PURE__ */ jsx110(Spinner_default, { size: "2rem" })
+    ) : /* @__PURE__ */ jsx109(Spinner_default, { size: "2rem" })
   ] });
 };
 
 // components/TTDDialog/TTDDialogPanel.tsx
 import clsx48 from "clsx";
-import { jsx as jsx111, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs62 } from "react/jsx-runtime";
 var TTDDialogPanel = ({
   label,
   children,
@@ -25048,13 +25170,13 @@ var TTDDialogPanel = ({
   renderSubmitShortcut,
   renderBottomRight
 }) => {
-  return /* @__PURE__ */ jsxs63("div", { className: "ttd-dialog-panel", children: [
-    /* @__PURE__ */ jsxs63("div", { className: "ttd-dialog-panel__header", children: [
-      /* @__PURE__ */ jsx111("label", { children: label }),
+  return /* @__PURE__ */ jsxs62("div", { className: "ttd-dialog-panel", children: [
+    /* @__PURE__ */ jsxs62("div", { className: "ttd-dialog-panel__header", children: [
+      /* @__PURE__ */ jsx110("label", { children: label }),
       renderTopRight?.()
     ] }),
     children,
-    /* @__PURE__ */ jsxs63(
+    /* @__PURE__ */ jsxs62(
       "div",
       {
         className: clsx48("ttd-dialog-panel-button-container", {
@@ -25062,7 +25184,7 @@ var TTDDialogPanel = ({
         }),
         style: { display: "flex", alignItems: "center" },
         children: [
-          /* @__PURE__ */ jsxs63(
+          /* @__PURE__ */ jsxs62(
             Button,
             {
               className: "ttd-dialog-panel-button",
@@ -25070,11 +25192,11 @@ var TTDDialogPanel = ({
               },
               disabled: panelActionDisabled || onTextSubmitInProgess,
               children: [
-                /* @__PURE__ */ jsxs63("div", { className: clsx48({ invisible: onTextSubmitInProgess }), children: [
+                /* @__PURE__ */ jsxs62("div", { className: clsx48({ invisible: onTextSubmitInProgess }), children: [
                   panelAction?.label,
-                  panelAction?.icon && /* @__PURE__ */ jsx111("span", { children: panelAction.icon })
+                  panelAction?.icon && /* @__PURE__ */ jsx110("span", { children: panelAction.icon })
                 ] }),
-                onTextSubmitInProgess && /* @__PURE__ */ jsx111(Spinner_default, {})
+                onTextSubmitInProgess && /* @__PURE__ */ jsx110(Spinner_default, {})
               ]
             }
           ),
@@ -25087,17 +25209,17 @@ var TTDDialogPanel = ({
 };
 
 // components/TTDDialog/TTDDialogPanels.tsx
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var TTDDialogPanels = ({ children }) => {
-  return /* @__PURE__ */ jsx112("div", { className: "ttd-dialog-panels", children });
+  return /* @__PURE__ */ jsx111("div", { className: "ttd-dialog-panels", children });
 };
 
 // components/TTDDialog/TTDDialogSubmitShortcut.tsx
-import { jsx as jsx113, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs63 } from "react/jsx-runtime";
 var TTDDialogSubmitShortcut = () => {
-  return /* @__PURE__ */ jsxs64("div", { className: "ttd-dialog-submit-shortcut", children: [
-    /* @__PURE__ */ jsx113("div", { className: "ttd-dialog-submit-shortcut__key", children: getShortcutKey("CtrlOrCmd") }),
-    /* @__PURE__ */ jsx113("div", { className: "ttd-dialog-submit-shortcut__key", children: getShortcutKey("Enter") })
+  return /* @__PURE__ */ jsxs63("div", { className: "ttd-dialog-submit-shortcut", children: [
+    /* @__PURE__ */ jsx112("div", { className: "ttd-dialog-submit-shortcut__key", children: getShortcutKey("CtrlOrCmd") }),
+    /* @__PURE__ */ jsx112("div", { className: "ttd-dialog-submit-shortcut__key", children: getShortcutKey("Enter") })
   ] });
 };
 
@@ -25205,7 +25327,7 @@ var insertToEditor = ({
 };
 
 // components/TTDDialog/MermaidToExcalidraw.tsx
-import { Fragment as Fragment17, jsx as jsx114, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx113, jsxs as jsxs64 } from "react/jsx-runtime";
 var MERMAID_EXAMPLE = "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
 var debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
 var MermaidToExcalidraw = ({
@@ -25247,18 +25369,18 @@ var MermaidToExcalidraw = ({
       shouldSaveMermaidDataToStorage: true
     });
   };
-  return /* @__PURE__ */ jsxs65(Fragment17, { children: [
-    /* @__PURE__ */ jsx114("div", { className: "ttd-dialog-desc", children: /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsxs64(Fragment17, { children: [
+    /* @__PURE__ */ jsx113("div", { className: "ttd-dialog-desc", children: /* @__PURE__ */ jsx113(
       Trans_default,
       {
         i18nKey: "mermaid.description",
-        flowchartLink: (el) => /* @__PURE__ */ jsx114("a", { href: "https://mermaid.js.org/syntax/flowchart.html", children: el }),
-        sequenceLink: (el) => /* @__PURE__ */ jsx114("a", { href: "https://mermaid.js.org/syntax/sequenceDiagram.html", children: el }),
-        classLink: (el) => /* @__PURE__ */ jsx114("a", { href: "https://mermaid.js.org/syntax/classDiagram.html", children: el })
+        flowchartLink: (el) => /* @__PURE__ */ jsx113("a", { href: "https://mermaid.js.org/syntax/flowchart.html", children: el }),
+        sequenceLink: (el) => /* @__PURE__ */ jsx113("a", { href: "https://mermaid.js.org/syntax/sequenceDiagram.html", children: el }),
+        classLink: (el) => /* @__PURE__ */ jsx113("a", { href: "https://mermaid.js.org/syntax/classDiagram.html", children: el })
       }
     ) }),
-    /* @__PURE__ */ jsxs65(TTDDialogPanels, { children: [
-      /* @__PURE__ */ jsx114(TTDDialogPanel, { label: t("mermaid.syntax"), children: /* @__PURE__ */ jsx114(
+    /* @__PURE__ */ jsxs64(TTDDialogPanels, { children: [
+      /* @__PURE__ */ jsx113(TTDDialogPanel, { label: t("mermaid.syntax"), children: /* @__PURE__ */ jsx113(
         TTDDialogInput,
         {
           input: text,
@@ -25269,7 +25391,7 @@ var MermaidToExcalidraw = ({
           }
         }
       ) }),
-      /* @__PURE__ */ jsx114(
+      /* @__PURE__ */ jsx113(
         TTDDialogPanel,
         {
           label: t("mermaid.preview"),
@@ -25280,8 +25402,8 @@ var MermaidToExcalidraw = ({
             label: t("mermaid.button"),
             icon: ArrowRightIcon
           },
-          renderSubmitShortcut: () => /* @__PURE__ */ jsx114(TTDDialogSubmitShortcut, {}),
-          children: /* @__PURE__ */ jsx114(
+          renderSubmitShortcut: () => /* @__PURE__ */ jsx113(TTDDialogSubmitShortcut, {}),
+          children: /* @__PURE__ */ jsx113(
             TTDDialogOutput,
             {
               canvasRef,
@@ -25299,12 +25421,12 @@ var MermaidToExcalidraw_default = MermaidToExcalidraw;
 // components/TTDDialog/TTDDialogTabs.tsx
 import * as RadixTabs5 from "@radix-ui/react-tabs";
 import { useRef as useRef30 } from "react";
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
 var TTDDialogTabs = (props) => {
   const setAppState = useExcalidrawSetAppState();
   const rootRef = useRef30(null);
   const minHeightRef = useRef30(0);
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx114(
     RadixTabs5.Root,
     {
       ref: rootRef,
@@ -25337,42 +25459,42 @@ var TTDDialogTabs_default = TTDDialogTabs;
 
 // components/TTDDialog/TTDDialogTabTriggers.tsx
 import * as RadixTabs6 from "@radix-ui/react-tabs";
-import { jsx as jsx116 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var TTDDialogTabTriggers = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx116(RadixTabs6.List, { className: "ttd-dialog-triggers", ...rest, children });
+  return /* @__PURE__ */ jsx115(RadixTabs6.List, { className: "ttd-dialog-triggers", ...rest, children });
 };
 TTDDialogTabTriggers.displayName = "TTDDialogTabTriggers";
 
 // components/TTDDialog/TTDDialogTabTrigger.tsx
 import * as RadixTabs7 from "@radix-ui/react-tabs";
-import { jsx as jsx117 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 var TTDDialogTabTrigger = ({
   children,
   tab,
   onSelect,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx117(RadixTabs7.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx117("button", { type: "button", className: "ttd-dialog-tab-trigger", ...rest, children }) });
+  return /* @__PURE__ */ jsx116(RadixTabs7.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx116("button", { type: "button", className: "ttd-dialog-tab-trigger", ...rest, children }) });
 };
 TTDDialogTabTrigger.displayName = "TTDDialogTabTrigger";
 
 // components/TTDDialog/TTDDialogTab.tsx
 import * as RadixTabs8 from "@radix-ui/react-tabs";
-import { jsx as jsx118 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 var TTDDialogTab = ({
   tab,
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx118(RadixTabs8.Content, { ...rest, value: tab, children });
+  return /* @__PURE__ */ jsx117(RadixTabs8.Content, { ...rest, value: tab, children });
 };
 TTDDialogTab.displayName = "TTDDialogTab";
 
 // components/TTDDialog/TTDDialog.tsx
-import { jsx as jsx119, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs65 } from "react/jsx-runtime";
 var MIN_PROMPT_LENGTH = 3;
 var MAX_PROMPT_LENGTH = 1e3;
 var rateLimitsAtom = atom(null);
@@ -25382,7 +25504,7 @@ var TTDDialog = (props) => {
   if (appState.openDialog?.name !== "ttd") {
     return null;
   }
-  return /* @__PURE__ */ jsx119(TTDDialogBase, { ...props, tab: appState.openDialog.tab });
+  return /* @__PURE__ */ jsx118(TTDDialogBase, { ...props, tab: appState.openDialog.tab });
 };
 var TTDDialogBase = withInternalFallback(
   "TTDDialogBase",
@@ -25496,7 +25618,7 @@ TTD mermaid definition render errror: ${error3.message}`,
     }, [mermaidToExcalidrawLib.api]);
     const data = useRef31({ elements: [], files: null });
     const [error, setError] = useState29(null);
-    return /* @__PURE__ */ jsx119(
+    return /* @__PURE__ */ jsx118(
       Dialog,
       {
         className: "ttd-dialog",
@@ -25507,11 +25629,11 @@ TTD mermaid definition render errror: ${error3.message}`,
         title: false,
         ...rest,
         autofocus: false,
-        children: /* @__PURE__ */ jsxs66(TTDDialogTabs_default, { dialog: "ttd", tab, children: [
-          "__fallback" in rest && rest.__fallback ? /* @__PURE__ */ jsx119("p", { className: "dialog-mermaid-title", children: t("mermaid.title") }) : /* @__PURE__ */ jsxs66(TTDDialogTabTriggers, { children: [
-            /* @__PURE__ */ jsx119(TTDDialogTabTrigger, { tab: "text-to-diagram", children: /* @__PURE__ */ jsxs66("div", { style: { display: "flex", alignItems: "center" }, children: [
+        children: /* @__PURE__ */ jsxs65(TTDDialogTabs_default, { dialog: "ttd", tab, children: [
+          "__fallback" in rest && rest.__fallback ? /* @__PURE__ */ jsx118("p", { className: "dialog-mermaid-title", children: t("mermaid.title") }) : /* @__PURE__ */ jsxs65(TTDDialogTabTriggers, { children: [
+            /* @__PURE__ */ jsx118(TTDDialogTabTrigger, { tab: "text-to-diagram", children: /* @__PURE__ */ jsxs65("div", { style: { display: "flex", alignItems: "center" }, children: [
               t("labels.textToDiagram"),
-              /* @__PURE__ */ jsx119(
+              /* @__PURE__ */ jsx118(
                 "div",
                 {
                   style: {
@@ -25529,18 +25651,18 @@ TTD mermaid definition render errror: ${error3.message}`,
                 }
               )
             ] }) }),
-            /* @__PURE__ */ jsx119(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })
+            /* @__PURE__ */ jsx118(TTDDialogTabTrigger, { tab: "mermaid", children: "Mermaid" })
           ] }),
-          /* @__PURE__ */ jsx119(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: /* @__PURE__ */ jsx119(
+          /* @__PURE__ */ jsx118(TTDDialogTab, { className: "ttd-dialog-content", tab: "mermaid", children: /* @__PURE__ */ jsx118(
             MermaidToExcalidraw_default,
             {
               mermaidToExcalidrawLib
             }
           ) }),
-          !("__fallback" in rest) && /* @__PURE__ */ jsxs66(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [
-            /* @__PURE__ */ jsx119("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." }),
-            /* @__PURE__ */ jsxs66(TTDDialogPanels, { children: [
-              /* @__PURE__ */ jsx119(
+          !("__fallback" in rest) && /* @__PURE__ */ jsxs65(TTDDialogTab, { className: "ttd-dialog-content", tab: "text-to-diagram", children: [
+            /* @__PURE__ */ jsx118("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." }),
+            /* @__PURE__ */ jsxs65(TTDDialogPanels, { children: [
+              /* @__PURE__ */ jsx118(
                 TTDDialogPanel,
                 {
                   label: t("labels.prompt"),
@@ -25555,7 +25677,7 @@ TTD mermaid definition render errror: ${error3.message}`,
                     if (!rateLimits) {
                       return null;
                     }
-                    return /* @__PURE__ */ jsxs66(
+                    return /* @__PURE__ */ jsxs65(
                       "div",
                       {
                         className: "ttd-dialog-rate-limit",
@@ -25571,10 +25693,10 @@ TTD mermaid definition render errror: ${error3.message}`,
                       }
                     );
                   },
-                  renderSubmitShortcut: () => /* @__PURE__ */ jsx119(TTDDialogSubmitShortcut, {}),
+                  renderSubmitShortcut: () => /* @__PURE__ */ jsx118(TTDDialogSubmitShortcut, {}),
                   renderBottomRight: () => {
                     if (typeof ttdGeneration?.generatedResponse === "string") {
-                      return /* @__PURE__ */ jsxs66(
+                      return /* @__PURE__ */ jsxs65(
                         "div",
                         {
                           className: "excalidraw-link",
@@ -25591,14 +25713,14 @@ TTD mermaid definition render errror: ${error3.message}`,
                           },
                           children: [
                             "View as Mermaid",
-                            /* @__PURE__ */ jsx119(InlineIcon, { icon: ArrowRightIcon })
+                            /* @__PURE__ */ jsx118(InlineIcon, { icon: ArrowRightIcon })
                           ]
                         }
                       );
                     }
                     const ratio = prompt.length / MAX_PROMPT_LENGTH;
                     if (ratio > 0.8) {
-                      return /* @__PURE__ */ jsxs66(
+                      return /* @__PURE__ */ jsxs65(
                         "div",
                         {
                           style: {
@@ -25618,7 +25740,7 @@ TTD mermaid definition render errror: ${error3.message}`,
                     }
                     return null;
                   },
-                  children: /* @__PURE__ */ jsx119(
+                  children: /* @__PURE__ */ jsx118(
                     TTDDialogInput,
                     {
                       onChange: handleTextChange,
@@ -25631,7 +25753,7 @@ TTD mermaid definition render errror: ${error3.message}`,
                   )
                 }
               ),
-              /* @__PURE__ */ jsx119(
+              /* @__PURE__ */ jsx118(
                 TTDDialogPanel,
                 {
                   label: "Preview",
@@ -25643,7 +25765,7 @@ TTD mermaid definition render errror: ${error3.message}`,
                     label: "Insert",
                     icon: ArrowRightIcon
                   },
-                  children: /* @__PURE__ */ jsx119(
+                  children: /* @__PURE__ */ jsx118(
                     TTDDialogOutput,
                     {
                       canvasRef: someRandomDivRef,
@@ -25772,7 +25894,7 @@ var updateBindings = (latestElement, elementsMap, elements, scene, options) => {
 };
 
 // components/Stats/DragInput.tsx
-import { jsx as jsx120, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs66 } from "react/jsx-runtime";
 var StatsDragInput = ({
   label,
   icon,
@@ -25873,13 +25995,13 @@ var StatsDragInput = ({
   if (!editable) {
     return null;
   }
-  return /* @__PURE__ */ jsxs67(
+  return /* @__PURE__ */ jsxs66(
     "div",
     {
       className: clsx49("drag-input-container", !editable && "disabled"),
       "data-testid": label,
       children: [
-        /* @__PURE__ */ jsx120(
+        /* @__PURE__ */ jsx119(
           "div",
           {
             className: "drag-input-label",
@@ -25959,10 +26081,10 @@ var StatsDragInput = ({
                 labelRef.current.style.cursor = "ew-resize";
               }
             },
-            children: icon ? /* @__PURE__ */ jsx120(InlineIcon, { icon }) : label
+            children: icon ? /* @__PURE__ */ jsx119(InlineIcon, { icon }) : label
           }
         ),
-        /* @__PURE__ */ jsx120(
+        /* @__PURE__ */ jsx119(
           "input",
           {
             className: "drag-input",
@@ -26009,7 +26131,7 @@ var StatsDragInput = ({
 var DragInput_default = StatsDragInput;
 
 // components/Stats/Angle.tsx
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 var STEP_SIZE = 15;
 var handleDegreeChange = ({
   accumulatedChange,
@@ -26057,7 +26179,7 @@ var handleDegreeChange = ({
   }
 };
 var Angle = ({ element, scene, appState, property }) => {
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx120(
     DragInput_default,
     {
       label: "A",
@@ -26075,7 +26197,7 @@ var Angle = ({ element, scene, appState, property }) => {
 var Angle_default = Angle;
 
 // components/Stats/CanvasGrid.tsx
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var STEP_SIZE2 = 5;
 var CanvasGrid = ({
   property,
@@ -26083,7 +26205,7 @@ var CanvasGrid = ({
   appState,
   setAppState
 }) => {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx121(
     DragInput_default,
     {
       label: "Grid step",
@@ -26126,7 +26248,7 @@ var CanvasGrid = ({
 var CanvasGrid_default = CanvasGrid;
 
 // components/Stats/Dimension.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 var STEP_SIZE3 = 10;
 var _shouldKeepAspectRatio = (element) => {
   return element.type === "image";
@@ -26306,7 +26428,7 @@ var DimensionDragInput = ({
       value = round(element.crop.height * ratio, 2);
     }
   }
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx122(
     DragInput_default,
     {
       label: property === "width" ? "W" : "H",
@@ -26323,7 +26445,7 @@ var DimensionDragInput = ({
 var Dimension_default = DimensionDragInput;
 
 // components/Stats/FontSize.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var MIN_FONT_SIZE2 = 4;
 var STEP_SIZE4 = 4;
 var handleFontSizeChange = ({
@@ -26371,7 +26493,7 @@ var FontSize = ({ element, scene, appState, property }) => {
   if (!_element) {
     return null;
   }
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx123(
     DragInput_default,
     {
       label: "F",
@@ -26388,7 +26510,7 @@ var FontSize = ({ element, scene, appState, property }) => {
 var FontSize_default = FontSize;
 
 // components/Stats/MultiAngle.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var STEP_SIZE5 = 15;
 var handleDegreeChange2 = ({
   accumulatedChange,
@@ -26468,7 +26590,7 @@ var MultiAngle = ({
   const editable = editableLatestIndividualElements.some(
     (el) => isPropertyEditable(el, "angle")
   );
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx124(
     DragInput_default,
     {
       label: "A",
@@ -26487,7 +26609,7 @@ var MultiAngle_default = MultiAngle;
 
 // components/Stats/MultiDimension.tsx
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 var STEP_SIZE6 = 10;
 var getResizedUpdates = (anchorX, anchorY, scale, origElement) => {
   const offsetX = origElement.x - anchorX;
@@ -26755,7 +26877,7 @@ var MultiDimension = ({
   );
   const value = new Set(sizes).size === 1 ? Math.round(sizes[0] * 100) / 100 : "Mixed";
   const editable = sizes.length > 0;
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx125(
     DragInput_default,
     {
       label: property === "width" ? "W" : "H",
@@ -26772,7 +26894,7 @@ var MultiDimension = ({
 var MultiDimension_default = MultiDimension;
 
 // components/Stats/MultiFontSize.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var MIN_FONT_SIZE3 = 4;
 var STEP_SIZE7 = 4;
 var getApplicableTextElements = (elements, elementsMap) => elements.reduce(
@@ -26872,7 +26994,7 @@ var MultiFontSize = ({
   );
   const value = new Set(fontSizes).size === 1 ? fontSizes[0] : "Mixed";
   const editable = fontSizes.length > 0;
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx126(
     DragInput_default,
     {
       label: "F",
@@ -26891,7 +27013,7 @@ var MultiFontSize_default = MultiFontSize;
 
 // components/Stats/MultiPosition.tsx
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var STEP_SIZE8 = 10;
 var moveElements = (property, changeInTopX, changeInTopY, elements, originalElements, elementsMap, originalElementsMap, scene) => {
   for (let i = 0; i < elements.length; i++) {
@@ -27062,7 +27184,7 @@ var MultiPosition = ({
     [atomicUnits, elementsMap, property]
   );
   const value = new Set(positions).size === 1 ? positions[0] : "Mixed";
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx127(
     DragInput_default,
     {
       label: property === "x" ? "X" : "Y",
@@ -27078,7 +27200,7 @@ var MultiPosition = ({
 var MultiPosition_default = MultiPosition;
 
 // components/Stats/Position.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var STEP_SIZE9 = 10;
 var handlePositionChange2 = ({
   accumulatedChange,
@@ -27217,7 +27339,7 @@ var Position = ({
       );
     }
   }
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx128(
     DragInput_default,
     {
       label: property === "x" ? "X" : "Y",
@@ -27233,7 +27355,7 @@ var Position = ({
 var Position_default = Position;
 
 // components/Stats/index.tsx
-import { Fragment as Fragment18, jsx as jsx130, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx129, jsxs as jsxs67 } from "react/jsx-runtime";
 var STATS_TIMEOUT = 50;
 var Stats = (props) => {
   const appState = useExcalidrawAppState();
@@ -27243,7 +27365,7 @@ var Stats = (props) => {
     includeBoundTextElement: false
   });
   const gridModeEnabled = isGridModeEnabled(props.app);
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx129(
     StatsInner,
     {
       ...props,
@@ -27260,7 +27382,7 @@ var StatsRow = ({
   heading,
   style,
   ...rest
-}) => /* @__PURE__ */ jsx130(
+}) => /* @__PURE__ */ jsx129(
   "div",
   {
     className: clsx50("exc-stats__row", { "exc-stats__row--heading": heading }),
@@ -27278,7 +27400,7 @@ var StatsRows = ({
   order,
   style,
   ...rest
-}) => /* @__PURE__ */ jsx130("div", { className: "exc-stats__rows", style: { order, ...style }, ...rest, children });
+}) => /* @__PURE__ */ jsx129("div", { className: "exc-stats__rows", style: { order, ...style }, ...rest, children });
 StatsRows.displayName = "StatsRows";
 Stats.StatsRow = StatsRow;
 Stats.StatsRows = StatsRows;
@@ -27327,15 +27449,15 @@ var StatsInner = memo5(
     const _frameAndChildrenSelectedTogether = useMemo9(() => {
       return frameAndChildrenSelectedTogether(selectedElements);
     }, [selectedElements]);
-    return /* @__PURE__ */ jsx130("div", { className: "exc-stats", children: /* @__PURE__ */ jsxs68(Island, { padding: 3, children: [
-      /* @__PURE__ */ jsxs68("div", { className: "title", children: [
-        /* @__PURE__ */ jsx130("h2", { children: t("stats.title") }),
-        /* @__PURE__ */ jsx130("div", { className: "close", onClick: onClose, children: CloseIcon })
+    return /* @__PURE__ */ jsx129("div", { className: "exc-stats", children: /* @__PURE__ */ jsxs67(Island, { padding: 3, children: [
+      /* @__PURE__ */ jsxs67("div", { className: "title", children: [
+        /* @__PURE__ */ jsx129("h2", { children: t("stats.title") }),
+        /* @__PURE__ */ jsx129("div", { className: "close", onClick: onClose, children: CloseIcon })
       ] }),
-      /* @__PURE__ */ jsxs68(
+      /* @__PURE__ */ jsxs67(
         Collapsible_default,
         {
-          label: /* @__PURE__ */ jsx130("h3", { children: t("stats.generalStats") }),
+          label: /* @__PURE__ */ jsx129("h3", { children: t("stats.generalStats") }),
           open: !!(appState.stats.panels & STATS_PANELS.generalStats),
           openTrigger: () => setAppState((state) => {
             return {
@@ -27346,23 +27468,23 @@ var StatsInner = memo5(
             };
           }),
           children: [
-            /* @__PURE__ */ jsxs68(StatsRows, { children: [
-              /* @__PURE__ */ jsx130(StatsRow, { heading: true, children: t("stats.scene") }),
-              /* @__PURE__ */ jsxs68(StatsRow, { columns: 2, children: [
-                /* @__PURE__ */ jsx130("div", { children: t("stats.shapes") }),
-                /* @__PURE__ */ jsx130("div", { children: elements.length })
+            /* @__PURE__ */ jsxs67(StatsRows, { children: [
+              /* @__PURE__ */ jsx129(StatsRow, { heading: true, children: t("stats.scene") }),
+              /* @__PURE__ */ jsxs67(StatsRow, { columns: 2, children: [
+                /* @__PURE__ */ jsx129("div", { children: t("stats.shapes") }),
+                /* @__PURE__ */ jsx129("div", { children: elements.length })
               ] }),
-              /* @__PURE__ */ jsxs68(StatsRow, { columns: 2, children: [
-                /* @__PURE__ */ jsx130("div", { children: t("stats.width") }),
-                /* @__PURE__ */ jsx130("div", { children: sceneDimension.width })
+              /* @__PURE__ */ jsxs67(StatsRow, { columns: 2, children: [
+                /* @__PURE__ */ jsx129("div", { children: t("stats.width") }),
+                /* @__PURE__ */ jsx129("div", { children: sceneDimension.width })
               ] }),
-              /* @__PURE__ */ jsxs68(StatsRow, { columns: 2, children: [
-                /* @__PURE__ */ jsx130("div", { children: t("stats.height") }),
-                /* @__PURE__ */ jsx130("div", { children: sceneDimension.height })
+              /* @__PURE__ */ jsxs67(StatsRow, { columns: 2, children: [
+                /* @__PURE__ */ jsx129("div", { children: t("stats.height") }),
+                /* @__PURE__ */ jsx129("div", { children: sceneDimension.height })
               ] }),
-              gridModeEnabled && /* @__PURE__ */ jsxs68(Fragment18, { children: [
-                /* @__PURE__ */ jsx130(StatsRow, { heading: true, children: "Canvas" }),
-                /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+              gridModeEnabled && /* @__PURE__ */ jsxs67(Fragment18, { children: [
+                /* @__PURE__ */ jsx129(StatsRow, { heading: true, children: "Canvas" }),
+                /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                   CanvasGrid_default,
                   {
                     property: "gridStep",
@@ -27377,17 +27499,17 @@ var StatsInner = memo5(
           ]
         }
       ),
-      !_frameAndChildrenSelectedTogether && selectedElements.length > 0 && /* @__PURE__ */ jsx130(
+      !_frameAndChildrenSelectedTogether && selectedElements.length > 0 && /* @__PURE__ */ jsx129(
         "div",
         {
           id: "elementStats",
           style: {
             marginTop: 12
           },
-          children: /* @__PURE__ */ jsx130(
+          children: /* @__PURE__ */ jsx129(
             Collapsible_default,
             {
-              label: /* @__PURE__ */ jsx130("h3", { children: t("stats.elementProperties") }),
+              label: /* @__PURE__ */ jsx129("h3", { children: t("stats.elementProperties") }),
               open: !!(appState.stats.panels & STATS_PANELS.elementProperties),
               openTrigger: () => setAppState((state) => {
                 return {
@@ -27397,18 +27519,18 @@ var StatsInner = memo5(
                   }
                 };
               }),
-              children: /* @__PURE__ */ jsxs68(StatsRows, { children: [
-                singleElement && /* @__PURE__ */ jsxs68(Fragment18, { children: [
-                  cropMode && /* @__PURE__ */ jsx130(StatsRow, { heading: true, children: t("labels.unCroppedDimension") }),
-                  appState.croppingElementId && isImageElement(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs68(StatsRow, { columns: 2, children: [
-                    /* @__PURE__ */ jsx130("div", { children: t("stats.width") }),
-                    /* @__PURE__ */ jsx130("div", { children: round(unCroppedDimension.width, 2) })
+              children: /* @__PURE__ */ jsxs67(StatsRows, { children: [
+                singleElement && /* @__PURE__ */ jsxs67(Fragment18, { children: [
+                  cropMode && /* @__PURE__ */ jsx129(StatsRow, { heading: true, children: t("labels.unCroppedDimension") }),
+                  appState.croppingElementId && isImageElement(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs67(StatsRow, { columns: 2, children: [
+                    /* @__PURE__ */ jsx129("div", { children: t("stats.width") }),
+                    /* @__PURE__ */ jsx129("div", { children: round(unCroppedDimension.width, 2) })
                   ] }),
-                  appState.croppingElementId && isImageElement(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs68(StatsRow, { columns: 2, children: [
-                    /* @__PURE__ */ jsx130("div", { children: t("stats.height") }),
-                    /* @__PURE__ */ jsx130("div", { children: round(unCroppedDimension.height, 2) })
+                  appState.croppingElementId && isImageElement(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs67(StatsRow, { columns: 2, children: [
+                    /* @__PURE__ */ jsx129("div", { children: t("stats.height") }),
+                    /* @__PURE__ */ jsx129("div", { children: round(unCroppedDimension.height, 2) })
                   ] }),
-                  /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(
                     StatsRow,
                     {
                       heading: true,
@@ -27417,7 +27539,7 @@ var StatsInner = memo5(
                       children: appState.croppingElementId ? t("labels.imageCropping") : t(`element.${singleElement.type}`)
                     }
                   ),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     Position_default,
                     {
                       element: singleElement,
@@ -27427,7 +27549,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     Position_default,
                     {
                       element: singleElement,
@@ -27437,7 +27559,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     Dimension_default,
                     {
                       property: "width",
@@ -27446,7 +27568,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     Dimension_default,
                     {
                       property: "height",
@@ -27455,7 +27577,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  !isElbowArrow(singleElement) && /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  !isElbowArrow(singleElement) && /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     Angle_default,
                     {
                       property: "angle",
@@ -27464,7 +27586,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     FontSize_default,
                     {
                       property: "fontSize",
@@ -27474,13 +27596,13 @@ var StatsInner = memo5(
                     }
                   ) })
                 ] }),
-                multipleElements && /* @__PURE__ */ jsxs68(Fragment18, { children: [
-                  elementsAreInSameGroup(multipleElements) && /* @__PURE__ */ jsx130(StatsRow, { heading: true, children: t("element.group") }),
-                  /* @__PURE__ */ jsxs68(StatsRow, { columns: 2, style: { margin: "0.3125rem 0" }, children: [
-                    /* @__PURE__ */ jsx130("div", { children: t("stats.shapes") }),
-                    /* @__PURE__ */ jsx130("div", { children: selectedElements.length })
+                multipleElements && /* @__PURE__ */ jsxs67(Fragment18, { children: [
+                  elementsAreInSameGroup(multipleElements) && /* @__PURE__ */ jsx129(StatsRow, { heading: true, children: t("element.group") }),
+                  /* @__PURE__ */ jsxs67(StatsRow, { columns: 2, style: { margin: "0.3125rem 0" }, children: [
+                    /* @__PURE__ */ jsx129("div", { children: t("stats.shapes") }),
+                    /* @__PURE__ */ jsx129("div", { children: selectedElements.length })
                   ] }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     MultiPosition_default,
                     {
                       property: "x",
@@ -27491,7 +27613,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     MultiPosition_default,
                     {
                       property: "y",
@@ -27502,7 +27624,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     MultiDimension_default,
                     {
                       property: "width",
@@ -27513,7 +27635,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     MultiDimension_default,
                     {
                       property: "height",
@@ -27524,7 +27646,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     MultiAngle_default,
                     {
                       property: "angle",
@@ -27533,7 +27655,7 @@ var StatsInner = memo5(
                       appState
                     }
                   ) }),
-                  /* @__PURE__ */ jsx130(StatsRow, { children: /* @__PURE__ */ jsx130(
+                  /* @__PURE__ */ jsx129(StatsRow, { children: /* @__PURE__ */ jsx129(
                     MultiFontSize_default,
                     {
                       property: "fontSize",
@@ -27558,7 +27680,7 @@ var StatsInner = memo5(
 
 // components/ElementLinkDialog.tsx
 import { useCallback as useCallback12, useEffect as useEffect37, useState as useState32 } from "react";
-import { jsx as jsx131, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs68 } from "react/jsx-runtime";
 var ElementLinkDialog = ({
   sourceElementId,
   onClose,
@@ -27620,13 +27742,13 @@ var ElementLinkDialog = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [appState, onClose, handleConfirm]);
-  return /* @__PURE__ */ jsxs69("div", { className: "ElementLinkDialog", children: [
-    /* @__PURE__ */ jsxs69("div", { className: "ElementLinkDialog__header", children: [
-      /* @__PURE__ */ jsx131("h2", { children: t("elementLink.title") }),
-      /* @__PURE__ */ jsx131("p", { children: t("elementLink.desc") })
+  return /* @__PURE__ */ jsxs68("div", { className: "ElementLinkDialog", children: [
+    /* @__PURE__ */ jsxs68("div", { className: "ElementLinkDialog__header", children: [
+      /* @__PURE__ */ jsx130("h2", { children: t("elementLink.title") }),
+      /* @__PURE__ */ jsx130("p", { children: t("elementLink.desc") })
     ] }),
-    /* @__PURE__ */ jsxs69("div", { className: "ElementLinkDialog__input", children: [
-      /* @__PURE__ */ jsx131(
+    /* @__PURE__ */ jsxs68("div", { className: "ElementLinkDialog__input", children: [
+      /* @__PURE__ */ jsx130(
         TextField,
         {
           value: nextLink ?? "",
@@ -27645,7 +27767,7 @@ var ElementLinkDialog = ({
           selectOnRender: true
         }
       ),
-      originalLink && nextLink && /* @__PURE__ */ jsx131(
+      originalLink && nextLink && /* @__PURE__ */ jsx130(
         ToolButton,
         {
           type: "button",
@@ -27661,8 +27783,8 @@ var ElementLinkDialog = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs69("div", { className: "ElementLinkDialog__actions", children: [
-      /* @__PURE__ */ jsx131(
+    /* @__PURE__ */ jsxs68("div", { className: "ElementLinkDialog__actions", children: [
+      /* @__PURE__ */ jsx130(
         DialogActionButton_default,
         {
           label: t("buttons.cancel"),
@@ -27674,7 +27796,7 @@ var ElementLinkDialog = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx131(
+      /* @__PURE__ */ jsx130(
         DialogActionButton_default,
         {
           label: t("buttons.confirm"),
@@ -27689,7 +27811,7 @@ var ElementLinkDialog_default = ElementLinkDialog;
 
 // components/ErrorDialog.tsx
 import React35, { useState as useState33 } from "react";
-import { Fragment as Fragment19, jsx as jsx132 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx131 } from "react/jsx-runtime";
 var ErrorDialog = ({
   children,
   onClose
@@ -27703,13 +27825,13 @@ var ErrorDialog = ({
     }
     excalidrawContainer?.focus();
   }, [onClose, excalidrawContainer]);
-  return /* @__PURE__ */ jsx132(Fragment19, { children: modalIsShown && /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx131(Fragment19, { children: modalIsShown && /* @__PURE__ */ jsx131(
     Dialog,
     {
       size: "small",
       onCloseRequest: handleClose,
       title: t("errorDialog.title"),
-      children: /* @__PURE__ */ jsx132("div", { style: { whiteSpace: "pre-wrap" }, children })
+      children: /* @__PURE__ */ jsx131("div", { style: { whiteSpace: "pre-wrap" }, children })
     }
   ) });
 };
@@ -27719,14 +27841,14 @@ import React36, { useMemo as useMemo10 } from "react";
 import clsx51 from "clsx";
 
 // components/HelpDialog/BasicHelpDialog.tsx
-import { Fragment as Fragment20, jsx as jsx133, jsxs as jsxs70 } from "react/jsx-runtime";
-var Section2 = (props) => /* @__PURE__ */ jsxs70(Fragment20, { children: [
-  /* @__PURE__ */ jsx133("h3", { children: props.title }),
-  /* @__PURE__ */ jsx133("div", { className: "HelpDialog__islands-container", children: props.children })
+import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs69 } from "react/jsx-runtime";
+var Section2 = (props) => /* @__PURE__ */ jsxs69(Fragment20, { children: [
+  /* @__PURE__ */ jsx132("h3", { children: props.title }),
+  /* @__PURE__ */ jsx132("div", { className: "HelpDialog__islands-container", children: props.children })
 ] });
-var ShortcutIsland = (props) => /* @__PURE__ */ jsxs70("div", { className: `HelpDialog__island ${props.className}`, children: [
-  /* @__PURE__ */ jsx133("h4", { className: "HelpDialog__island-title", children: props.caption }),
-  /* @__PURE__ */ jsx133("div", { className: "HelpDialog__island-content", children: props.children })
+var ShortcutIsland = (props) => /* @__PURE__ */ jsxs69("div", { className: `HelpDialog__island ${props.className}`, children: [
+  /* @__PURE__ */ jsx132("h4", { className: "HelpDialog__island-title", children: props.caption }),
+  /* @__PURE__ */ jsx132("div", { className: "HelpDialog__island-content", children: props.children })
 ] });
 function* intersperse(as, delim) {
   let first = true;
@@ -27748,25 +27870,25 @@ var Shortcut = ({
 }) => {
   const splitShortcutKeys = shortcuts.map((shortcut) => {
     const keys = shortcut.endsWith("++") ? [...shortcut.slice(0, -2).split("+"), "+"] : shortcut.split("+");
-    return keys.map((key) => /* @__PURE__ */ jsx133(ShortcutKey, { children: upperCaseSingleChars(key) }, key));
+    return keys.map((key) => /* @__PURE__ */ jsx132(ShortcutKey, { children: upperCaseSingleChars(key) }, key));
   });
-  return /* @__PURE__ */ jsxs70("div", { className: "HelpDialog__shortcut", children: [
-    /* @__PURE__ */ jsx133("div", { children: label }),
-    /* @__PURE__ */ jsx133("div", { className: "HelpDialog__key-container", children: [...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
+  return /* @__PURE__ */ jsxs69("div", { className: "HelpDialog__shortcut", children: [
+    /* @__PURE__ */ jsx132("div", { children: label }),
+    /* @__PURE__ */ jsx132("div", { className: "HelpDialog__key-container", children: [...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
   ] });
 };
-var ShortcutKey = (props) => /* @__PURE__ */ jsx133("kbd", { className: "HelpDialog__key", ...props });
+var ShortcutKey = (props) => /* @__PURE__ */ jsx132("kbd", { className: "HelpDialog__key", ...props });
 function BasicHelpDialog() {
-  return /* @__PURE__ */ jsxs70(Section2, { title: t("helpDialog.shortcuts"), children: [
-    /* @__PURE__ */ jsxs70(
+  return /* @__PURE__ */ jsxs69(Section2, { title: t("helpDialog.shortcuts"), children: [
+    /* @__PURE__ */ jsxs69(
       ShortcutIsland,
       {
         className: "HelpDialog__island--tools",
         caption: t("helpDialog.tools"),
         children: [
-          /* @__PURE__ */ jsx133(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS.H] }),
+          /* @__PURE__ */ jsx132(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS.H] }),
           SHAPES2.filter(({ myocSimplifiedMode }) => myocSimplifiedMode).map(
-            ({ value, key }) => /* @__PURE__ */ jsx133(
+            ({ value, key }) => /* @__PURE__ */ jsx132(
               Shortcut,
               {
                 label: t(`toolBar.${value}`),
@@ -27775,7 +27897,7 @@ function BasicHelpDialog() {
               value
             )
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("helpDialog.cropStart"),
@@ -27783,7 +27905,7 @@ function BasicHelpDialog() {
               isOr: true
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("helpDialog.cropFinish"),
@@ -27794,28 +27916,28 @@ function BasicHelpDialog() {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs70(
+    /* @__PURE__ */ jsxs69(
       ShortcutIsland,
       {
         className: "HelpDialog__island--view",
         caption: t("helpDialog.view"),
         children: [
-          /* @__PURE__ */ jsx133(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS.F] }),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS.F] }),
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("buttons.zenMode"),
               shortcuts: [getShortcutKey("Alt+Z")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("buttons.objectsSnapMode"),
               shortcuts: [getShortcutKey("Alt+S")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("commandPalette.title"),
@@ -27828,76 +27950,76 @@ function BasicHelpDialog() {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs70(
+    /* @__PURE__ */ jsxs69(
       ShortcutIsland,
       {
         className: "HelpDialog__island--editor",
         caption: t("helpDialog.editor"),
         children: [
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.pasteAsPlaintext"),
               shortcuts: [getShortcutKey("CtrlOrCmd+Shift+V")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.multiSelect"),
               shortcuts: [getShortcutKey(`Shift+${t("helpDialog.click")}`)]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("helpDialog.deepSelect"),
               shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`)]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("helpDialog.deepBoxSelect"),
               shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`)]
             }
           ),
-          (probablySupportsClipboardBlob || isFirefox) && /* @__PURE__ */ jsx133(
+          (probablySupportsClipboardBlob || isFirefox) && /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.copyAsPng"),
               shortcuts: [getShortcutKey("Shift+Alt+C")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("helpDialog.toggleElementLock"),
               shortcuts: [getShortcutKey("CtrlOrCmd+Shift+L")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.group"),
               shortcuts: [getShortcutKey("CtrlOrCmd+G")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.ungroup"),
               shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.flipHorizontal"),
               shortcuts: [getShortcutKey("Shift+H")]
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx132(
             Shortcut,
             {
               label: t("labels.flipVertical"),
@@ -27911,14 +28033,14 @@ function BasicHelpDialog() {
 }
 
 // components/HelpDialog.tsx
-import { Fragment as Fragment21, jsx as jsx134, jsxs as jsxs71 } from "react/jsx-runtime";
-var Section3 = (props) => /* @__PURE__ */ jsxs71(Fragment21, { children: [
-  /* @__PURE__ */ jsx134("h3", { children: props.title }),
-  /* @__PURE__ */ jsx134("div", { className: "HelpDialog__islands-container", children: props.children })
+import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs70 } from "react/jsx-runtime";
+var Section3 = (props) => /* @__PURE__ */ jsxs70(Fragment21, { children: [
+  /* @__PURE__ */ jsx133("h3", { children: props.title }),
+  /* @__PURE__ */ jsx133("div", { className: "HelpDialog__islands-container", children: props.children })
 ] });
-var ShortcutIsland2 = (props) => /* @__PURE__ */ jsxs71("div", { className: `HelpDialog__island ${props.className}`, children: [
-  /* @__PURE__ */ jsx134("h4", { className: "HelpDialog__island-title", children: props.caption }),
-  /* @__PURE__ */ jsx134("div", { className: "HelpDialog__island-content", children: props.children })
+var ShortcutIsland2 = (props) => /* @__PURE__ */ jsxs70("div", { className: `HelpDialog__island ${props.className}`, children: [
+  /* @__PURE__ */ jsx133("h4", { className: "HelpDialog__island-title", children: props.caption }),
+  /* @__PURE__ */ jsx133("div", { className: "HelpDialog__island-content", children: props.children })
 ] });
 function* intersperse2(as, delim) {
   let first = true;
@@ -27940,14 +28062,14 @@ var Shortcut2 = ({
 }) => {
   const splitShortcutKeys = shortcuts.map((shortcut) => {
     const keys = shortcut.endsWith("++") ? [...shortcut.slice(0, -2).split("+"), "+"] : shortcut.split("+");
-    return keys.map((key) => /* @__PURE__ */ jsx134(ShortcutKey2, { children: upperCaseSingleChars2(key) }, key));
+    return keys.map((key) => /* @__PURE__ */ jsx133(ShortcutKey2, { children: upperCaseSingleChars2(key) }, key));
   });
-  return /* @__PURE__ */ jsxs71("div", { className: "HelpDialog__shortcut", children: [
-    /* @__PURE__ */ jsx134("div", { children: label }),
-    /* @__PURE__ */ jsx134("div", { className: "HelpDialog__key-container", children: [...intersperse2(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
+  return /* @__PURE__ */ jsxs70("div", { className: "HelpDialog__shortcut", children: [
+    /* @__PURE__ */ jsx133("div", { children: label }),
+    /* @__PURE__ */ jsx133("div", { className: "HelpDialog__key-container", children: [...intersperse2(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
   ] });
 };
-var ShortcutKey2 = (props) => /* @__PURE__ */ jsx134("kbd", { className: "HelpDialog__key", ...props });
+var ShortcutKey2 = (props) => /* @__PURE__ */ jsx133("kbd", { className: "HelpDialog__key", ...props });
 var HelpDialog = ({ onClose }) => {
   const [isShowAll, setIsShowAll] = React36.useState(false);
   const handleClose = React36.useCallback(() => {
@@ -27956,14 +28078,14 @@ var HelpDialog = ({ onClose }) => {
     }
   }, [onClose]);
   const showAllButton = useMemo10(
-    () => isShowAll ? /* @__PURE__ */ jsx134(
+    () => isShowAll ? /* @__PURE__ */ jsx133(
       "button",
       {
         className: clsx51("toggle-button", {}),
         onClick: () => setIsShowAll(false),
         children: t("helpDialog.myoc.showingAll")
       }
-    ) : /* @__PURE__ */ jsx134(
+    ) : /* @__PURE__ */ jsx133(
       "button",
       {
         className: clsx51("toggle-button", {}),
@@ -27973,22 +28095,22 @@ var HelpDialog = ({ onClose }) => {
     ),
     [isShowAll]
   );
-  return /* @__PURE__ */ jsx134(Fragment21, { children: /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx133(Fragment21, { children: /* @__PURE__ */ jsx133(
     Dialog,
     {
       onCloseRequest: handleClose,
       title: t("helpDialog.title"),
       className: "HelpDialog",
       titleButton: showAllButton,
-      children: isShowAll ? /* @__PURE__ */ jsxs71(Section3, { title: t("helpDialog.shortcuts"), children: [
-        /* @__PURE__ */ jsxs71(
+      children: isShowAll ? /* @__PURE__ */ jsxs70(Section3, { title: t("helpDialog.shortcuts"), children: [
+        /* @__PURE__ */ jsxs70(
           ShortcutIsland2,
           {
             className: "HelpDialog__island--tools",
             caption: t("helpDialog.tools"),
             children: [
-              /* @__PURE__ */ jsx134(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS.H] }),
-              SHAPES.map(({ value, key }) => /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS.H] }),
+              SHAPES.map(({ value, key }) => /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t(`toolBar.${value}`),
@@ -27996,30 +28118,30 @@ var HelpDialog = ({ onClose }) => {
                 },
                 value
               )),
-              /* @__PURE__ */ jsx134(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS.F] }),
-              /* @__PURE__ */ jsx134(Shortcut2, { label: t("toolBar.laser"), shortcuts: [KEYS.K] }),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS.F] }),
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.laser"), shortcuts: [KEYS.K] }),
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.eyeDropper"),
                   shortcuts: [KEYS.I, "Shift+S", "Shift+G"]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.editLineArrowPoints"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Enter")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.editText"),
                   shortcuts: [getShortcutKey("Enter")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.textNewLine"),
@@ -28029,7 +28151,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.textFinish"),
@@ -28039,7 +28161,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.curvedArrow"),
@@ -28052,7 +28174,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: false
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.curvedLine"),
@@ -28065,7 +28187,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: false
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.cropStart"),
@@ -28076,7 +28198,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.cropFinish"),
@@ -28084,15 +28206,15 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx134(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }),
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.preventBinding"),
                   shortcuts: [getShortcutKey("CtrlOrCmd")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("toolBar.link"),
@@ -28102,104 +28224,104 @@ var HelpDialog = ({ onClose }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs71(
+        /* @__PURE__ */ jsxs70(
           ShortcutIsland2,
           {
             className: "HelpDialog__island--view",
             caption: t("helpDialog.view"),
             children: [
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.smartZoom"),
                   shortcuts: [KEYS.F]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.zoomIn"),
                   shortcuts: [getShortcutKey("CtrlOrCmd++")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.zoomOut"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+-")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.resetZoom"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+0")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.zoomToSelection"),
                   shortcuts: ["Shift+2"]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.movePageUpDown"),
                   shortcuts: ["PgUp/PgDn"]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.movePageLeftRight"),
                   shortcuts: ["Shift+PgUp/PgDn"]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.zenMode"),
                   shortcuts: [getShortcutKey("Alt+Z")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.objectsSnapMode"),
                   shortcuts: [getShortcutKey("Alt+S")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.toggleGrid"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+'")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.viewMode"),
                   shortcuts: [getShortcutKey("Alt+R")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("stats.fullTitle"),
                   shortcuts: [getShortcutKey("Alt+/")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("search.title"),
                   shortcuts: [getShortcutFromShortcutName("searchMenu")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("commandPalette.title"),
@@ -28212,13 +28334,13 @@ var HelpDialog = ({ onClose }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs71(
+        /* @__PURE__ */ jsxs70(
           ShortcutIsland2,
           {
             className: "HelpDialog__island--editor",
             caption: t("helpDialog.editor"),
             children: [
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.moveCanvas"),
@@ -28229,56 +28351,56 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.delete"),
                   shortcuts: [getShortcutKey("Delete")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.cut"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+X")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.copy"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+C")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.paste"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+V")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.pasteAsPlaintext"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+V")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.selectAll"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+A")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.multiSelect"),
                   shortcuts: [getShortcutKey(`Shift+${t("helpDialog.click")}`)]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.deepSelect"),
@@ -28287,7 +28409,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.deepBoxSelect"),
@@ -28296,28 +28418,28 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              (probablySupportsClipboardBlob || isFirefox) && /* @__PURE__ */ jsx134(
+              (probablySupportsClipboardBlob || isFirefox) && /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.copyAsPng"),
                   shortcuts: [getShortcutKey("Shift+Alt+C")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.copyStyles"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Alt+C")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.pasteStyles"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Alt+V")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.sendToBack"),
@@ -28326,7 +28448,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.bringToFront"),
@@ -28335,49 +28457,49 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.sendBackward"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+[")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.bringForward"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+]")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.alignTop"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Up")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.alignBottom"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Down")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.alignLeft"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Left")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.alignRight"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Right")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.duplicateSelection"),
@@ -28387,21 +28509,21 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("helpDialog.toggleElementLock"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+L")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.undo"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Z")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("buttons.redo"),
@@ -28411,63 +28533,63 @@ var HelpDialog = ({ onClose }) => {
                   ] : [getShortcutKey("CtrlOrCmd+Shift+Z")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.group"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+G")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.ungroup"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.flipHorizontal"),
                   shortcuts: [getShortcutKey("Shift+H")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.flipVertical"),
                   shortcuts: [getShortcutKey("Shift+V")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.showStroke"),
                   shortcuts: [getShortcutKey("S")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.showBackground"),
                   shortcuts: [getShortcutKey("G")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.showFonts"),
                   shortcuts: [getShortcutKey("Shift+F")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.decreaseFontSize"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")]
                 }
               ),
-              /* @__PURE__ */ jsx134(
+              /* @__PURE__ */ jsx133(
                 Shortcut2,
                 {
                   label: t("labels.increaseFontSize"),
@@ -28477,7 +28599,7 @@ var HelpDialog = ({ onClose }) => {
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsx134(BasicHelpDialog, {})
+      ] }) : /* @__PURE__ */ jsx133(BasicHelpDialog, {})
     }
   ) });
 };
@@ -28510,7 +28632,7 @@ var useCopyStatus = () => {
 
 // components/Switch.tsx
 import clsx52 from "clsx";
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var Switch = ({
   title,
   name,
@@ -28518,7 +28640,7 @@ var Switch = ({
   onChange,
   disabled = false
 }) => {
-  return /* @__PURE__ */ jsx135("div", { className: clsx52("Switch", { toggled: checked, disabled }), children: /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx134("div", { className: clsx52("Switch", { toggled: checked, disabled }), children: /* @__PURE__ */ jsx134(
     "input",
     {
       name,
@@ -28538,13 +28660,13 @@ var Switch = ({
 };
 
 // components/ImageExportDialog.tsx
-import { jsx as jsx136, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs71 } from "react/jsx-runtime";
 var supportsContextFilters = "filter" in document.createElement("canvas").getContext("2d");
 var ErrorCanvasPreview = () => {
-  return /* @__PURE__ */ jsxs72("div", { children: [
-    /* @__PURE__ */ jsx136("h3", { children: t("canvasError.cannotShowPreview") }),
-    /* @__PURE__ */ jsx136("p", { children: /* @__PURE__ */ jsx136("span", { children: t("canvasError.canvasTooBig") }) }),
-    /* @__PURE__ */ jsxs72("em", { children: [
+  return /* @__PURE__ */ jsxs71("div", { children: [
+    /* @__PURE__ */ jsx135("h3", { children: t("canvasError.cannotShowPreview") }),
+    /* @__PURE__ */ jsx135("p", { children: /* @__PURE__ */ jsx135("span", { children: t("canvasError.canvasTooBig") }) }),
+    /* @__PURE__ */ jsxs71("em", { children: [
       "(",
       t("canvasError.canvasTooBigTip"),
       ")"
@@ -28642,11 +28764,11 @@ var ImageExportModal = ({
     exportScale,
     embedScene
   ]);
-  return /* @__PURE__ */ jsxs72("div", { className: "ImageExportModal", children: [
-    /* @__PURE__ */ jsx136("h3", { children: t("imageExportDialog.header") }),
-    /* @__PURE__ */ jsxs72("div", { className: "ImageExportModal__preview", children: [
-      /* @__PURE__ */ jsx136("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && /* @__PURE__ */ jsx136(ErrorCanvasPreview, {}) }),
-      /* @__PURE__ */ jsx136("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsxs71("div", { className: "ImageExportModal", children: [
+    /* @__PURE__ */ jsx135("h3", { children: t("imageExportDialog.header") }),
+    /* @__PURE__ */ jsxs71("div", { className: "ImageExportModal__preview", children: [
+      /* @__PURE__ */ jsx135("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && /* @__PURE__ */ jsx135(ErrorCanvasPreview, {}) }),
+      /* @__PURE__ */ jsx135("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && /* @__PURE__ */ jsx135(
         "input",
         {
           type: "text",
@@ -28664,14 +28786,14 @@ var ImageExportModal = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs72("div", { className: "ImageExportModal__settings", children: [
-      /* @__PURE__ */ jsx136("h3", { children: t("imageExportDialog.header") }),
-      hasSelection && /* @__PURE__ */ jsx136(
+    /* @__PURE__ */ jsxs71("div", { className: "ImageExportModal__settings", children: [
+      /* @__PURE__ */ jsx135("h3", { children: t("imageExportDialog.header") }),
+      hasSelection && /* @__PURE__ */ jsx135(
         ExportSetting,
         {
           label: t("imageExportDialog.label.onlySelected"),
           name: "exportOnlySelected",
-          children: /* @__PURE__ */ jsx136(
+          children: /* @__PURE__ */ jsx135(
             Switch,
             {
               name: "exportOnlySelected",
@@ -28683,12 +28805,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx136(
+      /* @__PURE__ */ jsx135(
         ExportSetting,
         {
           label: t("imageExportDialog.label.withBackground"),
           name: "exportBackgroundSwitch",
-          children: /* @__PURE__ */ jsx136(
+          children: /* @__PURE__ */ jsx135(
             Switch,
             {
               name: "exportBackgroundSwitch",
@@ -28705,12 +28827,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      supportsContextFilters && /* @__PURE__ */ jsx136(
+      supportsContextFilters && /* @__PURE__ */ jsx135(
         ExportSetting,
         {
           label: t("imageExportDialog.label.darkMode"),
           name: "exportDarkModeSwitch",
-          children: /* @__PURE__ */ jsx136(
+          children: /* @__PURE__ */ jsx135(
             Switch,
             {
               name: "exportDarkModeSwitch",
@@ -28727,13 +28849,13 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx136(
+      /* @__PURE__ */ jsx135(
         ExportSetting,
         {
           label: t("imageExportDialog.label.embedScene"),
           tooltip: t("imageExportDialog.tooltip.embedScene"),
           name: "exportEmbedSwitch",
-          children: /* @__PURE__ */ jsx136(
+          children: /* @__PURE__ */ jsx135(
             Switch,
             {
               name: "exportEmbedSwitch",
@@ -28750,12 +28872,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx136(
+      /* @__PURE__ */ jsx135(
         ExportSetting,
         {
           label: t("imageExportDialog.label.scale"),
           name: "exportScale",
-          children: /* @__PURE__ */ jsx136(
+          children: /* @__PURE__ */ jsx135(
             RadioGroup,
             {
               name: "exportScale",
@@ -28772,8 +28894,8 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs72("div", { className: "ImageExportModal__settings__buttons", children: [
-        /* @__PURE__ */ jsx136(
+      /* @__PURE__ */ jsxs71("div", { className: "ImageExportModal__settings__buttons", children: [
+        /* @__PURE__ */ jsx135(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -28785,7 +28907,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToPng")
           }
         ),
-        /* @__PURE__ */ jsx136(
+        /* @__PURE__ */ jsx135(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -28797,7 +28919,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToSvg")
           }
         ),
-        (probablySupportsClipboardBlob || isFirefox) && /* @__PURE__ */ jsx136(
+        (probablySupportsClipboardBlob || isFirefox) && /* @__PURE__ */ jsx135(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -28827,19 +28949,19 @@ var ExportSetting = ({
   tooltip,
   name
 }) => {
-  return /* @__PURE__ */ jsxs72("div", { className: "ImageExportModal__settings__setting", title: label, children: [
-    /* @__PURE__ */ jsxs72(
+  return /* @__PURE__ */ jsxs71("div", { className: "ImageExportModal__settings__setting", title: label, children: [
+    /* @__PURE__ */ jsxs71(
       "label",
       {
         htmlFor: name,
         className: "ImageExportModal__settings__setting__label",
         children: [
           label,
-          tooltip && /* @__PURE__ */ jsx136(Tooltip, { label: tooltip, long: true, children: helpIcon })
+          tooltip && /* @__PURE__ */ jsx135(Tooltip, { label: tooltip, long: true, children: helpIcon })
         ]
       }
     ),
-    /* @__PURE__ */ jsx136("div", { className: "ImageExportModal__settings__setting__content", children })
+    /* @__PURE__ */ jsx135("div", { className: "ImageExportModal__settings__setting__content", children })
   ] });
 };
 var ImageExportDialog = ({
@@ -28857,7 +28979,7 @@ var ImageExportDialog = ({
       elementsSnapshot: cloneJSON(elements)
     };
   });
-  return /* @__PURE__ */ jsx136(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx135(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx135(
     ImageExportModal,
     {
       elementsSnapshot,
@@ -28875,9 +28997,9 @@ import React38 from "react";
 
 // components/Card.tsx
 import OpenColor3 from "open-color";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
 var Card = ({ children, color }) => {
-  return /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       className: "Card",
@@ -28892,7 +29014,7 @@ var Card = ({ children, color }) => {
 };
 
 // components/JSONExportDialog.tsx
-import { Fragment as Fragment22, jsx as jsx138, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx137, jsxs as jsxs72 } from "react/jsx-runtime";
 var JSONExportModal = ({
   elements,
   appState,
@@ -28904,15 +29026,15 @@ var JSONExportModal = ({
   onCloseRequest
 }) => {
   const { onExportToBackend } = exportOpts;
-  return /* @__PURE__ */ jsx138("div", { className: "ExportDialog ExportDialog--json", children: /* @__PURE__ */ jsxs73("div", { className: "ExportDialog-cards", children: [
-    exportOpts.saveFileToDisk && /* @__PURE__ */ jsxs73(Card, { color: "lime", children: [
-      /* @__PURE__ */ jsx138("div", { className: "Card-icon", children: exportToFileIcon }),
-      /* @__PURE__ */ jsx138("h2", { children: t("exportDialog.disk_title") }),
-      /* @__PURE__ */ jsxs73("div", { className: "Card-details", children: [
+  return /* @__PURE__ */ jsx137("div", { className: "ExportDialog ExportDialog--json", children: /* @__PURE__ */ jsxs72("div", { className: "ExportDialog-cards", children: [
+    exportOpts.saveFileToDisk && /* @__PURE__ */ jsxs72(Card, { color: "lime", children: [
+      /* @__PURE__ */ jsx137("div", { className: "Card-icon", children: exportToFileIcon }),
+      /* @__PURE__ */ jsx137("h2", { children: t("exportDialog.disk_title") }),
+      /* @__PURE__ */ jsxs72("div", { className: "Card-details", children: [
         t("exportDialog.disk_details"),
         !nativeFileSystemSupported && actionManager.renderAction("changeProjectName")
       ] }),
-      /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx137(
         ToolButton,
         {
           className: "Card-button",
@@ -28926,11 +29048,11 @@ var JSONExportModal = ({
         }
       )
     ] }),
-    onExportToBackend && /* @__PURE__ */ jsxs73(Card, { color: "pink", children: [
-      /* @__PURE__ */ jsx138("div", { className: "Card-icon", children: LinkIcon }),
-      /* @__PURE__ */ jsx138("h2", { children: t("exportDialog.link_title") }),
-      /* @__PURE__ */ jsx138("div", { className: "Card-details", children: t("exportDialog.link_details") }),
-      /* @__PURE__ */ jsx138(
+    onExportToBackend && /* @__PURE__ */ jsxs72(Card, { color: "pink", children: [
+      /* @__PURE__ */ jsx137("div", { className: "Card-icon", children: LinkIcon }),
+      /* @__PURE__ */ jsx137("h2", { children: t("exportDialog.link_title") }),
+      /* @__PURE__ */ jsx137("div", { className: "Card-details", children: t("exportDialog.link_details") }),
+      /* @__PURE__ */ jsx137(
         ToolButton,
         {
           className: "Card-button",
@@ -28965,7 +29087,7 @@ var JSONExportDialog = ({
   const handleClose = React38.useCallback(() => {
     setAppState({ openDialog: null });
   }, [setAppState]);
-  return /* @__PURE__ */ jsx138(Fragment22, { children: appState.openDialog?.name === "jsonExport" && /* @__PURE__ */ jsx138(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx137(Fragment22, { children: appState.openDialog?.name === "jsonExport" && /* @__PURE__ */ jsx137(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: /* @__PURE__ */ jsx137(
     JSONExportModal,
     {
       elements,
@@ -28982,10 +29104,10 @@ var JSONExportDialog = ({
 
 // components/LaserPointerButton.tsx
 import clsx53 from "clsx";
-import { jsx as jsx139, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs73 } from "react/jsx-runtime";
 var DEFAULT_SIZE3 = "small";
 var LaserPointerButton = (props) => {
-  return /* @__PURE__ */ jsxs74(
+  return /* @__PURE__ */ jsxs73(
     "label",
     {
       className: clsx53(
@@ -28997,7 +29119,7 @@ var LaserPointerButton = (props) => {
       ),
       title: `${props.title}`,
       children: [
-        /* @__PURE__ */ jsx139(
+        /* @__PURE__ */ jsx138(
           "input",
           {
             className: "ToolIcon_type_checkbox",
@@ -29009,33 +29131,33 @@ var LaserPointerButton = (props) => {
             "data-testid": "toolbar-LaserPointer"
           }
         ),
-        /* @__PURE__ */ jsx139("div", { className: "ToolIcon__icon", children: laserPointerToolIcon })
+        /* @__PURE__ */ jsx138("div", { className: "ToolIcon__icon", children: laserPointerToolIcon })
       ]
     }
   );
 };
 
 // components/LayerUI.tsx
-import { Fragment as Fragment23, jsx as jsx140, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx139, jsxs as jsxs74 } from "react/jsx-runtime";
 var DefaultMainMenu = ({ UIOptions }) => {
-  return /* @__PURE__ */ jsxs75(MainMenu_default, { __fallback: true, children: [
-    /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.LoadScene, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.SaveToActiveFile, {}),
-    UIOptions.canvasActions.export && /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.Export, {}),
-    UIOptions.canvasActions.saveAsImage && /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.SaveAsImage, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.SearchMenu, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.Help, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.Separator, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.Group, { title: "Excalidraw links", children: /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.Socials, {}) }),
-    /* @__PURE__ */ jsx140(MainMenu_default.Separator, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.ToggleTheme, {}),
-    /* @__PURE__ */ jsx140(MainMenu_default.DefaultItems.ChangeCanvasBackground, {})
+  return /* @__PURE__ */ jsxs74(MainMenu_default, { __fallback: true, children: [
+    /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.LoadScene, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.SaveToActiveFile, {}),
+    UIOptions.canvasActions.export && /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.Export, {}),
+    UIOptions.canvasActions.saveAsImage && /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.SaveAsImage, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.SearchMenu, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.Help, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.Separator, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.Group, { title: "Excalidraw links", children: /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.Socials, {}) }),
+    /* @__PURE__ */ jsx139(MainMenu_default.Separator, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.ToggleTheme, {}),
+    /* @__PURE__ */ jsx139(MainMenu_default.DefaultItems.ChangeCanvasBackground, {})
   ] });
 };
 var DefaultOverwriteConfirmDialog = () => {
-  return /* @__PURE__ */ jsxs75(OverwriteConfirmDialog, { __fallback: true, children: [
-    /* @__PURE__ */ jsx140(OverwriteConfirmDialog.Actions.SaveToDisk, {}),
-    /* @__PURE__ */ jsx140(OverwriteConfirmDialog.Actions.ExportToImage, {})
+  return /* @__PURE__ */ jsxs74(OverwriteConfirmDialog, { __fallback: true, children: [
+    /* @__PURE__ */ jsx139(OverwriteConfirmDialog.Actions.SaveToDisk, {}),
+    /* @__PURE__ */ jsx139(OverwriteConfirmDialog.Actions.ExportToImage, {})
   ] });
 };
 var LayerUI = ({
@@ -29067,7 +29189,7 @@ var LayerUI = ({
     if (!UIOptions.canvasActions.export) {
       return null;
     }
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx139(
       JSONExportDialog,
       {
         elements,
@@ -29084,7 +29206,7 @@ var LayerUI = ({
     if (!UIOptions.canvasActions.saveAsImage || appState.openDialog?.name !== "imageExport") {
       return null;
     }
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx139(
       ImageExportDialog,
       {
         elements,
@@ -29097,18 +29219,18 @@ var LayerUI = ({
       }
     );
   };
-  const renderCanvasActions = () => /* @__PURE__ */ jsxs75("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx140(tunnels.MainMenuTunnel.Out, {}),
-    renderWelcomeScreen && /* @__PURE__ */ jsx140(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
+  const renderCanvasActions = () => /* @__PURE__ */ jsxs74("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx139(tunnels.MainMenuTunnel.Out, {}),
+    renderWelcomeScreen && /* @__PURE__ */ jsx139(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
   ] });
-  const renderSelectedShapeActions = () => /* @__PURE__ */ jsx140(
+  const renderSelectedShapeActions = () => /* @__PURE__ */ jsx139(
     Section,
     {
       heading: "selectedShapeActions",
       className: clsx54("selected-shape-actions zen-mode-transition", {
         "transition-left": appState.zenModeEnabled
       }),
-      children: /* @__PURE__ */ jsx140(
+      children: /* @__PURE__ */ jsx139(
         Island,
         {
           className: CLASSES.SHAPE_ACTIONS_MENU,
@@ -29118,7 +29240,7 @@ var LayerUI = ({
             // approximate height of hamburgerMenu + footer
             maxHeight: `${appState.height - 166}px`
           },
-          children: /* @__PURE__ */ jsx140(
+          children: /* @__PURE__ */ jsx139(
             SelectedShapeActions,
             {
               appState,
@@ -29137,14 +29259,14 @@ var LayerUI = ({
       elements
     );
     const shouldShowStats = appState.stats.open && !appState.zenModeEnabled && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector";
-    return /* @__PURE__ */ jsx140(FixedSideContainer, { side: "top", children: /* @__PURE__ */ jsxs75("div", { className: "App-menu App-menu_top", children: [
-      /* @__PURE__ */ jsxs75(Stack_default.Col, { gap: 6, className: clsx54("App-menu_top__left"), children: [
+    return /* @__PURE__ */ jsx139(FixedSideContainer, { side: "top", children: /* @__PURE__ */ jsxs74("div", { className: "App-menu App-menu_top", children: [
+      /* @__PURE__ */ jsxs74(Stack_default.Col, { gap: 6, className: clsx54("App-menu_top__left"), children: [
         renderCanvasActions(),
         shouldRenderSelectedShapeActions && renderSelectedShapeActions()
       ] }),
-      !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx140(Section, { heading: "shapes", className: "shapes-section", children: (heading) => /* @__PURE__ */ jsxs75("div", { style: { position: "relative" }, children: [
-        renderWelcomeScreen && /* @__PURE__ */ jsx140(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}),
-        /* @__PURE__ */ jsx140(Stack_default.Col, { gap: 4, align: "start", children: /* @__PURE__ */ jsxs75(
+      !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx139(Section, { heading: "shapes", className: "shapes-section", children: (heading) => /* @__PURE__ */ jsxs74("div", { style: { position: "relative" }, children: [
+        renderWelcomeScreen && /* @__PURE__ */ jsx139(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}),
+        /* @__PURE__ */ jsx139(Stack_default.Col, { gap: 4, align: "start", children: /* @__PURE__ */ jsxs74(
           Stack_default.Row,
           {
             gap: 1,
@@ -29152,7 +29274,7 @@ var LayerUI = ({
               "zen-mode": appState.zenModeEnabled
             }),
             children: [
-              /* @__PURE__ */ jsxs75(
+              /* @__PURE__ */ jsxs74(
                 Island,
                 {
                   padding: 1,
@@ -29160,7 +29282,7 @@ var LayerUI = ({
                     "zen-mode": appState.zenModeEnabled
                   }),
                   children: [
-                    /* @__PURE__ */ jsx140(
+                    /* @__PURE__ */ jsx139(
                       HintViewer,
                       {
                         appState,
@@ -29170,8 +29292,8 @@ var LayerUI = ({
                       }
                     ),
                     heading,
-                    /* @__PURE__ */ jsxs75(Stack_default.Row, { gap: 1, children: [
-                      /* @__PURE__ */ jsx140(
+                    /* @__PURE__ */ jsxs74(Stack_default.Row, { gap: 1, children: [
+                      /* @__PURE__ */ jsx139(
                         PenModeButton,
                         {
                           zenModeEnabled: appState.zenModeEnabled,
@@ -29181,7 +29303,7 @@ var LayerUI = ({
                           penDetected: appState.penDetected
                         }
                       ),
-                      /* @__PURE__ */ jsx140(
+                      /* @__PURE__ */ jsx139(
                         HandButton,
                         {
                           checked: isHandToolActive(appState),
@@ -29190,7 +29312,7 @@ var LayerUI = ({
                           isMobile: true
                         }
                       ),
-                      /* @__PURE__ */ jsx140(
+                      /* @__PURE__ */ jsx139(
                         ShapesSwitcher,
                         {
                           appState,
@@ -29203,7 +29325,7 @@ var LayerUI = ({
                   ]
                 }
               ),
-              isCollaborating && /* @__PURE__ */ jsx140(
+              isCollaborating && /* @__PURE__ */ jsx139(
                 Island,
                 {
                   style: {
@@ -29211,7 +29333,7 @@ var LayerUI = ({
                     alignSelf: "center",
                     height: "fit-content"
                   },
-                  children: /* @__PURE__ */ jsx140(
+                  children: /* @__PURE__ */ jsx139(
                     LaserPointerButton,
                     {
                       title: t("toolBar.laser"),
@@ -29226,7 +29348,7 @@ var LayerUI = ({
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ jsxs75(
+      /* @__PURE__ */ jsxs74(
         "div",
         {
           className: clsx54(
@@ -29236,7 +29358,7 @@ var LayerUI = ({
             }
           ),
           children: [
-            appState.collaborators.size > 0 && /* @__PURE__ */ jsx140(
+            appState.collaborators.size > 0 && /* @__PURE__ */ jsx139(
               UserList,
               {
                 collaborators: appState.collaborators,
@@ -29245,8 +29367,8 @@ var LayerUI = ({
             ),
             renderTopRightUI?.(device.editor.isMobile, appState),
             !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && // hide button when sidebar docked
-            (!isSidebarDocked || appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && /* @__PURE__ */ jsx140(tunnels.DefaultSidebarTriggerTunnel.Out, {}),
-            shouldShowStats && /* @__PURE__ */ jsx140(
+            (!isSidebarDocked || appState.openSidebar?.name !== DEFAULT_SIDEBAR.name) && /* @__PURE__ */ jsx139(tunnels.DefaultSidebarTriggerTunnel.Out, {}),
+            shouldShowStats && /* @__PURE__ */ jsx139(
               Stats,
               {
                 app,
@@ -29262,7 +29384,7 @@ var LayerUI = ({
     ] }) });
   };
   const renderSidebars = () => {
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx139(
       DefaultSidebar,
       {
         __fallback: true,
@@ -29277,10 +29399,10 @@ var LayerUI = ({
     );
   };
   const isSidebarDocked = useAtomValue(isSidebarDockedAtom);
-  const layerUIJSX = /* @__PURE__ */ jsxs75(Fragment23, { children: [
+  const layerUIJSX = /* @__PURE__ */ jsxs74(Fragment23, { children: [
     children,
-    /* @__PURE__ */ jsx140(DefaultMainMenu, { UIOptions }),
-    /* @__PURE__ */ jsx140(
+    /* @__PURE__ */ jsx139(DefaultMainMenu, { UIOptions }),
+    /* @__PURE__ */ jsx139(
       DefaultSidebar.Trigger,
       {
         __fallback: true,
@@ -29299,11 +29421,11 @@ var LayerUI = ({
         children: t("toolBar.library")
       }
     ),
-    /* @__PURE__ */ jsx140(DefaultOverwriteConfirmDialog, {}),
-    appState.openDialog?.name === "ttd" && /* @__PURE__ */ jsx140(TTDDialog, { __fallback: true }),
-    appState.isLoading && /* @__PURE__ */ jsx140(LoadingMessage, { delay: 250 }),
-    appState.errorMessage && /* @__PURE__ */ jsx140(ErrorDialog, { onClose: () => setAppState({ errorMessage: null }), children: appState.errorMessage }),
-    eyeDropperState && !device.editor.isMobile && /* @__PURE__ */ jsx140(
+    /* @__PURE__ */ jsx139(DefaultOverwriteConfirmDialog, {}),
+    appState.openDialog?.name === "ttd" && /* @__PURE__ */ jsx139(TTDDialog, { __fallback: true }),
+    appState.isLoading && /* @__PURE__ */ jsx139(LoadingMessage, { delay: 250 }),
+    appState.errorMessage && /* @__PURE__ */ jsx139(ErrorDialog, { onClose: () => setAppState({ errorMessage: null }), children: appState.errorMessage }),
+    eyeDropperState && !device.editor.isMobile && /* @__PURE__ */ jsx139(
       EyeDropper,
       {
         colorPickerType: eyeDropperState.colorPickerType,
@@ -29342,7 +29464,7 @@ var LayerUI = ({
         }
       }
     ),
-    appState.openDialog?.name === "help" && /* @__PURE__ */ jsx140(
+    appState.openDialog?.name === "help" && /* @__PURE__ */ jsx139(
       HelpDialog,
       {
         onClose: () => {
@@ -29350,7 +29472,7 @@ var LayerUI = ({
         }
       }
     ),
-    appState.openDialog?.name === "elementLinkSelector" && /* @__PURE__ */ jsx140(
+    appState.openDialog?.name === "elementLinkSelector" && /* @__PURE__ */ jsx139(
       ElementLinkDialog_default,
       {
         sourceElementId: appState.openDialog.sourceElementId,
@@ -29364,10 +29486,10 @@ var LayerUI = ({
         generateLinkForSelection
       }
     ),
-    /* @__PURE__ */ jsx140(tunnels.OverwriteConfirmDialogTunnel.Out, {}),
+    /* @__PURE__ */ jsx139(tunnels.OverwriteConfirmDialogTunnel.Out, {}),
     renderImageExportDialog(),
     renderJSONExportDialog(),
-    appState.pasteDialog.shown && /* @__PURE__ */ jsx140(
+    appState.pasteDialog.shown && /* @__PURE__ */ jsx139(
       PasteChartDialog,
       {
         setAppState,
@@ -29377,7 +29499,7 @@ var LayerUI = ({
         })
       }
     ),
-    device.editor.isMobile && /* @__PURE__ */ jsx140(
+    device.editor.isMobile && /* @__PURE__ */ jsx139(
       MobileMenu,
       {
         app,
@@ -29398,16 +29520,16 @@ var LayerUI = ({
         UIOptions
       }
     ),
-    !device.editor.isMobile && /* @__PURE__ */ jsxs75(Fragment23, { children: [
-      /* @__PURE__ */ jsxs75(
+    !device.editor.isMobile && /* @__PURE__ */ jsxs74(Fragment23, { children: [
+      /* @__PURE__ */ jsxs74(
         "div",
         {
           className: "layer-ui__wrapper",
           style: appState.openSidebar && isSidebarDocked && device.editor.canFitSidebar ? { width: `calc(100% - var(--right-sidebar-width))` } : {},
           children: [
-            renderWelcomeScreen && /* @__PURE__ */ jsx140(tunnels.WelcomeScreenCenterTunnel.Out, {}),
+            renderWelcomeScreen && /* @__PURE__ */ jsx139(tunnels.WelcomeScreenCenterTunnel.Out, {}),
             renderFixedSideContainer(),
-            /* @__PURE__ */ jsx140(
+            /* @__PURE__ */ jsx139(
               Footer_default,
               {
                 appState,
@@ -29416,7 +29538,7 @@ var LayerUI = ({
                 renderWelcomeScreen
               }
             ),
-            appState.scrolledOutside && /* @__PURE__ */ jsx140(
+            appState.scrolledOutside && /* @__PURE__ */ jsx139(
               "button",
               {
                 type: "button",
@@ -29435,7 +29557,7 @@ var LayerUI = ({
       renderSidebars()
     ] })
   ] });
-  return /* @__PURE__ */ jsx140(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx140(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx140(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
+  return /* @__PURE__ */ jsx139(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx139(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx139(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
 };
 var stripIrrelevantAppStateProps = (appState) => {
   const {
@@ -29469,10 +29591,10 @@ var LayerUI_default = React39.memo(LayerUI, areEqual2);
 
 // components/MagicButton.tsx
 import clsx55 from "clsx";
-import { jsx as jsx141, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs75 } from "react/jsx-runtime";
 var DEFAULT_SIZE4 = "small";
 var ElementCanvasButton = (props) => {
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs75(
     "label",
     {
       className: clsx55(
@@ -29484,7 +29606,7 @@ var ElementCanvasButton = (props) => {
       ),
       title: `${props.title}`,
       children: [
-        /* @__PURE__ */ jsx141(
+        /* @__PURE__ */ jsx140(
           "input",
           {
             className: "ToolIcon_type_checkbox",
@@ -29495,7 +29617,7 @@ var ElementCanvasButton = (props) => {
             "aria-label": props.title
           }
         ),
-        /* @__PURE__ */ jsx141("div", { className: "ToolIcon__icon", children: props.icon })
+        /* @__PURE__ */ jsx140("div", { className: "ToolIcon__icon", children: props.icon })
       ]
     }
   );
@@ -29503,7 +29625,7 @@ var ElementCanvasButton = (props) => {
 
 // components/SVGLayer.tsx
 import { useEffect as useEffect39, useRef as useRef35 } from "react";
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
 var SVGLayer = ({ trails }) => {
   const svgRef = useRef35(null);
   useEffect39(() => {
@@ -29518,12 +29640,12 @@ var SVGLayer = ({ trails }) => {
       }
     };
   }, trails);
-  return /* @__PURE__ */ jsx142("div", { className: "SVGLayer", children: /* @__PURE__ */ jsx142("svg", { ref: svgRef }) });
+  return /* @__PURE__ */ jsx141("div", { className: "SVGLayer", children: /* @__PURE__ */ jsx141("svg", { ref: svgRef }) });
 };
 
 // components/canvases/InteractiveCanvas.tsx
 import React40, { useEffect as useEffect40, useRef as useRef36 } from "react";
-import { jsx as jsx143 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
 var InteractiveCanvas = (props) => {
   const isComponentMounted = useRef36(false);
   useEffect40(() => {
@@ -29593,7 +29715,7 @@ var InteractiveCanvas = (props) => {
       isRenderThrottlingEnabled()
     );
   });
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx142(
     "canvas",
     {
       className: "excalidraw__canvas interactive",
@@ -29668,7 +29790,7 @@ var InteractiveCanvas_default = React40.memo(InteractiveCanvas, areEqual3);
 
 // components/canvases/StaticCanvas.tsx
 import React41, { useEffect as useEffect41, useRef as useRef37 } from "react";
-import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx143 } from "react/jsx-runtime";
 var StaticCanvas = (props) => {
   const wrapperRef = useRef37(null);
   const isComponentMounted = useRef37(false);
@@ -29713,7 +29835,7 @@ var StaticCanvas = (props) => {
       isRenderThrottlingEnabled()
     );
   });
-  return /* @__PURE__ */ jsx144("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
+  return /* @__PURE__ */ jsx143("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
 };
 var getRelevantAppStateProps2 = (appState) => {
   const relevantAppStateProps = {
@@ -29817,7 +29939,7 @@ var renderNewElementScene = (renderConfig, throttle5) => {
 };
 
 // components/canvases/NewElementCanvas.tsx
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 var NewElementCanvas = (props) => {
   const canvasRef = useRef38(null);
   useEffect42(() => {
@@ -29838,7 +29960,7 @@ var NewElementCanvas = (props) => {
       isRenderThrottlingEnabled()
     );
   });
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx144(
     "canvas",
     {
       className: "excalidraw__canvas",
@@ -29856,7 +29978,7 @@ var NewElementCanvas_default = NewElementCanvas;
 
 // components/Toast.tsx
 import { useCallback as useCallback14, useEffect as useEffect43, useRef as useRef39 } from "react";
-import { jsx as jsx146, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs76 } from "react/jsx-runtime";
 var DEFAULT_TOAST_TIMEOUT = 5e3;
 var Toast = ({
   message,
@@ -29883,7 +30005,7 @@ var Toast = ({
   }, [scheduleTimeout, message, duration, shouldAutoClose]);
   const onMouseEnter = shouldAutoClose ? () => clearTimeout(timerRef?.current) : void 0;
   const onMouseLeave = shouldAutoClose ? scheduleTimeout : void 0;
-  return /* @__PURE__ */ jsxs77(
+  return /* @__PURE__ */ jsxs76(
     "div",
     {
       className: "Toast",
@@ -29891,8 +30013,8 @@ var Toast = ({
       onMouseLeave,
       style,
       children: [
-        /* @__PURE__ */ jsx146("p", { className: "Toast__message", children: message }),
-        closable && /* @__PURE__ */ jsx146(
+        /* @__PURE__ */ jsx145("p", { className: "Toast__message", children: message }),
+        closable && /* @__PURE__ */ jsx145(
           ToolButton,
           {
             icon: CloseIcon,
@@ -29907,6 +30029,46 @@ var Toast = ({
   );
 };
 
+// components/BraveMeasureTextError.tsx
+import { jsx as jsx146, jsxs as jsxs77 } from "react/jsx-runtime";
+var BraveMeasureTextError = () => {
+  return /* @__PURE__ */ jsxs77("div", { "data-testid": "brave-measure-text-error", children: [
+    /* @__PURE__ */ jsx146("p", { children: /* @__PURE__ */ jsx146(
+      Trans_default,
+      {
+        i18nKey: "errors.brave_measure_text_error.line1",
+        bold: (el) => /* @__PURE__ */ jsx146("span", { style: { fontWeight: 600 }, children: el })
+      }
+    ) }),
+    /* @__PURE__ */ jsx146("p", { children: /* @__PURE__ */ jsx146(
+      Trans_default,
+      {
+        i18nKey: "errors.brave_measure_text_error.line2",
+        bold: (el) => /* @__PURE__ */ jsx146("span", { style: { fontWeight: 600 }, children: el })
+      }
+    ) }),
+    /* @__PURE__ */ jsx146("p", { children: /* @__PURE__ */ jsx146(
+      Trans_default,
+      {
+        i18nKey: "errors.brave_measure_text_error.line3",
+        link: (el) => /* @__PURE__ */ jsx146("a", { href: "http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser", children: el })
+      }
+    ) }),
+    /* @__PURE__ */ jsx146("p", { children: /* @__PURE__ */ jsx146(
+      Trans_default,
+      {
+        i18nKey: "errors.brave_measure_text_error.line4",
+        issueLink: (el) => /* @__PURE__ */ jsx146("a", { href: "https://github.com/excalidraw/excalidraw/issues/new", children: el }),
+        discordLink: (el) => /* @__PURE__ */ jsxs77("a", { href: "https://discord.gg/UexuTaE", children: [
+          el,
+          "."
+        ] })
+      }
+    ) })
+  ] });
+};
+var BraveMeasureTextError_default = BraveMeasureTextError;
+
 // components/App.tsx
 import { Fragment as Fragment24, jsx as jsx147, jsxs as jsxs78 } from "react/jsx-runtime";
 var AppContext = React42.createContext(null);
@@ -30017,19 +30179,7 @@ var App = class _App extends React42.Component {
     __publicField(this, "lastViewportPosition", { x: 0, y: 0 });
     __publicField(this, "animationFrameHandler", new AnimationFrameHandler());
     __publicField(this, "laserTrails", new LaserTrails(this.animationFrameHandler, this));
-    __publicField(this, "eraserTrail", new AnimatedTrail(this.animationFrameHandler, this, {
-      streamline: 0.2,
-      size: 5,
-      keepHead: true,
-      sizeMapping: (c) => {
-        const DECAY_TIME = 200;
-        const DECAY_LENGTH = 10;
-        const t2 = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);
-        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut(l), easeOut(t2));
-      },
-      fill: () => this.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
-    }));
+    __publicField(this, "eraserTrail", new EraserTrail(this.animationFrameHandler, this));
     __publicField(this, "lassoTrail", new LassoTrail(this.animationFrameHandler, this));
     __publicField(this, "onChangeEmitter", new Emitter());
     __publicField(this, "onPointerDownEmitter", new Emitter());
@@ -31939,7 +32089,7 @@ var App = class _App extends React42.Component {
         x: sceneX,
         y: sceneY
       });
-      const element = existingTextElement ? existingTextElement : newTextElement({
+      const element = existingTextElement || newTextElement({
         x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
         y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
         strokeColor: this.state.currentItemStrokeColor,
@@ -31957,7 +32107,7 @@ var App = class _App extends React42.Component {
         containerId: shouldBindToContainer ? container?.id : void 0,
         groupIds: container?.groupIds ?? [],
         lineHeight,
-        angle: container?.angle ?? 0,
+        angle: container ? isArrowElement(container) ? 0 : container.angle : 0,
         frameId: topLayerFrame ? topLayerFrame.id : null
       });
       if (!existingTextElement && shouldBindToContainer && container) {
@@ -32575,80 +32725,14 @@ var App = class _App extends React42.Component {
         }));
       }
     });
-    __publicField(this, "handleEraser", (event, pointerDownState, scenePointer) => {
-      this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);
-      let didChange = false;
-      const processedGroups = /* @__PURE__ */ new Set();
-      const nonDeletedElements = this.scene.getNonDeletedElements();
-      const processElements = (elements) => {
-        for (const element of elements) {
-          if (element.locked) {
-            return;
-          }
-          if (event.altKey) {
-            if (this.elementsPendingErasure.delete(element.id)) {
-              didChange = true;
-            }
-          } else if (!this.elementsPendingErasure.has(element.id)) {
-            didChange = true;
-            this.elementsPendingErasure.add(element.id);
-          }
-          if (didChange && element.groupIds?.length) {
-            const shallowestGroupId = element.groupIds.at(-1);
-            if (!processedGroups.has(shallowestGroupId)) {
-              processedGroups.add(shallowestGroupId);
-              const elems = getElementsInGroup(
-                nonDeletedElements,
-                shallowestGroupId
-              );
-              for (const elem of elems) {
-                if (event.altKey) {
-                  this.elementsPendingErasure.delete(elem.id);
-                } else {
-                  this.elementsPendingErasure.add(elem.id);
-                }
-              }
-            }
-          }
-        }
-      };
-      const distance2 = pointDistance(
-        pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-        pointFrom(scenePointer.x, scenePointer.y)
+    __publicField(this, "handleEraser", (event, scenePointer) => {
+      const elementsToErase = this.eraserTrail.addPointToPath(
+        scenePointer.x,
+        scenePointer.y,
+        event.altKey
       );
-      const threshold = this.getElementHitThreshold();
-      const p = { ...pointerDownState.lastCoords };
-      let samplingInterval = 0;
-      while (samplingInterval <= distance2) {
-        const hitElements = this.getElementsAtPosition(p.x, p.y);
-        processElements(hitElements);
-        if (samplingInterval === distance2) {
-          break;
-        }
-        samplingInterval = Math.min(samplingInterval + threshold, distance2);
-        const distanceRatio = samplingInterval / distance2;
-        const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;
-        const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;
-        p.x = nextX;
-        p.y = nextY;
-      }
-      pointerDownState.lastCoords.x = scenePointer.x;
-      pointerDownState.lastCoords.y = scenePointer.y;
-      if (didChange) {
-        for (const element of this.scene.getNonDeletedElements()) {
-          if (isBoundToContainer(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {
-            if (event.altKey) {
-              this.elementsPendingErasure.delete(element.id);
-              this.elementsPendingErasure.delete(element.containerId);
-            } else {
-              this.elementsPendingErasure.add(element.id);
-              this.elementsPendingErasure.add(element.containerId);
-            }
-          }
-        }
-        this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-        this.triggerRender();
-      }
+      this.elementsPendingErasure = new Set(elementsToErase);
+      this.triggerRender();
     });
     // set touch moving for mobile context menu
     __publicField(this, "handleTouchMove", (event) => {
@@ -35202,8 +35286,8 @@ var App = class _App extends React42.Component {
                           {
                             trails: [
                               this.laserTrails,
-                              this.eraserTrail,
-                              this.lassoTrail
+                              this.lassoTrail,
+                              this.eraserTrail
                             ]
                           }
                         ),
@@ -36534,7 +36618,7 @@ var App = class _App extends React42.Component {
         return;
       }
       if (isEraserActive(this.state)) {
-        this.handleEraser(event, pointerDownState, pointerCoords);
+        this.handleEraser(event, pointerCoords);
         return;
       }
       if (this.state.activeTool.type === "laser") {
@@ -38250,7 +38334,9 @@ var ExcalidrawBase = (props) => {
     validateEmbeddable,
     renderEmbeddable,
     showDeprecatedFonts,
-    wheelZoomsOnDefault
+    wheelZoomsOnDefault,
+    strokeColorTopPicks,
+    backgroundColorTopPicks
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -38321,6 +38407,8 @@ var ExcalidrawBase = (props) => {
       aiEnabled: false,
       showDeprecatedFonts,
       wheelZoomsOnDefault,
+      strokeColorTopPicks,
+      backgroundColorTopPicks,
       children
     }
   ) }) });