@myoc/excalidraw 0.19.542 → 0.19.544

package/dist/dev/index.js

@@ -14,6 +14,7 @@ import {
   canvasToBlob,
   constrainScrollState,
   createFile,
+  dataURLToFile,
   dataURLToString,
   encodePngMetadata,
   exportToCanvas,
@@ -64,13 +65,13 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-E77EFOSN.js";
+} from "./chunk-DPY7NUSG.js";
 import {
   define_import_meta_env_default
-} from "./chunk-D7VSTSAC.js";
+} from "./chunk-AKYL2SH7.js";
 import {
   en_default
-} from "./chunk-2OVHIH4L.js";
+} from "./chunk-35XUJXYN.js";
 import {
   percentages_default
 } from "./chunk-72CYJXY3.js";
@@ -97,7 +98,7 @@ import {
 } from "@excalidraw/common";
 
 // components/App.tsx
-import clsx61 from "clsx";
+import clsx62 from "clsx";
 import throttle3 from "lodash.throttle";
 import React41, { useContext as useContext4 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
@@ -398,7 +399,7 @@ var globImport_locales_json = __glob({
   "./locales/de-CH.json": () => import("./locales/de-CH-KLWBYLGC.js"),
   "./locales/de-DE.json": () => import("./locales/de-DE-UB755M7G.js"),
   "./locales/el-GR.json": () => import("./locales/el-GR-J2BFDAEA.js"),
-  "./locales/en.json": () => import("./locales/en-JINXO2V2.js"),
+  "./locales/en.json": () => import("./locales/en-CBVTFJ6O.js"),
   "./locales/es-ES.json": () => import("./locales/es-ES-GL35U3D6.js"),
   "./locales/eu-ES.json": () => import("./locales/eu-ES-5LL7P4G7.js"),
   "./locales/fa-IR.json": () => import("./locales/fa-IR-2D6AXPSB.js"),
@@ -10337,9 +10338,11 @@ import {
   isInitializedImageElement
 } from "@excalidraw/element";
 import { getContainingFrame } from "@excalidraw/element";
+var WEB_EXCALIDRAW_CLIPBOARD_MIME_TYPE = `web ${MIME_TYPES2.excalidrawClipboard}`;
 var probablySupportsClipboardReadText = "clipboard" in navigator && "readText" in navigator.clipboard;
 var probablySupportsClipboardWriteText = "clipboard" in navigator && "writeText" in navigator.clipboard;
 var probablySupportsClipboardBlob = "clipboard" in navigator && "write" in navigator.clipboard && "ClipboardItem" in window && "toBlob" in HTMLCanvasElement.prototype;
+var supportsClipboardBlob = () => "clipboard" in navigator && "write" in navigator.clipboard && "ClipboardItem" in window && "toBlob" in HTMLCanvasElement.prototype;
 var clipboardContainsElements = (contents) => {
   if ([
     EXPORT_DATA_TYPES.excalidraw,
@@ -10436,6 +10439,37 @@ var serializeAsClipboardJSON = ({
 };
 var copyToClipboard = async (elements, files, clipboardEvent) => {
   const json = serializeAsClipboardJSON({ elements, files });
+  const imageFile = elements.length === 1 && isInitializedImageElement(elements[0]) ? files?.[elements[0].fileId] : null;
+  const clipboardFile = imageFile && isSupportedImageFileType(imageFile.mimeType) && imageFile.dataURL ? dataURLToFile(imageFile.dataURL, imageFile.fileName) : null;
+  if (clipboardFile) {
+    if (supportsClipboardBlob()) {
+      try {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            [WEB_EXCALIDRAW_CLIPBOARD_MIME_TYPE]: new Blob([json], {
+              type: MIME_TYPES2.excalidrawClipboard
+            }),
+            [clipboardFile.type]: clipboardFile
+          })
+        ]);
+        return;
+      } catch (error) {
+        console.error("Error copying image with ClipboardItem", error);
+      }
+    }
+    if (clipboardEvent?.clipboardData?.items) {
+      try {
+        clipboardEvent.clipboardData.items.add(clipboardFile);
+        await copyTextToSystemClipboard(
+          { [MIME_TYPES2.excalidrawClipboard]: json },
+          clipboardEvent
+        );
+        return;
+      } catch (error) {
+        console.error("Error copying image to clipboard event", error);
+      }
+    }
+  }
   await copyTextToSystemClipboard(
     {
       [MIME_TYPES2.excalidrawClipboard]: json,
@@ -10511,11 +10545,21 @@ var readSystemClipboard = async () => {
   }
   for (const item of clipboardItems) {
     for (const type of item.types) {
+      if (type === WEB_EXCALIDRAW_CLIPBOARD_MIME_TYPE) {
+        try {
+          types[MIME_TYPES2.excalidrawClipboard] = await (await item.getType(type)).text();
+        } catch (error) {
+          console.warn(
+            `Cannot retrieve ${type} from clipboardItem: ${error.message}`
+          );
+        }
+        continue;
+      }
       if (!isMemberOf(ALLOWED_PASTE_MIME_TYPES, type)) {
         continue;
       }
       try {
-        if (type === MIME_TYPES2.text || type === MIME_TYPES2.html) {
+        if (type === MIME_TYPES2.text || type === MIME_TYPES2.html || type === MIME_TYPES2.excalidrawClipboard) {
           types[type] = await (await item.getType(type)).text();
         } else if (isSupportedImageFileType(type)) {
           const imageBlob = await item.getType(type);
@@ -10764,10 +10808,10 @@ var parseDataTransferEvent = async (event) => {
   });
 };
 var parseClipboard = async (dataList, isPlainPaste = false) => {
-  const parsedEventData = await parseClipboardEventTextData(
-    dataList,
-    isPlainPaste
+  const excalidrawClipboardData = dataList.getData(
+    MIME_TYPES2.excalidrawClipboard
   );
+  const parsedEventData = excalidrawClipboardData ? { type: "text", value: excalidrawClipboardData } : await parseClipboardEventTextData(dataList, isPlainPaste);
   if (parsedEventData.type === "mixedContent") {
     return {
       mixedContent: parsedEventData.value
@@ -10970,7 +11014,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-7IWBMQLB.js").then(
+        (blob2) => import("./data/image-AIHWJUYD.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13125,11 +13169,14 @@ var actionToggleGridMode = register({
 });
 
 // actions/actionSmartZoom.tsx
+import clsx23 from "clsx";
 import { KEYS as KEYS27 } from "@excalidraw/common";
 import { CaptureUpdateAction as CaptureUpdateAction22 } from "@excalidraw/element/store";
 import { getElementBounds } from "@excalidraw/element";
 import { isImageElement } from "@excalidraw/element/typeChecks";
 import { jsx as jsx53 } from "react/jsx-runtime";
+var SMART_ZOOM_KEY_HINT = "Press <kbd>F</kbd> quickly to smart zoom the canvas, or hold and click on an item to smart zoom to it";
+var smartZoomKeyHeldAtom = atom(false);
 var getNextSmartZoomImage = (elements, elementsMap, currentImageId, direction) => {
   const images = elements.filter(isImageElement).sort((imageA, imageB) => {
     const [leftA, topA] = getElementBounds(imageA, elementsMap);
@@ -13143,6 +13190,25 @@ var getNextSmartZoomImage = (elements, elementsMap, currentImageId, direction) =
   const nextIndex = direction === "next" ? (currentIndex + 1) % images.length : (currentIndex < 0 ? images.length - 1 : currentIndex - 1 + images.length) % images.length;
   return images[nextIndex];
 };
+var SmartZoomButton = ({ data, updateData }) => {
+  const smartZoomKeyHeld = useAtomValue(smartZoomKeyHeldAtom);
+  return /* @__PURE__ */ jsx53(
+    IconButton,
+    {
+      type: "button",
+      icon: arrowsToEyeIcon,
+      "aria-label": t("labels.smartZoom"),
+      title: `${t("labels.smartZoom")} - ${KEYS27.F.toLocaleUpperCase()}`,
+      onClick: () => updateData(null),
+      size: data?.size || "medium",
+      "data-testid": "button-smart-zoom",
+      keyBindingLabel: KEYS27.F.toLocaleUpperCase(),
+      className: clsx23({
+        "smart-zoom-button--key-held": smartZoomKeyHeld
+      })
+    }
+  );
+};
 var actionSmartZoom = register({
   name: "smartZoom",
   label: "toolBar.smartZoom",
@@ -13166,20 +13232,7 @@ var actionSmartZoom = register({
       captureUpdate: CaptureUpdateAction22.NEVER
     };
   },
-  keyTest: (event) => !event[KEYS27.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS27.F,
-  PanelComponent: ({ data, updateData }) => /* @__PURE__ */ jsx53(
-    IconButton,
-    {
-      type: "button",
-      icon: arrowsToEyeIcon,
-      "aria-label": t("labels.smartZoom"),
-      title: `${t("labels.smartZoom")} - ${KEYS27.F.toLocaleUpperCase()}`,
-      onClick: () => updateData(null),
-      size: data?.size || "medium",
-      "data-testid": "button-smart-zoom",
-      keyBindingLabel: KEYS27.F.toLocaleUpperCase()
-    }
-  )
+  PanelComponent: SmartZoomButton
 });
 
 // actions/actionToggleObjectsSnapMode.tsx
@@ -13560,7 +13613,7 @@ import { CaptureUpdateAction as CaptureUpdateAction28 } from "@excalidraw/elemen
 
 // components/hyperlink/Hyperlink.tsx
 import { pointFrom as pointFrom3 } from "@excalidraw/math";
-import clsx23 from "clsx";
+import clsx24 from "clsx";
 import {
   useCallback as useCallback6,
   useEffect as useEffect20,
@@ -13734,7 +13787,7 @@ var Hyperlink = ({
         isEditing ? /* @__PURE__ */ jsx54(
           "input",
           {
-            className: clsx23("excalidraw-hyperlinkContainer-input"),
+            className: clsx24("excalidraw-hyperlinkContainer-input"),
             placeholder: t("labels.link.hint"),
             ref: inputRef,
             value: inputVal,
@@ -16971,7 +17024,7 @@ var actionTextAutoResize = register({
 
 // actions/actionToggleViewMode.tsx
 import { CODES as CODES10, KEYS as KEYS37 } from "@excalidraw/common";
-import clsx24 from "clsx";
+import clsx25 from "clsx";
 import { CaptureUpdateAction as CaptureUpdateAction37 } from "@excalidraw/element";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var actionToggleViewMode = register({
@@ -17014,7 +17067,7 @@ var actionToggleViewMode = register({
         onClick: () => updateData(null),
         size: data?.size || "medium",
         "data-testid": "button-view-mode",
-        className: clsx24({
+        className: clsx25({
           enabled: appState.viewModeEnabled
         })
       }
@@ -25349,7 +25402,7 @@ var BraveMeasureTextError = () => {
 var BraveMeasureTextError_default = BraveMeasureTextError;
 
 // components/ContextMenu.tsx
-import clsx26 from "clsx";
+import clsx27 from "clsx";
 import React20 from "react";
 
 // actions/shortcuts.ts
@@ -25416,7 +25469,7 @@ import { useLayoutEffect as useLayoutEffect4, useRef as useRef16, useEffect as u
 import { unstable_batchedUpdates as unstable_batchedUpdates2 } from "react-dom";
 import { KEYS as KEYS41, queryFocusableElements } from "@excalidraw/common";
 import { clamp as clamp10 } from "@excalidraw/math";
-import clsx25 from "clsx";
+import clsx26 from "clsx";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var POPOVER_CONTAINER_GAP = 10;
 var Popover7 = ({
@@ -25515,7 +25568,7 @@ var Popover7 = ({
       return () => document.removeEventListener("pointerdown", handler, false);
     }
   }, [onCloseRequest]);
-  return /* @__PURE__ */ jsx63("div", { className: clsx25("popover", className), ref: popoverRef, tabIndex: -1, children });
+  return /* @__PURE__ */ jsx63("div", { className: clsx26("popover", className), ref: popoverRef, tabIndex: -1, children });
 };
 
 // components/ContextMenu.tsx
@@ -25618,7 +25671,7 @@ var ContextMenu2 = React20.memo(
                     "button",
                     {
                       type: "button",
-                      className: clsx26("context-menu-item", {
+                      className: clsx27("context-menu-item", {
                         dangerous: actionName === "deleteSelectedElements",
                         checkmark: item.checked?.(appState)
                       }),
@@ -25641,7 +25694,7 @@ var ContextMenu2 = React20.memo(
 
 // components/ViewportStatusFrame/ViewportStatusFrame.tsx
 import { useId } from "react";
-import clsx27 from "clsx";
+import clsx28 from "clsx";
 import { Fragment as Fragment8, jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
 var ViewportStatusBorder = ({
   border,
@@ -25665,7 +25718,7 @@ var ViewportStatusBadge = ({
   return /* @__PURE__ */ jsxs33(
     "div",
     {
-      className: clsx27("viewport-status-frame__badge", {
+      className: clsx28("viewport-status-frame__badge", {
         "viewport-status-frame__badge--clickable": label.onClick
       }),
       role: "status",
@@ -25707,7 +25760,7 @@ var ViewportStatusBadge = ({
 };
 
 // components/LayerUI.tsx
-import clsx59 from "clsx";
+import clsx60 from "clsx";
 import React38 from "react";
 import {
   CLASSES as CLASSES9,
@@ -25743,7 +25796,7 @@ var useInitializeTunnels = () => {
 };
 
 // components/Actions.tsx
-import clsx29 from "clsx";
+import clsx30 from "clsx";
 import { useRef as useRef17 } from "react";
 import { Popover as Popover8 } from "radix-ui";
 import { CLASSES as CLASSES4 } from "@excalidraw/common";
@@ -25751,14 +25804,14 @@ import { isArrowElement as isArrowElement11 } from "@excalidraw/element";
 
 // components/Stack.tsx
 import { forwardRef as forwardRef2 } from "react";
-import clsx28 from "clsx";
+import clsx29 from "clsx";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var RowStack = forwardRef2(
   ({ children, gap, align, justifyContent, className, style }, ref) => {
     return /* @__PURE__ */ jsx66(
       "div",
       {
-        className: clsx28("Stack Stack_horizontal", className),
+        className: clsx29("Stack Stack_horizontal", className),
         style: {
           "--gap": gap,
           alignItems: align,
@@ -25776,7 +25829,7 @@ var ColStack = forwardRef2(
     return /* @__PURE__ */ jsx66(
       "div",
       {
-        className: clsx28("Stack Stack_vertical", className),
+        className: clsx29("Stack Stack_vertical", className),
         style: {
           "--gap": gap,
           justifyItems: align,
@@ -25879,7 +25932,7 @@ var getShapeActionPredicates = (appState, targetElements, elementsMap, app) => {
 
 // components/Actions.tsx
 import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
-var PROPERTIES_CLASSES = clsx29([
+var PROPERTIES_CLASSES = clsx30([
   CLASSES4.SHAPE_ACTIONS_THEME_SCOPE,
   "properties-content"
 ]);
@@ -26032,7 +26085,7 @@ var CombinedShapeProperties = ({
           "button",
           {
             type: "button",
-            className: clsx29("compact-action-button properties-trigger", {
+            className: clsx30("compact-action-button properties-trigger", {
               active: isOpen
             }),
             title: t("labels.stroke"),
@@ -26102,7 +26155,7 @@ var CombinedArrowProperties = ({
           "button",
           {
             type: "button",
-            className: clsx29("compact-action-button properties-trigger", {
+            className: clsx30("compact-action-button properties-trigger", {
               active: isOpen
             }),
             title: t("labels.arrowtypes"),
@@ -26182,7 +26235,7 @@ var CombinedTextProperties = ({
           "button",
           {
             type: "button",
-            className: clsx29("compact-action-button properties-trigger", {
+            className: clsx30("compact-action-button properties-trigger", {
               active: isOpen
             }),
             title: t("labels.textAlign"),
@@ -26253,7 +26306,7 @@ var CombinedExtraActions = ({
           "button",
           {
             type: "button",
-            className: clsx29("compact-action-button properties-trigger", {
+            className: clsx30("compact-action-button properties-trigger", {
               active: isOpen
             }),
             title: t("labels.actions"),
@@ -26333,7 +26386,7 @@ var CompactShapeActions = ({
   );
   const { container } = useExcalidrawContainer();
   return /* @__PURE__ */ jsxs34("div", { className: "compact-shape-actions", children: [
-    predicates.strokeColor && /* @__PURE__ */ jsx67("div", { className: clsx29("compact-action-item"), children: renderAction("changeStrokeColor") }),
+    predicates.strokeColor && /* @__PURE__ */ jsx67("div", { className: clsx30("compact-action-item"), children: renderAction("changeStrokeColor") }),
     predicates.backgroundColor && /* @__PURE__ */ jsx67("div", { className: "compact-action-item", children: renderAction(
       appState.activeTool.type === "bucketfill" ? "changeBucketFillBackgroundColor" : "changeBackgroundColor"
     ) }),
@@ -26440,7 +26493,7 @@ var MobileShapeActions = ({
               flex: 1
             },
             children: [
-              predicates.strokeColor && /* @__PURE__ */ jsx67("div", { className: clsx29("compact-action-item"), children: renderAction("changeStrokeColor") }),
+              predicates.strokeColor && /* @__PURE__ */ jsx67("div", { className: clsx30("compact-action-item"), children: renderAction("changeStrokeColor") }),
               predicates.backgroundColor && /* @__PURE__ */ jsx67("div", { className: "compact-action-item", children: renderAction(
                 appState.activeTool.type === "bucketfill" ? "changeBucketFillBackgroundColor" : "changeBackgroundColor"
               ) }),
@@ -26544,7 +26597,7 @@ var ExitZenModeButton = ({
   "button",
   {
     type: "button",
-    className: clsx29("disable-zen-mode", {
+    className: clsx30("disable-zen-mode", {
       "disable-zen-mode--visible": showExitZenModeBtn
     }),
     children: t("buttons.exitZenMode")
@@ -26552,7 +26605,7 @@ var ExitZenModeButton = ({
 );
 
 // components/LoadingMessage.tsx
-import clsx30 from "clsx";
+import clsx31 from "clsx";
 import { useState as useState17, useEffect as useEffect24 } from "react";
 import { THEME as THEME23 } from "@excalidraw/common";
 import { jsx as jsx68, jsxs as jsxs35 } from "react/jsx-runtime";
@@ -26576,7 +26629,7 @@ var LoadingMessage = ({
   return /* @__PURE__ */ jsxs35(
     "div",
     {
-      className: clsx30("LoadingMessage", {
+      className: clsx31("LoadingMessage", {
         "LoadingMessage--dark": theme === THEME23.DARK
       }),
       children: [
@@ -26589,7 +26642,7 @@ var LoadingMessage = ({
 
 // components/MobileToolbar.tsx
 import { useState as useState19, useEffect as useEffect26 } from "react";
-import clsx34 from "clsx";
+import clsx35 from "clsx";
 import { KEYS as KEYS43, capitalizeString as capitalizeString3 } from "@excalidraw/common";
 
 // components/dropdownMenu/DropdownMenu.tsx
@@ -26598,7 +26651,7 @@ import { DropdownMenu as DropdownMenuPrimitive8 } from "radix-ui";
 import { CLASSES as CLASSES6 } from "@excalidraw/common";
 
 // components/dropdownMenu/DropdownMenuContent.tsx
-import clsx31 from "clsx";
+import clsx32 from "clsx";
 import { useCallback as useCallback7, useEffect as useEffect25, useRef as useRef18 } from "react";
 import { CLASSES as CLASSES5, EVENT as EVENT6, KEYS as KEYS42 } from "@excalidraw/common";
 import { DropdownMenu as DropdownMenuPrimitive2 } from "radix-ui";
@@ -26647,7 +26700,7 @@ var MenuContent = ({
       document.removeEventListener(EVENT6.KEYDOWN, onKeyDown, option);
     };
   }, [callbacksRef, open]);
-  const classNames = clsx31(`dropdown-menu ${className}`, {
+  const classNames = clsx32(`dropdown-menu ${className}`, {
     "dropdown-menu--mobile": editorInterface.formFactor === "phone"
   }).trim();
   return /* @__PURE__ */ jsx69(DropdownMenuContentPropsContext.Provider, { value: { onSelect }, children: /* @__PURE__ */ jsx69(
@@ -26748,7 +26801,7 @@ MenuSeparator.displayName = "DropdownMenuSeparator";
 import { DropdownMenu as DropdownMenuPrimitive6 } from "radix-ui";
 
 // components/dropdownMenu/DropdownMenuSubContent.tsx
-import clsx32 from "clsx";
+import clsx33 from "clsx";
 import { DropdownMenu as DropdownMenuPrimitive4 } from "radix-ui";
 import { useCallback as useCallback8, useState as useState18 } from "react";
 import { jsx as jsx73 } from "react/jsx-runtime";
@@ -26759,7 +26812,7 @@ var DropdownMenuSubContent = ({
   className
 }) => {
   const editorInterface = useEditorInterface();
-  const classNames = clsx32(`dropdown-menu dropdown-submenu ${className}`, {
+  const classNames = clsx33(`dropdown-menu dropdown-submenu ${className}`, {
     "dropdown-menu--mobile": editorInterface.formFactor === "phone"
   }).trim();
   const callbacksRef = useCallback8((node) => {
@@ -26865,7 +26918,7 @@ DropdownMenuSub.displayName = "DropdownMenuSub";
 var DropdownMenuSub_default = DropdownMenuSub;
 
 // components/dropdownMenu/DropdownMenuTrigger.tsx
-import clsx33 from "clsx";
+import clsx34 from "clsx";
 import { DropdownMenu as DropdownMenuPrimitive7 } from "radix-ui";
 import { jsx as jsx75 } from "react/jsx-runtime";
 var MenuTrigger = ({
@@ -26876,7 +26929,7 @@ var MenuTrigger = ({
   ...rest
 }) => {
   const editorInterface = useEditorInterface();
-  const classNames = clsx33(
+  const classNames = clsx34(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
@@ -27111,7 +27164,7 @@ var MobileToolbar = ({
           /* @__PURE__ */ jsx78(
             DropdownMenu_default.Trigger,
             {
-              className: clsx34(
+              className: clsx35(
                 "App-toolbar__extra-tools-trigger App-toolbar__extra-tools-trigger--mobile",
                 {
                   "App-toolbar__extra-tools-trigger--selected": extraToolSelected || isOtherShapesMenuOpen
@@ -27275,7 +27328,7 @@ var MobileToolbar = ({
 };
 
 // components/FixedSideContainer.tsx
-import clsx35 from "clsx";
+import clsx36 from "clsx";
 import { jsx as jsx79 } from "react/jsx-runtime";
 var FixedSideContainer = ({
   children,
@@ -27284,7 +27337,7 @@ var FixedSideContainer = ({
 }) => /* @__PURE__ */ jsx79(
   "div",
   {
-    className: clsx35(
+    className: clsx36(
       "FixedSideContainer",
       `FixedSideContainer_side_${side}`,
       className
@@ -27294,7 +27347,7 @@ var FixedSideContainer = ({
 );
 
 // components/PenModeButton.tsx
-import clsx36 from "clsx";
+import clsx37 from "clsx";
 import { jsx as jsx80 } from "react/jsx-runtime";
 var PenModeButton = (props) => {
   if (!props.penDetected) {
@@ -27303,7 +27356,7 @@ var PenModeButton = (props) => {
   return /* @__PURE__ */ jsx80(
     IconButton,
     {
-      className: clsx36("ToolIcon__penMode", { "is-mobile": props.isMobile }),
+      className: clsx37("ToolIcon__penMode", { "is-mobile": props.isMobile }),
       type: "toggle",
       icon: PenModeIcon,
       checked: props.checked,
@@ -27459,7 +27512,7 @@ import React27, { useLayoutEffect as useLayoutEffect5, useRef as useRef20, useSt
 import { newTextElement as newTextElement4 } from "@excalidraw/element";
 
 // components/Dialog.tsx
-import clsx38 from "clsx";
+import clsx39 from "clsx";
 import { useEffect as useEffect27, useState as useState21 } from "react";
 import { KEYS as KEYS45, queryFocusableElements as queryFocusableElements2 } from "@excalidraw/common";
 
@@ -27472,7 +27525,7 @@ var useCallbackRefState = () => {
 };
 
 // components/Modal.tsx
-import clsx37 from "clsx";
+import clsx38 from "clsx";
 import { useRef as useRef19 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { KEYS as KEYS44 } from "@excalidraw/common";
@@ -27480,7 +27533,7 @@ import { jsx as jsx82, jsxs as jsxs41 } from "react/jsx-runtime";
 var Modal = (props) => {
   const { closeOnClickOutside = true } = props;
   const modalRoot = useCreatePortalContainer({
-    className: clsx37(
+    className: clsx38(
       "excalidraw-modal-container",
       props.portalContainerClassName
     )
@@ -27503,7 +27556,7 @@ var Modal = (props) => {
     /* @__PURE__ */ jsxs41(
       "div",
       {
-        className: clsx37("Modal", props.className, {
+        className: clsx38("Modal", props.className, {
           "animations-disabled": animationsDisabledRef.current
         }),
         role: "dialog",
@@ -27593,7 +27646,7 @@ var Dialog = (props) => {
   return /* @__PURE__ */ jsx83(
     Modal,
     {
-      className: clsx38("Dialog", props.className, {
+      className: clsx39("Dialog", props.className, {
         "Dialog--fullscreen": isFullscreen
       }),
       labelledBy: "dialog-title",
@@ -27853,7 +27906,7 @@ var Section = ({ heading, children, ...props }) => {
 
 // components/UserList.tsx
 import { Popover as Popover9 } from "radix-ui";
-import clsx39 from "clsx";
+import clsx40 from "clsx";
 import React28, { useLayoutEffect as useLayoutEffect6 } from "react";
 import { supportsResizeObserver, isShallowEqual as isShallowEqual5 } from "@excalidraw/common";
 import { Fragment as Fragment13, jsx as jsx86, jsxs as jsxs45 } from "react/jsx-runtime";
@@ -28033,7 +28086,7 @@ var UserList = React28.memo(
         )
       ] }, collaborator.socketId);
     });
-    return mobile ? /* @__PURE__ */ jsxs45("div", { className: clsx39("UserList UserList_mobile", className), children: [
+    return mobile ? /* @__PURE__ */ jsxs45("div", { className: clsx40("UserList UserList_mobile", className), children: [
       /* @__PURE__ */ jsx86("div", { className: "UserList_mobile__avatars", children: collaboratorsArray.map(
         (collaborator) => renderCollaborator({
           actionManager,
@@ -28050,7 +28103,7 @@ var UserList = React28.memo(
     ] }) : /* @__PURE__ */ jsx86("div", { className: "UserList__wrapper", ref: userListWrapper, children: /* @__PURE__ */ jsx86(
       "div",
       {
-        className: clsx39("UserList", className),
+        className: clsx40("UserList", className),
         style: {
           [`--max-avatars`]: firstNCollaborators.length + (currentUser ? PILL_EXTRA_WIDTH / AVATAR_SLOT_WIDTH : 0)
         },
@@ -28080,7 +28133,7 @@ var UserList = React28.memo(
 );
 
 // components/footer/Footer.tsx
-import clsx40 from "clsx";
+import clsx41 from "clsx";
 
 // components/HelpButton.tsx
 import { jsx as jsx87 } from "react/jsx-runtime";
@@ -28116,7 +28169,7 @@ var Footer = ({
         (defaultUIEnabled || zoomUIEnabled && app.isNavigationEnabled()) && /* @__PURE__ */ jsx88(
           "div",
           {
-            className: clsx40(
+            className: clsx41(
               "layer-ui__wrapper__footer-left zen-mode-transition",
               {
                 "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
@@ -28127,16 +28180,16 @@ var Footer = ({
                 Tooltip,
                 {
                   label: appState.viewModeEnabled ? "Edit mode" : t("labels.viewMode"),
-                  children: /* @__PURE__ */ jsx88("div", { className: clsx40("view-mode-button"), children: actionManager.renderAction("viewMode") })
+                  children: /* @__PURE__ */ jsx88("div", { className: clsx41("view-mode-button"), children: actionManager.renderAction("viewMode") })
                 }
               ),
-              /* @__PURE__ */ jsx88(Tooltip, { label: t("buttons.smartZoom"), children: /* @__PURE__ */ jsx88("div", { className: clsx40("smart-zoom-button"), children: actionManager.renderAction("smartZoom") }) }),
+              /* @__PURE__ */ jsx88(Tooltip, { label: t("buttons.smartZoom"), children: /* @__PURE__ */ jsx88("div", { className: clsx41("smart-zoom-button"), children: actionManager.renderAction("smartZoom") }) }),
               zoomUIEnabled && app.isNavigationEnabled() && /* @__PURE__ */ jsx88(ZoomActions, { renderAction: actionManager.renderAction }),
               defaultUIEnabled && !appState.viewModeEnabled && /* @__PURE__ */ jsx88(
                 UndoRedoActions,
                 {
                   renderAction: actionManager.renderAction,
-                  className: clsx40("zen-mode-transition", {
+                  className: clsx41("zen-mode-transition", {
                     "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
                   })
                 }
@@ -28148,7 +28201,7 @@ var Footer = ({
         (defaultUIEnabled || renderWelcomeScreen) && /* @__PURE__ */ jsx88(
           "div",
           {
-            className: clsx40(
+            className: clsx41(
               "layer-ui__wrapper__footer-right zen-mode-transition",
               {
                 "transition-right": appState.zenModeEnabled
@@ -28245,7 +28298,7 @@ __export(DefaultItems_exports, {
   Socials: () => Socials,
   ToggleTheme: () => ToggleTheme
 });
-import clsx42 from "clsx";
+import clsx43 from "clsx";
 import { THEME as THEME24 } from "@excalidraw/common";
 
 // components/OverwriteConfirm/OverwriteConfirmState.ts
@@ -28273,7 +28326,7 @@ async function openConfirmModal({
 }
 
 // components/RadioGroup.tsx
-import clsx41 from "clsx";
+import clsx42 from "clsx";
 import { jsx as jsx90, jsxs as jsxs47 } from "react/jsx-runtime";
 var RadioGroup = function({
   onChange,
@@ -28284,7 +28337,7 @@ var RadioGroup = function({
   return /* @__PURE__ */ jsx90("div", { className: "RadioGroup", children: choices.map((choice) => /* @__PURE__ */ jsxs47(
     "div",
     {
-      className: clsx41("RadioGroup__choice", {
+      className: clsx42("RadioGroup__choice", {
         active: choice.value === value
       }),
       title: choice.ariaLabel,
@@ -28593,7 +28646,7 @@ var LiveCollaborationTrigger = ({
     {
       "data-testid": "collab-button",
       icon: usersIcon,
-      className: clsx42({
+      className: clsx43({
         "active-collab": isCollaborating
       }),
       onSelect,
@@ -28858,7 +28911,7 @@ var MainMenu = Object.assign(
 var MainMenu_default = MainMenu;
 
 // components/FilledButton.tsx
-import clsx43 from "clsx";
+import clsx44 from "clsx";
 import { forwardRef as forwardRef3, useState as useState23 } from "react";
 import { isPromiseLike as isPromiseLike4 } from "@excalidraw/common";
 import { jsx as jsx94, jsxs as jsxs51 } from "react/jsx-runtime";
@@ -28902,7 +28955,7 @@ var FilledButton = forwardRef3(
     return /* @__PURE__ */ jsx94(
       "button",
       {
-        className: clsx43(
+        className: clsx44(
           "ExcButton",
           `ExcButton--color-${color}`,
           `ExcButton--variant-${variant}`,
@@ -29047,7 +29100,7 @@ var OverwriteConfirmDialog = Object.assign(
 
 // components/Stats/index.tsx
 import { round as round4 } from "@excalidraw/math";
-import clsx45 from "clsx";
+import clsx46 from "clsx";
 import throttle2 from "lodash.throttle";
 import { useEffect as useEffect29, useMemo as useMemo9, useState as useState25, memo as memo2 } from "react";
 import { STATS_PANELS } from "@excalidraw/common";
@@ -29064,7 +29117,7 @@ import { isArrowElement as isArrowElement12, isElbowArrow as isElbowArrow9 } fro
 import { updateBindings as updateBindings3 } from "@excalidraw/element";
 
 // components/Stats/DragInput.tsx
-import clsx44 from "clsx";
+import clsx45 from "clsx";
 import { useEffect as useEffect28, useRef as useRef22, useState as useState24 } from "react";
 import { EVENT as EVENT7, KEYS as KEYS46, cloneJSON as cloneJSON3 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
@@ -29323,7 +29376,7 @@ var StatsDragInput = ({
   return /* @__PURE__ */ jsxs54(
     "div",
     {
-      className: clsx44("drag-input-container", !editable && "disabled"),
+      className: clsx45("drag-input-container", !editable && "disabled"),
       "data-testid": label,
       children: [
         /* @__PURE__ */ jsx97(
@@ -30993,7 +31046,7 @@ var StatsRow = ({
 }) => /* @__PURE__ */ jsx107(
   "div",
   {
-    className: clsx45("exc-stats__row", { "exc-stats__row--heading": heading }),
+    className: clsx46("exc-stats__row", { "exc-stats__row--heading": heading }),
     style: {
       gridTemplateColumns: `repeat(${columns}, 1fr)`,
       ...style
@@ -31295,7 +31348,7 @@ import {
 } from "@excalidraw/element";
 
 // components/DialogActionButton.tsx
-import clsx46 from "clsx";
+import clsx47 from "clsx";
 import { jsx as jsx108, jsxs as jsxs56 } from "react/jsx-runtime";
 var DialogActionButton = ({
   label,
@@ -31311,7 +31364,7 @@ var DialogActionButton = ({
   return /* @__PURE__ */ jsxs56(
     "button",
     {
-      className: clsx46("Dialog__action-button", cs, className),
+      className: clsx47("Dialog__action-button", cs, className),
       type,
       "aria-label": label,
       onClick,
@@ -31327,7 +31380,7 @@ var DialogActionButton = ({
 var DialogActionButton_default = DialogActionButton;
 
 // components/TextField.tsx
-import clsx48 from "clsx";
+import clsx49 from "clsx";
 import {
   forwardRef as forwardRef4,
   useRef as useRef23,
@@ -31337,7 +31390,7 @@ import {
 } from "react";
 
 // components/Button.tsx
-import clsx47 from "clsx";
+import clsx48 from "clsx";
 import { composeEventHandlers as composeEventHandlers3 } from "@excalidraw/common";
 import { jsx as jsx109 } from "react/jsx-runtime";
 var Button = ({
@@ -31355,7 +31408,7 @@ var Button = ({
         onSelect();
       }),
       type,
-      className: clsx47("excalidraw-button", className, { selected }),
+      className: clsx48("excalidraw-button", className, { selected }),
       ...rest,
       children
     }
@@ -31391,7 +31444,7 @@ var TextField = forwardRef4(
     return /* @__PURE__ */ jsxs57(
       "div",
       {
-        className: clsx48("ExcTextField", className, {
+        className: clsx49("ExcTextField", className, {
           "ExcTextField--fullWidth": fullWidth,
           "ExcTextField--hasIcon": !!icon
         }),
@@ -31404,14 +31457,14 @@ var TextField = forwardRef4(
           /* @__PURE__ */ jsxs57(
             "div",
             {
-              className: clsx48("ExcTextField__input", {
+              className: clsx49("ExcTextField__input", {
                 "ExcTextField__input--readonly": readonly
               }),
               children: [
                 /* @__PURE__ */ jsx110(
                   "input",
                   {
-                    className: clsx48({
+                    className: clsx49({
                       "is-redacted": "value" in rest && rest.value && isRedacted && !isTemporarilyUnredacted
                     }),
                     readOnly: readonly,
@@ -31600,7 +31653,7 @@ var ErrorDialog = ({
 };
 
 // components/GifPlaybackControls.tsx
-import clsx49 from "clsx";
+import clsx50 from "clsx";
 import React32 from "react";
 import { MIME_TYPES as MIME_TYPES10, sceneCoordsToViewportCoords as sceneCoordsToViewportCoords4 } from "@excalidraw/common";
 import {
@@ -31948,7 +32001,7 @@ var GifPlaybackControls = ({
                   "button",
                   {
                     type: "button",
-                    className: clsx49("gif-speed-picker__speed", {
+                    className: clsx50("gif-speed-picker__speed", {
                       "gif-speed-picker__speed--selected": speed === playback.speed
                     }),
                     onClick: () => setSpeed(speed),
@@ -32045,7 +32098,7 @@ var GifPlaybackControls = ({
           liveAppState.openPopup === "gifFrameGallery" && /* @__PURE__ */ jsx113(
             "div",
             {
-              className: clsx49("gif-frame-gallery", {
+              className: clsx50("gif-frame-gallery", {
                 "gif-frame-gallery--dragging": isGifGalleryDragging
               }),
               style: {
@@ -32095,7 +32148,7 @@ var GifPlaybackControls = ({
                       "button",
                       {
                         type: "button",
-                        className: clsx49("gif-frame-gallery__frame", {
+                        className: clsx50("gif-frame-gallery__frame", {
                           "gif-frame-gallery__frame--selected": index === frameIndex
                         }),
                         style: {
@@ -32136,7 +32189,7 @@ var GifPlaybackControls = ({
 
 // components/HelpDialog.tsx
 import React33, { useMemo as useMemo10 } from "react";
-import clsx50 from "clsx";
+import clsx51 from "clsx";
 import { isDarwin as isDarwin4, isFirefox as isFirefox4, isWindows } from "@excalidraw/common";
 import { KEYS as KEYS49 } from "@excalidraw/common";
 import { SHAPES as SHAPES3 } from "@excalidraw/element/shapes";
@@ -32388,14 +32441,14 @@ var HelpDialog = ({ onClose }) => {
     () => isShowAll ? /* @__PURE__ */ jsx115(
       "button",
       {
-        className: clsx50("toggle-button", {}),
+        className: clsx51("toggle-button", {}),
         onClick: () => setIsShowAll(false),
         children: t("helpDialog.myoc.showingAll")
       }
     ) : /* @__PURE__ */ jsx115(
       "button",
       {
-        className: clsx50("toggle-button", {}),
+        className: clsx51("toggle-button", {}),
         onClick: () => setIsShowAll(true),
         children: t("helpDialog.myoc.showingBasic")
       }
@@ -32909,6 +32962,204 @@ var HelpDialog = ({ onClose }) => {
   ) });
 };
 
+// components/HintViewer.tsx
+import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB2, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR2 } from "@excalidraw/common";
+import {
+  isArrowElement as isArrowElement14,
+  isFlowchartNodeElement as isFlowchartNodeElement3,
+  isImageElement as isImageElement9,
+  isLinearElement as isLinearElement10,
+  isLineElement as isLineElement8,
+  isTextBindableContainer as isTextBindableContainer2,
+  isTextElement as isTextElement16
+} from "@excalidraw/element";
+import { isNodeInFlowchart } from "@excalidraw/element";
+import { jsx as jsx116 } from "react/jsx-runtime";
+var getTaggedShortcutKey = (key) => Array.isArray(key) ? `<kbd>${key.map(getShortcutKey).join(" + ")}</kbd>` : `<kbd>${getShortcutKey(key)}</kbd>`;
+var getHints = ({
+  appState,
+  isMobile,
+  editorInterface,
+  app
+}) => {
+  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
+  const multiMode = appState.multiElement !== null;
+  if (appState.openSidebar?.name === DEFAULT_SIDEBAR2.name && appState.openSidebar.tab === CANVAS_SEARCH_TAB2 && appState.searchMatches?.matches.length) {
+    return t("hints.dismissSearch", {
+      shortcut: getTaggedShortcutKey("Escape")
+    });
+  }
+  if (appState.openSidebar && !editorInterface.canFitSidebar) {
+    return null;
+  }
+  if (isEraserActive(appState)) {
+    return t("hints.eraserRevert", {
+      shortcut: getTaggedShortcutKey("Alt")
+    });
+  }
+  const selectedElements = app.scene.getSelectedElements(appState);
+  if (appState.selectedLinearElement?.isDragging && selectedElements[0]?.type === "arrow") {
+    return t("hints.arrowBindModifiers", {
+      shortcut_1: getTaggedShortcutKey("Ctrl"),
+      shortcut_2: getTaggedShortcutKey("Alt")
+    });
+  }
+  if (activeTool.type === "arrow" || activeTool.type === "line") {
+    if (multiMode) {
+      return t("hints.linearElementMulti", {
+        shortcut_1: getTaggedShortcutKey("Escape"),
+        shortcut_2: getTaggedShortcutKey("Enter")
+      });
+    }
+    if (activeTool.type === "arrow") {
+      return t("hints.arrowTool", {
+        shortcut: getTaggedShortcutKey("A")
+      });
+    }
+    return t("hints.linearElement");
+  }
+  if (activeTool.type === "freedraw") {
+    return t("hints.freeDraw");
+  }
+  if (activeTool.type === "text") {
+    return t("hints.text");
+  }
+  if (activeTool.type === "embeddable") {
+    return t("hints.embeddable");
+  }
+  if (activeTool.type === "autoshape") {
+    return t("hints.autoshape");
+  }
+  if (isResizing && lastPointerDownWith === "mouse" && selectedElements.length === 1) {
+    const targetElement = selectedElements[0];
+    if (isLinearElement10(targetElement) && targetElement.points.length === 2) {
+      return t("hints.lockAngle", {
+        shortcut: getTaggedShortcutKey("Shift")
+      });
+    }
+    return isImageElement9(targetElement) ? t("hints.resizeImage", {
+      shortcut_1: getTaggedShortcutKey("Shift"),
+      shortcut_2: getTaggedShortcutKey("Alt")
+    }) : t("hints.resize", {
+      shortcut_1: getTaggedShortcutKey("Shift"),
+      shortcut_2: getTaggedShortcutKey("Alt")
+    });
+  }
+  if (isRotating && lastPointerDownWith === "mouse") {
+    return t("hints.rotate", {
+      shortcut: getTaggedShortcutKey("Shift")
+    });
+  }
+  if (selectedElements.length === 1 && isTextElement16(selectedElements[0])) {
+    return t("hints.text_selected", {
+      shortcut: getTaggedShortcutKey("Enter")
+    });
+  }
+  if (appState.editingTextElement) {
+    return t("hints.text_editing", {
+      shortcut_1: getTaggedShortcutKey("Escape"),
+      shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "Enter"])
+    });
+  }
+  if (appState.croppingElementId) {
+    return t("hints.leaveCropEditor", {
+      shortcut_1: getTaggedShortcutKey("Enter"),
+      shortcut_2: getTaggedShortcutKey("Escape")
+    });
+  }
+  if (selectedElements.length === 1 && isImageElement9(selectedElements[0])) {
+    return t("hints.enterCropEditor", {
+      shortcut_1: getTaggedShortcutKey("double click"),
+      shortcut_2: getTaggedShortcutKey("Enter")
+    });
+  }
+  if (activeTool.type === "selection") {
+    if (appState.selectionElement && !selectedElements.length && !appState.editingTextElement && !appState.selectedLinearElement?.isEditing) {
+      return t("hints.deepBoxSelect", {
+        shortcut: getTaggedShortcutKey("CtrlOrCmd")
+      });
+    }
+    if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
+      return t("hints.disableSnapping", {
+        shortcut: getTaggedShortcutKey("CtrlOrCmd")
+      });
+    }
+    if (!selectedElements.length && !isMobile) {
+      return t("hints.canvasPanning", {
+        shortcut_1: getTaggedShortcutKey(t("keys.mmb")),
+        shortcut_2: getTaggedShortcutKey("Space")
+      });
+    }
+    if (selectedElements.length === 1) {
+      if (isLinearElement10(selectedElements[0])) {
+        if (isArrowElement14(selectedElements[0]) && appState.selectedLinearElement?.elementId === selectedElements[0].id && (appState.selectedLinearElement.hoverPointIndex === 0 || appState.selectedLinearElement.hoverPointIndex === selectedElements[0].points.length - 1)) {
+          return t("hints.toggleArrowhead");
+        }
+        if (appState.selectedLinearElement?.isEditing) {
+          return appState.selectedLinearElement.selectedPointsIndices ? t("hints.lineEditor_pointSelected", {
+            shortcut_1: getTaggedShortcutKey("Delete"),
+            shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "D"])
+          }) : t("hints.lineEditor_nothingSelected", {
+            shortcut_1: getTaggedShortcutKey("Shift"),
+            shortcut_2: getTaggedShortcutKey("Alt")
+          });
+        }
+        return isLineElement8(selectedElements[0]) ? t("hints.lineEditor_line_info", {
+          shortcut: getTaggedShortcutKey("Enter")
+        }) : t("hints.lineEditor_info", {
+          shortcut_1: getTaggedShortcutKey("CtrlOrCmd"),
+          shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "Enter"])
+        });
+      }
+      if (!appState.newElement && !appState.selectedElementsAreBeingDragged && isTextBindableContainer2(selectedElements[0])) {
+        const bindTextToElement = t("hints.bindTextToElement", {
+          shortcut: getTaggedShortcutKey("Enter")
+        });
+        const createFlowchart = t("hints.createFlowchart", {
+          shortcut: getTaggedShortcutKey(["CtrlOrCmd", "\u2191\u2193"])
+        });
+        if (isFlowchartNodeElement3(selectedElements[0])) {
+          if (isNodeInFlowchart(
+            selectedElements[0],
+            app.scene.getNonDeletedElementsMap()
+          )) {
+            return [bindTextToElement, createFlowchart];
+          }
+          return [bindTextToElement, createFlowchart];
+        }
+        return bindTextToElement;
+      }
+    }
+  }
+  return null;
+};
+var HintViewer = ({
+  appState,
+  isMobile,
+  editorInterface,
+  app
+}) => {
+  const smartZoomKeyHeld = useAtomValue(smartZoomKeyHeldAtom);
+  const hints = smartZoomKeyHeld ? SMART_ZOOM_KEY_HINT : appState.viewModeEnabled ? null : getHints({
+    appState,
+    isMobile,
+    editorInterface,
+    app
+  });
+  if (!hints) {
+    return null;
+  }
+  const hint = Array.isArray(hints) ? hints.map((hint2) => hint2.replace(/\. ?$/, "")).join(", ") : hints;
+  const hintJSX = hint.split(/(<kbd>[^<]+<\/kbd>)/g).map((part, index) => {
+    if (index % 2 === 1) {
+      const shortcutMatch = part[0] === "<" && part.match(/^<kbd>([^<]+)<\/kbd>$/);
+      return /* @__PURE__ */ jsx116("kbd", { children: shortcutMatch ? shortcutMatch[1] : part }, index);
+    }
+    return part;
+  });
+  return /* @__PURE__ */ jsx116("div", { className: "HintViewer", children: /* @__PURE__ */ jsx116("span", { children: hintJSX }) });
+};
+
 // components/ImageExportDialog.tsx
 import { useEffect as useEffect31, useRef as useRef25, useState as useState30 } from "react";
 import {
@@ -32943,11 +33194,11 @@ var useCopyStatus = () => {
 };
 
 // components/ImageExportDialog.tsx
-import { jsx as jsx116, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs62 } from "react/jsx-runtime";
 var ErrorCanvasPreview = () => {
   return /* @__PURE__ */ jsxs62("div", { children: [
-    /* @__PURE__ */ jsx116("h3", { children: t("canvasError.cannotShowPreview") }),
-    /* @__PURE__ */ jsx116("p", { children: /* @__PURE__ */ jsx116("span", { children: t("canvasError.canvasTooBig") }) }),
+    /* @__PURE__ */ jsx117("h3", { children: t("canvasError.cannotShowPreview") }),
+    /* @__PURE__ */ jsx117("p", { children: /* @__PURE__ */ jsx117("span", { children: t("canvasError.canvasTooBig") }) }),
     /* @__PURE__ */ jsxs62("em", { children: [
       "(",
       t("canvasError.canvasTooBigTip"),
@@ -33063,10 +33314,10 @@ var ImageExportModal = ({
     embedScene
   ]);
   return /* @__PURE__ */ jsxs62("div", { className: "ImageExportModal", children: [
-    /* @__PURE__ */ jsx116("h3", { children: t("imageExportDialog.header") }),
+    /* @__PURE__ */ jsx117("h3", { children: t("imageExportDialog.header") }),
     /* @__PURE__ */ jsxs62("div", { className: "ImageExportModal__preview", children: [
-      /* @__PURE__ */ jsx116("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && /* @__PURE__ */ jsx116(ErrorCanvasPreview, {}) }),
-      /* @__PURE__ */ jsx116("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && /* @__PURE__ */ jsx117(ErrorCanvasPreview, {}) }),
+      /* @__PURE__ */ jsx117("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && /* @__PURE__ */ jsx117(
         "input",
         {
           type: "text",
@@ -33085,13 +33336,13 @@ var ImageExportModal = ({
       ) })
     ] }),
     /* @__PURE__ */ jsxs62("div", { className: "ImageExportModal__settings", children: [
-      /* @__PURE__ */ jsx116("h3", { children: t("imageExportDialog.header") }),
-      hasSelection && /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117("h3", { children: t("imageExportDialog.header") }),
+      hasSelection && /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.onlySelected"),
           name: "exportOnlySelected",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             Switch,
             {
               name: "exportOnlySelected",
@@ -33103,12 +33354,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.withBackground"),
           name: "exportBackgroundSwitch",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             Switch,
             {
               name: "exportBackgroundSwitch",
@@ -33125,12 +33376,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.darkMode"),
           name: "exportDarkModeSwitch",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             Switch,
             {
               name: "exportDarkModeSwitch",
@@ -33146,13 +33397,13 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.embedScene"),
           tooltip: t("imageExportDialog.tooltip.embedScene"),
           name: "exportEmbedSwitch",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             Switch,
             {
               name: "exportEmbedSwitch",
@@ -33169,12 +33420,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.scale"),
           name: "exportScale",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             RadioGroup,
             {
               name: "exportScale",
@@ -33192,7 +33443,7 @@ var ImageExportModal = ({
         }
       ),
       /* @__PURE__ */ jsxs62("div", { className: "ImageExportModal__settings__buttons", children: [
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -33204,7 +33455,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToPng")
           }
         ),
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -33216,7 +33467,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToSvg")
           }
         ),
-        (probablySupportsClipboardBlob || isFirefox5) && /* @__PURE__ */ jsx116(
+        (probablySupportsClipboardBlob || isFirefox5) && /* @__PURE__ */ jsx117(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -33254,11 +33505,11 @@ var ExportSetting = ({
         className: "ImageExportModal__settings__setting__label",
         children: [
           label,
-          tooltip && /* @__PURE__ */ jsx116(Tooltip, { label: tooltip, long: true, children: helpIcon })
+          tooltip && /* @__PURE__ */ jsx117(Tooltip, { label: tooltip, long: true, children: helpIcon })
         ]
       }
     ),
-    /* @__PURE__ */ jsx116("div", { className: "ImageExportModal__settings__setting__content", children })
+    /* @__PURE__ */ jsx117("div", { className: "ImageExportModal__settings__setting__content", children })
   ] });
 };
 var ImageExportDialog = ({
@@ -33276,7 +33527,7 @@ var ImageExportDialog = ({
       elementsSnapshot: cloneJSON4(elements)
     };
   });
-  return /* @__PURE__ */ jsx116(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsx117(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx117(
     ImageExportModal,
     {
       elementsSnapshot,
@@ -33291,11 +33542,11 @@ var ImageExportDialog = ({
 };
 
 // components/DefaultSidebar.tsx
-import clsx55 from "clsx";
-import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB2, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR2 } from "@excalidraw/common";
+import clsx56 from "clsx";
+import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB3, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR3 } from "@excalidraw/common";
 
 // components/SearchMenu.tsx
-import clsx51 from "clsx";
+import clsx52 from "clsx";
 import debounce3 from "lodash.debounce";
 import { Fragment as Fragment21, memo as memo3, useEffect as useEffect32, useMemo as useMemo11, useRef as useRef26, useState as useState31 } from "react";
 import {
@@ -33317,9 +33568,9 @@ import {
   getFontString as getFontString15
 } from "@excalidraw/common";
 import { newTextElement as newTextElement5 } from "@excalidraw/element";
-import { isTextElement as isTextElement16, isFrameLikeElement as isFrameLikeElement16 } from "@excalidraw/element";
+import { isTextElement as isTextElement17, isFrameLikeElement as isFrameLikeElement16 } from "@excalidraw/element";
 import { getDefaultFrameName } from "@excalidraw/element/frame";
-import { Fragment as Fragment22, jsx as jsx117, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx118, jsxs as jsxs63 } from "react/jsx-runtime";
 var searchQueryAtom = atom("");
 var searchItemInFocusAtom = atom(null);
 var SEARCH_DEBOUNCE = 350;
@@ -33519,7 +33770,7 @@ var SearchMenu2 = () => {
   const matchCount = `${searchMatches.items.length} ${searchMatches.items.length === 1 ? t("search.singleResult") : t("search.multipleResults")}`;
   return /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search", children: [
     /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search-header", children: [
-      /* @__PURE__ */ jsx117(
+      /* @__PURE__ */ jsx118(
         TextField,
         {
           className: CLASSES7.SEARCH_MENU_INPUT_WRAPPER,
@@ -33555,7 +33806,7 @@ var SearchMenu2 = () => {
           selectOnRender: true
         }
       ),
-      /* @__PURE__ */ jsx117(
+      /* @__PURE__ */ jsx118(
         Button,
         {
           "data-testid": "sidebar-close",
@@ -33576,9 +33827,9 @@ var SearchMenu2 = () => {
           focusIndex + 1,
           " / ",
           matchCount
-        ] }) : /* @__PURE__ */ jsx117("div", { children: matchCount }),
+        ] }) : /* @__PURE__ */ jsx118("div", { children: matchCount }),
         /* @__PURE__ */ jsxs63("div", { className: "result-nav", children: [
-          /* @__PURE__ */ jsx117(
+          /* @__PURE__ */ jsx118(
             Button,
             {
               onSelect: () => {
@@ -33588,7 +33839,7 @@ var SearchMenu2 = () => {
               children: collapseDownIcon
             }
           ),
-          /* @__PURE__ */ jsx117(
+          /* @__PURE__ */ jsx118(
             Button,
             {
               onSelect: () => {
@@ -33600,9 +33851,9 @@ var SearchMenu2 = () => {
           )
         ] })
       ] }),
-      searchMatches.items.length === 0 && searchQuery && searchedQueryRef.current && /* @__PURE__ */ jsx117("div", { style: { margin: "1rem auto" }, children: t("search.noMatch") })
+      searchMatches.items.length === 0 && searchQuery && searchedQueryRef.current && /* @__PURE__ */ jsx118("div", { style: { margin: "1rem auto" }, children: t("search.noMatch") })
     ] }),
-    /* @__PURE__ */ jsx117(
+    /* @__PURE__ */ jsx118(
       MatchList,
       {
         matches: searchMatches,
@@ -33626,11 +33877,11 @@ var ListItem = (props) => {
     ),
     props.preview.moreAfter ? "..." : ""
   ];
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx118(
     "div",
     {
       tabIndex: -1,
-      className: clsx51("layer-ui__result-item", {
+      className: clsx52("layer-ui__result-item", {
         active: props.highlighted
       }),
       onClick: props.onClick,
@@ -33639,7 +33890,7 @@ var ListItem = (props) => {
           ref?.scrollIntoView({ behavior: "auto", block: "nearest" });
         }
       },
-      children: /* @__PURE__ */ jsx117("div", { className: "preview-text", children: preview.flatMap((text, idx) => /* @__PURE__ */ jsx117(Fragment21, { children: idx === 2 ? /* @__PURE__ */ jsx117("b", { children: text }) : text }, idx)) })
+      children: /* @__PURE__ */ jsx118("div", { className: "preview-text", children: preview.flatMap((text, idx) => /* @__PURE__ */ jsx118(Fragment21, { children: idx === 2 ? /* @__PURE__ */ jsx118("b", { children: text }) : text }, idx)) })
     }
   );
 };
@@ -33649,16 +33900,16 @@ var MatchListBase = (props) => {
     [props.matches]
   );
   const textMatches = useMemo11(
-    () => props.matches.items.filter((match) => isTextElement16(match.element)),
+    () => props.matches.items.filter((match) => isTextElement17(match.element)),
     [props.matches]
   );
   return /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search-results", children: [
     frameNameMatches.length > 0 && /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search-result-container", children: [
       /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search-result-title", children: [
-        /* @__PURE__ */ jsx117("div", { className: "title-icon", children: frameToolIcon }),
-        /* @__PURE__ */ jsx117("div", { children: t("search.frames") })
+        /* @__PURE__ */ jsx118("div", { className: "title-icon", children: frameToolIcon }),
+        /* @__PURE__ */ jsx118("div", { children: t("search.frames") })
       ] }),
-      frameNameMatches.map((searchMatch, index) => /* @__PURE__ */ jsx117(
+      frameNameMatches.map((searchMatch, index) => /* @__PURE__ */ jsx118(
         ListItem,
         {
           searchQuery: props.searchQuery,
@@ -33668,14 +33919,14 @@ var MatchListBase = (props) => {
         },
         searchMatch.element.id + searchMatch.index
       )),
-      textMatches.length > 0 && /* @__PURE__ */ jsx117("div", { className: "layer-ui__divider" })
+      textMatches.length > 0 && /* @__PURE__ */ jsx118("div", { className: "layer-ui__divider" })
     ] }),
     textMatches.length > 0 && /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search-result-container", children: [
       /* @__PURE__ */ jsxs63("div", { className: "layer-ui__search-result-title", children: [
-        /* @__PURE__ */ jsx117("div", { className: "title-icon", children: TextIcon }),
-        /* @__PURE__ */ jsx117("div", { children: t("search.texts") })
+        /* @__PURE__ */ jsx118("div", { className: "title-icon", children: TextIcon }),
+        /* @__PURE__ */ jsx118("div", { children: t("search.texts") })
       ] }),
-      textMatches.map((searchMatch, index) => /* @__PURE__ */ jsx117(
+      textMatches.map((searchMatch, index) => /* @__PURE__ */ jsx118(
         ListItem,
         {
           searchQuery: props.searchQuery,
@@ -33852,7 +34103,7 @@ var handleSearch = debounce3(
     }
     const elements = app.scene.getNonDeletedElements();
     const texts = elements.filter(
-      (el) => isTextElement16(el)
+      (el) => isTextElement17(el)
     );
     const frames2 = elements.filter(
       (el) => isFrameLikeElement16(el)
@@ -33914,7 +34165,7 @@ var handleSearch = debounce3(
 );
 
 // components/Sidebar/Sidebar.tsx
-import clsx54 from "clsx";
+import clsx55 from "clsx";
 import {
   useEffect as useEffect33,
   useLayoutEffect as useLayoutEffect9,
@@ -33933,7 +34184,7 @@ import {
 } from "@excalidraw/common";
 
 // components/Sidebar/SidebarHeader.tsx
-import clsx52 from "clsx";
+import clsx53 from "clsx";
 import { useContext as useContext3 } from "react";
 
 // components/Sidebar/common.ts
@@ -33941,7 +34192,7 @@ import React35 from "react";
 var SidebarPropsContext = React35.createContext({});
 
 // components/Sidebar/SidebarHeader.tsx
-import { jsx as jsx118, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs64 } from "react/jsx-runtime";
 var SidebarHeader = ({
   children,
   className
@@ -33952,12 +34203,12 @@ var SidebarHeader = ({
   return /* @__PURE__ */ jsxs64(
     "div",
     {
-      className: clsx52("sidebar__header", className),
+      className: clsx53("sidebar__header", className),
       "data-testid": "sidebar-header",
       children: [
         children,
         /* @__PURE__ */ jsxs64("div", { className: "sidebar__header__buttons", children: [
-          renderDockButton && /* @__PURE__ */ jsx118(Tooltip, { label: t("labels.sidebarLock"), children: /* @__PURE__ */ jsx118(
+          renderDockButton && /* @__PURE__ */ jsx119(Tooltip, { label: t("labels.sidebarLock"), children: /* @__PURE__ */ jsx119(
             Button,
             {
               onSelect: () => props.onDock?.(!props.docked),
@@ -33968,7 +34219,7 @@ var SidebarHeader = ({
               children: PinIcon
             }
           ) }),
-          /* @__PURE__ */ jsx118(
+          /* @__PURE__ */ jsx119(
             Button,
             {
               "data-testid": "sidebar-close",
@@ -33987,14 +34238,14 @@ SidebarHeader.displayName = "SidebarHeader";
 
 // components/Sidebar/SidebarTabTrigger.tsx
 import { Tabs as RadixTabs } from "radix-ui";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 var SidebarTabTrigger = ({
   children,
   tab,
   onSelect,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx119(RadixTabs.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx120(RadixTabs.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx120(
     "button",
     {
       type: "button",
@@ -34008,18 +34259,18 @@ SidebarTabTrigger.displayName = "SidebarTabTrigger";
 
 // components/Sidebar/SidebarTabTriggers.tsx
 import { Tabs as RadixTabs2 } from "radix-ui";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var SidebarTabTriggers = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx120(RadixTabs2.List, { className: "sidebar-triggers", ...rest, children });
+  return /* @__PURE__ */ jsx121(RadixTabs2.List, { className: "sidebar-triggers", ...rest, children });
 };
 SidebarTabTriggers.displayName = "SidebarTabTriggers";
 
 // components/Sidebar/SidebarTrigger.tsx
-import clsx53 from "clsx";
-import { jsx as jsx121, jsxs as jsxs65 } from "react/jsx-runtime";
+import clsx54 from "clsx";
+import { jsx as jsx122, jsxs as jsxs65 } from "react/jsx-runtime";
 var SidebarTrigger = ({
   name,
   tab,
@@ -34033,7 +34284,7 @@ var SidebarTrigger = ({
   const setAppState = useExcalidrawSetAppState();
   const appState = useUIAppState();
   const isOpen = appState.openSidebar?.name === name;
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx122(
     "button",
     {
       type: "button",
@@ -34052,9 +34303,9 @@ var SidebarTrigger = ({
         });
         onToggle?.(nextOpen);
       },
-      children: /* @__PURE__ */ jsxs65("div", { className: clsx53("sidebar-trigger", className), style, children: [
-        icon && /* @__PURE__ */ jsx121("div", { children: icon }),
-        children && /* @__PURE__ */ jsx121("div", { className: "sidebar-trigger__label", children })
+      children: /* @__PURE__ */ jsxs65("div", { className: clsx54("sidebar-trigger", className), style, children: [
+        icon && /* @__PURE__ */ jsx122("div", { children: icon }),
+        children && /* @__PURE__ */ jsx122("div", { className: "sidebar-trigger__label", children })
       ] })
     }
   );
@@ -34063,7 +34314,7 @@ SidebarTrigger.displayName = "SidebarTrigger";
 
 // components/Sidebar/SidebarTabs.tsx
 import { Tabs as RadixTabs3 } from "radix-ui";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var SidebarTabs = ({
   children,
   ...rest
@@ -34074,7 +34325,7 @@ var SidebarTabs = ({
     return null;
   }
   const { name } = appState.openSidebar;
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx123(
     RadixTabs3.Root,
     {
       className: "sidebar-tabs-root",
@@ -34092,18 +34343,18 @@ SidebarTabs.displayName = "SidebarTabs";
 
 // components/Sidebar/SidebarTab.tsx
 import { Tabs as RadixTabs4 } from "radix-ui";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var SidebarTab = ({
   tab,
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx123(RadixTabs4.Content, { ...rest, value: tab, "data-testid": tab, children });
+  return /* @__PURE__ */ jsx124(RadixTabs4.Content, { ...rest, value: tab, "data-testid": tab, children });
 };
 SidebarTab.displayName = "SidebarTab";
 
 // components/Sidebar/Sidebar.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 import { createElement } from "react";
 var isSidebarDockedAtom = atom(false);
 var SidebarInner = forwardRef5(
@@ -34177,11 +34428,11 @@ var SidebarInner = forwardRef5(
         document.removeEventListener(EVENT9.KEYDOWN, handleKeyDown);
       };
     }, [closeSidebar, docked, editorInterface.canFitSidebar]);
-    return /* @__PURE__ */ jsx124(
+    return /* @__PURE__ */ jsx125(
       Island,
       {
         ...rest,
-        className: clsx54(
+        className: clsx55(
           CLASSES8.SIDEBAR,
           { "sidebar--docked": docked },
           className
@@ -34189,7 +34440,7 @@ var SidebarInner = forwardRef5(
         "data-viewport-ui": editorInterface.formFactor !== "phone" ? "side" : void 0,
         "data-viewport-ui-name": editorInterface.formFactor !== "phone" ? "sidebar" : void 0,
         ref: islandRef,
-        children: /* @__PURE__ */ jsx124(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
+        children: /* @__PURE__ */ jsx125(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
       }
     );
   }
@@ -34236,18 +34487,18 @@ var Sidebar = Object.assign(
 Sidebar.displayName = "Sidebar";
 
 // components/DefaultSidebar.tsx
-import { jsx as jsx125, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs66 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var DefaultSidebarTrigger = withInternalFallback(
   "DefaultSidebarTrigger",
   (props) => {
     const { DefaultSidebarTriggerTunnel } = useTunnels();
-    return /* @__PURE__ */ jsx125(DefaultSidebarTriggerTunnel.In, { children: /* @__PURE__ */ jsx125(
+    return /* @__PURE__ */ jsx126(DefaultSidebarTriggerTunnel.In, { children: /* @__PURE__ */ jsx126(
       Sidebar.Trigger,
       {
         ...props,
         className: "default-sidebar-trigger",
-        name: DEFAULT_SIDEBAR2.name
+        name: DEFAULT_SIDEBAR3.name
       }
     ) });
   }
@@ -34255,7 +34506,7 @@ var DefaultSidebarTrigger = withInternalFallback(
 DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";
 var DefaultTabTriggers = ({ children }) => {
   const { DefaultSidebarTabTriggersTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx125(DefaultSidebarTabTriggersTunnel.In, { children });
+  return /* @__PURE__ */ jsx126(DefaultSidebarTabTriggersTunnel.In, { children });
 };
 DefaultTabTriggers.displayName = "DefaultTabTriggers";
 var DefaultSidebar = Object.assign(
@@ -34270,7 +34521,7 @@ var DefaultSidebar = Object.assign(
     }) => {
       const appState = useUIAppState();
       const setAppState = useExcalidrawSetAppState();
-      const isSearchSidebar = appState.openSidebar?.tab === CANVAS_SEARCH_TAB2;
+      const isSearchSidebar = appState.openSidebar?.tab === CANVAS_SEARCH_TAB3;
       const isDocked = isSearchSidebar ? false : docked ?? appState.defaultSidebarDockedPreference;
       const canDock = !isSearchSidebar && docked == null && onDock !== false;
       return /* @__PURE__ */ createElement2(
@@ -34279,7 +34530,7 @@ var DefaultSidebar = Object.assign(
           ...rest,
           name: "default",
           key: "default",
-          className: clsx55(
+          className: clsx56(
             "default-sidebar",
             { "default-sidebar--search-only": isSearchSidebar },
             className
@@ -34293,8 +34544,8 @@ var DefaultSidebar = Object.assign(
           } : void 0
         },
         /* @__PURE__ */ jsxs66(Sidebar.Tabs, { children: [
-          !isSearchSidebar && /* @__PURE__ */ jsx125(Sidebar.Header, {}),
-          /* @__PURE__ */ jsx125(Sidebar.Tab, { tab: CANVAS_SEARCH_TAB2, children: /* @__PURE__ */ jsx125(SearchMenu2, {}) }),
+          !isSearchSidebar && /* @__PURE__ */ jsx126(Sidebar.Header, {}),
+          /* @__PURE__ */ jsx126(Sidebar.Tab, { tab: CANVAS_SEARCH_TAB3, children: /* @__PURE__ */ jsx126(SearchMenu2, {}) }),
           !isSearchSidebar && children
         ] })
       );
@@ -34311,7 +34562,7 @@ import React37 from "react";
 import { getFrame } from "@excalidraw/common";
 
 // components/Card.tsx
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var COLOR_MAP = {
   primary: {
     base: "var(--color-primary)",
@@ -34336,7 +34587,7 @@ var COLOR_MAP = {
   }
 };
 var Card = ({ children, color }) => {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx127(
     "div",
     {
       className: "Card",
@@ -34351,7 +34602,7 @@ var Card = ({ children, color }) => {
 };
 
 // components/JSONExportDialog.tsx
-import { Fragment as Fragment23, jsx as jsx127, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx128, jsxs as jsxs67 } from "react/jsx-runtime";
 var JSONExportModal = ({
   elements,
   appState,
@@ -34363,15 +34614,15 @@ var JSONExportModal = ({
   onCloseRequest
 }) => {
   const { onExportToBackend } = exportOpts;
-  return /* @__PURE__ */ jsx127("div", { className: "ExportDialog ExportDialog--json", children: /* @__PURE__ */ jsxs67("div", { className: "ExportDialog-cards", children: [
+  return /* @__PURE__ */ jsx128("div", { className: "ExportDialog ExportDialog--json", children: /* @__PURE__ */ jsxs67("div", { className: "ExportDialog-cards", children: [
     exportOpts.saveFileToDisk && /* @__PURE__ */ jsxs67(Card, { color: "lime", children: [
-      /* @__PURE__ */ jsx127("div", { className: "Card-icon", children: exportToFileIcon }),
-      /* @__PURE__ */ jsx127("h2", { children: t("exportDialog.disk_title") }),
+      /* @__PURE__ */ jsx128("div", { className: "Card-icon", children: exportToFileIcon }),
+      /* @__PURE__ */ jsx128("h2", { children: t("exportDialog.disk_title") }),
       /* @__PURE__ */ jsxs67("div", { className: "Card-details", children: [
         t("exportDialog.disk_details"),
         !nativeFileSystemSupported && actionManager.renderAction("changeProjectName")
       ] }),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx128(
         IconButton,
         {
           className: "Card-button",
@@ -34386,10 +34637,10 @@ var JSONExportModal = ({
       )
     ] }),
     onExportToBackend && /* @__PURE__ */ jsxs67(Card, { color: "pink", children: [
-      /* @__PURE__ */ jsx127("div", { className: "Card-icon", children: LinkIcon }),
-      /* @__PURE__ */ jsx127("h2", { children: t("exportDialog.link_title") }),
-      /* @__PURE__ */ jsx127("div", { className: "Card-details", children: t("exportDialog.link_details") }),
-      /* @__PURE__ */ jsx127(
+      /* @__PURE__ */ jsx128("div", { className: "Card-icon", children: LinkIcon }),
+      /* @__PURE__ */ jsx128("h2", { children: t("exportDialog.link_title") }),
+      /* @__PURE__ */ jsx128("div", { className: "Card-details", children: t("exportDialog.link_details") }),
+      /* @__PURE__ */ jsx128(
         IconButton,
         {
           className: "Card-button",
@@ -34424,7 +34675,7 @@ var JSONExportDialog = ({
   const handleClose = React37.useCallback(() => {
     setAppState({ openDialog: null });
   }, [setAppState]);
-  return /* @__PURE__ */ jsx127(Fragment23, { children: appState.openDialog?.name === "jsonExport" && /* @__PURE__ */ jsx127(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx128(Fragment23, { children: appState.openDialog?.name === "jsonExport" && /* @__PURE__ */ jsx128(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: /* @__PURE__ */ jsx128(
     JSONExportModal,
     {
       elements,
@@ -34440,13 +34691,13 @@ var JSONExportDialog = ({
 };
 
 // components/LaserPointerButton.tsx
-import clsx56 from "clsx";
-import { jsx as jsx128 } from "react/jsx-runtime";
+import clsx57 from "clsx";
+import { jsx as jsx129 } from "react/jsx-runtime";
 var LaserPointerButton = (props) => {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx129(
     IconButton,
     {
-      className: clsx56("ToolIcon__LaserPointer", {
+      className: clsx57("ToolIcon__LaserPointer", {
         "is-mobile": props.isMobile
       }),
       type: "toggle",
@@ -34462,214 +34713,18 @@ var LaserPointerButton = (props) => {
 };
 
 // components/Toolbar.tsx
-import clsx58 from "clsx";
+import clsx59 from "clsx";
 import { useState as useState33 } from "react";
 import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB4, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR4, KEYS as KEYS52 } from "@excalidraw/common";
 
-// components/HintViewer.tsx
-import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB3, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR3 } from "@excalidraw/common";
-import {
-  isArrowElement as isArrowElement14,
-  isFlowchartNodeElement as isFlowchartNodeElement3,
-  isImageElement as isImageElement9,
-  isLinearElement as isLinearElement10,
-  isLineElement as isLineElement8,
-  isTextBindableContainer as isTextBindableContainer2,
-  isTextElement as isTextElement17
-} from "@excalidraw/element";
-import { isNodeInFlowchart } from "@excalidraw/element";
-import { jsx as jsx129 } from "react/jsx-runtime";
-var getTaggedShortcutKey = (key) => Array.isArray(key) ? `<kbd>${key.map(getShortcutKey).join(" + ")}</kbd>` : `<kbd>${getShortcutKey(key)}</kbd>`;
-var getHints = ({
-  appState,
-  isMobile,
-  editorInterface,
-  app
-}) => {
-  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
-  const multiMode = appState.multiElement !== null;
-  if (appState.openSidebar?.name === DEFAULT_SIDEBAR3.name && appState.openSidebar.tab === CANVAS_SEARCH_TAB3 && appState.searchMatches?.matches.length) {
-    return t("hints.dismissSearch", {
-      shortcut: getTaggedShortcutKey("Escape")
-    });
-  }
-  if (appState.openSidebar && !editorInterface.canFitSidebar) {
-    return null;
-  }
-  if (isEraserActive(appState)) {
-    return t("hints.eraserRevert", {
-      shortcut: getTaggedShortcutKey("Alt")
-    });
-  }
-  const selectedElements = app.scene.getSelectedElements(appState);
-  if (appState.selectedLinearElement?.isDragging && selectedElements[0]?.type === "arrow") {
-    return t("hints.arrowBindModifiers", {
-      shortcut_1: getTaggedShortcutKey("Ctrl"),
-      shortcut_2: getTaggedShortcutKey("Alt")
-    });
-  }
-  if (activeTool.type === "arrow" || activeTool.type === "line") {
-    if (multiMode) {
-      return t("hints.linearElementMulti", {
-        shortcut_1: getTaggedShortcutKey("Escape"),
-        shortcut_2: getTaggedShortcutKey("Enter")
-      });
-    }
-    if (activeTool.type === "arrow") {
-      return t("hints.arrowTool", {
-        shortcut: getTaggedShortcutKey("A")
-      });
-    }
-    return t("hints.linearElement");
-  }
-  if (activeTool.type === "freedraw") {
-    return t("hints.freeDraw");
-  }
-  if (activeTool.type === "text") {
-    return t("hints.text");
-  }
-  if (activeTool.type === "embeddable") {
-    return t("hints.embeddable");
-  }
-  if (activeTool.type === "autoshape") {
-    return t("hints.autoshape");
-  }
-  if (isResizing && lastPointerDownWith === "mouse" && selectedElements.length === 1) {
-    const targetElement = selectedElements[0];
-    if (isLinearElement10(targetElement) && targetElement.points.length === 2) {
-      return t("hints.lockAngle", {
-        shortcut: getTaggedShortcutKey("Shift")
-      });
-    }
-    return isImageElement9(targetElement) ? t("hints.resizeImage", {
-      shortcut_1: getTaggedShortcutKey("Shift"),
-      shortcut_2: getTaggedShortcutKey("Alt")
-    }) : t("hints.resize", {
-      shortcut_1: getTaggedShortcutKey("Shift"),
-      shortcut_2: getTaggedShortcutKey("Alt")
-    });
-  }
-  if (isRotating && lastPointerDownWith === "mouse") {
-    return t("hints.rotate", {
-      shortcut: getTaggedShortcutKey("Shift")
-    });
-  }
-  if (selectedElements.length === 1 && isTextElement17(selectedElements[0])) {
-    return t("hints.text_selected", {
-      shortcut: getTaggedShortcutKey("Enter")
-    });
-  }
-  if (appState.editingTextElement) {
-    return t("hints.text_editing", {
-      shortcut_1: getTaggedShortcutKey("Escape"),
-      shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "Enter"])
-    });
-  }
-  if (appState.croppingElementId) {
-    return t("hints.leaveCropEditor", {
-      shortcut_1: getTaggedShortcutKey("Enter"),
-      shortcut_2: getTaggedShortcutKey("Escape")
-    });
-  }
-  if (selectedElements.length === 1 && isImageElement9(selectedElements[0])) {
-    return t("hints.enterCropEditor", {
-      shortcut: getTaggedShortcutKey("Enter")
-    });
-  }
-  if (activeTool.type === "selection") {
-    if (appState.selectionElement && !selectedElements.length && !appState.editingTextElement && !appState.selectedLinearElement?.isEditing) {
-      return t("hints.deepBoxSelect", {
-        shortcut: getTaggedShortcutKey("CtrlOrCmd")
-      });
-    }
-    if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
-      return t("hints.disableSnapping", {
-        shortcut: getTaggedShortcutKey("CtrlOrCmd")
-      });
-    }
-    if (!selectedElements.length && !isMobile) {
-      return t("hints.canvasPanning", {
-        shortcut_1: getTaggedShortcutKey(t("keys.mmb")),
-        shortcut_2: getTaggedShortcutKey("Space")
-      });
-    }
-    if (selectedElements.length === 1) {
-      if (isLinearElement10(selectedElements[0])) {
-        if (isArrowElement14(selectedElements[0]) && appState.selectedLinearElement?.elementId === selectedElements[0].id && (appState.selectedLinearElement.hoverPointIndex === 0 || appState.selectedLinearElement.hoverPointIndex === selectedElements[0].points.length - 1)) {
-          return t("hints.toggleArrowhead");
-        }
-        if (appState.selectedLinearElement?.isEditing) {
-          return appState.selectedLinearElement.selectedPointsIndices ? t("hints.lineEditor_pointSelected", {
-            shortcut_1: getTaggedShortcutKey("Delete"),
-            shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "D"])
-          }) : t("hints.lineEditor_nothingSelected", {
-            shortcut_1: getTaggedShortcutKey("Shift"),
-            shortcut_2: getTaggedShortcutKey("Alt")
-          });
-        }
-        return isLineElement8(selectedElements[0]) ? t("hints.lineEditor_line_info", {
-          shortcut: getTaggedShortcutKey("Enter")
-        }) : t("hints.lineEditor_info", {
-          shortcut_1: getTaggedShortcutKey("CtrlOrCmd"),
-          shortcut_2: getTaggedShortcutKey(["CtrlOrCmd", "Enter"])
-        });
-      }
-      if (!appState.newElement && !appState.selectedElementsAreBeingDragged && isTextBindableContainer2(selectedElements[0])) {
-        const bindTextToElement = t("hints.bindTextToElement", {
-          shortcut: getTaggedShortcutKey("Enter")
-        });
-        const createFlowchart = t("hints.createFlowchart", {
-          shortcut: getTaggedShortcutKey(["CtrlOrCmd", "\u2191\u2193"])
-        });
-        if (isFlowchartNodeElement3(selectedElements[0])) {
-          if (isNodeInFlowchart(
-            selectedElements[0],
-            app.scene.getNonDeletedElementsMap()
-          )) {
-            return [bindTextToElement, createFlowchart];
-          }
-          return [bindTextToElement, createFlowchart];
-        }
-        return bindTextToElement;
-      }
-    }
-  }
-  return null;
-};
-var HintViewer = ({
-  appState,
-  isMobile,
-  editorInterface,
-  app
-}) => {
-  const hints = getHints({
-    appState,
-    isMobile,
-    editorInterface,
-    app
-  });
-  if (!hints) {
-    return null;
-  }
-  const hint = Array.isArray(hints) ? hints.map((hint2) => hint2.replace(/\. ?$/, "")).join(", ") : hints;
-  const hintJSX = hint.split(/(<kbd>[^<]+<\/kbd>)/g).map((part, index) => {
-    if (index % 2 === 1) {
-      const shortcutMatch = part[0] === "<" && part.match(/^<kbd>([^<]+)<\/kbd>$/);
-      return /* @__PURE__ */ jsx129("kbd", { children: shortcutMatch ? shortcutMatch[1] : part }, index);
-    }
-    return part;
-  });
-  return /* @__PURE__ */ jsx129("div", { className: "HintViewer", children: /* @__PURE__ */ jsx129("span", { children: hintJSX }) });
-};
-
 // components/LockButton.tsx
-import clsx57 from "clsx";
+import clsx58 from "clsx";
 import { jsx as jsx130 } from "react/jsx-runtime";
 var LockButton = (props) => {
   return /* @__PURE__ */ jsx130(
     IconButton,
     {
-      className: clsx57("ToolIcon__lock", { "is-mobile": props.isMobile }),
+      className: clsx58("ToolIcon__lock", { "is-mobile": props.isMobile }),
       type: "toggle",
       icon: props.checked ? LockedIcon : UnlockedIcon,
       checked: props.checked,
@@ -34810,7 +34865,7 @@ var ExtraToolsDropdown = ({
     /* @__PURE__ */ jsx131(
       DropdownMenu_default.Trigger,
       {
-        className: clsx58("App-toolbar__extra-tools-trigger", {
+        className: clsx59("App-toolbar__extra-tools-trigger", {
           "App-toolbar__extra-tools-trigger--selected": myocSimplifiedToolSelected || frameToolSelected || embeddableToolSelected || !isMyocSimplifiedMode && isFullStylesPanel && drawShapeToolSelected || lassoToolSelected || bucketFillToolSelected || // in collab we're already highlighting the laser button
           // outside toolbar, so let's not highlight extra-tools button
           // on top of it
@@ -34972,7 +35027,7 @@ var Toolbar = ({
     Island,
     {
       padding: 1,
-      className: clsx58("App-toolbar", {
+      className: clsx59("App-toolbar", {
         "zen-mode": appState.zenModeEnabled,
         "App-toolbar--compact": isCompactStylesPanel
       }),
@@ -35168,13 +35223,13 @@ var LayerUI = ({
       Section,
       {
         heading: "selectedShapeActions",
-        className: clsx59("selected-shape-actions zen-mode-transition", {
+        className: clsx60("selected-shape-actions zen-mode-transition", {
           "transition-left": appState.zenModeEnabled
         }),
         children: isCompactStylesPanel ? /* @__PURE__ */ jsx132(
           Island,
           {
-            className: clsx59("compact-shape-actions-island"),
+            className: clsx60("compact-shape-actions-island"),
             padding: 0,
             "data-viewport-ui": "side",
             "data-viewport-ui-name": "stylesPanel",
@@ -35228,13 +35283,13 @@ var LayerUI = ({
         Stack_default.Col,
         {
           gap: spacing.menuTopGap,
-          className: clsx59("App-menu_top__left"),
+          className: clsx60("App-menu_top__left"),
           children: [
             renderCanvasActions(),
             defaultUIEnabled && /* @__PURE__ */ jsx132(
               "div",
               {
-                className: clsx59("selected-shape-actions-container", {
+                className: clsx60("selected-shape-actions-container", {
                   "selected-shape-actions-container--compact": isCompactStylesPanel
                 }),
                 children: shouldRenderSelectedShapeActions && renderSelectedShapeActions()
@@ -35253,13 +35308,23 @@ var LayerUI = ({
           ]
         }
       ),
+      defaultUIEnabled && appState.viewModeEnabled && // MyOC: Keep the held-F Smart Zoom hint visible in view mode.
+      /* @__PURE__ */ jsx132("div", { className: "view-mode-hint", children: /* @__PURE__ */ jsx132(
+        HintViewer,
+        {
+          appState,
+          isMobile: editorInterface.formFactor === "phone",
+          editorInterface,
+          app
+        }
+      ) }),
       defaultUIEnabled && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx132(Section, { heading: "shapes", className: "shapes-section", children: (heading) => /* @__PURE__ */ jsxs69("div", { style: { position: "relative" }, children: [
         renderWelcomeScreen && /* @__PURE__ */ jsx132(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}),
         /* @__PURE__ */ jsx132(Stack_default.Col, { gap: spacing.toolbarColGap, align: "start", children: /* @__PURE__ */ jsxs69(
           Stack_default.Row,
           {
             gap: spacing.toolbarRowGap,
-            className: clsx59("App-toolbar-container", {
+            className: clsx60("App-toolbar-container", {
               "zen-mode": appState.zenModeEnabled
             }),
             children: [
@@ -35302,7 +35367,7 @@ var LayerUI = ({
       /* @__PURE__ */ jsxs69(
         "div",
         {
-          className: clsx59(
+          className: clsx60(
             "layer-ui__wrapper__top-right zen-mode-transition",
             {
               "transition-right": appState.zenModeEnabled,
@@ -36047,7 +36112,7 @@ var NewElementCanvas = (props) => {
 var NewElementCanvas_default = NewElementCanvas;
 
 // components/CursorHint.tsx
-import clsx60 from "clsx";
+import clsx61 from "clsx";
 import { useLayoutEffect as useLayoutEffect10, useEffect as useEffect38, useRef as useRef32, useState as useState34 } from "react";
 import { ARROW_TYPE as ARROW_TYPE2, EVENT as EVENT10 } from "@excalidraw/common";
 import { jsx as jsx137 } from "react/jsx-runtime";
@@ -36166,7 +36231,7 @@ var CursorHint = () => {
     "div",
     {
       ref: hintRef,
-      className: clsx60("CursorHint", {
+      className: clsx61("CursorHint", {
         "CursorHint--fade-out": isFadingOut
       }),
       "data-testid": "cursor-hint",
@@ -36425,6 +36490,7 @@ var touchTimeout = 0;
 var invalidateContextMenu = false;
 var YOUTUBE_VIDEO_STATES = /* @__PURE__ */ new Map();
 var MAX_EMBEDDABLE_VIEWPORT_SCALE = 4;
+var SMART_ZOOM_KEY_RELEASE_TIMEOUT = 300;
 var getViewpointAwareResizeCursor = (cursor, viewpointFlip) => {
   if (viewpointFlip.horizontal === viewpointFlip.vertical) {
     return cursor;
@@ -36525,6 +36591,9 @@ var App = class _App extends React41.Component {
     __publicField(this, "lastPointerMoveCoords", null);
     __publicField(this, "lastCompletedCanvasClicks", []);
     __publicField(this, "lastKeyboardSmartZoomImageId", null);
+    // MyOC: State for the press-and-hold Smart Zoom interaction.
+    __publicField(this, "smartZoomKeyDownAt", null);
+    __publicField(this, "smartZoomKeyHitElement", false);
     /** previous frame pointer coords */
     __publicField(this, "previousPointerMoveCoords", null);
     __publicField(this, "drawShape", new AppDrawShape(this));
@@ -36982,6 +37051,7 @@ var App = class _App extends React41.Component {
     // Lifecycle
     __publicField(this, "onBlur", withBatchedUpdates(() => {
       isHoldingSpace = false;
+      this.resetSmartZoomKey();
       this.setState({
         isBindingEnabled: this.state.bindingPreference === "enabled"
       });
@@ -37046,6 +37116,7 @@ var App = class _App extends React41.Component {
       this.maybeCleanupAfterMissingPointerUp(null);
       isHoldingSpace = false;
       isHoldingZ = false;
+      this.resetSmartZoomKey();
       isPanning = false;
       isDraggingScrollBar = false;
       lastPointerUp = null;
@@ -37532,9 +37603,30 @@ var App = class _App extends React41.Component {
         if (event && (!(elementUnderCursor instanceof HTMLCanvasElement) || isWritableElement4(target))) {
           return;
         }
-        const dataTransferList = await parseDataTransferEvent(event);
-        const filesList = dataTransferList.getFiles();
-        const data = await parseClipboard(dataTransferList, isPlainPaste);
+        let dataTransferList = await parseDataTransferEvent(event);
+        let filesList = dataTransferList.getFiles();
+        let data = await parseClipboard(dataTransferList, isPlainPaste);
+        if (!data.elements && filesList.length > 0 && !isPlainPaste) {
+          try {
+            const systemClipboard = await readSystemClipboard();
+            const excalidrawJSON = systemClipboard[MIME_TYPES11.excalidrawClipboard];
+            if (typeof excalidrawJSON === "string") {
+              dataTransferList = await parseDataTransferEvent(
+                createPasteEvent({
+                  types: {
+                    [MIME_TYPES11.excalidrawClipboard]: excalidrawJSON
+                  }
+                })
+              );
+              filesList = dataTransferList.getFiles();
+              data = await parseClipboard(dataTransferList, isPlainPaste);
+            }
+          } catch (error) {
+            console.warn(
+              `Could not read editable image clipboard data: ${error.message}`
+            );
+          }
+        }
         if (this.state.viewModeEnabled) {
           if (!this.containsImagePaste(data, filesList, isPlainPaste)) {
             return;
@@ -38124,7 +38216,76 @@ var App = class _App extends React41.Component {
         this.viewport.lastPosition.y = event.clientY;
       }
     ));
-    // Input handling
+    // MyOC Smart Zoom input handling: F is a hold gesture that can target the
+    // item under the pointer, or zoom the complete scene on a quick release.
+    __publicField(this, "isPlainSmartZoomKey", (event) => !event[KEYS53.CTRL_OR_CMD] && !event.shiftKey && !event.altKey && event.key.toLocaleLowerCase() === KEYS53.F);
+    __publicField(this, "updateSmartZoomCursor", (scenePointer) => {
+      if (this.smartZoomKeyDownAt === null) {
+        return;
+      }
+      const hitElement = scenePointer ? this.getElementAtPosition(scenePointer.x, scenePointer.y, {
+        includeLockedElements: true
+      }) : null;
+      this.cursor.set(hitElement ? CURSOR_TYPE2.POINTER : "zoom-in");
+    });
+    __publicField(this, "resetSmartZoomKey", () => {
+      const wasHeld = this.smartZoomKeyDownAt !== null;
+      this.smartZoomKeyDownAt = null;
+      this.smartZoomKeyHitElement = false;
+      if (wasHeld) {
+        this.cursor.reset();
+        this.updateEditorAtom(smartZoomKeyHeldAtom, false);
+      }
+    });
+    __publicField(this, "handleSmartZoomKeyDown", (event) => {
+      if (!this.isPlainSmartZoomKey(event)) {
+        return false;
+      }
+      if (!event.repeat && this.smartZoomKeyDownAt === null) {
+        this.smartZoomKeyDownAt = Date.now();
+        this.smartZoomKeyHitElement = false;
+        this.updateEditorAtom(smartZoomKeyHeldAtom, true);
+        this.updateSmartZoomCursor(this.lastPointerMoveCoords);
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    });
+    __publicField(this, "handleSmartZoomKeyUp", (event) => {
+      if (event.key.toLocaleLowerCase() !== KEYS53.F || this.smartZoomKeyDownAt === null) {
+        return false;
+      }
+      const elapsed = Date.now() - this.smartZoomKeyDownAt;
+      const shouldZoomAllElements = !this.smartZoomKeyHitElement && elapsed <= SMART_ZOOM_KEY_RELEASE_TIMEOUT;
+      this.resetSmartZoomKey();
+      event.stopPropagation();
+      if (shouldZoomAllElements) {
+        this.actionManager.executeAction(
+          actionSmartZoom,
+          "keyboard",
+          this.scene.getNonDeletedElements()
+        );
+      }
+      return true;
+    });
+    __publicField(this, "handleSmartZoomPointerDown", (event, scenePointer) => {
+      if (event.button !== POINTER_BUTTON2.MAIN || this.smartZoomKeyDownAt === null) {
+        return false;
+      }
+      const hitElement = this.getElementAtPosition(
+        scenePointer.x,
+        scenePointer.y,
+        { includeLockedElements: true }
+      );
+      if (!hitElement) {
+        return false;
+      }
+      this.smartZoomKeyHitElement = true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.actionManager.executeAction(actionSmartZoom, "keyboard", [hitElement]);
+      return true;
+    });
     __publicField(this, "onKeyDown", withBatchedUpdates(
       (event) => {
         if (!this.isInteractionEnabled()) {
@@ -38250,6 +38411,9 @@ var App = class _App extends React41.Component {
             maybeHandleArrowPointlikeDrag({ app: this, event });
           }
         }
+        if (this.handleSmartZoomKeyDown(event)) {
+          return;
+        }
         if (this.actionManager.handleKeyDown(event)) {
           return;
         }
@@ -38456,6 +38620,9 @@ var App = class _App extends React41.Component {
       if (!this.isInteractionEnabled()) {
         return;
       }
+      if (this.handleSmartZoomKeyUp(event)) {
+        return;
+      }
       if (event.key === KEYS53.SPACE) {
         if (this.state.viewModeEnabled && this.state.activeTool.type !== "laser" || this.state.openDialog?.name === "elementLinkSelector") {
           this.cursor.set(CURSOR_TYPE2.GRAB);
@@ -38950,12 +39117,12 @@ var App = class _App extends React41.Component {
           event,
           this.state
         );
-        const hitElement = this.getElementAtPosition(sceneX2, sceneY2, {
+        const hitElement2 = this.getElementAtPosition(sceneX2, sceneY2, {
           includeLockedElements: true
         });
-        if (hitElement) {
+        if (hitElement2) {
           this.cursor.reset();
-          this.actionManager.executeAction(actionSmartZoom, "ui", [hitElement]);
+          this.actionManager.executeAction(actionSmartZoom, "ui", [hitElement2]);
         }
         return;
       }
@@ -39027,15 +39194,18 @@ var App = class _App extends React41.Component {
           return;
         }
       }
-      if (selectedElements.length === 1 && isImageElement10(selectedElements[0])) {
-        this.startImageCropping(selectedElements[0]);
+      const hitElement = this.getElementAtPosition(sceneX, sceneY, {
+        includeLockedElements: true
+      });
+      if (hitElement && isImageElement10(hitElement)) {
+        this.actionManager.executeAction(actionSmartZoom, "ui", [hitElement]);
         return;
       }
       this.cursor.reset();
       const selectedGroupIds = getSelectedGroupIds4(this.state);
       if (selectedGroupIds.length > 0) {
-        const hitElement = this.getElementAtPosition(sceneX, sceneY);
-        const selectedGroupId = hitElement && getSelectedGroupIdForElement(hitElement, this.state.selectedGroupIds);
+        const hitElement2 = this.getElementAtPosition(sceneX, sceneY);
+        const selectedGroupId = hitElement2 && getSelectedGroupIdForElement(hitElement2, this.state.selectedGroupIds);
         if (selectedGroupId) {
           this.store.scheduleCapture();
           this.setState((prevState) => ({
@@ -39043,7 +39213,7 @@ var App = class _App extends React41.Component {
             ...selectGroupsForSelectedElements7(
               {
                 editingGroupId: selectedGroupId,
-                selectedElementIds: { [hitElement.id]: true }
+                selectedElementIds: { [hitElement2.id]: true }
               },
               this.scene.getNonDeletedElements(),
               prevState,
@@ -39055,10 +39225,10 @@ var App = class _App extends React41.Component {
       }
       this.cursor.reset();
       if (!this.state.viewModeEnabled) {
-        const hitElement = this.getElementAtPosition(sceneX, sceneY);
-        if (isIframeLikeElement2(hitElement)) {
+        const hitElement2 = this.getElementAtPosition(sceneX, sceneY);
+        if (isIframeLikeElement2(hitElement2)) {
           this.setState({
-            activeEmbeddable: { element: hitElement, state: "active" }
+            activeEmbeddable: { element: hitElement2, state: "active" }
           });
           return;
         }
@@ -39111,7 +39281,28 @@ var App = class _App extends React41.Component {
         this.lastCompletedCanvasClicks = [];
         return;
       }
+      if (this.smartZoomKeyHitElement) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
       const scenePointer = viewportCoordsToSceneCoords3(event, this.state);
+      if (this.smartZoomKeyDownAt !== null && !this.smartZoomKeyHitElement) {
+        const hitElement = this.getElementAtPosition(
+          scenePointer.x,
+          scenePointer.y,
+          { includeLockedElements: true }
+        );
+        if (hitElement) {
+          this.smartZoomKeyHitElement = true;
+          event.preventDefault();
+          event.stopPropagation();
+          this.actionManager.executeAction(actionSmartZoom, "keyboard", [
+            hitElement
+          ]);
+          return;
+        }
+      }
       const imageStatusAction = this.getImageStatusActionAtPosition(scenePointer);
       if (imageStatusAction) {
         event.preventDefault();
@@ -39902,6 +40093,10 @@ var App = class _App extends React41.Component {
           hoveredElementIds: updateStable(prevState.hoveredElementIds, {})
         }));
       }
+      this.updateSmartZoomCursor({
+        x: scenePointerX,
+        y: scenePointerY
+      });
     });
     __publicField(this, "handleEraser", (event, scenePointer) => {
       const elementsToErase = this.eraserTrail.addPointToPath(
@@ -39945,6 +40140,9 @@ var App = class _App extends React41.Component {
         x: scenePointerX,
         y: scenePointerY
       };
+      if (this.handleSmartZoomPointerDown(event, scenePointer)) {
+        return;
+      }
       const target = event.target;
       if (target.setPointerCapture) {
         target.setPointerCapture(event.pointerId);
@@ -43101,7 +43299,7 @@ var App = class _App extends React41.Component {
       return /* @__PURE__ */ jsx139(
         "div",
         {
-          className: clsx61("excalidraw__embeddable-container", {
+          className: clsx62("excalidraw__embeddable-container", {
             "is-hovered": isHovered
           }),
           style: {
@@ -43218,7 +43416,7 @@ var App = class _App extends React41.Component {
       "div",
       {
         translate: "no",
-        className: clsx61(
+        className: clsx62(
           "excalidraw excalidraw-container notranslate",
           this.props.className,
           {
@@ -43929,6 +44127,19 @@ var App = class _App extends React41.Component {
         return;
       }
     }
+    if (data.elements) {
+      const elements = data.programmaticAPI ? convertToExcalidrawElements(
+        data.elements
+      ) : data.elements;
+      this.addElementsFromPasteOrLibrary({
+        elements,
+        files: data.files || null,
+        position: this.editorInterface.formFactor === "desktop" ? "cursor" : "center",
+        retainSeed: isPlainPaste,
+        preserveFrameChildrenOrder: true
+      });
+      return;
+    }
     const imageFiles = dataTransferFiles.map((data2) => data2.file);
     if (imageFiles.length === 0 && data.text && !isPlainPaste) {
       const trimmedText = data.text.trim();
@@ -43944,19 +44155,6 @@ var App = class _App extends React41.Component {
       }
       return;
     }
-    if (data.elements) {
-      const elements = data.programmaticAPI ? convertToExcalidrawElements(
-        data.elements
-      ) : data.elements;
-      this.addElementsFromPasteOrLibrary({
-        elements,
-        files: data.files || null,
-        position: this.editorInterface.formFactor === "desktop" ? "cursor" : "center",
-        retainSeed: isPlainPaste,
-        preserveFrameChildrenOrder: true
-      });
-      return;
-    }
     if (!data.text) {
       return;
     }
@@ -46219,7 +46417,7 @@ var InitializeApp = (props) => {
 };
 
 // components/footer/FooterCenter.tsx
-import clsx62 from "clsx";
+import clsx63 from "clsx";
 import { jsx as jsx141 } from "react/jsx-runtime";
 var FooterCenter = ({ children }) => {
   const { FooterCenterTunnel } = useTunnels();
@@ -46227,7 +46425,7 @@ var FooterCenter = ({ children }) => {
   return /* @__PURE__ */ jsx141(FooterCenterTunnel.In, { children: /* @__PURE__ */ jsx141(
     "div",
     {
-      className: clsx62("footer-center zen-mode-transition", {
+      className: clsx63("footer-center zen-mode-transition", {
         "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
       }),
       children
@@ -46238,7 +46436,7 @@ var FooterCenter_default = FooterCenter;
 FooterCenter.displayName = "FooterCenter";
 
 // components/live-collaboration/LiveCollaborationTrigger.tsx
-import clsx63 from "clsx";
+import clsx64 from "clsx";
 import { MQ_MIN_WIDTH_DESKTOP } from "@excalidraw/common";
 import { jsx as jsx142, jsxs as jsxs71 } from "react/jsx-runtime";
 var LiveCollaborationTrigger2 = ({
@@ -46253,7 +46451,7 @@ var LiveCollaborationTrigger2 = ({
     Button,
     {
       ...rest,
-      className: clsx63("collab-button", { active: isCollaborating }),
+      className: clsx64("collab-button", { active: isCollaborating }),
       type: "button",
       onSelect,
       style: { position: "relative", width: showIconOnly ? void 0 : "auto" },