@myoc/excalidraw 0.19.513 → 0.19.514

package/dist/dev/index.js

@@ -90,257 +90,257 @@ import {
 // 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,
-  pointDistance as pointDistance9,
   pointFrom as pointFrom34,
-  pointRotateRads as pointRotateRads23,
+  pointDistance as pointDistance9,
   vector as vector3,
-  vectorDot,
+  pointRotateRads as pointRotateRads23,
   vectorFromPoint as vectorFromPoint10,
-  vectorNormalize as vectorNormalize5,
-  vectorSubtract as vectorSubtract2
+  vectorSubtract as vectorSubtract2,
+  vectorDot,
+  vectorNormalize as vectorNormalize5
 } from "@excalidraw/math";
 import {
-  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,
+  CODES as CODES11,
+  shouldResizeFromCenter,
+  shouldMaintainAspectRatio,
+  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
+  isArrowKey as isArrowKey2,
+  KEYS as KEYS50,
+  APP_NAME,
   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_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,
-  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,
-  TOOL_TYPE as TOOL_TYPE3,
   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,
   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,
-  updateActiveTool as updateActiveTool8,
-  updateObject as updateObject2,
-  updateStable,
-  VERTICAL_ALIGN as VERTICAL_ALIGN5,
   viewportCoordsToSceneCoords as viewportCoordsToSceneCoords3,
   wrapEvent as wrapEvent2,
-  YOUTUBE_STATES,
-  ZOOM_STEP as ZOOM_STEP2
+  updateObject as updateObject2,
+  updateActiveTool as updateActiveTool8,
+  isTransparent as isTransparent6,
+  easeToValuesRAF,
+  muteFSAbortError,
+  isTestEnv as isTestEnv5,
+  isDevEnv as isDevEnv9,
+  easeOut as easeOut4,
+  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
 } from "@excalidraw/common";
 import {
-  updateImageCache as _updateImageCache,
-  addElementsToFrame as addElementsToFrame2,
-  bindOrUnbindBindingElement as bindOrUnbindBindingElement2,
-  bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
-  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,
+  getObservedAppState,
   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,
+  bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
+  fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
   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,
+  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,
+  deepCopyElement as deepCopyElement4,
+  duplicateElements as duplicateElements2,
   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,
-  isLineElement as isLineElement8,
+  isUsingAdaptiveRadius as isUsingAdaptiveRadius4,
+  isIframeElement as isIframeElement2,
+  isIframeLikeElement as isIframeLikeElement2,
   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,
-  isUsingAdaptiveRadius as isUsingAdaptiveRadius4,
-  isValidTextContainer,
-  makeNextSelectedElementIds as makeNextSelectedElementIds3,
-  maxBindingDistance_simple as maxBindingDistance_simple3,
-  maybeHandleArrowPointlikeDrag,
+  getNormalizedDimensions,
+  isElementCompletelyInViewport as isElementCompletelyInViewport2,
+  isElementInViewport as isElementInViewport3,
+  isInvisiblySmallElement as isInvisiblySmallElement3,
+  getCornerRadius as getCornerRadius2,
+  isPathALoop as isPathALoop3,
+  createSrcDoc,
+  embeddableURLValidator as embeddableURLValidator2,
   maybeParseEmbedSrc,
-  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,
+  getEmbedLink as getEmbedLink2,
+  getInitializedImageElements,
   normalizeSVG,
-  normalizeText as normalizeText2,
-  parseElementLinkFromURL,
-  positionElementsOnGrid,
+  updateImageCache as _updateImageCache,
+  getBoundTextElement as getBoundTextElement15,
+  getContainerCenter,
+  getContainerElement as getContainerElement5,
+  isValidTextContainer,
   redrawTextBoundingBox as redrawTextBoundingBox8,
-  refreshTextDimensions,
-  removeElementsFromFrame as removeElementsFromFrame2,
+  hasBoundingBox as hasBoundingBox2,
+  getCommonFrameId as getCommonFrameId2,
+  getFrameChildren as getFrameChildren6,
+  getFrameChildrenInsertionIndex as getFrameChildrenInsertionIndex2,
+  isCursorInFrame,
+  addElementsToFrame as addElementsToFrame2,
   replaceAllElementsInFrame as replaceAllElementsInFrame4,
-  Scene,
-  selectGroupsForSelectedElements as selectGroupsForSelectedElements7,
+  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,
-  Store,
-  StoreDelta as StoreDelta2,
+  getRenderOpacity,
+  editGroupForSelectedElement,
+  getElementsInGroup as getElementsInGroup10,
+  getSelectedGroupIdForElement,
+  getSelectedGroupIds as getSelectedGroupIds4,
+  isElementInGroup as isElementInGroup2,
+  isSelectedViaGroup as isSelectedViaGroup2,
+  selectGroupsForSelectedElements as selectGroupsForSelectedElements7,
   syncInvalidIndices,
   syncMovedIndices as syncMovedIndices5,
+  excludeElementsInFramesFromSelection,
+  getSelectionStateForElements as getSelectionStateForElements2,
+  makeNextSelectedElementIds as makeNextSelectedElementIds3,
+  getResizeOffsetXY,
+  getResizeArrowDirection,
   transformElements,
-  updateBoundElements as updateBoundElements4,
-  updateFrameMembershipOfSelectedElements as updateFrameMembershipOfSelectedElements6,
-  wrapText as wrapText5
+  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
 } from "@excalidraw/element";
 import { LinearElementEditor as LinearElementEditor11 } from "@excalidraw/element/linearElementEditor";
 import { findShapeByKey } from "@excalidraw/element/shapes";
@@ -15025,428 +15025,980 @@ var getCenter = (pointers) => {
 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 };
+// snapping.ts
+import {
+  pointFrom as pointFrom18,
+  pointRotateRads as pointRotateRads14,
+  rangeInclusive,
+  rangeIntersection,
+  rangesOverlap
+} from "@excalidraw/math";
+import { TOOL_TYPE, KEYS as KEYS34 } from "@excalidraw/common";
+import {
+  getCommonBounds as getCommonBounds4,
+  getDraggedElementsBounds,
+  getElementAbsoluteCoords as getElementAbsoluteCoords4
+} from "@excalidraw/element";
+import { isBoundToContainer as isBoundToContainer6 } from "@excalidraw/element";
+import { getMaximumGroups } from "@excalidraw/element";
+import {
+  getSelectedElements as getSelectedElements4,
+  getVisibleAndNonSelectedElements
+} from "@excalidraw/element";
+var SNAP_DISTANCE = 8;
+var VISIBLE_GAPS_LIMIT_PER_AXIS = 99999;
+var getSnapDistance = (zoomValue) => {
+  return SNAP_DISTANCE / zoomValue;
 };
