@myoc/excalidraw 0.19.511 → 0.19.513

package/dist/dev/index.js

@@ -57,10 +57,10 @@ import {
   saveAsJSON,
   serializeAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-WGF6T3RR.js";
+} from "./chunk-BI6BDZVY.js";
 import {
   define_import_meta_env_default
-} from "./chunk-G3MPOS33.js";
+} from "./chunk-FW62QUKV.js";
 import {
   en_default
 } from "./chunk-ZGRXNVW4.js";
@@ -81,264 +81,266 @@ import React42, {
   useRef as useRef31,
   useState as useState33
 } from "react";
-import { DEFAULT_UI_OPTIONS, isShallowEqual as isShallowEqual9 } from "@excalidraw/common";
+import {
+  DEFAULT_IMAGE_OPTIONS,
+  DEFAULT_UI_OPTIONS,
+  isShallowEqual as isShallowEqual9
+} from "@excalidraw/common";
 
 // components/App.tsx
 import clsx57 from "clsx";
 import throttle2 from "lodash.throttle";
+import { nanoid } from "nanoid";
 import React40, { useContext as useContext3 } from "react";
 import { flushSync as flushSync2 } from "react-dom";
 import rough3 from "roughjs/bin/rough";
-import { nanoid } from "nanoid";
 import {
   clamp as clamp8,
-  pointFrom as pointFrom34,
   pointDistance as pointDistance9,
-  vector as vector3,
+  pointFrom as pointFrom34,
   pointRotateRads as pointRotateRads23,
-  vectorFromPoint as vectorFromPoint10,
-  vectorSubtract as vectorSubtract2,
+  vector as vector3,
   vectorDot,
-  vectorNormalize as vectorNormalize5
+  vectorFromPoint as vectorFromPoint10,
+  vectorNormalize as vectorNormalize5,
+  vectorSubtract as vectorSubtract2
 } from "@excalidraw/math";
 import {
-  COLOR_PALETTE as COLOR_PALETTE6,
-  CODES as CODES11,
-  shouldResizeFromCenter,
-  shouldMaintainAspectRatio,
-  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
-  isArrowKey as isArrowKey2,
-  KEYS as KEYS50,
+  addEventListener as addEventListener2,
   APP_NAME,
+  AppEventBus,
+  applyDarkModeFilter as applyDarkModeFilter4,
+  arrayToMap as arrayToMap30,
+  ARROW_TYPE as ARROW_TYPE2,
+  BIND_MODE_TIMEOUT as BIND_MODE_TIMEOUT2,
+  CLASSES as CLASSES10,
+  CODES as CODES11,
+  COLOR_PALETTE as COLOR_PALETTE6,
+  createUserAgentDescriptor,
   CURSOR_TYPE as CURSOR_TYPE4,
+  debounce as debounce3,
+  DEFAULT_COLLISION_THRESHOLD,
+  DEFAULT_REDUCED_GLOBAL_ALPHA as DEFAULT_REDUCED_GLOBAL_ALPHA2,
+  DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
   DEFAULT_TRANSFORM_HANDLE_SPACING as DEFAULT_TRANSFORM_HANDLE_SPACING3,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_VERTICAL_ALIGN,
+  deriveStylesPanelMode as deriveStylesPanelMode2,
+  distance as distance2,
+  DOUBLE_TAP_POSITION_THRESHOLD,
   DRAGGING_THRESHOLD as DRAGGING_THRESHOLD3,
+  easeOut as easeOut4,
+  easeToValuesRAF,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
+  Emitter as Emitter2,
   EVENT as EVENT10,
   FRAME_STYLE as FRAME_STYLE4,
+  getDateTime,
+  getFeatureFlag as getFeatureFlag4,
+  getFontString as getFontString11,
+  getFormFactor,
+  getGridPoint as getGridPoint2,
+  getLineHeight as getLineHeight6,
+  getNearestScrollableContainer,
   IMAGE_MIME_TYPES as IMAGE_MIME_TYPES2,
   IMAGE_RENDER_TIMEOUT,
+  invariant as invariant16,
+  isArrowKey as isArrowKey2,
+  isBrave,
+  isDevEnv as isDevEnv9,
+  isInputLike,
+  isIOS,
+  isLocalLink as isLocalLink2,
+  isSafari as isSafari2,
+  isSelectionLikeTool,
+  isShallowEqual as isShallowEqual8,
+  isTestEnv as isTestEnv5,
+  isToolIcon,
+  isTransparent as isTransparent6,
+  isWritableElement as isWritableElement4,
+  KEYS as KEYS50,
   LINE_CONFIRM_THRESHOLD as LINE_CONFIRM_THRESHOLD2,
-  MAX_ALLOWED_FILE_BYTES,
+  loadDesktopUIModePreference,
+  matchKey as matchKey3,
   MIME_TYPES as MIME_TYPES7,
+  MINIMUM_ARROW_SIZE,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
+  muteFSAbortError,
+  normalizeEOL as normalizeEOL2,
+  normalizeLink as normalizeLink3,
+  oneOf,
   POINTER_BUTTON as POINTER_BUTTON2,
+  POINTER_EVENTS,
+  randomInteger as randomInteger4,
   ROUNDNESS as ROUNDNESS7,
+  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords7,
   SCROLL_TIMEOUT,
+  setDesktopUIMode,
+  shouldMaintainAspectRatio,
+  shouldResizeFromCenter,
+  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
+  supportsResizeObserver as supportsResizeObserver2,
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   THEME as THEME17,
-  TOUCH_CTX_MENU_TIMEOUT,
-  VERTICAL_ALIGN as VERTICAL_ALIGN5,
-  YOUTUBE_STATES,
-  ZOOM_STEP as ZOOM_STEP2,
-  POINTER_EVENTS,
   TOOL_TYPE as TOOL_TYPE3,
-  supportsResizeObserver as supportsResizeObserver2,
-  DEFAULT_COLLISION_THRESHOLD,
-  DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
-  ARROW_TYPE as ARROW_TYPE2,
-  DEFAULT_REDUCED_GLOBAL_ALPHA as DEFAULT_REDUCED_GLOBAL_ALPHA2,
-  isLocalLink as isLocalLink2,
-  normalizeLink as normalizeLink3,
+  TOUCH_CTX_MENU_TIMEOUT,
   toValidURL,
-  getGridPoint as getGridPoint2,
-  getLineHeight as getLineHeight6,
-  debounce as debounce3,
-  distance as distance2,
-  getFontString as getFontString11,
-  getNearestScrollableContainer,
-  isInputLike,
-  isToolIcon,
-  isWritableElement as isWritableElement4,
-  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords7,
   tupleToCoors,
-  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3,
-  wrapEvent as wrapEvent2,
-  updateObject as updateObject2,
   updateActiveTool as updateActiveTool8,
-  isTransparent as isTransparent6,
-  easeToValuesRAF,
-  muteFSAbortError,
-  isTestEnv as isTestEnv5,
-  isDevEnv as isDevEnv9,
-  easeOut as easeOut4,
+  updateObject as updateObject2,
   updateStable,
-  addEventListener as addEventListener2,
-  normalizeEOL as normalizeEOL2,
-  getDateTime,
-  isShallowEqual as isShallowEqual8,
-  arrayToMap as arrayToMap30,
-  applyDarkModeFilter as applyDarkModeFilter4,
-  AppEventBus,
-  randomInteger as randomInteger4,
-  CLASSES as CLASSES10,
-  Emitter as Emitter2,
-  MINIMUM_ARROW_SIZE,
-  DOUBLE_TAP_POSITION_THRESHOLD,
-  BIND_MODE_TIMEOUT as BIND_MODE_TIMEOUT2,
-  invariant as invariant16,
-  getFeatureFlag as getFeatureFlag4,
-  createUserAgentDescriptor,
-  getFormFactor,
-  deriveStylesPanelMode as deriveStylesPanelMode2,
-  isIOS,
-  isBrave,
-  isSafari as isSafari2,
-  loadDesktopUIModePreference,
-  setDesktopUIMode,
-  isSelectionLikeTool,
-  oneOf,
-  matchKey as matchKey3
+  VERTICAL_ALIGN as VERTICAL_ALIGN5,
+  viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3,
+  wrapEvent as wrapEvent2,
+  YOUTUBE_STATES,
+  ZOOM_STEP as ZOOM_STEP2
 } from "@excalidraw/common";
 import {
-  getObservedAppState,
-  getCommonBounds as getCommonBounds11,
-  getElementAbsoluteCoords as getElementAbsoluteCoords8,
+  updateImageCache as _updateImageCache,
+  addElementsToFrame as addElementsToFrame2,
+  bindOrUnbindBindingElement as bindOrUnbindBindingElement2,
   bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
-  fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
-  getHoveredElementForBinding as getHoveredElementForBinding2,
-  isBindingEnabled as isBindingEnabled2,
-  updateBoundElements as updateBoundElements4,
-  newElementWith as newElementWith10,
-  newFrameElement as newFrameElement2,
-  newFreeDrawElement,
-  newEmbeddableElement,
-  newMagicFrameElement,
-  newIframeElement,
-  newArrowElement as newArrowElement2,
-  newElement as newElement6,
-  newImageElement,
-  newLinearElement as newLinearElement5,
-  newTextElement as newTextElement5,
-  refreshTextDimensions,
+  calculateFixedPointForNonElbowArrowBinding as calculateFixedPointForNonElbowArrowBinding2,
+  CaptureUpdateAction as CaptureUpdateAction41,
+  convertToExcalidrawElements,
+  createSrcDoc,
+  cropElement,
   deepCopyElement as deepCopyElement4,
+  doBoundsIntersect as doBoundsIntersect4,
+  dragNewElement,
+  dragSelectedElements,
   duplicateElements as duplicateElements2,
+  editGroupForSelectedElement,
+  elementOverlapsWithFrame as elementOverlapsWithFrame2,
+  embeddableURLValidator as embeddableURLValidator2,
+  excludeElementsInFramesFromSelection,
+  filterElementsEligibleAsFrameChildren,
+  fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
+  FlowChartCreator,
+  FlowChartNavigator,
+  getActiveTextElement as getActiveTextElement2,
+  getApproxMinLineHeight,
+  getApproxMinLineWidth as getApproxMinLineWidth2,
+  getBoundTextElement as getBoundTextElement15,
+  getCommonBounds as getCommonBounds11,
+  getCommonFrameId as getCommonFrameId2,
+  getContainerCenter,
+  getContainerElement as getContainerElement5,
+  getContainingFrame as getContainingFrame3,
+  getCornerRadius as getCornerRadius2,
+  getCursorForResizingElement,
+  getDragOffsetXY,
+  getElementAbsoluteCoords as getElementAbsoluteCoords8,
+  getElementBounds as getElementBounds5,
+  getElementsInGroup as getElementsInGroup10,
+  getElementsInNewFrame,
+  getElementsInResizingFrame as getElementsInResizingFrame4,
+  getElementsOverlappingFrame as getElementsOverlappingFrame2,
+  getElementWithTransformHandleType,
+  getEmbedLink as getEmbedLink2,
+  getFrameChildren as getFrameChildren6,
+  getFrameChildrenInsertionIndex as getFrameChildrenInsertionIndex2,
+  getFrameLikeTitle,
+  getHoveredElementForBinding as getHoveredElementForBinding2,
+  getInitializedImageElements,
+  getLineHeightInPx as getLineHeightInPx3,
+  getLinkDirectionFromKey,
+  getMinTextElementWidth,
+  getNormalizedDimensions,
+  getObservedAppState,
+  getRenderOpacity,
+  getResizeArrowDirection,
+  getResizeOffsetXY,
+  getSelectedGroupIdForElement,
+  getSelectedGroupIds as getSelectedGroupIds4,
+  getSelectionStateForElements as getSelectionStateForElements2,
+  getSnapOutlineMidPoint as getSnapOutlineMidPoint2,
+  getTransformHandleTypeFromCoords,
+  getUncroppedWidthAndHeight as getUncroppedWidthAndHeight4,
+  getVisibleSceneBounds,
+  handleFocusPointDrag,
+  handleFocusPointHover,
+  handleFocusPointPointerDown,
+  handleFocusPointPointerUp,
+  hasBoundingBox as hasBoundingBox2,
   hasBoundTextElement as hasBoundTextElement9,
+  hitElementBoundingBox as hitElementBoundingBox2,
+  hitElementBoundingBoxOnly,
+  hitElementBoundText,
+  hitElementItself as hitElementItself3,
   isArrowElement as isArrowElement14,
+  isBindableElement as isBindableElement3,
   isBindingElement as isBindingElement4,
   isBindingElementType,
+  isBindingEnabled as isBindingEnabled2,
   isBoundToContainer as isBoundToContainer9,
+  isCursorInFrame,
+  isElbowArrow as isElbowArrow10,
+  isElementCompletelyInViewport as isElementCompletelyInViewport2,
+  isElementInFrame,
+  isElementInGroup as isElementInGroup2,
+  isElementInViewport as isElementInViewport3,
+  isElementLink as isElementLink2,
+  isEligibleFrameChildType,
+  isEmbeddableElement as isEmbeddableElement4,
+  isFlowchartNodeElement as isFlowchartNodeElement2,
   isFrameLikeElement as isFrameLikeElement15,
+  isIframeElement as isIframeElement2,
+  isIframeLikeElement as isIframeLikeElement2,
   isImageElement as isImageElement9,
-  isEmbeddableElement as isEmbeddableElement4,
   isInitializedImageElement as isInitializedImageElement3,
+  isInvisiblySmallElement as isInvisiblySmallElement3,
   isLinearElement as isLinearElement12,
   isLinearElementType as isLinearElementType2,
-  isUsingAdaptiveRadius as isUsingAdaptiveRadius4,
-  isIframeElement as isIframeElement2,
-  isIframeLikeElement as isIframeLikeElement2,
+  isLineElement as isLineElement8,
   isMagicFrameElement as isMagicFrameElement2,
+  isMeasureTextSupported,
+  isNonDeletedElement,
+  isPathALoop as isPathALoop3,
+  isPointInElement as isPointInElement3,
+  isSelectedViaGroup as isSelectedViaGroup2,
+  isSimpleArrow,
   isTextBindableContainer as isTextBindableContainer3,
-  isElbowArrow as isElbowArrow10,
-  isFlowchartNodeElement as isFlowchartNodeElement2,
-  isBindableElement as isBindableElement3,
   isTextElement as isTextElement19,
-  getNormalizedDimensions,
-  isElementCompletelyInViewport as isElementCompletelyInViewport2,
-  isElementInViewport as isElementInViewport3,
-  isInvisiblySmallElement as isInvisiblySmallElement3,
-  getCornerRadius as getCornerRadius2,
-  isPathALoop as isPathALoop3,
-  createSrcDoc,
-  embeddableURLValidator as embeddableURLValidator2,
+  isUsingAdaptiveRadius as isUsingAdaptiveRadius4,
+  isValidTextContainer,
+  makeNextSelectedElementIds as makeNextSelectedElementIds3,
+  maxBindingDistance_simple as maxBindingDistance_simple3,
+  maybeHandleArrowPointlikeDrag,
   maybeParseEmbedSrc,
-  getEmbedLink as getEmbedLink2,
-  getInitializedImageElements,
+  measureText as measureText8,
+  mutateElement as mutateElement6,
+  newArrowElement as newArrowElement2,
+  newElement as newElement6,
+  newElementWith as newElementWith10,
+  newEmbeddableElement,
+  newFrameElement as newFrameElement2,
+  newFreeDrawElement,
+  newIframeElement,
+  newImageElement,
+  newLinearElement as newLinearElement5,
+  newMagicFrameElement,
+  newTextElement as newTextElement5,
   normalizeSVG,
-  updateImageCache as _updateImageCache,
-  getBoundTextElement as getBoundTextElement15,
-  getContainerCenter,
-  getContainerElement as getContainerElement5,
-  isValidTextContainer,
+  normalizeText as normalizeText2,
+  parseElementLinkFromURL,
+  positionElementsOnGrid,
   redrawTextBoundingBox as redrawTextBoundingBox8,
-  hasBoundingBox as hasBoundingBox2,
-  getCommonFrameId as getCommonFrameId2,
-  getFrameChildren as getFrameChildren6,
-  getFrameChildrenInsertionIndex as getFrameChildrenInsertionIndex2,
-  isCursorInFrame,
-  addElementsToFrame as addElementsToFrame2,
-  replaceAllElementsInFrame as replaceAllElementsInFrame4,
+  refreshTextDimensions,
   removeElementsFromFrame as removeElementsFromFrame2,
-  getElementsInResizingFrame as getElementsInResizingFrame4,
-  getElementsInNewFrame,
-  getContainingFrame as getContainingFrame3,
-  elementOverlapsWithFrame as elementOverlapsWithFrame2,
-  updateFrameMembershipOfSelectedElements as updateFrameMembershipOfSelectedElements6,
-  isElementInFrame,
-  getFrameLikeTitle,
-  getElementsOverlappingFrame as getElementsOverlappingFrame2,
-  filterElementsEligibleAsFrameChildren,
-  hitElementBoundText,
-  hitElementBoundingBoxOnly,
-  hitElementItself as hitElementItself3,
-  getVisibleSceneBounds,
-  FlowChartCreator,
-  FlowChartNavigator,
-  getLinkDirectionFromKey,
-  cropElement,
-  wrapText as wrapText5,
-  isElementLink as isElementLink2,
-  parseElementLinkFromURL,
-  isMeasureTextSupported,
-  normalizeText as normalizeText2,
-  measureText as measureText8,
-  getLineHeightInPx as getLineHeightInPx3,
-  getApproxMinLineWidth as getApproxMinLineWidth2,
-  getApproxMinLineHeight,
-  getMinTextElementWidth,
-  ShapeCache as ShapeCache4,
-  getRenderOpacity,
-  editGroupForSelectedElement,
-  getElementsInGroup as getElementsInGroup10,
-  getSelectedGroupIdForElement,
-  getSelectedGroupIds as getSelectedGroupIds4,
-  isElementInGroup as isElementInGroup2,
-  isSelectedViaGroup as isSelectedViaGroup2,
+  replaceAllElementsInFrame as replaceAllElementsInFrame4,
+  Scene,
   selectGroupsForSelectedElements as selectGroupsForSelectedElements7,
+  ShapeCache as ShapeCache4,
+  Store,
+  StoreDelta as StoreDelta2,
   syncInvalidIndices,
   syncMovedIndices as syncMovedIndices5,
-  excludeElementsInFramesFromSelection,
-  getSelectionStateForElements as getSelectionStateForElements2,
-  makeNextSelectedElementIds as makeNextSelectedElementIds3,
-  getResizeOffsetXY,
-  getResizeArrowDirection,
   transformElements,
-  getCursorForResizingElement,
-  getElementWithTransformHandleType,
-  getTransformHandleTypeFromCoords,
-  dragNewElement,
-  dragSelectedElements,
-  getDragOffsetXY,
-  isNonDeletedElement,
-  Scene,
-  Store,
-  CaptureUpdateAction as CaptureUpdateAction41,
-  hitElementBoundingBox as hitElementBoundingBox2,
-  isLineElement as isLineElement8,
-  isSimpleArrow,
-  StoreDelta as StoreDelta2,
-  positionElementsOnGrid,
-  calculateFixedPointForNonElbowArrowBinding as calculateFixedPointForNonElbowArrowBinding2,
-  bindOrUnbindBindingElement as bindOrUnbindBindingElement2,
-  mutateElement as mutateElement6,
-  getElementBounds as getElementBounds5,
-  doBoundsIntersect as doBoundsIntersect4,
-  isPointInElement as isPointInElement3,
-  maxBindingDistance_simple as maxBindingDistance_simple3,
-  convertToExcalidrawElements,
-  getSnapOutlineMidPoint as getSnapOutlineMidPoint2,
-  handleFocusPointDrag,
-  handleFocusPointHover,
-  handleFocusPointPointerDown,
-  handleFocusPointPointerUp,
-  maybeHandleArrowPointlikeDrag,
-  getUncroppedWidthAndHeight as getUncroppedWidthAndHeight4,
-  getActiveTextElement as getActiveTextElement2,
-  isEligibleFrameChildType
+  updateBoundElements as updateBoundElements4,
+  updateFrameMembershipOfSelectedElements as updateFrameMembershipOfSelectedElements6,
+  wrapText as wrapText5
 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor11 } from "@excalidraw/element/linearElementEditor";
 import { findShapeByKey } from "@excalidraw/element/shapes";
