@myoc/excalidraw 0.19.532 → 0.19.534

package/dist/dev/index.js

@@ -63,10 +63,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-ITMOGRAW.js";
+} from "./chunk-LMB2JFA3.js";
 import {
   define_import_meta_env_default
-} from "./chunk-ASAPRLCW.js";
+} from "./chunk-LXITAORX.js";
 import {
   en_default
 } from "./chunk-SKCAT7JG.js";
@@ -80,7 +80,7 @@ import {
 } from "./chunk-XDFCUUT6.js";
 
 // index.tsx
-import React42, {
+import React43, {
   useCallback as useCallback13,
   useContext as useContext5,
   useEffect as useEffect40,
@@ -96,9 +96,9 @@ import {
 } from "@excalidraw/common";
 
 // components/App.tsx
-import clsx60 from "clsx";
+import clsx61 from "clsx";
 import throttle3 from "lodash.throttle";
-import React40, { useContext as useContext4 } from "react";
+import React41, { useContext as useContext4 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
 import rough3 from "roughjs/bin/rough";
 import { nanoid } from "nanoid";
@@ -134,7 +134,7 @@ import {
   IMAGE_MIME_TYPES as IMAGE_MIME_TYPES2,
   IMAGE_RENDER_TIMEOUT,
   LINE_CONFIRM_THRESHOLD as LINE_CONFIRM_THRESHOLD2,
-  MIME_TYPES as MIME_TYPES9,
+  MIME_TYPES as MIME_TYPES11,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
   POINTER_BUTTON as POINTER_BUTTON2,
   ROUNDNESS as ROUNDNESS8,
@@ -166,7 +166,7 @@ import {
   isInputLike,
   isToolIcon,
   isWritableElement as isWritableElement4,
-  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords6,
+  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords7,
   tupleToCoors,
   viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3,
   wrapEvent as wrapEvent2,
@@ -206,7 +206,7 @@ import {
 } from "@excalidraw/common";
 import {
   getObservedAppState as getObservedAppState2,
-  getCommonBounds as getCommonBounds13,
+  getCommonBounds as getCommonBounds14,
   getElementAbsoluteCoords as getElementAbsoluteCoords8,
   bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
   fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
@@ -214,7 +214,7 @@ import {
   isBindingEnabled as isBindingEnabled3,
   updateBoundElements as updateBoundElements6,
   LinearElementEditor as LinearElementEditor12,
-  newElementWith as newElementWith10,
+  newElementWith as newElementWith11,
   newFrameElement as newFrameElement3,
   newFreeDrawElement,
   newEmbeddableElement,
@@ -236,7 +236,7 @@ import {
   isFrameLikeElement as isFrameLikeElement17,
   isImageElement as isImageElement9,
   isEmbeddableElement as isEmbeddableElement4,
-  isInitializedImageElement as isInitializedImageElement3,
+  isInitializedImageElement as isInitializedImageElement5,
   isLinearElement as isLinearElement11,
   isLinearElementType as isLinearElementType2,
   isUsingAdaptiveRadius as isUsingAdaptiveRadius5,
@@ -294,7 +294,7 @@ import {
   getApproxMinLineWidth as getApproxMinLineWidth3,
   getApproxMinLineHeight as getApproxMinLineHeight2,
   getMinTextElementWidth as getMinTextElementWidth2,
-  ShapeCache as ShapeCache5,
+  ShapeCache as ShapeCache7,
   getRenderOpacity,
   editGroupForSelectedElement,
   getElementsInGroup as getElementsInGroup12,
@@ -638,6 +638,10 @@ var PlusIcon = createIcon(
   ] }),
   tablerIconProps
 );
+var CirclePauseIcon = createIcon(
+  "M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 248C288 234.7 277.3 224 264 224C250.7 224 240 234.7 240 248L240 392C240 405.3 250.7 416 264 416C277.3 416 288 405.3 288 392L288 248zM400 248C400 234.7 389.3 224 376 224C362.7 224 352 234.7 352 248L352 392C352 405.3 362.7 416 376 416C389.3 416 400 405.3 400 392L400 248z",
+  640
+);
 var DotsIcon = createIcon(
   /* @__PURE__ */ jsxs("g", { strokeWidth: "1.5", children: [
     /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
@@ -2482,6 +2486,33 @@ var playerStopFilledIcon = createIcon(
   ] }),
   tablerIconProps
 );
+var prevFrame = createIcon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M7 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6l-9 6l9 6z" })
+  ] }),
+  tablerIconProps
+);
+var nextFrame = createIcon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M17 5v14" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 6l9 6l-9 6z" })
+  ] }),
+  tablerIconProps
+);
+var frames = createIcon(
+  /* @__PURE__ */ jsxs("g", { strokeWidth: 1.25, children: [
+    /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10a1 1 0 0 1 1 -1z" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 6v12" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 6v12" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 14h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 10h4" }),
+    /* @__PURE__ */ jsx("path", { d: "M17 14h4" })
+  ] }),
+  tablerIconProps
+);
 var tablerCheckIcon = createIcon(
   /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
@@ -10937,7 +10968,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-S7APFFV6.js").then(
+        (blob2) => import("./data/image-42C5IMES.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -15033,8 +15064,15 @@ import { invariant as invariant9 } from "@excalidraw/common";
 import { arrayToMap as arrayToMap23, findIndex, findLastIndex as findLastIndex2 } from "@excalidraw/common";
 import { isFiniteNumber } from "@excalidraw/math";
 
+// ../element/src/gif.ts
+import { decode, decodeFrames } from "modern-gif";
+
 // ../element/src/image.ts
-import { MIME_TYPES as MIME_TYPES4, SVG_NS } from "@excalidraw/common";
+import {
+  DEFAULT_GIF_AUTO_DECODE_MAX_FILE_SIZE_BYTES,
+  MIME_TYPES as MIME_TYPES4,
+  SVG_NS
+} from "@excalidraw/common";
 import { rgbaToThumbHash, thumbHashToRGBA } from "thumbhash";
 
 // ../element/src/resizeElements.ts
@@ -24432,6 +24470,125 @@ var AppFlowchart = class _AppFlowchart {
   }
 };
 
+// components/App.gif.ts
+import {
+  createGifPlaybackMetadata,
+  hasPlayableGif,
+  isInitializedImageElement as isInitializedImageElement3,
+  newElementWith as newElementWith10,
+  ShapeCache as ShapeCache4
+} from "@excalidraw/element";
+import { MIME_TYPES as MIME_TYPES8 } from "@excalidraw/common";
+var AppGifPlayback = class {
+  constructor(app) {
+    this.app = app;
+    __publicField(this, "playbackRaf", null);
+    __publicField(this, "runtimeState", /* @__PURE__ */ new Map());
+    __publicField(this, "stop", () => {
+      if (this.playbackRaf !== null) {
+        cancelAnimationFrame(this.playbackRaf);
+        this.playbackRaf = null;
+      }
+      this.runtimeState.clear();
+    });
+    __publicField(this, "getFrameIndex", (element) => element.gifPlayback?.playing ? this.runtimeState.get(element.id)?.frameIndex ?? element.gifPlayback.frameIndex : element.gifPlayback?.frameIndex);
+    __publicField(this, "setFrameIndex", (element, frameIndex) => {
+      this.runtimeState.set(element.id, {
+        frameIndex,
+        lastFrameTime: performance.now()
+      });
+    });
+    __publicField(this, "ensureLoop", () => {
+      if (this.playbackRaf !== null || this.app.unmounted) {
+        return;
+      }
+      if (!hasPlayableGif(
+        this.app.scene.getNonDeletedElements(),
+        this.app.imageCache
+      )) {
+        return;
+      }
+      this.playbackRaf = requestAnimationFrame(this.tick);
+    });
+    __publicField(this, "createPlaceholderDecodeState", (placeholderImageElement, imageFile) => {
+      if (imageFile.type !== MIME_TYPES8.gif) {
+        return null;
+      }
+      const placeholderGifFileId = placeholderImageElement.id;
+      this.app.imageCache.set(placeholderGifFileId, {
+        image: new Promise(() => {
+        }),
+        mimeType: MIME_TYPES8.gif,
+        gifDecodeStatus: "pending"
+      });
+      const gifPlaceholder = newElementWith10(placeholderImageElement, {
+        fileId: placeholderGifFileId,
+        gifPlayback: createGifPlaybackMetadata({ playing: true })
+      });
+      this.app.scene.replaceAllElements(
+        this.app.scene.getElementsIncludingDeleted().map(
+          (element) => element.id === gifPlaceholder.id ? gifPlaceholder : element
+        )
+      );
+      this.app.imagePlaceholderUpdateEmitter.trigger();
+      return placeholderGifFileId;
+    });
+    __publicField(this, "ensureElementPlaybackMetadata", (element, opts = {}) => {
+      const shouldUseExisting = element.gifPlayback && (opts.playing === void 0 || element.gifPlayback.playing === opts.playing);
+      return shouldUseExisting ? element : newElementWith10(element, {
+        gifPlayback: element.gifPlayback ? {
+          ...element.gifPlayback,
+          playing: opts.playing ?? element.gifPlayback.playing
+        } : createGifPlaybackMetadata(opts)
+      });
+    });
+    __publicField(this, "removePlaceholderDecodeState", (placeholderGifFileId) => {
+      if (placeholderGifFileId) {
+        this.app.imageCache.delete(placeholderGifFileId);
+      }
+    });
+    __publicField(this, "tick", () => {
+      this.playbackRaf = null;
+      if (this.app.unmounted) {
+        return;
+      }
+      const now = performance.now();
+      let didAdvanceFrame = false;
+      let shouldContinue = false;
+      for (const element of this.app.scene.getNonDeletedElements()) {
+        if (!isInitializedImageElement3(element) || !element.gifPlayback?.playing) {
+          continue;
+        }
+        const gif = this.app.imageCache.get(element.fileId)?.gif;
+        if (!gif || gif.frames.length < 2) {
+          continue;
+        }
+        shouldContinue = true;
+        const speed = Math.max(element.gifPlayback.speed || 1, 0.1);
+        const runtimeState = this.runtimeState.get(element.id) ?? {
+          frameIndex: element.gifPlayback.frameIndex,
+          lastFrameTime: now
+        };
+        this.runtimeState.set(element.id, runtimeState);
+        const currentFrameIndex = runtimeState.frameIndex;
+        const delay = gif.delays[currentFrameIndex] ?? 100;
+        if (now - runtimeState.lastFrameTime >= delay / speed) {
+          runtimeState.frameIndex = (currentFrameIndex + 1) % gif.frames.length;
+          runtimeState.lastFrameTime = now;
+          ShapeCache4.delete(element);
+          didAdvanceFrame = true;
+        }
+      }
+      if (didAdvanceFrame) {
+        this.app.scene.triggerUpdate();
+      }
+      if (shouldContinue) {
+        this.playbackRaf = requestAnimationFrame(this.tick);
+      }
+    });
+  }
+};
+
 // components/App.viewport.ts
 import {
   debounce as debounce2,
@@ -25411,17 +25568,16 @@ var ViewportStatusBadge = ({
 };
 
 // components/LayerUI.tsx
-import clsx58 from "clsx";
-import React37 from "react";
+import clsx59 from "clsx";
+import React38 from "react";
 import {
   CLASSES as CLASSES9,
   TOOL_TYPE as TOOL_TYPE2,
   arrayToMap as arrayToMap33,
   isShallowEqual as isShallowEqual6
 } from "@excalidraw/common";
-import { mutateElement as mutateElement6 } from "@excalidraw/element";
+import { mutateElement as mutateElement6, ShapeCache as ShapeCache6 } from "@excalidraw/element";
 import { showSelectedShapeActions } from "@excalidraw/element";
-import { ShapeCache as ShapeCache4 } from "@excalidraw/element";
 
 // context/tunnels.ts
 import { createIsolation as createIsolation2 } from "jotai-scope";
@@ -29733,7 +29889,7 @@ import { getBoundTextElement as getBoundTextElement14, handleBindTextResize as h
 import { isTextElement as isTextElement13 } from "@excalidraw/element";
 
 // ../utils/src/export.ts
-import { MIME_TYPES as MIME_TYPES8 } from "@excalidraw/common";
+import { MIME_TYPES as MIME_TYPES9 } from "@excalidraw/common";
 import { getNonDeletedElements as getNonDeletedElements17 } from "@excalidraw/element";
 var exportToCanvas2 = ({
   elements,
@@ -29784,16 +29940,16 @@ var exportToCanvas2 = ({
   );
 };
 var exportToBlob = async (opts) => {
-  let { mimeType = MIME_TYPES8.png, quality } = opts;
-  if (mimeType === MIME_TYPES8.png && typeof quality === "number") {
-    console.warn(`"quality" will be ignored for "${MIME_TYPES8.png}" mimeType`);
+  let { mimeType = MIME_TYPES9.png, quality } = opts;
+  if (mimeType === MIME_TYPES9.png && typeof quality === "number") {
+    console.warn(`"quality" will be ignored for "${MIME_TYPES9.png}" mimeType`);
   }
   if (mimeType === "image/jpg") {
-    mimeType = MIME_TYPES8.jpg;
+    mimeType = MIME_TYPES9.jpg;
   }
-  if (mimeType === MIME_TYPES8.jpg && !opts.appState?.exportBackground) {
+  if (mimeType === MIME_TYPES9.jpg && !opts.appState?.exportBackground) {
     console.warn(
-      `Defaulting "exportBackground" to "true" for "${MIME_TYPES8.jpg}" mimeType`
+      `Defaulting "exportBackground" to "true" for "${MIME_TYPES9.jpg}" mimeType`
     );
     opts = {
       ...opts,
@@ -29808,7 +29964,7 @@ var exportToBlob = async (opts) => {
         if (!blob) {
           return reject(new Error("couldn't export to blob"));
         }
-        if (blob && mimeType === MIME_TYPES8.png && opts.appState?.exportEmbedScene) {
+        if (blob && mimeType === MIME_TYPES9.png && opts.appState?.exportEmbedScene) {
           blob = await encodePngMetadata({
             blob,
             metadata: serializeAsJSON(
@@ -31301,9 +31457,544 @@ var ErrorDialog = ({
   ) });
 };
 
-// components/HelpDialog.tsx
-import React32, { useMemo as useMemo10 } from "react";
+// components/GifPlaybackControls.tsx
 import clsx48 from "clsx";
+import React32 from "react";
+import { MIME_TYPES as MIME_TYPES10, sceneCoordsToViewportCoords as sceneCoordsToViewportCoords4 } from "@excalidraw/common";
+import {
+  getCommonBounds as getCommonBounds11,
+  isInitializedImageElement as isInitializedImageElement4,
+  ShapeCache as ShapeCache5
+} from "@excalidraw/element";
+import { Fragment as Fragment18, jsx as jsx112, jsxs as jsxs58 } from "react/jsx-runtime";
+var gifPlayIcon = /* @__PURE__ */ jsx112("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx112("path", { d: "M8 5v14l11 -7z" }) });
+var gifPauseIcon = /* @__PURE__ */ jsxs58("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx112("path", { d: "M8 5v14" }),
+  /* @__PURE__ */ jsx112("path", { d: "M16 5v14" })
+] });
+var GIF_FRAME_GALLERY_ITEM_WIDTH = 76;
+var GIF_FRAME_GALLERY_ITEM_GAP = 4;
+var GIF_FRAME_GALLERY_ITEM_PITCH = GIF_FRAME_GALLERY_ITEM_WIDTH + GIF_FRAME_GALLERY_ITEM_GAP;
+var GIF_FRAME_GALLERY_OVERSCAN = 8;
+var GIF_POPUP_GAP = 8;
+var getClampedCenteredPopupLeft = (anchorCenterX, popupWidth) => {
+  const halfPopupWidth = popupWidth / 2;
+  return Math.min(
+    Math.max(anchorCenterX, halfPopupWidth + GIF_POPUP_GAP),
+    window.innerWidth - halfPopupWidth - GIF_POPUP_GAP
+  );
+};
+var getGifControlPosition = (element, appState) => {
+  const [, , x2, y2] = getCommonBounds11([element]);
+  const bottomRight = sceneCoordsToViewportCoords4(
+    { sceneX: x2, sceneY: y2 },
+    appState
+  );
+  return {
+    left: Math.min(
+      Math.max(bottomRight.x - appState.offsetLeft, 8),
+      appState.width - 8
+    ),
+    top: Math.min(
+      Math.max(bottomRight.y - appState.offsetTop, 8),
+      appState.height - 8
+    )
+  };
+};
+var GifPlaybackControls = ({
+  app,
+  files,
+  setAppState
+}) => {
+  const liveAppState = useExcalidrawAppState();
+  const [, rerenderGifControls] = React32.useReducer(
+    (version) => version + 1,
+    0
+  );
+  const [gifGalleryScrollLeft, setGifGalleryScrollLeft] = React32.useState(0);
+  const [isGifGalleryDragging, setIsGifGalleryDragging] = React32.useState(false);
+  const speedButtonRef = React32.useRef(null);
+  const framesButtonRef = React32.useRef(null);
+  const speedPickerRef = React32.useRef(null);
+  const frameGalleryRef = React32.useRef(null);
+  const frameGalleryDragRef = React32.useRef(null);
+  const suppressNextFrameClickRef = React32.useRef(false);
+  const [gifPopupPosition, setGifPopupPosition] = React32.useState(null);
+  React32.useLayoutEffect(() => {
+    const popup = liveAppState.openPopup;
+    if (popup !== "gifSpeedPicker" && popup !== "gifFrameGallery") {
+      if (gifPopupPosition !== null) {
+        setGifPopupPosition(null);
+      }
+      return;
+    }
+    const anchor = popup === "gifSpeedPicker" ? speedButtonRef.current : framesButtonRef.current;
+    const popupElement = popup === "gifSpeedPicker" ? speedPickerRef.current : frameGalleryRef.current;
+    if (!anchor || !popupElement) {
+      return;
+    }
+    const anchorRect = anchor.getBoundingClientRect();
+    const popupRect = popupElement.getBoundingClientRect();
+    const left = getClampedCenteredPopupLeft(
+      anchorRect.left + anchorRect.width / 2,
+      popupRect.width
+    );
+    const top = popup === "gifSpeedPicker" ? Math.max(
+      GIF_POPUP_GAP,
+      anchorRect.top - popupRect.height - GIF_POPUP_GAP
+    ) : Math.min(
+      window.innerHeight - popupRect.height - GIF_POPUP_GAP,
+      anchorRect.bottom + GIF_POPUP_GAP
+    );
+    const nextPosition = {
+      left,
+      top: Math.max(GIF_POPUP_GAP, top)
+    };
+    setGifPopupPosition(
+      (currentPosition) => currentPosition?.left === nextPosition.left && currentPosition.top === nextPosition.top ? currentPosition : nextPosition
+    );
+  }, [
+    gifGalleryScrollLeft,
+    gifPopupPosition,
+    liveAppState.openPopup,
+    liveAppState.scrollX,
+    liveAppState.scrollY,
+    liveAppState.zoom.value
+  ]);
+  const updateGifPlayback = (element, gifPlayback) => {
+    ShapeCache5.delete(element);
+    app.scene.mutateElement(element, {
+      gifPlayback
+    });
+    app.scheduleUpdate();
+    setAppState({});
+    rerenderGifControls();
+    if (gifPlayback.playing) {
+      app.ensureGifPlaybackLoop();
+    }
+  };
+  const deferredGifBadges = app.scene.getNonDeletedElements().filter(
+    (element) => isInitializedImageElement4(element) && !liveAppState.selectedElementIds[element.id] && files[element.fileId]?.mimeType === MIME_TYPES10.gif && app.imageCache.get(element.fileId)?.gifDecodeStatus === "deferred"
+  ).map((element) => {
+    const position = getGifControlPosition(element, liveAppState);
+    return /* @__PURE__ */ jsx112(
+      "span",
+      {
+        className: "gif-playback-controls gif-playback-controls__deferred-badge",
+        role: "img",
+        "aria-label": "GIF paused",
+        style: position,
+        children: CirclePauseIcon
+      },
+      element.id
+    );
+  });
+  const selectedElements = app.scene.getSelectedElements(liveAppState);
+  const selectedElementControls = () => {
+    if (selectedElements.length !== 1) {
+      return null;
+    }
+    const selectedElement = selectedElements[0];
+    if (!isInitializedImageElement4(selectedElement) || files[selectedElement.fileId]?.mimeType !== MIME_TYPES10.gif) {
+      return null;
+    }
+    const cacheEntry = app.imageCache.get(selectedElement.fileId);
+    const gif = cacheEntry?.gif;
+    const [x1, , x2, y2] = getCommonBounds11([selectedElement]);
+    const leftTop = sceneCoordsToViewportCoords4(
+      { sceneX: x1, sceneY: y2 },
+      liveAppState
+    );
+    const rightTop = sceneCoordsToViewportCoords4(
+      { sceneX: x2, sceneY: y2 },
+      liveAppState
+    );
+    const width = rightTop.x - leftTop.x;
+    const left = leftTop.x - liveAppState.offsetLeft + width / 2;
+    const top = Math.max(
+      12,
+      Math.min(
+        liveAppState.height - 86,
+        leftTop.y - liveAppState.offsetTop + 16
+      )
+    );
+    if (cacheEntry?.gifDecodeStatus === "deferred") {
+      const position = getGifControlPosition(selectedElement, liveAppState);
+      return /* @__PURE__ */ jsx112(
+        "div",
+        {
+          className: "gif-playback-controls gif-playback-controls--deferred",
+          style: position,
+          onPointerDown: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx112(
+            "button",
+            {
+              type: "button",
+              className: "gif-playback-controls__load-large",
+              title: "Load Large GIF",
+              onClick: () => {
+                app.loadDeferredGif(selectedElement.fileId);
+              },
+              children: "Load Large GIF"
+            }
+          )
+        }
+      );
+    }
+    if (cacheEntry?.gifDecodeStatus === "pending") {
+      return null;
+    }
+    const frameCount = gif?.frames.length ?? 0;
+    if (!gif || frameCount < 2) {
+      return null;
+    }
+    const playback = selectedElement.gifPlayback ?? {
+      frameIndex: 0,
+      speed: 1,
+      playing: false
+    };
+    const viewportAppState = app.state;
+    const runtimeFrameIndex = app.getGifPlaybackFrameIndex(selectedElement) ?? playback.frameIndex;
+    const frameIndex = Math.min(Math.max(runtimeFrameIndex, 0), frameCount - 1);
+    const galleryTop = Math.min(viewportAppState.height - 120, top + 48);
+    const speedPickerTop = Math.max(12, top - 52);
+    const commitFrame = (nextFrameIndex) => {
+      const normalizedFrameIndex = (nextFrameIndex + frameCount) % frameCount;
+      app.setGifPlaybackFrameIndex(selectedElement, normalizedFrameIndex);
+      updateGifPlayback(selectedElement, {
+        ...playback,
+        frameIndex: normalizedFrameIndex,
+        playing: false
+      });
+    };
+    const wheelFrame = (event) => {
+      event.stopPropagation();
+      commitFrame(frameIndex + (event.deltaY < 0 ? 1 : -1));
+    };
+    const setPlaying = (playing) => {
+      app.setGifPlaybackFrameIndex(selectedElement, frameIndex);
+      updateGifPlayback(selectedElement, {
+        ...playback,
+        frameIndex,
+        playing
+      });
+    };
+    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4];
+    const getSpeedIndex = (speed) => {
+      const exactIndex = speeds.indexOf(speed);
+      if (exactIndex !== -1) {
+        return exactIndex;
+      }
+      return speeds.reduce(
+        (nearestIndex, candidate, index) => Math.abs(candidate - speed) < Math.abs(speeds[nearestIndex] - speed) ? index : nearestIndex,
+        0
+      );
+    };
+    const setSpeed = (speed) => {
+      updateGifPlayback(selectedElement, {
+        ...playback,
+        speed
+      });
+    };
+    const stepSpeed = (direction) => {
+      const currentIndex = getSpeedIndex(playback.speed);
+      setSpeed(
+        speeds[Math.min(Math.max(currentIndex + direction, 0), speeds.length - 1)]
+      );
+    };
+    const speedLabel = Number.isInteger(playback.speed) ? `${playback.speed}` : `${playback.speed}`;
+    const galleryScrollWidth = frameCount * GIF_FRAME_GALLERY_ITEM_PITCH - GIF_FRAME_GALLERY_ITEM_GAP;
+    const galleryViewportWidth = Math.min(
+      Math.max(viewportAppState.width * 0.9, 1),
+      galleryScrollWidth
+    );
+    const galleryMaxScrollLeft = Math.max(
+      galleryScrollWidth - galleryViewportWidth,
+      0
+    );
+    const clampedGifGalleryScrollLeft = Math.min(
+      gifGalleryScrollLeft,
+      galleryMaxScrollLeft
+    );
+    const firstVisibleFrameIndex = Math.max(
+      Math.floor(clampedGifGalleryScrollLeft / GIF_FRAME_GALLERY_ITEM_PITCH) - GIF_FRAME_GALLERY_OVERSCAN,
+      0
+    );
+    const visibleFrameCount = Math.ceil(galleryViewportWidth / GIF_FRAME_GALLERY_ITEM_PITCH) + GIF_FRAME_GALLERY_OVERSCAN * 2;
+    const lastVisibleFrameIndex = Math.min(
+      firstVisibleFrameIndex + visibleFrameCount,
+      frameCount
+    );
+    const visibleFrames = gif.frames.slice(
+      firstVisibleFrameIndex,
+      lastVisibleFrameIndex
+    );
+    const beginGalleryDrag = (event) => {
+      if (event.pointerType !== "mouse" || event.button !== 0) {
+        return;
+      }
+      frameGalleryDragRef.current = {
+        pointerId: event.pointerId,
+        startClientX: event.clientX,
+        startScrollLeft: event.currentTarget.scrollLeft,
+        didDrag: false
+      };
+      event.stopPropagation();
+    };
+    const updateGalleryDrag = (event) => {
+      const dragState = frameGalleryDragRef.current;
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+      const deltaX = event.clientX - dragState.startClientX;
+      if (!dragState.didDrag && Math.abs(deltaX) <= 3) {
+        return;
+      }
+      if (!dragState.didDrag) {
+        dragState.didDrag = true;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        setIsGifGalleryDragging(true);
+      }
+      event.currentTarget.scrollLeft = dragState.startScrollLeft - deltaX;
+      setGifGalleryScrollLeft(event.currentTarget.scrollLeft);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const endGalleryDrag = (event) => {
+      const dragState = frameGalleryDragRef.current;
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+      suppressNextFrameClickRef.current = dragState.didDrag;
+      frameGalleryDragRef.current = null;
+      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      setIsGifGalleryDragging(false);
+      event.stopPropagation();
+    };
+    const cancelGalleryDrag = (event) => {
+      const dragState = frameGalleryDragRef.current;
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+      frameGalleryDragRef.current = null;
+      setIsGifGalleryDragging(false);
+      event.stopPropagation();
+    };
+    const stopGalleryTouchPropagation = (event) => {
+      if (event.pointerType !== "mouse") {
+        event.stopPropagation();
+      }
+    };
+    return /* @__PURE__ */ jsxs58(
+      "div",
+      {
+        className: "gif-playback-controls",
+        style: { left, top },
+        onPointerDown: (event) => event.stopPropagation(),
+        children: [
+          liveAppState.openPopup === "gifSpeedPicker" && /* @__PURE__ */ jsx112(
+            "div",
+            {
+              className: "gif-speed-picker",
+              ref: speedPickerRef,
+              style: gifPopupPosition ?? { left, top: speedPickerTop },
+              children: speeds.map((speed) => {
+                const label = Number.isInteger(speed) ? `${speed}` : `${speed}`;
+                return /* @__PURE__ */ jsxs58(
+                  "button",
+                  {
+                    type: "button",
+                    className: clsx48("gif-speed-picker__speed", {
+                      "gif-speed-picker__speed--selected": speed === playback.speed
+                    }),
+                    onClick: () => setSpeed(speed),
+                    title: `${label}x`,
+                    children: [
+                      "x",
+                      label
+                    ]
+                  },
+                  speed
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs58("div", { className: "gif-playback-controls__bar", children: [
+            /* @__PURE__ */ jsxs58(
+              "button",
+              {
+                type: "button",
+                className: "gif-playback-controls__button gif-playback-controls__button--speed",
+                ref: speedButtonRef,
+                onClick: () => setAppState({
+                  openPopup: liveAppState.openPopup === "gifSpeedPicker" ? null : "gifSpeedPicker"
+                }),
+                onWheel: (event) => {
+                  event.stopPropagation();
+                  stepSpeed(event.deltaY < 0 ? 1 : -1);
+                },
+                title: "Speed",
+                children: [
+                  "x",
+                  speedLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx112(
+              "button",
+              {
+                type: "button",
+                className: "gif-playback-controls__button",
+                onClick: () => commitFrame(frameIndex - 1),
+                onWheel: wheelFrame,
+                title: "Previous frame",
+                children: prevFrame
+              }
+            ),
+            /* @__PURE__ */ jsx112(
+              "button",
+              {
+                type: "button",
+                className: "gif-playback-controls__button",
+                onClick: () => setPlaying(!playback.playing),
+                onWheel: wheelFrame,
+                title: playback.playing ? "Pause" : "Play",
+                children: playback.playing ? gifPauseIcon : gifPlayIcon
+              }
+            ),
+            /* @__PURE__ */ jsx112(
+              "button",
+              {
+                type: "button",
+                className: "gif-playback-controls__button",
+                onClick: () => commitFrame(frameIndex + 1),
+                onWheel: wheelFrame,
+                title: "Next frame",
+                children: nextFrame
+              }
+            ),
+            /* @__PURE__ */ jsx112(
+              "button",
+              {
+                type: "button",
+                className: "gif-playback-controls__button gif-playback-controls__button--frames",
+                ref: framesButtonRef,
+                onClick: () => {
+                  if (liveAppState.openPopup !== "gifFrameGallery") {
+                    setGifGalleryScrollLeft(
+                      Math.max(
+                        frameIndex * GIF_FRAME_GALLERY_ITEM_PITCH - galleryViewportWidth / 2,
+                        0
+                      )
+                    );
+                  }
+                  setAppState({
+                    openPopup: liveAppState.openPopup === "gifFrameGallery" ? null : "gifFrameGallery"
+                  });
+                },
+                onWheel: wheelFrame,
+                title: "Frames",
+                children: frames
+              }
+            )
+          ] }),
+          liveAppState.openPopup === "gifFrameGallery" && /* @__PURE__ */ jsx112(
+            "div",
+            {
+              className: clsx48("gif-frame-gallery", {
+                "gif-frame-gallery--dragging": isGifGalleryDragging
+              }),
+              style: {
+                ...gifPopupPosition ?? { left, top: galleryTop },
+                width: galleryViewportWidth
+              },
+              ref: (node) => {
+                frameGalleryRef.current = node;
+                if (node && node.scrollLeft !== clampedGifGalleryScrollLeft) {
+                  node.scrollLeft = clampedGifGalleryScrollLeft;
+                }
+              },
+              onScroll: (event) => {
+                setGifGalleryScrollLeft(event.currentTarget.scrollLeft);
+              },
+              onPointerDownCapture: stopGalleryTouchPropagation,
+              onPointerMoveCapture: stopGalleryTouchPropagation,
+              onPointerUpCapture: stopGalleryTouchPropagation,
+              onPointerCancelCapture: stopGalleryTouchPropagation,
+              onPointerDown: beginGalleryDrag,
+              onPointerMove: updateGalleryDrag,
+              onPointerUp: endGalleryDrag,
+              onPointerCancel: cancelGalleryDrag,
+              onLostPointerCapture: cancelGalleryDrag,
+              onClickCapture: (event) => {
+                if (suppressNextFrameClickRef.current) {
+                  suppressNextFrameClickRef.current = false;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  return;
+                }
+                suppressNextFrameClickRef.current = false;
+              },
+              onWheelCapture: (event) => {
+                event.stopPropagation();
+                event.currentTarget.scrollLeft += event.deltaY;
+                setGifGalleryScrollLeft(event.currentTarget.scrollLeft);
+              },
+              children: /* @__PURE__ */ jsx112(
+                "div",
+                {
+                  className: "gif-frame-gallery__spacer",
+                  style: { width: galleryScrollWidth },
+                  children: visibleFrames.map((frame, offset) => {
+                    const index = firstVisibleFrameIndex + offset;
+                    return /* @__PURE__ */ jsxs58(
+                      "button",
+                      {
+                        type: "button",
+                        className: clsx48("gif-frame-gallery__frame", {
+                          "gif-frame-gallery__frame--selected": index === frameIndex
+                        }),
+                        style: {
+                          left: index * GIF_FRAME_GALLERY_ITEM_PITCH
+                        },
+                        onClick: () => commitFrame(index),
+                        title: `Frame ${index + 1}`,
+                        children: [
+                          /* @__PURE__ */ jsx112(
+                            "canvas",
+                            {
+                              width: frame.width,
+                              height: frame.height,
+                              ref: (node) => {
+                                node?.getContext("2d")?.drawImage(frame, 0, 0);
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx112("span", { children: index + 1 })
+                        ]
+                      },
+                      index
+                    );
+                  })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs58(Fragment18, { children: [
+    deferredGifBadges,
+    selectedElementControls()
+  ] });
+};
+
+// components/HelpDialog.tsx
+import React33, { useMemo as useMemo10 } from "react";
+import clsx49 from "clsx";
 import { isDarwin as isDarwin4, isFirefox as isFirefox4, isWindows } from "@excalidraw/common";
 import { KEYS as KEYS48 } from "@excalidraw/common";
 import { SHAPES as SHAPES3 } from "@excalidraw/element/shapes";
@@ -31311,14 +32002,14 @@ import { SHAPES as SHAPES3 } from "@excalidraw/element/shapes";
 // components/HelpDialog/BasicHelpDialog.tsx
 import { isFirefox as isFirefox3, KEYS as KEYS47 } from "@excalidraw/common";
 import { SHAPES as SHAPES2 } from "@excalidraw/element/shapes";
-import { Fragment as Fragment18, jsx as jsx112, jsxs as jsxs58 } from "react/jsx-runtime";
-var Section2 = (props) => /* @__PURE__ */ jsxs58(Fragment18, { children: [
-  /* @__PURE__ */ jsx112("h3", { children: props.title }),
-  /* @__PURE__ */ jsx112("div", { className: "HelpDialog__islands-container", children: props.children })
+import { Fragment as Fragment19, jsx as jsx113, jsxs as jsxs59 } from "react/jsx-runtime";
+var Section2 = (props) => /* @__PURE__ */ jsxs59(Fragment19, { children: [
+  /* @__PURE__ */ jsx113("h3", { children: props.title }),
+  /* @__PURE__ */ jsx113("div", { className: "HelpDialog__islands-container", children: props.children })
 ] });
-var ShortcutIsland = (props) => /* @__PURE__ */ jsxs58("div", { className: `HelpDialog__island ${props.className}`, children: [
-  /* @__PURE__ */ jsx112("h4", { className: "HelpDialog__island-title", children: props.caption }),
-  /* @__PURE__ */ jsx112("div", { className: "HelpDialog__island-content", children: props.children })
+var ShortcutIsland = (props) => /* @__PURE__ */ jsxs59("div", { className: `HelpDialog__island ${props.className}`, children: [
+  /* @__PURE__ */ jsx113("h4", { className: "HelpDialog__island-title", children: props.caption }),
+  /* @__PURE__ */ jsx113("div", { className: "HelpDialog__island-content", children: props.children })
 ] });
 function* intersperse(as, delim) {
   let first = true;
@@ -31340,25 +32031,25 @@ var Shortcut = ({
 }) => {
   const splitShortcutKeys = shortcuts.map((shortcut) => {
     const keys = shortcut.endsWith("++") ? [...shortcut.slice(0, -2).split("+"), "+"] : shortcut.split("+");
-    return keys.map((key) => /* @__PURE__ */ jsx112(ShortcutKey, { children: upperCaseSingleChars(key) }, key));
+    return keys.map((key) => /* @__PURE__ */ jsx113(ShortcutKey, { children: upperCaseSingleChars(key) }, key));
   });
-  return /* @__PURE__ */ jsxs58("div", { className: "HelpDialog__shortcut", children: [
-    /* @__PURE__ */ jsx112("div", { children: label }),
-    /* @__PURE__ */ jsx112("div", { className: "HelpDialog__key-container", children: [...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
+  return /* @__PURE__ */ jsxs59("div", { className: "HelpDialog__shortcut", children: [
+    /* @__PURE__ */ jsx113("div", { children: label }),
+    /* @__PURE__ */ jsx113("div", { className: "HelpDialog__key-container", children: [...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
   ] });
 };
-var ShortcutKey = (props) => /* @__PURE__ */ jsx112("kbd", { className: "HelpDialog__key", ...props });
+var ShortcutKey = (props) => /* @__PURE__ */ jsx113("kbd", { className: "HelpDialog__key", ...props });
 function BasicHelpDialog() {
-  return /* @__PURE__ */ jsxs58(Section2, { title: t("helpDialog.shortcuts"), children: [
-    /* @__PURE__ */ jsxs58(
+  return /* @__PURE__ */ jsxs59(Section2, { title: t("helpDialog.shortcuts"), children: [
+    /* @__PURE__ */ jsxs59(
       ShortcutIsland,
       {
         className: "HelpDialog__island--tools",
         caption: t("helpDialog.tools"),
         children: [
-          /* @__PURE__ */ jsx112(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS47.H] }),
+          /* @__PURE__ */ jsx113(Shortcut, { label: t("toolBar.hand"), shortcuts: [KEYS47.H] }),
           SHAPES2.filter(({ myocSimplifiedMode }) => myocSimplifiedMode).map(
-            ({ value, key }) => /* @__PURE__ */ jsx112(
+            ({ value, key }) => /* @__PURE__ */ jsx113(
               Shortcut,
               {
                 label: t(`toolBar.${value}`),
@@ -31367,7 +32058,7 @@ function BasicHelpDialog() {
               value
             )
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("helpDialog.cropStart"),
@@ -31375,7 +32066,7 @@ function BasicHelpDialog() {
               isOr: true
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("helpDialog.cropFinish"),
@@ -31386,21 +32077,21 @@ function BasicHelpDialog() {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs58(
+    /* @__PURE__ */ jsxs59(
       ShortcutIsland,
       {
         className: "HelpDialog__island--view",
         caption: t("helpDialog.view"),
         children: [
-          /* @__PURE__ */ jsx112(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS47.F] }),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(Shortcut, { label: t("helpDialog.smartZoom"), shortcuts: [KEYS47.F] }),
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("helpDialog.dragToZoom"),
               shortcuts: [`${KEYS47.Z}+${t("helpDialog.drag")}`]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("buttons.objectsSnapMode"),
@@ -31410,76 +32101,76 @@ function BasicHelpDialog() {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs58(
+    /* @__PURE__ */ jsxs59(
       ShortcutIsland,
       {
         className: "HelpDialog__island--editor",
         caption: t("helpDialog.editor"),
         children: [
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.pasteAsPlaintext"),
               shortcuts: [getShortcutKey("CtrlOrCmd+Shift+V")]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.multiSelect"),
               shortcuts: [getShortcutKey(`Shift+${t("helpDialog.click")}`)]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("helpDialog.deepSelect"),
               shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.click")}`)]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("helpDialog.deepBoxSelect"),
               shortcuts: [getShortcutKey(`CtrlOrCmd+${t("helpDialog.drag")}`)]
             }
           ),
-          (probablySupportsClipboardBlob || isFirefox3) && /* @__PURE__ */ jsx112(
+          (probablySupportsClipboardBlob || isFirefox3) && /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.copyAsPng"),
               shortcuts: [getShortcutKey("Shift+Alt+C")]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("helpDialog.toggleElementLock"),
               shortcuts: [getShortcutKey("CtrlOrCmd+Shift+L")]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.group"),
               shortcuts: [getShortcutKey("CtrlOrCmd+G")]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.ungroup"),
               shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.flipHorizontal"),
               shortcuts: [getShortcutKey("Shift+H")]
             }
           ),
-          /* @__PURE__ */ jsx112(
+          /* @__PURE__ */ jsx113(
             Shortcut,
             {
               label: t("labels.flipVertical"),
@@ -31493,14 +32184,14 @@ function BasicHelpDialog() {
 }
 
 // components/HelpDialog.tsx
-import { Fragment as Fragment19, jsx as jsx113, jsxs as jsxs59 } from "react/jsx-runtime";
-var Section3 = (props) => /* @__PURE__ */ jsxs59(Fragment19, { children: [
-  /* @__PURE__ */ jsx113("h3", { children: props.title }),
-  /* @__PURE__ */ jsx113("div", { className: "HelpDialog__islands-container", children: props.children })
+import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs60 } from "react/jsx-runtime";
+var Section3 = (props) => /* @__PURE__ */ jsxs60(Fragment20, { children: [
+  /* @__PURE__ */ jsx114("h3", { children: props.title }),
+  /* @__PURE__ */ jsx114("div", { className: "HelpDialog__islands-container", children: props.children })
 ] });
-var ShortcutIsland2 = (props) => /* @__PURE__ */ jsxs59("div", { className: `HelpDialog__island ${props.className}`, children: [
-  /* @__PURE__ */ jsx113("h4", { className: "HelpDialog__island-title", children: props.caption }),
-  /* @__PURE__ */ jsx113("div", { className: "HelpDialog__island-content", children: props.children })
+var ShortcutIsland2 = (props) => /* @__PURE__ */ jsxs60("div", { className: `HelpDialog__island ${props.className}`, children: [
+  /* @__PURE__ */ jsx114("h4", { className: "HelpDialog__island-title", children: props.caption }),
+  /* @__PURE__ */ jsx114("div", { className: "HelpDialog__island-content", children: props.children })
 ] });
 function* intersperse2(as, delim) {
   let first = true;
@@ -31522,40 +32213,40 @@ var Shortcut2 = ({
 }) => {
   const splitShortcutKeys = shortcuts.map((shortcut) => {
     const keys = shortcut.endsWith("++") ? [...shortcut.slice(0, -2).split("+"), "+"] : shortcut.split("+");
-    return keys.map((key) => /* @__PURE__ */ jsx113(ShortcutKey2, { children: upperCaseSingleChars2(key) }, key));
+    return keys.map((key) => /* @__PURE__ */ jsx114(ShortcutKey2, { children: upperCaseSingleChars2(key) }, key));
   });
-  return /* @__PURE__ */ jsxs59("div", { className: "HelpDialog__shortcut", children: [
-    /* @__PURE__ */ jsx113("div", { children: label }),
-    /* @__PURE__ */ jsx113("div", { className: "HelpDialog__key-container", children: [...intersperse2(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
+  return /* @__PURE__ */ jsxs60("div", { className: "HelpDialog__shortcut", children: [
+    /* @__PURE__ */ jsx114("div", { children: label }),
+    /* @__PURE__ */ jsx114("div", { className: "HelpDialog__key-container", children: [...intersperse2(splitShortcutKeys, isOr ? t("helpDialog.or") : null)] })
   ] });
 };
-var ShortcutKey2 = (props) => /* @__PURE__ */ jsx113("kbd", { className: "HelpDialog__key", ...props });
+var ShortcutKey2 = (props) => /* @__PURE__ */ jsx114("kbd", { className: "HelpDialog__key", ...props });
 var HelpDialog = ({ onClose }) => {
-  const [isShowAll, setIsShowAll] = React32.useState(false);
-  const handleClose = React32.useCallback(() => {
+  const [isShowAll, setIsShowAll] = React33.useState(false);
+  const handleClose = React33.useCallback(() => {
     if (onClose) {
       onClose();
     }
   }, [onClose]);
   const showAllButton = useMemo10(
-    () => isShowAll ? /* @__PURE__ */ jsx113(
+    () => isShowAll ? /* @__PURE__ */ jsx114(
       "button",
       {
-        className: clsx48("toggle-button", {}),
+        className: clsx49("toggle-button", {}),
         onClick: () => setIsShowAll(false),
         children: t("helpDialog.myoc.showingAll")
       }
-    ) : /* @__PURE__ */ jsx113(
+    ) : /* @__PURE__ */ jsx114(
       "button",
       {
-        className: clsx48("toggle-button", {}),
+        className: clsx49("toggle-button", {}),
         onClick: () => setIsShowAll(true),
         children: t("helpDialog.myoc.showingBasic")
       }
     ),
     [isShowAll]
   );
-  return /* @__PURE__ */ jsx113(Fragment19, { children: /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsx114(Fragment20, { children: /* @__PURE__ */ jsx114(
     Dialog,
     {
       onCloseRequest: handleClose,
@@ -31563,15 +32254,15 @@ var HelpDialog = ({ onClose }) => {
       className: "HelpDialog",
       titleButton: showAllButton,
       portalContainerClassName: "HelpDialog__modalContainer",
-      children: isShowAll ? /* @__PURE__ */ jsxs59(Section3, { title: t("helpDialog.shortcuts"), children: [
-        /* @__PURE__ */ jsxs59(
+      children: isShowAll ? /* @__PURE__ */ jsxs60(Section3, { title: t("helpDialog.shortcuts"), children: [
+        /* @__PURE__ */ jsxs60(
           ShortcutIsland2,
           {
             className: "HelpDialog__island--tools",
             caption: t("helpDialog.tools"),
             children: [
-              /* @__PURE__ */ jsx113(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS48.H] }),
-              SHAPES3.map(({ value, key }) => /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(Shortcut2, { label: t("toolBar.hand"), shortcuts: [KEYS48.H] }),
+              SHAPES3.map(({ value, key }) => /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t(`toolBar.${value}`),
@@ -31579,29 +32270,29 @@ var HelpDialog = ({ onClose }) => {
                 },
                 value
               )),
-              /* @__PURE__ */ jsx113(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS48.F] }),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(Shortcut2, { label: t("toolBar.frame"), shortcuts: [KEYS48.F] }),
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.eyeDropper"),
                   shortcuts: [KEYS48.I, "Shift+S", "Shift+I"]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.editLineArrowPoints"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Enter")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.editText"),
                   shortcuts: [getShortcutKey("Enter")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.textNewLine"),
@@ -31611,7 +32302,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.textFinish"),
@@ -31621,7 +32312,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.curvedArrow"),
@@ -31634,7 +32325,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: false
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.curvedLine"),
@@ -31647,7 +32338,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: false
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.cropStart"),
@@ -31658,7 +32349,7 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.cropFinish"),
@@ -31666,22 +32357,22 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx113(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS48.Q] }),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(Shortcut2, { label: t("toolBar.lock"), shortcuts: [KEYS48.Q] }),
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.preventBinding"),
                   shortcuts: [getShortcutKey("CtrlOrCmd")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("toolBar.link"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+K")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("toolBar.convertElementType"),
@@ -31692,90 +32383,90 @@ var HelpDialog = ({ onClose }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs59(
+        /* @__PURE__ */ jsxs60(
           ShortcutIsland2,
           {
             className: "HelpDialog__island--view",
             caption: t("helpDialog.view"),
             children: [
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.smartZoom"),
                   shortcuts: [KEYS48.F]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.dragToZoom"),
                   shortcuts: [`${KEYS48.Z}+${t("helpDialog.drag")}`]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("buttons.zoomIn"),
                   shortcuts: [getShortcutKey("CtrlOrCmd++")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("buttons.zoomOut"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+-")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("buttons.resetZoom"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+0")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.movePageUpDown"),
                   shortcuts: ["PgUp/PgDn"]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.movePageLeftRight"),
                   shortcuts: ["Shift+PgUp/PgDn"]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("buttons.objectsSnapMode"),
                   shortcuts: [getShortcutKey("Alt+S")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.toggleGrid"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+'")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.viewMode"),
                   shortcuts: [getShortcutKey("Alt+R")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("stats.fullTitle"),
                   shortcuts: [getShortcutKey("Alt+/")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("search.title"),
@@ -31785,13 +32476,13 @@ var HelpDialog = ({ onClose }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs59(
+        /* @__PURE__ */ jsxs60(
           ShortcutIsland2,
           {
             className: "HelpDialog__island--editor",
             caption: t("helpDialog.editor"),
             children: [
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.moveCanvas"),
@@ -31802,56 +32493,56 @@ var HelpDialog = ({ onClose }) => {
                   isOr: true
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.delete"),
                   shortcuts: [getShortcutKey("Delete")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.cut"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+X")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.copy"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+C")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.paste"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+V")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.pasteAsPlaintext"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+V")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.selectAll"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+A")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.multiSelect"),
                   shortcuts: [getShortcutKey(`Shift+${t("helpDialog.click")}`)]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.deepSelect"),
@@ -31860,7 +32551,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.deepBoxSelect"),
@@ -31869,14 +32560,14 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              (probablySupportsClipboardBlob || isFirefox4) && /* @__PURE__ */ jsx113(
+              (probablySupportsClipboardBlob || isFirefox4) && /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.copyAsPng"),
                   shortcuts: [getShortcutKey("Shift+Alt+C")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.sendToBack"),
@@ -31885,7 +32576,7 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.bringToFront"),
@@ -31894,56 +32585,56 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.sendBackward"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+[")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.bringForward"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+]")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.alignTop"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Up")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.alignBottom"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Down")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.alignLeft"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Left")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.alignRight"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+Right")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.arrangeElements"),
                   shortcuts: [getShortcutKey("Shift+R")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.duplicateSelection"),
@@ -31953,21 +32644,21 @@ var HelpDialog = ({ onClose }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("helpDialog.toggleElementLock"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+L")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("buttons.undo"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Z")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("buttons.redo"),
@@ -31977,63 +32668,63 @@ var HelpDialog = ({ onClose }) => {
                   ] : [getShortcutKey("CtrlOrCmd+Shift+Z")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.group"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+G")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.ungroup"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+G")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.flipHorizontal"),
                   shortcuts: [getShortcutKey("Shift+H")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.flipVertical"),
                   shortcuts: [getShortcutKey("Shift+V")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.showStroke"),
                   shortcuts: [getShortcutKey("S")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.showBackground"),
                   shortcuts: [getShortcutKey("G")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.showFonts"),
                   shortcuts: [getShortcutKey("Shift+F")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.decreaseFontSize"),
                   shortcuts: [getShortcutKey("CtrlOrCmd+Shift+<")]
                 }
               ),
-              /* @__PURE__ */ jsx113(
+              /* @__PURE__ */ jsx114(
                 Shortcut2,
                 {
                   label: t("labels.increaseFontSize"),
@@ -32043,7 +32734,7 @@ var HelpDialog = ({ onClose }) => {
             ]
           }
         )
-      ] }) : /* @__PURE__ */ jsx113(BasicHelpDialog, {})
+      ] }) : /* @__PURE__ */ jsx114(BasicHelpDialog, {})
     }
   ) });
 };
@@ -32082,8 +32773,8 @@ var useCopyStatus = () => {
 };
 
 // components/Switch.tsx
-import clsx49 from "clsx";
-import { jsx as jsx114 } from "react/jsx-runtime";
+import clsx50 from "clsx";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var Switch = ({
   title,
   name,
@@ -32091,7 +32782,7 @@ var Switch = ({
   onChange,
   disabled = false
 }) => {
-  return /* @__PURE__ */ jsx114("div", { className: clsx49("Switch", { toggled: checked, disabled }), children: /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx115("div", { className: clsx50("Switch", { toggled: checked, disabled }), children: /* @__PURE__ */ jsx115(
     "input",
     {
       name,
@@ -32111,12 +32802,12 @@ var Switch = ({
 };
 
 // components/ImageExportDialog.tsx
-import { jsx as jsx115, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs61 } from "react/jsx-runtime";
 var ErrorCanvasPreview = () => {
-  return /* @__PURE__ */ jsxs60("div", { children: [
-    /* @__PURE__ */ jsx115("h3", { children: t("canvasError.cannotShowPreview") }),
-    /* @__PURE__ */ jsx115("p", { children: /* @__PURE__ */ jsx115("span", { children: t("canvasError.canvasTooBig") }) }),
-    /* @__PURE__ */ jsxs60("em", { children: [
+  return /* @__PURE__ */ jsxs61("div", { children: [
+    /* @__PURE__ */ jsx116("h3", { children: t("canvasError.cannotShowPreview") }),
+    /* @__PURE__ */ jsx116("p", { children: /* @__PURE__ */ jsx116("span", { children: t("canvasError.canvasTooBig") }) }),
+    /* @__PURE__ */ jsxs61("em", { children: [
       "(",
       t("canvasError.canvasTooBigTip"),
       ")"
@@ -32230,11 +32921,11 @@ var ImageExportModal = ({
     exportScale,
     embedScene
   ]);
-  return /* @__PURE__ */ jsxs60("div", { className: "ImageExportModal", children: [
-    /* @__PURE__ */ jsx115("h3", { children: t("imageExportDialog.header") }),
-    /* @__PURE__ */ jsxs60("div", { className: "ImageExportModal__preview", children: [
-      /* @__PURE__ */ jsx115("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && /* @__PURE__ */ jsx115(ErrorCanvasPreview, {}) }),
-      /* @__PURE__ */ jsx115("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsxs61("div", { className: "ImageExportModal", children: [
+    /* @__PURE__ */ jsx116("h3", { children: t("imageExportDialog.header") }),
+    /* @__PURE__ */ jsxs61("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(
         "input",
         {
           type: "text",
@@ -32252,14 +32943,14 @@ var ImageExportModal = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs60("div", { className: "ImageExportModal__settings", children: [
-      /* @__PURE__ */ jsx115("h3", { children: t("imageExportDialog.header") }),
-      hasSelection && /* @__PURE__ */ jsx115(
+    /* @__PURE__ */ jsxs61("div", { className: "ImageExportModal__settings", children: [
+      /* @__PURE__ */ jsx116("h3", { children: t("imageExportDialog.header") }),
+      hasSelection && /* @__PURE__ */ jsx116(
         ExportSetting,
         {
           label: t("imageExportDialog.label.onlySelected"),
           name: "exportOnlySelected",
-          children: /* @__PURE__ */ jsx115(
+          children: /* @__PURE__ */ jsx116(
             Switch,
             {
               name: "exportOnlySelected",
@@ -32271,12 +32962,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx116(
         ExportSetting,
         {
           label: t("imageExportDialog.label.withBackground"),
           name: "exportBackgroundSwitch",
-          children: /* @__PURE__ */ jsx115(
+          children: /* @__PURE__ */ jsx116(
             Switch,
             {
               name: "exportBackgroundSwitch",
@@ -32293,12 +32984,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx116(
         ExportSetting,
         {
           label: t("imageExportDialog.label.darkMode"),
           name: "exportDarkModeSwitch",
-          children: /* @__PURE__ */ jsx115(
+          children: /* @__PURE__ */ jsx116(
             Switch,
             {
               name: "exportDarkModeSwitch",
@@ -32314,13 +33005,13 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx116(
         ExportSetting,
         {
           label: t("imageExportDialog.label.embedScene"),
           tooltip: t("imageExportDialog.tooltip.embedScene"),
           name: "exportEmbedSwitch",
-          children: /* @__PURE__ */ jsx115(
+          children: /* @__PURE__ */ jsx116(
             Switch,
             {
               name: "exportEmbedSwitch",
@@ -32337,12 +33028,12 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsx116(
         ExportSetting,
         {
           label: t("imageExportDialog.label.scale"),
           name: "exportScale",
-          children: /* @__PURE__ */ jsx115(
+          children: /* @__PURE__ */ jsx116(
             RadioGroup,
             {
               name: "exportScale",
@@ -32359,8 +33050,8 @@ var ImageExportModal = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs60("div", { className: "ImageExportModal__settings__buttons", children: [
-        /* @__PURE__ */ jsx115(
+      /* @__PURE__ */ jsxs61("div", { className: "ImageExportModal__settings__buttons", children: [
+        /* @__PURE__ */ jsx116(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -32372,7 +33063,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToPng")
           }
         ),
-        /* @__PURE__ */ jsx115(
+        /* @__PURE__ */ jsx116(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -32384,7 +33075,7 @@ var ImageExportModal = ({
             children: t("imageExportDialog.button.exportToSvg")
           }
         ),
-        (probablySupportsClipboardBlob || isFirefox5) && /* @__PURE__ */ jsx115(
+        (probablySupportsClipboardBlob || isFirefox5) && /* @__PURE__ */ jsx116(
           FilledButton,
           {
             className: "ImageExportModal__settings__buttons__button",
@@ -32414,19 +33105,19 @@ var ExportSetting = ({
   tooltip,
   name
 }) => {
-  return /* @__PURE__ */ jsxs60("div", { className: "ImageExportModal__settings__setting", title: label, children: [
-    /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61("div", { className: "ImageExportModal__settings__setting", title: label, children: [
+    /* @__PURE__ */ jsxs61(
       "label",
       {
         htmlFor: name,
         className: "ImageExportModal__settings__setting__label",
         children: [
           label,
-          tooltip && /* @__PURE__ */ jsx115(Tooltip, { label: tooltip, long: true, children: helpIcon })
+          tooltip && /* @__PURE__ */ jsx116(Tooltip, { label: tooltip, long: true, children: helpIcon })
         ]
       }
     ),
-    /* @__PURE__ */ jsx115("div", { className: "ImageExportModal__settings__setting__content", children })
+    /* @__PURE__ */ jsx116("div", { className: "ImageExportModal__settings__setting__content", children })
   ] });
 };
 var ImageExportDialog = ({
@@ -32444,7 +33135,7 @@ var ImageExportDialog = ({
       elementsSnapshot: cloneJSON4(elements)
     };
   });
-  return /* @__PURE__ */ jsx115(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx116(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx116(
     ImageExportModal,
     {
       elementsSnapshot,
@@ -32459,13 +33150,13 @@ var ImageExportDialog = ({
 };
 
 // components/DefaultSidebar.tsx
-import clsx54 from "clsx";
+import clsx55 from "clsx";
 import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB2, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR2 } from "@excalidraw/common";
 
 // components/SearchMenu.tsx
-import clsx50 from "clsx";
+import clsx51 from "clsx";
 import debounce3 from "lodash.debounce";
-import { Fragment as Fragment20, memo as memo3, useEffect as useEffect32, useMemo as useMemo11, useRef as useRef26, useState as useState31 } from "react";
+import { Fragment as Fragment21, memo as memo3, useEffect as useEffect32, useMemo as useMemo11, useRef as useRef26, useState as useState31 } from "react";
 import {
   CLASSES as CLASSES7,
   EVENT as EVENT8,
@@ -32474,7 +33165,7 @@ import {
   getLineHeight as getLineHeight7
 } from "@excalidraw/common";
 import {
-  getCommonBounds as getCommonBounds11,
+  getCommonBounds as getCommonBounds12,
   isElementCompletelyInViewport
 } from "@excalidraw/element";
 import { measureText as measureText7 } from "@excalidraw/element";
@@ -32487,7 +33178,7 @@ import {
 import { newTextElement as newTextElement5 } from "@excalidraw/element";
 import { isTextElement as isTextElement16, isFrameLikeElement as isFrameLikeElement16 } from "@excalidraw/element";
 import { getDefaultFrameName } from "@excalidraw/element/frame";
-import { Fragment as Fragment21, jsx as jsx116, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx117, jsxs as jsxs62 } from "react/jsx-runtime";
 var searchQueryAtom = atom("");
 var searchItemInFocusAtom = atom(null);
 var SEARCH_DEBOUNCE = 350;
@@ -32612,7 +33303,7 @@ var SearchMenu2 = () => {
         ) || isTextTiny) {
           const behavior = isTextTiny && fontSize < FONT_SIZE_LEGIBILITY_THRESHOLD ? "contain" : "scale-down";
           app.viewport.setViewport({
-            target: getCommonBounds11([matchAsElement]),
+            target: getCommonBounds12([matchAsElement]),
             fit: behavior,
             animation: { duration: 300 },
             offsets: { ui: true }
@@ -32685,9 +33376,9 @@ var SearchMenu2 = () => {
     });
   }, [setAppState, stableState, app]);
   const matchCount = `${searchMatches.items.length} ${searchMatches.items.length === 1 ? t("search.singleResult") : t("search.multipleResults")}`;
-  return /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search", children: [
-    /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-header", children: [
-      /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search", children: [
+    /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-header", children: [
+      /* @__PURE__ */ jsx117(
         TextField,
         {
           className: CLASSES7.SEARCH_MENU_INPUT_WRAPPER,
@@ -32723,7 +33414,7 @@ var SearchMenu2 = () => {
           selectOnRender: true
         }
       ),
-      /* @__PURE__ */ jsx116(
+      /* @__PURE__ */ jsx117(
         Button,
         {
           "data-testid": "sidebar-close",
@@ -32738,15 +33429,15 @@ var SearchMenu2 = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-count", children: [
-      searchMatches.items.length > 0 && /* @__PURE__ */ jsxs61(Fragment21, { children: [
-        focusIndex !== null && focusIndex > -1 ? /* @__PURE__ */ jsxs61("div", { children: [
+    /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-count", children: [
+      searchMatches.items.length > 0 && /* @__PURE__ */ jsxs62(Fragment22, { children: [
+        focusIndex !== null && focusIndex > -1 ? /* @__PURE__ */ jsxs62("div", { children: [
           focusIndex + 1,
           " / ",
           matchCount
-        ] }) : /* @__PURE__ */ jsx116("div", { children: matchCount }),
-        /* @__PURE__ */ jsxs61("div", { className: "result-nav", children: [
-          /* @__PURE__ */ jsx116(
+        ] }) : /* @__PURE__ */ jsx117("div", { children: matchCount }),
+        /* @__PURE__ */ jsxs62("div", { className: "result-nav", children: [
+          /* @__PURE__ */ jsx117(
             Button,
             {
               onSelect: () => {
@@ -32756,7 +33447,7 @@ var SearchMenu2 = () => {
               children: collapseDownIcon
             }
           ),
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             Button,
             {
               onSelect: () => {
@@ -32768,9 +33459,9 @@ var SearchMenu2 = () => {
           )
         ] })
       ] }),
-      searchMatches.items.length === 0 && searchQuery && searchedQueryRef.current && /* @__PURE__ */ jsx116("div", { style: { margin: "1rem auto" }, children: t("search.noMatch") })
+      searchMatches.items.length === 0 && searchQuery && searchedQueryRef.current && /* @__PURE__ */ jsx117("div", { style: { margin: "1rem auto" }, children: t("search.noMatch") })
     ] }),
-    /* @__PURE__ */ jsx116(
+    /* @__PURE__ */ jsx117(
       MatchList,
       {
         matches: searchMatches,
@@ -32794,11 +33485,11 @@ var ListItem = (props) => {
     ),
     props.preview.moreAfter ? "..." : ""
   ];
-  return /* @__PURE__ */ jsx116(
+  return /* @__PURE__ */ jsx117(
     "div",
     {
       tabIndex: -1,
-      className: clsx50("layer-ui__result-item", {
+      className: clsx51("layer-ui__result-item", {
         active: props.highlighted
       }),
       onClick: props.onClick,
@@ -32807,7 +33498,7 @@ var ListItem = (props) => {
           ref?.scrollIntoView({ behavior: "auto", block: "nearest" });
         }
       },
-      children: /* @__PURE__ */ jsx116("div", { className: "preview-text", children: preview.flatMap((text, idx) => /* @__PURE__ */ jsx116(Fragment20, { children: idx === 2 ? /* @__PURE__ */ jsx116("b", { children: text }) : text }, idx)) })
+      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)) })
     }
   );
 };
@@ -32820,13 +33511,13 @@ var MatchListBase = (props) => {
     () => props.matches.items.filter((match) => isTextElement16(match.element)),
     [props.matches]
   );
-  return /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-results", children: [
-    frameNameMatches.length > 0 && /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-result-container", children: [
-      /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-result-title", children: [
-        /* @__PURE__ */ jsx116("div", { className: "title-icon", children: frameToolIcon }),
-        /* @__PURE__ */ jsx116("div", { children: t("search.frames") })
+  return /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-results", children: [
+    frameNameMatches.length > 0 && /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-result-container", children: [
+      /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-result-title", children: [
+        /* @__PURE__ */ jsx117("div", { className: "title-icon", children: frameToolIcon }),
+        /* @__PURE__ */ jsx117("div", { children: t("search.frames") })
       ] }),
-      frameNameMatches.map((searchMatch, index) => /* @__PURE__ */ jsx116(
+      frameNameMatches.map((searchMatch, index) => /* @__PURE__ */ jsx117(
         ListItem,
         {
           searchQuery: props.searchQuery,
@@ -32836,14 +33527,14 @@ var MatchListBase = (props) => {
         },
         searchMatch.element.id + searchMatch.index
       )),
-      textMatches.length > 0 && /* @__PURE__ */ jsx116("div", { className: "layer-ui__divider" })
+      textMatches.length > 0 && /* @__PURE__ */ jsx117("div", { className: "layer-ui__divider" })
     ] }),
-    textMatches.length > 0 && /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-result-container", children: [
-      /* @__PURE__ */ jsxs61("div", { className: "layer-ui__search-result-title", children: [
-        /* @__PURE__ */ jsx116("div", { className: "title-icon", children: TextIcon }),
-        /* @__PURE__ */ jsx116("div", { children: t("search.texts") })
+    textMatches.length > 0 && /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-result-container", children: [
+      /* @__PURE__ */ jsxs62("div", { className: "layer-ui__search-result-title", children: [
+        /* @__PURE__ */ jsx117("div", { className: "title-icon", children: TextIcon }),
+        /* @__PURE__ */ jsx117("div", { children: t("search.texts") })
       ] }),
-      textMatches.map((searchMatch, index) => /* @__PURE__ */ jsx116(
+      textMatches.map((searchMatch, index) => /* @__PURE__ */ jsx117(
         ListItem,
         {
           searchQuery: props.searchQuery,
@@ -33022,11 +33713,11 @@ var handleSearch = debounce3(
     const texts = elements.filter(
       (el) => isTextElement16(el)
     );
-    const frames = elements.filter(
+    const frames2 = elements.filter(
       (el) => isFrameLikeElement16(el)
     );
     texts.sort((a, b) => a.y - b.y);
-    frames.sort((a, b) => a.y - b.y);
+    frames2.sort((a, b) => a.y - b.y);
     const textMatches = [];
     const regex = new RegExp(escapeSpecialCharacters(searchQuery), "gi");
     for (const textEl of texts) {
@@ -33047,7 +33738,7 @@ var handleSearch = debounce3(
       }
     }
     const frameMatches = [];
-    for (const frame of frames) {
+    for (const frame of frames2) {
       let match = null;
       const name = frame.name ?? getDefaultFrameName(frame);
       while ((match = regex.exec(name)) !== null) {
@@ -33082,7 +33773,7 @@ var handleSearch = debounce3(
 );
 
 // components/Sidebar/Sidebar.tsx
-import clsx53 from "clsx";
+import clsx54 from "clsx";
 import {
   useEffect as useEffect33,
   useLayoutEffect as useLayoutEffect9,
@@ -33101,15 +33792,15 @@ import {
 } from "@excalidraw/common";
 
 // components/Sidebar/SidebarHeader.tsx
-import clsx51 from "clsx";
+import clsx52 from "clsx";
 import { useContext as useContext3 } from "react";
 
 // components/Sidebar/common.ts
-import React34 from "react";
-var SidebarPropsContext = React34.createContext({});
+import React35 from "react";
+var SidebarPropsContext = React35.createContext({});
 
 // components/Sidebar/SidebarHeader.tsx
-import { jsx as jsx117, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs63 } from "react/jsx-runtime";
 var SidebarHeader = ({
   children,
   className
@@ -33117,15 +33808,15 @@ var SidebarHeader = ({
   const editorInterface = useEditorInterface();
   const props = useContext3(SidebarPropsContext);
   const renderDockButton = !!(editorInterface.canFitSidebar && props.shouldRenderDockButton);
-  return /* @__PURE__ */ jsxs62(
+  return /* @__PURE__ */ jsxs63(
     "div",
     {
-      className: clsx51("sidebar__header", className),
+      className: clsx52("sidebar__header", className),
       "data-testid": "sidebar-header",
       children: [
         children,
-        /* @__PURE__ */ jsxs62("div", { className: "sidebar__header__buttons", children: [
-          renderDockButton && /* @__PURE__ */ jsx117(Tooltip, { label: t("labels.sidebarLock"), children: /* @__PURE__ */ jsx117(
+        /* @__PURE__ */ jsxs63("div", { className: "sidebar__header__buttons", children: [
+          renderDockButton && /* @__PURE__ */ jsx118(Tooltip, { label: t("labels.sidebarLock"), children: /* @__PURE__ */ jsx118(
             Button,
             {
               onSelect: () => props.onDock?.(!props.docked),
@@ -33136,7 +33827,7 @@ var SidebarHeader = ({
               children: PinIcon
             }
           ) }),
-          /* @__PURE__ */ jsx117(
+          /* @__PURE__ */ jsx118(
             Button,
             {
               "data-testid": "sidebar-close",
@@ -33155,14 +33846,14 @@ SidebarHeader.displayName = "SidebarHeader";
 
 // components/Sidebar/SidebarTabTrigger.tsx
 import { Tabs as RadixTabs } from "radix-ui";
-import { jsx as jsx118 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
 var SidebarTabTrigger = ({
   children,
   tab,
   onSelect,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx118(RadixTabs.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx118(
+  return /* @__PURE__ */ jsx119(RadixTabs.Trigger, { value: tab, asChild: true, onSelect, children: /* @__PURE__ */ jsx119(
     "button",
     {
       type: "button",
@@ -33176,18 +33867,18 @@ SidebarTabTrigger.displayName = "SidebarTabTrigger";
 
 // components/Sidebar/SidebarTabTriggers.tsx
 import { Tabs as RadixTabs2 } from "radix-ui";
-import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
 var SidebarTabTriggers = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx119(RadixTabs2.List, { className: "sidebar-triggers", ...rest, children });
+  return /* @__PURE__ */ jsx120(RadixTabs2.List, { className: "sidebar-triggers", ...rest, children });
 };
 SidebarTabTriggers.displayName = "SidebarTabTriggers";
 
 // components/Sidebar/SidebarTrigger.tsx
-import clsx52 from "clsx";
-import { jsx as jsx120, jsxs as jsxs63 } from "react/jsx-runtime";
+import clsx53 from "clsx";
+import { jsx as jsx121, jsxs as jsxs64 } from "react/jsx-runtime";
 var SidebarTrigger = ({
   name,
   tab,
@@ -33201,7 +33892,7 @@ var SidebarTrigger = ({
   const setAppState = useExcalidrawSetAppState();
   const appState = useUIAppState();
   const isOpen = appState.openSidebar?.name === name;
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(
     "button",
     {
       type: "button",
@@ -33220,9 +33911,9 @@ var SidebarTrigger = ({
         });
         onToggle?.(nextOpen);
       },
-      children: /* @__PURE__ */ jsxs63("div", { className: clsx52("sidebar-trigger", className), style, children: [
-        icon && /* @__PURE__ */ jsx120("div", { children: icon }),
-        children && /* @__PURE__ */ jsx120("div", { className: "sidebar-trigger__label", children })
+      children: /* @__PURE__ */ jsxs64("div", { className: clsx53("sidebar-trigger", className), style, children: [
+        icon && /* @__PURE__ */ jsx121("div", { children: icon }),
+        children && /* @__PURE__ */ jsx121("div", { className: "sidebar-trigger__label", children })
       ] })
     }
   );
@@ -33231,7 +33922,7 @@ SidebarTrigger.displayName = "SidebarTrigger";
 
 // components/Sidebar/SidebarTabs.tsx
 import { Tabs as RadixTabs3 } from "radix-ui";
-import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
 var SidebarTabs = ({
   children,
   ...rest
@@ -33242,7 +33933,7 @@ var SidebarTabs = ({
     return null;
   }
   const { name } = appState.openSidebar;
-  return /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsx122(
     RadixTabs3.Root,
     {
       className: "sidebar-tabs-root",
@@ -33260,18 +33951,18 @@ SidebarTabs.displayName = "SidebarTabs";
 
 // components/Sidebar/SidebarTab.tsx
 import { Tabs as RadixTabs4 } from "radix-ui";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var SidebarTab = ({
   tab,
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx122(RadixTabs4.Content, { ...rest, value: tab, "data-testid": tab, children });
+  return /* @__PURE__ */ jsx123(RadixTabs4.Content, { ...rest, value: tab, "data-testid": tab, children });
 };
 SidebarTab.displayName = "SidebarTab";
 
 // components/Sidebar/Sidebar.tsx
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 import { createElement } from "react";
 var isSidebarDockedAtom = atom(false);
 var SidebarInner = forwardRef5(
@@ -33345,11 +34036,11 @@ var SidebarInner = forwardRef5(
         document.removeEventListener(EVENT9.KEYDOWN, handleKeyDown);
       };
     }, [closeSidebar, docked, editorInterface.canFitSidebar]);
-    return /* @__PURE__ */ jsx123(
+    return /* @__PURE__ */ jsx124(
       Island,
       {
         ...rest,
-        className: clsx53(
+        className: clsx54(
           CLASSES8.SIDEBAR,
           { "sidebar--docked": docked },
           className
@@ -33357,7 +34048,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__ */ jsx123(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
+        children: /* @__PURE__ */ jsx124(SidebarPropsContext.Provider, { value: headerPropsRef.current, children })
       }
     );
   }
@@ -33404,13 +34095,13 @@ var Sidebar = Object.assign(
 Sidebar.displayName = "Sidebar";
 
 // components/DefaultSidebar.tsx
-import { jsx as jsx124, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs65 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var DefaultSidebarTrigger = withInternalFallback(
   "DefaultSidebarTrigger",
   (props) => {
     const { DefaultSidebarTriggerTunnel } = useTunnels();
-    return /* @__PURE__ */ jsx124(DefaultSidebarTriggerTunnel.In, { children: /* @__PURE__ */ jsx124(
+    return /* @__PURE__ */ jsx125(DefaultSidebarTriggerTunnel.In, { children: /* @__PURE__ */ jsx125(
       Sidebar.Trigger,
       {
         ...props,
@@ -33423,7 +34114,7 @@ var DefaultSidebarTrigger = withInternalFallback(
 DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";
 var DefaultTabTriggers = ({ children }) => {
   const { DefaultSidebarTabTriggersTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx124(DefaultSidebarTabTriggersTunnel.In, { children });
+  return /* @__PURE__ */ jsx125(DefaultSidebarTabTriggersTunnel.In, { children });
 };
 DefaultTabTriggers.displayName = "DefaultTabTriggers";
 var DefaultSidebar = Object.assign(
@@ -33447,7 +34138,7 @@ var DefaultSidebar = Object.assign(
           ...rest,
           name: "default",
           key: "default",
-          className: clsx54(
+          className: clsx55(
             "default-sidebar",
             { "default-sidebar--search-only": isSearchSidebar },
             className
@@ -33460,9 +34151,9 @@ var DefaultSidebar = Object.assign(
             onDock?.(nextDocked);
           } : void 0
         },
-        /* @__PURE__ */ jsxs64(Sidebar.Tabs, { children: [
-          !isSearchSidebar && /* @__PURE__ */ jsx124(Sidebar.Header, {}),
-          /* @__PURE__ */ jsx124(Sidebar.Tab, { tab: CANVAS_SEARCH_TAB2, children: /* @__PURE__ */ jsx124(SearchMenu2, {}) }),
+        /* @__PURE__ */ jsxs65(Sidebar.Tabs, { children: [
+          !isSearchSidebar && /* @__PURE__ */ jsx125(Sidebar.Header, {}),
+          /* @__PURE__ */ jsx125(Sidebar.Tab, { tab: CANVAS_SEARCH_TAB2, children: /* @__PURE__ */ jsx125(SearchMenu2, {}) }),
           !isSearchSidebar && children
         ] })
       );
@@ -33475,11 +34166,11 @@ var DefaultSidebar = Object.assign(
 );
 
 // components/JSONExportDialog.tsx
-import React36 from "react";
+import React37 from "react";
 import { getFrame } from "@excalidraw/common";
 
 // components/Card.tsx
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
 var COLOR_MAP = {
   primary: {
     base: "var(--color-primary)",
@@ -33504,7 +34195,7 @@ var COLOR_MAP = {
   }
 };
 var Card = ({ children, color }) => {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx126(
     "div",
     {
       className: "Card",
@@ -33519,7 +34210,7 @@ var Card = ({ children, color }) => {
 };
 
 // components/JSONExportDialog.tsx
-import { Fragment as Fragment22, jsx as jsx126, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx127, jsxs as jsxs66 } from "react/jsx-runtime";
 var JSONExportModal = ({
   elements,
   appState,
@@ -33531,15 +34222,15 @@ var JSONExportModal = ({
   onCloseRequest
 }) => {
   const { onExportToBackend } = exportOpts;
-  return /* @__PURE__ */ jsx126("div", { className: "ExportDialog ExportDialog--json", children: /* @__PURE__ */ jsxs65("div", { className: "ExportDialog-cards", children: [
-    exportOpts.saveFileToDisk && /* @__PURE__ */ jsxs65(Card, { color: "lime", children: [
-      /* @__PURE__ */ jsx126("div", { className: "Card-icon", children: exportToFileIcon }),
-      /* @__PURE__ */ jsx126("h2", { children: t("exportDialog.disk_title") }),
-      /* @__PURE__ */ jsxs65("div", { className: "Card-details", children: [
+  return /* @__PURE__ */ jsx127("div", { className: "ExportDialog ExportDialog--json", children: /* @__PURE__ */ jsxs66("div", { className: "ExportDialog-cards", children: [
+    exportOpts.saveFileToDisk && /* @__PURE__ */ jsxs66(Card, { color: "lime", children: [
+      /* @__PURE__ */ jsx127("div", { className: "Card-icon", children: exportToFileIcon }),
+      /* @__PURE__ */ jsx127("h2", { children: t("exportDialog.disk_title") }),
+      /* @__PURE__ */ jsxs66("div", { className: "Card-details", children: [
         t("exportDialog.disk_details"),
         !nativeFileSystemSupported && actionManager.renderAction("changeProjectName")
       ] }),
-      /* @__PURE__ */ jsx126(
+      /* @__PURE__ */ jsx127(
         IconButton,
         {
           className: "Card-button",
@@ -33553,11 +34244,11 @@ var JSONExportModal = ({
         }
       )
     ] }),
-    onExportToBackend && /* @__PURE__ */ jsxs65(Card, { color: "pink", children: [
-      /* @__PURE__ */ jsx126("div", { className: "Card-icon", children: LinkIcon }),
-      /* @__PURE__ */ jsx126("h2", { children: t("exportDialog.link_title") }),
-      /* @__PURE__ */ jsx126("div", { className: "Card-details", children: t("exportDialog.link_details") }),
-      /* @__PURE__ */ jsx126(
+    onExportToBackend && /* @__PURE__ */ jsxs66(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(
         IconButton,
         {
           className: "Card-button",
@@ -33589,10 +34280,10 @@ var JSONExportDialog = ({
   canvas,
   setAppState
 }) => {
-  const handleClose = React36.useCallback(() => {
+  const handleClose = React37.useCallback(() => {
     setAppState({ openDialog: null });
   }, [setAppState]);
-  return /* @__PURE__ */ jsx126(Fragment22, { children: appState.openDialog?.name === "jsonExport" && /* @__PURE__ */ jsx126(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx127(Fragment23, { children: appState.openDialog?.name === "jsonExport" && /* @__PURE__ */ jsx127(Dialog, { onCloseRequest: handleClose, title: t("buttons.export"), children: /* @__PURE__ */ jsx127(
     JSONExportModal,
     {
       elements,
@@ -33608,13 +34299,13 @@ var JSONExportDialog = ({
 };
 
 // components/LaserPointerButton.tsx
-import clsx55 from "clsx";
-import { jsx as jsx127 } from "react/jsx-runtime";
+import clsx56 from "clsx";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var LaserPointerButton = (props) => {
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx128(
     IconButton,
     {
-      className: clsx55("ToolIcon__LaserPointer", {
+      className: clsx56("ToolIcon__LaserPointer", {
         "is-mobile": props.isMobile
       }),
       type: "toggle",
@@ -33630,7 +34321,7 @@ var LaserPointerButton = (props) => {
 };
 
 // components/Toolbar.tsx
-import clsx57 from "clsx";
+import clsx58 from "clsx";
 import { useState as useState33 } from "react";
 import { CANVAS_SEARCH_TAB as CANVAS_SEARCH_TAB4, DEFAULT_SIDEBAR as DEFAULT_SIDEBAR4, KEYS as KEYS51 } from "@excalidraw/common";
 
@@ -33646,7 +34337,7 @@ import {
   isTextElement as isTextElement17
 } from "@excalidraw/element";
 import { isNodeInFlowchart } from "@excalidraw/element";
-import { jsx as jsx128 } from "react/jsx-runtime";
+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,
@@ -33823,21 +34514,21 @@ var HintViewer = ({
   const hintJSX = hint.split(/(<kbd>[^<]+<\/kbd>)/g).map((part, index) => {
     if (index % 2 === 1) {
       const shortcutMatch = part[0] === "<" && part.match(/^<kbd>([^<]+)<\/kbd>$/);
-      return /* @__PURE__ */ jsx128("kbd", { children: shortcutMatch ? shortcutMatch[1] : part }, index);
+      return /* @__PURE__ */ jsx129("kbd", { children: shortcutMatch ? shortcutMatch[1] : part }, index);
     }
     return part;
   });
-  return /* @__PURE__ */ jsx128("div", { className: "HintViewer", children: /* @__PURE__ */ jsx128("span", { children: hintJSX }) });
+  return /* @__PURE__ */ jsx129("div", { className: "HintViewer", children: /* @__PURE__ */ jsx129("span", { children: hintJSX }) });
 };
 
 // components/LockButton.tsx
-import clsx56 from "clsx";
-import { jsx as jsx129 } from "react/jsx-runtime";
+import clsx57 from "clsx";
+import { jsx as jsx130 } from "react/jsx-runtime";
 var LockButton = (props) => {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx130(
     IconButton,
     {
-      className: clsx56("ToolIcon__lock", { "is-mobile": props.isMobile }),
+      className: clsx57("ToolIcon__lock", { "is-mobile": props.isMobile }),
       type: "toggle",
       icon: props.checked ? LockedIcon : UnlockedIcon,
       checked: props.checked,
@@ -33851,14 +34542,14 @@ var LockButton = (props) => {
 };
 
 // components/Toolbar.tsx
-import { Fragment as Fragment23, jsx as jsx130, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx131, jsxs as jsxs67 } from "react/jsx-runtime";
 var isToolHiddenByOptions = (type, UIOptions) => type === "image" && UIOptions.tools?.image === false;
 var ExtraToolsDropdownItem = ({
   app,
   activeTool,
   type,
   shortcut
-}) => /* @__PURE__ */ jsx130(
+}) => /* @__PURE__ */ jsx131(
   DropdownMenu_default.Item,
   {
     onSelect: () => app.setActiveTool({ type }),
@@ -33870,7 +34561,7 @@ var ExtraToolsDropdownItem = ({
     children: t(`toolBar.${type}`)
   }
 );
-var LockActiveToolDropdownItem = ({ app }) => /* @__PURE__ */ jsx130(
+var LockActiveToolDropdownItem = ({ app }) => /* @__PURE__ */ jsx131(
   DropdownMenu_default.Item,
   {
     onSelect: () => app.toggleLock(),
@@ -33889,7 +34580,7 @@ var ObjectsSnapModeDropdownItem = ({
     return null;
   }
   const shortcut = getShortcutFromShortcutName("objectsSnapMode");
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx131(
     DropdownMenu_default.Item,
     {
       onSelect: () => actionManager.executeAction(actionToggleObjectsSnapMode, "ui"),
@@ -33910,7 +34601,7 @@ var ObjectsSnapModeButton2 = ({
   }
   const label = t("buttons.objectsSnapMode");
   const shortcut = getShortcutFromShortcutName("objectsSnapMode");
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx131(
     IconButton,
     {
       type: "toggle",
@@ -33930,7 +34621,7 @@ var SearchMenuDropdownItem = ({
 }) => {
   const label = t("search.title");
   const shortcut = getShortcutFromShortcutName("searchMenu");
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx131(
     DropdownMenu_default.Item,
     {
       onSelect: () => actionManager.executeAction(actionToggleSearchMenu, "ui"),
@@ -33942,7 +34633,7 @@ var SearchMenuDropdownItem = ({
     }
   );
 };
-var StrokeEyeDropperButton2 = ({ app }) => /* @__PURE__ */ jsx130(
+var StrokeEyeDropperButton2 = ({ app }) => /* @__PURE__ */ jsx131(
   IconButton,
   {
     type: "button",
@@ -33974,11 +34665,11 @@ var ExtraToolsDropdown = ({
   const myocSimplifiedToolSelected = isMyocSimplifiedMode && MYOC_SIMPLIFIED_EXTRA_TOOL_TYPES.includes(
     activeTool.type
   );
-  return /* @__PURE__ */ jsxs66(DropdownMenu_default, { open: isExtraToolsMenuOpen, children: [
-    /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsxs67(DropdownMenu_default, { open: isExtraToolsMenuOpen, children: [
+    /* @__PURE__ */ jsx131(
       DropdownMenu_default.Trigger,
       {
-        className: clsx57("App-toolbar__extra-tools-trigger", {
+        className: clsx58("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
@@ -33992,14 +34683,14 @@ var ExtraToolsDropdown = ({
         children: myocSimplifiedToolSelected ? TOOLS[activeTool.type].icon : frameToolSelected ? frameToolIcon : embeddableToolSelected ? EmbedIcon : !isMyocSimplifiedMode && isFullStylesPanel && drawShapeToolSelected ? drawShapeToolIcon : laserToolSelected && !app.props.isCollaborating ? laserPointerToolIcon : lassoToolSelected ? LassoIcon : bucketFillToolSelected ? bucketFillIcon : DotsIcon
       }
     ),
-    /* @__PURE__ */ jsx130(
+    /* @__PURE__ */ jsx131(
       DropdownMenu_default.Content,
       {
         onClickOutside: () => setIsExtraToolsMenuOpen(false),
         onSelect: () => setIsExtraToolsMenuOpen(false),
         className: "App-toolbar__extra-tools-dropdown",
-        children: isMyocSimplifiedMode ? /* @__PURE__ */ jsxs66(Fragment23, { children: [
-          isFullStylesPanel && /* @__PURE__ */ jsx130(
+        children: isMyocSimplifiedMode ? /* @__PURE__ */ jsxs67(Fragment24, { children: [
+          isFullStylesPanel && /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "lasso" }),
@@ -34012,7 +34703,7 @@ var ExtraToolsDropdown = ({
           ),
           MYOC_SIMPLIFIED_EXTRA_TOOL_TYPES.filter(
             (type) => !isToolHiddenByOptions(type, UIOptions)
-          ).map((type) => /* @__PURE__ */ jsx130(
+          ).map((type) => /* @__PURE__ */ jsx131(
             ExtraToolsDropdownItem,
             {
               app,
@@ -34021,17 +34712,17 @@ var ExtraToolsDropdown = ({
             },
             type
           )),
-          /* @__PURE__ */ jsx130("div", { className: "App-toolbar__dropdown-divider" }),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131("div", { className: "App-toolbar__dropdown-divider" }),
+          /* @__PURE__ */ jsx131(
             SearchMenuDropdownItem,
             {
               actionManager,
               appState: app.state
             }
           ),
-          app.props.activeTool == null && /* @__PURE__ */ jsx130(Fragment23, { children: /* @__PURE__ */ jsx130(LockActiveToolDropdownItem, { app }) })
-        ] }) : /* @__PURE__ */ jsxs66(Fragment23, { children: [
-          /* @__PURE__ */ jsx130(
+          app.props.activeTool == null && /* @__PURE__ */ jsx131(Fragment24, { children: /* @__PURE__ */ jsx131(LockActiveToolDropdownItem, { app }) })
+        ] }) : /* @__PURE__ */ jsxs67(Fragment24, { children: [
+          /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "frame" }),
@@ -34043,7 +34734,7 @@ var ExtraToolsDropdown = ({
               children: t("toolBar.frame")
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "embeddable" }),
@@ -34054,7 +34745,7 @@ var ExtraToolsDropdown = ({
               children: t("toolBar.embeddable")
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "autoshape" }),
@@ -34066,7 +34757,7 @@ var ExtraToolsDropdown = ({
               children: t("toolBar.autoshape")
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "laser" }),
@@ -34077,7 +34768,7 @@ var ExtraToolsDropdown = ({
               children: t("toolBar.laser")
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "bucketfill" }),
@@ -34088,7 +34779,7 @@ var ExtraToolsDropdown = ({
               children: t("toolBar.bucketfill")
             }
           ),
-          isFullStylesPanel && /* @__PURE__ */ jsx130(
+          isFullStylesPanel && /* @__PURE__ */ jsx131(
             DropdownMenu_default.Item,
             {
               onSelect: () => app.setActiveTool({ type: "lasso" }),
@@ -34099,22 +34790,22 @@ var ExtraToolsDropdown = ({
               children: t("toolBar.lasso")
             }
           ),
-          /* @__PURE__ */ jsx130("div", { className: "App-toolbar__dropdown-divider" }),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131("div", { className: "App-toolbar__dropdown-divider" }),
+          /* @__PURE__ */ jsx131(
             ObjectsSnapModeDropdownItem,
             {
               actionManager,
               app
             }
           ),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131(
             SearchMenuDropdownItem,
             {
               actionManager,
               appState: app.state
             }
           ),
-          app.props.activeTool == null && /* @__PURE__ */ jsx130(LockActiveToolDropdownItem, { app })
+          app.props.activeTool == null && /* @__PURE__ */ jsx131(LockActiveToolDropdownItem, { app })
         ] })
       }
     )
@@ -34135,18 +34826,18 @@ var Toolbar = ({
   const activeTool = appState.activeTool;
   const toolProps = { app, activeTool };
   const isMyocSimplifiedMode = appState.myocSimplifiedMode;
-  const selectionTool = isCompactStylesPanel ? /* @__PURE__ */ jsx130(SelectionToolPopover, { ...toolProps, setAppState }) : appState.preferredSelectionTool.type === "lasso" ? /* @__PURE__ */ jsx130(LassoToolButton, { ...toolProps }) : /* @__PURE__ */ jsx130(SelectionToolButton, { ...toolProps });
-  return /* @__PURE__ */ jsxs66(
+  const selectionTool = isCompactStylesPanel ? /* @__PURE__ */ jsx131(SelectionToolPopover, { ...toolProps, setAppState }) : appState.preferredSelectionTool.type === "lasso" ? /* @__PURE__ */ jsx131(LassoToolButton, { ...toolProps }) : /* @__PURE__ */ jsx131(SelectionToolButton, { ...toolProps });
+  return /* @__PURE__ */ jsxs67(
     Island,
     {
       padding: 1,
-      className: clsx57("App-toolbar", {
+      className: clsx58("App-toolbar", {
         "zen-mode": appState.zenModeEnabled,
         "App-toolbar--compact": isCompactStylesPanel
       }),
       "data-viewport-ui": "top",
       children: [
-        /* @__PURE__ */ jsx130(
+        /* @__PURE__ */ jsx131(
           HintViewer,
           {
             appState,
@@ -34156,8 +34847,8 @@ var Toolbar = ({
           }
         ),
         heading,
-        /* @__PURE__ */ jsxs66(Stack_default.Row, { gap: isCompactStylesPanel ? 0.5 : 1, children: [
-          !isCompactStylesPanel && /* @__PURE__ */ jsx130(
+        /* @__PURE__ */ jsxs67(Stack_default.Row, { gap: isCompactStylesPanel ? 0.5 : 1, children: [
+          !isCompactStylesPanel && /* @__PURE__ */ jsx131(
             PenModeButton,
             {
               checked: appState.penMode,
@@ -34166,8 +34857,8 @@ var Toolbar = ({
               penDetected: appState.penDetected
             }
           ),
-          app.props.activeTool == null && !isMyocSimplifiedMode && /* @__PURE__ */ jsxs66(Fragment23, { children: [
-            /* @__PURE__ */ jsx130(
+          app.props.activeTool == null && !isMyocSimplifiedMode && /* @__PURE__ */ jsxs67(Fragment24, { children: [
+            /* @__PURE__ */ jsx131(
               LockButton,
               {
                 checked: appState.activeTool.locked,
@@ -34176,29 +34867,29 @@ var Toolbar = ({
                 disabled: app.props.activeTool != null
               }
             ),
-            /* @__PURE__ */ jsx130("div", { className: "App-toolbar__divider" })
+            /* @__PURE__ */ jsx131("div", { className: "App-toolbar__divider" })
           ] }),
-          /* @__PURE__ */ jsx130(HandToolButton, { ...toolProps }),
+          /* @__PURE__ */ jsx131(HandToolButton, { ...toolProps }),
           selectionTool,
-          isMyocSimplifiedMode ? /* @__PURE__ */ jsxs66(Fragment23, { children: [
-            /* @__PURE__ */ jsx130(FreedrawToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(TextToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(StrokeEyeDropperButton2, { app }),
-            UIOptions.tools?.image !== false && /* @__PURE__ */ jsx130(ImageToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(EraserToolButton, { ...toolProps })
-          ] }) : /* @__PURE__ */ jsxs66(Fragment23, { children: [
-            /* @__PURE__ */ jsx130(RectangleToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(DiamondToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(EllipseToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(ArrowToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(LineToolButton, { ...toolProps }),
-            isCompactStylesPanel ? /* @__PURE__ */ jsx130(FreedrawToolPopover, { ...toolProps }) : /* @__PURE__ */ jsx130(FreedrawToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(TextToolButton, { ...toolProps }),
-            UIOptions.tools?.image !== false && /* @__PURE__ */ jsx130(ImageToolButton, { ...toolProps }),
-            /* @__PURE__ */ jsx130(EraserToolButton, { ...toolProps })
+          isMyocSimplifiedMode ? /* @__PURE__ */ jsxs67(Fragment24, { children: [
+            /* @__PURE__ */ jsx131(FreedrawToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(TextToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(StrokeEyeDropperButton2, { app }),
+            UIOptions.tools?.image !== false && /* @__PURE__ */ jsx131(ImageToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(EraserToolButton, { ...toolProps })
+          ] }) : /* @__PURE__ */ jsxs67(Fragment24, { children: [
+            /* @__PURE__ */ jsx131(RectangleToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(DiamondToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(EllipseToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(ArrowToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(LineToolButton, { ...toolProps }),
+            isCompactStylesPanel ? /* @__PURE__ */ jsx131(FreedrawToolPopover, { ...toolProps }) : /* @__PURE__ */ jsx131(FreedrawToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(TextToolButton, { ...toolProps }),
+            UIOptions.tools?.image !== false && /* @__PURE__ */ jsx131(ImageToolButton, { ...toolProps }),
+            /* @__PURE__ */ jsx131(EraserToolButton, { ...toolProps })
           ] }),
-          /* @__PURE__ */ jsx130("div", { className: "App-toolbar__divider" }),
-          /* @__PURE__ */ jsx130(
+          /* @__PURE__ */ jsx131("div", { className: "App-toolbar__divider" }),
+          /* @__PURE__ */ jsx131(
             ExtraToolsDropdown,
             {
               app,
@@ -34209,9 +34900,9 @@ var Toolbar = ({
               actionManager
             }
           ),
-          isMyocSimplifiedMode && /* @__PURE__ */ jsxs66(Fragment23, { children: [
-            /* @__PURE__ */ jsx130("div", { className: "App-toolbar__divider" }),
-            /* @__PURE__ */ jsx130(ObjectsSnapModeButton2, { actionManager, app })
+          isMyocSimplifiedMode && /* @__PURE__ */ jsxs67(Fragment24, { children: [
+            /* @__PURE__ */ jsx131("div", { className: "App-toolbar__divider" }),
+            /* @__PURE__ */ jsx131(ObjectsSnapModeButton2, { actionManager, app })
           ] })
         ] })
       ]
@@ -34220,26 +34911,26 @@ var Toolbar = ({
 };
 
 // components/LayerUI.tsx
-import { Fragment as Fragment24, jsx as jsx131, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx132, jsxs as jsxs68 } from "react/jsx-runtime";
 var DefaultMainMenu = ({ UIOptions }) => {
-  return /* @__PURE__ */ jsxs67(MainMenu_default, { __fallback: true, children: [
-    /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.LoadScene, {}),
-    /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.SaveToActiveFile, {}),
-    UIOptions.canvasActions.export && /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.Export, {}),
-    UIOptions.canvasActions.saveAsImage && /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.SaveAsImage, {}),
-    /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.SearchMenu, {}),
-    /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.Help, {}),
-    /* @__PURE__ */ jsx131(MainMenu_default.Separator, {}),
-    /* @__PURE__ */ jsx131(MainMenu_default.Group, { title: "Excalidraw links", children: /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.Socials, {}) }),
-    /* @__PURE__ */ jsx131(MainMenu_default.Separator, {}),
-    /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.ToggleTheme, { allowSystemTheme: false }),
-    /* @__PURE__ */ jsx131(MainMenu_default.DefaultItems.ChangeCanvasBackground, {})
+  return /* @__PURE__ */ jsxs68(MainMenu_default, { __fallback: true, children: [
+    /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.LoadScene, {}),
+    /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.SaveToActiveFile, {}),
+    UIOptions.canvasActions.export && /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.Export, {}),
+    UIOptions.canvasActions.saveAsImage && /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.SaveAsImage, {}),
+    /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.SearchMenu, {}),
+    /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.Help, {}),
+    /* @__PURE__ */ jsx132(MainMenu_default.Separator, {}),
+    /* @__PURE__ */ jsx132(MainMenu_default.Group, { title: "Excalidraw links", children: /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.Socials, {}) }),
+    /* @__PURE__ */ jsx132(MainMenu_default.Separator, {}),
+    /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.ToggleTheme, { allowSystemTheme: false }),
+    /* @__PURE__ */ jsx132(MainMenu_default.DefaultItems.ChangeCanvasBackground, {})
   ] });
 };
 var DefaultOverwriteConfirmDialog = () => {
-  return /* @__PURE__ */ jsxs67(OverwriteConfirmDialog, { __fallback: true, children: [
-    /* @__PURE__ */ jsx131(OverwriteConfirmDialog.Actions.SaveToDisk, {}),
-    /* @__PURE__ */ jsx131(OverwriteConfirmDialog.Actions.ExportToImage, {})
+  return /* @__PURE__ */ jsxs68(OverwriteConfirmDialog, { __fallback: true, children: [
+    /* @__PURE__ */ jsx132(OverwriteConfirmDialog.Actions.SaveToDisk, {}),
+    /* @__PURE__ */ jsx132(OverwriteConfirmDialog.Actions.ExportToImage, {})
   ] });
 };
 var LayerUI = ({
@@ -34293,7 +34984,7 @@ var LayerUI = ({
     if (!UIOptions.canvasActions.export) {
       return null;
     }
-    return /* @__PURE__ */ jsx131(
+    return /* @__PURE__ */ jsx132(
       JSONExportDialog,
       {
         elements,
@@ -34310,7 +35001,7 @@ var LayerUI = ({
     if (!UIOptions.canvasActions.saveAsImage || appState.openDialog?.name !== "imageExport") {
       return null;
     }
-    return /* @__PURE__ */ jsx131(
+    return /* @__PURE__ */ jsx132(
       ImageExportDialog,
       {
         elements,
@@ -34323,26 +35014,26 @@ var LayerUI = ({
       }
     );
   };
-  const renderCanvasActions = () => /* @__PURE__ */ jsxs67("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs67("div", { className: "excalidraw-ui-top-left", children: [
+  const renderCanvasActions = () => /* @__PURE__ */ jsxs68("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs68("div", { className: "excalidraw-ui-top-left", children: [
       renderTopLeftUI?.(false, appState),
-      /* @__PURE__ */ jsx131(tunnels.MainMenuTunnel.Out, {}),
-      /* @__PURE__ */ jsx131(tunnels.DefaultSidebarTriggerTunnel.Out, {})
+      /* @__PURE__ */ jsx132(tunnels.MainMenuTunnel.Out, {}),
+      /* @__PURE__ */ jsx132(tunnels.DefaultSidebarTriggerTunnel.Out, {})
     ] }),
-    renderWelcomeScreen && /* @__PURE__ */ jsx131(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
+    renderWelcomeScreen && /* @__PURE__ */ jsx132(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
   ] });
   const renderSelectedShapeActions = () => {
-    return /* @__PURE__ */ jsx131(
+    return /* @__PURE__ */ jsx132(
       Section,
       {
         heading: "selectedShapeActions",
-        className: clsx58("selected-shape-actions zen-mode-transition", {
+        className: clsx59("selected-shape-actions zen-mode-transition", {
           "transition-left": appState.zenModeEnabled
         }),
-        children: isCompactStylesPanel ? /* @__PURE__ */ jsx131(
+        children: isCompactStylesPanel ? /* @__PURE__ */ jsx132(
           Island,
           {
-            className: clsx58("compact-shape-actions-island"),
+            className: clsx59("compact-shape-actions-island"),
             padding: 0,
             "data-viewport-ui": "side",
             "data-viewport-ui-name": "stylesPanel",
@@ -34351,7 +35042,7 @@ var LayerUI = ({
               // approximate height of hamburgerMenu + footer
               maxHeight: `${appState.height - 166}px`
             },
-            children: /* @__PURE__ */ jsx131(
+            children: /* @__PURE__ */ jsx132(
               CompactShapeActions,
               {
                 appState,
@@ -34362,7 +35053,7 @@ var LayerUI = ({
               }
             )
           }
-        ) : /* @__PURE__ */ jsx131(
+        ) : /* @__PURE__ */ jsx132(
           Island,
           {
             className: CLASSES9.SHAPE_ACTIONS_MENU,
@@ -34374,7 +35065,7 @@ var LayerUI = ({
             },
             "data-viewport-ui": "side",
             "data-viewport-ui-name": "stylesPanel",
-            children: /* @__PURE__ */ jsx131(
+            children: /* @__PURE__ */ jsx132(
               SelectedShapeActions,
               {
                 appState,
@@ -34391,24 +35082,24 @@ var LayerUI = ({
   const renderFixedSideContainer = () => {
     const shouldRenderSelectedShapeActions = defaultUIEnabled && showSelectedShapeActions(appState, elements);
     const shouldShowStats = defaultUIEnabled && appState.stats.open && !appState.zenModeEnabled && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector";
-    return /* @__PURE__ */ jsx131(FixedSideContainer, { side: "top", children: /* @__PURE__ */ jsxs67("div", { className: "App-menu App-menu_top", children: [
-      /* @__PURE__ */ jsxs67(
+    return /* @__PURE__ */ jsx132(FixedSideContainer, { side: "top", children: /* @__PURE__ */ jsxs68("div", { className: "App-menu App-menu_top", children: [
+      /* @__PURE__ */ jsxs68(
         Stack_default.Col,
         {
           gap: spacing.menuTopGap,
-          className: clsx58("App-menu_top__left"),
+          className: clsx59("App-menu_top__left"),
           children: [
             renderCanvasActions(),
-            defaultUIEnabled && /* @__PURE__ */ jsx131(
+            defaultUIEnabled && /* @__PURE__ */ jsx132(
               "div",
               {
-                className: clsx58("selected-shape-actions-container", {
+                className: clsx59("selected-shape-actions-container", {
                   "selected-shape-actions-container--compact": isCompactStylesPanel
                 }),
                 children: shouldRenderSelectedShapeActions && renderSelectedShapeActions()
               }
             ),
-            defaultUIEnabled && isCompactStylesPanel && !appState.viewModeEnabled && shouldRenderSelectedShapeActions && /* @__PURE__ */ jsx131(
+            defaultUIEnabled && isCompactStylesPanel && !appState.viewModeEnabled && shouldRenderSelectedShapeActions && /* @__PURE__ */ jsx132(
               PenModeButton,
               {
                 checked: appState.penMode,
@@ -34421,17 +35112,17 @@ var LayerUI = ({
           ]
         }
       ),
-      defaultUIEnabled && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx131(Section, { heading: "shapes", className: "shapes-section", children: (heading) => /* @__PURE__ */ jsxs67("div", { style: { position: "relative" }, children: [
-        renderWelcomeScreen && /* @__PURE__ */ jsx131(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}),
-        /* @__PURE__ */ jsx131(Stack_default.Col, { gap: spacing.toolbarColGap, align: "start", children: /* @__PURE__ */ jsxs67(
+      defaultUIEnabled && !appState.viewModeEnabled && appState.openDialog?.name !== "elementLinkSelector" && /* @__PURE__ */ jsx132(Section, { heading: "shapes", className: "shapes-section", children: (heading) => /* @__PURE__ */ jsxs68("div", { style: { position: "relative" }, children: [
+        renderWelcomeScreen && /* @__PURE__ */ jsx132(tunnels.WelcomeScreenToolbarHintTunnel.Out, {}),
+        /* @__PURE__ */ jsx132(Stack_default.Col, { gap: spacing.toolbarColGap, align: "start", children: /* @__PURE__ */ jsxs68(
           Stack_default.Row,
           {
             gap: spacing.toolbarRowGap,
-            className: clsx58("App-toolbar-container", {
+            className: clsx59("App-toolbar-container", {
               "zen-mode": appState.zenModeEnabled
             }),
             children: [
-              /* @__PURE__ */ jsx131(
+              /* @__PURE__ */ jsx132(
                 Toolbar,
                 {
                   app,
@@ -34444,7 +35135,7 @@ var LayerUI = ({
                   heading
                 }
               ),
-              isCollaborating && /* @__PURE__ */ jsx131(
+              isCollaborating && /* @__PURE__ */ jsx132(
                 Island,
                 {
                   style: {
@@ -34452,7 +35143,7 @@ var LayerUI = ({
                     alignSelf: "center",
                     height: "fit-content"
                   },
-                  children: /* @__PURE__ */ jsx131(
+                  children: /* @__PURE__ */ jsx132(
                     LaserPointerButton,
                     {
                       title: t("toolBar.laser"),
@@ -34467,10 +35158,10 @@ var LayerUI = ({
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ jsxs67(
+      /* @__PURE__ */ jsxs68(
         "div",
         {
-          className: clsx58(
+          className: clsx59(
             "layer-ui__wrapper__top-right zen-mode-transition",
             {
               "transition-right": appState.zenModeEnabled,
@@ -34478,7 +35169,7 @@ var LayerUI = ({
             }
           ),
           children: [
-            defaultUIEnabled && appState.collaborators.size > 0 && /* @__PURE__ */ jsx131(
+            defaultUIEnabled && appState.collaborators.size > 0 && /* @__PURE__ */ jsx132(
               UserList,
               {
                 collaborators: appState.collaborators,
@@ -34490,7 +35181,7 @@ var LayerUI = ({
               editorInterface.formFactor === "phone",
               appState
             ),
-            shouldShowStats && /* @__PURE__ */ jsx131(
+            shouldShowStats && /* @__PURE__ */ jsx132(
               Stats,
               {
                 app,
@@ -34505,15 +35196,15 @@ var LayerUI = ({
       )
     ] }) });
   };
-  const renderSidebars = () => /* @__PURE__ */ jsx131(DefaultSidebar, {});
+  const renderSidebars = () => /* @__PURE__ */ jsx132(DefaultSidebar, {});
   const isSidebarDockedAndFits = false;
-  const layerUIJSX = /* @__PURE__ */ jsxs67(Fragment24, { children: [
+  const layerUIJSX = /* @__PURE__ */ jsxs68(Fragment25, { children: [
     children,
-    defaultUIEnabled && /* @__PURE__ */ jsx131(Fragment24, { children: /* @__PURE__ */ jsx131(DefaultMainMenu, { UIOptions }) }),
-    /* @__PURE__ */ jsx131(DefaultOverwriteConfirmDialog, {}),
-    defaultUIEnabled && appState.isLoading && /* @__PURE__ */ jsx131(LoadingMessage, { delay: 250 }),
-    defaultUIEnabled && appState.errorMessage && /* @__PURE__ */ jsx131(ErrorDialog, { onClose: () => setAppState({ errorMessage: null }), children: appState.errorMessage }),
-    defaultUIEnabled && eyeDropperState && editorInterface.formFactor !== "phone" && /* @__PURE__ */ jsx131(
+    defaultUIEnabled && /* @__PURE__ */ jsx132(Fragment25, { children: /* @__PURE__ */ jsx132(DefaultMainMenu, { UIOptions }) }),
+    /* @__PURE__ */ jsx132(DefaultOverwriteConfirmDialog, {}),
+    defaultUIEnabled && appState.isLoading && /* @__PURE__ */ jsx132(LoadingMessage, { delay: 250 }),
+    defaultUIEnabled && appState.errorMessage && /* @__PURE__ */ jsx132(ErrorDialog, { onClose: () => setAppState({ errorMessage: null }), children: appState.errorMessage }),
+    defaultUIEnabled && eyeDropperState && editorInterface.formFactor !== "phone" && /* @__PURE__ */ jsx132(
       EyeDropper,
       {
         colorPickerType: eyeDropperState.colorPickerType,
@@ -34529,7 +35220,7 @@ var LayerUI = ({
               mutateElement6(element, arrayToMap33(elements), {
                 [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === "elementBackground" ? "strokeColor" : "backgroundColor" : colorPickerType === "elementBackground" ? "backgroundColor" : "strokeColor"]: color
               });
-              ShapeCache4.delete(element);
+              ShapeCache6.delete(element);
             }
             app.scene.triggerUpdate();
           } else if (colorPickerType === "elementBackground") {
@@ -34548,7 +35239,7 @@ var LayerUI = ({
         }
       }
     ),
-    appState.openDialog?.name === "help" && /* @__PURE__ */ jsx131(
+    appState.openDialog?.name === "help" && /* @__PURE__ */ jsx132(
       HelpDialog,
       {
         onClose: () => {
@@ -34556,7 +35247,7 @@ var LayerUI = ({
         }
       }
     ),
-    defaultUIEnabled && appState.openDialog?.name === "elementLinkSelector" && /* @__PURE__ */ jsx131(
+    defaultUIEnabled && appState.openDialog?.name === "elementLinkSelector" && /* @__PURE__ */ jsx132(
       ElementLinkDialog_default,
       {
         sourceElementId: appState.openDialog.sourceElementId,
@@ -34570,10 +35261,10 @@ var LayerUI = ({
         generateLinkForSelection
       }
     ),
-    /* @__PURE__ */ jsx131(tunnels.OverwriteConfirmDialogTunnel.Out, {}),
+    /* @__PURE__ */ jsx132(tunnels.OverwriteConfirmDialogTunnel.Out, {}),
     renderImageExportDialog(),
     renderJSONExportDialog(),
-    defaultUIEnabled && appState.openDialog?.name === "charts" && /* @__PURE__ */ jsx131(
+    defaultUIEnabled && appState.openDialog?.name === "charts" && /* @__PURE__ */ jsx132(
       PasteChartDialog,
       {
         data: appState.openDialog.data,
@@ -34583,7 +35274,15 @@ var LayerUI = ({
         })
       }
     ),
-    editorInterface.formFactor === "phone" && /* @__PURE__ */ jsx131(
+    defaultUIEnabled && /* @__PURE__ */ jsx132(
+      GifPlaybackControls,
+      {
+        app,
+        files,
+        setAppState
+      }
+    ),
+    editorInterface.formFactor === "phone" && /* @__PURE__ */ jsx132(
       MobileMenu,
       {
         app,
@@ -34602,8 +35301,8 @@ var LayerUI = ({
         scrollBackToContentUIEnabled
       }
     ),
-    editorInterface.formFactor !== "phone" && /* @__PURE__ */ jsxs67(Fragment24, { children: [
-      appProps.viewportStatusFrame?.border && /* @__PURE__ */ jsx131(
+    editorInterface.formFactor !== "phone" && /* @__PURE__ */ jsxs68(Fragment25, { children: [
+      appProps.viewportStatusFrame?.border && /* @__PURE__ */ jsx132(
         ViewportStatusBorder,
         {
           border: appProps.viewportStatusFrame.border,
@@ -34615,15 +35314,15 @@ var LayerUI = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsxs67(
+      /* @__PURE__ */ jsxs68(
         "div",
         {
           className: "layer-ui__wrapper",
           style: isSidebarDockedAndFits ? { width: `calc(100% - var(--right-sidebar-width))` } : {},
           children: [
-            renderWelcomeScreen && /* @__PURE__ */ jsx131(tunnels.WelcomeScreenCenterTunnel.Out, {}),
+            renderWelcomeScreen && /* @__PURE__ */ jsx132(tunnels.WelcomeScreenCenterTunnel.Out, {}),
             renderFixedSideContainer(),
-            /* @__PURE__ */ jsx131(
+            /* @__PURE__ */ jsx132(
               Footer_default,
               {
                 appState,
@@ -34634,8 +35333,8 @@ var LayerUI = ({
                 zoomUIEnabled
               }
             ),
-            (appState.toast || scrollBackToContentUIEnabled && appState.scrolledOutside || appProps.viewportStatusFrame?.label) && /* @__PURE__ */ jsxs67("div", { className: "floating-status-stack", children: [
-              appState.toast && /* @__PURE__ */ jsx131(
+            (appState.toast || scrollBackToContentUIEnabled && appState.scrolledOutside || appProps.viewportStatusFrame?.label) && /* @__PURE__ */ jsxs68("div", { className: "floating-status-stack", children: [
+              appState.toast && /* @__PURE__ */ jsx132(
                 Toast,
                 {
                   message: appState.toast.message,
@@ -34644,7 +35343,7 @@ var LayerUI = ({
                   closable: appState.toast.closable
                 }
               ),
-              !appState.toast && scrollBackToContentUIEnabled && appState.scrolledOutside && /* @__PURE__ */ jsx131(
+              !appState.toast && scrollBackToContentUIEnabled && appState.scrolledOutside && /* @__PURE__ */ jsx132(
                 "button",
                 {
                   type: "button",
@@ -34657,7 +35356,7 @@ var LayerUI = ({
                   children: t("buttons.scrollBackToContent")
                 }
               ),
-              appProps.viewportStatusFrame?.label && /* @__PURE__ */ jsx131(
+              appProps.viewportStatusFrame?.label && /* @__PURE__ */ jsx132(
                 ViewportStatusBadge,
                 {
                   label: appProps.viewportStatusFrame.label,
@@ -34671,7 +35370,7 @@ var LayerUI = ({
     ] }),
     renderSidebars()
   ] });
-  return /* @__PURE__ */ jsx131(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx131(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx131(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
+  return /* @__PURE__ */ jsx132(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx132(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx132(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
 };
 var stripIrrelevantAppStateProps = (appState) => {
   const {
@@ -34706,11 +35405,11 @@ var areEqual2 = (prevProps, nextProps) => {
     }
   ) && isShallowEqual6(prev, next);
 };
-var LayerUI_default = React37.memo(LayerUI, areEqual2);
+var LayerUI_default = React38.memo(LayerUI, areEqual2);
 
 // components/SVGLayer.tsx
 import { useEffect as useEffect34, useRef as useRef28 } from "react";
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 var SVGLayer = ({ trails }) => {
   const svgRef = useRef28(null);
   useEffect34(() => {
@@ -34725,16 +35424,16 @@ var SVGLayer = ({ trails }) => {
       }
     };
   }, trails);
-  return /* @__PURE__ */ jsx132("div", { className: "SVGLayer", children: /* @__PURE__ */ jsx132("svg", { ref: svgRef }) });
+  return /* @__PURE__ */ jsx133("div", { className: "SVGLayer", children: /* @__PURE__ */ jsx133("svg", { ref: svgRef }) });
 };
 
 // components/canvases/InteractiveCanvas.tsx
-import React38, { useEffect as useEffect35, useRef as useRef29 } from "react";
+import React39, { useEffect as useEffect35, useRef as useRef29 } from "react";
 import {
   isShallowEqual as isShallowEqual7,
-  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords4
+  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords5
 } from "@excalidraw/common";
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var INTERACTIVE_SCENE_ANIMATION_KEY = "animateInteractiveScene";
 var InteractiveCanvas = (props) => {
   const isComponentMounted = useRef29(false);
@@ -34797,7 +35496,7 @@ var InteractiveCanvas = (props) => {
       }
       remotePointerViewportCoords.set(
         socketId,
-        sceneCoordsToViewportCoords4(
+        sceneCoordsToViewportCoords5(
           {
             sceneX: user.pointer.x,
             sceneY: user.pointer.y
@@ -34858,7 +35557,7 @@ var InteractiveCanvas = (props) => {
       );
     }
   });
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx134(
     "canvas",
     {
       className: "excalidraw__canvas interactive",
@@ -34938,12 +35637,13 @@ var areEqual3 = (prevProps, nextProps) => {
     getRelevantAppStateProps(nextProps.appState)
   );
 };
-var InteractiveCanvas_default = React38.memo(InteractiveCanvas, areEqual3);
+var InteractiveCanvas_default = React39.memo(InteractiveCanvas, areEqual3);
 
 // components/canvases/StaticCanvas.tsx
-import React39, { useEffect as useEffect36, useRef as useRef30 } from "react";
+import React40, { useEffect as useEffect36, useRef as useRef30 } from "react";
 import { isShallowEqual as isShallowEqual8 } from "@excalidraw/common";
-import { jsx as jsx134 } from "react/jsx-runtime";
+import { hasActiveGifDecode } from "@excalidraw/element";
+import { jsx as jsx135 } from "react/jsx-runtime";
 var StaticCanvas = (props) => {
   const wrapperRef = useRef30(null);
   const isComponentMounted = useRef30(false);
@@ -34952,7 +35652,7 @@ var StaticCanvas = (props) => {
   });
   const transitionFrameRef = useRef30(null);
   propsRef.current = props;
-  const renderCanvas = React39.useCallback(() => {
+  const renderCanvas = React40.useCallback(() => {
     const currentProps = propsRef.current;
     const wrapper = wrapperRef.current;
     if (!wrapper) {
@@ -34987,7 +35687,11 @@ var StaticCanvas = (props) => {
       )?.transitionStart;
       return transitionStart !== void 0 && performance.now() - transitionStart < transitionDuration;
     });
-    if (hasActiveTransition && transitionFrameRef.current === null) {
+    const hasActiveGifDecodeInRender = hasActiveGifDecode(
+      currentProps.visibleElements,
+      currentProps.renderConfig.imageCache
+    );
+    if ((hasActiveTransition || hasActiveGifDecodeInRender) && transitionFrameRef.current === null) {
       transitionFrameRef.current = requestAnimationFrame(() => {
         transitionFrameRef.current = null;
         renderCanvasRef.current();
@@ -35040,7 +35744,7 @@ var StaticCanvas = (props) => {
     },
     []
   );
-  return /* @__PURE__ */ jsx134("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
+  return /* @__PURE__ */ jsx135("div", { className: "excalidraw__canvas-wrapper", ref: wrapperRef });
 };
 var getRelevantAppStateProps2 = (appState) => {
   const relevantAppStateProps = {
@@ -35085,7 +35789,7 @@ var areEqual4 = (prevProps, nextProps) => {
     getRelevantAppStateProps2(nextProps.appState)
   ) && isShallowEqual8(prevProps.renderConfig, nextProps.renderConfig);
 };
-var StaticCanvas_default = React39.memo(StaticCanvas, areEqual4);
+var StaticCanvas_default = React40.memo(StaticCanvas, areEqual4);
 
 // components/canvases/NewElementCanvas.tsx
 import { useEffect as useEffect37, useRef as useRef31 } from "react";
@@ -35162,7 +35866,7 @@ var renderNewElementScene = (renderConfig, throttle5) => {
 };
 
 // components/canvases/NewElementCanvas.tsx
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
 var NewElementCanvas = (props) => {
   const canvasRef = useRef31(null);
   useEffect37(() => {
@@ -35183,7 +35887,7 @@ var NewElementCanvas = (props) => {
       isRenderThrottlingEnabled()
     );
   });
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx136(
     "canvas",
     {
       className: "excalidraw__canvas",
@@ -35200,10 +35904,10 @@ var NewElementCanvas = (props) => {
 var NewElementCanvas_default = NewElementCanvas;
 
 // components/CursorHint.tsx
-import clsx59 from "clsx";
+import clsx60 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 jsx136 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 var CURSOR_HINT_DURATION = 700;
 var CURSOR_HINT_FADE_DURATION = 100;
 var CURSOR_HINT_GAP = 16;
@@ -35315,11 +36019,11 @@ var CursorHint = () => {
   if (!hint) {
     return null;
   }
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx137(
     "div",
     {
       ref: hintRef,
-      className: clsx59("CursorHint", {
+      className: clsx60("CursorHint", {
         "CursorHint--fade-out": isFadingOut
       }),
       "data-testid": "cursor-hint",
@@ -35446,14 +36150,14 @@ var AppStateObserver = class {
 
 // components/UnlockPopup.tsx
 import {
-  getCommonBounds as getCommonBounds12,
+  getCommonBounds as getCommonBounds13,
   getElementsInGroup as getElementsInGroup11,
   isNonDeletedElement as isNonDeletedElement5,
   selectGroupsFromGivenElements as selectGroupsFromGivenElements4
 } from "@excalidraw/element";
-import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords5 } from "@excalidraw/common";
+import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords6 } from "@excalidraw/common";
 import { flushSync } from "react-dom";
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 var UnlockPopup = ({
   app,
   activeLockedId
@@ -35472,12 +36176,12 @@ var UnlockPopup = ({
   if (elements.length === 0) {
     return null;
   }
-  const [x, y] = getCommonBounds12(elements);
-  const { x: viewX, y: viewY } = sceneCoordsToViewportCoords5(
+  const [x, y] = getCommonBounds13(elements);
+  const { x: viewX, y: viewY } = sceneCoordsToViewportCoords6(
     { sceneX: x, sceneY: y },
     app.state
   );
-  return /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       className: "UnlockPopup",
@@ -35510,9 +36214,9 @@ var UnlockPopup = ({
 var UnlockPopup_default = UnlockPopup;
 
 // components/App.tsx
-import { Fragment as Fragment25, jsx as jsx138, jsxs as jsxs68 } from "react/jsx-runtime";
-var AppContext = React40.createContext(null);
-var AppPropsContext = React40.createContext(null);
+import { Fragment as Fragment26, jsx as jsx139, jsxs as jsxs69 } from "react/jsx-runtime";
+var AppContext = React41.createContext(null);
+var AppPropsContext = React41.createContext(null);
 var editorInterfaceContextInitialValue = {
   formFactor: "desktop",
   desktopUIMode: "full",
@@ -35523,7 +36227,7 @@ var editorInterfaceContextInitialValue = {
   canFitSidebar: false,
   isLandscape: true
 };
-var EditorInterfaceContext = React40.createContext(
+var EditorInterfaceContext = React41.createContext(
   editorInterfaceContextInitialValue
 );
 EditorInterfaceContext.displayName = "EditorInterfaceContext";
@@ -35532,11 +36236,11 @@ var editorLifecycleEventBehavior = {
   "editor:initialize": { cardinality: "once", replay: "last" },
   "editor:unmount": { cardinality: "once", replay: "last" }
 };
-var ExcalidrawContainerContext = React40.createContext({ container: null, id: null });
+var ExcalidrawContainerContext = React41.createContext({ container: null, id: null });
 ExcalidrawContainerContext.displayName = "ExcalidrawContainerContext";
-var ExcalidrawElementsContext = React40.createContext([]);
+var ExcalidrawElementsContext = React41.createContext([]);
 ExcalidrawElementsContext.displayName = "ExcalidrawElementsContext";
-var ExcalidrawAppStateContext = React40.createContext({
+var ExcalidrawAppStateContext = React41.createContext({
   ...getDefaultAppState(),
   width: 0,
   height: 0,
@@ -35544,17 +36248,17 @@ var ExcalidrawAppStateContext = React40.createContext({
   offsetTop: 0
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
-var ExcalidrawSetAppStateContext = React40.createContext(() => {
+var ExcalidrawSetAppStateContext = React41.createContext(() => {
   console.warn("Uninitialized ExcalidrawSetAppStateContext context!");
 });
 ExcalidrawSetAppStateContext.displayName = "ExcalidrawSetAppStateContext";
-var ExcalidrawActionManagerContext = React40.createContext(
+var ExcalidrawActionManagerContext = React41.createContext(
   null
 );
 ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
-var ExcalidrawAPIContext = React40.createContext(null);
+var ExcalidrawAPIContext = React41.createContext(null);
 ExcalidrawAPIContext.displayName = "ExcalidrawAPIContext";
-var ExcalidrawAPISetContext = React40.createContext(null);
+var ExcalidrawAPISetContext = React41.createContext(null);
 ExcalidrawAPISetContext.displayName = "ExcalidrawAPISetContext";
 var useApp = () => useContext4(AppContext);
 var useAppProps = () => useContext4(AppPropsContext);
@@ -35588,7 +36292,7 @@ var gesture = {
   initialDistance: null,
   initialScale: null
 };
-var App = class _App extends React40.Component {
+var App = class _App extends React41.Component {
   constructor(props) {
     super(props);
     __publicField(this, "canvas");
@@ -35601,7 +36305,7 @@ var App = class _App extends React40.Component {
     __publicField(this, "stylesPanelMode", deriveStylesPanelMode2(
       editorInterfaceContextInitialValue
     ));
-    __publicField(this, "excalidrawContainerRef", React40.createRef());
+    __publicField(this, "excalidrawContainerRef", React41.createRef());
     __publicField(this, "scene");
     __publicField(this, "fonts");
     __publicField(this, "renderer");
@@ -35643,6 +36347,7 @@ var App = class _App extends React40.Component {
     __publicField(this, "bucketFill", new AppBucketFill(this));
     __publicField(this, "flowchart", new AppFlowchart(this));
     __publicField(this, "cursor", new AppCursor(this));
+    __publicField(this, "gifPlayback", new AppGifPlayback(this));
     __publicField(this, "zDragZoom", null);
     __publicField(this, "arrowText", new AppArrowText(this));
     __publicField(this, "viewport", new AppViewport(this, {
@@ -35763,7 +36468,7 @@ var App = class _App extends React40.Component {
     });
     __publicField(this, "updateEmbedValidationStatus", (element, status) => {
       this.embedsValidationStatus.set(element.id, status);
-      ShapeCache5.delete(element);
+      ShapeCache7.delete(element);
     });
     __publicField(this, "updateEmbeddables", () => {
       const iframeLikes = /* @__PURE__ */ new Set();
@@ -35870,7 +36575,7 @@ var App = class _App extends React40.Component {
           }
           return null;
         }
-        const { x: x1, y: y1 } = sceneCoordsToViewportCoords6(
+        const { x: x1, y: y1 } = sceneCoordsToViewportCoords7(
           { sceneX: f.x, sceneY: f.y },
           this.state
         );
@@ -35879,7 +36584,7 @@ var App = class _App extends React40.Component {
         const frameName = getFrameLikeTitle(f);
         if (f.id === this.state.editingFrame) {
           const frameNameInEdit = frameName;
-          frameNameJSX = /* @__PURE__ */ jsx138(
+          frameNameJSX = /* @__PURE__ */ jsx139(
             "input",
             {
               autoFocus: true,
@@ -35924,7 +36629,7 @@ var App = class _App extends React40.Component {
         } else {
           frameNameJSX = frameName;
         }
-        return /* @__PURE__ */ jsx138(
+        return /* @__PURE__ */ jsx139(
           "div",
           {
             id: this.getFrameNameDOMId(f),
@@ -36030,7 +36735,7 @@ var App = class _App extends React40.Component {
             this.updateScene({
               elements: this.scene.getElementsIncludingDeleted().map((el) => {
                 if (this.state.selectedElementIds[el.id]) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     [shouldUpdateStrokeColor ? "strokeColor" : "backgroundColor"]: color
                   });
                 }
@@ -36113,6 +36818,7 @@ var App = class _App extends React40.Component {
       }
     }));
     __publicField(this, "scheduleCapture", () => this.store.scheduleCapture());
+    __publicField(this, "scheduleUpdate", () => this.store.scheduleAction(CaptureUpdateAction39.NEVER));
     // Lifecycle
     __publicField(this, "onBlur", withBatchedUpdates(() => {
       isHoldingSpace = false;
@@ -36518,7 +37224,7 @@ var App = class _App extends React40.Component {
       this.reconcileStylesPanelMode(this.editorInterface);
     });
     __publicField(this, "onResize", withBatchedUpdates(() => {
-      this.scene.getElementsIncludingDeleted().forEach((element) => ShapeCache5.delete(element));
+      this.scene.getElementsIncludingDeleted().forEach((element) => ShapeCache7.delete(element));
       this.refreshEditorInterface();
       this.updateDOMRect();
       this.setState({});
@@ -36704,7 +37410,7 @@ var App = class _App extends React40.Component {
       const elements = restoreElements(opts.elements, null, {
         deleteInvisibleElements: true
       });
-      const [minX, minY, maxX, maxY] = getCommonBounds13(elements);
+      const [minX, minY, maxX, maxY] = getCommonBounds14(elements);
       const elementsCenterX = distance2(minX, maxX) / 2;
       const elementsCenterY = distance2(minY, maxY) / 2;
       const clientX = typeof opts.position === "object" ? opts.position.clientX : opts.position === "cursor" ? this.viewport.lastPosition.x : this.state.width / 2 + this.state.offsetLeft;
@@ -36719,7 +37425,7 @@ var App = class _App extends React40.Component {
       const { duplicatedElements } = duplicateElements2({
         type: "everything",
         elements: elements.map((element) => {
-          return newElementWith10(element, {
+          return newElementWith11(element, {
             x: element.x + gridX - minX,
             y: element.y + gridY - minY
           });
@@ -36904,7 +37610,7 @@ var App = class _App extends React40.Component {
         return;
       }
       this.viewport.setViewport({
-        target: getCommonBounds13(elements),
+        target: getCommonBounds14(elements),
         fit: "scale-down",
         animation: { duration: 300 },
         offsets: { ui: true }
@@ -36982,7 +37688,9 @@ var App = class _App extends React40.Component {
         const refreshImageCache = _updateImageCache({
           imageCache: this.imageCache,
           fileIds: Array.from(placeholderFileIds),
-          files: this.files
+          files: this.files,
+          onImageCacheUpdate: (fileId) => this.handleImageCacheUpdate(fileId),
+          gifAutoDecodeMaxFileSizeBytes: this.props.imageOptions.gifAutoDecodeMaxFileSizeBytes
         });
         refreshImageCache.then(async ({ updatedFiles }) => {
           for (const [fileId, placeholderImagePromise] of placeholderImages) {
@@ -37045,9 +37753,13 @@ var App = class _App extends React40.Component {
       const placeholderEntry = {
         image: imagePromise,
         mimeType: normalizedFile.type,
-        isPlaceholder: true
+        isPlaceholder: true,
+        gifDecodeStatus: normalizedFile.type === MIME_TYPES11.gif ? "pending" : void 0
       };
       this.imageCache.set(fileId, placeholderEntry);
+      if (placeholderEntry.gifDecodeStatus === "pending") {
+        this.imagePlaceholderUpdateEmitter.trigger();
+      }
       image.src = await getDataURL(normalizedFile);
       try {
         const loadedImage = await imagePromise;
@@ -37139,8 +37851,8 @@ var App = class _App extends React40.Component {
     });
     __publicField(this, "clearImageShapeCacheForFileId", (fileId) => {
       for (const element of this.scene.getNonDeletedElements()) {
-        if (isInitializedImageElement3(element) && element.fileId === fileId) {
-          ShapeCache5.delete(element);
+        if (isInitializedImageElement5(element) && element.fileId === fileId) {
+          ShapeCache7.delete(element);
         }
       }
     });
@@ -37154,11 +37866,11 @@ var App = class _App extends React40.Component {
         }
         addedFiles[fileData.id] = fileData;
         nextFiles[fileData.id] = fileData;
-        if (fileData.mimeType === MIME_TYPES9.svg) {
+        if (fileData.mimeType === MIME_TYPES11.svg) {
           try {
             const restoredDataURL = getDataURL_sync(
               normalizeSVG(dataURLToString(fileData.dataURL)),
-              MIME_TYPES9.svg
+              MIME_TYPES11.svg
             );
             if (fileData.dataURL !== restoredDataURL) {
               fileData.version = (fileData.version ?? 1) + 1;
@@ -38870,7 +39582,7 @@ var App = class _App extends React40.Component {
         }
       } else if (selectedElements.length > 1 && !isOverScrollBar && this.state.openDialog?.name !== "elementLinkSelector") {
         const transformHandleType = getTransformHandleTypeFromCoords(
-          getCommonBounds13(selectedElements),
+          getCommonBounds14(selectedElements),
           scenePointerX,
           scenePointerY,
           this.state.zoom,
@@ -39579,7 +40291,7 @@ var App = class _App extends React40.Component {
           }
         } else if (selectedElements.length > 1) {
           pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(
-            getCommonBounds13(selectedElements),
+            getCommonBounds14(selectedElements),
             pointerDownState.origin.x,
             pointerDownState.origin.y,
             this.state.zoom,
@@ -40414,7 +41126,7 @@ var App = class _App extends React40.Component {
       const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
         if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || isBoundToContainer10(ele) && this.elementsPendingErasure.has(ele.containerId)) {
           didChange = true;
-          return newElementWith10(ele, { isDeleted: true });
+          return newElementWith11(ele, { isDeleted: true });
         }
         return ele;
       });
@@ -40429,7 +41141,11 @@ var App = class _App extends React40.Component {
         throw new Error(t("errors.unsupportedFileType"));
       }
       this.cursor.set("wait");
-      if (imageFile.type === MIME_TYPES9.svg) {
+      const placeholderGifFileId = this.gifPlayback.createPlaceholderDecodeState(
+        placeholderImageElement,
+        imageFile
+      );
+      if (imageFile.type === MIME_TYPES11.svg) {
         try {
           imageFile = SVGStringToFile(
             normalizeSVG(await imageFile.text()),
@@ -40439,7 +41155,7 @@ var App = class _App extends React40.Component {
           console.warn(error);
           throw new Error(t("errors.svgImageInsertError"));
         }
-      } else {
+      } else if (imageFile.type !== MIME_TYPES11.gif) {
         const { maxWidthOrHeight } = this.props.imageOptions;
         try {
           imageFile = await (this.props.compressImageFile ?? resizeImageFile)(
@@ -40451,6 +41167,7 @@ var App = class _App extends React40.Component {
         }
       }
       const mimeType = imageFile.type;
+      const isGif = mimeType === MIME_TYPES11.gif;
       const fileId = await (this.props.generateIdForFile?.(
         imageFile
       ) || generateIdFromFile(imageFile));
@@ -40489,8 +41206,21 @@ var App = class _App extends React40.Component {
                 lastRetrieved: Date.now()
               }
             ]);
+            if (isGif) {
+              initializedImageElement = this.gifPlayback.ensureElementPlaybackMetadata(
+                initializedImageElement
+              );
+              this.scene.replaceAllElements(
+                this.scene.getElementsIncludingDeleted().map(
+                  (element) => element.id === initializedImageElement.id ? initializedImageElement : element
+                )
+              );
+              this.imagePlaceholderUpdateEmitter.trigger();
+            }
             if (!this.imageCache.get(fileId)) {
-              this.addNewImagesToImageCache();
+              if (!isGif) {
+                this.addNewImagesToImageCache();
+              }
               const { erroredFiles } = await this.updateImageCache([
                 initializedImageElement
               ]);
@@ -40511,9 +41241,13 @@ var App = class _App extends React40.Component {
               );
               Object.assign(initializedImageElement, naturalDimensions);
             }
-            initializedImageElement = newElementWith10(initializedImageElement, {
+            initializedImageElement = newElementWith11(initializedImageElement, {
               fileName: imageFile.name,
               thumbHash,
+              gifPlayback: isGif ? this.gifPlayback.ensureElementPlaybackMetadata(
+                initializedImageElement,
+                { playing: true }
+              ).gifPlayback : null,
               status: "saved"
             });
             this.files = {
@@ -40524,8 +41258,12 @@ var App = class _App extends React40.Component {
                 thumbHash: thumbHash ?? void 0
               }
             };
+            if (placeholderGifFileId && placeholderGifFileId !== fileId) {
+              this.gifPlayback.removePlaceholderDecodeState(placeholderGifFileId);
+            }
             resolve(initializedImageElement);
           } catch (error) {
+            this.gifPlayback.removePlaceholderDecodeState(placeholderGifFileId);
             console.error(error);
             reject(new Error(t("errors.imageInsertError")));
           }
@@ -40539,7 +41277,7 @@ var App = class _App extends React40.Component {
      */
     __publicField(this, "getLatestInitializedImageElement", (imagePlaceholder, fileId) => {
       const latestImageElement = this.scene.getElement(imagePlaceholder.id) ?? imagePlaceholder;
-      return newElementWith10(
+      return newElementWith11(
         latestImageElement,
         {
           fileId
@@ -40601,6 +41339,16 @@ var App = class _App extends React40.Component {
     });
     /** updates image cache, refreshing updated elements and/or setting status
         to error for images that fail during <img> element creation */
+    __publicField(this, "handleImageCacheUpdate", (fileId) => {
+      for (const element of this.scene.getNonDeletedElements()) {
+        if (isInitializedImageElement5(element) && element.fileId === fileId) {
+          ShapeCache7.delete(element);
+        }
+      }
+      this.imagePlaceholderUpdateEmitter.trigger();
+      this.scene.triggerUpdate();
+      this.ensureGifPlaybackLoop();
+    });
     __publicField(this, "updateImageCache", async (elements, files = this.files) => {
       const placeholderImages = /* @__PURE__ */ new Map();
       for (const element of elements) {
@@ -40615,7 +41363,9 @@ var App = class _App extends React40.Component {
       const { updatedFiles, erroredFiles } = await _updateImageCache({
         imageCache: this.imageCache,
         fileIds: elements.map((element) => element.fileId),
-        files
+        files,
+        onImageCacheUpdate: (fileId) => this.handleImageCacheUpdate(fileId),
+        gifAutoDecodeMaxFileSizeBytes: this.props.imageOptions.gifAutoDecodeMaxFileSizeBytes
       });
       for (const [fileId, placeholderImagePromise] of placeholderImages) {
         const cacheEntry = this.imageCache.get(fileId);
@@ -40632,14 +41382,14 @@ var App = class _App extends React40.Component {
         this.store.scheduleAction(CaptureUpdateAction39.NEVER);
         this.scene.replaceAllElements(
           this.scene.getElementsIncludingDeleted().map((element) => {
-            if (isInitializedImageElement3(element)) {
+            if (isInitializedImageElement5(element)) {
               if (erroredFiles.has(element.fileId)) {
-                return newElementWith10(element, {
+                return newElementWith11(element, {
                   status: "error"
                 });
               }
               if (updatedFiles.has(element.fileId) && element.status === "error") {
-                return newElementWith10(element, {
+                return newElementWith11(element, {
                   status: "saved"
                 });
               }
@@ -40650,6 +41400,32 @@ var App = class _App extends React40.Component {
       }
       return { updatedFiles, erroredFiles };
     });
+    __publicField(this, "ensureGifPlaybackLoop", () => {
+      this.gifPlayback.ensureLoop();
+    });
+    __publicField(this, "loadDeferredGif", async (fileId) => {
+      const cacheEntry = this.imageCache.get(fileId);
+      const fileData = this.files[fileId];
+      if (fileData?.mimeType !== MIME_TYPES11.gif || !cacheEntry) {
+        return;
+      }
+      this.imageCache.set(fileId, {
+        ...cacheEntry,
+        gifDecodeStatus: "pending"
+      });
+      this.handleImageCacheUpdate(fileId);
+      await _updateImageCache({
+        imageCache: this.imageCache,
+        fileIds: [fileId],
+        files: this.files,
+        onImageCacheUpdate: (updatedFileId) => this.handleImageCacheUpdate(updatedFileId),
+        forceGifDecode: true
+      });
+    });
+    __publicField(this, "getGifPlaybackFrameIndex", (element) => this.gifPlayback.getFrameIndex(element));
+    __publicField(this, "setGifPlaybackFrameIndex", (element, frameIndex) => {
+      this.gifPlayback.setFrameIndex(element, frameIndex);
+    });
     /** adds new images to imageCache and re-renders if needed */
     __publicField(this, "addNewImagesToImageCache", async (imageElements = getInitializedImageElements(
       this.scene.getNonDeletedElements()
@@ -40665,7 +41441,7 @@ var App = class _App extends React40.Component {
         if (updatedFiles.size) {
           for (const element of uncachedImageElements) {
             if (updatedFiles.has(element.fileId)) {
-              ShapeCache5.delete(element);
+              ShapeCache7.delete(element);
             }
           }
         }
@@ -40726,7 +41502,7 @@ var App = class _App extends React40.Component {
             this.setState({
               errorMessage: error.message || t("errors.imageInsertError")
             });
-            return newElementWith10(placeholder, {
+            return newElementWith11(placeholder, {
               isDeleted: true
             });
           }
@@ -40791,7 +41567,7 @@ var App = class _App extends React40.Component {
       }
       if (fileItems.length === 1) {
         const { file: file2, fileHandle } = fileItems[0];
-        if (file2 && (file2.type === MIME_TYPES9.png || file2.type === MIME_TYPES9.svg)) {
+        if (file2 && (file2.type === MIME_TYPES11.png || file2.type === MIME_TYPES11.svg)) {
           try {
             const scene = await loadFromBlob(
               file2,
@@ -40834,7 +41610,7 @@ var App = class _App extends React40.Component {
           await this.loadFileToCanvas(file2, fileHandle);
         }
       }
-      const textItem = dataTransferList.findByType(MIME_TYPES9.text);
+      const textItem = dataTransferList.findByType(MIME_TYPES11.text);
       if (textItem) {
         const text = textItem.value;
         if (text && embeddableURLValidator2(text, this.props.validateEmbeddable) && (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(text) || getEmbedLink2(text)?.type === "video")) {
@@ -40991,7 +41767,7 @@ var App = class _App extends React40.Component {
         pointerCoords.y,
         event[KEYS52.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
-      const image = isInitializedImageElement3(newElement9) && this.imageCache.get(newElement9.fileId)?.image;
+      const image = isInitializedImageElement5(newElement9) && this.imageCache.get(newElement9.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
       this.maybeCacheReferenceSnapPoints(event, [newElement9]);
       const { snapOffset, snapLines } = snapNewElement(
@@ -41063,7 +41839,7 @@ var App = class _App extends React40.Component {
         const croppingAtStateStart = pointerDownState.originalElements.get(
           croppingElement.id
         );
-        const image = isInitializedImageElement3(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
+        const image = isInitializedImageElement5(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
         if (croppingAtStateStart && isImageElement9(croppingAtStateStart) && image && !(image instanceof Promise)) {
           const [gridX, gridY] = getGridPoint4(
             pointerCoords.x,
@@ -42075,8 +42851,8 @@ var App = class _App extends React40.Component {
     const embeddableElements = this.scene.getNonDeletedElements().filter(
       (el) => isEmbeddableElement4(el) && this.embedsValidationStatus.get(el.id) === true || isIframeElement2(el)
     );
-    return /* @__PURE__ */ jsx138(Fragment25, { children: embeddableElements.map((el) => {
-      const { x, y } = sceneCoordsToViewportCoords6(
+    return /* @__PURE__ */ jsx139(Fragment26, { children: embeddableElements.map((el) => {
+      const { x, y } = sceneCoordsToViewportCoords7(
         { sceneX: el.x, sceneY: el.y },
         this.state
       );
@@ -42104,10 +42880,10 @@ var App = class _App extends React40.Component {
         0.75,
         MAX_EMBEDDABLE_VIEWPORT_SCALE
       );
-      return /* @__PURE__ */ jsx138(
+      return /* @__PURE__ */ jsx139(
         "div",
         {
-          className: clsx60("excalidraw__embeddable-container", {
+          className: clsx61("excalidraw__embeddable-container", {
             "is-hovered": isHovered
           }),
           style: {
@@ -42125,7 +42901,7 @@ var App = class _App extends React40.Component {
               el
             )}px`
           },
-          children: /* @__PURE__ */ jsxs68(
+          children: /* @__PURE__ */ jsxs69(
             "div",
             {
               className: "excalidraw__embeddable-container__inner",
@@ -42136,15 +42912,15 @@ var App = class _App extends React40.Component {
                 pointerEvents: isActive ? POINTER_EVENTS.enabled : POINTER_EVENTS.disabled
               },
               children: [
-                isHovered && /* @__PURE__ */ jsx138("div", { className: "excalidraw__embeddable-hint", children: t("buttons.embeddableInteractionButton") }),
-                /* @__PURE__ */ jsx138(
+                isHovered && /* @__PURE__ */ jsx139("div", { className: "excalidraw__embeddable-hint", children: t("buttons.embeddableInteractionButton") }),
+                /* @__PURE__ */ jsx139(
                   "div",
                   {
                     className: "excalidraw__embeddable__outer",
                     style: {
                       padding: `${el.strokeWidth}px`
                     },
-                    children: /* @__PURE__ */ jsx138(
+                    children: /* @__PURE__ */ jsx139(
                       "div",
                       {
                         className: "excalidraw__embeddable__content",
@@ -42153,7 +42929,7 @@ var App = class _App extends React40.Component {
                           height: `${embeddableViewportScale * 100}%`,
                           transform: `scale(${1 / embeddableViewportScale})`
                         },
-                        children: (isEmbeddableElement4(el) ? this.props.renderEmbeddable?.(el, this.state) : null) ?? /* @__PURE__ */ jsx138(
+                        children: (isEmbeddableElement4(el) ? this.props.renderEmbeddable?.(el, this.state) : null) ?? /* @__PURE__ */ jsx139(
                           "iframe",
                           {
                             ref: (ref) => this.cacheEmbeddableRef(el, ref),
@@ -42220,11 +42996,11 @@ var App = class _App extends React40.Component {
     );
     const firstSelectedElement = selectedElements[0];
     const showShapeSwitchPanel = editorJotaiStore.get(convertElementTypePopupAtom)?.type === "panel";
-    return /* @__PURE__ */ jsx138(
+    return /* @__PURE__ */ jsx139(
       "div",
       {
         translate: "no",
-        className: clsx60(
+        className: clsx61(
           "excalidraw excalidraw-container notranslate",
           this.props.className,
           {
@@ -42252,25 +43028,25 @@ var App = class _App extends React40.Component {
         onKeyDown: this.props.handleKeyboardGlobally || !this.isInteractionEnabled() ? void 0 : this.onKeyDown,
         onPointerEnter: this.isInteractionEnabled() ? this.toggleOverscrollBehavior : void 0,
         onPointerLeave: this.isInteractionEnabled() ? this.toggleOverscrollBehavior : void 0,
-        children: /* @__PURE__ */ jsx138(ExcalidrawAPIContext.Provider, { value: this.api, children: /* @__PURE__ */ jsx138(AppContext.Provider, { value: this, children: /* @__PURE__ */ jsx138(AppPropsContext.Provider, { value: this.props, children: /* @__PURE__ */ jsx138(
+        children: /* @__PURE__ */ jsx139(ExcalidrawAPIContext.Provider, { value: this.api, children: /* @__PURE__ */ jsx139(AppContext.Provider, { value: this, children: /* @__PURE__ */ jsx139(AppPropsContext.Provider, { value: this.props, children: /* @__PURE__ */ jsx139(
           ExcalidrawContainerContext.Provider,
           {
             value: this.excalidrawContainerValue,
-            children: /* @__PURE__ */ jsx138(EditorInterfaceContext.Provider, { value: this.editorInterface, children: /* @__PURE__ */ jsx138(
+            children: /* @__PURE__ */ jsx139(EditorInterfaceContext.Provider, { value: this.editorInterface, children: /* @__PURE__ */ jsx139(
               ExcalidrawSetAppStateContext.Provider,
               {
                 value: this.setAppState,
-                children: /* @__PURE__ */ jsx138(ExcalidrawAppStateContext.Provider, { value: this.state, children: /* @__PURE__ */ jsxs68(
+                children: /* @__PURE__ */ jsx139(ExcalidrawAppStateContext.Provider, { value: this.state, children: /* @__PURE__ */ jsxs69(
                   ExcalidrawElementsContext.Provider,
                   {
                     value: this.scene.getNonDeletedElements(),
                     children: [
-                      /* @__PURE__ */ jsxs68(
+                      /* @__PURE__ */ jsxs69(
                         ExcalidrawActionManagerContext.Provider,
                         {
                           value: this.actionManager,
                           children: [
-                            /* @__PURE__ */ jsx138(
+                            /* @__PURE__ */ jsx139(
                               LayerUI_default,
                               {
                                 canvas: this.canvas,
@@ -42301,10 +43077,10 @@ var App = class _App extends React40.Component {
                                 children: this.props.children
                               }
                             ),
-                            /* @__PURE__ */ jsx138("div", { className: "excalidraw-textEditorContainer" }),
-                            /* @__PURE__ */ jsx138("div", { className: "excalidraw-contextMenuContainer" }),
-                            /* @__PURE__ */ jsx138("div", { className: "excalidraw-eye-dropper-container" }),
-                            /* @__PURE__ */ jsx138(
+                            /* @__PURE__ */ jsx139("div", { className: "excalidraw-textEditorContainer" }),
+                            /* @__PURE__ */ jsx139("div", { className: "excalidraw-contextMenuContainer" }),
+                            /* @__PURE__ */ jsx139("div", { className: "excalidraw-eye-dropper-container" }),
+                            /* @__PURE__ */ jsx139(
                               SVGLayer,
                               {
                                 trails: [
@@ -42315,8 +43091,8 @@ var App = class _App extends React40.Component {
                                 ]
                               }
                             ),
-                            this.isDefaultUIEnabled() && /* @__PURE__ */ jsx138(CursorHint, {}),
-                            this.isDefaultUIEnabled() && selectedElements.length === 1 && this.state.openDialog?.name !== "elementLinkSelector" && this.state.showHyperlinkPopup && /* @__PURE__ */ jsx138(
+                            this.isDefaultUIEnabled() && /* @__PURE__ */ jsx139(CursorHint, {}),
+                            this.isDefaultUIEnabled() && selectedElements.length === 1 && this.state.openDialog?.name !== "elementLinkSelector" && this.state.showHyperlinkPopup && /* @__PURE__ */ jsx139(
                               Hyperlink,
                               {
                                 element: firstSelectedElement,
@@ -42328,7 +43104,7 @@ var App = class _App extends React40.Component {
                               },
                               firstSelectedElement.id
                             ),
-                            this.isDefaultUIEnabled() && this.state.contextMenu && /* @__PURE__ */ jsx138(
+                            this.isDefaultUIEnabled() && this.state.contextMenu && /* @__PURE__ */ jsx139(
                               ContextMenu2,
                               {
                                 items: this.state.contextMenu.items,
@@ -42343,7 +43119,7 @@ var App = class _App extends React40.Component {
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx138(
+                            /* @__PURE__ */ jsx139(
                               StaticCanvas_default,
                               {
                                 app: this,
@@ -42358,6 +43134,7 @@ var App = class _App extends React40.Component {
                                 appState: this.state,
                                 renderConfig: {
                                   imageCache: this.imageCache,
+                                  getGifFrameIndex: this.gifPlayback.getFrameIndex,
                                   isExporting: false,
                                   renderGrid: isGridModeEnabled(this),
                                   renderLinks: this.isLinksEnabled(),
@@ -42370,7 +43147,7 @@ var App = class _App extends React40.Component {
                                 }
                               }
                             ),
-                            newElementCanvasElement && /* @__PURE__ */ jsx138(
+                            newElementCanvasElement && /* @__PURE__ */ jsx139(
                               NewElementCanvas_default,
                               {
                                 appState: this.state,
@@ -42381,6 +43158,7 @@ var App = class _App extends React40.Component {
                                 allElementsMap,
                                 renderConfig: {
                                   imageCache: this.imageCache,
+                                  getGifFrameIndex: this.gifPlayback.getFrameIndex,
                                   isExporting: false,
                                   imageTransitionDuration: this.props.imageOptions.placeholderTransitionDuration,
                                   renderGrid: false,
@@ -42392,7 +43170,7 @@ var App = class _App extends React40.Component {
                                 }
                               }
                             ),
-                            /* @__PURE__ */ jsx138(
+                            /* @__PURE__ */ jsx139(
                               InteractiveCanvas_default,
                               {
                                 app: this,
@@ -42422,21 +43200,21 @@ var App = class _App extends React40.Component {
                                 onDoubleClick: this.handleCanvasDoubleClick
                               }
                             ),
-                            this.props.viewportStatusFrame?.border && this.editorInterface.formFactor === "phone" && /* @__PURE__ */ jsx138(
+                            this.props.viewportStatusFrame?.border && this.editorInterface.formFactor === "phone" && /* @__PURE__ */ jsx139(
                               ViewportStatusBorder,
                               {
                                 border: this.props.viewportStatusFrame.border
                               }
                             ),
                             this.renderFrameNames(),
-                            this.isDefaultUIEnabled() && this.state.activeLockedId && /* @__PURE__ */ jsx138(
+                            this.isDefaultUIEnabled() && this.state.activeLockedId && /* @__PURE__ */ jsx139(
                               UnlockPopup_default,
                               {
                                 app: this,
                                 activeLockedId: this.state.activeLockedId
                               }
                             ),
-                            this.isDefaultUIEnabled() && showShapeSwitchPanel && /* @__PURE__ */ jsx138(ConvertElementTypePopup_default, { app: this })
+                            this.isDefaultUIEnabled() && showShapeSwitchPanel && /* @__PURE__ */ jsx139(ConvertElementTypePopup_default, { app: this })
                           ]
                         }
                       ),
@@ -42454,9 +43232,9 @@ var App = class _App extends React40.Component {
   clearImageShapeCache(filesMap) {
     const files = filesMap ?? this.files;
     this.scene.getNonDeletedElements().forEach((element) => {
-      if (isInitializedImageElement3(element) && files[element.fileId]) {
+      if (isInitializedImageElement5(element) && files[element.fileId]) {
         this.imageCache.delete(element.fileId);
-        ShapeCache5.delete(element);
+        ShapeCache7.delete(element);
       }
     });
   }
@@ -42525,7 +43303,7 @@ var App = class _App extends React40.Component {
     }
     if (isBrave() && !isMeasureTextSupported()) {
       this.setState({
-        errorMessage: /* @__PURE__ */ jsx138(BraveMeasureTextError_default, {})
+        errorMessage: /* @__PURE__ */ jsx139(BraveMeasureTextError_default, {})
       });
     }
     const mountPayload = {
@@ -42537,6 +43315,7 @@ var App = class _App extends React40.Component {
     this.props.onExcalidrawAPI?.(this.api);
   }
   componentWillUnmount() {
+    this.gifPlayback.stop();
     this.api = { ...this.api, isDestroyed: true };
     for (const key of Object.keys(this.api)) {
       if ((key.startsWith("get") || key === "onStateChange" || key === "onEvent") && typeof this.api[key] === "function") {
@@ -42571,7 +43350,7 @@ var App = class _App extends React40.Component {
     this.store.onDurableIncrementEmitter.clear();
     this.appStateObserver.clear();
     this.editorLifecycleEvents.clear();
-    ShapeCache5.destroy();
+    ShapeCache7.destroy();
     SnapCache.destroy();
     clearTimeout(touchTimeout);
     isSomeElementSelected.clearCache();
@@ -42790,6 +43569,7 @@ var App = class _App extends React40.Component {
     }
     this.handleInteractionStateChange(prevProps, prevState);
     this.handleForcedToolChange(prevProps, prevState);
+    this.ensureGifPlaybackLoop();
     this.appStateObserver.flush(prevState);
     this.updateEmbeddables();
     const elements = this.scene.getElementsIncludingDeleted();
@@ -43170,7 +43950,7 @@ var App = class _App extends React40.Component {
         // Not sure why we include deleted elements as well hence using deleted elements map
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement18(_element)) {
-            return newElementWith10(_element, {
+            return newElementWith11(_element, {
               originalText: nextOriginalText,
               isDeleted: isDeleted ?? _element.isDeleted,
               // returns (wrapped) text and new dimensions
@@ -43189,7 +43969,7 @@ var App = class _App extends React40.Component {
     this.textWysiwygSubmitHandler = textWysiwyg({
       canvas: this.canvas,
       getViewportCoords: (x, y) => {
-        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords6(
+        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords7(
           {
             sceneX: x,
             sceneY: y
@@ -43574,7 +44354,7 @@ var App = class _App extends React40.Component {
   initialPointerDownState(event) {
     const origin = viewportCoordsToSceneCoords3(event, this.state);
     const selectedElements = this.scene.getSelectedElements(this.state);
-    const [minX, minY, maxX, maxY] = getCommonBounds13(selectedElements);
+    const [minX, minY, maxX, maxY] = getCommonBounds14(selectedElements);
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
     return {
       origin,
@@ -43675,7 +44455,7 @@ var App = class _App extends React40.Component {
       1
     );
     const boundsPadding = DEFAULT_TRANSFORM_HANDLE_SPACING4 * 2 / this.state.zoom.value;
-    const [x1, y1, x2, y2] = getCommonBounds13(selectedElements);
+    const [x1, y1, x2, y2] = getCommonBounds14(selectedElements);
     return point.x > x1 - boundsPadding - threshold && point.x < x2 + boundsPadding + threshold && point.y > y1 - boundsPadding - threshold && point.y < y2 + boundsPadding + threshold;
   }
   getCurrentItemRoundness(elementType) {
@@ -43985,7 +44765,7 @@ var App = class _App extends React40.Component {
             const croppingElement = this.scene.getNonDeletedElementsMap().get(this.state.croppingElementId);
             if (croppingElement && isImageElement9(croppingElement) && croppingElement.crop !== null && pointerDownState.hit.element === croppingElement) {
               const crop = croppingElement.crop;
-              const image = isInitializedImageElement3(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
+              const image = isInitializedImageElement5(croppingElement) && this.imageCache.get(croppingElement.fileId)?.image;
               if (image && !(image instanceof Promise)) {
                 const uncroppedSize = getUncroppedWidthAndHeight4(croppingElement);
                 const instantDragOffset = vector4(
@@ -44127,7 +44907,7 @@ var App = class _App extends React40.Component {
               if (idsOfElementsToDuplicate.has(el.id)) {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     x: origEl.x,
                     y: origEl.y
                   });
@@ -45149,7 +45929,7 @@ var App = class _App extends React40.Component {
       );
       const isSnappedToCenter = distanceToCenter < TEXT_TO_CENTER_SNAP_THRESHOLD;
       if (isSnappedToCenter) {
-        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords6(
+        const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords7(
           { sceneX: elementCenterX, sceneY: elementCenterY },
           appState
         );
@@ -45206,7 +45986,7 @@ var App_default = App;
 
 // components/InitializeApp.tsx
 import { useEffect as useEffect39, useState as useState35 } from "react";
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 var InitializeApp = (props) => {
   const [loading, setLoading] = useState35(true);
   useEffect39(() => {
@@ -45217,19 +45997,19 @@ var InitializeApp = (props) => {
     const currentLang2 = languages.find((lang) => lang.code === props.langCode) || defaultLang;
     updateLang();
   }, [props.langCode]);
-  return loading ? /* @__PURE__ */ jsx139(LoadingMessage, { theme: props.theme }) : props.children;
+  return loading ? /* @__PURE__ */ jsx140(LoadingMessage, { theme: props.theme }) : props.children;
 };
 
 // components/footer/FooterCenter.tsx
-import clsx61 from "clsx";
-import { jsx as jsx140 } from "react/jsx-runtime";
+import clsx62 from "clsx";
+import { jsx as jsx141 } from "react/jsx-runtime";
 var FooterCenter = ({ children }) => {
   const { FooterCenterTunnel } = useTunnels();
   const appState = useUIAppState();
-  return /* @__PURE__ */ jsx140(FooterCenterTunnel.In, { children: /* @__PURE__ */ jsx140(
+  return /* @__PURE__ */ jsx141(FooterCenterTunnel.In, { children: /* @__PURE__ */ jsx141(
     "div",
     {
-      className: clsx61("footer-center zen-mode-transition", {
+      className: clsx62("footer-center zen-mode-transition", {
         "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
       }),
       children
@@ -45240,9 +46020,9 @@ var FooterCenter_default = FooterCenter;
 FooterCenter.displayName = "FooterCenter";
 
 // components/live-collaboration/LiveCollaborationTrigger.tsx
-import clsx62 from "clsx";
+import clsx63 from "clsx";
 import { MQ_MIN_WIDTH_DESKTOP } from "@excalidraw/common";
-import { jsx as jsx141, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs70 } from "react/jsx-runtime";
 var LiveCollaborationTrigger2 = ({
   isCollaborating,
   onSelect,
@@ -45251,18 +46031,18 @@ var LiveCollaborationTrigger2 = ({
 }) => {
   const appState = useUIAppState();
   const showIconOnly = editorInterface?.formFactor !== "desktop" || appState.width < MQ_MIN_WIDTH_DESKTOP;
-  return /* @__PURE__ */ jsxs69(
+  return /* @__PURE__ */ jsxs70(
     Button,
     {
       ...rest,
-      className: clsx62("collab-button", { active: isCollaborating }),
+      className: clsx63("collab-button", { active: isCollaborating }),
       type: "button",
       onSelect,
       style: { position: "relative", width: showIconOnly ? void 0 : "auto" },
       title: t("labels.liveCollaboration"),
       children: [
         showIconOnly ? share : t("labels.share"),
-        appState.collaborators.size > 0 && /* @__PURE__ */ jsx141("div", { className: "CollabButton-collaborators", children: appState.collaborators.size })
+        appState.collaborators.size > 0 && /* @__PURE__ */ jsx142("div", { className: "CollabButton-collaborators", children: appState.collaborators.size })
       ]
     }
   );
@@ -45271,15 +46051,15 @@ var LiveCollaborationTrigger_default = LiveCollaborationTrigger2;
 LiveCollaborationTrigger2.displayName = "LiveCollaborationTrigger";
 
 // components/ExcalidrawLogo.tsx
-import { jsx as jsx142, jsxs as jsxs70 } from "react/jsx-runtime";
-var LogoIcon = () => /* @__PURE__ */ jsx142(
+import { jsx as jsx143, jsxs as jsxs71 } from "react/jsx-runtime";
+var LogoIcon = () => /* @__PURE__ */ jsx143(
   "svg",
   {
     viewBox: "0 0 40 40",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: "ExcalidrawLogo-icon",
-    children: /* @__PURE__ */ jsx142(
+    children: /* @__PURE__ */ jsx143(
       "path",
       {
         d: "M39.9 32.889a.326.326 0 0 0-.279-.056c-2.094-3.083-4.774-6-7.343-8.833l-.419-.472a.212.212 0 0 0-.056-.139.586.586 0 0 0-.167-.111l-.084-.083-.056-.056c-.084-.167-.28-.278-.475-.167-.782.39-1.507.973-2.206 1.528-.92.722-1.842 1.445-2.708 2.25a8.405 8.405 0 0 0-.977 1.028c-.14.194-.028.361.14.444-.615.611-1.23 1.223-1.843 1.861a.315.315 0 0 0-.084.223c0 .083.056.166.111.194l1.09.833v.028c1.535 1.528 4.244 3.611 7.12 5.861.418.334.865.667 1.284 1 .195.223.39.473.558.695.084.11.28.139.391.055.056.056.14.111.196.167a.398.398 0 0 0 .167.056.255.255 0 0 0 .224-.111.394.394 0 0 0 .055-.167c.029 0 .028.028.056.028a.318.318 0 0 0 .224-.084l5.082-5.528a.309.309 0 0 0 0-.444Zm-14.63-1.917a.485.485 0 0 0 .111.14c.586.5 1.2 1 1.843 1.555l-2.569-1.945-.251-.166c-.056-.028-.112-.084-.168-.111l-.195-.167.056-.056.055-.055.112-.111c.866-.861 2.346-2.306 3.1-3.028-.81.805-2.43 3.167-2.095 3.944Zm8.767 6.89-2.122-1.612a44.713 44.713 0 0 0-2.625-2.5c1.145.861 2.122 1.611 2.262 1.75 1.117.972 1.06.806 1.815 1.445l.921.666a1.06 1.06 0 0 1-.251.25Zm.558.416-.056-.028c.084-.055.168-.111.252-.194l-.196.222ZM1.089 5.75c.055.361.14.722.195 1.056.335 1.833.67 3.5 1.284 4.75l.252.944c.084.361.223.806.363.917 1.424 1.25 3.602 3.11 5.947 4.889a.295.295 0 0 0 .363 0s0 .027.028.027a.254.254 0 0 0 .196.084.318.318 0 0 0 .223-.084c2.988-3.305 5.221-6.027 6.813-8.305.112-.111.14-.278.14-.417.111-.111.195-.25.307-.333.111-.111.111-.306 0-.39l-.028-.027c0-.055-.028-.139-.084-.167-.698-.666-1.2-1.138-1.731-1.638-.922-.862-1.871-1.75-3.881-3.75l-.028-.028c-.028-.028-.056-.056-.112-.056-.558-.194-1.703-.389-3.127-.639C6.087 2.223 3.21 1.723.614.944c0 0-.168 0-.196.028l-.083.084c-.028.027-.056.055-.224.11h.056-.056c.028.167.028.278.084.473 0 .055.112.5.112.555l.782 3.556Zm15.496 3.278-.335-.334c.084.112.196.195.335.334Zm-3.546 4.666-.056.056c0-.028.028-.056.056-.056Zm-2.038-10c.168.167.866.834 1.033.973-.726-.334-2.54-1.167-3.379-1.445.838.167 1.983.334 2.346.472ZM1.424 2.306c.419.722.754 3.222 1.089 5.666-.196-.778-.335-1.555-.503-2.278-.251-1.277-.503-2.416-.838-3.416.056 0 .14 0 .252.028Zm-.168-.584c-.112 0-.223-.028-.307-.028 0-.027 0-.055-.028-.055.14 0 .223.028.335.083Zm-1.089.222c0-.027 0-.027 0 0ZM39.453 1.333c.028-.11-.558-.61-.363-.639.42-.027.42-.666 0-.666-.558.028-1.144.166-1.675.25-.977.194-1.982.389-2.96.61-2.205.473-4.383.973-6.561 1.557-.67.194-1.424.333-2.066.666-.224.111-.196.333-.084.472-.056.028-.084.028-.14.056-.195.028-.363.056-.558.083-.168.028-.252.167-.224.334 0 .027.028.083.028.11-1.173 1.556-2.485 3.195-3.909 4.945-1.396 1.611-2.876 3.306-4.356 5.056-4.719 5.5-10.052 11.75-15.943 17.25a.268.268 0 0 0 0 .389c.028.027.056.055.084.055-.084.084-.168.14-.252.222-.056.056-.084.111-.084.167a.605.605 0 0 0-.111.139c-.112.111-.112.305.028.389.111.11.307.11.39-.028.029-.028.029-.056.056-.056a.44.44 0 0 1 .615 0c.335.362.67.723.977 1.028l-.698-.583c-.112-.111-.307-.083-.39.028-.113.11-.085.305.027.389l7.427 6.194c.056.056.112.056.196.056s.14-.028.195-.084l.168-.166c.028.027.083.027.111.027.084 0 .14-.027.196-.083 10.052-10.055 18.15-17.639 27.42-24.417.083-.055.111-.166.111-.25.112 0 .196-.083.251-.194 1.704-5.194 2.039-9.806 2.15-12.083v-.028c0-.028.028-.056.028-.083.028-.056.028-.084.028-.084a1.626 1.626 0 0 0-.111-1.028ZM21.472 9.5c.446-.5.893-1.028 1.34-1.5-2.876 3.778-7.65 9.583-14.408 16.5 4.607-5.083 9.242-10.333 13.068-15ZM5.193 35.778h.084-.084Zm3.462 3.194c-.027-.028-.027-.028 0-.028v.028Zm4.16-3.583c.224-.25.448-.472.699-.722 0 0 0 .027.028.027-.252.223-.475.445-.726.695Zm1.146-1.111c.14-.14.279-.334.446-.5l.028-.028c1.648-1.694 3.351-3.389 5.082-5.111l.028-.028c.419-.333.921-.694 1.368-1.028a379.003 379.003 0 0 0-6.952 6.695ZM24.794 6.472c-.921 1.195-1.954 2.778-2.82 4.028-2.736 3.944-11.532 13.583-11.727 13.75a1976.983 1976.983 0 0 1-8.042 7.639l-.167.167c-.14-.167-.14-.417.028-.556C14.49 19.861 22.03 10.167 25.074 5.917c-.084.194-.14.36-.28.555Zm4.83 5.695c-1.116-.64-1.646-1.64-1.34-2.611l.084-.334c.028-.083.084-.194.14-.277.307-.5.754-.917 1.257-1.167.027 0 .055 0 .083-.028-.028-.056-.028-.139-.028-.222.028-.167.14-.278.335-.278.335 0 1.369.306 1.76.639.111.083.223.194.335.305.14.167.363.445.474.667.056.028.112.306.196.445.056.222.111.472.084.694-.028.028 0 .194-.028.194a2.668 2.668 0 0 1-.363 1.028c-.028.028-.028.056-.056.084l-.028.027c-.14.223-.335.417-.53.556-.643.444-1.369.583-2.095.389 0 0-.195-.084-.28-.111Zm8.154-.834a39.098 39.098 0 0 1-.893 3.167c0 .028-.028.083 0 .111-.056 0-.084.028-.14.056-2.206 1.61-4.356 3.305-6.506 5.028 1.843-1.64 3.686-3.306 5.613-4.945.558-.5.949-1.139 1.06-1.861l.28-1.667v-.055c.14-.334.67-.195.586.166Z",
@@ -45288,7 +46068,7 @@ var LogoIcon = () => /* @__PURE__ */ jsx142(
     )
   }
 );
-var LogoText = () => /* @__PURE__ */ jsxs70(
+var LogoText = () => /* @__PURE__ */ jsxs71(
   "svg",
   {
     viewBox: "0 0 450 55",
@@ -45296,28 +46076,28 @@ var LogoText = () => /* @__PURE__ */ jsxs70(
     fill: "none",
     className: "ExcalidrawLogo-text",
     children: [
-      /* @__PURE__ */ jsx142(
+      /* @__PURE__ */ jsx143(
         "path",
         {
           d: "M429.27 96.74c2.47-1.39 4.78-3.02 6.83-4.95 1.43-1.35 2.73-2.86 3.81-4.51-.66.9-1.4 1.77-2.23 2.59-2.91 2.84-5.72 5.09-8.42 6.87h.01ZM343.6 69.36c.33 3.13.58 6.27.79 9.4.09 1.37.18 2.75.25 4.12-.12-4.46-.27-8.93-.5-13.39-.11-2.08-.24-4.16-.4-6.24-.06 1.79-.11 3.85-.13 6.11h-.01ZM378.47 98.34c.01-.37.07-1.13.01-6.51-.11 1.9-.22 3.81-.31 5.71-.07 1.42-.22 2.91-.16 4.35.39.03.78.07 1.17.1-.92-.85-.76-2.01-.72-3.66l.01.01ZM344.09 86.12c-.09-2.41-.22-4.83-.39-7.24v12.21c.15-.05.32-.09.47-.14.05-1.61-.03-3.23-.09-4.83h.01ZM440.69 66.79c-.22-.34-.45-.67-.69-.99-3.71-4.87-9.91-7.14-15.65-8.55-1.05-.26-2.12-.49-3.18-.71 2.29.59 4.48 1.26 6.64 2.02 7.19 2.54 10.57 5.41 12.88 8.23ZM305.09 72.46l1.2 3.6c.84 2.53 1.67 5.06 2.46 7.61.24.78.5 1.57.73 2.36.22-.04.44-.08.67-.12a776.9 776.9 0 0 1-5.01-13.57c-.02.04-.03.09-.05.13v-.01ZM345.49 90.25v.31c1.48-.42 3.05-.83 4.66-1.2-1.56.25-3.12.52-4.66.89ZM371.02 90.22c0-.57-.04-1.14-.11-1.71-.06-.02-.12-.04-.19-.05-.21-.05-.43-.08-.65-.11.42.16.74.88.95 1.87ZM398.93 54.23c-.13 0-.27-.01-.4-.02l.03.4c.11-.15.23-.27.37-.38ZM401.57 62.28v-.15c-1.22-.24-2.86-.61-3.23-1.25-.09-.15-.18-.51-.27-.98-.09.37-.2.73-.33 1.09 1.24.56 2.52.98 3.83 1.29ZM421.73 88.68c-2.97 1.65-6.28 3.12-9.69 3.68v.18c4.72-.14 11.63-3.85 16.33-8.38-2.04 1.75-4.33 3.24-6.63 4.53l-.01-.01ZM411.28 80.92c-.05-1.2-.09-2.4-.15-3.6-.21 5.66-.46 11.38-.47 14.51.24-.02.48-.04.71-.07.15-3.61.05-7.23-.09-10.83v-.01Z",
           transform: "translate(-144.023 -51.76)"
         }
       ),
-      /* @__PURE__ */ jsx142(
+      /* @__PURE__ */ jsx143(
         "path",
         {
           d: "M425.38 67.41c-3.5-1.45-7.19-2.57-14.06-3.62.09 1.97.06 4.88-.03 8.12.03.04.06.09.06.15.19 1.36.28 2.73.37 4.1.25 3.77.39 7.55.41 11.33 0 1.38-.01 2.76-.07 4.13 1.4-.25 2.78-.65 4.12-1.15 4.07-1.5 7.94-3.78 11.28-6.54 2.33-1.92 5.13-4.49 5.88-7.58.63-3.53-2.45-6.68-7.97-8.96l.01.02ZM411.35 92.53v-.06l-.34.03c.11.01.22.03.34.03ZM314.26 64.06c-.23-.59-.47-1.17-.7-1.75.57 1.62 1.11 3.25 1.6 4.9l.15.54 2.35 6.05c.32.82.66 1.64.98 2.46-1.38-4.1-2.83-8.17-4.39-12.2h.01ZM156.82 103.07c-.18.13-.38.23-.58.33 1.32-.03 2.66-.2 3.93-.34.86-.09 1.72-.22 2.58-.33-2.12.1-4.12.17-5.94.34h.01ZM210.14 68.88s.03.04.05.07c.18-.31.39-.64.58-.96-.21.3-.42.6-.64.89h.01ZM201.65 82.8c-.5.77-1.02 1.56-1.49 2.37 1.11-1.55 2.21-3.1 3.2-4.59-.23.23-.49.51-.75.79-.32.47-.65.95-.96 1.43ZM194.03 98.66c-.33-.4-.65-.84-1.05-1.17-.24-.2-.07-.49.17-.56-.23-.26-.42-.5-.63-.75 1.51-2.55 3.93-5.87 6.4-9.28-.17-.08-.29-.28-.2-.49.04-.09.09-.17.13-.26-1.21 1.78-2.42 3.55-3.61 5.33-.87 1.31-1.74 2.64-2.54 4-.29.5-.63 1.04-.87 1.61.81.65 1.63 1.27 2.47 1.88-.09-.11-.18-.21-.27-.32v.01ZM307.79 82.93c-1-3.17-2.05-6.32-3.1-9.48-1.62 4.08-3.69 9.17-6.16 15.19 3.32-1.04 6.77-1.87 10.27-2.5-.32-1.08-.67-2.15-1.01-3.21ZM149.5 80.7c.05-1.71.04-3.43 0-5.14-.1 2.26-.16 4.51-.22 6.77-.02.73-.03 1.46-.04 2.19.14-1.27.2-2.55.24-3.82h.02ZM228.98 98.3c.39 1.25.91 3.03.94 3.91.06-.03.12-.07.17-.1.08-1.29-.55-2.65-1.11-3.81ZM307.72 53.36c.81.5 1.53 1.04 2.07 1.49-.38-.8-.78-1.58-1.21-2.35-.17.03-.34.06-.51.11-.43.12-.86.26-1.29.41.35-.01.53.1.94.34ZM283.69 96.14c3.91-7.25 6.89-13.35 8.88-18.15l1.1-2.66c-1.27 2.64-2.56 5.27-3.83 7.9-1.53 3.15-3.06 6.31-4.58 9.47-.87 1.81-1.76 3.62-2.54 5.47.04.02.07.04.11.07.05.05.1.09.15.14.05-.73.27-1.48.71-2.24ZM289.92 103.23s-.04.01-.05.03c0-.02.04-.03.05-.04.05-.05.11-.1.16-.15l.21-.21c-.55 0-1.5-.27-2.55-.72.4.26.8.51 1.22.74.24.13.48.26.73.37.05.02.1.03.14.05a.27.27 0 0 1 .08-.07h.01ZM269.23 68.49c-.39-.19-.82-.48-1.33-.87-3.06-1.56-6.31-2.78-9.36-2.35-3.5.49-5.7 1.11-7.74 2.44 5.71-2.6 12.82-2.07 18.44.79l-.01-.01ZM177.87 53.69l1.06.03c-.96-.22-2-.25-2.89-.3-4.95-.26-9.99.33-14.86 1.19-2.44.43-4.88.95-7.28 1.59 9.09-1.76 15.69-2.77 23.97-2.51ZM219.85 55.51c-.18.12-.36.27-.56.45-.45.53-.86 1.11-1.26 1.66-1.91 2.61-3.71 5.31-5.57 7.95l-.12.18 8.05-10.11c-.18-.05-.36-.1-.55-.13h.01ZM510.71 54.1c.12-.15.29-.3.53-.45.69-.4 3.72-.63 5.87-.74-.36-.02-.73-.04-1.09-.05-1.84-.03-3.67.09-5.49.35.05.3.12.59.18.88v.01ZM510.76 86.02c1.37-3.07 2.49-6.27 3.57-9.46.55-1.64 1.12-3.3 1.6-4.97-1.59 4.01-3.67 9.14-6.2 15.3.24-.08.5-.14.74-.22.1-.22.19-.44.29-.65ZM566.95 75.76c.11-.02.23.03.31.11-.05-.13-.09-.26-.14-.39-.05.09-.11.18-.17.28ZM511.33 86.41c3.08-.89 6.24-1.62 9.46-2.14-1.51-3.98-2.98-7.96-4.39-11.87-.05.15-.09.31-.14.46-1.02 3.32-2.15 6.61-3.39 9.85-.48 1.25-.98 2.49-1.53 3.7h-.01ZM578.24 74.45c.11-.44.23-.87.35-1.31-.31.7-.64 1.39-.97 2.08.09.21.19.4.28.61.12-.46.23-.92.35-1.38h-.01ZM520.62 53.11c-.09 0-.18-.01-.28-.02.38.34.29 1.08.93 2.53l6.65 17.15c2.2 5.68 4.69 11.36 7.41 16.87l1.06 2.17c-2.95-7.05-5.92-14.08-8.87-21.13-1.58-3.79-3.16-7.59-4.7-11.4-.78-1.92-1.73-3.89-2.25-5.91-.03-.1 0-.19.04-.26h.01ZM578.78 77.87c1.45-5.77 3.07-10.43 3.58-13.36.05-.34.16-.88.31-1.55-.67 1.79-1.37 3.56-2.08 5.33-.12.43-.23.86-.35 1.29-.65 2.43-1.29 4.86-1.9 7.3.14.33.29.65.43 1l.01-.01ZM545.3 94.66c.02-.44.03-.83.05-1.12.02-1.01.05-2.02.11-3.02.03-6.66-.46-14.33-1.46-22.8-.13-.42-.27-1.24-.56-2.89 0-.02 0-.04-.01-.06.62 6.61.95 13.25 1.32 19.87.17 3.08.33 6.16.52 9.23.02.25.03.52.04.78l-.01.01ZM580.77 102.81c.13.2.27.38.37.49.27-.11.53-.22.8-.32-.43.09-.82.05-1.17-.16v-.01ZM530.48 104.07h.33c-.36-.13-.71-.32-1.04-.56.14.24.3.47.45.7.06-.08.14-.13.26-.13v-.01ZM542.63 58.82c.06.23.11.47.15.71.14-.33.36-.62.7-.86-.28.05-.57.11-.85.15ZM583.81 57.87c.15-.7.29-1.41.42-2.11-.14.45-.28.9-.42 1.34-.46 1.44-.89 2.89-1.31 4.34.44-1.19.88-2.37 1.31-3.57ZM523.62 91.48c-4.66 1.17-9.05 2.89-14.02 5.27 4.65-1.84 9.48-3.29 14.28-4.63-.09-.22-.17-.41-.26-.64ZM460.64 78.3c-.04-2.9-.11-5.81-.28-8.71-.1-1.68-.17-3.43-.5-5.09-.07.02-.14.03-.2.05.3 6.54.45 12.17.51 17.12.17-.07.34-.14.51-.2 0-1.06-.01-2.11-.03-3.17h-.01ZM470.63 63.24c-3.38-.26-6.81.32-10.1 1.1.41 2.01.47 4.14.57 6.18.18 3.55.25 7.11.27 10.67 3.31-1.38 6.5-3.12 9.3-5.35 1.96-1.56 3.86-3.41 5.02-5.66.73-1.41 1.19-3.22.26-4.65-1.09-1.7-3.46-2.14-5.32-2.29ZM460.29 63.68c1-.24 2.01-.46 3.04-.65-1.15.16-2.37.38-3.71.69v.13c.07-.02.15-.04.22-.05.11-.13.3-.18.45-.11v-.01ZM457.24 100.96c.43-.03.86-.07 1.29-.11.14-.49.27-.99.38-1.49-.44.7-1 1.23-1.67 1.6ZM482.88 104.98c-.18.23-.36.38-.55.47.14.09.27.19.4.28a70.76 70.76 0 0 0 4.37-4.63c.76-.89 1.52-1.81 2.19-2.77-.3-.27-.61-.53-.92-.79-.07 1.94-4.62 6.32-5.49 7.45v-.01Z",
           transform: "translate(-144.023 -51.76)"
         }
       ),
-      /* @__PURE__ */ jsx142(
+      /* @__PURE__ */ jsx143(
         "path",
         {
           d: "M474.36 63.31c-.4-.16-.84-.27-1.29-.37 1.56.42 3.08 1.22 3.76 2.74.62 1.4.32 2.95-.28 4.32.7-1.22.94-2.34.74-3.47-.24-1.33-1.19-2.54-2.93-3.21v-.01ZM477.34 89.18c-1.2-.81-2.4-1.62-3.6-2.42-.14.1-.26.19-.4.29 1.4.67 2.73 1.39 4 2.13ZM465.88 93.85c.37.25.74.5 1.1.75.46.32.92.65 1.38.97-1.57-1.2-2.01-1.61-2.49-1.72h.01ZM574.92 90.06c-2.28-5.21-4.93-11.13-5.67-12.26-.1-.15-1.57-3.01-1.63-3.08 0 0-.01.02-.02.02.4 1.37 1.09 2.69 1.65 3.99 2.14 4.95 4.36 9.86 6.67 14.73.6 1.26 1.21 2.52 1.83 3.78-.75-2.01-1.64-4.45-2.83-7.18ZM448.73 65.29c.1.2.22.38.34.57.22-.02.43-.06.65-.08v-.08c-.14-.05-.25 0-.99-.41ZM460.16 94.81c-.02.31-.06.59-.1.89-.03 1.71-.33 3.43-.79 5.07.15-.02.3-.03.45-.05.01-.04.02-.08.03-.11.09-.34.15-.69.2-1.03.17-1.07.25-2.16.33-3.24.05-.69.08-1.39.12-2.08-.27.1-.27.26-.24.57v-.02Z",
           transform: "translate(-144.023 -51.76)"
         }
       ),
-      /* @__PURE__ */ jsx142(
+      /* @__PURE__ */ jsx143(
         "path",
         {
           d: "m328.67 98.12-3.22-6.58c-1.29-2.63-2.53-5.29-3.72-7.97-.25-.85-.52-1.69-.79-2.53-.81-2.57-1.67-5.12-2.55-7.67-1.92-5.53-3.9-11.08-6.32-16.41-.72-1.58-1.46-3.44-2.63-4.79-.03-.17-.16-.29-.34-.36a.282.282 0 0 0-.23-.04c-.06-.01-.12 0-.18.01-.74.06-1.5.38-2.19.61-2.22.77-4.4 1.64-6.63 2.38-.03-.08-.06-.16-.09-.25-.15-.42-.82-.24-.67.19.03.09.07.19.1.28l-.18.06c-.36.11-.28.6 0 .68.18 1.18.63 2.36.98 3.49.03.09.06.17.08.26-.08.23-.17.46-.24.64-.37.98-.79 1.94-1.21 2.9-1.27 2.89-2.62 5.75-3.98 8.6-3.18 6.67-6.44 13.31-9.64 19.97-1.08 2.25-2.2 4.5-3.15 6.81-.13.32.24.5.5.37 1.34 1.33 2.84 2.5 4.4 3.57.65.44 1.31.87 2.01 1.24.4.22.86.48 1.33.5.24.01.35-.19.33-.37.11-.1.21-.21.28-.28.41-.41.81-.84 1.2-1.26.85-.92 1.69-1.87 2.5-2.84 6.31-2.34 12.6-4.31 18.71-5.84 2.14 5.3 3.43 8.43 3.97 9.58.55 1.05 1.15 1.88 1.82 2.52 1.32.56 6.96-.03 9.23-1.96.87-1.28 1.19-2.67.93-4.15-.09-.5-.22-.95-.4-1.33l-.01-.03Zm-20.09-45.61c.43.77.83 1.56 1.21 2.35-.54-.45-1.27-.99-2.07-1.49-.42-.24-.6-.35-.94-.34.43-.15.85-.29 1.29-.41.17-.05.34-.08.51-.11Zm-25.86 45.66c.78-1.85 1.67-3.66 2.54-5.47 1.51-3.16 3.05-6.31 4.58-9.47 1.28-2.63 2.56-5.26 3.83-7.9l-1.1 2.66c-1.99 4.79-4.97 10.9-8.88 18.15-.43.76-.66 1.51-.71 2.24-.05-.05-.1-.09-.15-.14a.259.259 0 0 0-.11-.07Zm6.24 4.71c-.42-.23-.82-.48-1.22-.74 1.05.45 2 .72 2.55.72l-.21.21c-.05.05-.11.1-.16.15-.01.01-.04.03-.05.04 0-.02.03-.02.05-.03a.27.27 0 0 0-.08.07c-.05-.02-.1-.03-.14-.05-.25-.1-.49-.24-.73-.37h-.01Zm15.73-29.43c1.05 3.15 2.1 6.31 3.1 9.48.34 1.06.69 2.13 1.01 3.21-3.5.63-6.95 1.46-10.27 2.5 2.48-6.03 4.54-11.11 6.16-15.19Zm4.79 12.57c-.23-.79-.49-1.58-.73-2.36-.79-2.54-1.63-5.08-2.46-7.61l-1.2-3.6c.02-.04.04-.09.05-.13 1.6 4.45 3.28 9 5.01 13.57l-.67.12v.01Zm5.83-18.27-.15-.54c-.49-1.64-1.03-3.28-1.6-4.9.23.58.47 1.17.7 1.75 1.56 4.03 3.01 8.1 4.39 12.2-.33-.82-.67-1.64-.98-2.46l-2.35-6.05h-.01ZM390.43 79.37c-.13-10.43-.22-17.5-.24-19.97-.24-1.6.21-2.88-.65-3.65-.14-.13-.32-.23-.52-.32h.03c.45 0 .45-.69 0-.7-1.75-.03-3.5-.04-5.25-.14-1.38-.08-2.76-.21-4.15-.31-.07 0-.12.01-.17.04-.21-.07-.47.03-.45.31l.03.45c-.11.14-.19.3-.22.5-.21 1.26-.32 13.67-.36 23.59-.32 5.79-.67 11.57-.97 17.36-.09 1.73-.29 3.54-.21 5.3-.39.02-.38.64.04.69v.12c.05.44.74.45.7 0v-.06c1.1.09 2.2.21 3.3.3 1.14.19 2.44.2 3.29.17 1.73-.05 2.92-.05 3.8-.37.45-.05.9-.11 1.35-.17.44-.06.25-.73-.19-.67h-.01c.24-.32.45-.72.62-1.25.66-1.84.41-6.36.34-11.33l-.13-9.9.02.01Zm-12.26 18.17c.09-1.91.2-3.81.31-5.71.06 5.38 0 6.14-.01 6.51-.05 1.65-.21 2.81.72 3.66-.39-.04-.78-.07-1.17-.1-.06-1.44.09-2.93.16-4.35l-.01-.01ZM588.97 53.85c-2.06-.25-3.17-.51-3.76-.6a.3.3 0 0 1 .04-.08c.22-.39-.39-.75-.6-.35-.56 1.02-.9 2.19-1.26 3.29-.61 1.88-1.17 3.78-1.72 5.68-.63 2.19-1.24 4.39-1.83 6.59-.81 2.03-1.67 4.05-2.61 6.03-1.7-3.64-3.11-6.04-4.03-7.57-2.26-3.74-2.85-5.48-3.57-6.08l.31-.09c.43-.12.25-.8-.19-.67-1.06.3-2.12.6-3.17.95-.93.32-1.85.69-2.76 1.07-.13.05-.19.16-.22.27-.04.02-.08.05-.11.07-.04-.06-.07-.12-.11-.18a.354.354 0 0 0-.48-.12c-.16.09-.22.32-.13.48l.33.54c0 .09.02.18.06.28.51 1.16.78 1.38.72 1.47-2.42 3.44-5.41 7.86-6.2 9.1-1.27 1.97-2.01 3.14-2.45 3.84l-.91-6.56-.43-4.1c-.19-1.85-.37-3.23-.53-4.13-.19-1.1-.3-2.15-.45-3.16-.2-1.36-.29-2.06-.47-2.42h.04c.45.02.45-.68 0-.7-3.43-.16-6.81.94-10.17 1.48-.24-.22-.73-.04-.58.32.24.59.33 1.25.43 1.87.17 1.06.29 2.13.4 3.2.32 3.09.53 6.2.74 9.3.44 6.75.77 13.51 1.17 20.26.11 1.95.13 3.96.46 5.89.05.3.37.31.55.14.74 1.71 2.87 1.27 6.13 1.27 1.34 0 2.39.04 2.99-.11.02.32.48.53.63.18 3.61-8.26 7.41-16.46 12.05-24.2.03-.05.04-.1.05-.15.3.73.64 1.45.94 2.16.97 2.26 1.97 4.52 2.98 6.76 2.26 5.03 4.54 10.07 7.09 14.96.47.9.94 1.79 1.47 2.65.2.32.4.67.66.96-.18.25 0 .68.34.54.91-.38 1.82-.75 2.76-1.07 1.04-.35 2.11-.65 3.17-.95.39-.11.28-.66-.07-.68.62-.4.95-.96.87-1.91-.3-3.34.72-7.47.86-8.52l2.14-11.43c1.75-10.74 3.13-17.51 3.23-20.86.02-.49.08-2.84.13-3.24.17-1.25.48-1-4.96-1.65l.03-.02Zm-46.19 5.67c-.04-.24-.09-.48-.15-.71l.85-.15c-.34.24-.56.53-.7.86Zm1.95 25.12c-.36-6.63-.7-13.26-1.32-19.87 0 .02 0 .04.01.06.29 1.65.44 2.47.56 2.89 1 8.46 1.5 16.14 1.46 22.8-.06.99-.1 2-.11 3.02-.01.29-.03.68-.05 1.12-.01-.26-.03-.53-.04-.78-.19-3.08-.35-6.16-.52-9.23l.01-.01Zm36.4 18.66c-.11-.11-.24-.29-.37-.49.35.21.74.26 1.17.16-.27.11-.53.22-.8.32v.01Zm-.89-33.72c.12-.43.23-.86.35-1.29.71-1.77 1.41-3.55 2.08-5.33-.15.68-.26 1.22-.31 1.55-.5 2.94-2.13 7.59-3.58 13.36-.15-.35-.29-.66-.43-1 .61-2.44 1.25-4.87 1.9-7.3l-.01.01Zm3.56-12.48c.14-.44.28-.89.42-1.34-.13.7-.27 1.41-.42 2.11-.43 1.19-.86 2.38-1.31 3.57.42-1.45.85-2.9 1.31-4.34Zm-5.22 16.05c-.11.44-.23.87-.35 1.31-.12.46-.23.92-.35 1.38-.1-.22-.19-.4-.28-.61.34-.69.66-1.38.97-2.08h.01Zm-11.64 2.62c.06-.1.12-.19.17-.28.05.13.09.26.14.39a.398.398 0 0 0-.31-.11Zm2.3 2.98c-.56-1.3-1.25-2.63-1.65-3.99 0 0 .01-.02.02-.02.06.08 1.52 2.93 1.63 3.08.73 1.13 3.38 7.04 5.67 12.26 1.2 2.73 2.08 5.17 2.83 7.18-.62-1.25-1.23-2.51-1.83-3.78-2.31-4.87-4.53-9.78-6.67-14.73ZM275.92 87.03c-1.06-2.18-1.13-3.45-2.44-2.93-1.52.57-2.94 1.3-4.5 2.1-1.4.72-2.68 1.44-3.92 2.12.01-.25-.24-.5-.51-.34-4.8 2.93-12.41 4.7-17.28 1.31-1.98-1.77-3.32-4.15-3.97-5.78-.29-.95-.49-1.94-.63-2.93-.14-3.34 1.58-6.53 3.9-9.12.8-.79 1.68-1.51 2.66-2.12 3.7-2.3 8.22-3.07 12.51-2.51 2.71.35 5.32 1.24 7.71 2.55.39.22.75-.39.35-.6-.18-.1-.37-.18-.55-.27.56.27 1.03.33 1.51.19l-.48.39c-.15.11-.23.3-.13.48.09.15.33.24.48.13 1.3-.97 2.46-2.09 3.45-3.37.37-.29.64-.6.65-.97v-.02c.08-.33-.03-.7-.21-1.08-.31-.87-.98-2.01-2.19-3.26-2.43-2.52-3.79-3.45-5.68-4.26-1.14-.49-3.12-1.06-4.42-1.23-3.28-.42-10.64-1.21-18.18 4.11-7.74 5.46-11.94 12.3-12.23 20.61-.08 2.06.04 3.98.34 5.71.74 4.18 2.57 8 5.44 11.34 4.26 4.99 9.76 7.52 16.34 7.52 4.85 0 9.69-1.77 14.89-4.62.23-.12.45-.23.68-.35 2.19-1.1 4.37-2.23 6.46-3.5.49-.3 1.03-.61 1.5-.98 1.47-.87 1.11-1.12.49-2.95-.39-1.14-.76-2.7-2.06-5.36l.02-.01Zm-17.38-21.76c3.05-.42 6.31.79 9.36 2.35.51.39.94.68 1.33.87-5.61-2.86-12.72-3.39-18.44-.79 2.05-1.33 4.24-1.95 7.74-2.44l.01.01ZM443.67 72.67c-.4-2.2-1.15-4.33-2.37-6.22-1.49-2.32-3.58-4.19-5.91-5.64-6.17-3.81-13.75-5.11-20.83-6.01-3.23-.41-6.47-.69-9.72-.92l-1.39-.12c-.85-.07-1.52-.1-2.05-.1-1.08-.06-2.17-.12-3.25-.17-.08 0-.14.02-.19.05-.1.05-.18.14-.16.3.27 2.55-.01 5.12-.92 7.52-.15.38.4.56.62.28 1.32.59 2.68 1.05 4.08 1.37 0 2.78-.14 7.58-.33 12.91 0 0 0 .02-.01.03-.61 3.66-.79 7.42-1 11.12-.23 4.01-.43 8.03-.44 12.05 0 .64 0 1.28.03 1.93.02.31 0 .68.15.96.06.11.14.16.24.17-.2.17-.21.54.11.59 3.83.67 7.78.71 11.68.25 2.3-.19 4.87-.65 7.65-1.56 1.85-.54 3.67-1.18 5.43-1.91 7.2-3.02 14.31-8.07 17.35-15.53.76-1.86 1.17-3.8 1.31-5.75.3-1.93.28-3.82-.09-5.58l.01-.02Zm-19.32-15.42c5.74 1.41 11.94 3.68 15.65 8.55.25.32.47.65.69.99-2.3-2.82-5.68-5.69-12.88-8.23-2.16-.76-4.35-1.43-6.64-2.02 1.06.21 2.13.45 3.18.71Zm-25.82-3.04c.13 0 .27.01.4.02-.14.1-.26.23-.37.38 0-.13-.02-.26-.03-.4Zm34.82 22.17c-.75 3.09-3.55 5.66-5.88 7.58-3.35 2.76-7.21 5.03-11.28 6.54-1.33.49-2.71.9-4.12 1.15.06-1.38.08-2.76.07-4.13-.02-3.78-.16-7.56-.41-11.33-.09-1.37-.18-2.74-.37-4.1 0-.06-.03-.11-.06-.15.09-3.25.12-6.16.03-8.12 6.86 1.05 10.56 2.17 14.06 3.62 5.52 2.28 8.59 5.44 7.97 8.96l-.01-.02Zm-22 16.15c-.12 0-.23-.02-.34-.03l.34-.03v.06Zm-.69-.7c0-3.13.26-8.84.47-14.51.06 1.2.11 2.41.15 3.6.15 3.6.25 7.23.09 10.83-.24.03-.48.05-.71.07v.01Zm-12.33-30.94c.37.63 2.01 1.01 3.23 1.25v.15c-1.31-.31-2.59-.73-3.83-1.29.12-.36.23-.72.33-1.09.08.48.18.84.27.98Zm13.7 31.65v-.18c3.41-.56 6.71-2.02 9.69-3.68 2.31-1.28 4.59-2.78 6.63-4.53-4.69 4.53-11.61 8.24-16.33 8.38l.01.01Zm24.07-.75c-2.05 1.93-4.37 3.56-6.83 4.95 2.7-1.78 5.52-4.03 8.42-6.87.82-.82 1.56-1.69 2.23-2.59-1.08 1.65-2.38 3.16-3.81 4.51h-.01ZM187.16 92.14c-.79-2.47-2.1-7.12-3.1-6.87-.19-.01-2.09.77-4.08 1.54-3.06 1.18-5.91 2.13-10.09 2.82-2.74.42-5.87 1.01-10.61 1.06.04-3.34.05-6.01.05-7.99 7.97-.65 12.33-2.11 16.37-3.55 1.11-.39 2.69-1.01 2.63-1.8-.08-.35-.55-1.39-1.17-2.61-.47-1.16-.98-2.31-1.61-3.38-.42-.71-1.04-1.69-1.86-2.06-.11-.08-.22-.13-.29-.12-.02 0-.04 0-.07.01-.19-.04-.39-.05-.6-.01-.17.03-.24.15-.25.28-.04.02-.09.04-.14.05-4.33 1.48-8.85 2.33-13.24 3.61a499.1 499.1 0 0 0-.31-8.19c4.51-.99 8.88-1.38 13.11-1.82 3.68-.38 6.28.12 7.47.34.59.11.9.16 1.16.18h.1c-.1.37.44.66.62.28.02-.04.03-.08.05-.13.15.2.53.22.62-.1.17-.58.19-1.21.21-1.81v-.36c.03-.15.05-.3.07-.45.52-2.47.33-5.09-.64-7.44-.11-.27-.44-.28-.6-.14-.08-.21-.15-.42-.24-.62-.19-.41-.79-.05-.6.35.03.07.05.15.09.22-.98-.42-2.15-.54-3.17-.63-2.17-.19-4.37-.14-6.54 0-5.7.35-11.4 1.3-16.91 2.79-2.08.56-4.13 1.22-6.14 2-4.54 1.05-3.79 1.51-2.17 6.07.18.51.46 1.68.54 1.94.82 2.47 1.08 2.13 3.1 2.13s0 .05 0 .08h.52c-.48 2.66-.51 5.45-.62 8.13-.15 3.48-.22 6.96-.28 10.45 0 .41-.01.82-.02 1.23-.16.29-.33.57-.51.85-.05.38-.09.77-.14 1.18-.42 3.52-.59 6.48-.52 8.8v.34c.02.47.05.76.06.87.16 1.57-.26 3.47 1.35 3.79 1.61.32 3.5.55 4.85.55.11 0 .22-.02.33-.02 1.79.24 3.67.05 5.45-.12 2.85-.28 5.69-.7 8.51-1.19 3.03-.53 6.05-1.14 9.04-1.86 2.4-.58 4.82-1.19 7.13-2.06.51-.19 1.73-.57 2.46-1.14 1.81-.68 2.18-1 1.57-2.67-.23-.62-.48-1.49-.91-2.78l-.03-.02Zm-11.12-38.71c.89.05 1.93.08 2.89.3-.33 0-.68-.02-1.06-.03-8.28-.26-14.88.75-23.97 2.51 2.41-.64 4.85-1.16 7.28-1.59 4.87-.86 9.91-1.45 14.86-1.19Zm-26.53 22.13c.03 1.71.04 3.43 0 5.14-.04 1.27-.11 2.55-.24 3.82 0-.73.02-1.46.04-2.19.05-2.26.12-4.51.22-6.77h-.02Zm6.73 27.85c.2-.1.4-.21.58-.33 1.82-.17 3.82-.24 5.94-.34-.86.11-1.72.24-2.58.33-1.27.14-2.61.31-3.93.34h-.01ZM534.48 85.44c-3.52-8.38-7.07-16.75-10.5-25.17-.63-1.54-1.25-3.09-1.86-4.65-.31-.8-.65-1.6-.87-2.43-.04-.17-.17-.24-.31-.25.1-.2 0-.51-.29-.53-1.59-.08-3.18-.22-4.78-.25-1.96-.03-3.91.13-5.84.42-.31.05-.31.38-.13.56-.03.06-.05.14-.04.22.23 1.54.63 3.06 1.16 4.53.13.35.27.7.41 1.06l-2.68 6.18c-.11.03-.2.09-.25.22-.67 1.9-1.52 3.73-2.34 5.56a536.85 536.85 0 0 1-3.9 8.45c-2.64 5.64-5.34 11.25-7.91 16.93-.44.97-.88 1.94-1.29 2.93-.2.48-.47 1-.55 1.52v.05c-.02.12.02.26.16.34 1.19.73 2.41 1.41 3.66 2.05 1.2.62 2.45 1.25 3.76 1.61.43.12.62-.55.19-.67-1.13-.31-2.2-.83-3.24-1.36 1.09.36 2.1.69 2.75.93 2.82 1.01 2.38 1.1 4.3-3.75 2.1-1.09 4.34-1.96 6.53-2.79 4.35-1.64 8.8-3.03 13.27-4.29.82 2.01 1.77 3.97 2.72 5.92.35.83.62 1.45.79 1.82.22.42.45.8.69 1.15.17.33.33.67.5 1 .42.8.84 1.63 1.4 2.35.23.29.6 0 .55-.31 1.53-.02 3.06-.07 4.58-.27.92-.12 1.82-.32 2.71-.54 1.39-.27 3.85-1.11 3.74-1.42-.67-1.96-1.55-3.87-2.34-5.78-1.57-3.78-3.16-7.56-4.75-11.33v-.01Zm-11.65-26.16c1.54 3.81 3.12 7.6 4.7 11.4 2.94 7.05 5.91 14.09 8.87 21.13l-1.06-2.17c-2.71-5.51-5.2-11.19-7.41-16.87l-6.65-17.15c-.65-1.45-.55-2.19-.93-2.53.09 0 .18.01.28.02a.29.29 0 0 0-.04.26c.52 2.02 1.47 3.98 2.25 5.91h-.01Zm-6.58 13.58c.05-.15.09-.31.14-.46 1.41 3.92 2.88 7.9 4.39 11.87-3.22.52-6.38 1.25-9.46 2.14.55-1.22 1.05-2.46 1.53-3.7 1.24-3.24 2.37-6.53 3.39-9.85h.01Zm-.23-20c.36 0 .73.03 1.09.05-2.15.1-5.18.33-5.87.74-.24.15-.41.3-.53.45-.06-.29-.13-.58-.18-.88 1.82-.26 3.65-.39 5.49-.35v-.01Zm-.09 18.72c-.49 1.67-1.05 3.33-1.6 4.97-1.07 3.19-2.19 6.38-3.57 9.46-.09.21-.19.43-.29.65-.25.07-.5.14-.74.22 2.53-6.16 4.61-11.29 6.2-15.3Zm-6.34 25.16c4.97-2.38 9.37-4.1 14.02-5.27l.26.64c-4.8 1.35-9.63 2.8-14.28 4.63Zm20.17 6.76c.33.23.68.42 1.04.56h-.33c-.12 0-.21.06-.26.13-.15-.23-.31-.45-.45-.7v.01ZM226.57 91.75c-3.55-4.74-6.68-9.11-9.31-12.99 9.2-15.25 10.05-17.81 10.35-18.38.17-.34 1.09-2.27.64-2.53-1.13-.65-1.03-.65-2.97-1.71-1.19-.65-3.04-1.61-4.53-2.12-1.71-.59-1.24-.36-3 2.77-.06.1-.11.2-.17.3-.75 1.02-1.48 2.05-2.2 3.09-1.88 2.71-3.73 5.45-5.69 8.1-3.68-4.91-6.88-8.76-9.51-11.43-.15-.15-.3-.29-.46-.42-1.27-1.28-7.24 3.53-7.93 5.58-.09.09-.19.16-.28.25-.27.26.03.64.33.58.19.65.5 1.29.94 1.91 3.85 5.06 7.19 9.76 9.94 14-1.23 2.61-3.06 5-4.67 7.38l-2.28 3.33c-.5.66-.93 1.23-1.29 1.69-.67.93-2.09 2.61-2.3 3.87-.51.85-1.16 1.84-1.29 2.83-.06.44.61.63.67.19.01-.08.04-.15.06-.22 1.36 1.08 2.76 2.11 4.19 3.11 1.3.91 2.62 1.85 4.04 2.56.21.1.4 0 .48-.17.24.07.48.14.72.2.44.1.62-.57.19-.67-2.02-.48-3.77-1.57-5.23-3.02-.47-.46-.9-.96-1.32-1.46 1.74 1.35 4.2 2.89 5.89 4.14 1.39 1.03 2.85-2.27 4.22-4.2 1.86-2.64 3.96-5.86 5.52-8.29l10.39 14.51c.67.81 1.14 1.21 1.57 1.36-.05.24.12.51.41.4 1.53-.58 3.05-1.19 4.54-1.87 1.52-.69 3.06-1.45 4.36-2.5a.28.28 0 0 0 .12-.23c1.66-1.1.81-1.74-1.41-4.91-1.13-1.58-1.71-2.36-3.7-5.01l-.03-.02Zm2.41 6.54c.56 1.15 1.19 2.52 1.11 3.81-.06.04-.12.07-.17.1-.03-.88-.55-2.66-.94-3.91Zm-16.51-32.73c1.86-2.65 3.65-5.35 5.57-7.95.4-.55.81-1.13 1.26-1.66.19-.18.38-.33.56-.45.18.03.36.08.55.13l-8.05 10.11.12-.18h-.01ZM192.7 95.48c.79-1.37 1.66-2.69 2.54-4 1.19-1.79 2.4-3.56 3.61-5.33-.04.09-.09.17-.13.26-.1.22.03.41.2.49-2.47 3.42-4.89 6.73-6.4 9.28.21.24.4.48.63.75-.24.07-.4.36-.17.56.4.33.72.77 1.05 1.17.09.11.18.21.27.32-.84-.61-1.66-1.24-2.47-1.88.24-.57.58-1.11.87-1.61v-.01Zm7.46-10.32c.47-.81.98-1.59 1.49-2.37.31-.48.64-.95.96-1.43.26-.29.52-.56.75-.79-.99 1.48-2.09 3.03-3.2 4.59Zm10.03-16.22s-.03-.05-.05-.07c.22-.29.43-.59.64-.89-.2.32-.4.65-.58.96h-.01ZM371.54 87.96c-.01-.08-.01-.16-.03-.23-.06-.38-.58-.29-.66.03-.3-.05-.6-.08-.81-.11-1.14-.15-2.29-.19-3.44-.2 1.04-.09 2.09-.18 3.14-.23.45-.02.45-.72 0-.7-6.57.35-13.14 1.23-19.65 2.11-1.53.21-3.05.42-4.57.68-.01 0-.02.01-.04.01-.04-3.33-.13-6.66-.24-9.99-.19-5.7-.4-11.41-.88-17.1-.13-1.51-.23-3.07-.49-4.58 0-.25 0-.48-.02-.68-.06-1.19-.04-2.61-.68-2.78-.16-.07-.72-.16-1.5-.24.22-.17.16-.62-.2-.63-1.19-.04-2.39.09-3.57.23-1.2.14-2.41.32-3.59.6-.16-.1-.41-.06-.5.12-.06.02-.13.03-.19.05-.35.1-.29.55-.03.66-.26.6-.19 2.27-.21 3-.02.66-.66 33.73-.9 40.3-.03.65.06 1.12.04 1.45-.16 3.05.87 4.96 6.34 3.93 1.09-.08 2.75-.77 5.36-1.43 4.13-1.04 5.78-1.52 6.2-1.65 6.43-1.69 6.78-1.97 11.72-2.43.55-.05 4.8-.38 6.03-.3.64.04 1.19.07 1.65.1.09 0 .16-.03.24-.05.1.27.56.33.66-.02.39-1.32.61-2.71.78-4.08.2-1.61.29-3.24.15-4.86.24.03.52-.23.38-.53-.09-.2-.27-.33-.49-.43v-.02Zm-.63.56c.07.57.11 1.14.11 1.71-.21-.99-.53-1.71-.95-1.87.22.03.44.06.65.11.06.01.12.04.19.05Zm-25.41 1.73c1.54-.36 3.1-.64 4.66-.89-1.61.37-3.18.77-4.66 1.2v-.31Zm-.86-7.37c-.07-1.37-.16-2.75-.25-4.12-.21-3.13-.45-6.27-.79-9.4.02-2.25.08-4.31.13-6.11.16 2.08.29 4.16.4 6.24.23 4.46.38 8.93.5 13.39h.01Zm-.94-4c.16 2.41.29 4.83.39 7.24.06 1.6.14 3.22.09 4.83-.15.05-.32.09-.47.14V78.88h-.01ZM483.72 92.83c-3.05-2.28-6.22-4.4-9.38-6.51 8.86-6.49 13.49-12.95 13.73-19.23.04-.76 0-1.5-.13-2.2-.67-3.82-3.5-6.68-8.39-8.48.13.04.27.08.4.13 3.92 1.39 7.74 4.23 8.5 8.56.34 1.95-.05 3.96-.98 5.69-.21.4.39.75.6.35 1.86-3.46 1.46-7.55-.97-10.63-3.53-4.47-9.76-5.88-15.16-6.16-2.32-.12-4.64-.04-6.95.19-6 .32-12.71 1.68-17.63 3.21-.37.11-.67.23-.92.35-.2-.17-.62.02-.57.37v.03c-.64.68-.18 1.64.48 3.21.38.91.67 1.89 1.15 2.58.32.76.68 1.51 1.13 2.19.14.21.38.19.53.07.19-.02.38-.05.57-.08v1.57c-.06.06-.1.13-.11.23-.27 4.18-.34 8.38-.48 12.57l-.3 9.03c-.24 3.91-.44 6.77-.46 7.26-.05.88-.11 1.95.07 2.81-.01.22-.02.43-.04.65 0 .11-.02.23-.03.35 0 .05-.03.27-.01.16-.05.4.5.59.64.28.05.04.12.08.2.08 1.75.13 3.5.28 5.25.3 1.69.02 3.38-.12 5.06-.32.08.23.36.39.55.15.06-.08.11-.17.16-.26.18-.09.24-.32.18-.48.05-.2.1-.4.13-.6.16-.86.25-1.74.33-2.62.11-1.17.17-2.34.23-3.51.15-.01.32-.03.52-.04.36-.03 1.73-.15 2.06-.15.39 0 .7-.02.95-.04 1.76 1.11 3.45 2.35 5.14 3.55 2.83 2.01 5.64 4.04 8.47 6.04 1.42 1 2.85 2 4.29 2.97.1.06.19.07.27.04.08 0 .17-.02.25-.1 1.61-1.56 3.15-3.18 4.6-4.88.75-.88 1.49-1.78 2.15-2.73.01.01.03.02.04.03.34.3.83-.2.49-.49-2.16-1.9-4.34-3.76-6.64-5.48l.03-.01Zm-6.38-3.65a55.72 55.72 0 0 0-4-2.13c.14-.1.26-.19.4-.29 1.2.81 2.4 1.61 3.6 2.42Zm-20.1 11.78c.67-.37 1.23-.91 1.67-1.6-.11.5-.24 1-.38 1.49-.43.04-.86.08-1.29.11Zm2.38-37.24c1.34-.31 2.56-.52 3.71-.69-1.03.19-2.04.41-3.04.65-.14-.07-.34-.02-.45.11-.07.02-.15.04-.22.05v-.13.01Zm.04.84c.07-.02.14-.03.2-.05.34 1.66.41 3.41.5 5.09.17 2.9.24 5.81.28 8.71l.03 3.17c-.17.07-.34.14-.51.2-.06-4.96-.21-10.58-.51-17.12h.01Zm16.04 5.62c-1.16 2.25-3.06 4.1-5.02 5.66-2.8 2.23-5.99 3.97-9.3 5.35-.01-3.56-.09-7.12-.27-10.67-.1-2.04-.16-4.16-.57-6.18 3.3-.78 6.72-1.36 10.1-1.1 1.85.14 4.23.59 5.32 2.29.92 1.43.46 3.24-.26 4.65Zm.85-.18c.6-1.37.9-2.92.28-4.32-.67-1.52-2.2-2.32-3.76-2.74.46.1.89.21 1.29.37 1.74.67 2.69 1.88 2.93 3.21.2 1.13-.05 2.25-.74 3.47V70Zm-27.47-4.14c-.12-.19-.23-.38-.34-.57.74.42.85.36.99.41v.08c-.22.03-.43.06-.65.08Zm11.21 30.46c-.08 1.08-.16 2.17-.33 3.24-.05.35-.11.69-.2 1.03 0 .04-.02.07-.03.11-.15.02-.3.04-.45.05.45-1.64.76-3.36.79-5.07.03-.29.08-.57.1-.89-.03-.31-.03-.47.24-.57-.04.69-.07 1.39-.12 2.08v.02Zm5.6-2.47c.48.11.92.52 2.49 1.72-.46-.32-.92-.65-1.38-.97-.37-.25-.73-.5-1.1-.75h-.01Zm21.23 7.24a70.76 70.76 0 0 1-4.37 4.63c-.14-.09-.27-.19-.4-.28.19-.09.37-.24.55-.47.87-1.14 5.43-5.51 5.49-7.45.31.26.62.53.92.79-.67.97-1.42 1.88-2.19 2.77v.01Z",
@@ -45333,24 +46113,24 @@ var ExcalidrawLogo = ({
   size = "small",
   withText
 }) => {
-  return /* @__PURE__ */ jsxs70("div", { className: `ExcalidrawLogo is-${size}`, style, children: [
-    /* @__PURE__ */ jsx142(LogoIcon, {}),
-    withText && /* @__PURE__ */ jsx142(LogoText, {})
+  return /* @__PURE__ */ jsxs71("div", { className: `ExcalidrawLogo is-${size}`, style, children: [
+    /* @__PURE__ */ jsx143(LogoIcon, {}),
+    withText && /* @__PURE__ */ jsx143(LogoText, {})
   ] });
 };
 
 // components/welcome-screen/WelcomeScreen.Center.tsx
-import { Fragment as Fragment26, jsx as jsx143, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx144, jsxs as jsxs72 } from "react/jsx-runtime";
 var WelcomeScreenMenuItemContent = ({
   icon,
   shortcut,
   children
 }) => {
   const editorInterface = useEditorInterface();
-  return /* @__PURE__ */ jsxs71(Fragment26, { children: [
-    /* @__PURE__ */ jsx143("div", { className: "welcome-screen-menu-item__icon", children: icon }),
-    /* @__PURE__ */ jsx143("div", { className: "welcome-screen-menu-item__text", children }),
-    shortcut && editorInterface.formFactor !== "phone" && /* @__PURE__ */ jsx143("div", { className: "welcome-screen-menu-item__shortcut", children: shortcut })
+  return /* @__PURE__ */ jsxs72(Fragment27, { children: [
+    /* @__PURE__ */ jsx144("div", { className: "welcome-screen-menu-item__icon", children: icon }),
+    /* @__PURE__ */ jsx144("div", { className: "welcome-screen-menu-item__text", children }),
+    shortcut && editorInterface.formFactor !== "phone" && /* @__PURE__ */ jsx144("div", { className: "welcome-screen-menu-item__shortcut", children: shortcut })
   ] });
 };
 WelcomeScreenMenuItemContent.displayName = "WelcomeScreenMenuItemContent";
@@ -45362,14 +46142,14 @@ var WelcomeScreenMenuItem = ({
   className = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx144(
     "button",
     {
       ...props,
       type: "button",
       className: `welcome-screen-menu-item ${className}`,
       onClick: onSelect,
-      children: /* @__PURE__ */ jsx143(WelcomeScreenMenuItemContent, { icon, shortcut, children })
+      children: /* @__PURE__ */ jsx144(WelcomeScreenMenuItemContent, { icon, shortcut, children })
     }
   );
 };
@@ -45382,7 +46162,7 @@ var WelcomeScreenMenuItemLink = ({
   className = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx144(
     "a",
     {
       ...props,
@@ -45390,38 +46170,38 @@ var WelcomeScreenMenuItemLink = ({
       href,
       target: "_blank",
       rel: "noopener",
-      children: /* @__PURE__ */ jsx143(WelcomeScreenMenuItemContent, { icon, shortcut, children })
+      children: /* @__PURE__ */ jsx144(WelcomeScreenMenuItemContent, { icon, shortcut, children })
     }
   );
 };
 WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
 var Center = ({ children }) => {
   const { WelcomeScreenCenterTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx143(WelcomeScreenCenterTunnel.In, { children: /* @__PURE__ */ jsx143("div", { className: "welcome-screen-center", children: children || /* @__PURE__ */ jsxs71(Fragment26, { children: [
-    /* @__PURE__ */ jsx143(Logo, {}),
-    /* @__PURE__ */ jsx143(Heading, { children: t("welcomeScreen.defaults.center_heading") }),
-    /* @__PURE__ */ jsxs71(Menu, { children: [
-      /* @__PURE__ */ jsx143(MenuItemLoadScene, {}),
-      /* @__PURE__ */ jsx143(MenuItemHelp, {})
+  return /* @__PURE__ */ jsx144(WelcomeScreenCenterTunnel.In, { children: /* @__PURE__ */ jsx144("div", { className: "welcome-screen-center", children: children || /* @__PURE__ */ jsxs72(Fragment27, { children: [
+    /* @__PURE__ */ jsx144(Logo, {}),
+    /* @__PURE__ */ jsx144(Heading, { children: t("welcomeScreen.defaults.center_heading") }),
+    /* @__PURE__ */ jsxs72(Menu, { children: [
+      /* @__PURE__ */ jsx144(MenuItemLoadScene, {}),
+      /* @__PURE__ */ jsx144(MenuItemHelp, {})
     ] })
   ] }) }) });
 };
 Center.displayName = "Center";
 var Logo = ({ children }) => {
-  return /* @__PURE__ */ jsx143("div", { className: "welcome-screen-center__logo excalifont welcome-screen-decor", children: children || /* @__PURE__ */ jsx143(ExcalidrawLogo, { withText: true }) });
+  return /* @__PURE__ */ jsx144("div", { className: "welcome-screen-center__logo excalifont welcome-screen-decor", children: children || /* @__PURE__ */ jsx144(ExcalidrawLogo, { withText: true }) });
 };
 Logo.displayName = "Logo";
 var Heading = ({ children }) => {
-  return /* @__PURE__ */ jsx143("div", { className: "welcome-screen-center__heading welcome-screen-decor excalifont", children });
+  return /* @__PURE__ */ jsx144("div", { className: "welcome-screen-center__heading welcome-screen-decor excalifont", children });
 };
 Heading.displayName = "Heading";
 var Menu = ({ children }) => {
-  return /* @__PURE__ */ jsx143("div", { className: "welcome-screen-menu", children });
+  return /* @__PURE__ */ jsx144("div", { className: "welcome-screen-menu", children });
 };
 Menu.displayName = "Menu";
 var MenuItemHelp = () => {
   const actionManager = useExcalidrawActionManager();
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx144(
     WelcomeScreenMenuItem,
     {
       onSelect: () => actionManager.executeAction(actionShortcuts),
@@ -45438,7 +46218,7 @@ var MenuItemLoadScene = () => {
   if (appState.viewModeEnabled) {
     return null;
   }
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx144(
     WelcomeScreenMenuItem,
     {
       onSelect: () => actionManager.executeAction(actionLoadScene),
@@ -45453,7 +46233,7 @@ var MenuItemLiveCollaborationTrigger = ({
   onSelect
 }) => {
   const { t: t2 } = useI18n();
-  return /* @__PURE__ */ jsx143(WelcomeScreenMenuItem, { shortcut: null, onSelect, icon: usersIcon, children: t2("labels.liveCollaboration") });
+  return /* @__PURE__ */ jsx144(WelcomeScreenMenuItem, { shortcut: null, onSelect, icon: usersIcon, children: t2("labels.liveCollaboration") });
 };
 MenuItemLiveCollaborationTrigger.displayName = "MenuItemLiveCollaborationTrigger";
 Center.Logo = Logo;
@@ -45466,40 +46246,40 @@ Center.MenuItemLoadScene = MenuItemLoadScene;
 Center.MenuItemLiveCollaborationTrigger = MenuItemLiveCollaborationTrigger;
 
 // components/welcome-screen/WelcomeScreen.Hints.tsx
-import { jsx as jsx144, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx145, jsxs as jsxs73 } from "react/jsx-runtime";
 var MenuHint = ({ children }) => {
   const { WelcomeScreenMenuHintTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx144(WelcomeScreenMenuHintTunnel.In, { children: /* @__PURE__ */ jsxs72("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [
+  return /* @__PURE__ */ jsx145(WelcomeScreenMenuHintTunnel.In, { children: /* @__PURE__ */ jsxs73("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [
     WelcomeScreenMenuArrow,
-    /* @__PURE__ */ jsx144("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })
+    /* @__PURE__ */ jsx145("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })
   ] }) });
 };
 MenuHint.displayName = "MenuHint";
 var ToolbarHint = ({ children }) => {
   const { WelcomeScreenToolbarHintTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx144(WelcomeScreenToolbarHintTunnel.In, { children: /* @__PURE__ */ jsxs72("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [
-    /* @__PURE__ */ jsx144("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }),
+  return /* @__PURE__ */ jsx145(WelcomeScreenToolbarHintTunnel.In, { children: /* @__PURE__ */ jsxs73("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [
+    /* @__PURE__ */ jsx145("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }),
     WelcomeScreenTopToolbarArrow
   ] }) });
 };
 ToolbarHint.displayName = "ToolbarHint";
 var HelpHint = ({ children }) => {
   const { WelcomeScreenHelpHintTunnel } = useTunnels();
-  return /* @__PURE__ */ jsx144(WelcomeScreenHelpHintTunnel.In, { children: /* @__PURE__ */ jsxs72("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [
-    /* @__PURE__ */ jsx144("div", { children: children || t("welcomeScreen.defaults.helpHint") }),
+  return /* @__PURE__ */ jsx145(WelcomeScreenHelpHintTunnel.In, { children: /* @__PURE__ */ jsxs73("div", { className: "excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [
+    /* @__PURE__ */ jsx145("div", { children: children || t("welcomeScreen.defaults.helpHint") }),
     WelcomeScreenHelpArrow
   ] }) });
 };
 HelpHint.displayName = "HelpHint";
 
 // components/welcome-screen/WelcomeScreen.tsx
-import { Fragment as Fragment27, jsx as jsx145, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx146, jsxs as jsxs74 } from "react/jsx-runtime";
 var WelcomeScreen = (props) => {
-  return /* @__PURE__ */ jsx145(Fragment27, { children: props.children || /* @__PURE__ */ jsxs73(Fragment27, { children: [
-    /* @__PURE__ */ jsx145(Center, {}),
-    /* @__PURE__ */ jsx145(MenuHint, {}),
-    /* @__PURE__ */ jsx145(ToolbarHint, {}),
-    /* @__PURE__ */ jsx145(HelpHint, {})
+  return /* @__PURE__ */ jsx146(Fragment28, { children: props.children || /* @__PURE__ */ jsxs74(Fragment28, { children: [
+    /* @__PURE__ */ jsx146(Center, {}),
+    /* @__PURE__ */ jsx146(MenuHint, {}),
+    /* @__PURE__ */ jsx146(ToolbarHint, {}),
+    /* @__PURE__ */ jsx146(HelpHint, {})
   ] }) });
 };
 WelcomeScreen.displayName = "WelcomeScreen";
@@ -45597,6 +46377,7 @@ var polyfill_default = polyfill;
 
 // index.tsx
 import {
+  configureGifWorkerUrl,
   getSceneVersion,
   hashElementsVersion as hashElementsVersion2,
   hashString as hashString2,
@@ -45681,37 +46462,37 @@ import { isLinearElement as isLinearElement12 } from "@excalidraw/element";
 import {
   FONT_FAMILY as FONT_FAMILY8,
   THEME as THEME26,
-  MIME_TYPES as MIME_TYPES10,
+  MIME_TYPES as MIME_TYPES12,
   ROUNDNESS as ROUNDNESS9,
   DEFAULT_LASER_COLOR as DEFAULT_LASER_COLOR2,
   UserIdleState as UserIdleState2,
   normalizeLink as normalizeLink5,
-  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords7,
+  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords8,
   viewportCoordsToSceneCoords as viewportCoordsToSceneCoords4,
   getFormFactor as getFormFactor2,
   throttleRAF as throttleRAF3
 } from "@excalidraw/common";
 import {
   mutateElement as mutateElement8,
-  newElementWith as newElementWith11,
+  newElementWith as newElementWith12,
   bumpVersion as bumpVersion4
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction40 } from "@excalidraw/element";
 import {
-  getCommonBounds as getCommonBounds14,
+  getCommonBounds as getCommonBounds15,
   getVisibleSceneBounds as getVisibleSceneBounds2,
   convertToExcalidrawElements as convertToExcalidrawElements2
 } from "@excalidraw/element";
 import { elementsOverlappingBBox as elementsOverlappingBBox3 } from "@excalidraw/element";
 import { isElementLink as isElementLink4 } from "@excalidraw/element";
 import { setCustomTextMetricsProvider } from "@excalidraw/element";
-import { jsx as jsx146 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
 polyfill_default();
 var ExcalidrawAPIProvider = ({
   children
 }) => {
   const [api, setApi] = useState36(null);
-  return /* @__PURE__ */ jsx146(ExcalidrawAPIContext.Provider, { value: api, children: /* @__PURE__ */ jsx146(ExcalidrawAPISetContext.Provider, { value: setApi, children }) });
+  return /* @__PURE__ */ jsx147(ExcalidrawAPIContext.Provider, { value: api, children: /* @__PURE__ */ jsx147(ExcalidrawAPISetContext.Provider, { value: setApi, children }) });
 };
 var ExcalidrawBase = (props) => {
   const {
@@ -45793,6 +46574,7 @@ var ExcalidrawBase = (props) => {
   const normalizedImageOptions = {
     maxFileSizeBytes: imageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes,
     maxWidthOrHeight: imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight,
+    gifAutoDecodeMaxFileSizeBytes: imageOptions?.gifAutoDecodeMaxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.gifAutoDecodeMaxFileSizeBytes,
     placeholderTransitionDuration: imageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration
   };
   const setExcalidrawAPI = useContext5(ExcalidrawAPISetContext);
@@ -45826,7 +46608,7 @@ var ExcalidrawBase = (props) => {
       document.removeEventListener("touchmove", handleTouchMove);
     };
   }, [browserZoomAllowed]);
-  return /* @__PURE__ */ jsx146(EditorJotaiProvider, { store: editorJotaiStore, children: /* @__PURE__ */ jsx146(InitializeApp, { langCode, theme, children: /* @__PURE__ */ jsx146(
+  return /* @__PURE__ */ jsx147(EditorJotaiProvider, { store: editorJotaiStore, children: /* @__PURE__ */ jsx147(InitializeApp, { langCode, theme, children: /* @__PURE__ */ jsx147(
     App_default,
     {
       onExport,
@@ -45946,10 +46728,10 @@ var areEqual5 = (prevProps, nextProps) => {
     }
     return prevUIOptions[key] === nextUIOptions[key];
   });
-  const isImageOptionsSame = (prevImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) === (nextImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) && (prevImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) === (nextImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) && (prevImageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration) === (nextImageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration);
+  const isImageOptionsSame = (prevImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) === (nextImageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight) && (prevImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) === (nextImageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes) && (prevImageOptions?.gifAutoDecodeMaxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.gifAutoDecodeMaxFileSizeBytes) === (nextImageOptions?.gifAutoDecodeMaxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.gifAutoDecodeMaxFileSizeBytes) && (prevImageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration) === (nextImageOptions?.placeholderTransitionDuration ?? DEFAULT_IMAGE_OPTIONS.placeholderTransitionDuration);
   return isUIOptionsSame && isImageOptionsSame && isShallowEqual10(prev, next);
 };
-var Excalidraw = React42.memo(ExcalidrawBase, areEqual5);
+var Excalidraw = React43.memo(ExcalidrawBase, areEqual5);
 Excalidraw.displayName = "Excalidraw";
 function useExcalidrawStateValue(selector) {
   return useAppStateValue(selector, false);
@@ -45968,7 +46750,7 @@ export {
   Fonts,
   FooterCenter_default as Footer,
   LiveCollaborationTrigger_default as LiveCollaborationTrigger,
-  MIME_TYPES10 as MIME_TYPES,
+  MIME_TYPES12 as MIME_TYPES,
   MainMenu_default as MainMenu,
   ROUNDNESS9 as ROUNDNESS,
   Sidebar,
@@ -45980,6 +46762,7 @@ export {
   applyDarkModeFilter11 as applyDarkModeFilter,
   bumpVersion4 as bumpVersion,
   captureDragEventData,
+  configureGifWorkerUrl,
   convertToExcalidrawElements2 as convertToExcalidrawElements,
   defaultLang,
   elementsOverlappingBBox3 as elementsOverlappingBBox,
@@ -45987,7 +46770,7 @@ export {
   exportToCanvas2 as exportToCanvas,
   exportToClipboard,
   exportToSvg2 as exportToSvg,
-  getCommonBounds14 as getCommonBounds,
+  getCommonBounds15 as getCommonBounds,
   getDataURL,
   getFormFactor2 as getFormFactor,
   getNonDeletedElements19 as getNonDeletedElements,
@@ -46004,7 +46787,7 @@ export {
   languages,
   loadFromBlob,
   mutateElement8 as mutateElement,
-  newElementWith11 as newElementWith,
+  newElementWith12 as newElementWith,
   normalizeLink5 as normalizeLink,
   parseDataTransferEvent,
   parseDragImageMetadata,
@@ -46013,7 +46796,7 @@ export {
   restoreAppState,
   restoreElement,
   restoreElements,
-  sceneCoordsToViewportCoords7 as sceneCoordsToViewportCoords,
+  sceneCoordsToViewportCoords8 as sceneCoordsToViewportCoords,
   serializeAsJSON,
   setCustomTextMetricsProvider,
   throttleRAF3 as throttleRAF,