remove agent.md

fix: clip frame children completely out of bounds
2026-03-18 21:29:14 +11:00 · 2026-03-18 21:16:40 +11:00
75 changed files with 774 additions and 5025 deletions
@@ -1,4 +1,4 @@
-FROM node:24-bullseye
+FROM node:18-bullseye

 # Vite wants to open the browser using `open`, so we
 # need to install those utils.
@@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest
    timeout-minutes: 3
    steps:
-      - uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0
+      - uses: styfle/cancel-workflow-action@0.6.0
        with:
          workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604
          access_token: ${{ secrets.GITHUB_TOKEN }}
@@ -40,7 +40,7 @@ jobs:
          echo ::set-output name=body::$body

      - name: Update description with coverage
-        uses: kt3k/update-pr-description@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1
+        uses: kt3k/update-pr-description@v1.0.1
        with:
          pr_body: ${{ steps.getCommentBody.outputs.body }}
          pr_title: "chore: Update translations from Crowdin"
@@ -13,16 +13,16 @@ jobs:
      - name: Checkout repository
        uses: actions/checkout@v3
      - name: Login to DockerHub
-        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2
+        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
+        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
+        uses: docker/setup-buildx-action@v3
      - name: Build and push
-        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
+        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
@@ -11,6 +11,6 @@ jobs:
  semantic:
    runs-on: ubuntu-latest
    steps:
-      - uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
+      - uses: amannn/action-semantic-pull-request@v5
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -20,7 +20,7 @@ jobs:
        working-directory: packages/excalidraw
        env:
          CI: true
-      - uses: andresz1/size-limit-action@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1
+      - uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          build_script: build:esm
@@ -21,6 +21,6 @@ jobs:
        run: yarn test:coverage
      - name: "Report Coverage"
        if: always() # Also generate the report if tests are failing
-        uses: davelosert/vitest-coverage-report-action@2500dafcee7dd64f85ab689c0b83798a8359770e # v2
+        uses: davelosert/vitest-coverage-report-action@v2
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:24 AS build
+FROM --platform=${BUILDPLATFORM} node:18 AS build

 WORKDIR /opt/node_app

@@ -13,7 +13,7 @@ ARG NODE_ENV=production

 RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker

-FROM nginx:1.27-alpine
+FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine

 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html

@@ -29,7 +29,7 @@
  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  /></a>
  <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
+    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
  <a href="https://deepwiki.com/excalidraw/excalidraw">
    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
  <a href="https://twitter.com/excalidraw">
@@ -97,8 +97,8 @@ const config = {
                href: "https://discord.gg/UexuTaE",
              },
              {
-                label: "𝕏",
-                href: "https://x.com/excalidraw",
+                label: "Twitter",
+                href: "https://twitter.com/excalidraw",
              },
              {
                label: "Linkedin",
@@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
  return {
    fixedPoint: normalizeFixedPoint([
      (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        Math.max(hoveredElement.width, PRECISION),
+        hoveredElement.width,
      (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        Math.max(hoveredElement.height, PRECISION),
+        hoveredElement.height,
    ]),
  };
 };
@@ -1976,11 +1976,9 @@ export const calculateFixedPointForNonElbowArrowBinding = (

  // Calculate the ratio relative to the element's bounds
  const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) /
-    Math.max(hoveredElement.width, PRECISION);
+    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
  const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) /
-    Math.max(hoveredElement.height, PRECISION);
+    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;

  return {
    fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
@@ -680,9 +680,8 @@ export const getMinMaxXYFromCurvePathOps = (
  return [minX, minY, maxX, maxY];
 };

-export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
-  points: readonly P[],
-  padding: number = 0,
+export const getBoundsFromPoints = (
+  points: ExcalidrawFreeDrawElement["points"],
 ): Bounds => {
  let minX = Infinity;
  let minY = Infinity;
@@ -696,7 +695,7 @@ export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
    maxY = Math.max(maxY, y);
  }

-  return [minX - padding, minY - padding, maxX + padding, maxY + padding];
+  return [minX, minY, maxX, maxY];
 };

 const getFreeDrawElementAbsoluteCoords = (
@@ -1262,17 +1261,6 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
 ): boolean =>
  p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];

