@myoc/excalidraw 0.19.541 → 0.19.543

package/dist/dev/index.js

@@ -64,13 +64,13 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-3GXWFO3U.js";
+} from "./chunk-6OYO4QVO.js";
 import {
   define_import_meta_env_default
-} from "./chunk-JLFL3YO4.js";
+} from "./chunk-VQRWPJBP.js";
 import {
   en_default
-} from "./chunk-2OVHIH4L.js";
+} from "./chunk-35XUJXYN.js";
 import {
   percentages_default
 } from "./chunk-72CYJXY3.js";
@@ -97,7 +97,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";
@@ -236,7 +236,7 @@ import {
   isBindingElementType,
   isBoundToContainer as isBoundToContainer10,
   isFrameLikeElement as isFrameLikeElement17,
-  isImageElement as isImageElement9,
+  isImageElement as isImageElement10,
   isEmbeddableElement as isEmbeddableElement4,
   isInitializedImageElement as isInitializedImageElement5,
   isLinearElement as isLinearElement11,
@@ -330,7 +330,7 @@ import {
   calculateFixedPointForNonElbowArrowBinding as calculateFixedPointForNonElbowArrowBinding2,
   bindOrUnbindBindingElement as bindOrUnbindBindingElement2,
   mutateElement as mutateElement7,
-  getElementBounds as getElementBounds4,
+  getElementBounds as getElementBounds5,
   doBoundsIntersect as doBoundsIntersect4,
   isPointInElement as isPointInElement3,
   maxBindingDistance_simple as maxBindingDistance_simple4,
@@ -398,7 +398,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"),
@@ -10970,7 +10970,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-OIDJZ5EF.js").then(
+        (blob2) => import("./data/image-MKDSIQJM.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -13125,21 +13125,58 @@ 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);
+    const [leftB, topB] = getElementBounds(imageB, elementsMap);
+    return topA - topB || leftA - leftB;
+  });
+  if (images.length === 0) {
+    return null;
+  }
+  const currentIndex = images.findIndex((image) => image.id === currentImageId);
+  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",
   trackEvent: { category: "toolbar" },
   icon: arrowsToEyeIcon,
   viewMode: true,
-  perform: (elements, appState, _, app) => {
+  perform: (elements, appState, targetElements, app) => {
     const settings = getEffectiveEditorPreferences(
       appState,
       app.props.editorPreferences
     ).smartZoom;
-    const selectedElements = getSelectedElements(elements, appState);
+    const selectedElements = targetElements && targetElements.length > 0 ? targetElements : getSelectedElements(elements, appState);
     app.viewport.setViewport({
       target: selectedElements.length ? selectedElements : elements,
       fit: settings.fitToViewport ? "contain" : "none",
@@ -13151,20 +13188,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
@@ -13545,7 +13569,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,
@@ -13719,7 +13743,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,
@@ -16407,7 +16431,7 @@ var actionToggleSearchMenu = register({
 });
 
 // actions/actionCropEditor.tsx
-import { isImageElement as isImageElement2 } from "@excalidraw/element";
+import { isImageElement as isImageElement3 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var actionToggleCropEditor = register({
@@ -16433,7 +16457,7 @@ var actionToggleCropEditor = register({
   },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    if (!appState.croppingElementId && selectedElements.length === 1 && isImageElement2(selectedElements[0])) {
+    if (!appState.croppingElementId && selectedElements.length === 1 && isImageElement3(selectedElements[0])) {
       return true;
     }
     return false;
@@ -16956,7 +16980,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({
@@ -16999,7 +17023,7 @@ var actionToggleViewMode = register({
         onClick: () => updateData(null),
         size: data?.size || "medium",
         "data-testid": "button-view-mode",
-        className: clsx24({
+        className: clsx25({
           enabled: appState.viewModeEnabled
         })
       }
@@ -19592,7 +19616,7 @@ import {
   elementOverlapsWithFrame as elementOverlapsWithFrame2,
   getBoundTextElement as getBoundTextElement6,
   getContainingFrame as getContainingFrame3,
-  getElementBounds as getElementBounds2,
+  getElementBounds as getElementBounds3,
   intersectElementWithLineSegment as intersectElementWithLineSegment2,
   isBoundToContainer as isBoundToContainer8,
   pointInsideBoundsInclusive
@@ -19636,7 +19660,7 @@ var getLassoSelectedElementIds = (input) => {
     lassoBounds[3] + PRECISION3
   ];
   for (const element of selectableElements) {
-    const bounds = getElementBounds2(element, elementsMap);
+    const bounds = getElementBounds3(element, elementsMap);
     const clipBounds = getFrameClipBounds(element, bounds, elementsMap);
     const elementBounds = clipToBounds(bounds, clipBounds);
     if (doBoundsIntersect2(lassoBounds, elementBounds) && !intersectedElements.has(element.id) && !enclosedElements.has(element.id)) {
@@ -19676,7 +19700,7 @@ var getFrameClipBounds = (element, elementBounds, elementsMap) => {
   if (!frame) {
     return null;
   }
-  const frameBounds = getElementBounds2(frame, elementsMap);
+  const frameBounds = getElementBounds3(frame, elementsMap);
   if (boundsContainBounds2(frameBounds, elementBounds)) {
     return null;
   }
@@ -19946,7 +19970,7 @@ import {
   computeBoundTextPosition as computeBoundTextPosition5,
   doBoundsIntersect as doBoundsIntersect3,
   getBoundTextElement as getBoundTextElement7,
-  getElementBounds as getElementBounds3,
+  getElementBounds as getElementBounds4,
   getElementLineSegments as getElementLineSegments3,
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints as getFreedrawOutlinePoints2,
@@ -20092,7 +20116,7 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
     Math.max(pathSegment[0][0], pathSegment[1][0]) + threshold,
     Math.max(pathSegment[0][1], pathSegment[1][1]) + threshold
   ];
-  const origElementBounds = getElementBounds3(element, elementsMap);
+  const origElementBounds = getElementBounds4(element, elementsMap);
   const elementBounds = [
     origElementBounds[0] - threshold,
     origElementBounds[1] - threshold,
@@ -21231,7 +21255,7 @@ import {
   isBindableElement as isBindableElement2,
   isElbowArrow as isElbowArrow6,
   isFrameLikeElement as isFrameLikeElement11,
-  isImageElement as isImageElement3,
+  isImageElement as isImageElement4,
   isLinearElement as isLinearElement7,
   isLineElement as isLineElement6,
   maxBindingDistance_simple as maxBindingDistance_simple2,
@@ -22422,7 +22446,7 @@ var renderResetAutoResizeHandle = (text, context, appState, selectionColor, form
 };
 var renderImageStatusOverlays = (context, visibleElements, elementsMap, app, appState, selectionColor) => {
   for (const element of visibleElements) {
-    if (!isImageElement3(element) || !element.fileId) {
+    if (!isImageElement4(element) || !element.fileId) {
       continue;
     }
     const imageStatus = app.imageStatus.get(element.fileId);
@@ -22491,7 +22515,7 @@ var renderImageStatusOverlays = (context, visibleElements, elementsMap, app, app
   }
 };
 var getImageStatusOverlayPosition = (element, elementsMap, appState, placement) => {
-  if (!isImageElement3(element)) {
+  if (!isImageElement4(element)) {
     return null;
   }
   const [x1, y1, x2, y2] = getElementAbsoluteCoords6(element, elementsMap);
@@ -22910,7 +22934,7 @@ var _renderInteractiveScene = ({
             cx,
             cy,
             activeEmbeddable: appState.activeEmbeddable?.element === element && appState.activeEmbeddable.state === "active",
-            padding: element.id === appState.croppingElementId || isImageElement3(element) ? 0 : void 0
+            padding: element.id === appState.croppingElementId || isImageElement4(element) ? 0 : void 0
           });
         }
       }
@@ -22965,7 +22989,7 @@ var _renderInteractiveScene = ({
       }
       if (appState.croppingElementId && !appState.isCropping) {
         const croppingElement = elementsMap.get(appState.croppingElementId);
-        if (croppingElement && isImageElement3(croppingElement)) {
+        if (croppingElement && isImageElement4(croppingElement)) {
           renderCropHandles(
             context,
             renderConfig,
@@ -25334,7 +25358,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
@@ -25401,7 +25425,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 = ({
@@ -25500,7 +25524,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
@@ -25603,7 +25627,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)
                       }),
@@ -25626,7 +25650,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,
@@ -25650,7 +25674,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",
@@ -25692,7 +25716,7 @@ var ViewportStatusBadge = ({
 };
 
 // components/LayerUI.tsx
-import clsx59 from "clsx";
+import clsx60 from "clsx";
 import React38 from "react";
 import {
   CLASSES as CLASSES9,
@@ -25728,7 +25752,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";
@@ -25736,14 +25760,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,
@@ -25761,7 +25785,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,
@@ -25786,7 +25810,7 @@ import {
   suppportsHorizontalAlign,
   hasBoundTextElement as hasBoundTextElement6,
   isElbowArrow as isElbowArrow8,
-  isImageElement as isImageElement4,
+  isImageElement as isImageElement5,
   isLinearElement as isLinearElement9,
   isTextElement as isTextElement11,
   hasStrokeColor as hasStrokeColor2,
@@ -25850,21 +25874,21 @@ var getShapeActionPredicates = (appState, targetElements, elementsMap, app) => {
     ),
     align: !isSingleElementBoundContainer && alignActionsPredicate(appState, app),
     distribute: targetElements.length > 2,
-    imageLayout: targetElements.length > 1 && targetElements.every(isImageElement4) && alignActionsPredicate(appState, app),
+    imageLayout: targetElements.length > 1 && targetElements.every(isImageElement5) && alignActionsPredicate(appState, app),
     // per-element actions
     // NOTE: the full panel treats a bound container as linkable; the compact /
     // mobile layouts only link a truly single selection. Both are preserved via
     // the two flags below.
     link: singleSelected || isSingleElementBoundContainer,
     linkSingleOnly: singleSelected,
-    cropEditor: !appState.croppingElementId && singleSelected && isImageElement4(targetElements[0]),
+    cropEditor: !appState.croppingElementId && singleSelected && isImageElement5(targetElements[0]),
     lineEditor: !appState.selectedLinearElement?.isEditing && singleSelected && isLinearElement9(targetElements[0]) && !isElbowArrow8(targetElements[0])
   };
 };
 
 // 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"
 ]);
@@ -26017,7 +26041,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"),
@@ -26087,7 +26111,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"),
@@ -26167,7 +26191,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"),
@@ -26238,7 +26262,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"),
@@ -26318,7 +26342,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"
     ) }),
@@ -26425,7 +26449,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"
               ) }),
@@ -26529,7 +26553,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")
@@ -26537,7 +26561,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";
@@ -26561,7 +26585,7 @@ var LoadingMessage = ({
   return /* @__PURE__ */ jsxs35(
     "div",
     {
-      className: clsx30("LoadingMessage", {
+      className: clsx31("LoadingMessage", {
         "LoadingMessage--dark": theme === THEME23.DARK
       }),
       children: [
@@ -26574,7 +26598,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
@@ -26583,7 +26607,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";
@@ -26632,7 +26656,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(
@@ -26733,7 +26757,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";
@@ -26744,7 +26768,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) => {
@@ -26850,7 +26874,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 = ({
@@ -26861,7 +26885,7 @@ var MenuTrigger = ({
   ...rest
 }) => {
   const editorInterface = useEditorInterface();
-  const classNames = clsx33(
+  const classNames = clsx34(
     `dropdown-menu-button ${className}`,
     "zen-mode-transition",
     {
@@ -27096,7 +27120,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
@@ -27260,7 +27284,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,
@@ -27269,7 +27293,7 @@ var FixedSideContainer = ({
 }) => /* @__PURE__ */ jsx79(
   "div",
   {
-    className: clsx35(
+    className: clsx36(
       "FixedSideContainer",
       `FixedSideContainer_side_${side}`,
       className
@@ -27279,7 +27303,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) {
@@ -27288,7 +27312,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,
@@ -27444,7 +27468,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";
 
@@ -27457,7 +27481,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";
@@ -27465,7 +27489,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
     )
@@ -27488,7 +27512,7 @@ var Modal = (props) => {
     /* @__PURE__ */ jsxs41(
       "div",
       {
-        className: clsx37("Modal", props.className, {
+        className: clsx38("Modal", props.className, {
           "animations-disabled": animationsDisabledRef.current
         }),
         role: "dialog",
@@ -27578,7 +27602,7 @@ var Dialog = (props) => {
   return /* @__PURE__ */ jsx83(
     Modal,
     {
-      className: clsx38("Dialog", props.className, {
+      className: clsx39("Dialog", props.className, {
         "Dialog--fullscreen": isFullscreen
       }),
       labelledBy: "dialog-title",
@@ -27838,7 +27862,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";
@@ -28018,7 +28042,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,
@@ -28035,7 +28059,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)
         },
@@ -28065,7 +28089,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";
@@ -28101,7 +28125,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
@@ -28112,16 +28136,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
                   })
                 }
@@ -28133,7 +28157,7 @@ var Footer = ({
         (defaultUIEnabled || renderWelcomeScreen) && /* @__PURE__ */ jsx88(
           "div",
           {
-            className: clsx40(
+            className: clsx41(
               "layer-ui__wrapper__footer-right zen-mode-transition",
               {
                 "transition-right": appState.zenModeEnabled
@@ -28230,7 +28254,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
@@ -28258,7 +28282,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,
@@ -28269,7 +28293,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,
@@ -28578,7 +28602,7 @@ var LiveCollaborationTrigger = ({
     {
       "data-testid": "collab-button",
       icon: usersIcon,
-      className: clsx42({
+      className: clsx43({
         "active-collab": isCollaborating
       }),
       onSelect,
@@ -28843,7 +28867,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";
@@ -28887,7 +28911,7 @@ var FilledButton = forwardRef3(
     return /* @__PURE__ */ jsx94(
       "button",
       {
-        className: clsx43(
+        className: clsx44(
           "ExcButton",
           `ExcButton--color-${color}`,
           `ExcButton--variant-${variant}`,
@@ -29032,13 +29056,13 @@ 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";
 import { getCommonBounds as getCommonBounds10 } from "@excalidraw/element";
 import { getUncroppedWidthAndHeight as getUncroppedWidthAndHeight3 } from "@excalidraw/element";
-import { isImageElement as isImageElement7 } from "@excalidraw/element";
+import { isImageElement as isImageElement8 } from "@excalidraw/element";
 import { frameAndChildrenSelectedTogether as frameAndChildrenSelectedTogether2 } from "@excalidraw/element";
 import { elementsAreInSameGroup as elementsAreInSameGroup3 } from "@excalidraw/element";
 
@@ -29049,7 +29073,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";
@@ -29308,7 +29332,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(
@@ -29574,7 +29598,7 @@ import {
   getUncroppedWidthAndHeight
 } from "@excalidraw/element";
 import { resizeSingleElement } from "@excalidraw/element";
-import { isImageElement as isImageElement5 } from "@excalidraw/element";
+import { isImageElement as isImageElement6 } from "@excalidraw/element";
 import { isFrameLikeElement as isFrameLikeElement14 } from "@excalidraw/element";
 import { getElementsInResizingFrame as getElementsInResizingFrame2 } from "@excalidraw/element";
 import { replaceAllElementsInFrame as replaceAllElementsInFrame2 } from "@excalidraw/element";
@@ -29605,7 +29629,7 @@ var handleDimensionChange = ({
     const aspectRatio = origElement.width / origElement.height;
     if (originalAppState.croppingElementId === origElement.id) {
       const element = elementsMap.get(origElement.id);
-      if (!element || !isImageElement5(element) || !element.crop) {
+      if (!element || !isImageElement6(element) || !element.crop) {
         return;
       }
       const crop = element.crop;
@@ -29805,7 +29829,7 @@ var DimensionDragInput = ({
   appState
 }) => {
   let value = round2(property === "width" ? element.width : element.height, 2);
-  if (appState.croppingElementId && appState.croppingElementId === element.id && isImageElement5(element) && element.crop) {
+  if (appState.croppingElementId && appState.croppingElementId === element.id && isImageElement6(element) && element.crop) {
     const { width: uncroppedWidth, height: uncroppedHeight } = getUncroppedWidthAndHeight(element);
     if (property === "width") {
       const ratio = uncroppedWidth / element.crop.naturalWidth;
@@ -30801,7 +30825,7 @@ import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight2
 } from "@excalidraw/element";
-import { isImageElement as isImageElement6 } from "@excalidraw/element";
+import { isImageElement as isImageElement7 } from "@excalidraw/element";
 import { jsx as jsx106 } from "react/jsx-runtime";
 var handlePositionChange2 = ({
   accumulatedChange,
@@ -30828,7 +30852,7 @@ var handlePositionChange2 = ({
   );
   if (originalAppState.croppingElementId === origElement.id) {
     const element = elementsMap.get(origElement.id);
-    if (!element || !isImageElement6(element) || !element.crop) {
+    if (!element || !isImageElement7(element) || !element.crop) {
       return;
     }
     const crop = element.crop;
@@ -30923,7 +30947,7 @@ var Position = ({ property, element, scene, appState }) => {
     element.angle
   );
   let value = round3(property === "x" ? topLeftX : topLeftY, 2);
-  if (appState.croppingElementId === element.id && isImageElement6(element) && element.crop) {
+  if (appState.croppingElementId === element.id && isImageElement7(element) && element.crop) {
     const flipAdjustedPosition = getFlipAdjustedCropPosition(element);
     if (flipAdjustedPosition) {
       value = round3(
@@ -30978,7 +31002,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
@@ -31013,7 +31037,7 @@ var StatsInner = memo2(
     const setAppState = useExcalidrawSetAppState();
     const singleElement = selectedElements.length === 1 ? selectedElements[0] : null;
     const multipleElements = selectedElements.length > 1 ? selectedElements : null;
-    const cropMode = appState.croppingElementId && isImageElement7(singleElement);
+    const cropMode = appState.croppingElementId && isImageElement8(singleElement);
     const unCroppedDimension = cropMode ? getUncroppedWidthAndHeight3(singleElement) : null;
     const [sceneDimension, setSceneDimension] = useState25({
       width: 0,
@@ -31115,11 +31139,11 @@ var StatsInner = memo2(
               children: /* @__PURE__ */ jsxs55(StatsRows, { children: [
                 singleElement && /* @__PURE__ */ jsxs55(Fragment16, { children: [
                   cropMode && /* @__PURE__ */ jsx107(StatsRow, { heading: true, children: t("labels.unCroppedDimension") }),
-                  appState.croppingElementId && isImageElement7(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
+                  appState.croppingElementId && isImageElement8(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
                     /* @__PURE__ */ jsx107("div", { children: t("stats.width") }),
                     /* @__PURE__ */ jsx107("div", { children: round4(unCroppedDimension.width, 2) })
                   ] }),
-                  appState.croppingElementId && isImageElement7(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
+                  appState.croppingElementId && isImageElement8(singleElement) && unCroppedDimension && /* @__PURE__ */ jsxs55(StatsRow, { columns: 2, children: [
                     /* @__PURE__ */ jsx107("div", { children: t("stats.height") }),
                     /* @__PURE__ */ jsx107("div", { children: round4(unCroppedDimension.height, 2) })
                   ] }),
@@ -31280,7 +31304,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,
@@ -31296,7 +31320,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,
@@ -31312,7 +31336,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,
@@ -31322,7 +31346,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 = ({
@@ -31340,7 +31364,7 @@ var Button = ({
         onSelect();
       }),
       type,
-      className: clsx47("excalidraw-button", className, { selected }),
+      className: clsx48("excalidraw-button", className, { selected }),
       ...rest,
       children
     }
@@ -31376,7 +31400,7 @@ var TextField = forwardRef4(
     return /* @__PURE__ */ jsxs57(
       "div",
       {
-        className: clsx48("ExcTextField", className, {
+        className: clsx49("ExcTextField", className, {
           "ExcTextField--fullWidth": fullWidth,
           "ExcTextField--hasIcon": !!icon
         }),
@@ -31389,14 +31413,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,
@@ -31585,7 +31609,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 {
@@ -31933,7 +31957,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),
@@ -32030,7 +32054,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: {
@@ -32080,7 +32104,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: {
@@ -32121,7 +32145,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";
@@ -32373,14 +32397,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")
       }
@@ -32894,6 +32918,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 {
@@ -32928,11 +33150,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"),
@@ -33048,10 +33270,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",
@@ -33070,13 +33292,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",
@@ -33088,12 +33310,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.withBackground"),
           name: "exportBackgroundSwitch",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             Switch,
             {
               name: "exportBackgroundSwitch",
@@ -33110,12 +33332,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.darkMode"),
           name: "exportDarkModeSwitch",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             Switch,
             {
               name: "exportDarkModeSwitch",
@@ -33131,13 +33353,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",
@@ -33154,12 +33376,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         ExportSetting,
         {
           label: t("imageExportDialog.label.scale"),
           name: "exportScale",
-          children: /* @__PURE__ */ jsx116(
+          children: /* @__PURE__ */ jsx117(
             RadioGroup,
             {
               name: "exportScale",
@@ -33177,7 +33399,7 @@ var ImageExportModal = ({
         }
       ),
       /* @__PURE__ */ jsxs62("div", { className: "ImageExportModal__settings__buttons", children: [
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -33189,7 +33411,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToPng")
           }
         ),
-        /* @__PURE__ */ jsx116(
+        /* @__PURE__ */ jsx117(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -33201,7 +33423,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToSvg")
           }
         ),
-        (probablySupportsClipboardBlob || isFirefox5) && /* @__PURE__ */ jsx116(
+        (probablySupportsClipboardBlob || isFirefox5) && /* @__PURE__ */ jsx117(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -33239,11 +33461,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 = ({
@@ -33261,7 +33483,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,
@@ -33276,11 +33498,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 {
@@ -33302,9 +33524,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;
@@ -33504,7 +33726,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,
@@ -33540,7 +33762,7 @@ var SearchMenu2 = () => {
           selectOnRender: true
         }
       ),
-      /* @__PURE__ */ jsx117(
+      /* @__PURE__ */ jsx118(
         Button,
         {
           "data-testid": "sidebar-close",
@@ -33561,9 +33783,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: () => {
@@ -33573,7 +33795,7 @@ var SearchMenu2 = () => {
               children: collapseDownIcon
             }
           ),
-          /* @__PURE__ */ jsx117(
+          /* @__PURE__ */ jsx118(
             Button,
             {
               onSelect: () => {
@@ -33585,9 +33807,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,
@@ -33611,11 +33833,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,
@@ -33624,7 +33846,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)) })
     }
   );
 };
@@ -33634,16 +33856,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,
@@ -33653,14 +33875,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,
@@ -33837,7 +34059,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)
@@ -33899,7 +34121,7 @@ var handleSearch = debounce3(
 );
 
 // components/Sidebar/Sidebar.tsx
-import clsx54 from "clsx";
+import clsx55 from "clsx";
 import {
   useEffect as useEffect33,
   useLayoutEffect as useLayoutEffect9,
@@ -33918,7 +34140,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
@@ -33926,7 +34148,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
@@ -33937,12 +34159,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),
@@ -33953,7 +34175,7 @@ var SidebarHeader = ({
               children: PinIcon
             }
           ) }),
-          /* @__PURE__ */ jsx118(
+          /* @__PURE__ */ jsx119(
             Button,
             {
               "data-testid": "sidebar-close",
@@ -33972,14 +34194,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",
@@ -33993,18 +34215,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,
@@ -34018,7 +34240,7 @@ var SidebarTrigger = ({
   const setAppState = useExcalidrawSetAppState();
   const appState = useUIAppState();
   const isOpen = appState.openSidebar?.name === name;
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx122(
     "button",
     {
       type: "button",
@@ -34037,9 +34259,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 })
       ] })
     }
   );
@@ -34048,7 +34270,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
@@ -34059,7 +34281,7 @@ var SidebarTabs = ({
     return null;
   }
   const { name } = appState.openSidebar;
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx123(
     RadixTabs3.Root,
     {
       className: "sidebar-tabs-root",
@@ -34077,18 +34299,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(
@@ -34162,11 +34384,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
@@ -34174,7 +34396,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 })
       }
     );
   }
@@ -34221,18 +34443,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
       }
     ) });
   }
@@ -34240,7 +34462,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(
@@ -34255,7 +34477,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(
@@ -34264,7 +34486,7 @@ var DefaultSidebar = Object.assign(
           ...rest,
           name: "default",
           key: "default",
-          className: clsx55(
+          className: clsx56(
             "default-sidebar",
             { "default-sidebar--search-only": isSearchSidebar },
             className
@@ -34278,8 +34500,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
         ] })
       );
@@ -34296,7 +34518,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)",
@@ -34321,7 +34543,7 @@ var COLOR_MAP = {
   }
 };
 var Card = ({ children, color }) => {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx127(
     "div",
     {
       className: "Card",
@@ -34336,7 +34558,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,
@@ -34348,15 +34570,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",
@@ -34371,10 +34593,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",
@@ -34409,7 +34631,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,
@@ -34425,13 +34647,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",
@@ -34447,214 +34669,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 isImageElement8,
-  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 isImageElement8(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 && isImageElement8(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,
@@ -34795,7 +34821,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
@@ -34957,7 +34983,7 @@ var Toolbar = ({
     Island,
     {
       padding: 1,
-      className: clsx58("App-toolbar", {
+      className: clsx59("App-toolbar", {
         "zen-mode": appState.zenModeEnabled,
         "App-toolbar--compact": isCompactStylesPanel
       }),
@@ -35153,13 +35179,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",
@@ -35213,13 +35239,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()
@@ -35238,13 +35264,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: [
@@ -35287,7 +35323,7 @@ var LayerUI = ({
       /* @__PURE__ */ jsxs69(
         "div",
         {
-          className: clsx59(
+          className: clsx60(
             "layer-ui__wrapper__top-right zen-mode-transition",
             {
               "transition-right": appState.zenModeEnabled,
@@ -35701,7 +35737,7 @@ var InteractiveCanvas = (props) => {
       onPointerCancel: props.onPointerCancel,
       onTouchMove: props.onTouchMove,
       onPointerDown: props.onPointerDown,
-      onDoubleClick: props.appState.viewModeEnabled ? void 0 : props.onDoubleClick,
+      onDoubleClick: props.onDoubleClick,
       children: t("labels.drawingCanvas")
     }
   );
@@ -36032,7 +36068,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";
@@ -36151,7 +36187,7 @@ var CursorHint = () => {
     "div",
     {
       ref: hintRef,
-      className: clsx60("CursorHint", {
+      className: clsx61("CursorHint", {
         "CursorHint--fade-out": isFadingOut
       }),
       "data-testid": "cursor-hint",
@@ -36410,6 +36446,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;
@@ -36509,6 +36546,10 @@ var App = class _App extends React41.Component {
     /** current frame pointer cords */
     __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));
@@ -36966,6 +37007,7 @@ var App = class _App extends React41.Component {
     // Lifecycle
     __publicField(this, "onBlur", withBatchedUpdates(() => {
       isHoldingSpace = false;
+      this.resetSmartZoomKey();
       this.setState({
         isBindingEnabled: this.state.bindingPreference === "enabled"
       });
@@ -37030,6 +37072,7 @@ var App = class _App extends React41.Component {
       this.maybeCleanupAfterMissingPointerUp(null);
       isHoldingSpace = false;
       isHoldingZ = false;
+      this.resetSmartZoomKey();
       isPanning = false;
       isDraggingScrollBar = false;
       lastPointerUp = null;
@@ -38108,7 +38151,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()) {
@@ -38138,10 +38250,28 @@ var App = class _App extends React41.Component {
             this.scene.getNonDeletedElementsMap(),
             this.state
           );
-          if (selectedElements.length === 1 && isImageElement9(selectedElements[0]) && event.key === KEYS53.ENTER) {
+          if (selectedElements.length === 1 && isImageElement10(selectedElements[0]) && event.key === KEYS53.ENTER) {
             this.startImageCropping(selectedElements[0]);
             return;
           }
+          if (selectedElements.length === 0 && (event.key === KEYS53.ARROW_LEFT || event.key === KEYS53.ARROW_RIGHT) && !event[KEYS53.CTRL_OR_CMD] && !event.shiftKey && !event.altKey) {
+            const elementsMap = this.scene.getNonDeletedElementsMap();
+            const targetImage = getNextSmartZoomImage(
+              this.scene.getNonDeletedElements(),
+              elementsMap,
+              this.lastKeyboardSmartZoomImageId,
+              event.key === KEYS53.ARROW_RIGHT ? "next" : "previous"
+            );
+            if (targetImage) {
+              this.lastKeyboardSmartZoomImageId = targetImage.id;
+              this.actionManager.executeAction(actionSmartZoom, "keyboard", [
+                targetImage
+              ]);
+              event.preventDefault();
+              event.stopPropagation();
+              return;
+            }
+          }
           if (event.key === KEYS53.ESCAPE) {
             this.updateEditorAtom(convertElementTypePopupAtom, null);
           } else if (event.key === KEYS53.TAB && (document.activeElement === this.excalidrawContainerRef?.current || document.activeElement?.classList.contains(
@@ -38216,6 +38346,9 @@ var App = class _App extends React41.Component {
             maybeHandleArrowPointlikeDrag({ app: this, event });
           }
         }
+        if (this.handleSmartZoomKeyDown(event)) {
+          return;
+        }
         if (this.actionManager.handleKeyDown(event)) {
           return;
         }
@@ -38422,6 +38555,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);
@@ -38905,12 +39041,26 @@ var App = class _App extends React41.Component {
       ) <= DOUBLE_TAP_POSITION_THRESHOLD;
     });
     __publicField(this, "handleCanvasDoubleClick", (event) => {
-      if (!this.isInteractionEnabled() || this.state.editingTextElement || !this.shouldHandleBrowserCanvasDoubleClick(event.type)) {
+      if (!this.isInteractionEnabled() || this.state.editingTextElement || !this.state.viewModeEnabled && !this.shouldHandleBrowserCanvasDoubleClick(event.type)) {
         return;
       }
       if (this.state.multiElement) {
         return;
       }
+      if (this.state.viewModeEnabled) {
+        const { x: sceneX2, y: sceneY2 } = viewportCoordsToSceneCoords3(
+          event,
+          this.state
+        );
+        const hitElement2 = this.getElementAtPosition(sceneX2, sceneY2, {
+          includeLockedElements: true
+        });
+        if (hitElement2) {
+          this.cursor.reset();
+          this.actionManager.executeAction(actionSmartZoom, "ui", [hitElement2]);
+        }
+        return;
+      }
       if (this.state.activeTool.type !== this.state.preferredSelectionTool.type && this.state.activeTool.type !== "autoshape") {
         return;
       }
@@ -38979,15 +39129,18 @@ var App = class _App extends React41.Component {
           return;
         }
       }
-      if (selectedElements.length === 1 && isImageElement9(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) => ({
@@ -38995,7 +39148,7 @@ var App = class _App extends React41.Component {
             ...selectGroupsForSelectedElements7(
               {
                 editingGroupId: selectedGroupId,
-                selectedElementIds: { [hitElement.id]: true }
+                selectedElementIds: { [hitElement2.id]: true }
               },
               this.scene.getNonDeletedElements(),
               prevState,
@@ -39007,14 +39160,20 @@ 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;
         }
         if (!this.state.selectedLinearElement?.isEditing) {
+          const lockedElement = this.getElementAtPosition(sceneX, sceneY, {
+            includeLockedElements: true
+          });
+          if (lockedElement?.locked) {
+            return;
+          }
           const container = (
             // skip binding to container on dblclick when holding ctrl
             !event[KEYS53.CTRL_OR_CMD] && this.getTextBindableContainerAtPosition(sceneX, sceneY)
@@ -39057,7 +39216,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();
@@ -39081,7 +39261,7 @@ var App = class _App extends React41.Component {
       const elements = this.visibleElements.length ? this.visibleElements : this.scene.getNonDeletedElements();
       for (let index = elements.length - 1; index >= 0; index--) {
         const element = elements[index];
-        if (!isImageElement9(element) || !element.fileId) {
+        if (!isImageElement10(element) || !element.fileId) {
           continue;
         }
         const imageStatus = this.imageStatus.get(element.fileId);
@@ -39848,6 +40028,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(
@@ -39891,6 +40075,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);
@@ -41951,7 +42138,7 @@ var App = class _App extends React41.Component {
           y: gridY,
           width: distance2(pointerDownState.originInGrid.x, gridX),
           height: distance2(pointerDownState.originInGrid.y, gridY),
-          shouldMaintainAspectRatio: isImageElement9(newElement9) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+          shouldMaintainAspectRatio: isImageElement10(newElement9) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
           shouldResizeFromCenter: shouldResizeFromCenter(event),
           zoom: this.state.zoom.value,
           scene: this.scene,
@@ -41987,12 +42174,12 @@ var App = class _App extends React41.Component {
         event[KEYS53.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
       const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
-      if (transformHandleType && croppingElement && isImageElement9(croppingElement)) {
+      if (transformHandleType && croppingElement && isImageElement10(croppingElement)) {
         const croppingAtStateStart = pointerDownState.originalElements.get(
           croppingElement.id
         );
         const image = isInitializedImageElement5(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
-        if (croppingAtStateStart && isImageElement9(croppingAtStateStart) && image && !(image instanceof Promise)) {
+        if (croppingAtStateStart && isImageElement10(croppingAtStateStart) && image && !(image instanceof Promise)) {
           const [gridX, gridY] = getGridPoint4(
             pointerCoords.x,
             pointerCoords.y,
@@ -42106,7 +42293,7 @@ var App = class _App extends React41.Component {
         this.scene,
         shouldRotateWithDiscreteAngle4(event),
         shouldResizeFromCenter(event),
-        selectedElements.some((element) => isImageElement9(element)) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+        selectedElements.some((element) => isImageElement10(element)) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
         resizeX,
         resizeY,
         pointerDownState.resize.center.x,
@@ -42142,17 +42329,17 @@ var App = class _App extends React41.Component {
         return [];
       }
       const selectedElements = this.scene.getSelectedElements(this.state);
-      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement9(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
+      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement10(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
         return [...getHostItems(selectedElements.map((element) => element.id))];
       }
-      if (hitElement && isImageElement9(hitElement)) {
+      if (hitElement && isImageElement10(hitElement)) {
         return [...getHostItems([hitElement.id])];
       }
       return [];
     });
     __publicField(this, "getImageActionContextMenuItems", (hitElement) => {
       const selectedElements = this.scene.getSelectedElements(this.state);
-      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement9(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
+      if (selectedElements.length > 0 && selectedElements.every((element) => isImageElement10(element)) && (!hitElement || this.state.selectedElementIds[hitElement.id])) {
         return [actionArrangeElements, actionNormaliseElements];
       }
       return [];
@@ -42839,8 +43026,8 @@ var App = class _App extends React41.Component {
       );
       const startElement = startDragged2 ? hoveredElement : arrow.startBinding && elementsMap.get(arrow.startBinding.elementId);
       const endElement = endDragged2 ? hoveredElement : arrow.endBinding && elementsMap.get(arrow.endBinding.elementId);
-      const startBounds = startElement && getElementBounds4(startElement, elementsMap);
-      const endBounds = endElement && getElementBounds4(endElement, elementsMap);
+      const startBounds = startElement && getElementBounds5(startElement, elementsMap);
+      const endBounds = endElement && getElementBounds5(endElement, elementsMap);
       isOverlapping = !!(startBounds && endBounds && startElement.id !== endElement.id && doBoundsIntersect4(startBounds, endBounds));
     }
     const startDragged = this.state.selectedLinearElement?.selectedPointsIndices?.includes(0);
@@ -43047,7 +43234,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: {
@@ -43164,7 +43351,7 @@ var App = class _App extends React41.Component {
       "div",
       {
         translate: "no",
-        className: clsx61(
+        className: clsx62(
           "excalidraw excalidraw-container notranslate",
           this.props.className,
           {
@@ -44927,7 +45114,7 @@ var App = class _App extends React41.Component {
           }
           if (this.state.croppingElementId) {
             const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
-            if (croppingElement && isImageElement9(croppingElement) && croppingElement.crop !== null && pointerDownState.hit.element === croppingElement) {
+            if (croppingElement && isImageElement10(croppingElement) && croppingElement.crop !== null && pointerDownState.hit.element === croppingElement) {
               const crop = croppingElement.crop;
               const image = isInitializedImageElement5(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
               if (image && !(image instanceof Promise)) {
@@ -46165,7 +46352,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();
@@ -46173,7 +46360,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
@@ -46184,7 +46371,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 = ({
@@ -46199,7 +46386,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" },