-var ElementCanvasButtons = ({
-  children,
-  element,
-  elementsMap
+var _SnapCache = class _SnapCache {
+};
+__publicField(_SnapCache, "referenceSnapPoints", null);
+__publicField(_SnapCache, "visibleGaps", null);
+__publicField(_SnapCache, "setReferenceSnapPoints", (snapPoints) => {
+  _SnapCache.referenceSnapPoints = snapPoints;
+});
+__publicField(_SnapCache, "getReferenceSnapPoints", () => {
+  return _SnapCache.referenceSnapPoints;
+});
+__publicField(_SnapCache, "setVisibleGaps", (gaps) => {
+  _SnapCache.visibleGaps = gaps;
+});
+__publicField(_SnapCache, "getVisibleGaps", () => {
+  return _SnapCache.visibleGaps;
+});
+__publicField(_SnapCache, "destroy", () => {
+  _SnapCache.referenceSnapPoints = null;
+  _SnapCache.visibleGaps = null;
+});
+var SnapCache = _SnapCache;
+var isGridModeEnabled = (app) => app.props.gridModeEnabled ?? app.state.gridModeEnabled;
+var isSnappingEnabled = ({
+  event,
+  app,
+  selectedElements
 }) => {
-  const appState = useExcalidrawAppState();
-  if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
-    return null;
+  if (event) {
+    const isLassoDragging = app.state.activeTool.type === "lasso" && app.state.selectedElementsAreBeingDragged;
+    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS34.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS34.CTRL_OR_CMD] && !isGridModeEnabled(app));
   }
-  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
+  if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
+    return false;
+  }
+  return app.state.objectsSnapModeEnabled;
+};
+var areRoughlyEqual = (a, b, precision = 0.01) => {
+  return Math.abs(a - b) <= precision;
+};
+var getElementsCorners = (elements, elementsMap, {
+  omitCenter,
+  boundingBoxCorners,
+  dragOffset
+} = {
+  omitCenter: false,
+  boundingBoxCorners: false
+}) => {
+  let result = [];
+  if (elements.length === 1) {
+    const element = elements[0];
+    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords4(
+      element,
+      elementsMap
+    );
+    if (dragOffset) {
+      x1 += dragOffset.x;
+      x2 += dragOffset.x;
+      cx += dragOffset.x;
+      y1 += dragOffset.y;
+      y2 += dragOffset.y;
+      cy += dragOffset.y;
     }
+    const halfWidth = (x2 - x1) / 2;
+    const halfHeight = (y2 - y1) / 2;
+    if ((element.type === "diamond" || element.type === "ellipse") && !boundingBoxCorners) {
+      const leftMid = pointRotateRads14(
+        pointFrom18(x1, y1 + halfHeight),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const topMid = pointRotateRads14(
+        pointFrom18(x1 + halfWidth, y1),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const rightMid = pointRotateRads14(
+        pointFrom18(x2, y1 + halfHeight),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const bottomMid = pointRotateRads14(
+        pointFrom18(x1 + halfWidth, y2),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const center = pointFrom18(cx, cy);
+      result = omitCenter ? [leftMid, topMid, rightMid, bottomMid] : [leftMid, topMid, rightMid, bottomMid, center];
+    } else {
+      const topLeft = pointRotateRads14(
+        pointFrom18(x1, y1),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const topRight = pointRotateRads14(
+        pointFrom18(x2, y1),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const bottomLeft = pointRotateRads14(
+        pointFrom18(x1, y2),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const bottomRight = pointRotateRads14(
+        pointFrom18(x2, y2),
+        pointFrom18(cx, cy),
+        element.angle
+      );
+      const center = pointFrom18(cx, cy);
+      result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
+    }
+  } else if (elements.length > 1) {
+    const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
+      elements,
+      dragOffset ?? { x: 0, y: 0 }
+    );
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const topLeft = pointFrom18(minX, minY);
+    const topRight = pointFrom18(maxX, minY);
+    const bottomLeft = pointFrom18(minX, maxY);
+    const bottomRight = pointFrom18(maxX, maxY);
+    const center = pointFrom18(minX + width / 2, minY + height / 2);
+    result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
+  }
+  return result.map((p) => pointFrom18(round(p[0]), round(p[1])));
+};
+var getReferenceElements = (elements, selectedElements, appState, elementsMap) => getVisibleAndNonSelectedElements(
+  elements,
+  selectedElements,
+  appState,
+  elementsMap
+);
+var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
+  const referenceElements = getReferenceElements(
+    elements,
+    selectedElements,
+    appState,
+    elementsMap
+  );
+  const referenceBounds = getMaximumGroups(referenceElements, elementsMap).filter(
+    (elementsGroup) => !(elementsGroup.length === 1 && isBoundToContainer6(elementsGroup[0]))
+  ).map(
+    (group) => getCommonBounds4(group).map(
+      (bound) => round(bound)
+    )
   );
+  const horizontallySorted = referenceBounds.sort((a, b) => a[0] - b[0]);
+  const horizontalGaps = [];
+  let c = 0;
+  horizontal:
+    for (let i = 0; i < horizontallySorted.length; i++) {
+      const startBounds = horizontallySorted[i];
+      for (let j = i + 1; j < horizontallySorted.length; j++) {
+        if (++c > VISIBLE_GAPS_LIMIT_PER_AXIS) {
+          break horizontal;
+        }
+        const endBounds = horizontallySorted[j];
+        const [, startMinY, startMaxX, startMaxY] = startBounds;
+        const [endMinX, endMinY, , endMaxY] = endBounds;
+        if (startMaxX < endMinX && rangesOverlap(
+          rangeInclusive(startMinY, startMaxY),
+          rangeInclusive(endMinY, endMaxY)
+        )) {
+          horizontalGaps.push({
+            startBounds,
+            endBounds,
+            startSide: [
+              pointFrom18(startMaxX, startMinY),
+              pointFrom18(startMaxX, startMaxY)
+            ],
+            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMinX, endMaxY)],
+            length: endMinX - startMaxX,
+            overlap: rangeIntersection(
+              rangeInclusive(startMinY, startMaxY),
+              rangeInclusive(endMinY, endMaxY)
+            )
+          });
+        }
+      }
+    }
+  const verticallySorted = referenceBounds.sort((a, b) => a[1] - b[1]);
+  const verticalGaps = [];
+  c = 0;
+  vertical:
+    for (let i = 0; i < verticallySorted.length; i++) {
+      const startBounds = verticallySorted[i];
+      for (let j = i + 1; j < verticallySorted.length; j++) {
+        if (++c > VISIBLE_GAPS_LIMIT_PER_AXIS) {
+          break vertical;
+        }
+        const endBounds = verticallySorted[j];
+        const [startMinX, , startMaxX, startMaxY] = startBounds;
+        const [endMinX, endMinY, endMaxX] = endBounds;
+        if (startMaxY < endMinY && rangesOverlap(
+          rangeInclusive(startMinX, startMaxX),
+          rangeInclusive(endMinX, endMaxX)
+        )) {
+          verticalGaps.push({
+            startBounds,
+            endBounds,
+            startSide: [
+              pointFrom18(startMinX, startMaxY),
+              pointFrom18(startMaxX, startMaxY)
+            ],
+            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMaxX, endMinY)],
+            length: endMinY - startMaxY,
+            overlap: rangeIntersection(
+              rangeInclusive(startMinX, startMaxX),
+              rangeInclusive(endMinX, endMaxX)
+            )
+          });
+        }
+      }
+    }
+  return {
+    horizontalGaps,
+    verticalGaps
+  };
 };
-
-// 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 getGapSnaps = (selectedElements, dragOffset, app, event, nearestSnapsX, nearestSnapsY, minOffset) => {
+  if (!isSnappingEnabled({ app, event, selectedElements })) {
+    return [];
+  }
+  if (selectedElements.length === 0) {
+    return [];
+  }
+  const visibleGaps = SnapCache.getVisibleGaps();
+  if (visibleGaps) {
+    const { horizontalGaps, verticalGaps } = visibleGaps;
+    const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
+      selectedElements,
+      dragOffset
+    ).map((bound) => round(bound));
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    for (const gap of horizontalGaps) {
+      if (!rangesOverlap(rangeInclusive(minY, maxY), gap.overlap)) {
+        continue;
+      }
+      const gapMidX = gap.startSide[0][0] + gap.length / 2;
+      const centerOffset = round(gapMidX - centerX);
+      const gapIsLargerThanSelection = gap.length > maxX - minX;
+      if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.x) {
+        if (Math.abs(centerOffset) < minOffset.x) {
+          nearestSnapsX.length = 0;
+        }
+        minOffset.x = Math.abs(centerOffset);
+        const snap = {
+          type: "gap",
+          direction: "center_horizontal",
+          gap,
+          offset: centerOffset
+        };
+        nearestSnapsX.push(snap);
+        continue;
+      }
+      const [, , endMaxX] = gap.endBounds;
+      const distanceToEndElementX = minX - endMaxX;
+      const sideOffsetRight = round(gap.length - distanceToEndElementX);
+      if (Math.abs(sideOffsetRight) <= minOffset.x) {
+        if (Math.abs(sideOffsetRight) < minOffset.x) {
+          nearestSnapsX.length = 0;
+        }
+        minOffset.x = Math.abs(sideOffsetRight);
+        const snap = {
+          type: "gap",
+          direction: "side_right",
+          gap,
+          offset: sideOffsetRight
+        };
+        nearestSnapsX.push(snap);
+        continue;
+      }
+      const [startMinX, , ,] = gap.startBounds;
+      const distanceToStartElementX = startMinX - maxX;
+      const sideOffsetLeft = round(distanceToStartElementX - gap.length);
+      if (Math.abs(sideOffsetLeft) <= minOffset.x) {
+        if (Math.abs(sideOffsetLeft) < minOffset.x) {
+          nearestSnapsX.length = 0;
+        }
+        minOffset.x = Math.abs(sideOffsetLeft);
+        const snap = {
+          type: "gap",
+          direction: "side_left",
+          gap,
+          offset: sideOffsetLeft
+        };
+        nearestSnapsX.push(snap);
+        continue;
+      }
+    }
+    for (const gap of verticalGaps) {
+      if (!rangesOverlap(rangeInclusive(minX, maxX), gap.overlap)) {
+        continue;
+      }
+      const gapMidY = gap.startSide[0][1] + gap.length / 2;
+      const centerOffset = round(gapMidY - centerY);
+      const gapIsLargerThanSelection = gap.length > maxY - minY;
+      if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.y) {
+        if (Math.abs(centerOffset) < minOffset.y) {
+          nearestSnapsY.length = 0;
+        }
+        minOffset.y = Math.abs(centerOffset);
+        const snap = {
+          type: "gap",
+          direction: "center_vertical",
+          gap,
+          offset: centerOffset
+        };
+        nearestSnapsY.push(snap);
+        continue;
+      }
+      const [, startMinY, ,] = gap.startBounds;
+      const distanceToStartElementY = startMinY - maxY;
+      const sideOffsetTop = round(distanceToStartElementY - gap.length);
+      if (Math.abs(sideOffsetTop) <= minOffset.y) {
+        if (Math.abs(sideOffsetTop) < minOffset.y) {
+          nearestSnapsY.length = 0;
+        }
+        minOffset.y = Math.abs(sideOffsetTop);
+        const snap = {
+          type: "gap",
+          direction: "side_top",
+          gap,
+          offset: sideOffsetTop
+        };
+        nearestSnapsY.push(snap);
+        continue;
+      }
+      const [, , , endMaxY] = gap.endBounds;
+      const distanceToEndElementY = round(minY - endMaxY);
+      const sideOffsetBottom = gap.length - distanceToEndElementY;
+      if (Math.abs(sideOffsetBottom) <= minOffset.y) {
+        if (Math.abs(sideOffsetBottom) < minOffset.y) {
+          nearestSnapsY.length = 0;
+        }
+        minOffset.y = Math.abs(sideOffsetBottom);
+        const snap = {
+          type: "gap",
+          direction: "side_bottom",
+          gap,
+          offset: sideOffsetBottom
+        };
+        nearestSnapsY.push(snap);
+        continue;
+      }
+    }
+  }
 };