-// TODO make pointInsideBounds inclusive and remove this function once we
-// test nothing is breaking
-export const pointInsideBoundsInclusive = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  bounds: Bounds,
-): boolean =>
-  p[0] >= bounds[0] &&
-  p[0] <= bounds[2] &&
-  p[1] >= bounds[1] &&
-  p[1] <= bounds[3];
-
 export const doBoundsIntersect = (
  bounds1: Bounds | null,
  bounds2: Bounds | null,
@@ -1287,21 +1275,13 @@ export const doBoundsIntersect = (
  return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };

-export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) =>
-  [
-    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[1]),
-    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[3]),
-    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[1]),
-    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[3]),
-  ].every((point) => pointInsideBoundsInclusive(point, outerBounds));
-
 export const elementCenterPoint = (
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
  xOffset: number = 0,
  yOffset: number = 0,
 ) => {
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
+  if (isLinearElement(element)) {
    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);

@@ -154,11 +154,14 @@ export const hitElementItself = ({

  // Hit test against the extended, rotated bounding box of the element first
  const bounds = getElementBounds(element, elementsMap, true);
-  const hitBounds = isPointInRotatedBounds(
-    point,
-    bounds,
-    element.angle,
-    threshold,
+  const hitBounds = isPointWithinBounds(
+    pointFrom(bounds[0] - threshold, bounds[1] - threshold),
+    pointRotateRads(
+      point,
+      getCenterForBounds(bounds),
+      -element.angle as Radians,
+    ),
+    pointFrom(bounds[2] + threshold, bounds[3] + threshold),
  );

  // PERF: Bail out early if the point is not even in the
@@ -189,32 +192,18 @@ export const hitElementItself = ({
  return result;
 };

-const isPointInRotatedBounds = (
-  point: GlobalPoint,
-  bounds: Bounds,
-  angle: Radians,
-  tolerance = 0,
-) => {
-  const adjustedPoint =
-    angle === 0
-      ? point
-      : pointRotateRads(point, getCenterForBounds(bounds), -angle as Radians);
-
-  return isPointWithinBounds(
-    pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
-    adjustedPoint,
-    pointFrom(bounds[2] + tolerance, bounds[3] + tolerance),
-  );
-};
-
 export const hitElementBoundingBox = (
  point: GlobalPoint,
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
  tolerance = 0,
 ) => {
-  const bounds = getElementBounds(element, elementsMap, true);
-  return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
+  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
+  x1 -= tolerance;
+  y1 -= tolerance;
+  x2 += tolerance;
+  y2 += tolerance;
+  return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
 };

 export const hitElementBoundingBoxOnly = (
@@ -476,12 +465,7 @@ export const intersectElementWithLineSegment = (
    case "line":
    case "freedraw":
    case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(
-        element,
-        line,
-        elementsMap,
-        onlyFirst,
-      );
+      return intersectLinearOrFreeDrawWithLineSegment(element, line, onlyFirst);
  }
 };

@@ -548,15 +532,11 @@ const lineIntersections = (
 const intersectLinearOrFreeDrawWithLineSegment = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
  segment: LineSegment<GlobalPoint>,
-  elementsMap: ElementsMap,
  onlyFirst = false,
 ): GlobalPoint[] => {
  // NOTE: This is the only one which return the decomposed elements
  // rotated! This is due to taking advantage of roughjs definitions.
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(
-    element,
-    elementsMap,
-  );
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
  const intersections: GlobalPoint[] = [];

  for (const l of lines) {
@@ -584,9 +564,7 @@ const intersectLinearOrFreeDrawWithLineSegment = (
      continue;
    }

-    const hits = curveIntersectLineSegment(c, segment, {
-      iterLimit: 10,
-    });
+    const hits = curveIntersectLineSegment(c, segment);

    if (hits.length > 0) {
      intersections.push(...hits);
@@ -48,7 +48,7 @@ export const distanceToElement = (
    case "line":
    case "arrow":
    case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
+      return distanceToLinearOrFreeDraElement(element, p);
  }
 };

@@ -133,13 +133,9 @@ const distanceToEllipseElement = (

 const distanceToLinearOrFreeDraElement = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-  elementsMap: ElementsMap,
  p: GlobalPoint,
 ) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(
-    element,
-    elementsMap,
-  );
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
  return Math.min(
    ...lines.map((s) => distanceToLineSegment(p, s)),
    ...curves.map((a) => curvePointDistance(a, p)),
@@ -250,9 +250,6 @@ export const duplicateElements = (
    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
  };

-  // main
-  // ---------------------------------------------------------------------------
-
  const frameIdsToDuplicate = new Set(
    elements
      .filter(
@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
    offsetY < -MAX_POS ||
    offsetY > MAX_POS ||
    offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetX + points[points.length - 1][0] > MAX_POS ||
-    offsetY + points[points.length - 1][1] < -MAX_POS ||
+    offsetY + points[points.length - 1][0] > MAX_POS ||
+    offsetX + points[points.length - 1][1] < -MAX_POS ||
    offsetY + points[points.length - 1][1] > MAX_POS
  ) {
    console.error(
@@ -1,6 +1,7 @@
 import { arrayToMap } from "@excalidraw/common";
 import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
 import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
+import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";

 import type {
  AppClassProperties,
@@ -17,9 +18,6 @@ import {
  getElementLineSegments,
  getCommonBounds,
  getElementAbsoluteCoords,
-  doBoundsIntersect,
-  getElementBounds,
-  boundsContainBounds,
 } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, getContainerElement } from "./textElement";
@@ -102,9 +100,8 @@ export const isElementContainingFrame = (
  frame: ExcalidrawFrameLikeElement,
  elementsMap: ElementsMap,
 ) => {
-  return boundsContainBounds(
-    getElementBounds(element, elementsMap),
-    getElementBounds(frame, elementsMap),
+  return getElementsWithinSelection([frame], element, elementsMap).some(
+    (e) => e.id === frame.id,
  );
 };

@@ -875,6 +872,19 @@ export const shouldApplyFrameClip = (
    return true;
  }

+  // Elements that belong to a frame should still render through that frame's
+  // clip, even when fully outside the frame bounds (e.g. generated content).
+  if (
+    !appState.selectedElementsAreBeingDragged &&
+    element.frameId === frame.id
+  ) {
+    for (const groupId of element.groupIds) {
+      checkedGroups?.set(groupId, true);
+    }
+
+    return true;
+  }
+
  // if an element is outside the frame, but is part of a group that has some elements
  // "in" the frame, we should clip the element
  if (
@@ -923,17 +933,16 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => {
 export const getElementsOverlappingFrame = (
  elements: readonly ExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
-  elementsMap: ElementsMap,
 ) => {
-  return elements.filter(
-    (el) =>
-      // exclude elements which are overlapping, but are in a different frame,
+  return (
+    elementsOverlappingBBox({
+      elements,
+      bounds: frame,
+      type: "overlap",
+    })
+      // removes elements who are overlapping, but are in a different frame,
      // and thus invisible in target frame
-      (!el.frameId || el.frameId === frame.id) &&
-      doBoundsIntersect(
-        getElementBounds(el, elementsMap),
-        getElementBounds(frame, elementsMap),
-      ),
+      .filter((el) => !el.frameId || el.frameId === frame.id)
  );
 };

@@ -476,22 +476,16 @@ export class LinearElementEditor {
      });
    }

-    if (
-      lastClickedPoint < 0 ||
-      !selectedPointsIndices.includes(lastClickedPoint) ||
-      !element.points[lastClickedPoint]
-    ) {
-      console.error(
-        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-          selectedPointsIndices,
-        )}) points(0..${
-          element.points.length - 1
-        }) lastClickedPoint(${lastClickedPoint})`,
-      );
-
-      // Fall back to the actual last point as a last resort.
-      lastClickedPoint = element.points.length - 1;
-    }
+    invariant(
+      lastClickedPoint > -1 &&
+        selectedPointsIndices.includes(lastClickedPoint) &&
+        element.points[lastClickedPoint],
+      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+        selectedPointsIndices,
+      )}) points(0..${
+        element.points.length - 1
+      }) lastClickedPoint(${lastClickedPoint})`,
+    );

    // point that's being dragged (out of all selected points)
    const draggingPoint = element.points[lastClickedPoint];
@@ -800,7 +794,6 @@ export class LinearElementEditor {
          element.points[index + 1],
          index,
          appState.zoom,
-          elementsMap,
        )
      ) {
        midpoints.push(null);
@@ -810,7 +803,6 @@ export class LinearElementEditor {
      const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
        element,
        index + 1,
-        elementsMap,
      );
      midpoints.push(segmentMidPoint);
      index++;
@@ -898,7 +890,6 @@ export class LinearElementEditor {
    endPoint: P,
    index: number,
    zoom: Zoom,
-    elementsMap: ElementsMap,
  ) {
    if (isElbowArrow(element)) {
      if (index >= 0 && index < element.points.length) {
@@ -913,10 +904,7 @@ export class LinearElementEditor {

    let distance = pointDistance(startPoint, endPoint);
    if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(
-        element,
-        elementsMap,
-      );
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);

      invariant(
        lines.length === 0 && curves.length > 0,
@@ -936,7 +924,6 @@ export class LinearElementEditor {
  static getSegmentMidPoint(
    element: NonDeleted<ExcalidrawLinearElement>,
    index: number,
-    elementsMap: ElementsMap,
  ): GlobalPoint {
    if (isElbowArrow(element)) {
      invariant(
@@ -949,10 +936,7 @@ export class LinearElementEditor {
      return pointFrom<GlobalPoint>(element.x + p[0], element.y + p[1]);
    }

-    const [lines, curves] = deconstructLinearOrFreeDrawElement(
-      element,
-      elementsMap,
-    );
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);

    invariant(
      (lines.length === 0 && curves.length > 0) ||
@@ -1867,7 +1851,6 @@ export class LinearElementEditor {
      const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
        element,
        index + 1,
-        elementsMap,
      );

      x = midSegmentMidpoint[0] - boundTextElement.width / 2;
@@ -2417,7 +2400,7 @@ const pointDraggingUpdates = (
    ? nextArrow.points[0]
    : endBindable
    ? updateBoundPoint(
-        nextArrow,
+        element,
        "endBinding",
        nextArrow.endBinding,
        endBindable,
@@ -2448,7 +2431,7 @@ const pointDraggingUpdates = (
      ? endLocalPoint
      : startBindable
      ? updateBoundPoint(
-          nextArrow,
+          element,
          "startBinding",
          nextArrow.startBinding,
          startBindable,
@@ -1,34 +1,16 @@
-import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
-import {
-  lineSegment,
-  pointFrom,
-  pointRotateRads,
-  type GlobalPoint,
-} from "@excalidraw/math";
+import { arrayToMap, isShallowEqual } from "@excalidraw/common";

 import type {
  AppState,
-  BoxSelectionMode,
  InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";

-import {
-  boundsContainBounds,
-  doBoundsIntersect,
-  elementCenterPoint,
-  getElementAbsoluteCoords,
-  getElementBounds,
-  pointInsideBounds,
-} from "./bounds";
-import { intersectElementWithLineSegment } from "./collision";
+import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
 import { isElementInViewport } from "./sizeHelpers";
 import {
-  isArrowElement,
  isBoundToContainer,
  isFrameLikeElement,
-  isFreeDrawElement,
  isLinearElement,
-  isTextElement,
 } from "./typeChecks";
 import {
  elementOverlapsWithFrame,
@@ -38,33 +20,14 @@ import {

 import { LinearElementEditor } from "./linearElementEditor";
 import { selectGroupsForSelectedElements } from "./groups";
-import { getBoundTextElement } from "./textElement";

 import type {
  ElementsMap,
  ElementsMapOrArray,
  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-  NonDeleted,
  NonDeletedExcalidrawElement,
 } from "./types";

-const shouldIgnoreElementFromSelection = (
-  element: NonDeletedExcalidrawElement,
-) => element.locked || isBoundToContainer(element);
-
-const excludeElementsFromFrames = <T extends ExcalidrawElement>(
-  selectedElements: readonly T[],
-  framesInSelection: Set<ExcalidrawFrameLikeElement["id"]>,
-) => {
-  return selectedElements.filter((element) => {
-    if (element.frameId && framesInSelection.has(element.frameId)) {
-      return false;
-    }
-    return true;
-  });
-};
-
 /**
 * Frames and their containing elements are not to be selected at the same time.
 * Given an array of selected elements, if there are frames and their containing elements
@@ -84,242 +47,55 @@ export const excludeElementsInFramesFromSelection = <
    }
  });

-  return excludeElementsFromFrames(selectedElements, framesInSelection);
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
 };

 export const getElementsWithinSelection = (
  elements: readonly NonDeletedExcalidrawElement[],
  selection: NonDeletedExcalidrawElement,
  elementsMap: ElementsMap,
-  // TODO remove (this flag is effectively unused AFAIK)
  excludeElementsInFrames: boolean = true,
-  boxSelectionMode: BoxSelectionMode = "contain",
-): NonDeletedExcalidrawElement[] => {
-  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] =
+) => {
+  const [selectionX1, selectionY1, selectionX2, selectionY2] =
    getElementAbsoluteCoords(selection, elementsMap);
-  const selectionX1 = Math.min(selectionStartX, selectionEndX);
-  const selectionY1 = Math.min(selectionStartY, selectionEndY);
-  const selectionX2 = Math.max(selectionStartX, selectionEndX);
-  const selectionY2 = Math.max(selectionStartY, selectionEndY);
-  const selectionBounds = [
-    selectionX1,
-    selectionY1,
-    selectionX2,
-    selectionY2,
-  ] as Bounds;
-  const selectionEdges = [
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX1, selectionY1),
-      pointFrom(selectionX2, selectionY1),
-    ),
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX2, selectionY1),
-      pointFrom(selectionX2, selectionY2),
-    ),
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX2, selectionY2),
-      pointFrom(selectionX1, selectionY2),
-    ),
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX1, selectionY2),
-      pointFrom(selectionX1, selectionY1),
-    ),
-  ];

-  const framesInSelection = excludeElementsInFrames
-    ? new Set<NonDeletedExcalidrawElement["id"]>()
-    : null;
-  let elementsInSelection: NonDeletedExcalidrawElement[] = [];
+  let elementsInSelection = elements.filter((element) => {
+    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
+      element,
+      elementsMap,
+    );

-  for (const element of elements) {
-    if (shouldIgnoreElementFromSelection(element)) {
-      continue;
-    }
-
-    const strokeWidth = element.strokeWidth;
-    let labelAABB: Bounds | null = null;
-    let elementAABB = getElementBounds(element, elementsMap);
-
-    elementAABB = [
-      elementAABB[0] - strokeWidth / 2,
-      elementAABB[1] - strokeWidth / 2,
-      elementAABB[2] + strokeWidth / 2,
-      elementAABB[3] + strokeWidth / 2,
-    ] as Bounds;
-
-    // Whether the element bounds should include the bound text element bounds
-    const boundTextElement =
-      isArrowElement(element) && getBoundTextElement(element, elementsMap);
-    if (boundTextElement) {
-      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
-        element,
-        boundTextElement,
+    const containingFrame = getContainingFrame(element, elementsMap);
+    if (containingFrame) {
+      const [fx1, fy1, fx2, fy2] = getElementBounds(
+        containingFrame,
        elementsMap,
      );
-      labelAABB = [
-        x,
-        y,
-        x + boundTextElement.width,
-        y + boundTextElement.height,
-      ] as Bounds;
+
+      elementX1 = Math.max(fx1, elementX1);
+      elementY1 = Math.max(fy1, elementY1);
+      elementX2 = Math.min(fx2, elementX2);
+      elementY2 = Math.min(fy2, elementY2);
    }

-    // Clip element bounds by its containing frame (if any), since only the
-    // visible (frame-clipped) portion of the element is relevant for selection.
-    const associatedFrame = getContainingFrame(element, elementsMap);
-    if (
-      associatedFrame &&
-      elementOverlapsWithFrame(element, associatedFrame, elementsMap)
-    ) {
-      const frameAABB = getElementBounds(associatedFrame, elementsMap);
-      elementAABB = [
-        Math.max(elementAABB[0], frameAABB[0]),
-        Math.max(elementAABB[1], frameAABB[1]),
-        Math.min(elementAABB[2], frameAABB[2]),
-        Math.min(elementAABB[3], frameAABB[3]),
-      ] as Bounds;
+    return (
+      element.locked === false &&
+      element.type !== "selection" &&
+      !isBoundToContainer(element) &&
+      selectionX1 <= elementX1 &&
+      selectionY1 <= elementY1 &&
+      selectionX2 >= elementX2 &&
+      selectionY2 >= elementY2
+    );
+  });

-      labelAABB = labelAABB
-        ? ([
-            Math.max(labelAABB[0], frameAABB[0]),
-            Math.max(labelAABB[1], frameAABB[1]),
-            Math.min(labelAABB[2], frameAABB[2]),
-            Math.min(labelAABB[3], frameAABB[3]),
-          ] as Bounds)
-        : null;
-    }
-
-    const commonAABB = labelAABB
-      ? ([
-          Math.min(labelAABB[0], elementAABB[0]),
-          Math.min(labelAABB[1], elementAABB[1]),
-          Math.max(labelAABB[2], elementAABB[2]),
-          Math.max(labelAABB[3], elementAABB[3]),
-        ] as Bounds)
-      : elementAABB;
-
-    // ============== Evaluation ==============
-
-    // 1. If the selection box WRAPs the element's AABB, then add it to the
-    //    selection and move on, regardless of the selection mode.
-    //
-    //    PERF: This trick only works with axis-aligned box selection and the
-    //          current convex element shapes!
-    if (boundsContainBounds(selectionBounds, commonAABB)) {
-      if (framesInSelection && isFrameLikeElement(element)) {
-        framesInSelection.add(element.id);
-      }
-      elementsInSelection.push(element);
-      continue;
-    }
-
-    // 2. Handle the case where the label is overlapped by the selection box
-    if (
-      boxSelectionMode === "overlap" &&
-      labelAABB &&
-      doBoundsIntersect(selectionBounds, labelAABB)
-    ) {
-      elementsInSelection.push(element);
-      continue;
-    }
-
-    // 3. Handle the case where the selection is not wrapping the element, but
-    //    it does intersect the element's outline (non-AABB).
-    if (
-      boxSelectionMode === "overlap" &&
-      doBoundsIntersect(selectionBounds, elementAABB)
-    ) {
-      let hasIntersection = false;
-
-      // Preliminary check potential intersection imprecision
-      if (isLinearElement(element) || isFreeDrawElement(element)) {
-        const center = elementCenterPoint(element, elementsMap);
-        hasIntersection = element.points.some((point) => {
-          const rotatedPoint = pointRotateRads(
-            pointFrom<GlobalPoint>(element.x + point[0], element.y + point[1]),
-            center,
-            element.angle,
-          );
-
-          return pointInsideBounds(rotatedPoint, selectionBounds);
-        });
-      } else {
-        const nonRotatedElementBounds = getElementBounds(
-          element,
-          elementsMap,
-          true,
-        );
-        const center = elementCenterPoint(element, elementsMap);
-        hasIntersection = [
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
-              nonRotatedElementBounds[1],
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              nonRotatedElementBounds[2],
-              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
-              nonRotatedElementBounds[3],
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              nonRotatedElementBounds[0],
-              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
-            ),
-            center,
-            element.angle,
-          ),
-        ].some((point) => {
-          return pointInsideBounds(
-            pointRotateRads(point, center, element.angle),
-            selectionBounds,
-          );
-        });
-      }
-
-      if (!hasIntersection) {
-        hasIntersection = selectionEdges.some(
-          (selectionEdge) =>
-            intersectElementWithLineSegment(
-              element,
-              elementsMap,
-              selectionEdge,
-              strokeWidth / 2,
-              true, // Stop at first hit for better performance
-            ).length > 0,
-        );
-      }
-
-      if (hasIntersection) {
-        if (framesInSelection && isFrameLikeElement(element)) {
-          framesInSelection.add(element.id);
-        }
-
-        elementsInSelection.push(element);
-        continue;
-      }
-    }
-
-    // 4. We don't need to handle when the selection is inside the element
-    //    as it is separately handled in App.
-  }
-
-  elementsInSelection = framesInSelection
-    ? excludeElementsFromFrames(elementsInSelection, framesInSelection)
+  elementsInSelection = excludeElementsInFrames
+    ? excludeElementsInFramesFromSelection(elementsInSelection)
    : elementsInSelection;

  elementsInSelection = elementsInSelection.filter((element) => {
@@ -512,19 +288,3 @@ export const getSelectionStateForElements = (
    ),
  };
 };
-
-/**
- * Returns editing or single-selected text element, if any.
- */
-export const getActiveTextElement = (
-  selectedElements: readonly NonDeleted<ExcalidrawElement>[],
-  appState: Pick<AppState, "editingTextElement">,
-) => {
-  const activeTextElement =
-    appState.editingTextElement ||
-    (selectedElements.length === 1 &&
-      isTextElement(selectedElements[0]) &&
-      selectedElements[0]);
-
-  return activeTextElement || null;
-};
@@ -57,8 +57,8 @@ import { headingForPointIsHorizontal } from "./heading";

 import { canChangeRoundness } from "./comparisons";
 import {
-  elementCenterPoint,
  getArrowheadPoints,
+  getCenterForBounds,
  getDiamondPoints,
  getElementAbsoluteCoords,
 } from "./bounds";
@@ -583,11 +583,7 @@ const getArrowheadShapes = (

 export const generateLinearCollisionShape = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-  elementsMap: ElementsMap,
-): {
-  op: string;
-  data: number[];
-}[] => {
+) => {
  const generator = new RoughGenerator();
  const options: Options = {
    seed: element.seed,
@@ -596,7 +592,20 @@ export const generateLinearCollisionShape = (
    roughness: 0,
    preserveVertices: true,
  };
-  const center = elementCenterPoint(element, elementsMap);
+  const center = getCenterForBounds(
+    // Need a non-rotated center point
+    element.points.reduce(
+      (acc, point) => {
+        return [
+          Math.min(element.x + point[0], acc[0]),
+          Math.min(element.y + point[1], acc[1]),
+          Math.max(element.x + point[0], acc[2]),
+          Math.max(element.y + point[1], acc[3]),
+        ];
+      },
+      [Infinity, Infinity, -Infinity, -Infinity],
+    ),
+  );

  switch (element.type) {
    case "line":
@@ -1,56 +1,59 @@
-import { arrayToMap } from "@excalidraw/common";
+import { arrayToMapWithIndex } from "@excalidraw/common";

 import type { ExcalidrawElement } from "./types";

-const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
-  const groupIdAtLevel = (element: ExcalidrawElement, level: number) => {
-    return element.groupIds[element.groupIds.length - level - 1];
-  };
+const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
+  const origElements: ExcalidrawElement[] = elements.slice();
+  const sortedElements = new Set<ExcalidrawElement>();

-  const orderLevel = (
-    levelElements: readonly ExcalidrawElement[],
-    level: number,
+  const orderInnerGroups = (
+    elements: readonly ExcalidrawElement[],
  ): ExcalidrawElement[] => {
-    const buckets = new Map<string, ExcalidrawElement[]>();
-    // Slots preserve first-occurrence order: a groupId reserves its slot
-    // the first time one of its members is seen; loose elements occupy
-    // their own slot. Groups are then expanded (and recursed into) in place.
-    const slots: (ExcalidrawElement | string)[] = [];
-
-    for (const element of levelElements) {
-      const groupId = groupIdAtLevel(element, level);
-      if (groupId === undefined) {
-        slots.push(element);
-        continue;
+    const firstGroupSig = elements[0]?.groupIds?.join("");
+    const aGroup: ExcalidrawElement[] = [elements[0]];
+    const bGroup: ExcalidrawElement[] = [];
+    for (const element of elements.slice(1)) {
+      if (element.groupIds?.join("") === firstGroupSig) {
+        aGroup.push(element);
+      } else {
+        bGroup.push(element);
      }
-      let bucket = buckets.get(groupId);
-      if (!bucket) {
-        bucket = [];
-        buckets.set(groupId, bucket);
-        slots.push(groupId);
-      }
-      bucket.push(element);
    }
-
-    return slots.flatMap((slot) =>
-      typeof slot === "string"
-        ? orderLevel(buckets.get(slot)!, level + 1)
-        : [slot],
-    );
+    return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
  };

-  // `groupIds` is stored innermost-first, so the outermost group is the
-  // last entry. We recurse from level 0 (outermost) inward.
-  const sortedElements = orderLevel(elements, 0);
+  const groupHandledElements = new Map<string, true>();
+
+  origElements.forEach((element, idx) => {
+    if (groupHandledElements.has(element.id)) {
+      return;
+    }
+    if (element.groupIds?.length) {
+      const topGroup = element.groupIds[element.groupIds.length - 1];
+      const groupElements = origElements.slice(idx).filter((element) => {
+        const ret = element?.groupIds?.some((id) => id === topGroup);
+        if (ret) {
+          groupHandledElements.set(element!.id, true);
+        }
+        return ret;
+      });
+
+      for (const elem of orderInnerGroups(groupElements)) {
+        sortedElements.add(elem);
+      }
+    } else {
+      sortedElements.add(element);
+    }
+  });

  // if there's a bug which resulted in losing some of the elements, return
  // original instead as that's better than losing data
-  if (sortedElements.length !== elements.length) {
-    console.error("defragmentGroups: lost some elements... bailing!");
+  if (sortedElements.size !== elements.length) {
+    console.error("normalizeGroupElementOrder: lost some elements... bailing!");
    return elements;
  }

-  return sortedElements;
+  return [...sortedElements];
 };

 /**
@@ -65,40 +68,39 @@ const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
 const normalizeBoundElementsOrder = (
  elements: readonly ExcalidrawElement[],
 ) => {
-  const elementsMap = arrayToMap(elements);
+  const elementsMap = arrayToMapWithIndex(elements);

+  const origElements: (ExcalidrawElement | null)[] = elements.slice();
  const sortedElements = new Set<ExcalidrawElement>();

-  for (const element of elements) {
-    if (sortedElements.has(element)) {
-      continue;
+  origElements.forEach((element, idx) => {
+    if (!element) {
+      return;
    }
-
    if (element.boundElements?.length) {
      sortedElements.add(element);
-      for (const boundElement of element.boundElements) {
+      origElements[idx] = null;
+      element.boundElements.forEach((boundElement) => {
        const child = elementsMap.get(boundElement.id);
        if (child && boundElement.type === "text") {
-          sortedElements.add(child);
+          sortedElements.add(child[0]);
+          origElements[child[1]] = null;
        }
+      });
+    } else if (element.type === "text" && element.containerId) {
+      const parent = elementsMap.get(element.containerId);
+      if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
+        sortedElements.add(element);
+        origElements[idx] = null;
+
+        // if element has a container and container lists it, skip this element
+        // as it'll be taken care of by the container
      }
-      continue;
+    } else {
+      sortedElements.add(element);
+      origElements[idx] = null;
    }
-
-    // if element has a container and container lists it, skip this element
-    // as it'll be taken care of by the container
-    if (
-      element.type === "text" &&
-      element.containerId &&
-      elementsMap
-        .get(element.containerId)
-        ?.boundElements?.some((el) => el.id === element.id)
-    ) {
-      continue;
-    }
-
-    sortedElements.add(element);
-  }
+  });

  // if there's a bug which resulted in losing some of the elements, return
  // original instead as that's better than losing data
@@ -115,5 +117,5 @@ const normalizeBoundElementsOrder = (
 export const normalizeElementOrder = (
  elements: readonly ExcalidrawElement[],
 ) => {
-  return normalizeBoundElementsOrder(defragmentGroups(elements));
+  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
 };
@@ -347,7 +347,6 @@ export const getContainerCenter = (
    midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
      container,
      index + 1,
-      elementsMap,
    );
  }
  return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -442,8 +441,7 @@ const VALID_CONTAINER_TYPES = new Set([

 export const isValidTextContainer = (element: {
  type: ExcalidrawElementType;
-}): element is ExcalidrawTextContainer =>
-  VALID_CONTAINER_TYPES.has(element.type);
+}) => VALID_CONTAINER_TYPES.has(element.type);

 export const computeContainerDimensionForBoundText = (
  dimension: number,
@@ -4,22 +4,6 @@ import { charWidth, getLineWidth } from "./textMeasurements";

 import type { FontString } from "./types";

-/**
- * This module approximates browser-like soft wrapping for Excalidraw text.
- *
- * The flow is:
- * 1. `parseTokens()` splits a hard line into breakable tokens using a unicode-aware regex.
- * 2. `getWrappedTextLines()` reflows each hard line into one or more visual lines and
- *    records where each visual line came from in the source text.
- * 3. `wrapLine()` assembles tokens into lines, and `wrapWord()` handles a single token
- *    that is wider than the available width.
- * 4. `trimLine()` / `trimLineEndAtSoftBreak()` mirror browser behavior around trailing
- *    whitespace so the rendered text stays consistent with what users see on canvas.
- *
- * Mostly, you'll want to use wrapText(). getWrappedTextLines() is for callers
- * that need metadata such as mapping visual lines back to `originalText`
- * for caret placement or future editor features.
- */
 let cachedCjkRegex: RegExp | undefined;
 let cachedLineBreakRegex: RegExp | undefined;
 let cachedEmojiRegex: RegExp | undefined;
@@ -374,10 +358,6 @@ const Break = {

 /**
 * Breaks the line into the tokens based on the found line break opporutnities.
- *
- * Note: tokenization normalizes to NFC first so decomposed graphemes are treated as
- * their composed variants for wrapping. Any code that needs exact source offsets should
- * keep in mind that this assumes the input text is already NFC-normalized.
 */
 export const parseTokens = (line: string) => {
  const breakLineRegex = getLineBreakRegex();
@@ -390,120 +370,56 @@ export const parseTokens = (line: string) => {

 /**
 * Wraps the original text into the lines based on the given width.
- *
- * This is a convenience adapter over `getWrappedTextLines()` for call sites
- * that only need the rendered wrapped string and not the source offsets.
 */
 export const wrapText = (
  text: string,
  font: FontString,
  maxWidth: number,
 ): string => {
-  return getWrappedTextLines(text, font, maxWidth)
-    .map((line) => line.text)
-    .join("\n");
-};
-
-/**
- * A single rendered visual line produced from the original text.
- *
- * `start` and `end` are end-exclusive code-unit offsets into the original text, and do
- * not include synthetic soft line breaks inserted by this module. If trailing whitespace
- * was trimmed away at a wrap boundary, `end` points to the last rendered character.
- */
-export type WrappedTextLine = {
-  text: string;
-  start: number;
-  end: number;
-};
-
-/**
- * Splits only on existing hard line breaks and preserves original offsets.
- */
-const getHardLineBreaks = (text: string): WrappedTextLine[] => {
-  let offset = 0;
-
-  return text.split("\n").map((line) => {
-    const start = offset;
-    const end = start + line.length;
-
-    offset = end + 1;
-
-    return {
-      text: line,
-      start,
-      end,
-    };
-  });
-};
-
-/**
- * Returns the rendered visual lines together with their source offsets.
- *
- * This is the source-of-truth wrapping pipeline for callers that need more than the
- * final wrapped string, for example caret placement or future editor/rich-text mapping.
- */
-export const getWrappedTextLines = (
-  text: string,
-  font: FontString,
-  maxWidth: number,
-): WrappedTextLine[] => {
  // if maxWidth is not finite or NaN which can happen in case of bugs in
  // computation, we need to make sure we don't continue as we'll end up
  // in an infinite loop
  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return getHardLineBreaks(text);
+    return text;
  }

-  const lines: WrappedTextLine[] = [];
-  let offset = 0;
+  const lines: Array<string> = [];
+  const originalLines = text.split("\n");

-  for (const originalLine of text.split("\n")) {
-    const originalLineWidth = getLineWidth(originalLine, font);
+  for (const originalLine of originalLines) {
+    const currentLineWidth = getLineWidth(originalLine, font);

-    if (originalLineWidth <= maxWidth) {
-      lines.push({
-        text: originalLine,
-        start: offset,
-        end: offset + originalLine.length,
-      });
-    } else {
-      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
+    if (currentLineWidth <= maxWidth) {
+      lines.push(originalLine);
+      continue;
    }

-    offset += originalLine.length + 1;
+    const wrappedLine = wrapLine(originalLine, font, maxWidth);
+    lines.push(...wrappedLine);
  }

-  return lines;
+  return lines.join("\n");
 };

 /**
- * Wraps a single hard line into one or more visual lines.
- *
- * The line-local offsets are tracked in original-text code units so
- * we can map the visual line back to the source.
+ * Wraps the original line into the lines based on the given width.
 */
 const wrapLine = (
  line: string,
  font: FontString,
  maxWidth: number,
-  lineStart: number,
-): WrappedTextLine[] => {
-  const lines: WrappedTextLine[] = [];
+): string[] => {
+  const lines: Array<string> = [];
  const tokens = parseTokens(line);
+  const tokenIterator = tokens[Symbol.iterator]();

  let currentLine = "";
-  let currentLineStart = lineStart;
-  let currentLineEnd = lineStart;
  let currentLineWidth = 0;
-  // Tracks the next token's code-unit position in the original source string.
-  let tokenOffset = lineStart;
-  let tokenIndex = 0;

-  while (tokenIndex < tokens.length) {
-    const token = tokens[tokenIndex];
-    const tokenStart = tokenOffset;
-    const tokenEnd = tokenStart + token.length;
+  let iterator = tokenIterator.next();
+
+  while (!iterator.done) {
+    const token = iterator.value;
    const testLine = currentLine + token;

    // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
@@ -513,59 +429,37 @@ const wrapLine = (

    // build up the current line, skipping length check for possibly trailing whitespaces
    if (/\s/.test(token) || testLineWidth <= maxWidth) {
-      if (!currentLine) {
-        currentLineStart = tokenStart;
-      }
      currentLine = testLine;
-      currentLineEnd = tokenEnd;
      currentLineWidth = testLineWidth;
-      tokenOffset = tokenEnd;
-      tokenIndex++;
+      iterator = tokenIterator.next();
      continue;
    }

    // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
    if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
-        text: "",
-        start: tokenStart,
-        end: tokenStart,
-      };
+      const wrappedWord = wrapWord(token, font, maxWidth);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
      const precedingLines = wrappedWord.slice(0, -1);

      lines.push(...precedingLines);

      // trailing line of the wrapped word might still be joined with next token/s
-      currentLine = trailingLine.text;
-      currentLineStart = trailingLine.start;
-      currentLineEnd = trailingLine.end;
-      currentLineWidth = getLineWidth(trailingLine.text, font);
-      tokenOffset = tokenEnd;
-      tokenIndex++;
+      currentLine = trailingLine;
+      currentLineWidth = getLineWidth(trailingLine, font);
+      iterator = tokenIterator.next();
    } else {
      // push & reset, but don't iterate on the next token, as we didn't use it yet!
-      lines.push(
-        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd),
-      );
+      lines.push(currentLine.trimEnd());

      // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
      currentLine = "";
-      currentLineStart = tokenStart;
-      currentLineEnd = tokenStart;
      currentLineWidth = 0;
    }
  }

  // iterator done, push the trailing line if exists
  if (currentLine) {
-    const trailingLine = trimLine(
-      currentLine,
-      currentLineStart,
-      currentLineEnd,
-      font,
-      maxWidth,
-    );
+    const trailingLine = trimLine(currentLine, font, maxWidth);
    lines.push(trailingLine);
  }

@@ -573,100 +467,59 @@ const wrapLine = (
 };

 /**
- * Wraps a single word that could not be placed on an empty line as-is.
+ * Wraps the word into the lines based on the given width.
 */
 const wrapWord = (
  word: string,
  font: FontString,
  maxWidth: number,
-  wordStart: number,
-): WrappedTextLine[] => {
+): Array<string> => {
  // multi-codepoint emojis are already broken apart and shouldn't be broken further
  if (getEmojiRegex().test(word)) {
-    return [
-      {
-        text: word,
-        start: wordStart,
-        end: wordStart + word.length,
-      },
-    ];
+    return [word];
  }

  satisfiesWordInvariant(word);

-  const lines: WrappedTextLine[] = [];
+  const lines: Array<string> = [];
  const chars = Array.from(word);

  let currentLine = "";
-  let currentLineStart = wordStart;
-  let currentLineEnd = wordStart;
  let currentLineWidth = 0;
-  let offset = wordStart;

  for (const char of chars) {
-    const charStart = offset;
-    const charEnd = charStart + char.length;
    const _charWidth = charWidth.calculate(char, font);
    const testLineWidth = currentLineWidth + _charWidth;

    if (testLineWidth <= maxWidth) {
-      if (!currentLine) {
-        currentLineStart = charStart;
-      }
      currentLine = currentLine + char;
-      currentLineEnd = charEnd;
      currentLineWidth = testLineWidth;
-      offset = charEnd;
      continue;
    }

    if (currentLine) {
-      lines.push({
-        text: currentLine,
-        start: currentLineStart,
-        end: currentLineEnd,
-      });
+      lines.push(currentLine);
    }

    currentLine = char;
-    currentLineStart = charStart;
-    currentLineEnd = charEnd;
    currentLineWidth = _charWidth;
-    offset = charEnd;
  }

  if (currentLine) {
-    lines.push({
-      text: currentLine,
-      start: currentLineStart,
-      end: currentLineEnd,
-    });
+    lines.push(currentLine);
  }

  return lines;
 };

 /**
- * Trims trailing whitespace that is exceeding the `maxWidth`.
- *
- * Used for the trailing visual line of a hard line, where some trailing
- * whitespace may still be visible if it fits into the available width.
+ * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`.
 */
-const trimLine = (
-  line: string,
-  start: number,
-  end: number,
-  font: FontString,
-  maxWidth: number,
-): WrappedTextLine => {
+const trimLine = (line: string, font: FontString, maxWidth: number) => {
  const shouldTrimWhitespaces = getLineWidth(line, font) > maxWidth;

  if (!shouldTrimWhitespaces) {
-    return {
-      text: line,
-      start,
-      end,
-    };
+    return line;
  }

  // defensively default to `trimeEnd` in case the regex does not match
@@ -690,30 +543,7 @@ const trimLine = (
    trimmedLineWidth = testLineWidth;
  }

-  return {
-    text: trimmedLine,
-    start,
-    end: end - (line.length - trimmedLine.length),
-  };
-};
-
-/**
- * Used for internal soft-wrap boundaries, where trailing whitespace should not
- * survive into the rendered line even though it still exists in the original
- * text.
- */
-const trimLineEndAtSoftBreak = (
-  line: string,
-  start: number,
-  end: number,
-): WrappedTextLine => {
-  const trimmedLine = line.trimEnd();
-
-  return {
-    text: trimmedLine,
-    start,
-    end: end - (line.length - trimmedLine.length),
-  };
+  return trimmedLine;
 };

 /**
@@ -124,7 +124,6 @@ const setElementShapesCacheEntry = <T extends ExcalidrawElement>(
 */
 export function deconstructLinearOrFreeDrawElement(
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-  elementsMap: ElementsMap,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
  const cachedShape = getElementShapesCacheEntry(element, 0);

@@ -132,7 +131,10 @@ export function deconstructLinearOrFreeDrawElement(
    return cachedShape;
  }

-  const ops = generateLinearCollisionShape(element, elementsMap);
+  const ops = generateLinearCollisionShape(element) as {
+    op: string;
+    data: number[];
+  }[];
  const lines = [];
  const curves = [];

@@ -1,4 +1,4 @@
-import { arrayToMap, reseed } from "@excalidraw/common";
+import { arrayToMap } from "@excalidraw/common";
 import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
@@ -12,7 +12,6 @@ import { hitElementItself } from "../src/collision";
 describe("check rotated elements can be hit:", () => {
  beforeEach(async () => {
    localStorage.clear();
-    reseed(7);
    await render(<Excalidraw handleKeyboardGlobally={true} />);
  });

@@ -57,7 +56,6 @@ describe("hitElementItself cache", () => {
    });

    localStorage.clear();
-    reseed(7);
    await render(<Excalidraw handleKeyboardGlobally={true} />);
  });

@@ -11,12 +11,9 @@ import {
  render,
 } from "@excalidraw/excalidraw/tests/test-utils";

-import { elementOverlapsWithFrame } from "../src/frame";
+import { shouldApplyFrameClip } from "../src/frame";

-import type {
-  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-} from "../src/types";
+import type { ExcalidrawElement } from "../src/types";

 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -131,26 +128,6 @@ describe("adding elements to frames", () => {
    });
  });

-  it("should treat an element fully containing a frame as overlapping the frame", () => {
-    const containingRect = API.createElement({
-      type: "rectangle",
-      x: -50,
-      y: -50,
-      width: 250,
-      height: 250,
-    });
-
-    API.setElements([containingRect, frame]);
-
-    expect(
-      elementOverlapsWithFrame(
-        containingRect,
-        frame as ExcalidrawFrameLikeElement,
-        arrayToMap(h.elements),
-      ),
-    ).toBe(true);
-  });
-
  const commonTestCases = async (
    func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
  ) => {
@@ -441,22 +418,6 @@ describe("adding elements to frames", () => {
  describe("dragging elements into the frame", async () => {
    await commonTestCases(dragElementIntoFrame);

-    it("should add a dragged element fully containing the frame", () => {
-      const containingRect = API.createElement({
-        type: "rectangle",
-        x: 220,
-        y: 20,
-        width: 300,
-        height: 300,
-      });
-
-      API.setElements([frame, containingRect]);
-
-      dragElementIntoFrame(frame, containingRect);
-
-      expect(API.getElement(containingRect).frameId).toBe(frame.id);
-    });
-
    it.skip("should drag element inside, duplicate it and keep it in frame", () => {
      API.setElements([frame, rect2]);

@@ -603,3 +564,78 @@ describe("adding elements to frames", () => {
    });
  });
 });
+
+describe("frame clipping", () => {
+  const getAppStateForFrameClip = () =>
+    ({
+      frameRendering: {
+        enabled: true,
+        clip: true,
+      },
+      selectedElementsAreBeingDragged: false,
+      selectedElementIds: {},
+      frameToHighlight: null,
+      editingGroupId: null,
+    } as any);
+
+  it("clips a frame child even when fully outside the frame bounds", () => {
+    const frame = API.createElement({
+      type: "frame",
+      id: "frame",
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+    });
+    const outsideChild = API.createElement({
+      type: "rectangle",
+      id: "outside-child",
+      x: 250,
+      y: 250,
+      width: 50,
+      height: 50,
+      frameId: frame.id,
+    });
+
+    const elementsMap = arrayToMap([outsideChild, frame]);
+
+    expect(
+      shouldApplyFrameClip(
+        outsideChild,
+        frame,
+        getAppStateForFrameClip(),
+        elementsMap,
+      ),
+    ).toBe(true);
+  });
+
+  it("does not clip an outside element that does not belong to the frame", () => {
+    const frame = API.createElement({
+      type: "frame",
+      id: "frame",
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+    });
+    const outsideElement = API.createElement({
+      type: "rectangle",
+      id: "outside",
+      x: 250,
+      y: 250,
+      width: 50,
+      height: 50,
+    });
+
+    const elementsMap = arrayToMap([outsideElement, frame]);
+
+    expect(
+      shouldApplyFrameClip(
+        outsideElement,
+        frame,
+        getAppStateForFrameClip(),
+        elementsMap,
+      ),
+    ).toBe(false);
+  });
+});
@@ -326,59 +326,19 @@ describe("normalizeElementsOrder", () => {
      ]),
      [
        "BA_rect1",
-        "CBA_rect3",
-        "CBA_rect7",
        "BA_rect5",
        "BA_rect6",
        "A_rect2",
        "A_rect5",
+        "CBA_rect3",
+        "CBA_rect7",
        "rect4",
        "X_rect8",
-        "YX_rect10",
        "X_rect11",
+        "YX_rect10",
        "rect9",
      ],
    );
-    assertOrder(
-      normalizeElementOrder([
-        API.createElement({
-          id: "A_rect1",
-          type: "rectangle",
-          groupIds: ["A"],
-        }),
-        API.createElement({
-          id: "CBA_rect2",
-          type: "rectangle",
-          groupIds: ["C", "B", "A"],
-        }),
-        API.createElement({
-          id: "A_rect3",
-          type: "rectangle",
-          groupIds: ["A"],
-        }),
-      ]),
-      ["A_rect1", "CBA_rect2", "A_rect3"],
-    );
-    assertOrder(
-      normalizeElementOrder([
-        API.createElement({
-          id: "abcT_rect1",
-          type: "rectangle",
-          groupIds: ["ab", "c", "T"],
-        }),
-        API.createElement({
-          id: "abcT_rect2",
-          type: "rectangle",
-          groupIds: ["a", "bc", "T"],
-        }),
-        API.createElement({
-          id: "abcT_rect3",
-          type: "rectangle",
-          groupIds: ["ab", "c", "T"],
-        }),
-      ]),
-      ["abcT_rect1", "abcT_rect3", "abcT_rect2"],
-    );
  });

  // TODO
@@ -1,8 +1,4 @@
-import {
-  getWrappedTextLines,
-  parseTokens,
-  wrapText,
-} from "../src/textWrapping";
+import { wrapText, parseTokens } from "../src/textWrapping";

 import type { FontString } from "../src/types";

@@ -106,71 +102,6 @@ describe("Test wrapText", () => {
    expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
  });

-  it("should retain original text offsets for wrapped lines", () => {
-    expect(getWrappedTextLines("Hello World!", font, 60)).toEqual([
-      {
-        text: "Hello",
-        start: 0,
-        end: 5,
-      },
-      {
-        text: "World!",
-        start: 6,
-        end: 12,
-      },
-    ]);
-  });
-
-  it("should exclude whitespace trimmed away at soft-wrap boundaries from line offsets", () => {
-    expect(getWrappedTextLines("  Hello  World", font, 90)).toEqual([
-      {
-        text: "  Hello",
-        start: 0,
-        end: 7,
-      },
-      {
-        text: "World",
-        start: 9,
-        end: 14,
-      },
-    ]);
-  });
-
-  it("should retain offsets when wrapping a single long token", () => {
-    expect(getWrappedTextLines("Excalidraw", font, 50)).toEqual([
-      {
-        text: "Excal",
-        start: 0,
-        end: 5,
-      },
-      {
-        text: "idraw",
-        start: 5,
-        end: 10,
-      },
-    ]);
-  });
-
-  it("should preserve empty hard lines in metadata", () => {
-    expect(getWrappedTextLines("A\n\nB", font, 100)).toEqual([
-      {
-        text: "A",
-        start: 0,
-        end: 1,
-      },
-      {
-        text: "",
-        start: 2,
-        end: 2,
-      },
-      {
-        text: "B",
-        start: 3,
-        end: 4,
-      },
-    ]);
-  });
-
  describe("When text is CJK", () => {
    it("should break each CJK character when width is very small", () => {
      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
@@ -1,145 +0,0 @@
-import {
-  getElementsInGroup,
-  isSomeElementSelected,
-  makeNextSelectedElementIds,
-  selectGroupsForSelectedElements,
-} from "@excalidraw/element";
-import { CaptureUpdateAction } from "@excalidraw/element";
-import { KEYS, isWritableElement, updateActiveTool } from "@excalidraw/common";
-
-import type { GroupId } from "@excalidraw/element/types";
-
-import { register } from "./register";
-
-import type { AppClassProperties, AppState } from "../types";
-
-const getNextActiveTool = (
-  appState: Readonly<AppState>,
-  app: AppClassProperties,
-) => {
-  if (appState.activeTool.type === "eraser") {
-    return updateActiveTool(appState, {
-      ...(appState.activeTool.lastActiveTool || {
-        type: app.state.preferredSelectionTool.type,
-      }),
-      lastActiveToolBeforeEraser: null,
-    });
-  }
-
-  return updateActiveTool(appState, {
-    type: app.state.preferredSelectionTool.type,
-  });
-};
-
-const getParentEditingGroupId = (
-  appState: Readonly<AppState>,
-  app: AppClassProperties,
-  selectedElementIds: AppState["selectedElementIds"],
-): GroupId | null => {
-  if (!appState.editingGroupId) {
-    return null;
-  }
-
-  const nonDeletedElements = app.scene.getNonDeletedElements();
-  const selectedElements = app.scene.getSelectedElements({
-    selectedElementIds,
-    elements: nonDeletedElements,
-  });
-  const candidateElements = selectedElements.length
-    ? selectedElements
-    : getElementsInGroup(nonDeletedElements, appState.editingGroupId);
-
-  for (const element of candidateElements) {
-    const editingGroupIndex = element.groupIds.indexOf(appState.editingGroupId);
-    if (editingGroupIndex !== -1 && element.groupIds[editingGroupIndex + 1]) {
-      return element.groupIds[editingGroupIndex + 1] as GroupId;
-    }
-  }
-
-  return null;
-};
-
-export const actionDeselect = register({
-  name: "deselect",
-  label: "",
-  trackEvent: false,
-  perform: (_elements, appState, _, app) => {
-    const activeTool = getNextActiveTool(appState, app);
-
-    if (appState.editingGroupId) {
-      const nonDeletedElements = app.scene.getNonDeletedElements();
-      const selectedElementIds =
-        Object.keys(appState.selectedElementIds).length > 0
-          ? appState.selectedElementIds
-          : getElementsInGroup(
-              nonDeletedElements,
-              appState.editingGroupId,
-            ).reduce((acc, element) => {
-              acc[element.id] = true;
-              return acc;
-            }, {} as Record<string, true>);
-
-      return {
-        appState: {
-          ...appState,
-          ...selectGroupsForSelectedElements(
-            {
-              editingGroupId: getParentEditingGroupId(
-                appState,
-                app,
-                selectedElementIds,
-              ),
-              selectedElementIds,
-            },
-            nonDeletedElements,
-            appState,
-            app,
-          ),
-          activeEmbeddable: null,
-          activeTool,
-          selectedLinearElement: null,
-          selectionElement: null,
-          showHyperlinkPopup: false,
-          suggestedBinding: null,
-        },
-        captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-      };
-    }
-
-    return {
-      appState: {
-        ...appState,
-        activeEmbeddable: null,
-        activeTool,
-        editingGroupId: null,
-        selectedElementIds: makeNextSelectedElementIds({}, appState),
-        selectedGroupIds: {},
-        selectedLinearElement: null,
-        selectionElement: null,
-        showHyperlinkPopup: false,
-        suggestedBinding: null,
-      },
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-    };
-  },
-  keyTest: (event, appState, _, app) => {
-    if (event.key !== KEYS.ESCAPE) {
-      return false;
-    }
-
-    if (isWritableElement(event.target)) {
-      return false;
-    }
-
-    return (
-      !appState.newElement &&
-      appState.multiElement === null &&
-      !appState.selectedLinearElement?.isEditing &&
-      (appState.activeEmbeddable !== null ||
-        appState.activeTool.type !== app.state.preferredSelectionTool.type ||
-        !!appState.editingGroupId ||
-        !!appState.selectedLinearElement ||
-        isSomeElementSelected(app.scene.getNonDeletedElements(), appState))
-    );
-  },
-});
@@ -329,6 +329,7 @@ export const actionFinalize = register<FormData>({
        selectionElement: null,
        multiElement: null,
        editingTextElement: null,
+        startBoundElement: null,
        suggestedBinding: null,
        selectedElementIds:
          element &&
@@ -347,7 +348,9 @@ export const actionFinalize = register<FormData>({
    };
  },
  keyTest: (event, appState) =>
-    (event.key === KEYS.ESCAPE && appState.selectedLinearElement?.isEditing) ||
+    (event.key === KEYS.ESCAPE &&
+      (appState.selectedLinearElement?.isEditing ||
+        (!appState.newElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
  PanelComponent: ({ appState, updateData, data }) => (
@@ -191,7 +191,7 @@ export const getFormValue = function <T extends Primitive>(
  elements: readonly ExcalidrawElement[],
  app: AppClassProperties,
  getAttribute: (element: ExcalidrawElement) => T,
-  elementPredicate: true | ((element: ExcalidrawElement) => boolean),
+  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
  const editingTextElement = app.state.editingTextElement;
@@ -209,9 +209,9 @@ export const getFormValue = function <T extends Primitive>(
    if (hasSelection) {
      const selectedElements = app.scene.getSelectedElements(app.state);
      const targetElements =
-        elementPredicate === true
+        isRelevantElement === true
          ? selectedElements
-          : selectedElements.filter((el) => elementPredicate(el));
+          : selectedElements.filter((el) => isRelevantElement(el));

      ret =
        reduceToCommonValue(targetElements, getAttribute) ??
@@ -730,28 +730,9 @@ export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
-  PanelComponent: ({ elements, appState, app, updateData }) => {
-    const opacity = getFormValue(
-      elements,
-      app,
-      (element) => element.opacity,
-      true,
-      (hasSelection) => (hasSelection ? null : appState.currentItemOpacity),
-    );
-
-    return (
-      <Range
-        label={t("labels.opacity")}
-        value={opacity ?? appState.currentItemOpacity}
-        hasCommonValue={opacity !== null}
-        onChange={updateData}
-        min={0}
-        max={100}
-        step={10}
-        testId="opacity"
-      />
-    );
-  },
+  PanelComponent: ({ app, updateData }) => (
+    <Range updateData={updateData} app={app} testId="opacity" />
+  ),
 });

 export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
@@ -1,24 +1,24 @@
 import { getFontString } from "@excalidraw/common";

-import { isExcalidrawElement, newElementWith } from "@excalidraw/element";
+import { newElementWith } from "@excalidraw/element";
 import { measureText } from "@excalidraw/element";

 import { isTextElement } from "@excalidraw/element";

 import { CaptureUpdateAction } from "@excalidraw/element";

-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
 import { getSelectedElements } from "../scene";

 import { register } from "./register";

+import type { AppClassProperties } from "../types";
+
 export const actionTextAutoResize = register({
  name: "autoResize",
  label: "labels.autoResize",
  icon: null,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, _: unknown) => {
+  predicate: (elements, appState, _: unknown, app: AppClassProperties) => {
    const selectedElements = getSelectedElements(elements, appState);
    return (
      selectedElements.length === 1 &&
@@ -26,18 +26,13 @@ export const actionTextAutoResize = register({
      !selectedElements[0].autoResize
    );
  },
-  perform: (elements, appState, targetElement) => {
+  perform: (elements, appState, _, app) => {
    const selectedElements = getSelectedElements(elements, appState);

-    const targetTextElement =
-      isExcalidrawElement(targetElement) && isTextElement(targetElement)
-        ? targetElement
-        : (selectedElements[0] as ExcalidrawElement | undefined);
-
    return {
      appState,
      elements: elements.map((element) => {
-        if (element.id === targetTextElement?.id && isTextElement(element)) {
+        if (element.id === selectedElements[0].id && isTextElement(element)) {
          const metrics = measureText(
            element.originalText,
            getFontString(element),
@@ -34,7 +34,6 @@ export {
 export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";

 export { actionFinalize } from "./actionFinalize";
-export { actionDeselect } from "./actionDeselect";

 export {
  actionChangeProjectName,
@@ -114,7 +114,6 @@ export type ActionName =
  | "distributeVertically"
  | "flipHorizontal"
  | "flipVertical"
-  | "deselect"
  | "viewMode"
  | "exportWithDarkMode"
  | "toggleTheme"
@@ -99,6 +99,7 @@ export const getDefaultAppState = (): Omit<
      open: false,
      panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
    },
+    startBoundElement: null,
    suggestedBinding: null,
    frameRendering: { enabled: true, clip: true, name: true, outline: true },
    frameToHighlight: null,
@@ -127,7 +128,6 @@ export const getDefaultAppState = (): Omit<
    lockedMultiSelections: {},
    activeLockedId: null,
    bindMode: "orbit",
-    boxSelectionMode: "contain",
  };
 };

@@ -193,7 +193,6 @@ const APP_STATE_STORAGE_CONF = (<
  gridModeEnabled: { browser: true, export: true, server: true },
  height: { browser: false, export: false, server: false },
  isBindingEnabled: { browser: true, export: false, server: false },
-  boxSelectionMode: { browser: true, export: false, server: false },
  bindingPreference: { browser: true, export: false, server: false },
  isMidpointSnappingEnabled: { browser: true, export: false, server: false },
  defaultSidebarDockedPreference: {
@@ -230,6 +229,7 @@ const APP_STATE_STORAGE_CONF = (<
  selectionElement: { browser: false, export: false, server: false },
  shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
  stats: { browser: true, export: false, server: false },
+  startBoundElement: { browser: false, export: false, server: false },
  suggestedBinding: { browser: false, export: false, server: false },
  frameRendering: { browser: false, export: false, server: false },
  frameToHighlight: { browser: false, export: false, server: false },
@@ -27,7 +27,6 @@ import {
  KEYS,
  APP_NAME,
  CURSOR_TYPE,
-  DEFAULT_TRANSFORM_HANDLE_SPACING,
  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
  DEFAULT_VERTICAL_ALIGN,
  DRAGGING_THRESHOLD,
@@ -258,7 +257,6 @@ import {
  handleFocusPointPointerUp,
  maybeHandleArrowPointlikeDrag,
  getUncroppedWidthAndHeight,
-  getActiveTextElement,
 } from "@excalidraw/element";

 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
@@ -418,7 +416,6 @@ import {
 import { ElementCanvasButtons } from "../components/ElementCanvasButtons";
 import { LaserTrails } from "../laser-trails";
 import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
-import { isPointHittingTextAutoResizeHandle } from "../textAutoResizeHandle";
 import { textWysiwyg } from "../wysiwyg/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";

@@ -603,8 +600,6 @@ const YOUTUBE_VIDEO_STATES = new Map<
  ValueOf<typeof YOUTUBE_STATES>
 >();

-const MAX_EMBEDDABLE_VIEWPORT_SCALE = 4;
-
 let IS_PLAIN_PASTE = false;
 let IS_PLAIN_PASTE_TIMER = 0;
 let PLAIN_PASTE_TOAST_SHOWN = false;
@@ -689,15 +684,9 @@ class App extends React.Component<AppProps, AppState> {
  lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
  lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
    null;
-  // TODO this is a hack and we should ideally unify touch and pointer events
-  // and implement our own double click handling end-to-end (currently we're
-  // using a mix of native browser for click events and manual for touch -
-  // and browser doubleClick sucks to begin with)
-  lastPointerUpIsDoubleClick: boolean = false;
  lastPointerMoveEvent: PointerEvent | null = null;
  /** current frame pointer cords */
  lastPointerMoveCoords: { x: number; y: number } | null = null;
-  private lastCompletedCanvasClicks: { x: number; y: number }[] = [];
  /** previous frame pointer coords */
  previousPointerMoveCoords: { x: number; y: number } | null = null;
  lastViewportPosition = { x: 0, y: 0 };
@@ -1259,26 +1248,6 @@ class App extends React.Component<AppProps, AppState> {
    ) as NullableGridSize;
  };

-  private getTextCreationGridPoint = (x: number, y: number) => {
-    const effectiveGridSize = this.getEffectiveGridSize();
-
-    if (effectiveGridSize === null) {
-      return null;
-    }
-
-    const getTextCreationGridCoordinate = (coordinate: number) => {
-      const topLeftGridPoint =
-        Math.floor(coordinate / effectiveGridSize) * effectiveGridSize;
-
-      return topLeftGridPoint;
-    };
-
-    return {
-      x: getTextCreationGridCoordinate(x),
-      y: getTextCreationGridCoordinate(y),
-    };
-  };
-
  private getHTMLIFrameElement(
    element: ExcalidrawIframeLikeElement,
  ): HTMLIFrameElement | undefined {
@@ -1469,21 +1438,6 @@ class App extends React.Component<AppProps, AppState> {
    return true;
  }

-  private isDoubleClick = (
-    lastPointerEvent:
-      | PointerEvent
-      | React.PointerEvent<HTMLElement>
-      | undefined
-      | null,
-    currentPointerEvent: PointerEvent | React.PointerEvent<HTMLElement>,
-  ) => {
-    return (
-      lastPointerEvent != null &&
-      currentPointerEvent.timeStamp - lastPointerEvent.timeStamp <=
-        TAP_TWICE_TIMEOUT
-    );
-  };
-
  private isIframeLikeElementCenter(
    el: ExcalidrawIframeLikeElement | null,
    event: React.PointerEvent<HTMLElement> | PointerEvent,
@@ -1737,18 +1691,6 @@ class App extends React.Component<AppProps, AppState> {
            this.state.activeEmbeddable?.element === el &&
            this.state.activeEmbeddable?.state === "hover";

-          // scale video embeds based on zoom (capped) so that smaller embeds
-          // on canvas when zoomed are still of legible quality
-          // (note: for some embed types like gdrive, the quality is poor when
-          // scaling mid playback and works only when you initially start the
-          // playback at the higher zoom level)
-          const shouldScaleEmbeddableViewport = src?.type === "video";
-          const embeddableViewportScale = clamp(
-            shouldScaleEmbeddableViewport ? scale : 1,
-            0.75,
-            MAX_EMBEDDABLE_VIEWPORT_SCALE,
-          );
-
          return (
            <div
              key={el.id}
@@ -1815,42 +1757,31 @@ class App extends React.Component<AppProps, AppState> {
                    padding: `${el.strokeWidth}px`,
                  }}
                >
-                  <div
-                    className="excalidraw__embeddable__content"
-                    style={{
-                      width: `${embeddableViewportScale * 100}%`,
-                      height: `${embeddableViewportScale * 100}%`,
-                      transform: `scale(${1 / embeddableViewportScale})`,
-                    }}
-                  >
-                    {(isEmbeddableElement(el)
-                      ? this.props.renderEmbeddable?.(el, this.state)
-                      : null) ?? (
-                      <iframe
-                        ref={(ref) => this.cacheEmbeddableRef(el, ref)}
-                        className="excalidraw__embeddable"
-                        srcDoc={
-                          src?.type === "document"
-                            ? src.srcdoc(this.state.theme)
-                            : undefined
-                        }
-                        src={
-                          src?.type !== "document" ? src?.link ?? "" : undefined
-                        }
-                        // https://stackoverflow.com/q/18470015
-                        scrolling="no"
-                        referrerPolicy="no-referrer-when-downgrade"
-                        title="Excalidraw Embedded Content"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                        allowFullScreen={true}
-                        sandbox={`${
-                          src?.sandbox?.allowSameOrigin
-                            ? "allow-same-origin"
-                            : ""
-                        } allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
-                      />
-                    )}
-                  </div>
+                  {(isEmbeddableElement(el)
+                    ? this.props.renderEmbeddable?.(el, this.state)
+                    : null) ?? (
+                    <iframe
+                      ref={(ref) => this.cacheEmbeddableRef(el, ref)}
+                      className="excalidraw__embeddable"
+                      srcDoc={
+                        src?.type === "document"
+                          ? src.srcdoc(this.state.theme)
+                          : undefined
+                      }
+                      src={
+                        src?.type !== "document" ? src?.link ?? "" : undefined
+                      }
+                      // https://stackoverflow.com/q/18470015
+                      scrolling="no"
+                      referrerPolicy="no-referrer-when-downgrade"
+                      title="Excalidraw Embedded Content"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowFullScreen={true}
+                      sandbox={`${
+                        src?.sandbox?.allowSameOrigin ? "allow-same-origin" : ""
+                      } allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads`}
+                    />
+                  )}
                </div>
              </div>
            </div>
@@ -2390,7 +2321,6 @@ class App extends React.Component<AppProps, AppState> {
                            }
                            handleCanvasRef={this.handleInteractiveCanvasRef}
                            onContextMenu={this.handleCanvasContextMenu}
-                            onClick={this.handleCanvasClick}
                            onPointerMove={this.handleCanvasPointerMove}
                            onPointerUp={this.handleCanvasPointerUp}
                            onPointerCancel={this.removePointer}
@@ -2550,7 +2480,6 @@ class App extends React.Component<AppProps, AppState> {
    const magicFrameChildren = getElementsOverlappingFrame(
      this.scene.getNonDeletedElements(),
      magicFrame,
-      this.scene.getNonDeletedElementsMap(),
    ).filter((el) => !isMagicFrameElement(el));

    if (!magicFrameChildren.length) {
@@ -3645,14 +3574,10 @@ class App extends React.Component<AppProps, AppState> {
        this.lassoTrail.endPath();
        this.deselectElements();

+        // @ts-ignore
        this.handleCanvasDoubleClick({
          clientX: touch.clientX,
          clientY: touch.clientY,
-          type: "touch",
-          altKey: false,
-          ctrlKey: false,
-          metaKey: false,
-          shiftKey: false,
        });
      }
      didTapTwice = false;
@@ -5692,14 +5617,8 @@ class App extends React.Component<AppProps, AppState> {
    element: ExcalidrawTextElement,
    {
      isExistingElement = false,
-      initialCaretSceneCoords = null,
    }: {
      isExistingElement?: boolean;
-      /**
-       * supply null if no caret positioning is desired, and instead
-       * text should be auto-selected
-       */
-      initialCaretSceneCoords?: { x: number; y: number } | null;
    },
  ) {
    const elementsMap = this.scene.getElementsMapIncludingDeleted();
@@ -5752,13 +5671,13 @@ class App extends React.Component<AppProps, AppState> {
        const isDeleted = !nextOriginalText.trim();
        updateElement(nextOriginalText, isDeleted);

-        // keyboard-submit keeps focus on the edited object. For bound text, keep
-        // the container selected even if the text becomes empty and is deleted.
-        const elementIdToSelect = viaKeyboard
-          ? element.containerId || (!isDeleted ? element.id : null)
-          : null;
+        // select the created text element only if submitting via keyboard
+        // (when submitting via click it should act as signal to deselect)
+        if (!isDeleted && viaKeyboard) {
+          const elementIdToSelect = element.containerId
+            ? element.containerId
+            : element.id;

-        if (elementIdToSelect) {
          // needed to ensure state is updated before "finalize" action
          // that's invoked on keyboard-submit as well
          // TODO either move this into finalize as well, or handle all state
@@ -5802,7 +5721,6 @@ class App extends React.Component<AppProps, AppState> {
      element,
      excalidrawContainer: this.excalidrawContainerRef.current,
      app: this,
-      initialCaretSceneCoords,
      // when text is selected, it's hard (at least on iOS) to re-position the
      // caret (i.e. deselect). There's not much use for always selecting
      // the text on edit anyway (and users can select-all from contextmenu
@@ -5826,68 +5744,6 @@ class App extends React.Component<AppProps, AppState> {
    });
  }

-  private getSelectedTextElement(
-    container?: ExcalidrawTextContainer | null,
-  ): NonDeleted<ExcalidrawTextElement> | null {
-    const selectedElements = this.scene.getSelectedElements(this.state);
-
-    if (selectedElements.length !== 1) {
-      return null;
-    }
-
-    const selectedElement = selectedElements[0]!;
-
-    if (isTextElement(selectedElement)) {
-      return selectedElement;
-    }
-
-    if (!container) {
-      return null;
-    }
-
-    return getBoundTextElement(
-      selectedElement,
-      this.scene.getNonDeletedElementsMap(),
-    );
-  }
-
-  private getSelectedTextEditingContainerAtPosition(
-    hitElement: NonDeletedExcalidrawElement | null,
-    sceneCoords: { x: number; y: number },
-  ): ExcalidrawTextContainer | null | undefined {
-    const selectedElements = this.scene.getSelectedElements(this.state);
-
-    if (
-      selectedElements.length !== 1 ||
-      !hitElement ||
-      hitElement.id !== selectedElements[0]!.id
-    ) {
-      return null;
-    }
-
-    const selectedElement = selectedElements[0]!;
-
-    if (isTextElement(selectedElement)) {
-      return null;
-    }
-
-    if (!isValidTextContainer(selectedElement)) {
-      return undefined;
-    }
-
-    const textElement = this.getSelectedTextElement(selectedElement);
-    const hitTextElement = this.getTextElementAtPosition(
-      sceneCoords.x,
-      sceneCoords.y,
-    );
-
-    if (!textElement || hitTextElement?.id !== textElement.id) {
-      return undefined;
-    }
-
-    return selectedElement;
-  }
-
  private getTextElementAtPosition(
    x: number,
    y: number,
@@ -5901,58 +5757,6 @@ class App extends React.Component<AppProps, AppState> {
    return null;
  }

-  private isHittingTextAutoResizeHandle = (
-    selectedElements: NonDeleted<ExcalidrawElement>[],
-    point: Readonly<{ x: number; y: number }>,
-  ): boolean => {
-    const activeTextElement = getActiveTextElement(
-      selectedElements,
-      this.state,
-    );
-
-    if (
-      activeTextElement &&
-      !activeTextElement.isDeleted &&
-      !activeTextElement.autoResize &&
-      isPointHittingTextAutoResizeHandle(
-        point,
-        activeTextElement,
-        this.state.zoom.value,
-        this.editorInterface.formFactor,
-      )
-    ) {
-      return true;
-    }
-
-    return false;
-  };
-
-  private handleTextAutoResizeHandlePointerDown = (
-    selectedElements: NonDeleted<ExcalidrawElement>[],
-    point: Readonly<{ x: number; y: number }>,
-  ) => {
-    const activeTextElement = getActiveTextElement(
-      selectedElements,
-      this.state,
-    );
-    if (
-      !activeTextElement ||
-      !this.isHittingTextAutoResizeHandle(selectedElements, point)
-    ) {
-      return false;
-    }
-
-    this.actionManager.executeAction(
-      actionTextAutoResize,
-      "ui",
-      // we need to pass down the element since it may already be deselected
-      // due to the pointerdown
-      activeTextElement,
-    );
-    this.resetCursor();
-    return true;
-  };
-
  // NOTE: Hot path for hit testing, so avoid unnecessary computations
  private getElementAtPosition(
    x: number,
@@ -6165,7 +5969,6 @@ class App extends React.Component<AppProps, AppState> {
    insertAtParentCenter = true,
    container,
    autoEdit = true,
-    initialCaretSceneCoords,
  }: {
    /** X position to insert text at */
    sceneX: number;
@@ -6175,7 +5978,6 @@ class App extends React.Component<AppProps, AppState> {
    insertAtParentCenter?: boolean;
    container?: ExcalidrawTextContainer | null;
    autoEdit?: boolean;
-    initialCaretSceneCoords?: { x: number; y: number };
  }) => {
    let shouldBindToContainer = false;

@@ -6196,9 +5998,24 @@ class App extends React.Component<AppProps, AppState> {
        shouldBindToContainer = true;
      }
    }
-    const existingTextElement =
-      this.getSelectedTextElement(container) ||
-      this.getTextElementAtPosition(sceneX, sceneY);
+    let existingTextElement: NonDeleted<ExcalidrawTextElement> | null = null;
+
+    const selectedElements = this.scene.getSelectedElements(this.state);
+
+    if (selectedElements.length === 1) {
+      if (isTextElement(selectedElements[0])) {
+        existingTextElement = selectedElements[0];
+      } else if (container) {
+        existingTextElement = getBoundTextElement(
+          selectedElements[0],
+          this.scene.getNonDeletedElementsMap(),
+        );
+      } else {
+        existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
+      }
+    } else {
+      existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
+    }

    const fontFamily =
      existingTextElement?.fontFamily || this.state.currentItemFontFamily;
@@ -6245,32 +6062,11 @@ class App extends React.Component<AppProps, AppState> {
      y: sceneY,
    });

-    const textCreationGridPoint = this.getTextCreationGridPoint(sceneX, sceneY);
-
-    const newTextElementPosition = parentCenterPosition
-      ? {
-          x: parentCenterPosition.elementCenterX,
-          y: parentCenterPosition.elementCenterY,
-        }
-      : !existingTextElement
-      ? {
-          x: textCreationGridPoint?.x ?? sceneX,
-          y:
-            textCreationGridPoint === null
-              ? // Free text starts from a point cursor, so center the first line box on it.
-                sceneY - getLineHeightInPx(fontSize, lineHeight) / 2
-              : textCreationGridPoint.y,
-        }
-      : {
-          x: sceneX,
-          y: sceneY,
-        };
-
    const element =
      existingTextElement ||
      newTextElement({
-        x: newTextElementPosition.x,
-        y: newTextElementPosition.y,
+        x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
+        y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
        strokeColor: this.state.currentItemStrokeColor,
        backgroundColor: this.state.currentItemBackgroundColor,
        fillStyle: this.state.currentItemFillStyle,
@@ -6320,9 +6116,6 @@ class App extends React.Component<AppProps, AppState> {
    if (autoEdit || existingTextElement || container) {
      this.handleTextWysiwyg(element, {
        isExistingElement: !!existingTextElement,
-        initialCaretSceneCoords: existingTextElement
-          ? initialCaretSceneCoords
-          : null,
      });
    } else {
      this.setState({
@@ -6348,48 +6141,9 @@ class App extends React.Component<AppProps, AppState> {
    }
  };

-  private shouldHandleBrowserCanvasDoubleClick = (type: string) => {
-    // TODO remove this once we consolidate double-click logic and handle
-    // ourselves for all event types together
-    if (type === "touch") {
-      return true;
-    }
-    if (this.lastCompletedCanvasClicks.length === 0) {
-      return true;
-    }
-
-    if (this.lastCompletedCanvasClicks.length < 2) {
-      return false;
-    }
-
-    const [firstClick, secondClick] = this.lastCompletedCanvasClicks;
-
-    return (
-      pointDistance(
-        pointFrom(firstClick.x, firstClick.y),
-        pointFrom(secondClick.x, secondClick.y),
-      ) <= DOUBLE_TAP_POSITION_THRESHOLD
-    );
-  };
-
  private handleCanvasDoubleClick = (
-    event: Pick<
-      React.MouseEvent<HTMLCanvasElement>,
-      | "type"
-      | "clientX"
-      | "clientY"
-      | "altKey"
-      | "ctrlKey"
-      | "metaKey"
-      | "shiftKey"
-    >,
+    event: React.MouseEvent<HTMLCanvasElement>,
  ) => {
-    if (
-      this.state.editingTextElement ||
-      !this.shouldHandleBrowserCanvasDoubleClick(event.type)
-    ) {
-      return;
-    }
    // case: double-clicking with arrow/line tool selected would both create
    // text and enter multiElement mode
    if (this.state.multiElement) {
@@ -6577,21 +6331,6 @@ class App extends React.Component<AppProps, AppState> {
    }
  };

-  private handleCanvasClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
-    if (event.button !== POINTER_BUTTON.MAIN) {
-      this.lastCompletedCanvasClicks = [];
-      return;
-    }
-
-    this.lastCompletedCanvasClicks = [
-      ...this.lastCompletedCanvasClicks.slice(-1),
-      {
-        x: event.clientX,
-        y: event.clientY,
-      },
-    ];
-  };
-
  private getElementLinkAtPosition = (
    scenePointer: Readonly<{ x: number; y: number }>,
    hitElementMightBeLocked: NonDeletedExcalidrawElement | null,
@@ -6947,7 +6686,7 @@ class App extends React.Component<AppProps, AppState> {
              y: scenePointerY,
            },
          });
-          this.setState({ suggestedBinding: null });
+          this.setState({ suggestedBinding: null, startBoundElement: null });
          if (!this.state.activeTool.locked) {
            resetCursor(this.interactiveCanvas);
            this.setState((prevState) => ({
@@ -7022,23 +6761,27 @@ class App extends React.Component<AppProps, AppState> {
          },
          { informMutation: false, isDragging: false },
        );
-        const newLastIdx = multiElement.points.length - 1;
        this.setState({
          selectedLinearElement: {
            ...selectedLinearElement,
-            selectedPointsIndices: selectedLinearElement.selectedPointsIndices
-              ? [
-                  ...new Set(
-                    selectedLinearElement.selectedPointsIndices.map((idx) =>
-                      Math.min(idx, newLastIdx),
+            selectedPointsIndices:
+              selectedLinearElement.selectedPointsIndices?.includes(
+                multiElement.points.length,
+              )
+                ? [
+                    ...selectedLinearElement.selectedPointsIndices.filter(
+                      (idx) =>
+                        idx !== multiElement.points.length &&
+                        idx !== multiElement.points.length - 1,
                    ),
-                  ),
-                ]
-              : selectedLinearElement.selectedPointsIndices,
-            lastCommittedPoint: multiElement.points[newLastIdx],
+                    multiElement.points.length - 1,
+                  ]
+                : selectedLinearElement.selectedPointsIndices,
+            lastCommittedPoint:
+              multiElement.points[multiElement.points.length - 1],
            initialState: {
              ...selectedLinearElement.initialState,
-              lastClickedPoint: newLastIdx,
+              lastClickedPoint: multiElement.points.length - 1,
            },
          },
        });
@@ -7124,12 +6867,6 @@ class App extends React.Component<AppProps, AppState> {
    const elements = this.scene.getNonDeletedElements();

    const selectedElements = this.scene.getSelectedElements(this.state);
-
-    if (this.isHittingTextAutoResizeHandle(selectedElements, scenePointer)) {
-      setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
-      return;
-    }
-
    if (
      selectedElements.length === 1 &&
      !isOverScrollBar &&
@@ -7266,14 +7003,6 @@ class App extends React.Component<AppProps, AppState> {
          this.interactiveCanvas,
          isTextElement(hitElement) ? CURSOR_TYPE.TEXT : CURSOR_TYPE.CROSSHAIR,
        );
-      } else if (
-        !event[KEYS.CTRL_OR_CMD] &&
-        this.isHittingCommonBoundingBoxOfSelectedElements(
-          scenePointer,
-          selectedElements,
-        )
-      ) {
-        setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
      } else if (this.state.viewModeEnabled) {
        setCursor(this.interactiveCanvas, CURSOR_TYPE.GRAB);
      } else if (this.state.openDialog?.name === "elementLinkSelector") {
@@ -7282,9 +7011,7 @@ class App extends React.Component<AppProps, AppState> {
        setCursor(this.interactiveCanvas, CURSOR_TYPE.AUTO);
      } else if (
        // if using cmd/ctrl, we're not dragging
-        !event[KEYS.CTRL_OR_CMD] &&
-        // editing text -> don't show move cursor when hovering over its bbox
-        hitElement?.id !== this.state.editingTextElement?.id
+        !event[KEYS.CTRL_OR_CMD]
      ) {
        if (
          (hitElement ||
@@ -7505,8 +7232,6 @@ class App extends React.Component<AppProps, AppState> {
  private handleCanvasPointerDown = (
    event: React.PointerEvent<HTMLElement>,
  ) => {
-    const selectedElements = this.scene.getSelectedElements(this.state);
-
    // If Ctrl is not held, ensure isBindingEnabled reflects the user preference.
    if (!event.ctrlKey) {
      const preferenceEnabled = this.state.bindingPreference === "enabled";
@@ -7591,6 +7316,7 @@ class App extends React.Component<AppProps, AppState> {
        appState: {
          newElement: null,
          editingTextElement: null,
+          startBoundElement: null,
          suggestedBinding: null,
          selectedElementIds: makeNextSelectedElementIds(
            Object.keys(this.state.selectedElementIds)
@@ -7729,15 +7455,6 @@ class App extends React.Component<AppProps, AppState> {
      selectedElementsAreBeingDragged: false,
    });

-    if (
-      this.handleTextAutoResizeHandlePointerDown(
-        selectedElements,
-        pointerDownState.origin,
-      )
-    ) {
-      return;
-    }
-
    if (this.handleDraggingScrollBar(event, pointerDownState)) {
      return;
    }
@@ -7764,24 +7481,17 @@ class App extends React.Component<AppProps, AppState> {
      const hitSelectedElement =
        pointerDownState.hit.element &&
        this.isASelectedElement(pointerDownState.hit.element);
-      const shouldForceLassoReselect =
-        event.altKey &&
-        event[KEYS.CTRL_OR_CMD] &&
-        !pointerDownState.resize.handleType;
-      const shouldStartLassoSelection =
-        shouldForceLassoReselect ||
-        (!pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements &&
-          !pointerDownState.resize.handleType &&
-          !hitSelectedElement);

-      if (shouldStartLassoSelection) {
-        if (!this.lassoTrail.hasCurrentTrail) {
-          this.lassoTrail.startPath(
-            pointerDownState.origin.x,
-            pointerDownState.origin.y,
-            event.shiftKey,
-          );
-        }
+      if (
+        !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements &&
+        !pointerDownState.resize.handleType &&
+        !hitSelectedElement
+      ) {
+        this.lassoTrail.startPath(
+          pointerDownState.origin.x,
+          pointerDownState.origin.y,
+          event.shiftKey,
+        );

        // block dragging after lasso selection on PCs until the next pointer down
        // (on mobile or tablet, we want to allow user to drag immediately)
@@ -7970,10 +7680,6 @@ class App extends React.Component<AppProps, AppState> {
    }

    this.removePointer(event);
-    this.lastPointerUpIsDoubleClick = this.isDoubleClick(
-      this.lastPointerUpEvent,
-      event,
-    );
    this.lastPointerUpEvent = event;

    if (!event.ctrlKey) {
@@ -8770,14 +8476,12 @@ class App extends React.Component<AppProps, AppState> {
      DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value,
      1,
    );
-    const boundsPadding =
-      (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / this.state.zoom.value;
    const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
    return (
-      point.x > x1 - boundsPadding - threshold &&
-      point.x < x2 + boundsPadding + threshold &&
-      point.y > y1 - boundsPadding - threshold &&
-      point.y < y2 + boundsPadding + threshold
+      point.x > x1 - threshold &&
+      point.x < x2 + threshold &&
+      point.y > y1 - threshold &&
+      point.y < y2 + threshold
    );
  }

@@ -8812,7 +8516,6 @@ class App extends React.Component<AppProps, AppState> {
      insertAtParentCenter: !event.altKey,
      container,
      autoEdit: false,
-      initialCaretSceneCoords: { x: sceneX, y: sceneY },
    });

    resetCursor(this.interactiveCanvas);
@@ -8878,8 +8581,18 @@ class App extends React.Component<AppProps, AppState> {
      };
    });

+    const boundElement = getHoveredElementForBinding(
+      pointFrom<GlobalPoint>(
+        pointerDownState.origin.x,
+        pointerDownState.origin.y,
+      ),
+      this.scene.getNonDeletedElements(),
+      this.scene.getNonDeletedElementsMap(),
+    );
+
    this.setState({
      newElement: element,
+      startBoundElement: boundElement,
      suggestedBinding: null,
    });
  };
@@ -10300,7 +10013,6 @@ class App extends React.Component<AppProps, AppState> {
                this.state.selectionElement,
                this.scene.getNonDeletedElementsMap(),
                false,
-                this.state.boxSelectionMode,
              )
            : [];

@@ -10732,7 +10444,7 @@ class App extends React.Component<AppProps, AppState> {
              sceneCoords,
            });
          }
-          this.setState({ suggestedBinding: null });
+          this.setState({ suggestedBinding: null, startBoundElement: null });
          if (!activeTool.locked) {
            resetCursor(this.interactiveCanvas);
            this.setState((prevState) => ({
@@ -10753,9 +10465,9 @@ class App extends React.Component<AppProps, AppState> {
              ),
            }));
          } else {
-            this.setState({
+            this.setState((prevState) => ({
              newElement: null,
-            });
+            }));
          }
          // so that the scene gets rendered again to display the newly drawn linear as well
          this.scene.triggerUpdate();
@@ -11289,35 +11001,6 @@ class App extends React.Component<AppProps, AppState> {
        return;
      }

-      const selectedTextEditingContainer =
-        this.getSelectedTextEditingContainerAtPosition(hitElement, sceneCoords);
-
-      if (
-        activeTool.type === this.state.preferredSelectionTool.type &&
-        !this.state.editingTextElement &&
-        !pointerDownState.drag.hasOccurred &&
-        !pointerDownState.hit.wasAddedToSelection &&
-        !childEvent.shiftKey &&
-        !childEvent[KEYS.CTRL_OR_CMD] &&
-        !childEvent.altKey &&
-        childEvent.pointerType !== "touch" &&
-        hitElement &&
-        ((isTextElement(hitElement) &&
-          this.state.selectedElementIds[hitElement.id] &&
-          this.scene.getSelectedElements(this.state).length === 1) ||
-          selectedTextEditingContainer)
-      ) {
-        this.startTextEditing({
-          sceneX: sceneCoords.x,
-          sceneY: sceneCoords.y,
-          container: selectedTextEditingContainer,
-          initialCaretSceneCoords: this.lastPointerUpIsDoubleClick
-            ? undefined
-            : sceneCoords,
-        });
-        return;
-      }
-
      if (!activeTool.locked && activeTool.type !== "freedraw" && newElement) {
        this.setState((prevState) => ({
          selectedElementIds: makeNextSelectedElementIds(
@@ -46,7 +46,6 @@ import {
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";

 import type { JSX } from "react";
-import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";

 export interface FontDescriptor {
  value: number;
@@ -87,15 +86,6 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
  }
 };

-const getFontFamilyLabel = (
-  fontFamily: FontFamilyValues,
-  fontFaces: ExcalidrawFontFace[],
-) =>
-  // prefer our config as the browser resolved names may be wrapped in quotes and such
-  Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
-  fontFaces[0]?.fontFace?.family ??
-  "Unknown";
-
 export const FontPickerList = React.memo(
  ({
    selectedFontFamily,
@@ -124,7 +114,7 @@ export const FontPickerList = React.memo(
            const fontDescriptor = {
              value: familyId,
              icon: getFontFamilyIcon(familyId),
-              text: getFontFamilyLabel(familyId, fontFaces),
+              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
            };

            if (metadata.deprecated) {
@@ -650,7 +650,8 @@ const LayerUI = ({
 };

 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const { cursorButton, scrollX, scrollY, ...ret } = appState;
+  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
+    appState;
  return ret;
 };

@@ -26,16 +26,13 @@
    background: var(--RadioGroup-background);
    border: 1px solid var(--RadioGroup-border);

-    gap: 2px;
-
    &__choice {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
-      min-width: 20px;
+      width: 32px;
      height: 24px;
-      padding: 0 0.375rem;

      color: var(--RadioGroup-choice-color-off);
      background: var(--RadioGroup-choice-background-off);
@@ -1,78 +1,74 @@
 import React, { useEffect } from "react";

+import { t } from "../i18n";
+
 import "./Range.scss";

+import type { AppClassProperties } from "../types";
+
 export type RangeProps = {
-  label: React.ReactNode;
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  minLabel?: React.ReactNode;
-  hasCommonValue?: boolean;
+  updateData: (value: number) => void;
+  app: AppClassProperties;
  testId?: string;
 };

-export const Range = ({
-  label,
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 10,
-  minLabel = min,
-  hasCommonValue = true,
-  testId,
-}: RangeProps) => {
+export const Range = ({ updateData, app, testId }: RangeProps) => {
  const rangeRef = React.useRef<HTMLInputElement>(null);
  const valueRef = React.useRef<HTMLDivElement>(null);
+  const selectedElements = app.scene.getSelectedElements(app.state);
+  let hasCommonOpacity = true;
+  const firstElement = selectedElements.at(0);
+  const leastCommonOpacity = selectedElements.reduce((acc, element) => {
+    if (acc != null && acc !== element.opacity) {
+      hasCommonOpacity = false;
+    }
+    if (acc == null || acc > element.opacity) {
+      return element.opacity;
+    }
+    return acc;
+  }, firstElement?.opacity ?? null);
+
+  const value = leastCommonOpacity ?? app.state.currentItemOpacity;

  useEffect(() => {
    if (rangeRef.current && valueRef.current) {
      const rangeElement = rangeRef.current;
      const valueElement = valueRef.current;
      const inputWidth = rangeElement.offsetWidth;
-      const thumbWidth =
-        parseFloat(
-          getComputedStyle(rangeElement).getPropertyValue(
-            "--slider-thumb-size",
-          ),
-        ) || 16;
-      const progress = ((value - min) / (max - min || 1)) * 100;
+      const thumbWidth = 15; // 15 is the width of the thumb
      const position =
-        (progress / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
+        (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
      valueElement.style.left = `${position}px`;
-      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${progress}%, var(--button-bg) ${progress}%, var(--button-bg) 100%)`;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
    }
-  }, [max, min, value]);
+  }, [value]);

  return (
    <label className="control-label">
-      {label}
+      {t("labels.opacity")}
      <div className="range-wrapper">
        <input
          style={{
-            ["--color-slider-track" as string]: hasCommonValue
+            ["--color-slider-track" as string]: hasCommonOpacity
              ? undefined
              : "var(--button-bg)",
          }}
          ref={rangeRef}
          type="range"
-          min={min}
-          max={max}
-          step={step}
+          min="0"
+          max="100"
+          step="10"
          onChange={(event) => {
-            onChange(+event.target.value);
+            updateData(+event.target.value);
          }}
          value={value}
          className="range-input"
          data-testid={testId}
        />
        <div className="value-bubble" ref={valueRef}>
-          {value !== min ? value : null}
+          {value !== 0 ? value : null}
        </div>
-        <div className="zero-label">{minLabel}</div>
+        <div className="zero-label">0</div>
      </div>
    </label>
  );
@@ -361,10 +361,12 @@ describe("stats for a non-generic element", () => {
    mouse.clickAt(20, 30);
    const editor = await getTextEditor();
    updateTextEditor(editor, "Hello!");
-    Keyboard.exitTextEditor(editor);
+    act(() => {
+      editor.blur();
+    });

    const text = h.elements[0] as ExcalidrawTextElement;
-    API.setSelectedElements([text]);
+    mouse.clickOn(text);

    elementStats = stats?.querySelector("#elementStats");

@@ -750,7 +752,7 @@ describe("frame resizing behavior", () => {
      x: 0,
      y: 0,
      width: 100,
-      height: 103,
+      height: 100,
    });

    // Create a rectangle outside the frame
@@ -54,7 +54,6 @@ type InteractiveCanvasProps = {
    DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"],
    undefined
  >;
-  onClick: Exclude<DOMAttributes<HTMLCanvasElement>["onClick"], undefined>;
  onPointerMove: Exclude<
    DOMAttributes<HTMLCanvasElement>["onPointerMove"],
    undefined
@@ -214,7 +213,6 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
      height={props.appState.height * props.scale}
      ref={props.handleCanvasRef}
      onContextMenu={props.onContextMenu}
-      onClick={props.onClick}
      onPointerMove={props.onPointerMove}
      onPointerUp={props.onPointerUp}
      onPointerCancel={props.onPointerCancel}
@@ -2,7 +2,7 @@

 .excalidraw {
  .dropdown-menu {
-    max-width: 20rem;
+    max-width: 16rem;
    z-index: 1;

    &--placement-top {
@@ -1,5 +1,4 @@
 import { useEditorInterface } from "../App";
-import { Ellipsify } from "../Ellipsify";
 import { RadioGroup } from "../RadioGroup";

 type Props<T> = {
@@ -13,7 +12,6 @@ type Props<T> = {
  onChange: (value: T) => void;
  children: React.ReactNode;
  name: string;
-  icon?: React.ReactNode;
 };

 const DropdownMenuItemContentRadio = <T,>({
@@ -23,17 +21,13 @@ const DropdownMenuItemContentRadio = <T,>({
  choices,
  children,
  name,
-  icon,
 }: Props<T>) => {
  const editorInterface = useEditorInterface();

  return (
    <>
      <div className="dropdown-menu-item-base dropdown-menu-item-bare">
-        {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
-        <label className="dropdown-menu-item__text">
-          <Ellipsify>{children}</Ellipsify>
-        </label>
+        <label className="dropdown-menu-item__text">{children}</label>
        <RadioGroup
          name={name}
          value={value}
@@ -39,13 +39,7 @@ import DropdownMenuItemCheckbox from "../dropdownMenu/DropdownMenuItemCheckbox";
 import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemContentRadio";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
 import DropdownMenuSub from "../dropdownMenu/DropdownMenuSub";
-import {
-  GithubIcon,
-  DiscordIcon,
-  XBrandIcon,
-  settingsIcon,
-  emptyIcon,
-} from "../icons";
+import { GithubIcon, DiscordIcon, XBrandIcon, settingsIcon } from "../icons";
 import {
  boltIcon,
  DeviceDesktopIcon,
@@ -433,39 +427,6 @@ const PreferencesToggleToolLockItem = () => {
  );
 };

-const PreferencesBoxSelectionModeItem = () => {
-  const { t } = useI18n();
-  const appState = useUIAppState();
-  const setAppState = useExcalidrawSetAppState();
-
-  return (
-    <DropdownMenuItemContentRadio<"contain" | "overlap">
-      name="boxSelectionMode"
-      icon={emptyIcon}
-      value={appState.boxSelectionMode}
-      onChange={(value) => {
-        setAppState({
-          boxSelectionMode: value,
-        });
-      }}
-      choices={[
-        {
-          value: "contain",
-          label: t("labels.boxSelectionContain"),
-          ariaLabel: t("labels.boxSelectionContain"),
-        },
-        {
-          value: "overlap",
-          label: t("labels.boxSelectionOverlap"),
-          ariaLabel: t("labels.boxSelectionOverlap"),
-        },
-      ]}
-    >
-      {t("labels.boxSelectionMode")}
-    </DropdownMenuItemContentRadio>
-  );
-};
-
 const PreferencesToggleSnapModeItem = () => {
  const { t } = useI18n();
  const actionManager = useExcalidrawActionManager();
@@ -607,7 +568,6 @@ export const Preferences = ({
      <DropdownMenuSub.Content className="excalidraw-main-menu-preferences-submenu">
        {children || (
          <>
-            <PreferencesBoxSelectionModeItem />
            <PreferencesToggleToolLockItem />
            <PreferencesToggleSnapModeItem />
            <PreferencesToggleGridModeItem />
@@ -625,7 +585,6 @@ export const Preferences = ({
 };

 Preferences.ToggleToolLock = PreferencesToggleToolLockItem;
-Preferences.BoxSelectionMode = PreferencesBoxSelectionModeItem;
 Preferences.ToggleSnapMode = PreferencesToggleSnapModeItem;
 Preferences.ToggleArrowBinding = PreferencesToggleArrowBindingItem;
 Preferences.ToggleMidpointSnapping = PreferencesToggleMidpointSnappingItem;
@@ -814,14 +814,6 @@ body.excalidraw-cursor-resize * {
  .excalidraw__embeddable__outer {
    width: 100%;
    height: 100%;
-  }
-
-  .excalidraw__embeddable__content {
-    width: 100%;
-    height: 100%;
-    transform-origin: top left;
-
-    &,
    & > * {
      border-radius: var(--embeddable-radius);
    }
@@ -6,7 +6,6 @@ import {
  MIME_TYPES,
  cloneJSON,
  SVG_DOCUMENT_PREAMBLE,
-  arrayToMap,
 } from "@excalidraw/common";

 import { getNonDeletedElements } from "@excalidraw/element";
@@ -50,7 +49,6 @@ export const prepareElementsForExport = (
  exportSelectionOnly: boolean,
 ) => {
  elements = getNonDeletedElements(elements);
-  const elementsMap = arrayToMap(elements);

  const isExportingSelection =
    exportSelectionOnly &&
@@ -73,11 +71,7 @@ export const prepareElementsForExport = (
      isFrameLikeElement(exportedElements[0])
    ) {
      exportingFrame = exportedElements[0];
-      exportedElements = getElementsOverlappingFrame(
-        elements,
-        exportingFrame,
-        elementsMap,
-      );
+      exportedElements = getElementsOverlappingFrame(elements, exportingFrame);
    } else if (exportedElements.length > 1) {
      exportedElements = getSelectedElements(
        elements,
@@ -96,8 +96,6 @@ type RestoredAppState = Omit<
  "offsetTop" | "offsetLeft" | "width" | "height"
 >;

-const MAX_ARROW_PX = 75_000;
-
 export const AllowedExcalidrawActiveTools: Record<
  AppState["activeTool"]["type"],
  boolean
@@ -253,9 +251,7 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
      };
    }

-    console.error(
-      `Could not repair binding for element "${boundElement?.id}" out of (${elementsMap?.size}) elements`,
-    );
+    console.error(`could not repair binding for element`);
  } catch (error) {
    console.error("Error repairing binding:", error);
  }
@@ -469,8 +465,8 @@ export const restoreElement = (
        element.endArrowhead === undefined
          ? "arrow"
          : normalizeArrowhead(element.endArrowhead);
-      const x = element.x as number | undefined;
-      const y = element.y as number | undefined;
+      const x: number | undefined = element.x;
+      const y: number | undefined = element.y;
      const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
        !Array.isArray(element.points) || element.points.length < 2
          ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
@@ -495,8 +491,8 @@ export const restoreElement = (
        startArrowhead,
        endArrowhead,
        points,
-        x: x ?? 0,
-        y: y ?? 0,
+        x,
+        y,
        elbowed: (element as ExcalidrawArrowElement).elbowed,
        ...getSizeFromPoints(points),
      };
@@ -515,44 +511,12 @@ export const restoreElement = (
          })
        : restoreElementWithProperties(element as ExcalidrawArrowElement, base);

-      const normalizedRestoredElement = {
+      return {
        ...restoredElement,
        ...LinearElementEditor.getNormalizeElementPointsAndCoords(
          restoredElement,
        ),
      };
-
-      // Last resort fix for extremely large arrows
-      if (
-        normalizedRestoredElement.width > MAX_ARROW_PX ||
-        normalizedRestoredElement.height > MAX_ARROW_PX
-      ) {
-        console.error(
-          `Removing extremely large arrow ${
-            normalizedRestoredElement.id
-          } (type: ${
-            isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
-          }, width: ${normalizedRestoredElement.width}, height: ${
-            normalizedRestoredElement.height
-          }, x: ${normalizedRestoredElement.x}, y: ${
-            normalizedRestoredElement.y
-          })`,
-        );
-        return {
-          ...normalizedRestoredElement,
-          x: 0,
-          y: 0,
-          width: 100,
-          height: 100,
-          points: [
-            pointFrom<LocalPoint>(0, 0),
-            pointFrom<LocalPoint>(100, 100),
-          ],
-          isDeleted: true,
-        };
-      }
-
-      return normalizedRestoredElement;
    }

    // generic elements
@@ -700,7 +664,6 @@ export const restoreElements = <T extends ExcalidrawElement>(
  const existingElementsMap = existingElements
    ? arrayToMap(existingElements)
    : null;
-
  const restoredElements = syncInvalidIndices(
    (targetElements || []).reduce((elements, element) => {
      // filtering out selection, which is legacy, no longer kept in elements,
@@ -797,7 +760,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
    }
  }

-  // NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
+  // NOTE (mtolmacs): Temporary fix for extremely large arrows
  // Need to iterate again so we have attached text nodes in elementsMap
  return restoredElements.map((element) => {
    if (
@@ -971,12 +934,6 @@ export const restoreAppState = (
        : defaultValue;
  }

-  const boxSelectionMode =
-    appState.boxSelectionMode ?? localAppState?.boxSelectionMode;
-  if (boxSelectionMode !== undefined) {
-    nextAppState.boxSelectionMode = boxSelectionMode;
-  }
-
  return {
    ...nextAppState,
    cursorButton: localAppState?.cursorButton || "up",
@@ -382,8 +382,6 @@ export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToC
 export { getDataURL } from "./data/blob";
 export { isElementLink } from "@excalidraw/element";

-export { Fonts } from "./fonts/Fonts";
-
 export { setCustomTextMetricsProvider } from "@excalidraw/element";

 export { CommandPalette } from "./components/CommandPalette/CommandPalette";
@@ -185,9 +185,6 @@
    "shapeSwitch": "Switch shape",
    "preferences": "Preferences",
    "preferences_toolLock": "Tool lock",
-    "boxSelectionMode": "Select on",
-    "boxSelectionContain": "Wrap",
-    "boxSelectionOverlap": "Overlap",
    "arrowBinding": "Arrow binding",
    "midpointSnapping": "Snap to midpoints"
  },
@@ -664,7 +661,7 @@
    "placeholder": {
      "title": "Let's design your diagram",
      "description": "Describe the diagram you want to create, and we'll generate it for you.",
-      "hint": "At the moment we know Flowchart, Sequence, Class, State, and Entity Relationship diagrams."
+      "hint": "At the moment we know Flowchart, Sequence, Class, and Entity Relationship diagrams."
    },
    "preview": "Preview",
    "insert": "Insert",
@@ -88,7 +88,7 @@
    "@excalidraw/element": "0.18.0",
    "@excalidraw/laser-pointer": "1.3.1",
    "@excalidraw/math": "0.18.0",
-    "@excalidraw/mermaid-to-excalidraw": "2.2.2",
+    "@excalidraw/mermaid-to-excalidraw": "2.1.1",
    "@excalidraw/random-username": "1.1.0",
    "browser-fs-access": "0.38.0",
    "canvas-roundrect-polyfill": "0.0.1",
@@ -41,7 +41,6 @@ import {
  maxBindingDistance_simple,
  isTextElement,
  LinearElementEditor,
-  getActiveTextElement,
 } from "@excalidraw/element";

 import { renderSelectionElement } from "@excalidraw/element";
@@ -59,8 +58,6 @@ import {
  isFocusPointVisible,
 } from "@excalidraw/element";

-import type { EditorInterface } from "@excalidraw/common";
-
 import type {
  TransformHandles,
  TransformHandleType,
@@ -89,10 +86,6 @@ import {
 } from "../scene/scrollbars";

 import { getClientColor, renderRemoteCursors } from "../clients";
-import {
-  getTextAutoResizeHandle,
-  getTextBoxPadding,
-} from "../textAutoResizeHandle";

 import {
  bootstrapCanvas,
@@ -1156,7 +1149,6 @@ const renderLinearPointHandles = (
          points[idx],
          idx,
          appState.zoom,
-          elementsMap,
        )
      ) {
        renderSingleLinearPoint(
@@ -1497,58 +1489,21 @@ const renderTextBox = (
  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
 ) => {
  context.save();
-  const padding = getTextBoxPadding(appState.zoom.value);
+  const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
  const width = text.width + padding * 2;
  const height = text.height + padding * 2;
-  const cx = text.x + text.width / 2;
-  const cy = text.y + text.height / 2;
-  const shiftX = -(text.width / 2 + padding);
-  const shiftY = -(text.height / 2 + padding);
+  const cx = text.x + width / 2;
+  const cy = text.y + height / 2;
+  const shiftX = -(width / 2 + padding);
+  const shiftY = -(height / 2 + padding);
  context.translate(cx + appState.scrollX, cy + appState.scrollY);
  context.rotate(text.angle);
  context.lineWidth = 1 / appState.zoom.value;
  context.strokeStyle = selectionColor;
-  context.globalAlpha = 0.5;
-  context.setLineDash([6 / appState.zoom.value, 4 / appState.zoom.value]);
  context.strokeRect(shiftX, shiftY, width, height);
  context.restore();
 };

-const renderResetAutoResizeHandle = (
-  text: NonDeleted<ExcalidrawTextElement>,
-  context: CanvasRenderingContext2D,
-  appState: InteractiveCanvasAppState,
-  selectionColor: InteractiveCanvasRenderConfig["selectionColor"],
-  formFactor: EditorInterface["formFactor"],
-) => {
-  const autoResizeHandle = getTextAutoResizeHandle(
-    text,
-    appState.zoom.value,
-    formFactor,
-  );
-
-  if (!autoResizeHandle) {
-    return;
-  }
-
-  context.save();
-  context.globalAlpha = 0.5;
-  context.lineWidth = 1.5 / appState.zoom.value;
-  context.lineCap = "round";
-  context.strokeStyle = selectionColor;
-  context.beginPath();
-  context.moveTo(
-    autoResizeHandle.start[0] + appState.scrollX,
-    autoResizeHandle.start[1] + appState.scrollY,
-  );
-  context.lineTo(
-    autoResizeHandle.end[0] + appState.scrollX,
-    autoResizeHandle.end[1] + appState.scrollY,
-  );
-  context.stroke();
-  context.restore();
-};
-
 const _renderInteractiveScene = ({
  app,
  canvas,
@@ -1629,19 +1584,10 @@ const _renderInteractiveScene = ({
    }
  }

-  const activeTextElement = getActiveTextElement(selectedElements, appState);
-
-  if (activeTextElement && !activeTextElement.autoResize) {
-    renderResetAutoResizeHandle(
-      activeTextElement,
-      context,
-      appState,
-      renderConfig.selectionColor,
-      editorInterface.formFactor,
-    );
-  }
-
-  if (appState.editingTextElement) {
+  if (
+    appState.editingTextElement &&
+    isTextElement(appState.editingTextElement)
+  ) {
    const textElement = allElementsMap.get(appState.editingTextElement.id) as
      | ExcalidrawTextElement
      | undefined;
@@ -19,6 +19,8 @@ export const renderSnaps = (
  }

  // in dark mode, we need to adjust the color to account for color inversion.
+  // Don't change if zen mode, because we draw only crosses, we want the
+  // colors to be more visible
  const snapColor =
    appState.theme === THEME.LIGHT || appState.zenModeEnabled
      ? SNAP_COLOR_LIGHT
@@ -157,11 +157,7 @@ const prepareElementsForRender = ({
  let nextElements: readonly ExcalidrawElement[];

  if (exportingFrame) {
-    nextElements = getElementsOverlappingFrame(
-      elements,
-      exportingFrame,
-      arrayToMap(elements),
-    );
+    nextElements = getElementsOverlappingFrame(elements, exportingFrame);
  } else if (frameRendering.enabled && frameRendering.name) {
    nextElements = addFrameLabelsAsTextElements(elements, {
      exportWithDarkMode,
@@ -39,14 +39,6 @@ import type {
 } from "./types";

 const SNAP_DISTANCE = 8;
-// Keep snap candidates with effectively identical offsets together. This needs
-// to be wider than the 6-decimal rounding quantum to absorb JS floating-point
-// noise around values like 4 and 4.000001.
-const SNAP_OFFSET_TOLERANCE = 0.00001;
-// Point snaps can come from both nearby and distant references within snap
-// distance. If their visual distances have a large break, prefer the nearest
-// cluster before comparing offsets.
-const SNAP_REFERENCE_CLUSTER_BREAK_DISTANCE = 200;

 // do not comput more gaps per axis than this limit
 // TODO increase or remove once we optimize
@@ -57,51 +49,16 @@ export const getSnapDistance = (zoomValue: number) => {
  return SNAP_DISTANCE / zoomValue;
 };

-/**
- * Keeps the cluster threshold visually stable across zoom levels.
- */
-const getSnapReferenceClusterBreakDistance = (zoomValue: number) => {
-  return SNAP_REFERENCE_CLUSTER_BREAK_DISTANCE / zoomValue;
-};
-
 type Vector2D = {
  x: number;
  y: number;
 };

 type PointPair = [GlobalPoint, GlobalPoint];
-type SnapPointType = "outer" | "center";
-type SnapSourceId = string;
-
-const SELECTION_SNAP_SOURCE_ID = "selection";
-
-// Snap source ids let us filter redundant snaplines only within one
-// selection-to-reference relationship, without mixing separate reference groups.
-// For example, "selection->rectA" may collapse to its outermost snaplines,
-// while "selection->rectB" still keeps its own independent snaplines.
-type SnapPoint = {
-  point: GlobalPoint;
-  type: SnapPointType;
-  snapSourceId: SnapSourceId;
-};
-
-const outerSnapPoint = (
-  point: GlobalPoint,
-  snapSourceId = SELECTION_SNAP_SOURCE_ID,
-): SnapPoint => ({
-  point,
-  type: "outer",
-  snapSourceId,
-});

 export type PointSnap = {
  type: "point";
  points: PointPair;
-  pointTypes: [SnapPointType, SnapPointType];
-  snapSourceIds: [SnapSourceId, SnapSourceId];
-  // Distance along the rendered snapline, used to group visually nearby
-  // references before choosing which point snaps should win.
-  visualDistance: number;
  offset: number;
 };

@@ -163,14 +120,14 @@ export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
 // -----------------------------------------------------------------------------

 export class SnapCache {
-  private static referenceSnapPoints: SnapPoint[] | null = null;
+  private static referenceSnapPoints: GlobalPoint[] | null = null;

  private static visibleGaps: {
    verticalGaps: Gap[];
    horizontalGaps: Gap[];
  } | null = null;

-  public static setReferenceSnapPoints = (snapPoints: SnapPoint[] | null) => {
+  public static setReferenceSnapPoints = (snapPoints: GlobalPoint[] | null) => {
    SnapCache.referenceSnapPoints = snapPoints;
  };

@@ -238,17 +195,6 @@ export const areRoughlyEqual = (a: number, b: number, precision = 0.01) => {
  return Math.abs(a - b) <= precision;
 };

-/**
- * Keeps nearly identical snap offsets in the same winner set. This prevents
- * snapline flicker when rounded geometry differs by a tiny floating-point tail.
- */
-const isWithinSnapOffset = (offset: number, minOffset: number) => {
-  return (
-    Math.abs(offset) <= minOffset ||
-    areRoughlyEqual(Math.abs(offset), minOffset, SNAP_OFFSET_TOLERANCE)
-  );
-};
-
 export const getElementsCorners = (
  elements: ExcalidrawElement[],
  elementsMap: ElementsMap,
@@ -366,81 +312,18 @@ export const getElementsCorners = (
  return result.map((p) => pointFrom(round(p[0]), round(p[1])));
 };

-const getElementsSnapPoints = (
-  elements: ExcalidrawElement[],
-  elementsMap: ElementsMap,
-  options: Parameters<typeof getElementsCorners>[2] = {},
-  snapSourceId = SELECTION_SNAP_SOURCE_ID,
-): SnapPoint[] => {
-  const points = getElementsCorners(elements, elementsMap, options);
-  // getElementsCorners() appends the center point last unless omitCenter is set.
-  const hasCenterPoint = !options.omitCenter && points.length > 0;
-
-  return points.map((point, index) => ({
-    point,
-    type: hasCenterPoint && index === points.length - 1 ? "center" : "outer",
-    snapSourceId,
-  }));
-};
-
-/**
- * Builds a stable identity for one snap reference group. Sorting keeps grouped
- * elements represented by the same snap source id regardless of element order.
- */
-const getSnapSourceId = (elements: ExcalidrawElement[]) => {
-  return elements
-    .map((element) => element.id)
-    .sort()
-    .join(",");
-};
-
-/**
- * Finds frames that the current selection already belongs to. Their children
- * are still valid snap references; children of unrelated frames are not.
- */
-const getSelectedFrameIdsForSnapping = (
-  selectedElements: readonly ExcalidrawElement[],
-) => {
-  const selectedFrameIds = new Set<ExcalidrawElement["id"]>();
-
-  for (const element of selectedElements) {
-    if (element.frameId) {
-      selectedFrameIds.add(element.frameId);
-    }
-  }
-
-  return selectedFrameIds;
-};
-
-/**
- * Frame children are only snap references when the dragged selection is inside
- * the same frame. This avoids snapping external elements to internals of a
- * framed diagram.
- */
-const canUseElementAsSnapReference = (
-  element: NonDeletedExcalidrawElement,
-  selectedFrameIds: Set<ExcalidrawElement["id"]>,
-) => {
-  return !element.frameId || selectedFrameIds.has(element.frameId);
-};
-
 const getReferenceElements = (
  elements: readonly NonDeletedExcalidrawElement[],
  selectedElements: NonDeletedExcalidrawElement[],
  appState: AppState,
  elementsMap: ElementsMap,
-) => {
-  const selectedFrameIds = getSelectedFrameIdsForSnapping(selectedElements);
-
-  return getVisibleAndNonSelectedElements(
+) =>
+  getVisibleAndNonSelectedElements(
    elements,
    selectedElements,
    appState,
    elementsMap,
-  ).filter((element) => {
-    return canUseElementAsSnapReference(element, selectedFrameIds);
-  });
-};
+  );

 export const getVisibleGaps = (
  elements: readonly NonDeletedExcalidrawElement[],
@@ -599,10 +482,7 @@ const getGapSnaps = (
      const centerOffset = round(gapMidX - centerX);
      const gapIsLargerThanSelection = gap.length > maxX - minX;

-      if (
-        gapIsLargerThanSelection &&
-        isWithinSnapOffset(centerOffset, minOffset.x)
-      ) {
+      if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.x) {
        if (Math.abs(centerOffset) < minOffset.x) {
          nearestSnapsX.length = 0;
        }
@@ -624,7 +504,7 @@ const getGapSnaps = (
      const distanceToEndElementX = minX - endMaxX;
      const sideOffsetRight = round(gap.length - distanceToEndElementX);

-      if (isWithinSnapOffset(sideOffsetRight, minOffset.x)) {
+      if (Math.abs(sideOffsetRight) <= minOffset.x) {
        if (Math.abs(sideOffsetRight) < minOffset.x) {
          nearestSnapsX.length = 0;
        }
@@ -645,7 +525,7 @@ const getGapSnaps = (
      const distanceToStartElementX = startMinX - maxX;
      const sideOffsetLeft = round(distanceToStartElementX - gap.length);

-      if (isWithinSnapOffset(sideOffsetLeft, minOffset.x)) {
+      if (Math.abs(sideOffsetLeft) <= minOffset.x) {
        if (Math.abs(sideOffsetLeft) < minOffset.x) {
          nearestSnapsX.length = 0;
        }
@@ -671,10 +551,7 @@ const getGapSnaps = (
      const centerOffset = round(gapMidY - centerY);
      const gapIsLargerThanSelection = gap.length > maxY - minY;

-      if (
-        gapIsLargerThanSelection &&
-        isWithinSnapOffset(centerOffset, minOffset.y)
-      ) {
+      if (gapIsLargerThanSelection && Math.abs(centerOffset) <= minOffset.y) {
        if (Math.abs(centerOffset) < minOffset.y) {
          nearestSnapsY.length = 0;
        }
@@ -696,7 +573,7 @@ const getGapSnaps = (
      const distanceToStartElementY = startMinY - maxY;
      const sideOffsetTop = round(distanceToStartElementY - gap.length);

-      if (isWithinSnapOffset(sideOffsetTop, minOffset.y)) {
+      if (Math.abs(sideOffsetTop) <= minOffset.y) {
        if (Math.abs(sideOffsetTop) < minOffset.y) {
          nearestSnapsY.length = 0;
        }
@@ -717,7 +594,7 @@ const getGapSnaps = (
      const distanceToEndElementY = round(minY - endMaxY);
      const sideOffsetBottom = gap.length - distanceToEndElementY;

-      if (isWithinSnapOffset(sideOffsetBottom, minOffset.y)) {
+      if (Math.abs(sideOffsetBottom) <= minOffset.y) {
        if (Math.abs(sideOffsetBottom) < minOffset.y) {
          nearestSnapsY.length = 0;
        }
@@ -736,102 +613,6 @@ const getGapSnaps = (
  }
 };

-/**
- * Narrows point snaps to the nearest visual cluster, then keeps the best offset
- * inside that cluster. If all references look continuous, this preserves the
- * old smallest-offset behavior.
- */
-const filterPointSnapsToNearestCluster = (
-  snaps: Snaps,
-  clusterBreakDistance: number,
-) => {
-  const pointSnaps = snaps.filter(
-    (snap): snap is PointSnap => snap.type === "point",
-  );
-
-  if (pointSnaps.length < 2) {
-    return;
-  }
-
-  const snapsByOffset = new Map<number, PointSnap[]>();
-
-  for (const snap of pointSnaps) {
-    const offset = round(snap.offset);
-    const offsetSnaps = snapsByOffset.get(offset) ?? [];
-    offsetSnaps.push(snap);
-    snapsByOffset.set(offset, offsetSnaps);
-  }
-
-  const keptPointSnaps = new Set<PointSnap>();
-  const offsetGroups = Array.from(snapsByOffset.entries()).map(
-    ([offset, offsetSnaps]) => ({
-      offset,
-      snaps: offsetSnaps,
-      visualDistance: Math.min(
-        ...offsetSnaps.map((snap) => snap.visualDistance),
-      ),
-    }),
-  );
-  const sortedOffsetGroups = offsetGroups
-    .slice()
-    .sort((a, b) => a.visualDistance - b.visualDistance);
-  let keepOffsetGroupsUntil = sortedOffsetGroups.length;
-
-  // Prefer a nearby reference cluster before comparing offset. If there is no
-  // clear distance break, this keeps all offsets and falls back to the old
-  // smallest-offset behavior.
-  for (let i = 1; i < sortedOffsetGroups.length; i++) {
-    const distanceGap =
-      sortedOffsetGroups[i].visualDistance -
-      sortedOffsetGroups[i - 1].visualDistance;
-
-    if (distanceGap > clusterBreakDistance) {
-      keepOffsetGroupsUntil = i;
-      break;
-    }
-  }
-
-  const nearestOffsetGroups = sortedOffsetGroups.slice(
-    0,
-    keepOffsetGroupsUntil,
-  );
-  const minOffset = Math.min(
-    ...nearestOffsetGroups.map(({ offset }) => Math.abs(offset)),
-  );
-  const selectedOffsets = nearestOffsetGroups
-    .filter(({ offset }) =>
-      areRoughlyEqual(Math.abs(offset), minOffset, SNAP_OFFSET_TOLERANCE),
-    )
-    .map(({ offset }) => offset);
-
-  for (const offsetSnaps of snapsByOffset.values()) {
-    if (
-      !selectedOffsets.some((offset) =>
-        areRoughlyEqual(
-          round(offsetSnaps[0].offset),
-          offset,
-          SNAP_OFFSET_TOLERANCE,
-        ),
-      )
-    ) {
-      continue;
-    }
-
-    offsetSnaps.forEach((snap) => keptPointSnaps.add(snap));
-  }
-
-  let writeIndex = 0;
-
-  for (const snap of snaps) {
-    if (snap.type !== "point" || keptPointSnaps.has(snap)) {
-      snaps[writeIndex] = snap;
-      writeIndex++;
-    }
-  }
-
-  snaps.length = writeIndex;
-};
-
 export const getReferenceSnapPoints = (
  elements: readonly NonDeletedExcalidrawElement[],
  selectedElements: ExcalidrawElement[],
@@ -849,24 +630,12 @@ export const getReferenceSnapPoints = (
      (elementsGroup) =>
        !(elementsGroup.length === 1 && isBoundToContainer(elementsGroup[0])),
    )
-    .flatMap((elementGroup) =>
-      getElementsSnapPoints(
-        elementGroup,
-        elementsMap,
-        {},
-        getSnapSourceId(elementGroup),
-      ),
-    );
+    .flatMap((elementGroup) => getElementsCorners(elementGroup, elementsMap));
 };

-/**
- * Collects point snaps within snap distance. Unlike gap snaps, point snaps first
- * go through visual-cluster filtering so a nearby reference can beat a slightly
- * better offset from a far-away reference.
- */
 const getPointSnaps = (
  selectedElements: ExcalidrawElement[],
-  selectionSnapPoints: SnapPoint[],
+  selectionSnapPoints: GlobalPoint[],
  app: AppClassProperties,
  event: KeyboardModifiersObject,
  nearestSnapsX: Snaps,
@@ -885,62 +654,39 @@ const getPointSnaps = (
  if (referenceSnapPoints) {
    for (const thisSnapPoint of selectionSnapPoints) {
      for (const otherSnapPoint of referenceSnapPoints) {
-        const offsetX = otherSnapPoint.point[0] - thisSnapPoint.point[0];
-        const offsetY = otherSnapPoint.point[1] - thisSnapPoint.point[1];
+        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;
+          }

-        if (isWithinSnapOffset(offsetX, minOffset.x)) {
          nearestSnapsX.push({
            type: "point",
-            points: [thisSnapPoint.point, otherSnapPoint.point],
-            pointTypes: [thisSnapPoint.type, otherSnapPoint.type],
-            snapSourceIds: [
-              thisSnapPoint.snapSourceId,
-              otherSnapPoint.snapSourceId,
-            ],
-            visualDistance: Math.abs(
-              otherSnapPoint.point[1] - thisSnapPoint.point[1],
-            ),
+            points: [thisSnapPoint, otherSnapPoint],
            offset: offsetX,
          });
+
+          minOffset.x = Math.abs(offsetX);
        }

-        if (isWithinSnapOffset(offsetY, minOffset.y)) {
+        if (Math.abs(offsetY) <= minOffset.y) {
+          if (Math.abs(offsetY) < minOffset.y) {
+            nearestSnapsY.length = 0;
+          }
+
          nearestSnapsY.push({
            type: "point",
-            points: [thisSnapPoint.point, otherSnapPoint.point],
-            pointTypes: [thisSnapPoint.type, otherSnapPoint.type],
-            snapSourceIds: [
-              thisSnapPoint.snapSourceId,
-              otherSnapPoint.snapSourceId,
-            ],
-            visualDistance: Math.abs(
-              otherSnapPoint.point[0] - thisSnapPoint.point[0],
-            ),
+            points: [thisSnapPoint, otherSnapPoint],
            offset: offsetY,
          });
+
+          minOffset.y = Math.abs(offsetY);
        }
      }
    }
  }
-
-  const clusterBreakDistance = getSnapReferenceClusterBreakDistance(
-    app.state.zoom.value,
-  );
-
-  filterPointSnapsToNearestCluster(nearestSnapsX, clusterBreakDistance);
-  filterPointSnapsToNearestCluster(nearestSnapsY, clusterBreakDistance);
-
-  if (nearestSnapsX.length > 0) {
-    minOffset.x = Math.min(
-      ...nearestSnapsX.map((snap) => Math.abs(snap.offset)),
-    );
-  }
-
-  if (nearestSnapsY.length > 0) {
-    minOffset.y = Math.min(
-      ...nearestSnapsY.map((snap) => Math.abs(snap.offset)),
-    );
-  }
 };

 export const snapDraggedElements = (
@@ -974,7 +720,7 @@ export const snapDraggedElements = (
    y: snapDistance,
  };

-  const selectionPoints = getElementsSnapPoints(selectedElements, elementsMap, {
+  const selectionPoints = getElementsCorners(selectedElements, elementsMap, {
    dragOffset,
  });

@@ -1024,7 +770,7 @@ export const snapDraggedElements = (

  getPointSnaps(
    selectedElements,
-    getElementsSnapPoints(selectedElements, elementsMap, {
+    getElementsCorners(selectedElements, elementsMap, {
      dragOffset: newDragOffset,
    }),
    app,
@@ -1079,185 +825,12 @@ const dedupePoints = (points: GlobalPoint[]): GlobalPoint[] => {
  return Array.from(map.values());
 };

-// Point snaplines are collected from every winning point snap first. Multiple
-// snap source pairs can collapse to the same rendered line, so candidates keep
-// source-pair metadata until redundant center and inner outer lines are removed.
-type PointSnapLineSourcePair = {
-  snapSourcePairKey: string;
-  pointType: SnapPointType;
-};
-
-type PointSnapLineCandidate = PointSnapLine & {
-  sourcePairs: PointSnapLineSourcePair[];
-};
-
-type PointSnapLineBucket = {
-  points: GlobalPoint[];
-  sourcePairs: PointSnapLineSourcePair[];
-};
-
-type OuterSnapLineCoordinateRange = {
-  count: number;
-  min: number;
-  max: number;
-};
-
-/**
- * Describes which snap source pair produced a rendered point snapline, so later
- * filtering can reason about redundancy without mixing unrelated references.
- * Only center-to-center snaps count as center snaplines; a center-to-outer snap
- * still explains an outer edge or midpoint alignment.
- */
-const getPointSnapLineSourcePair = (
-  snap: PointSnap,
-): PointSnapLineSourcePair => {
-  return {
-    snapSourcePairKey: snap.snapSourceIds.join("->"),
-    pointType: snap.pointTypes.every((pointType) => pointType === "center")
-      ? "center"
-      : "outer",
-  };
-};
-
-/**
- * Builds each snap source pair's outer coordinate range. Center snaplines use
- * this range to decide whether the surrounding outer lines already explain
- * them, and outer snaplines use it to keep only the two extremes.
- */
-const getOuterCoordinateRangesBySnapSourcePairKey = (
-  snapLines: PointSnapLineCandidate[],
-  getCoordinate: (snapLine: PointSnapLine) => number,
-) => {
-  const ranges = new Map<string, OuterSnapLineCoordinateRange>();
-
-  for (const snapLine of snapLines) {
-    const coordinate = getCoordinate(snapLine);
-
-    for (const sourcePair of snapLine.sourcePairs) {
-      if (sourcePair.pointType === "center") {
-        continue;
-      }
-
-      const range = ranges.get(sourcePair.snapSourcePairKey);
-
-      ranges.set(sourcePair.snapSourcePairKey, {
-        count: (range?.count ?? 0) + 1,
-        min: range ? Math.min(range.min, coordinate) : coordinate,
-        max: range ? Math.max(range.max, coordinate) : coordinate,
-      });
-    }
-  }
-
-  return ranges;
-};
-
-/**
- * A center snapline is redundant when outer snaplines from the same snap source
- * pair exist on both sides, because the outer lines already imply center
- * alignment.
- */
-const isRedundantCenterSnapLine = (
-  coordinate: number,
-  outerCoordinateRange?: OuterSnapLineCoordinateRange,
-) => {
-  if (!outerCoordinateRange) {
-    return false;
-  }
-
-  return (
-    outerCoordinateRange.min < coordinate &&
-    outerCoordinateRange.max > coordinate
-  );
-};
-
-/**
- * When more than two outer snaplines come from the same snap source pair, the
- * inner ones are redundant; the two extremes communicate the same shape
- * alignment.
- */
-const isRedundantOuterSnapLine = (
-  coordinate: number,
-  outerCoordinateRange?: OuterSnapLineCoordinateRange,
-) => {
-  if (!outerCoordinateRange || outerCoordinateRange.count <= 2) {
-    return false;
-  }
-
-  return (
-    coordinate !== outerCoordinateRange.min &&
-    coordinate !== outerCoordinateRange.max
-  );
-};
-
-/**
- * Keeps a visual snapline if at least one snap source pair represented by the
- * line still needs it. This matters when multiple snap source pairs collapse to
- * the same rendered coordinate.
- */
-const isPointSnapLineNeededBySourcePair = (
-  sourcePair: PointSnapLineSourcePair,
-  coordinate: number,
-  outerCoordinateRangesBySnapSourcePairKey: Map<
-    string,
-    OuterSnapLineCoordinateRange
-  >,
-) => {
-  const outerCoordinateRange = outerCoordinateRangesBySnapSourcePairKey.get(
-    sourcePair.snapSourcePairKey,
-  );
-
-  if (sourcePair.pointType === "center") {
-    return !isRedundantCenterSnapLine(coordinate, outerCoordinateRange);
-  }
-
-  return !isRedundantOuterSnapLine(coordinate, outerCoordinateRange);
-};
-
-/**
- * Removes point snaplines that are visually redundant, while preserving any line
- * that is still needed by at least one snap source pair represented on that
- * line.
- */
-const filterRedundantPointSnapLines = (
-  snapLines: PointSnapLineCandidate[],
-  getCoordinate: (snapLine: PointSnapLine) => number,
-): PointSnapLine[] => {
-  if (snapLines.length < 3) {
-    return snapLines.map(({ sourcePairs, ...snapLine }) => snapLine);
-  }
-
-  // Track outer-line ranges per snap source pair. The same visual snapline can
-  // be produced by multiple snap source pairs, so a line is removed only when
-  // every pair represented by that line considers it redundant.
-  const outerCoordinateRangesBySnapSourcePairKey =
-    getOuterCoordinateRangesBySnapSourcePairKey(snapLines, getCoordinate);
-
-  return snapLines
-    .filter((snapLine) => {
-      const coordinate = getCoordinate(snapLine);
-
-      return snapLine.sourcePairs.some((sourcePair) =>
-        isPointSnapLineNeededBySourcePair(
-          sourcePair,
-          coordinate,
-          outerCoordinateRangesBySnapSourcePairKey,
-        ),
-      );
-    })
-    .map(({ sourcePairs, ...snapLine }) => snapLine);
-};
-
-/**
- * Merges point snaps that render on the same x/y coordinate, attaches their
- * snap source pair metadata, then removes redundant center and inner outer
- * lines.
- */
 const createPointSnapLines = (
  nearestSnapsX: Snaps,
  nearestSnapsY: Snaps,
 ): PointSnapLine[] => {
-  const snapsX = {} as { [key: string]: PointSnapLineBucket };
-  const snapsY = {} as { [key: string]: PointSnapLineBucket };
+  const snapsX = {} as { [key: string]: GlobalPoint[] };
+  const snapsY = {} as { [key: string]: GlobalPoint[] };

  if (nearestSnapsX.length > 0) {
    for (const snap of nearestSnapsX) {
@@ -1265,14 +838,13 @@ const createPointSnapLines = (
        // key = thisPoint.x
        const key = round(snap.points[0][0]);
        if (!snapsX[key]) {
-          snapsX[key] = { points: [], sourcePairs: [] };
+          snapsX[key] = [];
        }
-        snapsX[key].points.push(
+        snapsX[key].push(
          ...snap.points.map((p) =>
            pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
          ),
        );
-        snapsX[key].sourcePairs.push(getPointSnapLineSourcePair(snap));
      }
    }
  }
@@ -1283,55 +855,44 @@ const createPointSnapLines = (
        // key = thisPoint.y
        const key = round(snap.points[0][1]);
        if (!snapsY[key]) {
-          snapsY[key] = { points: [], sourcePairs: [] };
+          snapsY[key] = [];
        }
-        snapsY[key].points.push(
+        snapsY[key].push(
          ...snap.points.map((p) =>
            pointFrom<GlobalPoint>(round(p[0]), round(p[1])),
          ),
        );
-        snapsY[key].sourcePairs.push(getPointSnapLineSourcePair(snap));
      }
    }
  }

-  const snapLinesX = Object.entries(snapsX).map(([key, snap]) => {
-    return {
-      type: "points",
-      points: dedupePoints(
-        snap.points
-          .map((p) => {
-            return pointFrom<GlobalPoint>(Number(key), p[1]);
-          })
-          .sort((a, b) => a[1] - b[1]),
-      ),
-      sourcePairs: snap.sourcePairs,
-    } as PointSnapLineCandidate;
-  });
-
-  const snapLinesY = Object.entries(snapsY).map(([key, snap]) => {
-    return {
-      type: "points",
-      points: dedupePoints(
-        snap.points
-          .map((p) => {
-            return pointFrom<GlobalPoint>(p[0], Number(key));
-          })
-          .sort((a, b) => a[0] - b[0]),
-      ),
-      sourcePairs: snap.sourcePairs,
-    } as PointSnapLineCandidate;
-  });
-
-  return filterRedundantPointSnapLines(
-    snapLinesX,
-    (snapLine) => snapLine.points[0][0],
-  ).concat(
-    filterRedundantPointSnapLines(
-      snapLinesY,
-      (snapLine) => snapLine.points[0][1],
-    ),
-  );
+  return Object.entries(snapsX)
+    .map(([key, points]) => {
+      return {
+        type: "points",
+        points: dedupePoints(
+          points
+            .map((p) => {
+              return pointFrom<GlobalPoint>(Number(key), p[1]);
+            })
+            .sort((a, b) => a[1] - b[1]),
+        ),
+      } as PointSnapLine;
+    })
+    .concat(
+      Object.entries(snapsY).map(([key, points]) => {
+        return {
+          type: "points",
+          points: dedupePoints(
+            points
+              .map((p) => {
+                return pointFrom<GlobalPoint>(p[0], Number(key));
+              })
+              .sort((a, b) => a[0] - b[0]),
+          ),
+        } as PointSnapLine;
+      }),
+    );
 };

 const dedupeGapSnapLines = (gapSnapLines: GapSnapLine[]) => {
@@ -1356,13 +917,10 @@ const createGapSnapLines = (
  dragOffset: Vector2D,
  gapSnaps: GapSnap[],
 ): GapSnapLine[] => {
-  // Use the same rounded bounds as getGapSnaps(). Otherwise a gap snap can be
-  // accepted during snapping but skipped here because the raw bounds miss the
-  // reference gap overlap by a tiny floating-point delta.
  const [minX, minY, maxX, maxY] = getDraggedElementsBounds(
    selectedElements,
    dragOffset,
-  ).map((bound) => round(bound));
+  );

  const gapSnapLines: GapSnapLine[] = [];

@@ -1585,52 +1143,40 @@ export const snapResizingElements = (
    }
  }

-  const selectionSnapPoints: SnapPoint[] = [];
+  const selectionSnapPoints: GlobalPoint[] = [];

  if (transformHandle) {
    switch (transformHandle) {
      case "e": {
-        selectionSnapPoints.push(
-          outerSnapPoint(pointFrom(maxX, minY)),
-          outerSnapPoint(pointFrom(maxX, maxY)),
-        );
+        selectionSnapPoints.push(pointFrom(maxX, minY), pointFrom(maxX, maxY));
        break;
      }
      case "w": {
-        selectionSnapPoints.push(
-          outerSnapPoint(pointFrom(minX, minY)),
-          outerSnapPoint(pointFrom(minX, maxY)),
-        );
+        selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(minX, maxY));
        break;
      }
      case "n": {
-        selectionSnapPoints.push(
-          outerSnapPoint(pointFrom(minX, minY)),
-          outerSnapPoint(pointFrom(maxX, minY)),
-        );
+        selectionSnapPoints.push(pointFrom(minX, minY), pointFrom(maxX, minY));
        break;
      }
      case "s": {
-        selectionSnapPoints.push(
-          outerSnapPoint(pointFrom(minX, maxY)),
-          outerSnapPoint(pointFrom(maxX, maxY)),
-        );
+        selectionSnapPoints.push(pointFrom(minX, maxY), pointFrom(maxX, maxY));
        break;
      }
      case "ne": {
-        selectionSnapPoints.push(outerSnapPoint(pointFrom(maxX, minY)));
+        selectionSnapPoints.push(pointFrom(maxX, minY));
        break;
      }
      case "nw": {
-        selectionSnapPoints.push(outerSnapPoint(pointFrom(minX, minY)));
+        selectionSnapPoints.push(pointFrom(minX, minY));
        break;
      }
      case "se": {
-        selectionSnapPoints.push(outerSnapPoint(pointFrom(maxX, maxY)));
+        selectionSnapPoints.push(pointFrom(maxX, maxY));
        break;
      }
      case "sw": {
-        selectionSnapPoints.push(outerSnapPoint(pointFrom(minX, maxY)));
+        selectionSnapPoints.push(pointFrom(minX, maxY));
        break;
      }
    }
@@ -1672,11 +1218,11 @@ export const snapResizingElements = (
    round(bound),
  );

-  const corners: SnapPoint[] = [
-    outerSnapPoint(pointFrom(x1, y1)),
-    outerSnapPoint(pointFrom(x1, y2)),
-    outerSnapPoint(pointFrom(x2, y1)),
-    outerSnapPoint(pointFrom(x2, y2)),
+  const corners: GlobalPoint[] = [
+    pointFrom(x1, y1),
+    pointFrom(x1, y2),
+    pointFrom(x2, y1),
+    pointFrom(x2, y2),
  ];

  getPointSnaps(
@@ -1712,8 +1258,8 @@ export const snapNewElement = (
    };
  }

-  const selectionSnapPoints: SnapPoint[] = [
-    outerSnapPoint(pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y)),
+  const selectionSnapPoints: GlobalPoint[] = [
+    pointFrom(origin.x + dragOffset.x, origin.y + dragOffset.y),
  ];

  const snapDistance = getSnapDistance(app.state.zoom.value);
@@ -1746,7 +1292,7 @@ export const snapNewElement = (
  nearestSnapsX.length = 0;
  nearestSnapsY.length = 0;

-  const corners = getElementsSnapPoints([newElement], elementsMap, {
+  const corners = getElementsCorners([newElement], elementsMap, {
    boundingBoxCorners: true,
    omitCenter: true,
  });
@@ -13,7 +13,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": {
    "items": [
@@ -979,6 +978,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -1086,7 +1086,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -1172,6 +1171,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -1300,7 +1300,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -1386,6 +1385,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -1631,7 +1631,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -1717,6 +1716,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -1962,7 +1962,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2048,6 +2047,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2176,7 +2176,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2260,6 +2259,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2417,7 +2417,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2503,6 +2502,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2715,7 +2715,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2806,6 +2805,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3087,7 +3087,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3173,6 +3172,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3580,7 +3580,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3666,6 +3665,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3903,7 +3903,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3989,6 +3988,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -4226,7 +4226,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -4315,6 +4314,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -4358,7 +4358,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "type": "rectangle",
  "updated": 1,
  "version": 5,
-  "versionNonce": 1006504105,
+  "versionNonce": 760410951,
  "width": 20,
  "x": -10,
  "y": 0,
@@ -4383,14 +4383,14 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "opacity": 100,
  "roughness": 1,
  "roundness": null,
-  "seed": 400692809,
+  "seed": 238820263,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
  "strokeWidth": 2,
  "type": "rectangle",
  "updated": 1,
  "version": 5,
-  "versionNonce": 289600103,
+  "versionNonce": 1006504105,
  "width": 20,
  "x": 20,
  "y": 30,
@@ -4637,7 +4637,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": {
    "items": [
@@ -5600,6 +5599,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -5854,7 +5854,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": {
    "items": [
@@ -6819,6 +6818,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -6864,7 +6864,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "type": "rectangle",
  "updated": 1,
  "version": 4,
-  "versionNonce": 1723083209,
+  "versionNonce": 747212839,
  "width": 10,
  "x": -10,
  "y": 0,
@@ -6891,14 +6891,14 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "opacity": 100,
  "roughness": 1,
  "roundness": null,
-  "seed": 400692809,
+  "seed": 238820263,
  "strokeColor": "#1e1e1e",
  "strokeStyle": "solid",
  "strokeWidth": 2,
  "type": "rectangle",
  "updated": 1,
  "version": 4,
-  "versionNonce": 760410951,
+  "versionNonce": 1723083209,
  "width": 10,
  "x": 12,
  "y": 0,
@@ -7122,7 +7122,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": {
    "items": [
@@ -7772,6 +7771,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -7811,7 +7811,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": {
    "items": [
@@ -8771,6 +8770,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -8802,7 +8802,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": {
    "items": [
@@ -9765,6 +9764,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -13,7 +13,6 @@ exports[`given element A and group of elements B and given both are selected whe
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -106,6 +105,7 @@ exports[`given element A and group of elements B and given both are selected whe
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -439,7 +439,6 @@ exports[`given element A and group of elements B and given both are selected whe
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -534,6 +533,7 @@ exports[`given element A and group of elements B and given both are selected whe
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -855,7 +855,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -941,6 +940,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -1421,7 +1421,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -1507,6 +1506,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -1628,7 +1628,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -1719,6 +1718,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2012,7 +2012,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2100,6 +2099,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2257,7 +2257,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2343,6 +2342,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2437,7 +2437,6 @@ exports[`regression tests > can drag element that covers another element, while
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2525,6 +2524,7 @@ exports[`regression tests > can drag element that covers another element, while
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -2762,7 +2762,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -2848,6 +2847,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3017,7 +3017,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3105,6 +3104,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3258,7 +3258,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3346,6 +3345,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3494,7 +3494,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3582,6 +3581,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -3752,7 +3752,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -3841,6 +3840,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -4066,7 +4066,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -4154,6 +4153,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -4502,7 +4502,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -4617,6 +4616,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -4785,7 +4785,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -4872,6 +4871,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -5061,7 +5061,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -5175,6 +5174,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -5269,7 +5269,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -5355,6 +5354,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -5469,7 +5469,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -5555,6 +5554,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -5862,7 +5862,6 @@ exports[`regression tests > drags selected elements from point inside common bou
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -5952,6 +5951,7 @@ exports[`regression tests > drags selected elements from point inside common bou
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -6159,7 +6159,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -6948,7 +6947,6 @@ exports[`regression tests > given a group of selected elements with an element t
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -7037,6 +7035,7 @@ exports[`regression tests > given a group of selected elements with an element t
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -7282,7 +7281,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -7371,6 +7369,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -7561,7 +7560,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -7649,6 +7647,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -7796,7 +7795,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -7884,6 +7882,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -8036,7 +8035,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -8122,6 +8120,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -8216,7 +8215,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -8302,6 +8300,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -8396,7 +8395,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -8482,6 +8480,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -8576,7 +8575,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -8809,7 +8807,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -9040,7 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -9124,6 +9120,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -9232,7 +9229,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -9465,7 +9461,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -9551,6 +9546,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -9645,7 +9641,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -9876,7 +9871,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -9962,6 +9956,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -10056,7 +10051,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -10140,6 +10134,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -10248,7 +10243,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -10334,6 +10328,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -10428,7 +10423,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -10522,6 +10516,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -10959,7 +10954,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -11047,6 +11041,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -11239,7 +11234,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -11323,6 +11317,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -11362,7 +11357,6 @@ exports[`regression tests > shift click on selected element should deselect it o
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -11448,6 +11442,7 @@ exports[`regression tests > shift click on selected element should deselect it o
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -11562,7 +11557,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -11652,6 +11646,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -11881,7 +11876,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -11973,6 +11967,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -12310,7 +12305,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -12406,6 +12400,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -12950,7 +12945,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -13037,6 +13031,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -13076,7 +13071,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -13164,6 +13158,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -13707,7 +13702,6 @@ exports[`regression tests > switches from group of selected elements to another
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -13824,6 +13818,7 @@ exports[`regression tests > switches from group of selected elements to another
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -14046,7 +14041,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -14162,6 +14156,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -14310,7 +14305,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -14394,6 +14388,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -14433,7 +14428,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -14798,7 +14792,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -14882,6 +14875,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -14921,7 +14915,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -15008,6 +15001,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  "showHyperlinkPopup": false,
  "showWelcomeScreen": true,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -4,7 +4,6 @@ import {
  elementCenterPoint,
  getCommonBounds,
  getElementPointsCoords,
-  getLineHeightInPx,
 } from "@excalidraw/element";
 import { cropElement } from "@excalidraw/element";
 import {
@@ -21,7 +20,7 @@ import {
  isTextElement,
  isFrameLikeElement,
 } from "@excalidraw/element";
-import { KEYS, arrayToMap, getLineHeight } from "@excalidraw/common";
+import { KEYS, arrayToMap } from "@excalidraw/common";

 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";

@@ -517,17 +516,8 @@ export class UI {
    UI.clickTool(type);

    if (type === "text") {
-      const clickY = h.state.gridModeEnabled
-        ? y
-        : y +
-          getLineHeightInPx(
-            h.state.currentItemFontSize,
-            getLineHeight(h.state.currentItemFontFamily),
-          ) /
-            2;
-
      mouse.reset();
-      mouse.click(x, clickY);
+      mouse.click(x, y);
    } else if ((type === "line" || type === "arrow") && points.length > 2) {
      points.forEach((point) => {
        mouse.reset();
@@ -314,7 +314,7 @@ describe("history", () => {
        expect.objectContaining({ id: rect2.id, isDeleted: true }),
      ]);

-      mouse.downAt(-10, -10);
+      mouse.downAt(0, 0);
      mouse.moveTo(25, 25);
      mouse.moveTo(50, 50);
      mouse.upAt(50, 50);
@@ -2971,82 +2971,6 @@ describe("history", () => {
      expect(h.state.editingGroupId).toBeNull();
    });

-    // TODO mark with "noncritical" tag once we migrate to vitest 4
-    it.skip("should support undo and redo when escape unwinds nested group editing", async () => {
-      const rectA = API.createElement({
-        type: "rectangle",
-        groupIds: ["inner", "outer"],
-        x: 0,
-      });
-      const rectB = API.createElement({
-        type: "rectangle",
-        groupIds: ["outer"],
-        x: 100,
-      });
-      const rectC = API.createElement({
-        type: "rectangle",
-        groupIds: ["inner", "outer"],
-        x: 200,
-      });
-
-      API.setElements([rectA, rectB, rectC]);
-      mouse.select(rectA);
-      mouse.doubleClickOn(rectA);
-      mouse.doubleClickOn(rectA);
-
-      assertSelectedElements([rectA]);
-      expect(h.state.editingGroupId).toBe("inner");
-      expect(API.getUndoStack().length).toBe(3);
-      expect(API.getRedoStack().length).toBe(0);
-
-      Keyboard.keyPress(KEYS.ESCAPE);
-      assertSelectedElements([rectA, rectC]);
-      expect(h.state.editingGroupId).toBe("outer");
-      expect(API.getUndoStack().length).toBe(4);
-      expect(API.getRedoStack().length).toBe(0);
-
-      Keyboard.keyPress(KEYS.ESCAPE);
-      assertSelectedElements([rectA, rectB, rectC]);
-      expect(h.state.editingGroupId).toBeNull();
-      expect(h.state.selectedGroupIds).toEqual({ outer: true });
-      expect(API.getUndoStack().length).toBe(5);
-      expect(API.getRedoStack().length).toBe(0);
-
-      Keyboard.keyPress(KEYS.ESCAPE);
-      expect(API.getSelectedElements()).toEqual([]);
-      expect(h.state.editingGroupId).toBeNull();
-      expect(h.state.selectedGroupIds).toEqual({});
-      expect(API.getUndoStack().length).toBe(6);
-      expect(API.getRedoStack().length).toBe(0);
-
-      Keyboard.undo();
-      assertSelectedElements([rectA, rectB, rectC]);
-      expect(h.state.editingGroupId).toBeNull();
-      expect(h.state.selectedGroupIds).toEqual({ outer: true });
-
-      Keyboard.undo();
-      assertSelectedElements([rectA, rectC]);
-      expect(h.state.editingGroupId).toBe("outer");
-
-      Keyboard.undo();
-      assertSelectedElements([rectA]);
-      expect(h.state.editingGroupId).toBe("inner");
-
-      Keyboard.redo();
-      assertSelectedElements([rectA, rectC]);
-      expect(h.state.editingGroupId).toBe("outer");
-
-      Keyboard.redo();
-      assertSelectedElements([rectA, rectB, rectC]);
-      expect(h.state.editingGroupId).toBeNull();
-      expect(h.state.selectedGroupIds).toEqual({ outer: true });
-
-      Keyboard.redo();
-      expect(API.getSelectedElements()).toEqual([]);
-      expect(h.state.editingGroupId).toBeNull();
-      expect(h.state.selectedGroupIds).toEqual({});
-    });
-
    it("should iterate through the history when selected or editing linear element was remotely deleted", async () => {
      // create three point arrow
      UI.clickTool("arrow");
@@ -468,7 +468,7 @@ describe("regression tests", () => {
    mouse.reset();
    mouse.down();
    mouse.move(-1000, -1000);
-    mouse.restorePosition(end[0] + 3, end[1] + 3);
+    mouse.restorePosition(...end);
    mouse.up();

    expect(h.elements.length).toBe(3);
@@ -519,7 +519,7 @@ describe("regression tests", () => {
    mouse.reset();
    mouse.down();
    mouse.move(-1000, -1000);
-    mouse.restorePosition(end[0] + 3, end[1] + 3);
+    mouse.restorePosition(...end);
    mouse.up();

    for (const element of h.elements) {
@@ -537,7 +537,7 @@ describe("regression tests", () => {
    mouse.moveTo(-10, -10); // the NW resizing handle is at [0, 0], so moving further
    mouse.down();
    mouse.move(-1000, -1000);
-    mouse.restorePosition(end[0] + 3, end[1] + 3);
+    mouse.restorePosition(...end);
    mouse.up();

    Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
@@ -1,9 +1,7 @@
 import React from "react";
 import { vi } from "vitest";

-import { KEYS, ROUNDNESS, reseed } from "@excalidraw/common";
-import { getElementBounds, getElementLineSegments } from "@excalidraw/element";
-import { pointFrom, pointRotateRads, type LocalPoint } from "@excalidraw/math";
+import { KEYS, reseed } from "@excalidraw/common";

 import { SHAPES } from "../components/shapes";

@@ -14,7 +12,6 @@ import * as StaticScene from "../renderer/staticScene";
 import { API } from "./helpers/api";
 import { Keyboard, Pointer, UI } from "./helpers/ui";
 import {
-  act,
  render,
  fireEvent,
  mockBoundingClientRect,
@@ -42,19 +39,6 @@ const { h } = window;

 const mouse = new Pointer("mouse");

-const getOutlineBounds = (element: ReturnType<typeof API.createElement>) => {
-  const sceneElement = API.getElement(element);
-  const elementsMap = h.scene.getNonDeletedElementsMap();
-  const points = getElementLineSegments(sceneElement, elementsMap).flat();
-
-  return [
-    Math.min(...points.map((point) => point[0])),
-    Math.min(...points.map((point) => point[1])),
-    Math.max(...points.map((point) => point[0])),
-    Math.max(...points.map((point) => point[1])),
-  ] as const;
-};
-
 describe("box-selection", () => {
  beforeEach(async () => {
    await render(<Excalidraw />);
@@ -124,523 +108,6 @@ describe("box-selection", () => {

    assertSelectedElements([]);
  });
-
-  it("should not select an element when the selection box only partially overlaps it", () => {
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 50,
-      height: 50,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect1]);
-
-    mouse.downAt(25, -20);
-    mouse.move(-1000, -1000);
-    mouse.moveTo(75, 70);
-    mouse.up();
-
-    assertSelectedElements([]);
-  });
-});
-
-describe("lasso reselection", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("should allow ctrl+alt lasso reselection when starting inside the active common bounds", () => {
-    const rectA = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-    const rectB = API.createElement({
-      type: "rectangle",
-      x: 220,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "blue",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rectA, rectB]);
-    mouse.select([rectA, rectB]);
-    act(() => {
-      h.app.setActiveTool({ type: "lasso" });
-    });
-
-    Keyboard.withModifierKeys({ ctrl: true, alt: true }, () => {
-      mouse.downAt(110, 50);
-      mouse.moveTo(50, -20);
-
-      expect(h.app.lassoTrail.hasCurrentTrail).toBe(true);
-
-      mouse.moveTo(-20, 50);
-      mouse.moveTo(50, 120);
-      mouse.moveTo(110, 50);
-      mouse.up();
-    });
-
-    assertSelectedElements([rectA.id]);
-  });
-});
-
-describe("box-selection overlap mode", () => {
-  const boxSelect = (
-    startX: number,
-    startY: number,
-    endX: number,
-    endY: number,
-  ) => {
-    mouse.downAt(startX, startY);
-    mouse.move(-1000, -1000);
-    mouse.moveTo(endX, endY);
-    mouse.up();
-  };
-
-  const boxSelectTopLeftAabbCorner = (
-    element: ReturnType<typeof API.createElement>,
-  ) => {
-    const sceneElement = API.getElement(element);
-    const elementsMap = h.scene.getNonDeletedElementsMap();
-    const [x1, y1] = getElementBounds(sceneElement, elementsMap);
-
-    boxSelect(x1 + 2, y1 + 2, x1 + 12, y1 + 12);
-  };
-
-  const boxSelectTopRightAabbCorner = (
-    element: ReturnType<typeof API.createElement>,
-  ) => {
-    const sceneElement = API.getElement(element);
-    const elementsMap = h.scene.getNonDeletedElementsMap();
-    const [, y1, x2] = getElementBounds(sceneElement, elementsMap);
-
-    boxSelect(x2 - 12, y1 + 2, x2 - 2, y1 + 12);
-  };
-
-  const boxSelectTopLeftRotatedLocalBoundsCorner = (
-    element: ReturnType<typeof API.createElement>,
-  ) => {
-    const sceneElement = API.getElement(element);
-    const elementsMap = h.scene.getNonDeletedElementsMap();
-    const [x1, y1, x2, y2] = getElementBounds(sceneElement, elementsMap, true);
-    const center = pointFrom((x1 + x2) / 2, (y1 + y2) / 2);
-    const [cornerX, cornerY] = pointRotateRads(
-      pointFrom(x1, y1),
-      center,
-      sceneElement.angle,
-    );
-
-    boxSelect(cornerX - 4, cornerY - 4, cornerX + 4, cornerY + 4);
-  };
-
-  beforeEach(async () => {
-    await render(
-      <Excalidraw
-        initialData={{ appState: { boxSelectionMode: "overlap" } }}
-      />,
-    );
-  });
-
-  it("should select an element when the selection box partially overlaps it", () => {
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 50,
-      height: 50,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect1]);
-
-    boxSelect(25, -20, 75, 70);
-
-    assertSelectedElements([rect1.id]);
-  });
-
-  it("should not select a transparent rectangle when the selection box stays inside it", () => {
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect1]);
-
-    boxSelect(25, 25, 75, 75);
-
-    assertSelectedElements([]);
-  });
-
-  it("should select a transparent rectangle when the selection box crosses its outline", () => {
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect1]);
-
-    boxSelect(25, 25, 125, 75);
-
-    assertSelectedElements([rect1.id]);
-  });
-
-  it("should not select a rotated transparent rectangle when the selection box stays inside it", () => {
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      backgroundColor: "transparent",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect1]);
-
-    boxSelect(40, 40, 60, 60);
-
-    assertSelectedElements([]);
-  });
-
-  it("should select a rotated rounded rectangle when the selection box contains its outline but not its bounds", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 180,
-      angle: Math.PI / 6,
-      backgroundColor: "transparent",
-      fillStyle: "solid",
-      roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS },
-      roughness: 0,
-    });
-
-    API.setElements([rect]);
-
-    const sceneRect = API.getElement(rect);
-    const elementsMap = h.scene.getNonDeletedElementsMap();
-    const [boundsX1, boundsY1, boundsX2, boundsY2] = getElementBounds(
-      sceneRect,
-      elementsMap,
-    );
-    const [outlineX1, outlineY1, outlineX2, outlineY2] = getOutlineBounds(rect);
-
-    expect(outlineX1).toBeGreaterThan(boundsX1 - 1);
-    expect(outlineY1).toBeGreaterThan(boundsY1 - 1);
-    expect(outlineX2).toBeLessThan(boundsX2 + 1);
-    expect(outlineY2).toBeLessThan(boundsY2 + 1);
-
-    boxSelect(
-      outlineX1 - (outlineX1 - boundsX1) / 2,
-      outlineY1 - (outlineY1 - boundsY1) / 2,
-      outlineX2 + (boundsX2 - outlineX2) / 2,
-      outlineY2 + (boundsY2 - outlineY2) / 2,
-    );
-
-    assertSelectedElements([rect.id]);
-  });
-
-  it("should not select a filled rotated rectangle when the selection box only overlaps its axis-aligned bounds", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect]);
-
-    boxSelectTopLeftAabbCorner(rect);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a filled ellipse when the selection box only overlaps its bounds corner", () => {
-    const ellipse = API.createElement({
-      type: "ellipse",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([ellipse]);
-
-    boxSelectTopRightAabbCorner(ellipse);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a filled diamond when the selection box only overlaps its bounds corner", () => {
-    const diamond = API.createElement({
-      type: "diamond",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([diamond]);
-
-    boxSelectTopRightAabbCorner(diamond);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a filled rotated ellipse when the selection box only overlaps its axis-aligned bounds", () => {
-    const ellipse = API.createElement({
-      type: "ellipse",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([ellipse]);
-
-    boxSelectTopLeftRotatedLocalBoundsCorner(ellipse);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a filled rotated diamond when the selection box only overlaps its rotated local bounds", () => {
-    const diamond = API.createElement({
-      type: "diamond",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([diamond]);
-
-    boxSelectTopLeftRotatedLocalBoundsCorner(diamond);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select rotated text when the selection box only overlaps its axis-aligned bounds", () => {
-    const text = API.createElement({
-      type: "text",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      text: "test",
-    });
-
-    API.setElements([text]);
-
-    boxSelect(-18, -18, -8, -8);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select rotated image when the selection box only overlaps its axis-aligned bounds", () => {
-    const image = API.createElement({
-      type: "image",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      fileId: "file_A",
-      status: "saved",
-    });
-
-    API.setElements([image]);
-
-    boxSelect(-18, -18, -8, -8);
-
-    assertSelectedElements([]);
-  });
-
-  it("should deselect a selected rotated rectangle when clicking in the empty corner of its axis-aligned bounds", () => {
-    const rect = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([rect]);
-
-    mouse.clickAt(50, 50);
-    assertSelectedElements([rect.id]);
-
-    const sceneRect = API.getElement(rect);
-    const elementsMap = h.scene.getNonDeletedElementsMap();
-    const [x1, y1] = getElementBounds(sceneRect, elementsMap);
-
-    mouse.clickAt(x1 + 2, y1 + 2);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a line when the selection box only overlaps its bounds", () => {
-    const line = API.createElement({
-      type: "line",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-      points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(100, 100)],
-    });
-
-    API.setElements([line]);
-
-    boxSelect(20, 50, 30, 60);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not click-select rotated freedraw in the corner of its axis-aligned bounds", () => {
-    const freedraw = API.createElement({
-      type: "freedraw",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      angle: Math.PI / 4,
-      backgroundColor: "transparent",
-      points: [
-        pointFrom<LocalPoint>(0, 0),
-        pointFrom<LocalPoint>(100, 0),
-        pointFrom<LocalPoint>(100, 100),
-        pointFrom<LocalPoint>(0, 100),
-        pointFrom<LocalPoint>(0, 0),
-      ],
-    });
-
-    API.setElements([freedraw]);
-
-    const sceneFreedraw = API.getElement(freedraw);
-    const elementsMap = h.scene.getNonDeletedElementsMap();
-    const [x1, y1] = getElementBounds(sceneFreedraw, elementsMap);
-
-    mouse.clickAt(x1 + 2, y1 + 2);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a freedraw when the selection box only overlaps its bounds", () => {
-    const freedraw = API.createElement({
-      type: "freedraw",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-      points: [
-        pointFrom<LocalPoint>(0, 0),
-        pointFrom<LocalPoint>(50, 50),
-        pointFrom<LocalPoint>(100, 100),
-      ],
-    });
-
-    API.setElements([freedraw]);
-
-    boxSelect(20, 50, 30, 60);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a transparent framed element when the selection box stays inside its clipped bounds", () => {
-    const frame = API.createElement({
-      type: "frame",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-      backgroundColor: "transparent",
-      fillStyle: "solid",
-    });
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 50,
-      y: 10,
-      width: 100,
-      height: 80,
-      frameId: frame.id,
-      backgroundColor: "transparent",
-      fillStyle: "solid",
-    });
-
-    API.setElements([frame, rect1]);
-
-    boxSelect(60, 20, 90, 60);
-
-    assertSelectedElements([]);
-  });
-
-  it("should not select a framed element when selection only overlaps its clipped-out outline", () => {
-    const frame = API.createElement({
-      type: "frame",
-      x: 100,
-      y: 100,
-      width: 100,
-      height: 100,
-    });
-    const rect1 = API.createElement({
-      type: "rectangle",
-      x: 50,
-      y: 50,
-      width: 200,
-      height: 200,
-      frameId: frame.id,
-      backgroundColor: "red",
-      fillStyle: "solid",
-    });
-
-    API.setElements([frame, rect1]);
-
-    boxSelect(40, 170, 70, 220);
-
-    assertSelectedElements([]);
-  });
 });

 describe("inner box-selection", () => {
@@ -859,7 +326,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -892,7 +359,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -925,7 +392,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
-    expect(renderStaticScene).toHaveBeenCalledTimes(7);
+    expect(renderStaticScene).toHaveBeenCalledTimes(6);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -971,7 +438,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -1016,7 +483,7 @@ describe("select single element on the scene", () => {
    fireEvent.pointerUp(canvas);

    expect(renderInteractiveScene).toHaveBeenCalledTimes(10);
-    expect(renderStaticScene).toHaveBeenCalledTimes(9);
+    expect(renderStaticScene).toHaveBeenCalledTimes(8);
    expect(h.state.selectionElement).toBeNull();
    expect(h.elements.length).toEqual(1);
    expect(h.state.selectedElementIds[h.elements[0].id]).toBeTruthy();
@@ -1091,58 +558,3 @@ describe("selectedElementIds stability", () => {
    expect(h.state.selectedElementIds).toBe(selectedElementIds_2);
  });
 });
-
-describe("deselecting", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw handleKeyboardGlobally={true} />);
-  });
-
-  it("esc unwinds nested group editing before deselecting", () => {
-    const rectA = API.createElement({
-      type: "rectangle",
-      x: 0,
-      y: 0,
-      groupIds: ["inner", "outer"],
-    });
-    const rectB = API.createElement({
-      type: "rectangle",
-      x: 100,
-      y: 0,
-      groupIds: ["outer"],
-    });
-    const rectC = API.createElement({
-      type: "rectangle",
-      x: 200,
-      y: 0,
-      groupIds: ["inner", "outer"],
-    });
-
-    API.setElements([rectA, rectB, rectC]);
-
-    mouse.select(rectA);
-    assertSelectedElements(rectA, rectB, rectC);
-    expect(h.state.editingGroupId).toBeNull();
-
-    mouse.doubleClickOn(rectA);
-    assertSelectedElements(rectA, rectC);
-    expect(h.state.editingGroupId).toBe("outer");
-
-    mouse.doubleClickOn(rectA);
-    assertSelectedElements(rectA);
-    expect(h.state.editingGroupId).toBe("inner");
-
-    Keyboard.keyPress(KEYS.ESCAPE);
-    assertSelectedElements(rectA, rectC);
-    expect(h.state.editingGroupId).toBe("outer");
-
-    Keyboard.keyPress(KEYS.ESCAPE);
-    assertSelectedElements(rectA, rectB, rectC);
-    expect(h.state.editingGroupId).toBeNull();
-    expect(h.state.selectedGroupIds).toEqual({ outer: true });
-
-    Keyboard.keyPress(KEYS.ESCAPE);
-    expect(API.getSelectedElements()).toEqual([]);
-    expect(h.state.editingGroupId).toBeNull();
-    expect(h.state.selectedGroupIds).toEqual({});
-  });
-});
@@ -1,833 +0,0 @@
-import { arrayToMap } from "@excalidraw/common";
-import {
-  pointFrom,
-  rangeInclusive,
-  type GlobalPoint,
-  type Radians,
-} from "@excalidraw/math";
-
-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
-import { getDefaultAppState } from "../appState";
-import {
-  getElementsCorners,
-  getVisibleGaps,
-  getReferenceSnapPoints,
-  SnapCache,
-  snapDraggedElements,
-} from "../snapping";
-
-import { API } from "./helpers/api";
-
-import type {
-  AppClassProperties,
-  AppState,
-  NormalizedZoomValue,
-} from "../types";
-
-type ReferenceSnapPoints = NonNullable<
-  ReturnType<typeof SnapCache.getReferenceSnapPoints>
->;
-
-const NO_MODIFIER_KEYS = {
-  altKey: false,
-  ctrlKey: false,
-  metaKey: false,
-  shiftKey: false,
-};
-
-const createSnappingApp = (appState: Partial<AppState> = {}) =>
-  ({
-    props: {},
-    state: {
-      ...getDefaultAppState(),
-      objectsSnapModeEnabled: true,
-      width: 1000,
-      height: 1000,
-      offsetLeft: 0,
-      offsetTop: 0,
-      ...appState,
-    },
-  } as AppClassProperties);
-
-const getHorizontalPointSnapLineCoordinates = (
-  snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
-) => {
-  return snapLines
-    .filter((snapLine) => snapLine.type === "points")
-    .filter((snapLine) => {
-      const [firstPoint, lastPoint] = snapLine.points;
-
-      return firstPoint[1] === lastPoint[1];
-    })
-    .map((snapLine) => {
-      return snapLine.points[0][1];
-    })
-    .sort((a, b) => a - b);
-};
-
-const getVerticalPointSnapLineCoordinates = (
-  snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
-) => {
-  return snapLines
-    .filter((snapLine) => snapLine.type === "points")
-    .filter((snapLine) => {
-      const [firstPoint, lastPoint] = snapLine.points;
-
-      return firstPoint[0] === lastPoint[0];
-    })
-    .map((snapLine) => {
-      return snapLine.points[0][0];
-    })
-    .sort((a, b) => a - b);
-};
-
-const getHorizontalPointSnapLineMaxX = (
-  snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
-) => {
-  const horizontalSnapLine = snapLines
-    .filter((snapLine) => snapLine.type === "points")
-    .find((snapLine) => {
-      const [firstPoint, lastPoint] = snapLine.points;
-
-      return firstPoint[1] === lastPoint[1];
-    });
-
-  if (!horizontalSnapLine) {
-    return null;
-  }
-
-  return horizontalSnapLine.points[horizontalSnapLine.points.length - 1][0];
-};
-
-const getHorizontalPointSnapLineXRange = (
-  snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
-) => {
-  const horizontalSnapLine = snapLines
-    .filter((snapLine) => snapLine.type === "points")
-    .find((snapLine) => {
-      const [firstPoint, lastPoint] = snapLine.points;
-
-      return firstPoint[1] === lastPoint[1];
-    });
-
-  if (!horizontalSnapLine) {
-    return null;
-  }
-
-  return [
-    horizontalSnapLine.points[0][0],
-    horizontalSnapLine.points[horizontalSnapLine.points.length - 1][0],
-  ] as const;
-};
-
-const getHorizontalGapSnapLines = (
-  snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
-) => {
-  return snapLines.filter(
-    (snapLine) =>
-      snapLine.type === "gap" && snapLine.direction === "horizontal",
-  );
-};
-
-const getVerticalGapSnapLines = (
-  snapLines: ReturnType<typeof snapDraggedElements>["snapLines"],
-) => {
-  return snapLines.filter(
-    (snapLine) => snapLine.type === "gap" && snapLine.direction === "vertical",
-  );
-};
-
-const getPointKeys = (points: ReturnType<typeof getElementsCorners>) => {
-  return points.map((point) => point.join(","));
-};
-
-const getReferenceSnapPointKeys = (
-  elements: ExcalidrawElement[],
-  selectedElements: ExcalidrawElement[],
-  app: AppClassProperties,
-) => {
-  return new Set(
-    getReferenceSnapPoints(
-      elements,
-      selectedElements,
-      app.state,
-      arrayToMap(elements),
-    ).map((snapPoint) => snapPoint.point.join(",")),
-  );
-};
-
-const primeReferenceSnapPoints = (
-  elements: ExcalidrawElement[],
-  selectedElements: ExcalidrawElement[],
-) => {
-  const selectedElementIds = new Set(
-    selectedElements.map((element) => element.id),
-  );
-  const elementsMap = arrayToMap(elements);
-
-  SnapCache.setReferenceSnapPoints(
-    elements
-      .filter((element) => !selectedElementIds.has(element.id))
-      .flatMap((element) => {
-        const corners = getElementsCorners([element], elementsMap);
-
-        return corners.map((point, index) => ({
-          point,
-          type: index === corners.length - 1 ? "center" : "outer",
-          snapSourceId: element.id,
-        }));
-      }) as Parameters<typeof SnapCache.setReferenceSnapPoints>[0],
-  );
-};
-
-describe("snapping", () => {
-  afterEach(() => {
-    SnapCache.destroy();
-  });
-
-  it("does not use frame children as references when snapping outside elements", () => {
-    const frame = API.createElement({
-      type: "frame",
-      id: "frame",
-      x: 0,
-      y: 0,
-      width: 300,
-      height: 300,
-    });
-    const frameChild = API.createElement({
-      type: "rectangle",
-      id: "frameChild",
-      x: 37,
-      y: 53,
-      width: 71,
-      height: 83,
-      frameId: frame.id,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 400,
-      y: 50,
-      width: 100,
-      height: 100,
-    });
-    const elements = [frame, frameChild, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    const referenceSnapPointKeys = getReferenceSnapPointKeys(
-      elements,
-      [selected],
-      app,
-    );
-    const frameChildPointKeys = getPointKeys(
-      getElementsCorners([frameChild], arrayToMap(elements)),
-    );
-
-    expect(
-      frameChildPointKeys.some((pointKey) =>
-        referenceSnapPointKeys.has(pointKey),
-      ),
-    ).toBe(false);
-  });
-
-  it("uses frame siblings as references when snapping elements in the same frame", () => {
-    const frame = API.createElement({
-      type: "frame",
-      id: "frame",
-      x: 0,
-      y: 0,
-      width: 300,
-      height: 300,
-    });
-    const sibling = API.createElement({
-      type: "rectangle",
-      id: "sibling",
-      x: 37,
-      y: 53,
-      width: 71,
-      height: 83,
-      frameId: frame.id,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 150,
-      y: 50,
-      width: 100,
-      height: 100,
-      frameId: frame.id,
-    });
-    const elements = [frame, sibling, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    const referenceSnapPointKeys = getReferenceSnapPointKeys(
-      elements,
-      [selected],
-      app,
-    );
-    const siblingPointKeys = getPointKeys(
-      getElementsCorners([sibling], arrayToMap(elements)),
-    );
-
-    expect(
-      siblingPointKeys.some((pointKey) => referenceSnapPointKeys.has(pointKey)),
-    ).toBe(true);
-  });
-
-  it("does not use frame children as references when snapping the frame itself", () => {
-    const frame = API.createElement({
-      type: "frame",
-      id: "frame",
-      x: 0,
-      y: 0,
-      width: 300,
-      height: 300,
-    });
-    const frameChild = API.createElement({
-      type: "rectangle",
-      id: "frameChild",
-      x: 37,
-      y: 53,
-      width: 71,
-      height: 83,
-      frameId: frame.id,
-    });
-    const elements = [frame, frameChild];
-    const app = createSnappingApp({
-      selectedElementIds: { [frame.id]: true },
-    });
-
-    const referenceSnapPointKeys = getReferenceSnapPointKeys(
-      elements,
-      [frame],
-      app,
-    );
-    const frameChildPointKeys = getPointKeys(
-      getElementsCorners([frameChild], arrayToMap(elements)),
-    );
-
-    expect(
-      frameChildPointKeys.some((pointKey) =>
-        referenceSnapPointKeys.has(pointKey),
-      ),
-    ).toBe(false);
-  });
-
-  it("does not use frame children as visible gap references when snapping outside elements", () => {
-    const frame = API.createElement({
-      type: "frame",
-      id: "frame",
-      x: 0,
-      y: 0,
-      width: 500,
-      height: 300,
-    });
-    const frameChildA = API.createElement({
-      type: "rectangle",
-      id: "frameChildA",
-      x: 50,
-      y: 50,
-      width: 100,
-      height: 100,
-      frameId: frame.id,
-    });
-    const frameChildB = API.createElement({
-      type: "rectangle",
-      id: "frameChildB",
-      x: 250,
-      y: 50,
-      width: 100,
-      height: 100,
-      frameId: frame.id,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 700,
-      y: 50,
-      width: 100,
-      height: 100,
-    });
-    const elements = [frame, frameChildA, frameChildB, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    const visibleGaps = getVisibleGaps(
-      elements,
-      [selected],
-      app.state,
-      arrayToMap(elements),
-    );
-
-    expect(visibleGaps.horizontalGaps).toHaveLength(0);
-    expect(visibleGaps.verticalGaps).toHaveLength(0);
-  });
-
-  it("filters center and inner outer point snaplines for the same reference", () => {
-    const angle = 0.68 as Radians;
-    const reference = API.createElement({
-      type: "rectangle",
-      id: "reference",
-      x: 0,
-      y: 0,
-      width: 140,
-      height: 140,
-      angle,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 200,
-      y: 0,
-      width: 140,
-      height: 140,
-      angle,
-    });
-    const elements = [reference, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    primeReferenceSnapPoints(elements, [selected]);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getHorizontalPointSnapLineCoordinates(snapLines)).toHaveLength(2);
-  });
-
-  it("keeps a snapline that is redundant for one reference but needed for another", () => {
-    const angle = 0.68 as Radians;
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 200,
-      y: 0,
-      width: 140,
-      height: 140,
-      angle,
-    });
-    const elements = [selected];
-    const elementsMap = arrayToMap(elements);
-    const selectedSnapPoints = getElementsCorners([selected], elementsMap);
-    const outerSnapPoints = selectedSnapPoints.slice(0, -1);
-    const centerSnapPoint = selectedSnapPoints[selectedSnapPoints.length - 1];
-    const innerOuterSnapPoint = [...outerSnapPoints].sort(
-      (a, b) => a[1] - b[1],
-    )[1];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    const referenceSnapPoints: ReferenceSnapPoints = [
-      ...outerSnapPoints.map((point) => ({
-        point: pointFrom<GlobalPoint>(point[0] - 200, point[1]),
-        type: "outer" as const,
-        snapSourceId: "referenceA",
-      })),
-      {
-        point: pointFrom<GlobalPoint>(
-          centerSnapPoint[0] - 200,
-          centerSnapPoint[1],
-        ),
-        type: "center" as const,
-        snapSourceId: "referenceA",
-      },
-      {
-        point: pointFrom<GlobalPoint>(
-          innerOuterSnapPoint[0] - 300,
-          innerOuterSnapPoint[1],
-        ),
-        type: "outer" as const,
-        snapSourceId: "referenceB",
-      },
-    ];
-
-    SnapCache.setReferenceSnapPoints(referenceSnapPoints);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      elementsMap,
-    );
-
-    expect(getHorizontalPointSnapLineCoordinates(snapLines)).toHaveLength(3);
-  });
-
-  it("keeps a center snapline when no outer snaplines imply it", () => {
-    const reference = API.createElement({
-      type: "rectangle",
-      id: "reference",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 200,
-      y: 25,
-      width: 50,
-      height: 50,
-    });
-    const elements = [reference, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    primeReferenceSnapPoints(elements, [selected]);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getHorizontalPointSnapLineCoordinates(snapLines)).toEqual([50]);
-  });
-
-  it("filters center snaplines when matching outer offsets differ by rounding precision", () => {
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 2532.227563984471,
-      y: -1553.9657067952232,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const reference = API.createElement({
-      type: "rectangle",
-      id: "reference",
-      x: 2532.2275640966914,
-      y: -1299.4323092037737,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const elements = [reference, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    primeReferenceSnapPoints(elements, [selected]);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getVerticalPointSnapLineCoordinates(snapLines)).toEqual([
-      2532.227564, 2672.329126,
-    ]);
-  });
-
-  it("keeps outer snaplines stable while dragging a snapped element through rounding-equivalent offsets", () => {
-    const referenceMiddle = API.createElement({
-      type: "rectangle",
-      id: "referenceMiddle",
-      x: 2532.22756398447,
-      y: -1553.9657067952237,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const referenceAbove = API.createElement({
-      type: "rectangle",
-      id: "referenceAbove",
-      x: 2532.2275637826165,
-      y: -1779.7363232531268,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 2532.227563096691,
-      y: -1328.1950902037736,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const elements = [referenceAbove, referenceMiddle, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    primeReferenceSnapPoints(elements, [selected]);
-
-    for (const dragOffsetX of [-4, -1, -0.1, 0, 0.1, 1, 4]) {
-      const { snapLines } = snapDraggedElements(
-        elements,
-        { x: dragOffsetX, y: 0 },
-        app,
-        NO_MODIFIER_KEYS,
-        arrayToMap(elements),
-      );
-      const coordinates = getVerticalPointSnapLineCoordinates(snapLines);
-
-      expect(coordinates).toHaveLength(2);
-      expect(coordinates[1] - coordinates[0]).toBeCloseTo(selected.width, 5);
-    }
-  });
-
-  it("keeps same-offset point snaps even across distant references", () => {
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-    const elements = [selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    SnapCache.setReferenceSnapPoints([
-      {
-        point: pointFrom<GlobalPoint>(220, 50),
-        type: "center",
-        snapSourceId: "near",
-      },
-      {
-        point: pointFrom<GlobalPoint>(900, 50),
-        type: "center",
-        snapSourceId: "far",
-      },
-    ]);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getHorizontalPointSnapLineMaxX(snapLines)).toBe(900);
-  });
-
-  it("prefers a nearby point snap over a slightly better far offset", () => {
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-    const elements = [selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    SnapCache.setReferenceSnapPoints([
-      {
-        point: pointFrom<GlobalPoint>(220, 54),
-        type: "center",
-        snapSourceId: "near",
-      },
-      {
-        point: pointFrom<GlobalPoint>(900, 50),
-        type: "center",
-        snapSourceId: "far",
-      },
-    ]);
-
-    const { snapOffset, snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(snapOffset.y).toBe(4);
-    expect(getHorizontalPointSnapLineMaxX(snapLines)).toBe(220);
-  });
-
-  it("keeps same-offset point snaps when references form a continuous cluster", () => {
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 0,
-      y: 0,
-      width: 100,
-      height: 100,
-    });
-    const elements = [selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    SnapCache.setReferenceSnapPoints([
-      {
-        point: pointFrom<GlobalPoint>(200, 50),
-        type: "center",
-        snapSourceId: "referenceA",
-      },
-      {
-        point: pointFrom<GlobalPoint>(350, 50),
-        type: "center",
-        snapSourceId: "referenceB",
-      },
-      {
-        point: pointFrom<GlobalPoint>(500, 50),
-        type: "center",
-        snapSourceId: "referenceC",
-      },
-    ]);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getHorizontalPointSnapLineMaxX(snapLines)).toBe(500);
-  });
-
-  it("keeps same-source same-offset point snaps across zoom-scaled cluster breaks", () => {
-    const reference = API.createElement({
-      type: "rectangle",
-      id: "reference",
-      x: 0,
-      y: 0,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 338.608871112217,
-      y: 0,
-      width: 140.1015625,
-      height: 140.1015625,
-    });
-    const elements = [reference, selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-      zoom: { value: 1.5 as NormalizedZoomValue },
-    });
-
-    primeReferenceSnapPoints(elements, [selected]);
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    const range = getHorizontalPointSnapLineXRange(snapLines);
-
-    expect(range).not.toBe(null);
-    expect(range![0]).toBeCloseTo(reference.x, 6);
-    expect(range![1]).toBeCloseTo(selected.x + selected.width, 6);
-  });
-
-  it("renders gap snaplines when rounded bounds touch the reference gap overlap", () => {
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 0,
-      y: 0.0000004,
-      width: 100,
-      height: 100,
-    });
-    const elements = [selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    SnapCache.setVisibleGaps({
-      horizontalGaps: [
-        {
-          startBounds: [200, -100, 300, 0],
-          endBounds: [400, -100, 500, 0],
-          startSide: [pointFrom(300, -100), pointFrom(300, 0)],
-          endSide: [pointFrom(400, -100), pointFrom(400, 0)],
-          overlap: rangeInclusive(-100, 0),
-          length: 100,
-        },
-      ],
-      verticalGaps: [],
-    });
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getHorizontalGapSnapLines(snapLines)).toHaveLength(2);
-  });
-
-  it("renders gap snaplines when the winning gap offset only differs by rounding precision", () => {
-    const selected = API.createElement({
-      type: "rectangle",
-      id: "selected",
-      x: 0,
-      y: 399.999999,
-      width: 100,
-      height: 100,
-    });
-    const elements = [selected];
-    const app = createSnappingApp({
-      selectedElementIds: { [selected.id]: true },
-    });
-
-    SnapCache.setReferenceSnapPoints([
-      {
-        point: pointFrom<GlobalPoint>(0, 399.999999),
-        type: "outer",
-        snapSourceId: "reference",
-      },
-    ]);
-    SnapCache.setVisibleGaps({
-      horizontalGaps: [],
-      verticalGaps: [
-        {
-          startBounds: [0, 100, 100, 200],
-          endBounds: [0, 250, 100, 350],
-          startSide: [pointFrom(0, 200), pointFrom(100, 200)],
-          endSide: [pointFrom(0, 250), pointFrom(100, 250)],
-          overlap: rangeInclusive(0, 100),
-          length: 50,
-        },
-      ],
-    });
-
-    const { snapLines } = snapDraggedElements(
-      elements,
-      { x: 0, y: 0 },
-      app,
-      NO_MODIFIER_KEYS,
-      arrayToMap(elements),
-    );
-
-    expect(getVerticalGapSnapLines(snapLines)).toHaveLength(2);
-  });
-});
@@ -1,88 +0,0 @@
-import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common";
-import {
-  pointFrom,
-  pointRotateRads,
-  type GlobalPoint,
-  type Radians,
-} from "@excalidraw/math";
-
-import type { EditorInterface } from "@excalidraw/common";
-
-import type { ExcalidrawTextElement } from "@excalidraw/element/types";
-
-const TEXT_AUTO_RESIZE_HANDLE_GAP = 12;
-const TEXT_AUTO_RESIZE_HANDLE_LENGTH = 16;
-const TEXT_AUTO_RESIZE_HANDLE_HITBOX_WIDTH = 10;
-const TEXT_AUTO_RESIZE_HANDLE_HITBOX_HEIGHT =
-  TEXT_AUTO_RESIZE_HANDLE_LENGTH + 2;
-const MAX_HANDLE_HEIGHT_RATIO = 0.8;
-
-export const getTextBoxPadding = (zoomValue: number) =>
-  (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / zoomValue;
-
-export const getTextAutoResizeHandle = (
-  textElement: ExcalidrawTextElement,
-  zoomValue: number,
-  formFactor: EditorInterface["formFactor"],
-) => {
-  if (
-    formFactor !== "desktop" ||
-    TEXT_AUTO_RESIZE_HANDLE_LENGTH >
-      textElement.height * zoomValue * MAX_HANDLE_HEIGHT_RATIO
-  ) {
-    return null;
-  }
-
-  const padding = getTextBoxPadding(zoomValue);
-  const gap = TEXT_AUTO_RESIZE_HANDLE_GAP / zoomValue;
-  const length = TEXT_AUTO_RESIZE_HANDLE_LENGTH / zoomValue;
-  const center = pointFrom(
-    textElement.x + textElement.width / 2,
-    textElement.y + textElement.height / 2,
-  );
-  const handleCenter = pointRotateRads(
-    pointFrom(center[0] + textElement.width / 2 + padding + gap, center[1]),
-    center,
-    textElement.angle,
-  );
-
-  return {
-    center: handleCenter,
-    start: pointRotateRads(
-      pointFrom(handleCenter[0], handleCenter[1] - length / 2),
-      handleCenter,
-      textElement.angle,
-    ) as GlobalPoint,
-    end: pointRotateRads(
-      pointFrom(handleCenter[0], handleCenter[1] + length / 2),
-      handleCenter,
-      textElement.angle,
-    ) as GlobalPoint,
-    hitboxWidth: TEXT_AUTO_RESIZE_HANDLE_HITBOX_WIDTH / zoomValue,
-    hitboxHeight: TEXT_AUTO_RESIZE_HANDLE_HITBOX_HEIGHT / zoomValue,
-  };
-};
-
-export const isPointHittingTextAutoResizeHandle = (
-  point: Readonly<{ x: number; y: number }>,
-  textElement: ExcalidrawTextElement,
-  zoomValue: number,
-  formFactor: EditorInterface["formFactor"],
-) => {
-  const handle = getTextAutoResizeHandle(textElement, zoomValue, formFactor);
-
-  if (!handle) {
-    return false;
-  }
-
-  const unrotatedPoint = pointRotateRads(
-    pointFrom(point.x, point.y),
-    handle.center,
-    -textElement.angle as Radians,
-  );
-
-  return (
-    Math.abs(unrotatedPoint[0] - handle.center[0]) <= handle.hitboxWidth / 2 &&
-    Math.abs(unrotatedPoint[1] - handle.center[1]) <= handle.hitboxHeight / 2
-  );
-};
@@ -32,7 +32,6 @@ import type {
  OrderedExcalidrawElement,
  ExcalidrawNonSelectionElement,
  BindMode,
-  ExcalidrawTextElement,
 } from "@excalidraw/element/types";

 import type {
@@ -269,8 +268,6 @@ export type ObservedElementsAppState = {
  activeLockedId: AppState["activeLockedId"];
 };

-export type BoxSelectionMode = "contain" | "overlap";
-
 export interface AppState {
  contextMenu: {
    items: ContextMenuItems;
@@ -309,16 +306,11 @@ export interface AppState {
   * `bindingPreference` and keyboard modifiers (ctrl/alt)
   */
  isBindingEnabled: boolean;
-  /** user box selection preference; defaults to "contain" when unset */
-  boxSelectionMode: BoxSelectionMode;
  /** user arrow binding preference */
  bindingPreference: "enabled" | "disabled";
  /** user preference whether arrow snap to midpoints while binding */
  isMidpointSnappingEnabled: boolean;
-  /**
-   * The bindable element the UI highlights for the user when an arrow is
-   * dragged or otherwise its endpoint being close to said element.
-   */
+  startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
  suggestedBinding: {
    element: NonDeleted<ExcalidrawBindableElement>;
    midPoint?: GlobalPoint;
@@ -335,7 +327,7 @@ export interface AppState {
  /**
   * set when a new text is created or when an existing text is being edited
   */
-  editingTextElement: ExcalidrawTextElement | null;
+  editingTextElement: NonDeletedExcalidrawElement | null;
  activeTool: {
    /**
     * indicates a previous tool we should revert back to if we deselect the
@@ -350,11 +342,8 @@ export interface AppState {
    type: "selection" | "lasso";
    initialized: boolean;
  };
-
-  // Pen handling
  penMode: boolean;
  penDetected: boolean;
-
  exportBackground: boolean;
  exportEmbedScene: boolean;
  exportWithDarkMode: boolean;
@@ -478,9 +467,6 @@ export interface AppState {
  // as elements are unlocked, we remove the groupId from the elements
  // and also remove groupId from this map
  lockedMultiSelections: { [groupId: string]: true };
-  // Stores the current bind mode which is detemined at various points during
-  // a drag operation (like pointer position vs bindable element) but needed
-  // globally for calculating the binding strategy
  bindMode: BindMode;
 }

@@ -496,7 +482,10 @@ export type SearchMatch = {
  }[];
 };

-export type UIAppState = Omit<AppState, "cursorButton" | "scrollX" | "scrollY">;
+export type UIAppState = Omit<
+  AppState,
+  "startBoundElement" | "cursorButton" | "scrollX" | "scrollY"
+>;

 export type NormalizedZoomValue = number & { _brand: "normalizedZoom" };

@@ -876,13 +865,8 @@ export type PointerDownState = Readonly<{
    // Whether selected element(s) were duplicated, might change during the
    // pointer interaction
    hasBeenDuplicated: boolean;
-    // Whether the pointer is hitting the common bounding box of selected
-    // elements, which is useful for discriminating between selecitng
-    // the entire selection vs a specific element
    hasHitCommonBoundingBoxOfSelectedElements: boolean;
  };
-  // This is determined on the initial pointer down event to
-  // set various interaction modalities
  withCmdOrCtrl: boolean;
  drag: {
    // Might change during the pointer interaction
@@ -892,8 +876,9 @@ export type PointerDownState = Readonly<{
    // by default same as PointerDownState.origin. On alt-duplication, reset
    // to current pointer position at time of duplication.
    origin: { x: number; y: number };
-    // explicit flag for specific scenarios such as:
-    // - after lasso selection until the next pointer down
+    // Whether to block drag after lasso selection
+    // this is meant to be used to block dragging after lasso selection on PCs
+    // until the next pointer down
    blockDragging: boolean;
  };
  // We need to have these in the state so that we can unsubscribe them
@@ -908,7 +893,6 @@ export type PointerDownState = Readonly<{
    onKeyUp: null | ((event: KeyboardEvent) => void);
  };
  boxSelection: {
-    // If the box selection tool is activated on pointer down
    hasOccurred: boolean;
  };
 }>;
@@ -1,10 +1,7 @@
 import { queryByText } from "@testing-library/react";

 import { pointFrom } from "@excalidraw/math";
-import {
-  getLineHeightInPx,
-  getOriginalContainerHeightFromCache,
-} from "@excalidraw/element";
+import { getOriginalContainerHeightFromCache } from "@excalidraw/element";

 import {
  CODES,
@@ -45,28 +42,6 @@ unmountComponent();
 const tab = "    ";
 const mouse = new Pointer("mouse");

-const exitTextEditorAndAssertSelection = async ({
-  editor,
-  selectedIds,
-  nextText,
-}: {
-  editor: HTMLTextAreaElement;
-  selectedIds: string[];
-  nextText?: string;
-}) => {
-  if (nextText !== undefined) {
-    updateTextEditor(editor, nextText);
-  }
-
-  Keyboard.exitTextEditor(editor);
-
-  expect(await getTextEditor({ waitForEditor: false })).toBe(null);
-  expect(window.h.state.editingTextElement).toBeNull();
-  expect(API.getSelectedElements().map((element) => element.id)).toEqual(
-    selectedIds,
-  );
-};
-
 describe("textWysiwyg", () => {
  describe("start text editing", () => {
    const { h } = window;
@@ -235,42 +210,6 @@ describe("textWysiwyg", () => {
      expect(h.elements.length).toBe(1);
    });

-    it("should vertically center newly created text on the cursor when clicked with text tool", async () => {
-      API.setAppState({
-        currentItemFontFamily: FONT_FAMILY.Cascadia,
-        currentItemFontSize: 40,
-      });
-      UI.clickTool("text");
-
-      mouse.clickAt(120, 80);
-
-      const editor = await getTextEditor();
-      const text = h.elements[0] as ExcalidrawTextElement;
-      const lineHeightPx = getLineHeightInPx(text.fontSize, text.lineHeight);
-
-      expect(editor).not.toBe(null);
-      expect(text.y + lineHeightPx / 2).toBe(80);
-    });
-
-    it("should snap newly created text top-left to the current grid cell when clicked with text tool in grid mode", async () => {
-      API.setAppState({
-        currentItemFontFamily: FONT_FAMILY.Cascadia,
-        currentItemFontSize: 40,
-        gridModeEnabled: true,
-        gridSize: 24,
-      });
-      UI.clickTool("text");
-
-      mouse.clickAt(113, 86);
-
-      const editor = await getTextEditor();
-      const text = h.elements[0] as ExcalidrawTextElement;
-
-      expect(editor).not.toBe(null);
-      expect(text.x).toBe(96);
-      expect(text.y).toBe(72);
-    });
-
    it("should edit text under cursor when double-clicked with selection tool", async () => {
      const text = API.createElement({
        type: "text",
@@ -293,94 +232,6 @@ describe("textWysiwyg", () => {
      expect(h.elements.length).toBe(1);
    });

-    it("should reselect text after exiting wysiwyg with escape", async () => {
-      const text = API.createElement({
-        type: "text",
-        text: "ola",
-        x: 60,
-        y: 0,
-        width: 100,
-        height: 100,
-      });
-
-      API.setElements([text]);
-      API.setSelectedElements([text]);
-      UI.clickTool("selection");
-
-      Keyboard.keyPress(KEYS.ENTER);
-
-      const editor = await getTextEditor();
-
-      expect(editor).not.toBe(null);
-      expect(h.state.editingTextElement?.id).toBe(text.id);
-
-      await exitTextEditorAndAssertSelection({
-        editor,
-        selectedIds: [text.id],
-      });
-    });
-
-    it("should edit selected bound text on single click", async () => {
-      const container = API.createElement({
-        type: "rectangle",
-        width: 160,
-        height: 70,
-        boundElements: [],
-      });
-      const text = API.createElement({
-        type: "text",
-        text: "Hello World!",
-        x: container.x + 20,
-        y: container.y + 20,
-        width: 120,
-        height: 25,
-        containerId: container.id,
-      });
-
-      API.setElements([container, text]);
-      API.updateElement(container, {
-        boundElements: [{ type: "text", id: text.id }],
-      });
-      API.setSelectedElements([container]);
-      UI.clickTool("selection");
-
-      mouse.clickAt(text.x + 26, text.y + 10);
-
-      const editor = await getTextEditor();
-
-      expect(editor).not.toBe(null);
-    });
-
-    it("should not edit selected bound text container when only the container was single-clicked", async () => {
-      const container = API.createElement({
-        type: "rectangle",
-        width: 160,
-        height: 70,
-        boundElements: [],
-      });
-      const text = API.createElement({
-        type: "text",
-        text: "Hello World!",
-        x: container.x + 20,
-        y: container.y + 20,
-        width: 120,
-        height: 25,
-        containerId: container.id,
-      });
-
-      API.setElements([container, text]);
-      API.updateElement(container, {
-        boundElements: [{ type: "text", id: text.id }],
-      });
-      API.setSelectedElements([container]);
-      UI.clickTool("selection");
-
-      mouse.clickAt(container.x + 5, container.y + 10);
-
-      expect(h.state.editingTextElement).toBe(null);
-      expect(await getTextEditor({ waitForEditor: false })).toBe(null);
-    });
-
    // FIXME too flaky. No one knows why.
    it.skip("should bump the version of a labeled arrow when the label is updated", async () => {
      const arrow = UI.createElement("arrow", {
@@ -1354,40 +1205,6 @@ describe("textWysiwyg", () => {
      );
    });

-    it.each([
-      {
-        label: "container",
-        createElements: () => API.createTextContainer(),
-      },
-      {
-        label: "arrow",
-        createElements: () => API.createLabeledArrow(),
-      },
-    ])(
-      "should reselect $label after deleting bound text with escape",
-      async ({ createElements }) => {
-        const [selectedElement, text] = createElements();
-        API.setElements([selectedElement, text]);
-        API.setSelectedElements([selectedElement]);
-
-        Keyboard.keyPress(KEYS.ENTER);
-        const editor = await getTextEditor();
-
-        await exitTextEditorAndAssertSelection({
-          editor,
-          nextText: "",
-          selectedIds: [selectedElement.id],
-        });
-
-        expect(selectedElement.boundElements).toStrictEqual([]);
-        expect(h.elements[1]).toEqual(
-          expect.objectContaining({
-            isDeleted: true,
-          }),
-        );
-      },
-    );
-
    it("should restore original container height and clear cache once text is unbind", async () => {
      const container = API.createElement({
        type: "rectangle",
@@ -1694,7 +1511,7 @@ describe("textWysiwyg", () => {
          version: 2,
          width: 610,
          x: 15,
-          y: 12.5,
+          y: 25,
        }),
      );
      expect(h.elements[2] as ExcalidrawTextElement).toEqual(
@@ -10,9 +10,7 @@ import {
  isTestEnv,
  MIME_TYPES,
  applyDarkModeFilter,
-  isRTL,
 } from "@excalidraw/common";
-import { pointFrom, pointRotateRads, type Radians } from "@excalidraw/math";

 import {
  getTextFromElements,
@@ -35,11 +33,8 @@ import {
  getBoundTextElement,
 } from "@excalidraw/element";
 import { getTextWidth } from "@excalidraw/element";
-import { getLineHeightInPx } from "@excalidraw/element";
-import { getLineWidth } from "@excalidraw/element";
 import { normalizeText } from "@excalidraw/element";
 import { wrapText } from "@excalidraw/element";
-import { getWrappedTextLines } from "@excalidraw/element";
 import {
  isArrowElement,
  isBoundToContainer,
@@ -96,103 +91,6 @@ const getTransform = (
  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };

-const getLineDirection = (text: string, offset: number) => {
-  const hardLineStart = text.lastIndexOf("\n", Math.max(0, offset - 1)) + 1;
-  const hardLineEnd = text.indexOf("\n", offset);
-  const hardLineText = text.slice(
-    hardLineStart,
-    hardLineEnd === -1 ? text.length : hardLineEnd,
-  );
-
-  return isRTL(hardLineText) ? "rtl" : "ltr";
-};
-
-const getCaretBoundaryOffsets = (text: string) => {
-  const offsets = [0];
-  let offset = 0;
-
-  for (const char of Array.from(text)) {
-    offset += char.length;
-    offsets.push(offset);
-  }
-
-  return offsets;
-};
-
-const getLineCaretOffsetFromNativeLayout = ({
-  text,
-  font,
-  lineHeightPx,
-  direction,
-  targetX,
-}: {
-  text: string;
-  font: ReturnType<typeof getFontString>;
-  lineHeightPx: number;
-  direction: "ltr" | "rtl";
-  targetX: number;
-}) => {
-  if (!text || !document.body || typeof document.createRange !== "function") {
-    return null;
-  }
-
-  const offsets = getCaretBoundaryOffsets(text);
-  const mirror = document.createElement("div");
-  const textNode = document.createTextNode(text);
-  const range = document.createRange();
-  const positions: number[] = [];
-
-  mirror.dir = direction;
-  Object.assign(mirror.style, {
-    position: "fixed",
-    top: "0",
-    left: "0",
-    margin: 0,
-    padding: 0,
-    border: 0,
-    opacity: "0",
-    pointerEvents: "none",
-    whiteSpace: "pre",
-    font,
-    lineHeight: `${lineHeightPx}px`,
-  });
-  mirror.append(textNode);
-  document.body.append(mirror);
-
-  try {
-    for (const offset of offsets) {
-      range.setStart(textNode, offset);
-      range.setEnd(textNode, offset);
-      const caretRect = range.getBoundingClientRect();
-
-      if (!Number.isFinite(caretRect.left)) {
-        return null;
-      }
-
-      positions.push(caretRect.left);
-    }
-  } catch {
-    return null;
-  } finally {
-    mirror.remove();
-  }
-
-  const leftEdge = Math.min(...positions);
-  let closestOffset = offsets[0];
-  let closestDistance = Infinity;
-
-  for (let index = 0; index < offsets.length; index++) {
-    const distance = Math.abs(positions[index] - leftEdge - targetX);
-
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closestOffset = offsets[index];
-    }
-  }
-
-  return closestOffset;
-};
-
 type SubmitHandler = () => void;

 export const textWysiwyg = ({
@@ -205,7 +103,6 @@ export const textWysiwyg = ({
  excalidrawContainer,
  app,
  autoSelect = true,
-  initialCaretSceneCoords = null,
 }: {
  id: ExcalidrawElement["id"];
  /**
@@ -222,19 +119,7 @@ export const textWysiwyg = ({
  excalidrawContainer: HTMLDivElement | null;
  app: App;
  autoSelect?: boolean;
-  initialCaretSceneCoords?: { x: number; y: number } | null;
 }): SubmitHandler => {
-  let currentTextLayout: {
-    angle: Radians;
-    font: ReturnType<typeof getFontString>;
-    height: number;
-    lineHeightPx: number;
-    textAlign: ExcalidrawTextElement["textAlign"];
-    width: number;
-    x: number;
-    y: number;
-  } | null = null;
-
  const textPropertiesUpdated = (
    updatedTextElement: ExcalidrawTextElement,
    editable: HTMLTextAreaElement,
@@ -369,7 +254,6 @@ export const textWysiwyg = ({
      height *= 1.05;

      const font = getFontString(updatedTextElement);
-      const angle = getTextElementAngle(updatedTextElement, container);

      // Make sure text editor height doesn't go beyond viewport
      const editorMaxHeight =
@@ -385,7 +269,7 @@ export const textWysiwyg = ({
        transform: getTransform(
          width,
          height,
-          angle,
+          getTextElementAngle(updatedTextElement, container),
          appState,
          maxWidth,
          editorMaxHeight,
@@ -399,19 +283,6 @@ export const textWysiwyg = ({
        opacity: updatedTextElement.opacity / 100,
        maxHeight: `${editorMaxHeight}px`,
      });
-      currentTextLayout = {
-        angle: angle as Radians,
-        font,
-        height: updatedTextElement.height,
-        lineHeightPx: getLineHeightInPx(
-          updatedTextElement.fontSize,
-          updatedTextElement.lineHeight,
-        ),
-        textAlign,
-        width: updatedTextElement.width,
-        x: coordX,
-        y: coordY,
-      };
      editable.scrollTop = 0;
      // For some reason updating font attribute doesn't set font family
      // hence updating font family explicitly for test environment
@@ -462,71 +333,6 @@ export const textWysiwyg = ({
  editable.value = element.originalText;
  updateWysiwygStyle();

-  const getCaretIndexFromInitialSceneCoords = () => {
-    if (!initialCaretSceneCoords || !currentTextLayout) {
-      return null;
-    }
-
-    const layout = currentTextLayout;
-    const center = pointFrom(
-      layout.x + layout.width / 2,
-      layout.y + layout.height / 2,
-    );
-    const [unrotatedX, unrotatedY] = pointRotateRads(
-      pointFrom(initialCaretSceneCoords.x, initialCaretSceneCoords.y),
-      center,
-      -layout.angle as Radians,
-    );
-    const localX = unrotatedX - layout.x;
-    const localY = unrotatedY - layout.y;
-    const lines = getWrappedTextLines(
-      editable.value,
-      layout.font,
-      whiteSpace === "pre-wrap" ? layout.width : Infinity,
-    );
-    const lineIndex = Math.max(
-      0,
-      Math.min(lines.length - 1, Math.floor(localY / layout.lineHeightPx)),
-    );
-    const line = lines[lineIndex];
-    const direction = getLineDirection(editable.value, line.start);
-    const lineWidth = getLineWidth(line.text, layout.font);
-    const lineStartX =
-      layout.textAlign === "center"
-        ? (layout.width - lineWidth) / 2
-        : layout.textAlign === "right"
-        ? layout.width - lineWidth
-        : 0;
-    const relativeX = localX - lineStartX;
-
-    if (!line.text) {
-      return line.start;
-    }
-
-    const lineCaretOffset = getLineCaretOffsetFromNativeLayout({
-      text: line.text,
-      font: layout.font,
-      lineHeightPx: layout.lineHeightPx,
-      direction,
-      targetX: relativeX,
-    });
-
-    return line.start + (lineCaretOffset || 0);
-  };
-
-  let pendingInitialSelection = (() => {
-    const caretIndex = getCaretIndexFromInitialSceneCoords();
-
-    if (caretIndex === null) {
-      return null;
-    }
-
-    return {
-      start: caretIndex,
-      end: caretIndex,
-    };
-  })();
-
  if (onChange) {
    editable.onpaste = async (event) => {
      // we need to synchronously get the MIME types so we can preventDefault()
@@ -890,13 +696,6 @@ export const textWysiwyg = ({
      // Otherwise, re-enable submit on blur and refocus the editor.
      editable.onblur = handleSubmit;
      editable.focus();
-      if (pendingInitialSelection) {
-        editable.setSelectionRange(
-          pendingInitialSelection.start,
-          pendingInitialSelection.end,
-        );
-        pendingInitialSelection = null;
-      }
    });
  };

@@ -987,7 +786,7 @@ export const textWysiwyg = ({

  let isDestroyed = false;

-  if (autoSelect && !pendingInitialSelection) {
+  if (autoSelect) {
    // select on init (focusing is done separately inside the bindBlurEvent()
    // because we need it to happen *after* the blur event from `pointerdown`)
    editable.select();
@@ -1,3 +1,5 @@
+export const PRECISION = 10e-5;
+
 // Legendre-Gauss abscissae (x values) and weights for n=24
 // Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html
 export const LegendreGaussN24TValues = [
@@ -137,17 +137,8 @@ const calculate = <Point extends GlobalPoint | LocalPoint>(
  [t0, s0]: [number, number],
  l: LineSegment<Point>,
  c: Curve<Point>,
-  tolerance: number = 1e-2,
-  iterLimit: number = 4,
 ) => {
-  const solution = solveWithAnalyticalJacobian(
-    c,
-    l,
-    t0,
-    s0,
-    tolerance,
-    iterLimit,
-  );
+  const solution = solveWithAnalyticalJacobian(c, l, t0, s0, 1e-2, 4);

  if (!solution) {
    return null;
@@ -167,43 +158,18 @@ const calculate = <Point extends GlobalPoint | LocalPoint>(
 */
 export function curveIntersectLineSegment<
  Point extends GlobalPoint | LocalPoint,
->(
-  c: Curve<Point>,
-  l: LineSegment<Point>,
-  opts?: {
-    tolerance?: number;
-    iterLimit?: number;
-  },
-): Point[] {
-  let solution = calculate(
-    initial_guesses[0],
-    l,
-    c,
-    opts?.tolerance,
-    opts?.iterLimit,
-  );
+>(c: Curve<Point>, l: LineSegment<Point>): Point[] {
+  let solution = calculate(initial_guesses[0], l, c);
  if (solution) {
    return [solution];
  }

-  solution = calculate(
-    initial_guesses[1],
-    l,
-    c,
-    opts?.tolerance,
-    opts?.iterLimit,
-  );
+  solution = calculate(initial_guesses[1], l, c);
  if (solution) {
    return [solution];
  }

-  solution = calculate(
-    initial_guesses[2],
-    l,
-    c,
-    opts?.tolerance,
-    opts?.iterLimit,
-  );
+  solution = calculate(initial_guesses[2], l, c);
  if (solution) {
    return [solution];
  }
@@ -123,15 +123,10 @@ export function pointsEqual<Point extends GlobalPoint | LocalPoint>(
 * @returns The rotated point
 */
 export function pointRotateRads<Point extends GlobalPoint | LocalPoint>(
-  point: Point,
-  center: Point,
+  [x, y]: Point,
+  [cx, cy]: Point,
  angle: Radians,
 ): Point {
-  if (!angle) {
-    return point;
-  }
-  const [x, y] = point;
-  const [cx, cy] = center;
  return pointFrom(
    (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
    (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy,
@@ -40,7 +40,7 @@ export const isLineSegment = <Point extends GlobalPoint | LocalPoint>(
  Array.isArray(segment) &&
  segment.length === 2 &&
  isPoint(segment[0]) &&
-  isPoint(segment[1]);
+  isPoint(segment[0]);

 /**
 * Return the coordinates resulting from rotating the given line about an origin by an angle in radians
@@ -1,9 +1,5 @@
 import { pointFrom } from "../src/point";
-import {
-  lineSegment,
-  lineSegmentIntersectionPoints,
-  isLineSegment,
-} from "../src/segment";
+import { lineSegment, lineSegmentIntersectionPoints } from "../src/segment";

 describe("line-segment intersections", () => {
  it("should correctly detect intersection", () => {
@@ -23,23 +19,3 @@ describe("line-segment intersections", () => {
    ).toEqual(null);
  });
 });
-describe("isLineSegment validation", () => {
-  it("should return true for a valid segment", () => {
-    expect(
-      isLineSegment([
-        [0, 0],
-        [1, 1],
-      ]),
-    ).toBe(true);
-  });
-
-  it("should return false if second element is not a point", () => {
-    const invalidSegment = [[0, 0], "not-a-point"] as any;
-
-    expect(isLineSegment(invalidSegment)).toBe(false);
-  });
-
-  it("should return false for wrong length", () => {
-    expect(isLineSegment([[0, 0]])).toBe(false);
-  });
-});
@@ -13,7 +13,6 @@ exports[`exportToSvg > with default arguments 1`] = `
  },
  "bindMode": "orbit",
  "bindingPreference": "enabled",
-  "boxSelectionMode": "contain",
  "collaborators": Map {},
  "contextMenu": null,
  "croppingElementId": null,
@@ -98,6 +97,7 @@ exports[`exportToSvg > with default arguments 1`] = `
  "showHyperlinkPopup": false,
  "showWelcomeScreen": false,
  "snapLines": [],
+  "startBoundElement": null,
  "stats": {
    "open": false,
    "panels": 3,
@@ -90,13 +90,6 @@ module.exports.woff2BrowserPlugin = () => {
        type="font/woff2"
        crossorigin="anonymous"
      />
-      <link
-        rel="preload"
-        href="${OSS_FONTS_CDN}fonts/Assistant/Assistant-SemiBold.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-      />
      <link
        rel="preload"
        href="${OSS_FONTS_CDN}fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2"
@@ -1531,10 +1531,10 @@
  resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
  integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==

-"@excalidraw/mermaid-to-excalidraw@2.2.2":
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.2.2.tgz#ee6b597a0d95b9a76f7ae41ce0e3733a9b96e4a0"
-  integrity sha512-5VKQq5CdRocC82vOIUpQ5ufJOVV9FpBTdHGA+ULqazeIVV+cr299877omQCibsdS3Bpitz2fsnTwnIXEmLVDSg==
+"@excalidraw/mermaid-to-excalidraw@2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-2.1.0.tgz#a5b9cf87c3185558cda7f9687d87b9937f452358"
+  integrity sha512-RMd+c2b7WzzUjhERMpKwp8PhF2/XlHDjr/zK+Gxfp8K9sVlafPYJ5OEa/GkN6edi2rBUXRfW+41WdO6L56b6Kw==
  dependencies:
    "@excalidraw/markdown-to-text" "0.1.2"
    "@mermaid-js/parser" "^0.6.3"
Author	SHA1	Message	Date
Ryan Di	7e84a931e1	remove agent.md	2026-03-18 21:29:14 +11:00
Ryan Di	3b6de119b3	fix: clip frame children completely out of bounds	2026-03-18 21:16:40 +11:00