@@ -9609,7 +9611,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-UBAFGYUH.js").then(
+        (blob2) => import("./data/image-WGZL7YPK.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -15012,74 +15014,668 @@ var ActionManager = class {
   }
 };
 
-// animation-frame-handler.ts
-var AnimationFrameHandler = class {
-  constructor() {
-    __publicField(this, "targets", /* @__PURE__ */ new WeakMap());
-    __publicField(this, "rafIds", /* @__PURE__ */ new WeakMap());
+// gesture.ts
+var getCenter = (pointers) => {
+  const allCoords = Array.from(pointers.values());
+  return {
+    x: sum(allCoords, (coords) => coords.x) / allCoords.length,
+    y: sum(allCoords, (coords) => coords.y) / allCoords.length
+  };
+};
+var getDistance = ([a, b]) => Math.hypot(a.x - b.x, a.y - b.y);
+var sum = (array, mapper) => array.reduce((acc, item) => acc + mapper(item), 0);
+
+// components/ElementCanvasButtons.tsx
+import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords2 } from "@excalidraw/common";
+import { getElementAbsoluteCoords as getElementAbsoluteCoords4 } from "@excalidraw/element";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var CONTAINER_PADDING = 5;
+var getContainerCoords2 = (element, appState, elementsMap) => {
+  const [x1, y1] = getElementAbsoluteCoords4(element, elementsMap);
+  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords2(
+    { sceneX: x1 + element.width, sceneY: y1 },
+    appState
+  );
+  const x = viewportX - appState.offsetLeft + 10;
+  const y = viewportY - appState.offsetTop;
+  return { x, y };
+};
+var ElementCanvasButtons = ({
+  children,
+  element,
+  elementsMap
+}) => {
+  const appState = useExcalidrawAppState();
+  if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
+    return null;
   }
-  register(key, callback) {
-    this.targets.set(key, { callback, stopped: true });
+  const { x, y } = getContainerCoords2(element, appState, elementsMap);
+  return /* @__PURE__ */ jsx57(
+    "div",
+    {
+      className: "excalidraw-canvas-buttons",
+      style: {
+        top: `${y}px`,
+        left: `${x}px`,
+        // width: CONTAINER_WIDTH,
+        padding: CONTAINER_PADDING
+      },
+      children
+    }
+  );
+};
+
+// laserTrails.ts
+import { DEFAULT_LASER_COLOR, easeOut } from "@excalidraw/common";
+
+// animatedTrail.ts
+import { LaserPointer } from "@excalidraw/laser-pointer";
+import {
+  SVG_NS,
+  getSvgPathFromStroke as getSvgPathFromStroke2,
+  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3
+} from "@excalidraw/common";
+
+// reactUtils.ts
+import { version as ReactVersion } from "react";
+import { unstable_batchedUpdates } from "react-dom";
+import { throttleRAF } from "@excalidraw/common";
+var withBatchedUpdates = (func) => (event) => {
+  unstable_batchedUpdates(func, event);
+};
+var withBatchedUpdatesThrottled = (func) => {
+  return throttleRAF((event) => {
+    unstable_batchedUpdates(func, event);
+  });
+};
+var isRenderThrottlingEnabled = (() => {
+  let IS_REACT_18_AND_UP;
+  try {
+    const version = ReactVersion.split(".");
+    IS_REACT_18_AND_UP = Number(version[0]) > 17;
+  } catch {
+    IS_REACT_18_AND_UP = false;
   }
-  start(key) {
-    const target = this.targets.get(key);
-    if (!target) {
+  let hasWarned = false;
+  return () => {
+    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {
+      if (!IS_REACT_18_AND_UP) {
+        if (!hasWarned) {
+          hasWarned = true;
+          console.warn(
+            "Excalidraw: render throttling is disabled on React versions < 18."
+          );
+        }
+        return false;
+      }
+      return true;
+    }
+    return false;
+  };
+})();
+
+// renderer/animation.ts
+var _AnimationController = class _AnimationController {
+  static start(key, animation) {
+    if (_AnimationController.animations.has(key)) {
       return;
     }
-    if (this.rafIds.has(key)) {
+    const initialState = animation({
+      deltaTime: 0,
+      state: void 0
+    });
+    if (initialState) {
+      _AnimationController.animations.set(key, {
+        animation,
+        lastTime: 0,
+        state: initialState
+      });
+      _AnimationController.scheduleNextFrame();
+    }
+  }
+  static scheduleNextFrame() {
+    if (_AnimationController.scheduledFrame) {
       return;
     }
-    this.targets.set(key, { ...target, stopped: false });
-    this.scheduleFrame(key);
+    if (isRenderThrottlingEnabled()) {
+      _AnimationController.scheduledFrame = {
+        id: requestAnimationFrame(_AnimationController.tick),
+        type: "raf"
+      };
+    } else {
+      _AnimationController.scheduledFrame = {
+        id: setTimeout(_AnimationController.tick, 0),
+        type: "timeout"
+      };
+    }
+  }
+  static cancelScheduledFrame() {
+    if (!_AnimationController.scheduledFrame) {
+      return;
+    }
+    if (_AnimationController.scheduledFrame.type === "raf") {
+      cancelAnimationFrame(_AnimationController.scheduledFrame.id);
+    } else {
+      clearTimeout(_AnimationController.scheduledFrame.id);
+    }
+    _AnimationController.scheduledFrame = null;
   }
-  stop(key) {
-    const target = this.targets.get(key);
-    if (target && !target.stopped) {
-      this.targets.set(key, { ...target, stopped: true });
+  static cancelScheduledFrameIfIdle() {
+    if (_AnimationController.animations.size > 0) {
+      return false;
     }
-    this.cancelFrame(key);
+    _AnimationController.cancelScheduledFrame();
+    return true;
   }
-  constructFrame(key) {
-    return (timestamp) => {
-      const target = this.targets.get(key);
-      if (!target) {
+  static tick() {
+    _AnimationController.scheduledFrame = null;
+    if (_AnimationController.animations.size > 0) {
+      for (const [key, animation] of _AnimationController.animations) {
+        const now = performance.now();
+        const deltaTime = animation.lastTime === 0 ? 0 : now - animation.lastTime;
+        const state = animation.animation({
+          deltaTime,
+          state: animation.state
+        });
+        if (!state) {
+          _AnimationController.animations.delete(key);
+          if (_AnimationController.cancelScheduledFrameIfIdle()) {
+            return;
+          }
+        } else {
+          animation.lastTime = now;
+          animation.state = state;
+        }
+      }
+      if (_AnimationController.cancelScheduledFrameIfIdle()) {
         return;
       }
-      const shouldAbort = this.onFrame(target, timestamp);
-      if (!target.stopped && !shouldAbort) {
-        this.scheduleFrame(key);
-      } else {
-        this.cancelFrame(key);
+      _AnimationController.scheduleNextFrame();
+    }
+  }
+  static running(key) {
+    return _AnimationController.animations.has(key);
+  }
+  static cancel(key) {
+    _AnimationController.animations.delete(key);
+    _AnimationController.cancelScheduledFrameIfIdle();
+  }
+};
+__publicField(_AnimationController, "scheduledFrame", null);
+__publicField(_AnimationController, "animations", /* @__PURE__ */ new Map());
+var AnimationController = _AnimationController;
+
+// animatedTrail.ts
+var _AnimatedTrail = class _AnimatedTrail {
+  constructor(app, options) {
+    this.app = app;
+    this.options = options;
+    __publicField(this, "currentTrail");
+    __publicField(this, "pastTrails", []);
+    __publicField(this, "container");
+    __publicField(this, "trailElement");
+    __publicField(this, "trailAnimation");
+    __publicField(this, "key");
+    this.key = `animated-trail-${_AnimatedTrail.counter++}`;
+    this.trailElement = document.createElementNS(SVG_NS, "path");
+    if (this.options.animateTrail) {
+      this.trailAnimation = document.createElementNS(SVG_NS, "animate");
+      this.trailAnimation.setAttribute("attributeName", "stroke-dashoffset");
+      this.trailElement.setAttribute("stroke-dasharray", "7 7");
+      this.trailElement.setAttribute("stroke-dashoffset", "10");
+      this.trailAnimation.setAttribute("from", "0");
+      this.trailAnimation.setAttribute("to", `-14`);
+      this.trailAnimation.setAttribute("dur", "0.3s");
+      this.trailElement.appendChild(this.trailAnimation);
+    }
+  }
+  get hasCurrentTrail() {
+    return !!this.currentTrail;
+  }
+  hasLastPoint(x, y) {
+    if (this.currentTrail) {
+      const len = this.currentTrail.originalPoints.length;
+      return this.currentTrail.originalPoints[len - 1][0] === x && this.currentTrail.originalPoints[len - 1][1] === y;
+    }
+    return false;
+  }
+  cleanup() {
+    this.pastTrails = [];
+    this.currentTrail = void 0;
+    if (this.trailElement.parentNode === this.container) {
+      this.container?.removeChild(this.trailElement);
+    }
+  }
+  start(container) {
+    if (container) {
+      this.container = container;
+    }
+    if (this.trailElement.parentNode !== this.container && this.container) {
+      this.container.appendChild(this.trailElement);
+    }
+    if (!AnimationController.running(this.key)) {
+      AnimationController.start(this.key, () => {
+        const needsNext = this.onFrame();
+        if (needsNext) {
+          return { keep: true };
+        }
+        this.cleanup();
+        return null;
+      });
+    }
+  }
+  stop() {
+    AnimationController.cancel(this.key);
+    this.cleanup();
+  }
+  startPath(x, y) {
+    this.currentTrail = new LaserPointer(this.options);
+    this.currentTrail.addPoint([x, y, performance.now()]);
+    this.update();
+  }
+  addPointToPath(x, y) {
+    if (this.currentTrail) {
+      this.currentTrail.addPoint([x, y, performance.now()]);
+      this.update();
+    }
+  }
+  endPath() {
+    if (this.currentTrail) {
+      this.currentTrail.close();
+      this.currentTrail.options.keepHead = false;
+      this.pastTrails.push(this.currentTrail);
+      this.currentTrail = void 0;
+      this.update();
+    }
+  }
+  getCurrentTrail() {
+    return this.currentTrail;
+  }
+  clearTrails() {
+    this.pastTrails = [];
+    this.currentTrail = void 0;
+    this.update();
+  }
+  update() {
+    this.start();
+    if (this.trailAnimation) {
+      this.trailAnimation.setAttribute("begin", "indefinite");
+      this.trailAnimation.setAttribute("repeatCount", "indefinite");
+    }
+  }
+  onFrame() {
+    const paths = [];
+    for (const trail of this.pastTrails) {
+      paths.push(this.drawTrail(trail, this.app.state));
+    }
+    if (this.currentTrail) {
+      const currentPath = this.drawTrail(this.currentTrail, this.app.state);
+      paths.push(currentPath);
+    }
+    this.pastTrails = this.pastTrails.filter(
+      (t2) => t2.getStrokeOutline(t2.options.size / this.app.state.zoom.value).length !== 0
+    );
+    if (paths.length === 0) {
+      this.trailElement.setAttribute("d", "");
+      return false;
+    }
+    const svgPaths = paths.join(" ").trim();
+    this.trailElement.setAttribute("d", svgPaths);
+    if (this.trailAnimation) {
+      this.trailElement.setAttribute(
+        "fill",
+        (this.options.fill ?? (() => "black"))(this)
+      );
+      this.trailElement.setAttribute(
+        "stroke",
+        (this.options.stroke ?? (() => "black"))(this)
+      );
+    } else {
+      this.trailElement.setAttribute(
+        "fill",
+        (this.options.fill ?? (() => "black"))(this)
+      );
+    }
+    return true;
+  }
+  drawTrail(trail, state) {
+    const _stroke = trail.getStrokeOutline(trail.options.size / state.zoom.value).map(([x, y]) => {
+      const result = sceneCoordsToViewportCoords3(
+        { sceneX: x, sceneY: y },
+        state
+      );
+      return [result.x, result.y];
+    });
+    const stroke = this.trailAnimation ? _stroke.slice(0, _stroke.length / 2) : _stroke;
+    return getSvgPathFromStroke2(stroke, true);
+  }
+};
+__publicField(_AnimatedTrail, "counter", 0);
+var AnimatedTrail = _AnimatedTrail;
+
+// laserTrails.ts
+var LaserTrails = class {
+  constructor(app) {
+    this.app = app;
+    __publicField(this, "localTrail");
+    __publicField(this, "collabTrails", /* @__PURE__ */ new Map());
+    __publicField(this, "container");
+    this.localTrail = new AnimatedTrail(app, {
+      ...this.getTrailOptions(),
+      fill: () => DEFAULT_LASER_COLOR
+    });
+  }
+  getTrailOptions() {
+    return {
+      simplify: 0,
+      streamline: 0.4,
+      sizeMapping: (c) => {
+        const DECAY_TIME = 1e3;
+        const DECAY_LENGTH = 50;
+        const t2 = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME
+        );
+        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
+        return Math.min(easeOut(l), easeOut(t2));
       }
     };
   }
-  scheduleFrame(key) {
-    const rafId = requestAnimationFrame(this.constructFrame(key));
-    this.rafIds.set(key, rafId);
+  startPath(x, y) {
+    this.localTrail.startPath(x, y);
+  }
+  addPointToPath(x, y) {
+    this.localTrail.addPointToPath(x, y);
+  }
+  endPath() {
+    this.localTrail.endPath();
+  }
+  start(container) {
+    this.container = container;
+    this.localTrail.start(container);
+  }
+  stop() {
+    this.localTrail.stop();
+    this.stopCollabTrails();
+    this.container = void 0;
   }
-  cancelFrame(key) {
-    if (this.rafIds.has(key)) {
-      const rafId = this.rafIds.get(key);
-      cancelAnimationFrame(rafId);
+  stopCollabTrails(collaborators) {
+    for (const [key, trail] of this.collabTrails) {
+      const collaborator = collaborators?.get(key);
+      if (!collaborator) {
+        trail.stop();
+        this.collabTrails.delete(key);
+      }
     }
-    this.rafIds.delete(key);
   }
-  onFrame(target, timestamp) {
-    const shouldAbort = target.callback(timestamp);
-    return shouldAbort ?? false;
+  updateCollabTrails(collaborators) {
+    this.stopCollabTrails(collaborators);
+    if (!this.container || collaborators.size === 0) {
+      return;
+    }
+    for (const [key, collaborator] of collaborators.entries()) {
+      if (collaborator.isCurrentUser) {
+        continue;
+      }
+      let trail = this.collabTrails.get(key);
+      if (!trail) {
+        trail = new AnimatedTrail(this.app, {
+          ...this.getTrailOptions(),
+          fill: () => collaborator.pointer?.laserColor || getClientColor(key, collaborator)
+        });
+        trail.start(this.container);
+        this.collabTrails.set(key, trail);
+      }
+      if (collaborator.pointer && collaborator.pointer.tool === "laser") {
+        const buttonDown = collaborator.button === "down";
+        const buttonUp = collaborator.button === "up";
+        const hasTrail = trail.hasCurrentTrail;
+        if (buttonDown && !hasTrail) {
+          trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
+        }
+        const lastPointOriginal = !trail.hasLastPoint(
+          collaborator.pointer.x,
+          collaborator.pointer.y
+        );
+        if (buttonDown && lastPointOriginal) {
+          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
+        }
+        if (buttonUp && hasTrail) {
+          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
+          trail.endPath();
+        }
+      }
+    }
   }
 };
 
-// gesture.ts
-var getCenter = (pointers) => {
-  const allCoords = Array.from(pointers.values());
+// scene/Renderer.ts
+import {
+  getCommonFrameId,
+  getFrameChildrenInsertionIndex,
+  isElementInViewport as isElementInViewport2
+} from "@excalidraw/element";
+import { arrayToMap as arrayToMap24, memoize, toBrandedType } from "@excalidraw/common";
+var Renderer = class {
+  constructor(scene) {
+    __publicField(this, "scene");
+    __publicField(this, "_getRenderableElements", memoize(
+      ({
+        canvasNonce,
+        zoom,
+        offsetLeft,
+        offsetTop,
+        scrollX,
+        scrollY,
+        height,
+        width,
+        editingTextElement,
+        newElement: newElement7
+      }) => {
+        const elements = this.scene.getNonDeletedElements();
+        const { elementsMap, newElementCanvasElement } = this.getRenderableElementsMap({
+          elements,
+          editingTextElement,
+          newElement: newElement7
+        });
+        const visibleElements = this.getVisibleCanvasElements({
+          elementsMap,
+          zoom,
+          offsetLeft,
+          offsetTop,
+          scrollX,
+          scrollY,
+          height,
+          width
+        });
+        return {
+          elementsMap,
+          visibleElements,
+          newElementCanvasElement,
+          canvasNonce
+        };
+      }
+    ));
+    __publicField(this, "getRenderableElements", (opts) => {
+      const { newElement: newElement7 } = opts;
+      const canvasNonce = `${this.scene.getSceneNonce()}${newElement7?.frameId ? `:${newElement7.versionNonce}` : ""}`;
+      const ret = this._getRenderableElements({
+        canvasNonce,
+        // don't spread `opts` because we don't want to memoize on some props
+        zoom: opts.zoom,
+        offsetLeft: opts.offsetLeft,
+        offsetTop: opts.offsetTop,
+        scrollX: opts.scrollX,
+        scrollY: opts.scrollY,
+        height: opts.height,
+        width: opts.width,
+        editingTextElement: opts.editingTextElement,
+        newElement: opts.newElement
+      });
+      if (opts.frameToHighlight && opts.selectedElementsAreBeingDragged && // if all dragged elements are already in the frame, don't reorder
+      getCommonFrameId(opts.selectedElements) !== opts.frameToHighlight.id) {
+        const reorderedVisibleElements = this.sortSelectedElementsIntoHighlightedFrame({
+          visibleElements: ret.visibleElements,
+          selectedElements: opts.selectedElements,
+          frameToHighlight: opts.frameToHighlight
+        });
+        return {
+          ...ret,
+          visibleElements: reorderedVisibleElements
+        };
+      }
+      return ret;
+    });
+    this.scene = scene;
+  }
+  getVisibleCanvasElements({
+    elementsMap,
+    zoom,
+    offsetLeft,
+    offsetTop,
+    scrollX,
+    scrollY,
+    height,
+    width
+  }) {
+    const visibleElements = [];
+    for (const element of elementsMap.values()) {
+      if (isElementInViewport2(
+        element,
+        width,
+        height,
+        {
+          zoom,
+          offsetLeft,
+          offsetTop,
+          scrollX,
+          scrollY
+        },
+        elementsMap
+      )) {
+        visibleElements.push(element);
+      }
+    }
+    return visibleElements;
+  }
+  getRenderableElementsMap({
+    elements,
+    editingTextElement,
+    newElement: newElement7
+  }) {
+    const elementsMap = toBrandedType(/* @__PURE__ */ new Map());
+    const newElementCanvasElement = newElement7?.frameId ? null : newElement7;
+    for (const element of elements) {
+      if (newElementCanvasElement?.id === element.id) {
+        continue;
+      }
+      if (!editingTextElement || editingTextElement.type !== "text" || element.id !== editingTextElement.id) {
+        elementsMap.set(element.id, element);
+      }
+    }
+    return { elementsMap, newElementCanvasElement };
+  }
+  sortSelectedElementsIntoHighlightedFrame({
+    visibleElements,
+    selectedElements,
+    frameToHighlight
+  }) {
+    if (!selectedElements.length) {
+      return visibleElements;
+    }
+    const selectedElementsMap = arrayToMap24(selectedElements);
+    const deselectedElements = visibleElements.filter(
+      (element) => !selectedElementsMap.has(element.id)
+    );
+    const insertionIndex = getFrameChildrenInsertionIndex(
+      deselectedElements,
+      frameToHighlight.id
+    );
+    if (insertionIndex === null) {
+      return visibleElements;
+    }
+    return [
+      ...deselectedElements.slice(0, insertionIndex),
+      ...selectedElements,
+      ...deselectedElements.slice(insertionIndex)
+    ];
+  }
+  // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
+  // safe to break TS contract here (for upstream cases)
+  destroy() {
+    renderStaticSceneThrottled.cancel();
+    this._getRenderableElements.clear();
+  }
+};
+
+// scene/scrollbars.ts
+import { getGlobalCSSVariable } from "@excalidraw/common";
+import { getCommonBounds as getCommonBounds4 } from "@excalidraw/element";
+var SCROLLBAR_MARGIN = 4;
+var SCROLLBAR_WIDTH = 6;
+var SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
+var getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
+  if (!elements.size) {
+    return {
+      horizontal: null,
+      vertical: null
+    };
+  }
+  const [elementsMinX, elementsMinY, elementsMaxX, elementsMaxY] = getCommonBounds4(elements);
+  const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
+  const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
+  const safeArea = {
+    top: parseInt(getGlobalCSSVariable("sat")) || 0,
+    bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
+    left: parseInt(getGlobalCSSVariable("sal")) || 0,
+    right: parseInt(getGlobalCSSVariable("sar")) || 0
+  };
+  const isRTL3 = getLanguage().rtl;
+  const viewportMinX = -appState.scrollX + safeArea.left;
+  const viewportMinY = -appState.scrollY + safeArea.top;
+  const viewportMaxX = viewportMinX + viewportWidthWithZoom - safeArea.right;
+  const viewportMaxY = viewportMinY + viewportHeightWithZoom - safeArea.bottom;
+  const sceneMinX = Math.min(elementsMinX, viewportMinX);
+  const sceneMinY = Math.min(elementsMinY, viewportMinY);
+  const sceneMaxX = Math.max(elementsMaxX, viewportMaxX);
+  const sceneMaxY = Math.max(elementsMaxY, viewportMaxY);
+  const sceneWidth = elementsMaxX - elementsMinX;
+  const sceneHeight = elementsMaxY - elementsMinY;
+  const extendedSceneWidth = sceneMaxX - sceneMinX;
+  const extendedSceneHeight = sceneMaxY - sceneMinY;
+  const scrollWidthOffset = Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right) + SCROLLBAR_WIDTH * 2;
+  const scrollbarWidth = viewportWidth * (viewportWidthWithZoom / extendedSceneWidth) - scrollWidthOffset;
+  const scrollbarHeightOffset = Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom) + SCROLLBAR_WIDTH * 2;
+  const scrollbarHeight = viewportHeight * (viewportHeightWithZoom / extendedSceneHeight) - scrollbarHeightOffset;
+  const horizontalDeltaMultiplier = extendedSceneWidth > sceneWidth ? extendedSceneWidth * appState.zoom.value / (scrollbarWidth + scrollWidthOffset) : viewportWidth / (scrollbarWidth + scrollWidthOffset);
+  const verticalDeltaMultiplier = extendedSceneHeight > sceneHeight ? extendedSceneHeight * appState.zoom.value / (scrollbarHeight + scrollbarHeightOffset) : viewportHeight / (scrollbarHeight + scrollbarHeightOffset);
   return {
-    x: sum(allCoords, (coords) => coords.x) / allCoords.length,
-    y: sum(allCoords, (coords) => coords.y) / allCoords.length
+    horizontal: viewportMinX === sceneMinX && viewportMaxX === sceneMaxX ? null : {
+      x: Math.max(safeArea.left, SCROLLBAR_MARGIN) + SCROLLBAR_WIDTH + (viewportMinX - sceneMinX) / extendedSceneWidth * viewportWidth,
+      y: viewportHeight - SCROLLBAR_WIDTH - Math.max(SCROLLBAR_MARGIN, safeArea.bottom),
+      width: scrollbarWidth,
+      height: SCROLLBAR_WIDTH,
+      deltaMultiplier: horizontalDeltaMultiplier
+    },
+    vertical: viewportMinY === sceneMinY && viewportMaxY === sceneMaxY ? null : {
+      x: isRTL3 ? Math.max(safeArea.left, SCROLLBAR_MARGIN) : viewportWidth - SCROLLBAR_WIDTH - Math.max(safeArea.right, SCROLLBAR_MARGIN),
+      y: Math.max(safeArea.top, SCROLLBAR_MARGIN) + SCROLLBAR_WIDTH + (viewportMinY - sceneMinY) / extendedSceneHeight * viewportHeight,
+      width: SCROLLBAR_WIDTH,
+      height: scrollbarHeight,
+      deltaMultiplier: verticalDeltaMultiplier
+    }
   };
 };
-var getDistance = ([a, b]) => Math.hypot(a.x - b.x, a.y - b.y);
-var sum = (array, mapper) => array.reduce((acc, item) => acc + mapper(item), 0);
+var isOverScrollBars = (scrollBars, x, y) => {
+  const [isOverHorizontal, isOverVertical] = [
+    scrollBars.horizontal,
+    scrollBars.vertical
+  ].map((scrollBar) => {
+    return scrollBar != null && scrollBar.x <= x && x <= scrollBar.x + scrollBar.width && scrollBar.y <= y && y <= scrollBar.y + scrollBar.height;
+  });
+  const isOverEither = isOverHorizontal || isOverVertical;
+  return { isOverEither, isOverHorizontal, isOverVertical };
+};
 
 // snapping.ts
 import {
@@ -15091,9 +15687,9 @@ import {
 } from "@excalidraw/math";
 import { TOOL_TYPE, KEYS as KEYS34 } from "@excalidraw/common";
 import {
-  getCommonBounds as getCommonBounds4,
+  getCommonBounds as getCommonBounds5,
   getDraggedElementsBounds,
-  getElementAbsoluteCoords as getElementAbsoluteCoords4
+  getElementAbsoluteCoords as getElementAbsoluteCoords5
 } from "@excalidraw/element";
 import { isBoundToContainer as isBoundToContainer6 } from "@excalidraw/element";
 import { getMaximumGroups } from "@excalidraw/element";
@@ -15156,7 +15752,7 @@ var getElementsCorners = (elements, elementsMap, {
   let result = [];
   if (elements.length === 1) {
     const element = elements[0];
-    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords4(
+    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords5(
       element,
       elementsMap
     );
@@ -15249,7 +15845,7 @@ var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
   const referenceBounds = getMaximumGroups(referenceElements, elementsMap).filter(
     (elementsGroup) => !(elementsGroup.length === 1 && isBoundToContainer6(elementsGroup[0]))
   ).map(
-    (group) => getCommonBounds4(group).map(
+    (group) => getCommonBounds5(group).map(
       (bound) => round(bound)
     )
   );
@@ -15845,7 +16441,7 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
       snapLines: []
     };
   }
-  let [minX, minY, maxX, maxY] = getCommonBounds4(selectedOriginalElements);
+  let [minX, minY, maxX, maxY] = getCommonBounds5(selectedOriginalElements);
   if (transformHandle) {
     if (transformHandle.includes("e")) {
       maxX += dragOffset.x;
@@ -15919,7 +16515,7 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
   minOffset.y = 0;
   nearestSnapsX.length = 0;
   nearestSnapsY.length = 0;
-  const [x1, y1, x2, y2] = getCommonBounds4(selectedElements).map(
+  const [x1, y1, x2, y2] = getCommonBounds5(selectedElements).map(
     (bound) => round(bound)
   );
   const corners = [
@@ -16057,472 +16653,6 @@ var isActiveToolNonLinearSnappable = (activeToolType) => {
   return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image || activeToolType === TOOL_TYPE.text;
 };
 
-// scene/Renderer.ts
-import {
-  getCommonFrameId,
-  getFrameChildrenInsertionIndex,
-  isElementInViewport as isElementInViewport2
-} from "@excalidraw/element";
-import { arrayToMap as arrayToMap24, memoize, toBrandedType } from "@excalidraw/common";
-var Renderer = class {
-  constructor(scene) {
-    __publicField(this, "scene");
-    __publicField(this, "_getRenderableElements", memoize(
-      ({
-        canvasNonce,
-        zoom,
-        offsetLeft,
-        offsetTop,
-        scrollX,
-        scrollY,
-        height,
-        width,
-        editingTextElement,
-        newElement: newElement7
-      }) => {
-        const elements = this.scene.getNonDeletedElements();
-        const { elementsMap, newElementCanvasElement } = this.getRenderableElementsMap({
-          elements,
-          editingTextElement,
-          newElement: newElement7
-        });
-        const visibleElements = this.getVisibleCanvasElements({
-          elementsMap,
-          zoom,
-          offsetLeft,
-          offsetTop,
-          scrollX,
-          scrollY,
-          height,
-          width
-        });
-        return {
-          elementsMap,
-          visibleElements,
-          newElementCanvasElement,
-          canvasNonce
-        };
-      }
-    ));
-    __publicField(this, "getRenderableElements", (opts) => {
-      const { newElement: newElement7 } = opts;
-      const canvasNonce = `${this.scene.getSceneNonce()}${newElement7?.frameId ? `:${newElement7.versionNonce}` : ""}`;
-      const ret = this._getRenderableElements({
-        canvasNonce,
-        // don't spread `opts` because we don't want to memoize on some props
-        zoom: opts.zoom,
-        offsetLeft: opts.offsetLeft,
-        offsetTop: opts.offsetTop,
-        scrollX: opts.scrollX,
-        scrollY: opts.scrollY,
-        height: opts.height,
-        width: opts.width,
-        editingTextElement: opts.editingTextElement,
-        newElement: opts.newElement
-      });
-      if (opts.frameToHighlight && opts.selectedElementsAreBeingDragged && // if all dragged elements are already in the frame, don't reorder
-      getCommonFrameId(opts.selectedElements) !== opts.frameToHighlight.id) {
-        const reorderedVisibleElements = this.sortSelectedElementsIntoHighlightedFrame({
-          visibleElements: ret.visibleElements,
-          selectedElements: opts.selectedElements,
-          frameToHighlight: opts.frameToHighlight
-        });
-        return {
-          ...ret,
-          visibleElements: reorderedVisibleElements
-        };
-      }
-      return ret;
-    });
-    this.scene = scene;
-  }
-  getVisibleCanvasElements({
-    elementsMap,
-    zoom,
-    offsetLeft,
-    offsetTop,
-    scrollX,
-    scrollY,
-    height,
-    width
-  }) {
-    const visibleElements = [];
-    for (const element of elementsMap.values()) {
-      if (isElementInViewport2(
-        element,
-        width,
-        height,
-        {
-          zoom,
-          offsetLeft,
-          offsetTop,
-          scrollX,
-          scrollY
-        },
-        elementsMap
-      )) {
-        visibleElements.push(element);
-      }
-    }
-    return visibleElements;
-  }
-  getRenderableElementsMap({
-    elements,
-    editingTextElement,
-    newElement: newElement7
-  }) {
-    const elementsMap = toBrandedType(/* @__PURE__ */ new Map());
-    const newElementCanvasElement = newElement7?.frameId ? null : newElement7;
-    for (const element of elements) {
-      if (newElementCanvasElement?.id === element.id) {
-        continue;
-      }
-      if (!editingTextElement || editingTextElement.type !== "text" || element.id !== editingTextElement.id) {
-        elementsMap.set(element.id, element);
-      }
-    }
-    return { elementsMap, newElementCanvasElement };
-  }
-  sortSelectedElementsIntoHighlightedFrame({
-    visibleElements,
-    selectedElements,
-    frameToHighlight
-  }) {
-    if (!selectedElements.length) {
-      return visibleElements;
-    }
-    const selectedElementsMap = arrayToMap24(selectedElements);
-    const deselectedElements = visibleElements.filter(
-      (element) => !selectedElementsMap.has(element.id)
-    );
-    const insertionIndex = getFrameChildrenInsertionIndex(
-      deselectedElements,
-      frameToHighlight.id
-    );
-    if (insertionIndex === null) {
-      return visibleElements;
-    }
-    return [
-      ...deselectedElements.slice(0, insertionIndex),
-      ...selectedElements,
-      ...deselectedElements.slice(insertionIndex)
-    ];
-  }
-  // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
-  // safe to break TS contract here (for upstream cases)
-  destroy() {
-    renderStaticSceneThrottled.cancel();
-    this._getRenderableElements.clear();
-  }
-};
-
-// components/ElementCanvasButtons.tsx
-import { sceneCoordsToViewportCoords as sceneCoordsToViewportCoords2 } from "@excalidraw/common";
-import { getElementAbsoluteCoords as getElementAbsoluteCoords5 } from "@excalidraw/element";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var CONTAINER_PADDING = 5;
-var getContainerCoords2 = (element, appState, elementsMap) => {
-  const [x1, y1] = getElementAbsoluteCoords5(element, elementsMap);
-  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords2(
-    { sceneX: x1 + element.width, sceneY: y1 },
-    appState
-  );
-  const x = viewportX - appState.offsetLeft + 10;
-  const y = viewportY - appState.offsetTop;
-  return { x, y };
-};
-var ElementCanvasButtons = ({
-  children,
-  element,
-  elementsMap
-}) => {
-  const appState = useExcalidrawAppState();
-  if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
-    return null;
-  }
-  const { x, y } = getContainerCoords2(element, appState, elementsMap);
-  return /* @__PURE__ */ jsx57(
-    "div",
-    {
-      className: "excalidraw-canvas-buttons",
-      style: {
-        top: `${y}px`,
-        left: `${x}px`,
-        // width: CONTAINER_WIDTH,
-        padding: CONTAINER_PADDING
-      },
-      children
-    }
-  );
-};
-
-// laser-trails.ts
-import { DEFAULT_LASER_COLOR, easeOut } from "@excalidraw/common";
-
-// animated-trail.ts
-import { LaserPointer } from "@excalidraw/laser-pointer";
-import {
-  SVG_NS,
-  getSvgPathFromStroke as getSvgPathFromStroke2,
-  sceneCoordsToViewportCoords as sceneCoordsToViewportCoords3
-} from "@excalidraw/common";
-var AnimatedTrail = class {
-  constructor(animationFrameHandler, app, options) {
-    this.animationFrameHandler = animationFrameHandler;
-    this.app = app;
-    this.options = options;
-    __publicField(this, "currentTrail");
-    __publicField(this, "pastTrails", []);
-    __publicField(this, "container");
-    __publicField(this, "trailElement");
-    __publicField(this, "trailAnimation");
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
-    this.trailElement = document.createElementNS(SVG_NS, "path");
-    if (this.options.animateTrail) {
-      this.trailAnimation = document.createElementNS(SVG_NS, "animate");
-      this.trailAnimation.setAttribute("attributeName", "stroke-dashoffset");
-      this.trailElement.setAttribute("stroke-dasharray", "7 7");
-      this.trailElement.setAttribute("stroke-dashoffset", "10");
-      this.trailAnimation.setAttribute("from", "0");
-      this.trailAnimation.setAttribute("to", `-14`);
-      this.trailAnimation.setAttribute("dur", "0.3s");
-      this.trailElement.appendChild(this.trailAnimation);
-    }
-  }
-  get hasCurrentTrail() {
-    return !!this.currentTrail;
-  }
-  hasLastPoint(x, y) {
-    if (this.currentTrail) {
-      const len = this.currentTrail.originalPoints.length;
-      return this.currentTrail.originalPoints[len - 1][0] === x && this.currentTrail.originalPoints[len - 1][1] === y;
-    }
-    return false;
-  }
-  start(container) {
-    if (container) {
-      this.container = container;
-    }
-    if (this.trailElement.parentNode !== this.container && this.container) {
-      this.container.appendChild(this.trailElement);
-    }
-    this.animationFrameHandler.start(this);
-  }
-  stop() {
-    this.animationFrameHandler.stop(this);
-    if (this.trailElement.parentNode === this.container) {
-      this.container?.removeChild(this.trailElement);
-    }
-  }
-  startPath(x, y) {
-    this.currentTrail = new LaserPointer(this.options);
-    this.currentTrail.addPoint([x, y, performance.now()]);
-    this.update();
-  }
-  addPointToPath(x, y) {
-    if (this.currentTrail) {
-      this.currentTrail.addPoint([x, y, performance.now()]);
-      this.update();
-    }
-  }
-  endPath() {
-    if (this.currentTrail) {
-      this.currentTrail.close();
-      this.currentTrail.options.keepHead = false;
-      this.pastTrails.push(this.currentTrail);
-      this.currentTrail = void 0;
-      this.update();
-    }
-  }
-  getCurrentTrail() {
-    return this.currentTrail;
-  }
-  clearTrails() {
-    this.pastTrails = [];
-    this.currentTrail = void 0;
-    this.update();
-  }
-  update() {
-    this.start();
-    if (this.trailAnimation) {
-      this.trailAnimation.setAttribute("begin", "indefinite");
-      this.trailAnimation.setAttribute("repeatCount", "indefinite");
-    }
-  }
-  onFrame() {
-    const paths = [];
-    for (const trail of this.pastTrails) {
-      paths.push(this.drawTrail(trail, this.app.state));
-    }
-    if (this.currentTrail) {
-      const currentPath = this.drawTrail(this.currentTrail, this.app.state);
-      paths.push(currentPath);
-    }
-    this.pastTrails = this.pastTrails.filter((trail) => {
-      return trail.getStrokeOutline().length !== 0;
-    });
-    if (paths.length === 0) {
-      this.stop();
-    }
-    const svgPaths = paths.join(" ").trim();
-    this.trailElement.setAttribute("d", svgPaths);
-    if (this.trailAnimation) {
-      this.trailElement.setAttribute(
-        "fill",
-        (this.options.fill ?? (() => "black"))(this)
-      );
-      this.trailElement.setAttribute(
-        "stroke",
-        (this.options.stroke ?? (() => "black"))(this)
-      );
-    } else {
-      this.trailElement.setAttribute(
-        "fill",
-        (this.options.fill ?? (() => "black"))(this)
-      );
-    }
-  }
-  drawTrail(trail, state) {
-    const _stroke = trail.getStrokeOutline(trail.options.size / state.zoom.value).map(([x, y]) => {
-      const result = sceneCoordsToViewportCoords3(
-        { sceneX: x, sceneY: y },
-        state
-      );
-      return [result.x, result.y];
-    });
-    const stroke = this.trailAnimation ? _stroke.slice(0, _stroke.length / 2) : _stroke;
-    return getSvgPathFromStroke2(stroke, true);
-  }
-};
-
-// laser-trails.ts
-var LaserTrails = class {
-  constructor(animationFrameHandler, app) {
-    this.animationFrameHandler = animationFrameHandler;
-    this.app = app;
-    __publicField(this, "localTrail");
-    __publicField(this, "collabTrails", /* @__PURE__ */ new Map());
-    __publicField(this, "container");
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
-    this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
-      ...this.getTrailOptions(),
-      fill: () => DEFAULT_LASER_COLOR
-    });
-  }
-  getTrailOptions() {
-    return {
-      simplify: 0,
-      streamline: 0.4,
-      sizeMapping: (c) => {
-        const DECAY_TIME = 1e3;
-        const DECAY_LENGTH = 50;
-        const t2 = Math.max(
-          0,
-          1 - (performance.now() - c.pressure) / DECAY_TIME
-        );
-        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut(l), easeOut(t2));
-      }
-    };
-  }
-  startPath(x, y) {
-    this.localTrail.startPath(x, y);
-  }
-  addPointToPath(x, y) {
-    this.localTrail.addPointToPath(x, y);
-  }
-  endPath() {
-    this.localTrail.endPath();
-  }
-  start(container) {
-    this.container = container;
-    this.animationFrameHandler.start(this);
-    this.localTrail.start(container);
-  }
-  stop() {
-    this.animationFrameHandler.stop(this);
-    this.localTrail.stop();
-  }
-  onFrame() {
-    this.updateCollabTrails();
-  }
-  updateCollabTrails() {
-    if (!this.container || this.app.state.collaborators.size === 0) {
-      return;
-    }
-    for (const [key, collaborator] of this.app.state.collaborators.entries()) {
-      let trail;
-      if (!this.collabTrails.has(key)) {
-        trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
-          ...this.getTrailOptions(),
-          fill: () => collaborator.pointer?.laserColor || getClientColor(key, collaborator)
-        });
-        trail.start(this.container);
-        this.collabTrails.set(key, trail);
-      } else {
-        trail = this.collabTrails.get(key);
-      }
-      if (collaborator.pointer && collaborator.pointer.tool === "laser") {
-        if (collaborator.button === "down" && !trail.hasCurrentTrail) {
-          trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
-        }
-        if (collaborator.button === "down" && trail.hasCurrentTrail && !trail.hasLastPoint(collaborator.pointer.x, collaborator.pointer.y)) {
-          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
-        }
-        if (collaborator.button === "up" && trail.hasCurrentTrail) {
-          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
-          trail.endPath();
-        }
-      }
-    }
-    for (const key of this.collabTrails.keys()) {
-      if (!this.app.state.collaborators.has(key)) {
-        const trail = this.collabTrails.get(key);
-        trail.stop();
-        this.collabTrails.delete(key);
-      }
-    }
-  }
-};
-
-// reactUtils.ts
-import { version as ReactVersion } from "react";
-import { unstable_batchedUpdates } from "react-dom";
-import { throttleRAF } from "@excalidraw/common";
-var withBatchedUpdates = (func) => (event) => {
-  unstable_batchedUpdates(func, event);
-};
-var withBatchedUpdatesThrottled = (func) => {
-  return throttleRAF((event) => {
-    unstable_batchedUpdates(func, event);
-  });
-};
-var isRenderThrottlingEnabled = (() => {
-  let IS_REACT_18_AND_UP;
-  try {
-    const version = ReactVersion.split(".");
-    IS_REACT_18_AND_UP = Number(version[0]) > 17;
-  } catch {
-    IS_REACT_18_AND_UP = false;
-  }
-  let hasWarned = false;
-  return () => {
-    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {
-      if (!IS_REACT_18_AND_UP) {
-        if (!hasWarned) {
-          hasWarned = true;
-          console.warn(
-            "Excalidraw: render throttling is disabled on React versions < 18."
-          );
-        }
-        return false;
-      }
-      return true;
-    }
-    return false;
-  };
-})();
-
 // textAutoResizeHandle.ts
 import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common";
 import {
@@ -17298,75 +17428,6 @@ var textWysiwyg = ({
   return handleSubmit;
 };
 
-// scene/scrollbars.ts
-import { getGlobalCSSVariable } from "@excalidraw/common";
-import { getCommonBounds as getCommonBounds5 } from "@excalidraw/element";
-var SCROLLBAR_MARGIN = 4;
-var SCROLLBAR_WIDTH = 6;
-var SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
-var getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
-  if (!elements.size) {
-    return {
-      horizontal: null,
-      vertical: null
-    };
-  }
-  const [elementsMinX, elementsMinY, elementsMaxX, elementsMaxY] = getCommonBounds5(elements);
-  const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
-  const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
-  const safeArea = {
-    top: parseInt(getGlobalCSSVariable("sat")) || 0,
-    bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
-    left: parseInt(getGlobalCSSVariable("sal")) || 0,
-    right: parseInt(getGlobalCSSVariable("sar")) || 0
-  };
-  const isRTL3 = getLanguage().rtl;
-  const viewportMinX = -appState.scrollX + safeArea.left;
-  const viewportMinY = -appState.scrollY + safeArea.top;
-  const viewportMaxX = viewportMinX + viewportWidthWithZoom - safeArea.right;
-  const viewportMaxY = viewportMinY + viewportHeightWithZoom - safeArea.bottom;
-  const sceneMinX = Math.min(elementsMinX, viewportMinX);
-  const sceneMinY = Math.min(elementsMinY, viewportMinY);
-  const sceneMaxX = Math.max(elementsMaxX, viewportMaxX);
-  const sceneMaxY = Math.max(elementsMaxY, viewportMaxY);
-  const sceneWidth = elementsMaxX - elementsMinX;
-  const sceneHeight = elementsMaxY - elementsMinY;
-  const extendedSceneWidth = sceneMaxX - sceneMinX;
-  const extendedSceneHeight = sceneMaxY - sceneMinY;
-  const scrollWidthOffset = Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right) + SCROLLBAR_WIDTH * 2;
-  const scrollbarWidth = viewportWidth * (viewportWidthWithZoom / extendedSceneWidth) - scrollWidthOffset;
-  const scrollbarHeightOffset = Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom) + SCROLLBAR_WIDTH * 2;
-  const scrollbarHeight = viewportHeight * (viewportHeightWithZoom / extendedSceneHeight) - scrollbarHeightOffset;
-  const horizontalDeltaMultiplier = extendedSceneWidth > sceneWidth ? extendedSceneWidth * appState.zoom.value / (scrollbarWidth + scrollWidthOffset) : viewportWidth / (scrollbarWidth + scrollWidthOffset);
-  const verticalDeltaMultiplier = extendedSceneHeight > sceneHeight ? extendedSceneHeight * appState.zoom.value / (scrollbarHeight + scrollbarHeightOffset) : viewportHeight / (scrollbarHeight + scrollbarHeightOffset);
-  return {
-    horizontal: viewportMinX === sceneMinX && viewportMaxX === sceneMaxX ? null : {
-      x: Math.max(safeArea.left, SCROLLBAR_MARGIN) + SCROLLBAR_WIDTH + (viewportMinX - sceneMinX) / extendedSceneWidth * viewportWidth,
-      y: viewportHeight - SCROLLBAR_WIDTH - Math.max(SCROLLBAR_MARGIN, safeArea.bottom),
-      width: scrollbarWidth,
-      height: SCROLLBAR_WIDTH,
-      deltaMultiplier: horizontalDeltaMultiplier
-    },
-    vertical: viewportMinY === sceneMinY && viewportMaxY === sceneMaxY ? null : {
-      x: isRTL3 ? Math.max(safeArea.left, SCROLLBAR_MARGIN) : viewportWidth - SCROLLBAR_WIDTH - Math.max(safeArea.right, SCROLLBAR_MARGIN),
-      y: Math.max(safeArea.top, SCROLLBAR_MARGIN) + SCROLLBAR_WIDTH + (viewportMinY - sceneMinY) / extendedSceneHeight * viewportHeight,
-      width: SCROLLBAR_WIDTH,
-      height: scrollbarHeight,
-      deltaMultiplier: verticalDeltaMultiplier
-    }
-  };
-};
-var isOverScrollBars = (scrollBars, x, y) => {
-  const [isOverHorizontal, isOverVertical] = [
-    scrollBars.horizontal,
-    scrollBars.vertical
-  ].map((scrollBar) => {
-    return scrollBar != null && scrollBar.x <= x && x <= scrollBar.x + scrollBar.width && scrollBar.y <= y && y <= scrollBar.y + scrollBar.height;
-  });
-  const isOverEither = isOverHorizontal || isOverVertical;
-  return { isOverEither, isOverHorizontal, isOverVertical };
-};
-
 // lasso/index.ts
 import {
   pointFrom as pointFrom21
@@ -17481,8 +17542,8 @@ var intersectionTest = (lassoPath, element, elementsMap) => {
 
 // lasso/index.ts
 var LassoTrail = class extends AnimatedTrail {
-  constructor(animationFrameHandler, app) {
-    super(animationFrameHandler, app, {
+  constructor(app) {
+    super(app, {
       animateTrail: true,
       streamline: 0.4,
       sizeMapping: (c) => {
@@ -17688,8 +17749,8 @@ import { shouldTestInside as shouldTestInside2 } from "@excalidraw/element";
 import { hasBoundTextElement as hasBoundTextElement4, isBoundToContainer as isBoundToContainer8 } from "@excalidraw/element";
 import { getBoundTextElementId as getBoundTextElementId2 } from "@excalidraw/element";
 var EraserTrail = class extends AnimatedTrail {
-  constructor(animationFrameHandler, app) {
-    super(animationFrameHandler, app, {
+  constructor(app) {
+    super(app, {
       streamline: 0.2,
       size: 5,
       keepHead: true,
@@ -19525,6 +19586,122 @@ var getConvertibleType = (element) => {
 };
 var ConvertElementTypePopup_default = ConvertElementTypePopup;
 
+// components/AppStateObserver.ts
+var AppStateObserver = class {
+  constructor(getState) {
+    this.getState = getState;
+    __publicField(this, "listeners", []);
+    __publicField(this, "onStateChange", (propOrOpts, callback, opts) => {
+      const {
+        predicate,
+        getValue,
+        callback: stateChangeCallback,
+        once,
+        matchesImmediately
+      } = this.normalize(propOrOpts, callback, opts);
+      if (stateChangeCallback) {
+        if (matchesImmediately) {
+          queueMicrotask(() => {
+            const state = this.getState();
+            stateChangeCallback(getValue(state), state);
+          });
+          if (once) {
+            return () => {
+            };
+          }
+        }
+        return this.subscribe({
+          predicate,
+          getValue,
+          callback: stateChangeCallback,
+          once
+        });
+      }
+      if (matchesImmediately) {
+        return Promise.resolve(getValue(this.getState()));
+      }
+      return new Promise((resolve) => {
+        this.subscribe({
+          predicate,
+          getValue,
+          callback: (value) => resolve(value),
+          once: true
+        });
+      });
+    });
+  }
+  isStateChangePredicateOptions(propOrOpts) {
+    return typeof propOrOpts === "object" && !Array.isArray(propOrOpts) && "predicate" in propOrOpts;
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(
+        (existingListener) => existingListener !== listener
+      );
+    };
+  }
+  normalize(propOrOpts, callback, opts) {
+    let predicate;
+    let getValue;
+    let normalizedCallback = callback;
+    let once = opts?.once ?? false;
+    let matchesImmediately = false;
+    if (this.isStateChangePredicateOptions(propOrOpts)) {
+      const {
+        predicate: predicateFn,
+        callback: callbackFromOpts,
+        once: onceFromOpts
+      } = propOrOpts;
+      predicate = predicateFn;
+      getValue = (appState) => appState;
+      normalizedCallback = callbackFromOpts ? (_value, appState) => callbackFromOpts(appState) : void 0;
+      once = onceFromOpts ?? false;
+      matchesImmediately = predicateFn(this.getState());
+    } else if (typeof propOrOpts === "function") {
+      const selector = propOrOpts;
+      predicate = (appState, prevState) => selector(appState) !== selector(prevState);
+      getValue = (appState) => selector(appState);
+    } else if (Array.isArray(propOrOpts)) {
+      const keys = propOrOpts;
+      predicate = (appState, prevState) => keys.some((key) => appState[key] !== prevState[key]);
+      getValue = (appState) => appState;
+    } else {
+      const key = propOrOpts;
+      predicate = (appState, prevState) => appState[key] !== prevState[key];
+      getValue = (appState) => appState[key];
+    }
+    return {
+      predicate,
+      getValue,
+      callback: normalizedCallback,
+      once,
+      matchesImmediately
+    };
+  }
+  flush(prevState) {
+    if (!this.listeners.length) {
+      return;
+    }
+    const state = this.getState();
+    const listenersToKeep = [];
+    for (const listener of this.listeners) {
+      if (listener.predicate(state, prevState)) {
+        listener.callback(listener.getValue(state), state);
+        if (!listener.once) {
+          listenersToKeep.push(listener);
+        }
+      } else {
+        listenersToKeep.push(listener);
+      }
+    }
+    this.listeners = listenersToKeep;
+  }
+  clear() {
+    this.listeners = [];
+  }
+};
+
 // components/Trans.tsx
 import React17 from "react";
 var SPLIT_REGEX = /({{[\w-]+}})|(<[\w-]+>)|(<\/[\w-]+>)/g;
@@ -30943,67 +31120,6 @@ var renderInteractiveScene = (renderConfig) => {
   return ret;
 };
 
-// renderer/animation.ts
-var _AnimationController = class _AnimationController {
-  static start(key, animation) {
-    const initialState = animation({
-      deltaTime: 0,
-      state: void 0
-    });
-    if (initialState) {
-      _AnimationController.animations.set(key, {
-        animation,
-        lastTime: 0,
-        state: initialState
-      });
-      if (!_AnimationController.isRunning) {
-        _AnimationController.isRunning = true;
-        if (isRenderThrottlingEnabled()) {
-          requestAnimationFrame(_AnimationController.tick);
-        } else {
-          setTimeout(_AnimationController.tick, 0);
-        }
-      }
-    }
-  }
-  static tick() {
-    if (_AnimationController.animations.size > 0) {
-      for (const [key, animation] of _AnimationController.animations) {
-        const now = performance.now();
-        const deltaTime = animation.lastTime === 0 ? 0 : now - animation.lastTime;
-        const state = animation.animation({
-          deltaTime,
-          state: animation.state
-        });
-        if (!state) {
-          _AnimationController.animations.delete(key);
-          if (_AnimationController.animations.size === 0) {
-            _AnimationController.isRunning = false;
-            return;
-          }
-        } else {
-          animation.lastTime = now;
-          animation.state = state;
-        }
-      }
-      if (isRenderThrottlingEnabled()) {
-        requestAnimationFrame(_AnimationController.tick);
-      } else {
-        setTimeout(_AnimationController.tick, 0);
-      }
-    }
-  }
-  static running(key) {
-    return _AnimationController.animations.has(key);
-  }
-  static cancel(key) {
-    _AnimationController.animations.delete(key);
-  }
-};
-__publicField(_AnimationController, "isRunning", false);
-__publicField(_AnimationController, "animations", /* @__PURE__ */ new Map());
-var AnimationController = _AnimationController;
-
 // components/canvases/InteractiveCanvas.tsx
 import { jsx as jsx133 } from "react/jsx-runtime";
 var INTERACTIVE_SCENE_ANIMATION_KEY = "animateInteractiveScene";
@@ -31384,122 +31500,6 @@ var NewElementCanvas = (props) => {
 };
 var NewElementCanvas_default = NewElementCanvas;
 
-// components/AppStateObserver.ts
-var AppStateObserver = class {
-  constructor(getState) {
-    this.getState = getState;
-    __publicField(this, "listeners", []);
-    __publicField(this, "onStateChange", (propOrOpts, callback, opts) => {
-      const {
-        predicate,
-        getValue,
-        callback: stateChangeCallback,
-        once,
-        matchesImmediately
-      } = this.normalize(propOrOpts, callback, opts);
-      if (stateChangeCallback) {
-        if (matchesImmediately) {
-          queueMicrotask(() => {
-            const state = this.getState();
-            stateChangeCallback(getValue(state), state);
-          });
-          if (once) {
-            return () => {
-            };
-          }
-        }
-        return this.subscribe({
-          predicate,
-          getValue,
-          callback: stateChangeCallback,
-          once
-        });
-      }
-      if (matchesImmediately) {
-        return Promise.resolve(getValue(this.getState()));
-      }
-      return new Promise((resolve) => {
-        this.subscribe({
-          predicate,
-          getValue,
-          callback: (value) => resolve(value),
-          once: true
-        });
-      });
-    });
-  }
-  isStateChangePredicateOptions(propOrOpts) {
-    return typeof propOrOpts === "object" && !Array.isArray(propOrOpts) && "predicate" in propOrOpts;
-  }
-  subscribe(listener) {
-    this.listeners.push(listener);
-    return () => {
-      this.listeners = this.listeners.filter(
-        (existingListener) => existingListener !== listener
-      );
-    };
-  }
-  normalize(propOrOpts, callback, opts) {
-    let predicate;
-    let getValue;
-    let normalizedCallback = callback;
-    let once = opts?.once ?? false;
-    let matchesImmediately = false;
-    if (this.isStateChangePredicateOptions(propOrOpts)) {
-      const {
-        predicate: predicateFn,
-        callback: callbackFromOpts,
-        once: onceFromOpts
-      } = propOrOpts;
-      predicate = predicateFn;
-      getValue = (appState) => appState;
-      normalizedCallback = callbackFromOpts ? (_value, appState) => callbackFromOpts(appState) : void 0;
-      once = onceFromOpts ?? false;
-      matchesImmediately = predicateFn(this.getState());
-    } else if (typeof propOrOpts === "function") {
-      const selector = propOrOpts;
-      predicate = (appState, prevState) => selector(appState) !== selector(prevState);
-      getValue = (appState) => selector(appState);
-    } else if (Array.isArray(propOrOpts)) {
-      const keys = propOrOpts;
-      predicate = (appState, prevState) => keys.some((key) => appState[key] !== prevState[key]);
-      getValue = (appState) => appState;
-    } else {
-      const key = propOrOpts;
-      predicate = (appState, prevState) => appState[key] !== prevState[key];
-      getValue = (appState) => appState[key];
-    }
-    return {
-      predicate,
-      getValue,
-      callback: normalizedCallback,
-      once,
-      matchesImmediately
-    };
-  }
-  flush(prevState) {
-    if (!this.listeners.length) {
-      return;
-    }
-    const state = this.getState();
-    const listenersToKeep = [];
-    for (const listener of this.listeners) {
-      if (listener.predicate(state, prevState)) {
-        listener.callback(listener.getValue(state), state);
-        if (!listener.once) {
-          listenersToKeep.push(listener);
-        }
-      } else {
-        listenersToKeep.push(listener);
-      }
-    }
-    this.listeners = listenersToKeep;
-  }
-  clear() {
-    this.listeners = [];
-  }
-};
-
 // components/UnlockPopup.tsx
 import {
   getCommonBounds as getCommonBounds10,
@@ -31698,10 +31698,9 @@ var App = class _App extends React40.Component {
     /** previous frame pointer coords */
     __publicField(this, "previousPointerMoveCoords", null);
     __publicField(this, "lastViewportPosition", { x: 0, y: 0 });
-    __publicField(this, "animationFrameHandler", new AnimationFrameHandler());
-    __publicField(this, "laserTrails", new LaserTrails(this.animationFrameHandler, this));
-    __publicField(this, "eraserTrail", new EraserTrail(this.animationFrameHandler, this));
-    __publicField(this, "lassoTrail", new LassoTrail(this.animationFrameHandler, this));
+    __publicField(this, "laserTrails", new LaserTrails(this));
+    __publicField(this, "eraserTrail", new EraserTrail(this));
+    __publicField(this, "lassoTrail", new LassoTrail(this));
     __publicField(this, "onChangeEmitter", new Emitter2());
     __publicField(this, "onPointerDownEmitter", new Emitter2());
     __publicField(this, "onPointerUpEmitter", new Emitter2());
@@ -31710,8 +31709,8 @@ var App = class _App extends React40.Component {
     __publicField(this, "missingPointerEventCleanupEmitter", new Emitter2());
     __publicField(this, "onRemoveEventListenersEmitter", new Emitter2());
     __publicField(this, "api");
-    __publicField(this, "addImageElementsToScene", async (imageFiles, sceneX, sceneY) => {
-      await this.insertImages(imageFiles, sceneX, sceneY);
+    __publicField(this, "addImageElementsToScene", async (imageFiles, sceneX, sceneY, options) => {
+      await this.insertImages(imageFiles, sceneX, sceneY, options);
     });
     __publicField(this, "updateEditorAtom", (atom2, ...args) => {
       const result = editorJotaiStore.set(atom2, ...args);
@@ -32902,6 +32901,7 @@ var App = class _App extends React40.Component {
           this.scene.replaceAllElements(elements);
         }
         if (collaborators) {
+          this.laserTrails.updateCollabTrails(collaborators);
           this.setState({ collaborators });
         }
       }
@@ -36022,9 +36022,10 @@ var App = class _App extends React40.Component {
           throw new Error(t("errors.svgImageInsertError"));
         }
       } else if (fileNeedsResizing) {
+        const { maxWidthOrHeight } = this.props.imageOptions;
         try {
           imageFile = await this.props.compressImageFile(imageFile, {
-            maxWidthOrHeight: DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT
+            maxWidthOrHeight
           });
           console.info("Excalidraw: image resized");
         } catch (error) {
@@ -36034,10 +36035,11 @@ var App = class _App extends React40.Component {
           );
         }
       }
-      if (imageFile.size > MAX_ALLOWED_FILE_BYTES) {
+      const { maxFileSizeBytes } = this.props.imageOptions;
+      if (imageFile.size > maxFileSizeBytes) {
         throw new Error(
           t("errors.fileTooBig", {
-            maxSize: `${Math.trunc(MAX_ALLOWED_FILE_BYTES / 1024 / 1024)}MB`
+            maxSize: `${Math.trunc(maxFileSizeBytes / 1024 / 1024)}MB`
           })
         );
       }
@@ -36236,7 +36238,8 @@ var App = class _App extends React40.Component {
         );
       }
     });
-    __publicField(this, "insertImages", async (imageFiles, sceneX, sceneY) => {
+    __publicField(this, "insertImages", async (imageFiles, sceneX, sceneY, options) => {
+      const waitFor = options?.waitFor ?? "inserted";
       const gridPadding = 50 / this.state.zoom.value;
       const placeholders = positionElementsOnGrid(
         imageFiles.map(() => this.newImagePlaceholder({ sceneX, sceneY })),
@@ -36279,8 +36282,17 @@ var App = class _App extends React40.Component {
         elements: nextElements,
         captureUpdate: CaptureUpdateAction41.IMMEDIATELY
       });
-      this.setState({}, () => {
-        this.actionManager.executeAction(actionFinalize);
+      await new Promise((resolve) => {
+        this.setState({}, () => {
+          this.actionManager.executeAction(actionFinalize);
+          if (waitFor === "painted") {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => resolve());
+            });
+            return;
+          }
+          resolve();
+        });
       });
     });
     __publicField(this, "handleAppOnDrop", async (event) => {
@@ -36349,12 +36361,7 @@ var App = class _App extends React40.Component {
         const elements = this.scene.getElementsIncludingDeleted();
         let ret;
         try {
-          ret = await loadFromBlob(
-            file2,
-            this.state,
-            elements,
-            fileHandle
-          );
+          ret = await loadFromBlob(file2, this.state, elements, fileHandle);
         } catch (error) {
           const imageSceneDataError = error instanceof ImageSceneDataError;
           if (imageSceneDataError && error.code === "IMAGE_NOT_CONTAINS_SCENE_DATA" && !this.isToolSupported("image")) {
@@ -41206,7 +41213,8 @@ var ExcalidrawBase = (props) => {
     wheelZoomsOnDefault,
     strokeColorTopPicks,
     backgroundColorTopPicks,
-    renderScrollbars
+    renderScrollbars,
+    imageOptions
   } = props;
   const canvasActions = props.UIOptions?.canvasActions;
   const UIOptions = {
@@ -41225,6 +41233,10 @@ var ExcalidrawBase = (props) => {
   if (UIOptions.canvasActions.toggleTheme === null && typeof theme === "undefined") {
     UIOptions.canvasActions.toggleTheme = true;
   }
+  const normalizedImageOptions = {
+    maxFileSizeBytes: imageOptions?.maxFileSizeBytes ?? DEFAULT_IMAGE_OPTIONS.maxFileSizeBytes,
+    maxWidthOrHeight: imageOptions?.maxWidthOrHeight ?? DEFAULT_IMAGE_OPTIONS.maxWidthOrHeight
+  };
   const setExcalidrawAPI = useContext4(ExcalidrawAPISetContext);
   const onExcalidrawAPIRef = useRef31(onExcalidrawAPI);
   onExcalidrawAPIRef.current = onExcalidrawAPI;
@@ -41296,6 +41308,7 @@ var ExcalidrawBase = (props) => {
       strokeColorTopPicks,
       backgroundColorTopPicks,
       renderScrollbars,
+      imageOptions: normalizedImageOptions,
       children
     }
   ) }) });
@@ -41307,11 +41320,13 @@ var areEqual5 = (prevProps, nextProps) => {
   const {
     initialData: prevInitialData,
     UIOptions: prevUIOptions = {},
+    imageOptions: prevImageOptions,
     ...prev
   } = prevProps;
   const {
     initialData: nextInitialData,
     UIOptions: nextUIOptions = {},
+    imageOptions: nextImageOptions,
     ...next
   } = nextProps;
   const prevUIOptionsKeys = Object.keys(prevUIOptions);
@@ -41336,7 +41351,8 @@ var areEqual5 = (prevProps, nextProps) => {
     }
     return prevUIOptions[key] === nextUIOptions[key];
   });
-  return isUIOptionsSame && isShallowEqual9(prev, next);
+  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);
+  return isUIOptionsSame && isImageOptionsSame && isShallowEqual9(prev, next);
 };
 var Excalidraw = React42.memo(ExcalidrawBase, areEqual5);
 Excalidraw.displayName = "Excalidraw";