-var withBatchedUpdatesThrottled = (func) => {
-  return throttleRAF((event) => {
-    unstable_batchedUpdates(func, event);
+var getReferenceSnapPoints = (elements, selectedElements, appState, elementsMap) => {
+  const referenceElements = getReferenceElements(
+    elements,
+    selectedElements,
+    appState,
+    elementsMap
+  );
+  return getMaximumGroups(referenceElements, elementsMap).filter(
+    (elementsGroup) => !(elementsGroup.length === 1 && isBoundToContainer6(elementsGroup[0]))
+  ).flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
+};
+var getPointSnaps = (selectedElements, selectionSnapPoints, app, event, nearestSnapsX, nearestSnapsY, minOffset) => {
+  if (!isSnappingEnabled({ app, event, selectedElements }) || selectedElements.length === 0 && selectionSnapPoints.length === 0) {
+    return [];
+  }
+  const referenceSnapPoints = SnapCache.getReferenceSnapPoints();
+  if (referenceSnapPoints) {
+    for (const thisSnapPoint of selectionSnapPoints) {
+      for (const otherSnapPoint of referenceSnapPoints) {
+        const offsetX = otherSnapPoint[0] - thisSnapPoint[0];
+        const offsetY = otherSnapPoint[1] - thisSnapPoint[1];
+        if (Math.abs(offsetX) <= minOffset.x) {
+          if (Math.abs(offsetX) < minOffset.x) {
+            nearestSnapsX.length = 0;
+          }
+          nearestSnapsX.push({
+            type: "point",
+            points: [thisSnapPoint, otherSnapPoint],
+            offset: offsetX
+          });
+          minOffset.x = Math.abs(offsetX);
+        }
+        if (Math.abs(offsetY) <= minOffset.y) {
+          if (Math.abs(offsetY) < minOffset.y) {
+            nearestSnapsY.length = 0;
+          }
+          nearestSnapsY.push({
+            type: "point",
+            points: [thisSnapPoint, otherSnapPoint],
+            offset: offsetY
+          });
+          minOffset.y = Math.abs(offsetY);
+        }
+      }
+    }
+  }
+};
+var snapDraggedElements = (elements, dragOffset, app, event, elementsMap) => {
+  const appState = app.state;
+  const selectedElements = getSelectedElements4(elements, appState);
+  if (!isSnappingEnabled({ app, event, selectedElements }) || selectedElements.length === 0) {
+    return {
+      snapOffset: {
+        x: 0,
+        y: 0
+      },
+      snapLines: []
+    };
+  }
+  dragOffset.x = round(dragOffset.x);
+  dragOffset.y = round(dragOffset.y);
+  const nearestSnapsX = [];
+  const nearestSnapsY = [];
+  const snapDistance = getSnapDistance(appState.zoom.value);
+  const minOffset = {
+    x: snapDistance,
+    y: snapDistance
+  };
+  const selectionPoints = getElementsCorners(selectedElements, elementsMap, {
+    dragOffset
   });
+  getPointSnaps(
+    selectedElements,
+    selectionPoints,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  getGapSnaps(
+    selectedElements,
+    dragOffset,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  const snapOffset = {
+    x: nearestSnapsX[0]?.offset ?? 0,
+    y: nearestSnapsY[0]?.offset ?? 0
+  };
+  minOffset.x = 0;
+  minOffset.y = 0;
+  nearestSnapsX.length = 0;
+  nearestSnapsY.length = 0;
+  const newDragOffset = {
+    x: round(dragOffset.x + snapOffset.x),
+    y: round(dragOffset.y + snapOffset.y)
+  };
+  getPointSnaps(
+    selectedElements,
+    getElementsCorners(selectedElements, elementsMap, {
+      dragOffset: newDragOffset
+    }),
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  getGapSnaps(
+    selectedElements,
+    newDragOffset,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  const pointSnapLines = createPointSnapLines(nearestSnapsX, nearestSnapsY);
+  const gapSnapLines = createGapSnapLines(
+    selectedElements,
+    newDragOffset,
+    [...nearestSnapsX, ...nearestSnapsY].filter(
+      (snap) => snap.type === "gap"
+    )
+  );
+  return {
+    snapOffset,
+    snapLines: [...pointSnapLines, ...gapSnapLines]
+  };
 };
-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;
+var round = (x) => {
+  const decimalPlaces = 6;
+  return Math.round(x * 10 ** decimalPlaces) / 10 ** decimalPlaces;
+};
+var dedupePoints = (points) => {
+  const map = /* @__PURE__ */ new Map();
+  for (const point of points) {
+    const key = point.join(",");
+    if (!map.has(key)) {
+      map.set(key, point);
+    }
   }
-  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 Array.from(map.values());
+};
+var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
+  const snapsX = {};
+  const snapsY = {};
+  if (nearestSnapsX.length > 0) {
+    for (const snap of nearestSnapsX) {
+      if (snap.type === "point") {
+        const key = round(snap.points[0][0]);
+        if (!snapsX[key]) {
+          snapsX[key] = [];
+        }
+        snapsX[key].push(
+          ...snap.points.map(
+            (p) => pointFrom18(round(p[0]), round(p[1]))
+          )
+        );
+      }
+    }
+  }
+  if (nearestSnapsY.length > 0) {
+    for (const snap of nearestSnapsY) {
+      if (snap.type === "point") {
+        const key = round(snap.points[0][1]);
+        if (!snapsY[key]) {
+          snapsY[key] = [];
+        }
+        snapsY[key].push(
+          ...snap.points.map(
+            (p) => pointFrom18(round(p[0]), round(p[1]))
+          )
+        );
+      }
+    }
+  }
+  return Object.entries(snapsX).map(([key, points]) => {
+    return {
+      type: "points",
+      points: dedupePoints(
+        points.map((p) => {
+          return pointFrom18(Number(key), p[1]);
+        }).sort((a, b) => a[1] - b[1])
+      )
+    };
+  }).concat(
+    Object.entries(snapsY).map(([key, points]) => {
+      return {
+        type: "points",
+        points: dedupePoints(
+          points.map((p) => {
+            return pointFrom18(p[0], Number(key));
+          }).sort((a, b) => a[0] - b[0])
+        )
+      };
+    })
+  );
+};
+var dedupeGapSnapLines = (gapSnapLines) => {
+  const map = /* @__PURE__ */ new Map();
+  for (const gapSnapLine of gapSnapLines) {
+    const key = gapSnapLine.points.flat().map((point) => [round(point)]).join(",");
+    if (!map.has(key)) {
+      map.set(key, gapSnapLine);
+    }
+  }
+  return Array.from(map.values());
+};
+var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
+  const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
+    selectedElements,
+    dragOffset
+  );
+  const gapSnapLines = [];
+  for (const gapSnap of gapSnaps) {
+    const [startMinX, startMinY, startMaxX, startMaxY] = gapSnap.gap.startBounds;
+    const [endMinX, endMinY, endMaxX, endMaxY] = gapSnap.gap.endBounds;
+    const verticalIntersection = rangeIntersection(
+      rangeInclusive(minY, maxY),
+      gapSnap.gap.overlap
+    );
+    const horizontalGapIntersection = rangeIntersection(
+      rangeInclusive(minX, maxX),
+      gapSnap.gap.overlap
+    );
+    switch (gapSnap.direction) {
+      case "center_horizontal": {
+        if (verticalIntersection) {
+          const gapLineY = (verticalIntersection[0] + verticalIntersection[1]) / 2;
+          gapSnapLines.push(
+            {
+              type: "gap",
+              direction: "horizontal",
+              points: [
+                pointFrom18(gapSnap.gap.startSide[0][0], gapLineY),
+                pointFrom18(minX, gapLineY)
+              ]
+            },
+            {
+              type: "gap",
+              direction: "horizontal",
+              points: [
+                pointFrom18(maxX, gapLineY),
+                pointFrom18(gapSnap.gap.endSide[0][0], gapLineY)
+              ]
+            }
+          );
+        }
+        break;
+      }
+      case "center_vertical": {
+        if (horizontalGapIntersection) {
+          const gapLineX = (horizontalGapIntersection[0] + horizontalGapIntersection[1]) / 2;
+          gapSnapLines.push(
+            {
+              type: "gap",
+              direction: "vertical",
+              points: [
+                pointFrom18(gapLineX, gapSnap.gap.startSide[0][1]),
+                pointFrom18(gapLineX, minY)
+              ]
+            },
+            {
+              type: "gap",
+              direction: "vertical",
+              points: [
+                pointFrom18(gapLineX, maxY),
+                pointFrom18(gapLineX, gapSnap.gap.endSide[0][1])
+              ]
+            }
+          );
+        }
+        break;
+      }
+      case "side_right": {
+        if (verticalIntersection) {
+          const gapLineY = (verticalIntersection[0] + verticalIntersection[1]) / 2;
+          gapSnapLines.push(
+            {
+              type: "gap",
+              direction: "horizontal",
+              points: [
+                pointFrom18(startMaxX, gapLineY),
+                pointFrom18(endMinX, gapLineY)
+              ]
+            },
+            {
+              type: "gap",
+              direction: "horizontal",
+              points: [pointFrom18(endMaxX, gapLineY), pointFrom18(minX, gapLineY)]
+            }
+          );
+        }
+        break;
+      }
+      case "side_left": {
+        if (verticalIntersection) {
+          const gapLineY = (verticalIntersection[0] + verticalIntersection[1]) / 2;
+          gapSnapLines.push(
+            {
+              type: "gap",
+              direction: "horizontal",
+              points: [
+                pointFrom18(maxX, gapLineY),
+                pointFrom18(startMinX, gapLineY)
+              ]
+            },
+            {
+              type: "gap",
+              direction: "horizontal",
+              points: [
+                pointFrom18(startMaxX, gapLineY),
+                pointFrom18(endMinX, gapLineY)
+              ]
+            }
           );
         }
-        return false;
+        break;
       }
-      return true;
-    }
-    return false;
-  };
-})();
-
-// renderer/animation.ts
-var _AnimationController = class _AnimationController {
-  static start(key, animation) {
-    if (_AnimationController.animations.has(key)) {
-      return;
-    }
-    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;
-    }
-    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;
-  }
-  static cancelScheduledFrameIfIdle() {
-    if (_AnimationController.animations.size > 0) {
-      return false;
-    }
-    _AnimationController.cancelScheduledFrame();
-    return true;
-  }
-  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;
+      case "side_top": {
+        if (horizontalGapIntersection) {
+          const gapLineX = (horizontalGapIntersection[0] + horizontalGapIntersection[1]) / 2;
+          gapSnapLines.push(
+            {
+              type: "gap",
+              direction: "vertical",
+              points: [
+                pointFrom18(gapLineX, maxY),
+                pointFrom18(gapLineX, startMinY)
+              ]
+            },
+            {
+              type: "gap",
+              direction: "vertical",
+              points: [
+                pointFrom18(gapLineX, startMaxY),
+                pointFrom18(gapLineX, endMinY)
+              ]
+            }
+          );
         }
+        break;
       }
-      if (_AnimationController.cancelScheduledFrameIfIdle()) {
-        return;
+      case "side_bottom": {
+        if (horizontalGapIntersection) {
+          const gapLineX = (horizontalGapIntersection[0] + horizontalGapIntersection[1]) / 2;
+          gapSnapLines.push(
+            {
+              type: "gap",
+              direction: "vertical",
+              points: [
+                pointFrom18(gapLineX, startMaxY),
+                pointFrom18(gapLineX, endMinY)
+              ]
+            },
+            {
+              type: "gap",
+              direction: "vertical",
+              points: [pointFrom18(gapLineX, endMaxY), pointFrom18(gapLineX, minY)]
+            }
+          );
+        }
+        break;
       }
-      _AnimationController.scheduleNextFrame();
     }
   }
-  static running(key) {
-    return _AnimationController.animations.has(key);
-  }
-  static cancel(key) {
-    _AnimationController.animations.delete(key);
-    _AnimationController.cancelScheduledFrameIfIdle();
-  }
+  return dedupeGapSnapLines(
+    gapSnapLines.map((gapSnapLine) => {
+      return {
+        ...gapSnapLine,
+        points: gapSnapLine.points.map(
+          (p) => pointFrom18(round(p[0]), round(p[1]))
+        )
+      };
+    })
+  );
 };
-__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();
-    }
+var snapResizingElements = (selectedElements, selectedOriginalElements, app, event, dragOffset, transformHandle) => {
+  if (!isSnappingEnabled({ event, selectedElements, app }) || selectedElements.length === 0 || selectedElements.length === 1 && !areRoughlyEqual(selectedElements[0].angle, 0)) {
+    return {
+      snapOffset: { x: 0, y: 0 },
+      snapLines: []
+    };
   }
-  endPath() {
-    if (this.currentTrail) {
-      this.currentTrail.close();
-      this.currentTrail.options.keepHead = false;
-      this.pastTrails.push(this.currentTrail);
-      this.currentTrail = void 0;
-      this.update();
+  let [minX, minY, maxX, maxY] = getCommonBounds4(selectedOriginalElements);
+  if (transformHandle) {
+    if (transformHandle.includes("e")) {
+      maxX += dragOffset.x;
+    } else if (transformHandle.includes("w")) {
+      minX += dragOffset.x;
     }
-  }
-  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");
+    if (transformHandle.includes("n")) {
+      minY += dragOffset.y;
+    } else if (transformHandle.includes("s")) {
+      maxY += dragOffset.y;
     }
   }
-  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)
-      );
+  const selectionSnapPoints = [];
+  if (transformHandle) {
+    switch (transformHandle) {
+      case "e": {
+        selectionSnapPoints.push(pointFrom18(maxX, minY), pointFrom18(maxX, maxY));
+        break;
+      }
+      case "w": {
+        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(minX, maxY));
+        break;
+      }
+      case "n": {
+        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(maxX, minY));
+        break;
+      }
+      case "s": {
+        selectionSnapPoints.push(pointFrom18(minX, maxY), pointFrom18(maxX, maxY));
+        break;
+      }
+      case "ne": {
+        selectionSnapPoints.push(pointFrom18(maxX, minY));
+        break;
+      }
+      case "nw": {
+        selectionSnapPoints.push(pointFrom18(minX, minY));
+        break;
+      }
+      case "se": {
+        selectionSnapPoints.push(pointFrom18(maxX, maxY));
+        break;
+      }
+      case "sw": {
+        selectionSnapPoints.push(pointFrom18(minX, maxY));
+        break;
+      }
     }
-    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);
   }
+  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const minOffset = {
+    x: snapDistance,
+    y: snapDistance
+  };
+  const nearestSnapsX = [];
+  const nearestSnapsY = [];
+  getPointSnaps(
+    selectedOriginalElements,
+    selectionSnapPoints,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  const snapOffset = {
+    x: nearestSnapsX[0]?.offset ?? 0,
+    y: nearestSnapsY[0]?.offset ?? 0
+  };
+  minOffset.x = 0;
+  minOffset.y = 0;
+  nearestSnapsX.length = 0;
+  nearestSnapsY.length = 0;
+  const [x1, y1, x2, y2] = getCommonBounds4(selectedElements).map(
+    (bound) => round(bound)
+  );
+  const corners = [
+    pointFrom18(x1, y1),
+    pointFrom18(x1, y2),
+    pointFrom18(x2, y1),
+    pointFrom18(x2, y2)
+  ];
+  getPointSnaps(
+    selectedElements,
+    corners,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  const pointSnapLines = createPointSnapLines(nearestSnapsX, nearestSnapsY);
+  return {
+    snapOffset,
+    snapLines: pointSnapLines
+  };
 };
-__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() {
+var snapNewElement = (newElement7, app, event, origin, dragOffset, elementsMap) => {
+  if (!isSnappingEnabled({ event, selectedElements: [newElement7], app })) {
     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));
-      }
+      snapOffset: { x: 0, y: 0 },
+      snapLines: []
     };
   }
-  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;
-  }
-  stopCollabTrails(collaborators) {
-    for (const [key, trail] of this.collabTrails) {
-      const collaborator = collaborators?.get(key);
-      if (!collaborator) {
-        trail.stop();
-        this.collabTrails.delete(key);
-      }
-    }
+  const selectionSnapPoints = [
+    pointFrom18(origin.x + dragOffset.x, origin.y + dragOffset.y)
+  ];
+  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const minOffset = {
+    x: snapDistance,
+    y: snapDistance
+  };
+  const nearestSnapsX = [];
+  const nearestSnapsY = [];
+  getPointSnaps(
+    [newElement7],
+    selectionSnapPoints,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  const snapOffset = {
+    x: nearestSnapsX[0]?.offset ?? 0,
+    y: nearestSnapsY[0]?.offset ?? 0
+  };
+  minOffset.x = 0;
+  minOffset.y = 0;
+  nearestSnapsX.length = 0;
+  nearestSnapsY.length = 0;
+  const corners = getElementsCorners([newElement7], elementsMap, {
+    boundingBoxCorners: true,
+    omitCenter: true
+  });
+  getPointSnaps(
+    [newElement7],
+    corners,
+    app,
+    event,
+    nearestSnapsX,
+    nearestSnapsY,
+    minOffset
+  );
+  const pointSnapLines = createPointSnapLines(nearestSnapsX, nearestSnapsY);
+  return {
+    snapOffset,
+    snapLines: pointSnapLines
+  };
+};
+var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
+  if (!isSnappingEnabled({ event, selectedElements: [], app })) {
+    return {
+      originOffset: { x: 0, y: 0 },
+      snapLines: []
+    };
   }
-  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)
+  const referenceElements = getVisibleAndNonSelectedElements(
+    elements,
+    [],
+    app.state,
+    elementsMap
+  );
+  const snapDistance = getSnapDistance(app.state.zoom.value);
+  const minOffset = {
+    x: snapDistance,
+    y: snapDistance
+  };
+  const horizontalSnapLines = [];
+  const verticalSnapLines = [];
+  for (const referenceElement of referenceElements) {
+    const corners = getElementsCorners([referenceElement], elementsMap);
+    for (const corner of corners) {
+      const offsetX = corner[0] - pointer.x;
+      if (Math.abs(offsetX) <= Math.abs(minOffset.x)) {
+        if (Math.abs(offsetX) < Math.abs(minOffset.x)) {
+          verticalSnapLines.length = 0;
+        }
+        verticalSnapLines.push({
+          type: "pointer",
+          points: [corner, pointFrom18(corner[0], pointer.y)],
+          direction: "vertical"
         });
-        trail.start(this.container);
-        this.collabTrails.set(key, trail);
+        minOffset.x = offsetX;
       }
-      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();
+      const offsetY = corner[1] - pointer.y;
+      if (Math.abs(offsetY) <= Math.abs(minOffset.y)) {
+        if (Math.abs(offsetY) < Math.abs(minOffset.y)) {
+          horizontalSnapLines.length = 0;
         }
+        horizontalSnapLines.push({
+          type: "pointer",
+          points: [corner, pointFrom18(pointer.x, corner[1])],
+          direction: "horizontal"
+        });
+        minOffset.y = offsetY;
       }
     }
   }
+  return {
+    originOffset: {
+      x: verticalSnapLines.length > 0 ? verticalSnapLines[0].points[0][0] - pointer.x : 0,
+      y: horizontalSnapLines.length > 0 ? horizontalSnapLines[0].points[0][1] - pointer.y : 0
+    },
+    snapLines: [...verticalSnapLines, ...horizontalSnapLines]
+  };
+};
+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
@@ -15587,1070 +16139,449 @@ var Renderer = class {
     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 {
-    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 };
-};
-
-// snapping.ts
-import {
-  pointFrom as pointFrom18,
-  pointRotateRads as pointRotateRads14,
-  rangeInclusive,
-  rangeIntersection,
-  rangesOverlap
-} from "@excalidraw/math";
-import { TOOL_TYPE, KEYS as KEYS34 } from "@excalidraw/common";
-import {
-  getCommonBounds as getCommonBounds5,
-  getDraggedElementsBounds,
-  getElementAbsoluteCoords as getElementAbsoluteCoords5
-} from "@excalidraw/element";
-import { isBoundToContainer as isBoundToContainer6 } from "@excalidraw/element";
-import { getMaximumGroups } from "@excalidraw/element";
-import {
-  getSelectedElements as getSelectedElements4,
-  getVisibleAndNonSelectedElements
-} from "@excalidraw/element";
-var SNAP_DISTANCE = 8;
-var VISIBLE_GAPS_LIMIT_PER_AXIS = 99999;
-var getSnapDistance = (zoomValue) => {
-  return SNAP_DISTANCE / zoomValue;
-};
-var _SnapCache = class _SnapCache {
-};
-__publicField(_SnapCache, "referenceSnapPoints", null);
-__publicField(_SnapCache, "visibleGaps", null);
-__publicField(_SnapCache, "setReferenceSnapPoints", (snapPoints) => {
-  _SnapCache.referenceSnapPoints = snapPoints;
-});
-__publicField(_SnapCache, "getReferenceSnapPoints", () => {
-  return _SnapCache.referenceSnapPoints;
-});
-__publicField(_SnapCache, "setVisibleGaps", (gaps) => {
-  _SnapCache.visibleGaps = gaps;
-});
-__publicField(_SnapCache, "getVisibleGaps", () => {
-  return _SnapCache.visibleGaps;
-});
-__publicField(_SnapCache, "destroy", () => {
-  _SnapCache.referenceSnapPoints = null;
-  _SnapCache.visibleGaps = null;
-});
-var SnapCache = _SnapCache;
-var isGridModeEnabled = (app) => app.props.gridModeEnabled ?? app.state.gridModeEnabled;
-var isSnappingEnabled = ({
-  event,
-  app,
-  selectedElements
-}) => {
-  if (event) {
-    const isLassoDragging = app.state.activeTool.type === "lasso" && app.state.selectedElementsAreBeingDragged;
-    return (app.state.activeTool.type !== "lasso" || isLassoDragging) && (app.state.objectsSnapModeEnabled && !event[KEYS34.CTRL_OR_CMD] || !app.state.objectsSnapModeEnabled && event[KEYS34.CTRL_OR_CMD] && !isGridModeEnabled(app));
-  }
-  if (selectedElements.length === 1 && selectedElements[0].type === "arrow") {
-    return false;
-  }
-  return app.state.objectsSnapModeEnabled;
-};
-var areRoughlyEqual = (a, b, precision = 0.01) => {
-  return Math.abs(a - b) <= precision;
-};
-var getElementsCorners = (elements, elementsMap, {
-  omitCenter,
-  boundingBoxCorners,
-  dragOffset
-} = {
-  omitCenter: false,
-  boundingBoxCorners: false
-}) => {
-  let result = [];
-  if (elements.length === 1) {
-    const element = elements[0];
-    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords5(
-      element,
-      elementsMap
-    );
-    if (dragOffset) {
-      x1 += dragOffset.x;
-      x2 += dragOffset.x;
-      cx += dragOffset.x;
-      y1 += dragOffset.y;
-      y2 += dragOffset.y;
-      cy += dragOffset.y;
-    }
-    const halfWidth = (x2 - x1) / 2;
-    const halfHeight = (y2 - y1) / 2;
-    if ((element.type === "diamond" || element.type === "ellipse") && !boundingBoxCorners) {
-      const leftMid = pointRotateRads14(
-        pointFrom18(x1, y1 + halfHeight),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const topMid = pointRotateRads14(
-        pointFrom18(x1 + halfWidth, y1),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const rightMid = pointRotateRads14(
-        pointFrom18(x2, y1 + halfHeight),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const bottomMid = pointRotateRads14(
-        pointFrom18(x1 + halfWidth, y2),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const center = pointFrom18(cx, cy);
-      result = omitCenter ? [leftMid, topMid, rightMid, bottomMid] : [leftMid, topMid, rightMid, bottomMid, center];
-    } else {
-      const topLeft = pointRotateRads14(
-        pointFrom18(x1, y1),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const topRight = pointRotateRads14(
-        pointFrom18(x2, y1),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const bottomLeft = pointRotateRads14(
-        pointFrom18(x1, y2),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const bottomRight = pointRotateRads14(
-        pointFrom18(x2, y2),
-        pointFrom18(cx, cy),
-        element.angle
-      );
-      const center = pointFrom18(cx, cy);
-      result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
-    }
-  } else if (elements.length > 1) {
-    const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
-      elements,
-      dragOffset ?? { x: 0, y: 0 }
-    );
-    const width = maxX - minX;
-    const height = maxY - minY;
-    const topLeft = pointFrom18(minX, minY);
-    const topRight = pointFrom18(maxX, minY);
-    const bottomLeft = pointFrom18(minX, maxY);
-    const bottomRight = pointFrom18(maxX, maxY);
-    const center = pointFrom18(minX + width / 2, minY + height / 2);
-    result = omitCenter ? [topLeft, topRight, bottomLeft, bottomRight] : [topLeft, topRight, bottomLeft, bottomRight, center];
-  }
-  return result.map((p) => pointFrom18(round(p[0]), round(p[1])));
-};
-var getReferenceElements = (elements, selectedElements, appState, elementsMap) => getVisibleAndNonSelectedElements(
-  elements,
-  selectedElements,
-  appState,
-  elementsMap
-);
-var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
-  const referenceElements = getReferenceElements(
-    elements,
-    selectedElements,
-    appState,
-    elementsMap
-  );
-  const referenceBounds = getMaximumGroups(referenceElements, elementsMap).filter(
-    (elementsGroup) => !(elementsGroup.length === 1 && isBoundToContainer6(elementsGroup[0]))
-  ).map(
-    (group) => getCommonBounds5(group).map(
-      (bound) => round(bound)
-    )
-  );
-  const horizontallySorted = referenceBounds.sort((a, b) => a[0] - b[0]);
-  const horizontalGaps = [];
-  let c = 0;
-  horizontal:
-    for (let i = 0; i < horizontallySorted.length; i++) {
-      const startBounds = horizontallySorted[i];
-      for (let j = i + 1; j < horizontallySorted.length; j++) {
-        if (++c > VISIBLE_GAPS_LIMIT_PER_AXIS) {
-          break horizontal;
-        }
-        const endBounds = horizontallySorted[j];
-        const [, startMinY, startMaxX, startMaxY] = startBounds;
-        const [endMinX, endMinY, , endMaxY] = endBounds;
-        if (startMaxX < endMinX && rangesOverlap(
-          rangeInclusive(startMinY, startMaxY),
-          rangeInclusive(endMinY, endMaxY)
-        )) {
-          horizontalGaps.push({
-            startBounds,
-            endBounds,
-            startSide: [
-              pointFrom18(startMaxX, startMinY),
-              pointFrom18(startMaxX, startMaxY)
-            ],
-            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMinX, endMaxY)],
-            length: endMinX - startMaxX,
-            overlap: rangeIntersection(
-              rangeInclusive(startMinY, startMaxY),
-              rangeInclusive(endMinY, endMaxY)
-            )
-          });
-        }
-      }
-    }
-  const verticallySorted = referenceBounds.sort((a, b) => a[1] - b[1]);
-  const verticalGaps = [];
-  c = 0;
-  vertical:
-    for (let i = 0; i < verticallySorted.length; i++) {
-      const startBounds = verticallySorted[i];
-      for (let j = i + 1; j < verticallySorted.length; j++) {
-        if (++c > VISIBLE_GAPS_LIMIT_PER_AXIS) {
-          break vertical;
-        }
-        const endBounds = verticallySorted[j];
-        const [startMinX, , startMaxX, startMaxY] = startBounds;
-        const [endMinX, endMinY, endMaxX] = endBounds;
-        if (startMaxY < endMinY && rangesOverlap(
-          rangeInclusive(startMinX, startMaxX),
-          rangeInclusive(endMinX, endMaxX)
-        )) {
-          verticalGaps.push({
-            startBounds,
-            endBounds,
-            startSide: [
-              pointFrom18(startMinX, startMaxY),
-              pointFrom18(startMaxX, startMaxY)
-            ],
-            endSide: [pointFrom18(endMinX, endMinY), pointFrom18(endMaxX, endMinY)],
-            length: endMinY - startMaxY,
-            overlap: rangeIntersection(
-              rangeInclusive(startMinX, startMaxX),
-              rangeInclusive(endMinX, endMaxX)
-            )
-          });
-        }
-      }
-    }
-  return {
-    horizontalGaps,
-    verticalGaps
-  };
-};
-var getGapSnaps = (selectedElements, dragOffset, app, event, nearestSnapsX, nearestSnapsY, minOffset) => {
-  if (!isSnappingEnabled({ app, event, selectedElements })) {
-    return [];
-  }
-  if (selectedElements.length === 0) {
-    return [];
-  }
-  const visibleGaps = SnapCache.getVisibleGaps();
-  if (visibleGaps) {
-    const { horizontalGaps, verticalGaps } = visibleGaps;
-    const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
-      selectedElements,
-      dragOffset
-    ).map((bound) => round(bound));
-    const centerX = (minX + maxX) / 2;
-    const centerY = (minY + maxY) / 2;
-    for (const gap of horizontalGaps) {
-      if (!rangesOverlap(rangeInclusive(minY, maxY), gap.overlap)) {
-        continue;
-      }
-      const gapMidX = gap.startSide[0][0] + gap.length / 2;
-      const centerOffset = round(gapMidX - centerX);
-      const gapIsLargerThanSelection = gap.length > maxX - minX;
-      if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.x) {
-        if (Math.abs(centerOffset) < minOffset.x) {
-          nearestSnapsX.length = 0;
-        }
-        minOffset.x = Math.abs(centerOffset);
-        const snap = {
-          type: "gap",
-          direction: "center_horizontal",
-          gap,
-          offset: centerOffset
-        };
-        nearestSnapsX.push(snap);
-        continue;
-      }
-      const [, , endMaxX] = gap.endBounds;
-      const distanceToEndElementX = minX - endMaxX;
-      const sideOffsetRight = round(gap.length - distanceToEndElementX);
-      if (Math.abs(sideOffsetRight) <= minOffset.x) {
-        if (Math.abs(sideOffsetRight) < minOffset.x) {
-          nearestSnapsX.length = 0;
-        }
-        minOffset.x = Math.abs(sideOffsetRight);
-        const snap = {
-          type: "gap",
-          direction: "side_right",
-          gap,
-          offset: sideOffsetRight
-        };
-        nearestSnapsX.push(snap);
-        continue;
-      }
-      const [startMinX, , ,] = gap.startBounds;
-      const distanceToStartElementX = startMinX - maxX;
-      const sideOffsetLeft = round(distanceToStartElementX - gap.length);
-      if (Math.abs(sideOffsetLeft) <= minOffset.x) {
-        if (Math.abs(sideOffsetLeft) < minOffset.x) {
-          nearestSnapsX.length = 0;
-        }
-        minOffset.x = Math.abs(sideOffsetLeft);
-        const snap = {
-          type: "gap",
-          direction: "side_left",
-          gap,
-          offset: sideOffsetLeft
-        };
-        nearestSnapsX.push(snap);
-        continue;
-      }
-    }
-    for (const gap of verticalGaps) {
-      if (!rangesOverlap(rangeInclusive(minX, maxX), gap.overlap)) {
-        continue;
-      }
-      const gapMidY = gap.startSide[0][1] + gap.length / 2;
-      const centerOffset = round(gapMidY - centerY);
-      const gapIsLargerThanSelection = gap.length > maxY - minY;
-      if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.y) {
-        if (Math.abs(centerOffset) < minOffset.y) {
-          nearestSnapsY.length = 0;
-        }
-        minOffset.y = Math.abs(centerOffset);
-        const snap = {
-          type: "gap",
-          direction: "center_vertical",
-          gap,
-          offset: centerOffset
-        };
-        nearestSnapsY.push(snap);
-        continue;
-      }
-      const [, startMinY, ,] = gap.startBounds;
-      const distanceToStartElementY = startMinY - maxY;
-      const sideOffsetTop = round(distanceToStartElementY - gap.length);
-      if (Math.abs(sideOffsetTop) <= minOffset.y) {
-        if (Math.abs(sideOffsetTop) < minOffset.y) {
-          nearestSnapsY.length = 0;
-        }
-        minOffset.y = Math.abs(sideOffsetTop);
-        const snap = {
-          type: "gap",
-          direction: "side_top",
-          gap,
-          offset: sideOffsetTop
-        };
-        nearestSnapsY.push(snap);
-        continue;
-      }
-      const [, , , endMaxY] = gap.endBounds;
-      const distanceToEndElementY = round(minY - endMaxY);
-      const sideOffsetBottom = gap.length - distanceToEndElementY;
-      if (Math.abs(sideOffsetBottom) <= minOffset.y) {
-        if (Math.abs(sideOffsetBottom) < minOffset.y) {
-          nearestSnapsY.length = 0;
-        }
-        minOffset.y = Math.abs(sideOffsetBottom);
-        const snap = {
-          type: "gap",
-          direction: "side_bottom",
-          gap,
-          offset: sideOffsetBottom
-        };
-        nearestSnapsY.push(snap);
-        continue;
-      }
+    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();
   }
 };
-var getReferenceSnapPoints = (elements, selectedElements, appState, elementsMap) => {
-  const referenceElements = getReferenceElements(
-    elements,
-    selectedElements,
-    appState,
-    elementsMap
+
+// 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
   );
-  return getMaximumGroups(referenceElements, elementsMap).filter(
-    (elementsGroup) => !(elementsGroup.length === 1 && isBoundToContainer6(elementsGroup[0]))
-  ).flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
+  const x = viewportX - appState.offsetLeft + 10;
+  const y = viewportY - appState.offsetTop;
+  return { x, y };
 };
-var getPointSnaps = (selectedElements, selectionSnapPoints, app, event, nearestSnapsX, nearestSnapsY, minOffset) => {
-  if (!isSnappingEnabled({ app, event, selectedElements }) || selectedElements.length === 0 && selectionSnapPoints.length === 0) {
-    return [];
-  }
-  const referenceSnapPoints = SnapCache.getReferenceSnapPoints();
-  if (referenceSnapPoints) {
-    for (const thisSnapPoint of selectionSnapPoints) {
-      for (const otherSnapPoint of referenceSnapPoints) {
-        const offsetX = otherSnapPoint[0] - thisSnapPoint[0];
-        const offsetY = otherSnapPoint[1] - thisSnapPoint[1];
-        if (Math.abs(offsetX) <= minOffset.x) {
-          if (Math.abs(offsetX) < minOffset.x) {
-            nearestSnapsX.length = 0;
-          }
-          nearestSnapsX.push({
-            type: "point",
-            points: [thisSnapPoint, otherSnapPoint],
-            offset: offsetX
-          });
-          minOffset.x = Math.abs(offsetX);
-        }
-        if (Math.abs(offsetY) <= minOffset.y) {
-          if (Math.abs(offsetY) < minOffset.y) {
-            nearestSnapsY.length = 0;
-          }
-          nearestSnapsY.push({
-            type: "point",
-            points: [thisSnapPoint, otherSnapPoint],
-            offset: offsetY
-          });
-          minOffset.y = Math.abs(offsetY);
-        }
-      }
-    }
+var ElementCanvasButtons = ({
+  children,
+  element,
+  elementsMap
+}) => {
+  const appState = useExcalidrawAppState();
+  if (appState.contextMenu || appState.newElement || appState.resizingElement || appState.isRotating || appState.openMenu || appState.viewModeEnabled) {
+    return null;
   }
-};
-var snapDraggedElements = (elements, dragOffset, app, event, elementsMap) => {
-  const appState = app.state;
-  const selectedElements = getSelectedElements4(elements, appState);
-  if (!isSnappingEnabled({ app, event, selectedElements }) || selectedElements.length === 0) {
-    return {
-      snapOffset: {
-        x: 0,
-        y: 0
+  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
       },
-      snapLines: []
-    };
-  }
-  dragOffset.x = round(dragOffset.x);
-  dragOffset.y = round(dragOffset.y);
-  const nearestSnapsX = [];
-  const nearestSnapsY = [];
-  const snapDistance = getSnapDistance(appState.zoom.value);
-  const minOffset = {
-    x: snapDistance,
-    y: snapDistance
-  };
-  const selectionPoints = getElementsCorners(selectedElements, elementsMap, {
-    dragOffset
-  });
-  getPointSnaps(
-    selectedElements,
-    selectionPoints,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  getGapSnaps(
-    selectedElements,
-    dragOffset,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  const snapOffset = {
-    x: nearestSnapsX[0]?.offset ?? 0,
-    y: nearestSnapsY[0]?.offset ?? 0
-  };
-  minOffset.x = 0;
-  minOffset.y = 0;
-  nearestSnapsX.length = 0;
-  nearestSnapsY.length = 0;
-  const newDragOffset = {
-    x: round(dragOffset.x + snapOffset.x),
-    y: round(dragOffset.y + snapOffset.y)
-  };
-  getPointSnaps(
-    selectedElements,
-    getElementsCorners(selectedElements, elementsMap, {
-      dragOffset: newDragOffset
-    }),
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  getGapSnaps(
-    selectedElements,
-    newDragOffset,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  const pointSnapLines = createPointSnapLines(nearestSnapsX, nearestSnapsY);
-  const gapSnapLines = createGapSnapLines(
-    selectedElements,
-    newDragOffset,
-    [...nearestSnapsX, ...nearestSnapsY].filter(
-      (snap) => snap.type === "gap"
-    )
+      children
+    }
   );
-  return {
-    snapOffset,
-    snapLines: [...pointSnapLines, ...gapSnapLines]
-  };
 };
-var round = (x) => {
-  const decimalPlaces = 6;
-  return Math.round(x * 10 ** decimalPlaces) / 10 ** decimalPlaces;
+
+// 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 dedupePoints = (points) => {
-  const map = /* @__PURE__ */ new Map();
-  for (const point of points) {
-    const key = point.join(",");
-    if (!map.has(key)) {
-      map.set(key, point);
-    }
-  }
-  return Array.from(map.values());
+var withBatchedUpdatesThrottled = (func) => {
+  return throttleRAF((event) => {
+    unstable_batchedUpdates(func, event);
+  });
 };
-var createPointSnapLines = (nearestSnapsX, nearestSnapsY) => {
-  const snapsX = {};
-  const snapsY = {};
-  if (nearestSnapsX.length > 0) {
-    for (const snap of nearestSnapsX) {
-      if (snap.type === "point") {
-        const key = round(snap.points[0][0]);
-        if (!snapsX[key]) {
-          snapsX[key] = [];
-        }
-        snapsX[key].push(
-          ...snap.points.map(
-            (p) => pointFrom18(round(p[0]), round(p[1]))
-          )
-        );
-      }
-    }
+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;
   }
-  if (nearestSnapsY.length > 0) {
-    for (const snap of nearestSnapsY) {
-      if (snap.type === "point") {
-        const key = round(snap.points[0][1]);
-        if (!snapsY[key]) {
-          snapsY[key] = [];
+  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."
+          );
         }
-        snapsY[key].push(
-          ...snap.points.map(
-            (p) => pointFrom18(round(p[0]), round(p[1]))
-          )
-        );
+        return false;
       }
+      return true;
+    }
+    return false;
+  };
+})();
+
+// renderer/animation.ts
+var _AnimationController = class _AnimationController {
+  static start(key, animation) {
+    if (_AnimationController.animations.has(key)) {
+      return;
+    }
+    const initialState = animation({
+      deltaTime: 0,
+      state: void 0
+    });
+    if (initialState) {
+      _AnimationController.animations.set(key, {
+        animation,
+        lastTime: 0,
+        state: initialState
+      });
+      _AnimationController.scheduleNextFrame();
     }
   }
-  return Object.entries(snapsX).map(([key, points]) => {
-    return {
-      type: "points",
-      points: dedupePoints(
-        points.map((p) => {
-          return pointFrom18(Number(key), p[1]);
-        }).sort((a, b) => a[1] - b[1])
-      )
-    };
-  }).concat(
-    Object.entries(snapsY).map(([key, points]) => {
-      return {
-        type: "points",
-        points: dedupePoints(
-          points.map((p) => {
-            return pointFrom18(p[0], Number(key));
-          }).sort((a, b) => a[0] - b[0])
-        )
+  static scheduleNextFrame() {
+    if (_AnimationController.scheduledFrame) {
+      return;
+    }
+    if (isRenderThrottlingEnabled()) {
+      _AnimationController.scheduledFrame = {
+        id: requestAnimationFrame(_AnimationController.tick),
+        type: "raf"
+      };
+    } else {
+      _AnimationController.scheduledFrame = {
+        id: setTimeout(_AnimationController.tick, 0),
+        type: "timeout"
       };
-    })
-  );
-};
-var dedupeGapSnapLines = (gapSnapLines) => {
-  const map = /* @__PURE__ */ new Map();
-  for (const gapSnapLine of gapSnapLines) {
-    const key = gapSnapLine.points.flat().map((point) => [round(point)]).join(",");
-    if (!map.has(key)) {
-      map.set(key, gapSnapLine);
     }
   }
-  return Array.from(map.values());
-};
-var createGapSnapLines = (selectedElements, dragOffset, gapSnaps) => {
-  const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
-    selectedElements,
-    dragOffset
-  );
-  const gapSnapLines = [];
-  for (const gapSnap of gapSnaps) {
-    const [startMinX, startMinY, startMaxX, startMaxY] = gapSnap.gap.startBounds;
-    const [endMinX, endMinY, endMaxX, endMaxY] = gapSnap.gap.endBounds;
-    const verticalIntersection = rangeIntersection(
-      rangeInclusive(minY, maxY),
-      gapSnap.gap.overlap
-    );
-    const horizontalGapIntersection = rangeIntersection(
-      rangeInclusive(minX, maxX),
-      gapSnap.gap.overlap
-    );
-    switch (gapSnap.direction) {
-      case "center_horizontal": {
-        if (verticalIntersection) {
-          const gapLineY = (verticalIntersection[0] + verticalIntersection[1]) / 2;
-          gapSnapLines.push(
-            {
-              type: "gap",
-              direction: "horizontal",
-              points: [
-                pointFrom18(gapSnap.gap.startSide[0][0], gapLineY),
-                pointFrom18(minX, gapLineY)
-              ]
-            },
-            {
-              type: "gap",
-              direction: "horizontal",
-              points: [
-                pointFrom18(maxX, gapLineY),
-                pointFrom18(gapSnap.gap.endSide[0][0], gapLineY)
-              ]
-            }
-          );
-        }
-        break;
-      }
-      case "center_vertical": {
-        if (horizontalGapIntersection) {
-          const gapLineX = (horizontalGapIntersection[0] + horizontalGapIntersection[1]) / 2;
-          gapSnapLines.push(
-            {
-              type: "gap",
-              direction: "vertical",
-              points: [
-                pointFrom18(gapLineX, gapSnap.gap.startSide[0][1]),
-                pointFrom18(gapLineX, minY)
-              ]
-            },
-            {
-              type: "gap",
-              direction: "vertical",
-              points: [
-                pointFrom18(gapLineX, maxY),
-                pointFrom18(gapLineX, gapSnap.gap.endSide[0][1])
-              ]
-            }
-          );
-        }
-        break;
-      }
-      case "side_right": {
-        if (verticalIntersection) {
-          const gapLineY = (verticalIntersection[0] + verticalIntersection[1]) / 2;
-          gapSnapLines.push(
-            {
-              type: "gap",
-              direction: "horizontal",
-              points: [
-                pointFrom18(startMaxX, gapLineY),
-                pointFrom18(endMinX, gapLineY)
-              ]
-            },
-            {
-              type: "gap",
-              direction: "horizontal",
-              points: [pointFrom18(endMaxX, gapLineY), pointFrom18(minX, gapLineY)]
-            }
-          );
-        }
-        break;
-      }
-      case "side_left": {
-        if (verticalIntersection) {
-          const gapLineY = (verticalIntersection[0] + verticalIntersection[1]) / 2;
-          gapSnapLines.push(
-            {
-              type: "gap",
-              direction: "horizontal",
-              points: [
-                pointFrom18(maxX, gapLineY),
-                pointFrom18(startMinX, gapLineY)
-              ]
-            },
-            {
-              type: "gap",
-              direction: "horizontal",
-              points: [
-                pointFrom18(startMaxX, gapLineY),
-                pointFrom18(endMinX, gapLineY)
-              ]
-            }
-          );
-        }
-        break;
-      }
-      case "side_top": {
-        if (horizontalGapIntersection) {
-          const gapLineX = (horizontalGapIntersection[0] + horizontalGapIntersection[1]) / 2;
-          gapSnapLines.push(
-            {
-              type: "gap",
-              direction: "vertical",
-              points: [
-                pointFrom18(gapLineX, maxY),
-                pointFrom18(gapLineX, startMinY)
-              ]
-            },
-            {
-              type: "gap",
-              direction: "vertical",
-              points: [
-                pointFrom18(gapLineX, startMaxY),
-                pointFrom18(gapLineX, endMinY)
-              ]
-            }
-          );
+  static cancelScheduledFrame() {
+    if (!_AnimationController.scheduledFrame) {
+      return;
+    }
+    if (_AnimationController.scheduledFrame.type === "raf") {
+      cancelAnimationFrame(_AnimationController.scheduledFrame.id);
+    } else {
+      clearTimeout(_AnimationController.scheduledFrame.id);
+    }
+    _AnimationController.scheduledFrame = null;
+  }
+  static cancelScheduledFrameIfIdle() {
+    if (_AnimationController.animations.size > 0) {
+      return false;
+    }
+    _AnimationController.cancelScheduledFrame();
+    return true;
+  }
+  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;
         }
-        break;
       }
-      case "side_bottom": {
-        if (horizontalGapIntersection) {
-          const gapLineX = (horizontalGapIntersection[0] + horizontalGapIntersection[1]) / 2;
-          gapSnapLines.push(
-            {
-              type: "gap",
-              direction: "vertical",
-              points: [
-                pointFrom18(gapLineX, startMaxY),
-                pointFrom18(gapLineX, endMinY)
-              ]
-            },
-            {
-              type: "gap",
-              direction: "vertical",
-              points: [pointFrom18(gapLineX, endMaxY), pointFrom18(gapLineX, minY)]
-            }
-          );
-        }
-        break;
+      if (_AnimationController.cancelScheduledFrameIfIdle()) {
+        return;
       }
+      _AnimationController.scheduleNextFrame();
     }
   }
-  return dedupeGapSnapLines(
-    gapSnapLines.map((gapSnapLine) => {
-      return {
-        ...gapSnapLine,
-        points: gapSnapLine.points.map(
-          (p) => pointFrom18(round(p[0]), round(p[1]))
-        )
-      };
-    })
-  );
+  static running(key) {
+    return _AnimationController.animations.has(key);
+  }
+  static cancel(key) {
+    _AnimationController.animations.delete(key);
+    _AnimationController.cancelScheduledFrameIfIdle();
+  }
 };
-var snapResizingElements = (selectedElements, selectedOriginalElements, app, event, dragOffset, transformHandle) => {
-  if (!isSnappingEnabled({ event, selectedElements, app }) || selectedElements.length === 0 || selectedElements.length === 1 && !areRoughlyEqual(selectedElements[0].angle, 0)) {
-    return {
-      snapOffset: { x: 0, y: 0 },
-      snapLines: []
-    };
+__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);
+    }
   }
-  let [minX, minY, maxX, maxY] = getCommonBounds5(selectedOriginalElements);
-  if (transformHandle) {
-    if (transformHandle.includes("e")) {
-      maxX += dragOffset.x;
-    } else if (transformHandle.includes("w")) {
-      minX += dragOffset.x;
+  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;
     }
-    if (transformHandle.includes("n")) {
-      minY += dragOffset.y;
-    } else if (transformHandle.includes("s")) {
-      maxY += dragOffset.y;
+    return false;
+  }
+  cleanup() {
+    this.pastTrails = [];
+    this.currentTrail = void 0;
+    if (this.trailElement.parentNode === this.container) {
+      this.container?.removeChild(this.trailElement);
     }
   }
-  const selectionSnapPoints = [];
-  if (transformHandle) {
-    switch (transformHandle) {
-      case "e": {
-        selectionSnapPoints.push(pointFrom18(maxX, minY), pointFrom18(maxX, maxY));
-        break;
-      }
-      case "w": {
-        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(minX, maxY));
-        break;
-      }
-      case "n": {
-        selectionSnapPoints.push(pointFrom18(minX, minY), pointFrom18(maxX, minY));
-        break;
-      }
-      case "s": {
-        selectionSnapPoints.push(pointFrom18(minX, maxY), pointFrom18(maxX, maxY));
-        break;
-      }
-      case "ne": {
-        selectionSnapPoints.push(pointFrom18(maxX, minY));
-        break;
-      }
-      case "nw": {
-        selectionSnapPoints.push(pointFrom18(minX, minY));
-        break;
-      }
-      case "se": {
-        selectionSnapPoints.push(pointFrom18(maxX, maxY));
-        break;
-      }
-      case "sw": {
-        selectionSnapPoints.push(pointFrom18(minX, maxY));
-        break;
-      }
+  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;
+      });
     }
   }
-  const snapDistance = getSnapDistance(app.state.zoom.value);
-  const minOffset = {
-    x: snapDistance,
-    y: snapDistance
-  };
-  const nearestSnapsX = [];
-  const nearestSnapsY = [];
-  getPointSnaps(
-    selectedOriginalElements,
-    selectionSnapPoints,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  const snapOffset = {
-    x: nearestSnapsX[0]?.offset ?? 0,
-    y: nearestSnapsY[0]?.offset ?? 0
-  };
-  minOffset.x = 0;
-  minOffset.y = 0;
-  nearestSnapsX.length = 0;
-  nearestSnapsY.length = 0;
-  const [x1, y1, x2, y2] = getCommonBounds5(selectedElements).map(
-    (bound) => round(bound)
-  );
-  const corners = [
-    pointFrom18(x1, y1),
-    pointFrom18(x1, y2),
-    pointFrom18(x2, y1),
-    pointFrom18(x2, y2)
-  ];
-  getPointSnaps(
-    selectedElements,
-    corners,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  const pointSnapLines = createPointSnapLines(nearestSnapsX, nearestSnapsY);
-  return {
-    snapOffset,
-    snapLines: pointSnapLines
-  };
-};
-var snapNewElement = (newElement7, app, event, origin, dragOffset, elementsMap) => {
-  if (!isSnappingEnabled({ event, selectedElements: [newElement7], app })) {
-    return {
-      snapOffset: { x: 0, y: 0 },
-      snapLines: []
-    };
+  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);
   }
-  const selectionSnapPoints = [
-    pointFrom18(origin.x + dragOffset.x, origin.y + dragOffset.y)
-  ];
-  const snapDistance = getSnapDistance(app.state.zoom.value);
-  const minOffset = {
-    x: snapDistance,
-    y: snapDistance
-  };
-  const nearestSnapsX = [];
-  const nearestSnapsY = [];
-  getPointSnaps(
-    [newElement7],
-    selectionSnapPoints,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  const snapOffset = {
-    x: nearestSnapsX[0]?.offset ?? 0,
-    y: nearestSnapsY[0]?.offset ?? 0
-  };
-  minOffset.x = 0;
-  minOffset.y = 0;
-  nearestSnapsX.length = 0;
-  nearestSnapsY.length = 0;
-  const corners = getElementsCorners([newElement7], elementsMap, {
-    boundingBoxCorners: true,
-    omitCenter: true
-  });
-  getPointSnaps(
-    [newElement7],
-    corners,
-    app,
-    event,
-    nearestSnapsX,
-    nearestSnapsY,
-    minOffset
-  );
-  const pointSnapLines = createPointSnapLines(nearestSnapsX, nearestSnapsY);
-  return {
-    snapOffset,
-    snapLines: pointSnapLines
-  };
 };
-var getSnapLinesAtPointer = (elements, app, pointer, event, elementsMap) => {
-  if (!isSnappingEnabled({ event, selectedElements: [], app })) {
+__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 {
-      originOffset: { x: 0, y: 0 },
-      snapLines: []
+      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));
+      }
     };
   }
-  const referenceElements = getVisibleAndNonSelectedElements(
-    elements,
-    [],
-    app.state,
-    elementsMap
-  );
-  const snapDistance = getSnapDistance(app.state.zoom.value);
-  const minOffset = {
-    x: snapDistance,
-    y: snapDistance
-  };
-  const horizontalSnapLines = [];
-  const verticalSnapLines = [];
-  for (const referenceElement of referenceElements) {
-    const corners = getElementsCorners([referenceElement], elementsMap);
-    for (const corner of corners) {
-      const offsetX = corner[0] - pointer.x;
-      if (Math.abs(offsetX) <= Math.abs(minOffset.x)) {
-        if (Math.abs(offsetX) < Math.abs(minOffset.x)) {
-          verticalSnapLines.length = 0;
-        }
-        verticalSnapLines.push({
-          type: "pointer",
-          points: [corner, pointFrom18(corner[0], pointer.y)],
-          direction: "vertical"
+  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;
+  }
+  stopCollabTrails(collaborators) {
+    for (const [key, trail] of this.collabTrails) {
+      const collaborator = collaborators?.get(key);
+      if (!collaborator) {
+        trail.stop();
+        this.collabTrails.delete(key);
+      }
+    }
+  }
+  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)
         });
-        minOffset.x = offsetX;
+        trail.start(this.container);
+        this.collabTrails.set(key, trail);
       }
-      const offsetY = corner[1] - pointer.y;
-      if (Math.abs(offsetY) <= Math.abs(minOffset.y)) {
-        if (Math.abs(offsetY) < Math.abs(minOffset.y)) {
-          horizontalSnapLines.length = 0;
+      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();
         }
-        horizontalSnapLines.push({
-          type: "pointer",
-          points: [corner, pointFrom18(pointer.x, corner[1])],
-          direction: "horizontal"
-        });
-        minOffset.y = offsetY;
       }
     }
   }
-  return {
-    originOffset: {
-      x: verticalSnapLines.length > 0 ? verticalSnapLines[0].points[0][0] - pointer.x : 0,
-      y: horizontalSnapLines.length > 0 ? horizontalSnapLines[0].points[0][1] - pointer.y : 0
-    },
-    snapLines: [...verticalSnapLines, ...horizontalSnapLines]
-  };
-};
-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;
 };
 
 // textAutoResizeHandle.ts
@@ -17428,6 +17359,75 @@ 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
@@ -19586,122 +19586,6 @@ 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;
@@ -19997,17 +19881,29 @@ var Popover6 = ({
 // components/ContextMenu.tsx
 import { jsx as jsx62, jsxs as jsxs29 } from "react/jsx-runtime";
 var CONTEXT_MENU_SEPARATOR = "separator";
+var isCustomContextMenuItem = (item) => "onSelect" in item;
 var ContextMenu = React19.memo(
   ({ actionManager, items, top, left, onClose }) => {
     const appState = useExcalidrawAppState();
     const elements = useExcalidrawElements();
     const filteredItems = items.reduce((acc, item) => {
-      if (item && (item === CONTEXT_MENU_SEPARATOR || !item.predicate || item.predicate(
+      if (!item) {
+        return acc;
+      }
+      if (item === CONTEXT_MENU_SEPARATOR) {
+        acc.push(item);
+        return acc;
+      }
+      if (isCustomContextMenuItem(item)) {
+        acc.push(item);
+        return acc;
+      }
+      if (!item.predicate || item.predicate(
         elements,
         appState,
         actionManager.app.props,
         actionManager.app
-      ))) {
+      )) {
         acc.push(item);
       }
       return acc;
@@ -20038,6 +19934,24 @@ var ContextMenu = React19.memo(
                 }
                 return /* @__PURE__ */ jsx62("hr", { className: "context-menu-item-separator" }, idx);
               }
+              if (isCustomContextMenuItem(item)) {
+                return /* @__PURE__ */ jsx62(
+                  "li",
+                  {
+                    "data-testid": item.key,
+                    onClick: () => {
+                      onClose(() => {
+                        item.onSelect();
+                      });
+                    },
+                    children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "context-menu-item", children: [
+                      /* @__PURE__ */ jsx62("div", { className: "context-menu-item__label", children: item.label }),
+                      /* @__PURE__ */ jsx62("kbd", { className: "context-menu-item__shortcut" })
+                    ] })
+                  },
+                  item.key
+                );
+              }
               const actionName = item.name;
               let label = "";
               if (item.label) {
@@ -31500,6 +31414,122 @@ 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,
@@ -31709,8 +31739,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, options) => {
-      await this.insertImages(imageFiles, sceneX, sceneY, options);
+    __publicField(this, "addImageElementsToScene", async (imageFiles, sceneX, sceneY) => {
+      await this.insertImages(imageFiles, sceneX, sceneY);
     });
     __publicField(this, "updateEditorAtom", (atom2, ...args) => {
       const result = editorJotaiStore.set(atom2, ...args);
@@ -35625,7 +35655,8 @@ var App = class _App extends React40.Component {
     __publicField(this, "newImagePlaceholder", ({
       sceneX,
       sceneY,
-      addToFrameUnderCursor = true
+      addToFrameUnderCursor = true,
+      customData
     }) => {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
@@ -35652,7 +35683,8 @@ var App = class _App extends React40.Component {
         x: gridX - placeholderSize / 2,
         y: gridY - placeholderSize / 2,
         width: placeholderSize,
-        height: placeholderSize
+        height: placeholderSize,
+        customData
       });
     });
     __publicField(this, "handleLinearElementOnPointerDown", (event, elementType, pointerDownState) => {
@@ -36046,7 +36078,6 @@ var App = class _App extends React40.Component {
       const fileId = await (this.props.generateIdForFile?.(
         imageFile
       ) || generateIdFromFile(imageFile));
-      console.info("Excalidraw File ID:", fileId);
       if (!fileId) {
         console.warn(
           "Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one."
@@ -36128,7 +36159,13 @@ var App = class _App extends React40.Component {
           ),
           multiple: true
         });
-        this.insertImages(imageFiles, x, y);
+        this.insertImages(
+          imageFiles.map((f) => ({
+            file: f
+          })),
+          x,
+          y
+        );
       } catch (error) {
         if (error.name !== "AbortError") {
           console.error(error);
@@ -36238,11 +36275,12 @@ var App = class _App extends React40.Component {
         );
       }
     });
-    __publicField(this, "insertImages", async (imageFiles, sceneX, sceneY, options) => {
-      const waitFor = options?.waitFor ?? "inserted";
+    __publicField(this, "insertImages", async (imageFiles, sceneX, sceneY) => {
       const gridPadding = 50 / this.state.zoom.value;
       const placeholders = positionElementsOnGrid(
-        imageFiles.map(() => this.newImagePlaceholder({ sceneX, sceneY })),
+        imageFiles.map(
+          ({ customData }) => this.newImagePlaceholder({ sceneX, sceneY, customData })
+        ),
         sceneX,
         sceneY,
         gridPadding
@@ -36253,7 +36291,7 @@ var App = class _App extends React40.Component {
           try {
             return await this.initializeImage(
               placeholder,
-              await normalizeFile(imageFiles[i])
+              await normalizeFile(imageFiles[i].file)
             );
           } catch (error) {
             this.setState({
@@ -36282,17 +36320,8 @@ var App = class _App extends React40.Component {
         elements: nextElements,
         captureUpdate: CaptureUpdateAction41.IMMEDIATELY
       });
-      await new Promise((resolve) => {
-        this.setState({}, () => {
-          this.actionManager.executeAction(actionFinalize);
-          if (waitFor === "painted") {
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => resolve());
-            });
-            return;
-          }
-          resolve();
-        });
+      this.setState({}, () => {
+        this.actionManager.executeAction(actionFinalize);
       });
     });
     __publicField(this, "handleAppOnDrop", async (event) => {
@@ -36331,7 +36360,13 @@ var App = class _App extends React40.Component {
       }
       const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
       if (imageFiles.length > 0 && this.isToolSupported("image")) {
-        return this.insertImages(imageFiles, sceneX, sceneY);
+        return this.insertImages(
+          imageFiles.map((file2) => ({
+            file: file2
+          })),
+          sceneX,
+          sceneY
+        );
       }
       if (fileItems.length > 0) {
         const { file: file2, fileHandle } = fileItems[0];
@@ -36691,6 +36726,8 @@ var App = class _App extends React40.Component {
     });
     __publicField(this, "getContextMenuItems", (type) => {
       const options = [];
+      const imageContextMenuItems = this.getImageContextMenuItems();
+      const imageContextMenuSection = imageContextMenuItems.length > 0 ? [CONTEXT_MENU_SEPARATOR, ...imageContextMenuItems] : [];
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
           return [actionToggleGridMode, actionToggleViewMode, actionToggleStats];
@@ -36713,7 +36750,9 @@ var App = class _App extends React40.Component {
       }
       options.push(copyText);
       if (this.state.viewModeEnabled) {
-        return [actionCopy, ...options];
+        const viewModeItems = [actionCopy];
+        viewModeItems.push(...imageContextMenuSection, ...options);
+        return viewModeItems;
       }
       const zIndexActions = this.editorInterface.formFactor === "desktop" ? [
         CONTEXT_MENU_SEPARATOR,
@@ -36722,11 +36761,17 @@ var App = class _App extends React40.Component {
         actionSendToBack,
         actionBringToFront
       ] : [];
-      return [
+      const elementItems = [
         CONTEXT_MENU_SEPARATOR,
         actionCut,
         actionCopy,
-        actionPaste,
+        actionPaste
+      ];
+      elementItems.push(...imageContextMenuSection);
+      if (imageContextMenuItems.length > 0) {
+        elementItems.push(CONTEXT_MENU_SEPARATOR);
+      }
+      elementItems.push(
         CONTEXT_MENU_SEPARATOR,
         actionSelectAllElementsInFrame,
         actionRemoveAllElementsFromFrame,
@@ -36759,6 +36804,21 @@ var App = class _App extends React40.Component {
         actionToggleElementLock,
         CONTEXT_MENU_SEPARATOR,
         actionDeleteSelected
+      );
+      return elementItems;
+    });
+    __publicField(this, "getImageContextMenuItems", () => {
+      if (!this.props.imageContextMenuItems) {
+        return [];
+      }
+      const selectedElements = this.scene.getSelectedElements(this.state);
+      if (selectedElements.length === 0 || !selectedElements.every((element) => isImageElement9(element))) {
+        return [];
+      }
+      return [
+        ...this.props.imageContextMenuItems(
+          selectedElements.map((element) => element.id)
+        )
       ];
     });
     __publicField(this, "handleWheel", withBatchedUpdates(
@@ -38382,7 +38442,13 @@ var App = class _App extends React40.Component {
     }
     if (imageFiles.length > 0) {
       if (this.isToolSupported("image")) {
-        await this.insertImages(imageFiles, sceneX, sceneY);
+        await this.insertImages(
+          imageFiles.map((file2) => ({
+            file: file2
+          })),
+          sceneX,
+          sceneY
+        );
       } else {
         this.setState({ errorMessage: t("errors.imageToolNotSupported") });
       }
@@ -38458,7 +38524,13 @@ var App = class _App extends React40.Component {
         })
       );
       const imageFiles = responses.filter((response) => !!response.file).map((response) => response.file);
-      await this.insertImages(imageFiles, sceneX, sceneY);
+      await this.insertImages(
+        imageFiles.map((file2) => ({
+          file: file2
+        })),
+        sceneX,
+        sceneY
+      );
       const error = responses.find((response) => !!response.errorMessage);
       if (error && error.errorMessage) {
         this.setState({ errorMessage: error.errorMessage });
@@ -41206,6 +41278,7 @@ var ExcalidrawBase = (props) => {
     onPointerUp,
     onScrollChange,
     onDuplicate,
+    imageContextMenuItems,
     children,
     validateEmbeddable,
     renderEmbeddable,
@@ -41301,6 +41374,7 @@ var ExcalidrawBase = (props) => {
       onPointerUp,
       onScrollChange,
       onDuplicate,
+      imageContextMenuItems,
       validateEmbeddable,
       renderEmbeddable,
       showDeprecatedFonts,