@excalidraw/excalidraw 0.18.0-1b287a8ba → 0.18.0-200a6bd94

package/dist/dev/index.js

@@ -21,6 +21,7 @@ import {
   fileOpen,
   fileSave,
   fillCircle,
+  frameClip,
   generateIdFromFile,
   getDataURL,
   getDataURL_sync,
@@ -67,7 +68,7 @@ import {
   serializeLibraryAsJSON,
   strokeEllipseWithRotation,
   strokeRectWithRotation
-} from "./chunk-CBGOW5JB.js";
+} from "./chunk-VISTIWDQ.js";
 import {
   define_import_meta_env_default
 } from "./chunk-CP5DND7P.js";
@@ -186,7 +187,8 @@ import {
   arrayToMap as arrayToMap27,
   randomInteger as randomInteger4,
   CLASSES as CLASSES7,
-  Emitter as Emitter3
+  Emitter as Emitter3,
+  MINIMUM_ARROW_SIZE
 } from "@excalidraw/common";
 import {
   getObservedAppState,
@@ -200,7 +202,7 @@ import {
   shouldEnableBindingForPointerEvent,
   updateBoundElements as updateBoundElements3,
   getSuggestedBindingsForArrows,
-  LinearElementEditor as LinearElementEditor13,
+  LinearElementEditor as LinearElementEditor12,
   newElementWith as newElementWith10,
   newFrameElement as newFrameElement3,
   newFreeDrawElement,
@@ -220,7 +222,7 @@ import {
   isBindingElement as isBindingElement3,
   isBindingElementType,
   isBoundToContainer as isBoundToContainer8,
-  isFrameLikeElement as isFrameLikeElement16,
+  isFrameLikeElement as isFrameLikeElement15,
   isImageElement as isImageElement9,
   isEmbeddableElement as isEmbeddableElement4,
   isInitializedImageElement as isInitializedImageElement3,
@@ -239,7 +241,7 @@ import {
   getNormalizedDimensions,
   isElementCompletelyInViewport as isElementCompletelyInViewport2,
   isElementInViewport as isElementInViewport3,
-  isInvisiblySmallElement as isInvisiblySmallElement2,
+  isInvisiblySmallElement as isInvisiblySmallElement3,
   getCornerRadius as getCornerRadius2,
   isPathALoop as isPathALoop4,
   createSrcDoc,
@@ -3048,24 +3050,27 @@ var actionDeleteSelected = register({
   icon: TrashIcon,
   trackEvent: { category: "element", action: "delete" },
   perform: (elements, appState, formData, app) => {
-    if (appState.editingLinearElement) {
+    if (appState.selectedLinearElement?.isEditing) {
       const {
         elementId,
         selectedPointsIndices,
         startBindingElement,
         endBindingElement
-      } = appState.editingLinearElement;
+      } = appState.selectedLinearElement;
       const elementsMap = app.scene.getNonDeletedElementsMap();
-      const element = LinearElementEditor.getElement(elementId, elementsMap);
-      if (!element) {
+      const linearElement = LinearElementEditor.getElement(
+        elementId,
+        elementsMap
+      );
+      if (!linearElement) {
         return false;
       }
       if (selectedPointsIndices == null) {
         return false;
       }
-      if (element.points.length < 2) {
+      if (selectedPointsIndices.length >= linearElement.points.length) {
         const nextElements2 = elements.map((el) => {
-          if (el.id === element.id) {
+          if (el.id === linearElement.id) {
             return newElementWith(el, { isDeleted: true });
           }
           return el;
@@ -3075,7 +3080,7 @@ var actionDeleteSelected = register({
           elements: nextElements2,
           appState: {
             ...nextAppState2,
-            editingLinearElement: null
+            selectedLinearElement: null
           },
           captureUpdate: CaptureUpdateAction.IMMEDIATELY
         };
@@ -3083,16 +3088,20 @@ var actionDeleteSelected = register({
       const binding = {
         startBindingElement: selectedPointsIndices?.includes(0) ? null : startBindingElement,
         endBindingElement: selectedPointsIndices?.includes(
-          element.points.length - 1
+          linearElement.points.length - 1
         ) ? null : endBindingElement
       };
-      LinearElementEditor.deletePoints(element, app, selectedPointsIndices);
+      LinearElementEditor.deletePoints(
+        linearElement,
+        app,
+        selectedPointsIndices
+      );
       return {
         elements,
         appState: {
           ...appState,
-          editingLinearElement: {
-            ...appState.editingLinearElement,
+          selectedLinearElement: {
+            ...appState.selectedLinearElement,
             ...binding,
             selectedPointsIndices: selectedPointsIndices?.[0] > 0 ? [selectedPointsIndices[0] - 1] : [0]
           }
@@ -3262,7 +3271,7 @@ var actionSelectAll = register({
   trackEvent: { category: "canvas" },
   viewMode: false,
   perform: (elements, appState, value, app) => {
-    if (appState.editingLinearElement) {
+    if (appState.selectedLinearElement?.isEditing) {
       return false;
     }
     const selectedElementIds = elements.filter(
@@ -3320,7 +3329,7 @@ var actionDuplicateSelection = register({
     if (appState.selectedElementsAreBeingDragged) {
       return false;
     }
-    if (appState.editingLinearElement) {
+    if (appState.selectedLinearElement?.isEditing) {
       try {
         const newAppState = LinearElementEditor3.duplicateSelectedPoints(
           appState,
@@ -7855,8 +7864,8 @@ var actionFinalize = register({
         };
       }
     }
-    if (appState.editingLinearElement) {
-      const { elementId, startBindingElement, endBindingElement } = appState.editingLinearElement;
+    if (appState.selectedLinearElement?.isEditing) {
+      const { elementId, startBindingElement, endBindingElement } = appState.selectedLinearElement;
       const element2 = LinearElementEditor5.getElement(elementId, elementsMap);
       if (element2) {
         if (isBindingElement(element2)) {
@@ -7877,7 +7886,12 @@ var actionFinalize = register({
           appState: {
             ...appState,
             cursorButton: "up",
-            editingLinearElement: null
+            selectedLinearElement: new LinearElementEditor5(
+              element2,
+              arrayToMap4(elementsMap),
+              false
+              // exit editing mode
+            )
           },
           captureUpdate: CaptureUpdateAction8.IMMEDIATELY
         };
@@ -7901,7 +7915,7 @@ var actionFinalize = register({
       }
     }
     if (element) {
-      if (appState.multiElement && element.type !== "freedraw" && appState.lastPointerDownWith !== "touch") {
+      if (appState.multiElement && element.type !== "freedraw") {
         const { points, lastCommittedPoint } = element;
         if (!lastCommittedPoint || points[points.length - 1] !== lastCommittedPoint) {
           scene.mutateElement(element, {
@@ -7988,7 +8002,7 @@ var actionFinalize = register({
       captureUpdate: CaptureUpdateAction8.IMMEDIATELY
     };
   },
-  keyTest: (event, appState) => event.key === KEYS13.ESCAPE && (appState.editingLinearElement !== null || !appState.newElement && appState.multiElement === null) || (event.key === KEYS13.ESCAPE || event.key === KEYS13.ENTER) && appState.multiElement !== null,
+  keyTest: (event, appState) => event.key === KEYS13.ESCAPE && (appState.selectedLinearElement?.isEditing || !appState.newElement && appState.multiElement === null) || (event.key === KEYS13.ESCAPE || event.key === KEYS13.ENTER) && appState.multiElement !== null,
   PanelComponent: ({ appState, updateData, data }) => /* @__PURE__ */ jsx37(
     ToolButton,
     {
@@ -8922,7 +8936,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-SURZSZNX.js").then(
+        (blob2) => import("./data/image-XM2PNARE.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -11747,13 +11761,12 @@ var actionUnlockAllElements = register({
 });
 
 // actions/actionLinearEditor.tsx
-import { LinearElementEditor as LinearElementEditor8 } from "@excalidraw/element";
 import {
   isElbowArrow as isElbowArrow7,
   isLinearElement as isLinearElement9,
   isLineElement as isLineElement4
 } from "@excalidraw/element";
-import { arrayToMap as arrayToMap20 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap20, invariant as invariant8 } from "@excalidraw/common";
 import {
   toggleLinePolygonState as toggleLinePolygonState3,
   CaptureUpdateAction as CaptureUpdateAction28
@@ -15842,7 +15855,7 @@ var SelectedShapeActions = ({
     (element) => hasBackground(element.type) && !isTransparent3(element.backgroundColor)
   );
   const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
-  const showLineEditorAction = !appState.editingLinearElement && targetElements.length === 1 && isLinearElement6(targetElements[0]) && !isElbowArrow5(targetElements[0]);
+  const showLineEditorAction = !appState.selectedLinearElement?.isEditing && targetElements.length === 1 && isLinearElement6(targetElements[0]) && !isElbowArrow5(targetElements[0]);
   const showCropEditorAction = !appState.croppingElementId && targetElements.length === 1 && isImageElement(targetElements[0]);
   const showAlignActions = !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
   return /* @__PURE__ */ jsxs39("div", { className: "selected-shape-actions", children: [
@@ -16108,10 +16121,6 @@ var ExitZenModeAction = ({
     children: t("buttons.exitZenMode")
   }
 );
-var FinalizeAction = ({
-  renderAction,
-  className
-}) => /* @__PURE__ */ jsx71("div", { className: `finalize-button ${className}`, children: renderAction("finalize", { size: "small" }) });
 
 // hooks/useStableCallback.ts
 import { useRef as useRef22 } from "react";
@@ -18257,7 +18266,7 @@ var actionToggleLinearEditor = register({
   },
   predicate: (elements, appState, _, app) => {
     const selectedElements = app.scene.getSelectedElements(appState);
-    if (!appState.editingLinearElement && selectedElements.length === 1 && isLinearElement9(selectedElements[0]) && !isElbowArrow7(selectedElements[0])) {
+    if (!appState.selectedLinearElement?.isEditing && selectedElements.length === 1 && isLinearElement9(selectedElements[0]) && !isElbowArrow7(selectedElements[0])) {
       return true;
     }
     return false;
@@ -18267,11 +18276,23 @@ var actionToggleLinearEditor = register({
       selectedElementIds: appState.selectedElementIds,
       includeBoundTextElement: true
     })[0];
-    const editingLinearElement = appState.editingLinearElement?.elementId === selectedElement.id ? null : new LinearElementEditor8(selectedElement, arrayToMap20(elements));
+    invariant8(selectedElement, "No selected element found");
+    invariant8(
+      appState.selectedLinearElement,
+      "No selected linear element found"
+    );
+    invariant8(
+      selectedElement.id === appState.selectedLinearElement.elementId,
+      "Selected element ID and linear editor elementId does not match"
+    );
+    const selectedLinearElement = {
+      ...appState.selectedLinearElement,
+      isEditing: !appState.selectedLinearElement.isEditing
+    };
     return {
       appState: {
         ...appState,
-        editingLinearElement
+        selectedLinearElement
       },
       captureUpdate: CaptureUpdateAction28.IMMEDIATELY
     };
@@ -19200,7 +19221,7 @@ import {
   getDraggedElementsBounds,
   getElementAbsoluteCoords as getElementAbsoluteCoords5
 } from "@excalidraw/element";
-import { isBoundToContainer as isBoundToContainer5, isFrameLikeElement as isFrameLikeElement9 } from "@excalidraw/element";
+import { isBoundToContainer as isBoundToContainer5 } from "@excalidraw/element";
 import { getMaximumGroups } from "@excalidraw/element";
 import {
   getSelectedElements as getSelectedElements4,
@@ -19337,17 +19358,12 @@ var getElementsCorners = (elements, elementsMap, {
   }
   return result.map((p) => pointFrom18(round(p[0]), round(p[1])));
 };
-var getReferenceElements = (elements, selectedElements, appState, elementsMap) => {
-  const selectedFrames = selectedElements.filter((element) => isFrameLikeElement9(element)).map((frame) => frame.id);
-  return getVisibleAndNonSelectedElements(
-    elements,
-    selectedElements,
-    appState,
-    elementsMap
-  ).filter(
-    (element) => !(element.frameId && selectedFrames.includes(element.frameId))
-  );
-};
+var getReferenceElements = (elements, selectedElements, appState, elementsMap) => getVisibleAndNonSelectedElements(
+  elements,
+  selectedElements,
+  appState,
+  elementsMap
+);
 var getVisibleGaps = (elements, selectedElements, appState, elementsMap) => {
   const referenceElements = getReferenceElements(
     elements,
@@ -20197,7 +20213,7 @@ import { measureText as measureText5, normalizeText } from "@excalidraw/element"
 import { isArrowElement as isArrowElement8 } from "@excalidraw/element";
 import { syncInvalidIndices } from "@excalidraw/element";
 import { redrawTextBoundingBox as redrawTextBoundingBox5 } from "@excalidraw/element";
-import { LinearElementEditor as LinearElementEditor9 } from "@excalidraw/element";
+import { LinearElementEditor as LinearElementEditor8 } from "@excalidraw/element";
 import { getCommonBounds as getCommonBounds5 } from "@excalidraw/element";
 import { Scene } from "@excalidraw/element";
 var DEFAULT_LINEAR_ELEMENT_PROPS = {
@@ -20400,7 +20416,7 @@ var bindLinearElementToElement = (linearElement, start2, end, elementStore, scen
   }
   Object.assign(
     linearElement,
-    LinearElementEditor9.getNormalizeElementPointsAndCoords({
+    LinearElementEditor8.getNormalizeElementPointsAndCoords({
       ...linearElement,
       points: newPoints
     })
@@ -20702,12 +20718,12 @@ import {
   arrayToMap as arrayToMap23,
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   FRAME_STYLE as FRAME_STYLE2,
-  invariant as invariant8,
+  invariant as invariant9,
   THEME as THEME11,
   throttleRAF
 } from "@excalidraw/common";
 import { FIXED_BINDING_DISTANCE as FIXED_BINDING_DISTANCE2, maxBindingGap } from "@excalidraw/element";
-import { LinearElementEditor as LinearElementEditor10 } from "@excalidraw/element";
+import { LinearElementEditor as LinearElementEditor9 } from "@excalidraw/element";
 import {
   getOmitSidesForDevice,
   getTransformHandles,
@@ -20716,7 +20732,7 @@ import {
 } from "@excalidraw/element";
 import {
   isElbowArrow as isElbowArrow8,
-  isFrameLikeElement as isFrameLikeElement10,
+  isFrameLikeElement as isFrameLikeElement9,
   isImageElement as isImageElement4,
   isLinearElement as isLinearElement10,
   isLineElement as isLineElement5,
@@ -20934,9 +20950,9 @@ var isOverScrollBars = (scrollBars, x, y) => {
 
 // renderer/interactiveScene.ts
 var renderElbowArrowMidPointHighlight = (context, appState) => {
-  invariant8(appState.selectedLinearElement, "selectedLinearElement is null");
+  invariant9(appState.selectedLinearElement, "selectedLinearElement is null");
   const { segmentMidPointHoveredCoords } = appState.selectedLinearElement;
-  invariant8(segmentMidPointHoveredCoords, "midPointCoords is null");
+  invariant9(segmentMidPointHoveredCoords, "midPointCoords is null");
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
   highlightPoint(segmentMidPointHoveredCoords, context, appState);
@@ -20944,16 +20960,16 @@ var renderElbowArrowMidPointHighlight = (context, appState) => {
 };
 var renderLinearElementPointHighlight = (context, appState, elementsMap) => {
   const { elementId, hoverPointIndex } = appState.selectedLinearElement;
-  if (appState.editingLinearElement?.selectedPointsIndices?.includes(
+  if (appState.selectedLinearElement?.isEditing && appState.selectedLinearElement?.selectedPointsIndices?.includes(
     hoverPointIndex
   )) {
     return;
   }
-  const element = LinearElementEditor10.getElement(elementId, elementsMap);
+  const element = LinearElementEditor9.getElement(elementId, elementsMap);
   if (!element) {
     return;
   }
-  const point = LinearElementEditor10.getPointAtIndexGlobalCoordinates(
+  const point = LinearElementEditor9.getPointAtIndexGlobalCoordinates(
     element,
     hoverPointIndex,
     elementsMap
@@ -20969,7 +20985,7 @@ var highlightPoint = (point, context, appState) => {
     context,
     point[0],
     point[1],
-    LinearElementEditor10.POINT_HANDLE_SIZE / appState.zoom.value,
+    LinearElementEditor9.POINT_HANDLE_SIZE / appState.zoom.value,
     false
   );
 };
@@ -20986,7 +21002,7 @@ var renderSingleLinearPoint = (context, appState, point, radius, isSelected, isP
     context,
     point[0],
     point[1],
-    (isOverlappingPoint ? radius * (appState.editingLinearElement ? 1.5 : 2) : radius) / appState.zoom.value,
+    (isOverlappingPoint ? radius * (appState.selectedLinearElement?.isEditing ? 1.5 : 2) : radius) / appState.zoom.value,
     !isPhantomPoint,
     !isOverlappingPoint || isSelected
   );
@@ -21042,7 +21058,7 @@ var renderBindingHighlightForSuggestedPointBinding = (context, suggestedBinding,
   context.fillStyle = "rgba(0,0,0,.05)";
   const pointIndices = startOrEnd === "both" ? [0, -1] : startOrEnd === "start" ? [0] : [-1];
   pointIndices.forEach((index) => {
-    const [x, y] = LinearElementEditor10.getPointAtIndexGlobalCoordinates(
+    const [x, y] = LinearElementEditor9.getPointAtIndexGlobalCoordinates(
       element,
       index,
       elementsMap
@@ -21164,12 +21180,12 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
   context.lineWidth = 1 / appState.zoom.value;
-  const points = LinearElementEditor10.getPointsGlobalCoordinates(
+  const points = LinearElementEditor9.getPointsGlobalCoordinates(
     element,
     elementsMap
   );
-  const { POINT_HANDLE_SIZE } = LinearElementEditor10;
-  const radius = appState.editingLinearElement ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;
+  const { POINT_HANDLE_SIZE } = LinearElementEditor9;
+  const radius = appState.selectedLinearElement?.isEditing ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;
   const _isElbowArrow = isElbowArrow8(element);
   const _isLineElement = isLineElement5(element);
   points.forEach((point, idx) => {
@@ -21181,8 +21197,8 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
       idx === points.length - 1 ? points[0] : points[idx - 1],
       2 / appState.zoom.value
     );
-    let isSelected = !!appState.editingLinearElement?.selectedPointsIndices?.includes(idx);
-    if (_isLineElement && element.polygon && !isSelected && idx === element.points.length - 1 && !!appState.editingLinearElement?.selectedPointsIndices?.includes(0)) {
+    let isSelected = !!appState.selectedLinearElement?.isEditing && !!appState.selectedLinearElement?.selectedPointsIndices?.includes(idx);
+    if (_isLineElement && element.polygon && !isSelected && idx === element.points.length - 1 && !!appState.selectedLinearElement?.isEditing && !!appState.selectedLinearElement?.selectedPointsIndices?.includes(0)) {
       isSelected = true;
     }
     renderSingleLinearPoint(
@@ -21198,7 +21214,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
   if (isElbowArrow8(element)) {
     const fixedSegments = element.fixedSegments?.map((segment) => segment.index) || [];
     points.slice(0, -1).forEach((p, idx) => {
-      if (!LinearElementEditor10.isSegmentTooShort(
+      if (!LinearElementEditor9.isSegmentTooShort(
         element,
         points[idx + 1],
         points[idx],
@@ -21220,7 +21236,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
       }
     });
   } else {
-    const midPoints = LinearElementEditor10.getEditorMidPoints(
+    const midPoints = LinearElementEditor9.getEditorMidPoints(
       element,
       elementsMap,
       appState
@@ -21228,7 +21244,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
       (midPoint, idx, midPoints2) => midPoint !== null && !(isElbowArrow8(element) && (idx === 0 || idx === midPoints2.length - 1))
     );
     midPoints.forEach((segmentMidPoint) => {
-      if (appState.editingLinearElement || points.length === 2) {
+      if (appState.selectedLinearElement?.isEditing || points.length === 2) {
         renderSingleLinearPoint(
           context,
           appState,
@@ -21401,7 +21417,7 @@ var _renderInteractiveScene = ({
   context.scale(appState.zoom.value, appState.zoom.value);
   let editingLinearElement = void 0;
   visibleElements.forEach((element) => {
-    if (appState.editingLinearElement?.elementId === element.id) {
+    if (appState.selectedLinearElement?.isEditing && appState.selectedLinearElement.elementId === element.id) {
       if (element) {
         editingLinearElement = element;
       }
@@ -21468,9 +21484,9 @@ var _renderInteractiveScene = ({
     });
   }
   const isFrameSelected = selectedElements.some(
-    (element) => isFrameLikeElement10(element)
+    (element) => isFrameLikeElement9(element)
   );
-  if (selectedElements.length === 1 && appState.editingLinearElement?.elementId === selectedElements[0].id) {
+  if (selectedElements.length === 1 && appState.selectedLinearElement?.isEditing && appState.selectedLinearElement.elementId === selectedElements[0].id) {
     renderLinearPointHandles(
       context,
       appState,
@@ -21490,7 +21506,7 @@ var _renderInteractiveScene = ({
       renderLinearElementPointHighlight(context, appState, elementsMap);
     }
   }
-  if (!appState.multiElement && !appState.editingLinearElement) {
+  if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) {
     const showBoundingBox = shouldShowBoundingBox(selectedElements, appState);
     const isSingleLinearElementSelected = selectedElements.length === 1 && isLinearElement10(selectedElements[0]);
     if (isSingleLinearElementSelected && appState.selectedLinearElement?.elementId === selectedElements[0].id && !selectedElements[0].locked) {
@@ -21669,7 +21685,7 @@ var _renderInteractiveScene = ({
       } else {
         context.fillStyle = "rgba(99, 52, 0, 0.4)";
       }
-      const zoomFactor = isFrameLikeElement10(element) ? appState.zoom.value : 1;
+      const zoomFactor = isFrameLikeElement9(element) ? appState.zoom.value : 1;
       context.translate(appState.scrollX, appState.scrollY);
       context.translate(cx, cy);
       context.rotate(element.angle);
@@ -22159,7 +22175,7 @@ import {
   originalContainerCache,
   updateOriginalContainerCache as updateOriginalContainerCache3
 } from "@excalidraw/element";
-import { LinearElementEditor as LinearElementEditor11 } from "@excalidraw/element";
+import { LinearElementEditor as LinearElementEditor10 } from "@excalidraw/element";
 import { bumpVersion as bumpVersion2 } from "@excalidraw/element";
 import {
   getBoundTextElementId,
@@ -22238,7 +22254,7 @@ var textWysiwyg = ({
       let maxHeight = updatedTextElement.height;
       if (container && updatedTextElement.containerId) {
         if (isArrowElement9(container)) {
-          const boundTextCoords = LinearElementEditor11.getBoundTextElementPosition(
+          const boundTextCoords = LinearElementEditor10.getBoundTextElementPosition(
             container,
             updatedTextElement,
             elementsMap
@@ -22707,9 +22723,9 @@ import {
   pointFrom as pointFrom22
 } from "@excalidraw/math";
 import { getElementLineSegments as getElementLineSegments2 } from "@excalidraw/element";
-import { LinearElementEditor as LinearElementEditor12 } from "@excalidraw/element";
+import { LinearElementEditor as LinearElementEditor11 } from "@excalidraw/element";
 import {
-  isFrameLikeElement as isFrameLikeElement11,
+  isFrameLikeElement as isFrameLikeElement10,
   isLinearElement as isLinearElement11,
   isTextElement as isTextElement12
 } from "@excalidraw/element";
@@ -22864,7 +22880,7 @@ var LassoTrail = class extends AnimatedTrail {
         }
         for (const [id] of Object.entries(nextSelectedElementIds)) {
           const element = this.app.scene.getNonDeletedElement(id);
-          if (element && isFrameLikeElement11(element)) {
+          if (element && isFrameLikeElement10(element)) {
             const elementsInFrame = getFrameChildren4(
               this.app.scene.getNonDeletedElementsMap(),
               element.id
@@ -22888,7 +22904,7 @@ var LassoTrail = class extends AnimatedTrail {
         return {
           selectedElementIds: nextSelection.selectedElementIds,
           selectedGroupIds: nextSelection.selectedGroupIds,
-          selectedLinearElement: selectedIds.length === 1 && !selectedGroupIds.length && isLinearElement11(this.app.scene.getNonDeletedElement(selectedIds[0])) ? new LinearElementEditor12(
+          selectedLinearElement: selectedIds.length === 1 && !selectedGroupIds.length && isLinearElement11(this.app.scene.getNonDeletedElement(selectedIds[0])) ? new LinearElementEditor11(
             this.app.scene.getNonDeletedElement(
               selectedIds[0]
             ),
@@ -23584,7 +23600,7 @@ var getHints = ({
     return t("hints.enterCropEditor");
   }
   if (activeTool.type === "selection") {
-    if (appState.selectionElement && !selectedElements.length && !appState.editingTextElement && !appState.editingLinearElement) {
+    if (appState.selectionElement && !selectedElements.length && !appState.editingTextElement && !appState.selectedLinearElement?.isEditing) {
       return [t("hints.deepBoxSelect")];
     }
     if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
@@ -23595,8 +23611,8 @@ var getHints = ({
     }
     if (selectedElements.length === 1) {
       if (isLinearElement12(selectedElements[0])) {
-        if (appState.editingLinearElement) {
-          return appState.editingLinearElement.selectedPointsIndices ? t("hints.lineEditor_pointSelected") : t("hints.lineEditor_nothingSelected");
+        if (appState.selectedLinearElement?.isEditing) {
+          return appState.selectedLinearElement.selectedPointsIndices ? t("hints.lineEditor_pointSelected") : t("hints.lineEditor_nothingSelected");
         }
         return isLineElement6(selectedElements[0]) ? t("hints.lineEditor_line_info") : t("hints.lineEditor_info");
       }
@@ -24169,8 +24185,6 @@ var Footer = ({
   renderWelcomeScreen
 }) => {
   const { FooterCenterTunnel, WelcomeScreenHelpHintTunnel } = useTunnels();
-  const device = useDevice();
-  const showFinalize = !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
   return /* @__PURE__ */ jsxs52(
     "footer",
     {
@@ -24199,15 +24213,6 @@ var Footer = ({
                     "layer-ui__wrapper__footer-left--transition-bottom": appState.zenModeEnabled
                   })
                 }
-              ),
-              showFinalize && /* @__PURE__ */ jsx94(
-                FinalizeAction,
-                {
-                  renderAction: actionManager.renderAction,
-                  className: clsx40("zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-left": appState.zenModeEnabled
-                  })
-                }
               )
             ] }) })
           }
@@ -25293,7 +25298,7 @@ import {
   getFontString as getFontString9
 } from "@excalidraw/common";
 import { newTextElement as newTextElement3 } from "@excalidraw/element";
-import { isTextElement as isTextElement14, isFrameLikeElement as isFrameLikeElement12 } from "@excalidraw/element";
+import { isTextElement as isTextElement14, isFrameLikeElement as isFrameLikeElement11 } from "@excalidraw/element";
 import { getDefaultFrameName } from "@excalidraw/element/frame";
 import { Fragment as Fragment18, jsx as jsx110, jsxs as jsxs62 } from "react/jsx-runtime";
 var searchQueryAtom = atom("");
@@ -25398,8 +25403,8 @@ var SearchMenu2 = () => {
           y: match.element.y + (match.matchedLines[0]?.offsetY ?? 0),
           width: match.matchedLines[0]?.width,
           height: match.matchedLines[0]?.height,
-          fontSize: isFrameLikeElement12(match.element) ? FRAME_STYLE3.nameFontSize : match.element.fontSize,
-          fontFamily: isFrameLikeElement12(match.element) ? FONT_FAMILY4.Assistant : match.element.fontFamily
+          fontSize: isFrameLikeElement11(match.element) ? FRAME_STYLE3.nameFontSize : match.element.fontSize,
+          fontFamily: isFrameLikeElement11(match.element) ? FONT_FAMILY4.Assistant : match.element.fontFamily
         });
         const FONT_SIZE_LEGIBILITY_THRESHOLD = 14;
         const fontSize = matchAsElement.fontSize;
@@ -25618,7 +25623,7 @@ var ListItem = (props) => {
 };
 var MatchListBase = (props) => {
   const frameNameMatches = useMemo8(
-    () => props.matches.items.filter((match) => isFrameLikeElement12(match.element)),
+    () => props.matches.items.filter((match) => isFrameLikeElement11(match.element)),
     [props.matches]
   );
   const textMatches = useMemo8(
@@ -25828,7 +25833,7 @@ var handleSearch = debounce2(
       (el) => isTextElement14(el)
     );
     const frames = elements.filter(
-      (el) => isFrameLikeElement12(el)
+      (el) => isFrameLikeElement11(el)
     );
     texts.sort((a, b) => a.y - b.y);
     frames.sort((a, b) => a.y - b.y);
@@ -26703,7 +26708,7 @@ import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/elemen
 // components/Stats/utils.ts
 import { pointFrom as pointFrom24, pointRotateRads as pointRotateRads13 } from "@excalidraw/math";
 import { getBoundTextElement as getBoundTextElement9 } from "@excalidraw/element";
-import { isFrameLikeElement as isFrameLikeElement13 } from "@excalidraw/element";
+import { isFrameLikeElement as isFrameLikeElement12 } from "@excalidraw/element";
 import {
   getSelectedGroupIds as getSelectedGroupIds3,
   getElementsInGroup as getElementsInGroup7,
@@ -26714,7 +26719,7 @@ import { updateBindings as updateBindings2 } from "@excalidraw/element";
 var SMALLEST_DELTA = 0.01;
 var STEP_SIZE = 10;
 var isPropertyEditable = (element, property) => {
-  if (property === "angle" && isFrameLikeElement13(element)) {
+  if (property === "angle" && isFrameLikeElement12(element)) {
     return false;
   }
   return true;
@@ -26775,7 +26780,7 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, originalEle
       { informMutation: shouldInformMutation, isDragging: false }
     );
   }
-  if (isFrameLikeElement13(originalElement)) {
+  if (isFrameLikeElement12(originalElement)) {
     const originalChildren = getFrameChildren5(
       originalElementsMap,
       originalElement.id
@@ -27205,7 +27210,7 @@ import {
 } from "@excalidraw/element";
 import { resizeSingleElement } from "@excalidraw/element";
 import { isImageElement as isImageElement6 } from "@excalidraw/element";
-import { isFrameLikeElement as isFrameLikeElement14 } from "@excalidraw/element";
+import { isFrameLikeElement as isFrameLikeElement13 } from "@excalidraw/element";
 import { getElementsInResizingFrame as getElementsInResizingFrame2 } from "@excalidraw/element";
 import { replaceAllElementsInFrame as replaceAllElementsInFrame2 } from "@excalidraw/element";
 import { jsx as jsx126 } from "react/jsx-runtime";
@@ -27329,7 +27334,7 @@ var handleDimensionChange = ({
           shouldMaintainAspectRatio: keepAspectRatio
         }
       );
-      if (isFrameLikeElement14(latestElement)) {
+      if (isFrameLikeElement13(latestElement)) {
         const nextElementsInFrame = getElementsInResizingFrame2(
           scene.getElementsIncludingDeleted(),
           latestElement,
@@ -27386,7 +27391,7 @@ var handleDimensionChange = ({
           shouldMaintainAspectRatio: keepAspectRatio
         }
       );
-      if (isFrameLikeElement14(latestElement)) {
+      if (isFrameLikeElement13(latestElement)) {
         const nextElementsInFrame = getElementsInResizingFrame2(
           scene.getElementsIncludingDeleted(),
           latestElement,
@@ -27409,7 +27414,7 @@ var handleDragFinished = ({
   const elementsMap = app.scene.getNonDeletedElementsMap();
   const origElement = originalElements?.[0];
   const latestElement = origElement && elementsMap.get(origElement.id);
-  if (latestElement && isFrameLikeElement14(latestElement)) {
+  if (latestElement && isFrameLikeElement13(latestElement)) {
     const nextElementsInFrame = getElementsInResizingFrame2(
       app.scene.getElementsIncludingDeleted(),
       latestElement,
@@ -27633,7 +27638,7 @@ import { useMemo as useMemo9 } from "react";
 import { MIN_WIDTH_OR_HEIGHT as MIN_WIDTH_OR_HEIGHT2 } from "@excalidraw/common";
 import {
   getElementsInResizingFrame as getElementsInResizingFrame3,
-  isFrameLikeElement as isFrameLikeElement15,
+  isFrameLikeElement as isFrameLikeElement14,
   replaceAllElementsInFrame as replaceAllElementsInFrame3,
   updateBoundElements as updateBoundElements2
 } from "@excalidraw/element";
@@ -27798,7 +27803,7 @@ var handleDimensionChange2 = ({
               shouldInformMutation: false
             }
           );
-          if (isFrameLikeElement15(latestElement)) {
+          if (isFrameLikeElement14(latestElement)) {
             const nextElementsInFrame = getElementsInResizingFrame3(
               scene.getElementsIncludingDeleted(),
               latestElement,
@@ -27900,7 +27905,7 @@ var handleDimensionChange2 = ({
             shouldInformMutation: false
           }
         );
-        if (isFrameLikeElement15(latestElement)) {
+        if (isFrameLikeElement14(latestElement)) {
           const nextElementsInFrame = getElementsInResizingFrame3(
             scene.getElementsIncludingDeleted(),
             latestElement,
@@ -27926,7 +27931,7 @@ var handleDragFinished2 = ({
   const elementsMap = app.scene.getNonDeletedElementsMap();
   const origElement = originalElements?.[0];
   const latestElement = origElement && elementsMap.get(origElement.id);
-  if (latestElement && isFrameLikeElement15(latestElement)) {
+  if (latestElement && isFrameLikeElement14(latestElement)) {
     const nextElementsInFrame = getElementsInResizingFrame3(
       app.scene.getElementsIncludingDeleted(),
       latestElement,
@@ -30787,7 +30792,6 @@ var getRelevantAppStateProps = (appState) => ({
   viewModeEnabled: appState.viewModeEnabled,
   openDialog: appState.openDialog,
   editingGroupId: appState.editingGroupId,
-  editingLinearElement: appState.editingLinearElement,
   selectedElementIds: appState.selectedElementIds,
   frameToHighlight: appState.frameToHighlight,
   offsetLeft: appState.offsetLeft,
@@ -30835,6 +30839,12 @@ import { jsx as jsx146 } from "react/jsx-runtime";
 var StaticCanvas = (props) => {
   const wrapperRef = useRef38(null);
   const isComponentMounted = useRef38(false);
+  useEffect42(() => {
+    props.canvas.style.width = `${props.appState.width}px`;
+    props.canvas.style.height = `${props.appState.height}px`;
+    props.canvas.width = props.appState.width * props.scale;
+    props.canvas.height = props.appState.height * props.scale;
+  }, [props.appState.height, props.appState.width, props.canvas, props.scale]);
   useEffect42(() => {
     const wrapper = wrapperRef.current;
     if (!wrapper) {
@@ -30846,22 +30856,6 @@ var StaticCanvas = (props) => {
       wrapper.replaceChildren(canvas);
       canvas.classList.add("excalidraw__canvas", "static");
     }
-    const widthString = `${props.appState.width}px`;
-    const heightString = `${props.appState.height}px`;
-    if (canvas.style.width !== widthString) {
-      canvas.style.width = widthString;
-    }
-    if (canvas.style.height !== heightString) {
-      canvas.style.height = heightString;
-    }
-    const scaledWidth = props.appState.width * props.scale;
-    const scaledHeight = props.appState.height * props.scale;
-    if (canvas.width !== scaledWidth) {
-      canvas.width = scaledWidth;
-    }
-    if (canvas.height !== scaledHeight) {
-      canvas.height = scaledHeight;
-    }
     renderStaticScene(
       {
         canvas,
@@ -30927,7 +30921,12 @@ import { useEffect as useEffect43, useRef as useRef39 } from "react";
 
 // renderer/renderNewElementScene.ts
 import { throttleRAF as throttleRAF3 } from "@excalidraw/common";
-import { renderElement } from "@excalidraw/element";
+import {
+  getTargetFrame,
+  isInvisiblySmallElement as isInvisiblySmallElement2,
+  renderElement,
+  shouldApplyFrameClip
+} from "@excalidraw/element";
 var _renderNewElementScene = ({
   canvas,
   rc,
@@ -30952,6 +30951,16 @@ var _renderNewElementScene = ({
     context.save();
     context.scale(appState.zoom.value, appState.zoom.value);
     if (newElement6 && newElement6.type !== "selection") {
+      if (isInvisiblySmallElement2(newElement6)) {
+        return;
+      }
+      const frameId = newElement6.frameId || appState.frameToHighlight?.id;
+      if (frameId && appState.frameRendering.enabled && appState.frameRendering.clip) {
+        const frame = getTargetFrame(newElement6, elementsMap, appState);
+        if (frame && shouldApplyFrameClip(newElement6, frame, appState, elementsMap)) {
+          frameClip(frame, context, renderConfig, appState);
+        }
+      }
       renderElement(
         newElement6,
         elementsMap,
@@ -30964,6 +30973,7 @@ var _renderNewElementScene = ({
     } else {
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
+    context.restore();
   }
 };
 var renderNewElementSceneThrottled = throttleRAF3(
@@ -31348,7 +31358,7 @@ var App = class _App extends React43.Component {
       }
       const isDarkTheme = this.state.theme === THEME15.DARK;
       const nonDeletedFramesLikes = this.scene.getNonDeletedFramesLikes();
-      const focusedSearchMatch = nonDeletedFramesLikes.length > 0 ? this.state.searchMatches?.focusedId && isFrameLikeElement16(
+      const focusedSearchMatch = nonDeletedFramesLikes.length > 0 ? this.state.searchMatches?.focusedId && isFrameLikeElement15(
         this.scene.getElement(this.state.searchMatches.focusedId)
       ) ? this.state.searchMatches.matches.find((sm) => sm.focus) : null : null;
       return nonDeletedFramesLikes.map((f) => {
@@ -31536,7 +31546,7 @@ var App = class _App extends React43.Component {
         trackEvent("ai", "tool-select (empty-selection)", "d2c");
       } else {
         const selectedMagicFrame = selectedElements.length === 1 && isMagicFrameElement2(selectedElements[0]) && selectedElements[0];
-        if (!selectedMagicFrame && selectedElements.some((el) => isFrameLikeElement16(el) || el.frameId)) {
+        if (!selectedMagicFrame && selectedElements.some((el) => isFrameLikeElement15(el) || el.frameId)) {
           this.setActiveTool({ type: TOOL_TYPE3.magicframe });
           return;
         }
@@ -31605,9 +31615,14 @@ var App = class _App extends React43.Component {
     });
     __publicField(this, "dismissLinearEditor", () => {
       setTimeout(() => {
-        this.setState({
-          editingLinearElement: null
-        });
+        if (this.state.selectedLinearElement?.isEditing) {
+          this.setState({
+            selectedLinearElement: {
+              ...this.state.selectedLinearElement,
+              isEditing: false
+            }
+          });
+        }
       });
     });
     __publicField(this, "syncActionResult", withBatchedUpdates((actionResult) => {
@@ -32766,15 +32781,10 @@ var App = class _App extends React43.Component {
             const selectedElement = selectedElements[0];
             if (event[KEYS52.CTRL_OR_CMD] || isLineElement7(selectedElement)) {
               if (isLinearElement13(selectedElement)) {
-                if (!this.state.editingLinearElement || this.state.editingLinearElement.elementId !== selectedElement.id) {
+                if (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedElement.id) {
                   this.store.scheduleCapture();
                   if (!isElbowArrow11(selectedElement)) {
-                    this.setState({
-                      editingLinearElement: new LinearElementEditor13(
-                        selectedElement,
-                        this.scene.getNonDeletedElementsMap()
-                      )
-                    });
+                    this.actionManager.executeAction(actionToggleLinearEditor);
                   }
                 }
               }
@@ -32797,7 +32807,7 @@ var App = class _App extends React43.Component {
               });
               event.preventDefault();
               return;
-            } else if (isFrameLikeElement16(selectedElement)) {
+            } else if (isFrameLikeElement15(selectedElement)) {
               this.setState({
                 editingFrame: selectedElement.id
               });
@@ -33246,23 +33256,17 @@ var App = class _App extends React43.Component {
       );
       if (selectedElements.length === 1 && isLinearElement13(selectedElements[0])) {
         const selectedLinearElement = selectedElements[0];
-        if ((event[KEYS52.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement7(selectedLinearElement)) && this.state.editingLinearElement?.elementId !== selectedLinearElement.id) {
-          this.store.scheduleCapture();
-          this.setState({
-            editingLinearElement: new LinearElementEditor13(
-              selectedLinearElement,
-              this.scene.getNonDeletedElementsMap()
-            )
-          });
+        if ((event[KEYS52.CTRL_OR_CMD] && isSimpleArrow(selectedLinearElement) || isLineElement7(selectedLinearElement)) && (!this.state.selectedLinearElement?.isEditing || this.state.selectedLinearElement.elementId !== selectedLinearElement.id)) {
+          this.actionManager.executeAction(actionToggleLinearEditor);
           return;
         } else if (this.state.selectedLinearElement && isElbowArrow11(selectedElements[0])) {
-          const hitCoords = LinearElementEditor13.getSegmentMidpointHitCoords(
+          const hitCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
             this.state.selectedLinearElement,
             { x: sceneX, y: sceneY },
             this.state,
             this.scene.getNonDeletedElementsMap()
           );
-          const midPoint = hitCoords ? LinearElementEditor13.getSegmentMidPointIndex(
+          const midPoint = hitCoords ? LinearElementEditor12.getSegmentMidPointIndex(
             this.state.selectedLinearElement,
             this.state,
             hitCoords,
@@ -33270,12 +33274,12 @@ var App = class _App extends React43.Component {
           ) : -1;
           if (midPoint && midPoint > -1) {
             this.store.scheduleCapture();
-            LinearElementEditor13.deleteFixedSegment(
+            LinearElementEditor12.deleteFixedSegment(
               selectedElements[0],
               this.scene,
               midPoint
             );
-            const nextCoords = LinearElementEditor13.getSegmentMidpointHitCoords(
+            const nextCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
               {
                 ...this.state.selectedLinearElement,
                 segmentMidPointHoveredCoords: null
@@ -33284,7 +33288,7 @@ var App = class _App extends React43.Component {
               this.state,
               this.scene.getNonDeletedElementsMap()
             );
-            const nextIndex = nextCoords ? LinearElementEditor13.getSegmentMidPointIndex(
+            const nextIndex = nextCoords ? LinearElementEditor12.getSegmentMidPointIndex(
               this.state.selectedLinearElement,
               this.state,
               nextCoords,
@@ -33306,7 +33310,7 @@ var App = class _App extends React43.Component {
             });
             return;
           }
-        } else if (this.state.editingLinearElement && this.state.editingLinearElement.elementId === selectedLinearElement.id && isLineElement7(selectedLinearElement)) {
+        } else if (this.state.selectedLinearElement?.isEditing && this.state.selectedLinearElement.elementId === selectedLinearElement.id && isLineElement7(selectedLinearElement)) {
           return;
         }
       }
@@ -33345,7 +33349,7 @@ var App = class _App extends React43.Component {
           });
           return;
         }
-        if (!this.state.editingLinearElement) {
+        if (!this.state.selectedLinearElement?.isEditing) {
           const container = this.getTextBindableContainerAtPosition(
             sceneX,
             sceneY
@@ -33559,29 +33563,28 @@ var App = class _App extends React43.Component {
           return null;
         });
       }
-      if (this.state.editingLinearElement && !this.state.editingLinearElement.isDragging) {
-        const editingLinearElement = LinearElementEditor13.handlePointerMove(
+      if (this.state.selectedLinearElement?.isEditing && !this.state.selectedLinearElement.isDragging) {
+        const editingLinearElement = LinearElementEditor12.handlePointerMove(
           event,
           scenePointerX,
           scenePointerY,
           this
         );
-        if (editingLinearElement && editingLinearElement !== this.state.editingLinearElement) {
+        const linearElement = editingLinearElement ? this.scene.getElement(editingLinearElement.elementId) : null;
+        if (editingLinearElement && editingLinearElement !== this.state.selectedLinearElement) {
           flushSync3(() => {
             this.setState({
-              editingLinearElement
+              selectedLinearElement: editingLinearElement
             });
           });
         }
-        if (editingLinearElement?.lastUncommittedPoint != null) {
+        if (editingLinearElement?.lastUncommittedPoint != null && linearElement && isBindingElementType(linearElement.type)) {
           this.maybeSuggestBindingAtCursor(
             scenePointer,
             editingLinearElement.elbowed
           );
-        } else {
-          flushSync3(() => {
-            this.setState({ suggestedBindings: [] });
-          });
+        } else if (this.state.suggestedBindings.length) {
+          this.setState({ suggestedBindings: [] });
         }
       }
       if (isBindingElementType(this.state.activeTool.type)) {
@@ -33684,7 +33687,7 @@ var App = class _App extends React43.Component {
       }
       const elements = this.scene.getNonDeletedElements();
       const selectedElements = this.scene.getSelectedElements(this.state);
-      if (selectedElements.length === 1 && !isOverScrollBar && !this.state.editingLinearElement) {
+      if (selectedElements.length === 1 && !isOverScrollBar && !this.state.selectedLinearElement?.isEditing) {
         if (this.state.selectedLinearElement) {
           this.handleHoverSelectedLinearElement(
             this.state.selectedLinearElement,
@@ -33773,12 +33776,6 @@ var App = class _App extends React43.Component {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         } else if (isOverScrollBar) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
-        } else if (this.state.selectedLinearElement && hitElement?.id === this.state.selectedLinearElement.elementId) {
-          this.handleHoverSelectedLinearElement(
-            this.state.selectedLinearElement,
-            scenePointerX,
-            scenePointerY
-          );
         } else if (
           // if using cmd/ctrl, we're not dragging
           !event[KEYS52.CTRL_OR_CMD]
@@ -33808,6 +33805,13 @@ var App = class _App extends React43.Component {
         } else {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         }
+        if (this.state.selectedLinearElement) {
+          this.handleHoverSelectedLinearElement(
+            this.state.selectedLinearElement,
+            scenePointerX,
+            scenePointerY
+          );
+        }
       }
       if (this.state.openDialog?.name === "elementLinkSelector" && hitElement) {
         this.setState((prevState) => {
@@ -34225,7 +34229,7 @@ var App = class _App extends React43.Component {
         const elements = this.scene.getNonDeletedElements();
         const elementsMap = this.scene.getNonDeletedElementsMap();
         const selectedElements = this.scene.getSelectedElements(this.state);
-        if (selectedElements.length === 1 && !this.state.editingLinearElement && !isElbowArrow11(selectedElements[0]) && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {
+        if (selectedElements.length === 1 && !this.state.selectedLinearElement?.isEditing && !isElbowArrow11(selectedElements[0]) && !(this.state.selectedLinearElement && this.state.selectedLinearElement.hoverPointIndex !== -1)) {
           const elementWithTransformHandleType = getElementWithTransformHandleType(
             elements,
             this.state,
@@ -34280,8 +34284,8 @@ var App = class _App extends React43.Component {
           }
         } else {
           if (this.state.selectedLinearElement) {
-            const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;
-            const ret = LinearElementEditor13.handlePointerDown(
+            const linearElementEditor = this.state.selectedLinearElement;
+            const ret = LinearElementEditor12.handlePointerDown(
               event,
               this,
               this.store,
@@ -34294,9 +34298,6 @@ var App = class _App extends React43.Component {
             }
             if (ret.linearElementEditor) {
               this.setState({ selectedLinearElement: ret.linearElementEditor });
-              if (this.state.editingLinearElement) {
-                this.setState({ editingLinearElement: ret.linearElementEditor });
-              }
             }
             if (ret.didAddPoint) {
               return true;
@@ -34362,11 +34363,11 @@ var App = class _App extends React43.Component {
           if ((hitElement === null || !someHitElementIsSelected) && !event.shiftKey && !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) {
             this.clearSelection(hitElement);
           }
-          if (this.state.editingLinearElement) {
+          if (this.state.selectedLinearElement?.isEditing) {
             this.setState({
               selectedElementIds: makeNextSelectedElementIds2(
                 {
-                  [this.state.editingLinearElement.elementId]: true
+                  [this.state.selectedLinearElement.elementId]: true
                 },
                 this.state
               )
@@ -34405,7 +34406,7 @@ var App = class _App extends React43.Component {
                     const element = this.scene.getElement(id);
                     element && previouslySelectedElements.push(element);
                   });
-                  if (isFrameLikeElement16(hitElement)) {
+                  if (isFrameLikeElement15(hitElement)) {
                     getFrameChildren6(
                       previouslySelectedElements,
                       hitElement.id
@@ -34424,7 +34425,7 @@ var App = class _App extends React43.Component {
                           this.scene.getNonDeletedElements(),
                           gid
                         )
-                      ).filter((element) => isFrameLikeElement16(element)).map((frame) => frame.id)
+                      ).filter((element) => isFrameLikeElement15(element)).map((frame) => frame.id)
                     );
                     if (framesInGroups.size > 0) {
                       previouslySelectedElements.forEach((element) => {
@@ -35343,7 +35344,7 @@ var App = class _App extends React43.Component {
               this.state,
               this
             ),
-            selectedLinearElement: isLinearElement13(element) ? new LinearElementEditor13(
+            selectedLinearElement: isLinearElement13(element) ? new LinearElementEditor12(
               element,
               this.scene.getNonDeletedElementsMap()
             ) : null
@@ -35507,7 +35508,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "maybeHandleResize", (pointerDownState, event) => {
       const selectedElements = this.scene.getSelectedElements(this.state);
       const selectedFrames = selectedElements.filter(
-        (element) => isFrameLikeElement16(element)
+        (element) => isFrameLikeElement15(element)
       );
       const transformHandleType = pointerDownState.resize.handleType;
       if (
@@ -36942,9 +36943,9 @@ var App = class _App extends React43.Component {
       "theme--dark",
       this.state.theme === THEME15.DARK
     );
-    if (this.state.editingLinearElement && !this.state.selectedElementIds[this.state.editingLinearElement.elementId]) {
+    if (this.state.selectedLinearElement?.isEditing && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {
       setTimeout(() => {
-        this.state.editingLinearElement && this.actionManager.executeAction(actionFinalize);
+        this.state.selectedLinearElement?.isEditing && this.actionManager.executeAction(actionFinalize);
       });
     }
     if (this.state.editingTextElement?.isDeleted) {
@@ -37267,7 +37268,7 @@ var App = class _App extends React43.Component {
         // this also avoids the need to update past tests
         threshold: this.getElementHitThreshold(elementWithHighestZIndex) / 2,
         elementsMap: this.scene.getNonDeletedElementsMap(),
-        frameNameBound: isFrameLikeElement16(elementWithHighestZIndex) ? this.frameNameBoundsCache.get(elementWithHighestZIndex) : null
+        frameNameBound: isFrameLikeElement15(elementWithHighestZIndex) ? this.frameNameBoundsCache.get(elementWithHighestZIndex) : null
       }) ? elementWithHighestZIndex : allHitElements[allHitElements.length - 2];
     }
     if (allHitElements.length === 1) {
@@ -37326,7 +37327,7 @@ var App = class _App extends React43.Component {
       element,
       threshold: this.getElementHitThreshold(element),
       elementsMap: this.scene.getNonDeletedElementsMap(),
-      frameNameBound: isFrameLikeElement16(element) ? this.frameNameBoundsCache.get(element) : null
+      frameNameBound: isFrameLikeElement15(element) ? this.frameNameBoundsCache.get(element) : null
     });
   }
   getTextBindableContainerAtPosition(x, y) {
@@ -37361,7 +37362,7 @@ var App = class _App extends React43.Component {
   }
   handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {
     const elementsMap = this.scene.getNonDeletedElementsMap();
-    const element = LinearElementEditor13.getElement(
+    const element = LinearElementEditor12.getElement(
       linearElementEditor.elementId,
       elementsMap
     );
@@ -37377,14 +37378,14 @@ var App = class _App extends React43.Component {
         elementsMap,
         threshold: this.getElementHitThreshold(element)
       })) {
-        hoverPointIndex = LinearElementEditor13.getPointIndexUnderCursor(
+        hoverPointIndex = LinearElementEditor12.getPointIndexUnderCursor(
           element,
           elementsMap,
           this.state.zoom,
           scenePointerX,
           scenePointerY
         );
-        segmentMidPointHoveredCoords = LinearElementEditor13.getSegmentMidpointHitCoords(
+        segmentMidPointHoveredCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
           linearElementEditor,
           { x: scenePointerX, y: scenePointerY },
           this.state,
@@ -37417,7 +37418,7 @@ var App = class _App extends React43.Component {
           }
         });
       }
-      if (!LinearElementEditor13.arePointsEqual(
+      if (!LinearElementEditor12.arePointsEqual(
         this.state.selectedLinearElement.segmentMidPointHoveredCoords,
         segmentMidPointHoveredCoords
       )) {
@@ -37623,7 +37624,7 @@ var App = class _App extends React43.Component {
         );
         let index = this.state.selectedLinearElement.pointerDownState.segmentMidpoint.index;
         if (index < 0) {
-          const nextCoords = LinearElementEditor13.getSegmentMidpointHitCoords(
+          const nextCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
             {
               ...this.state.selectedLinearElement,
               segmentMidPointHoveredCoords: null
@@ -37632,29 +37633,25 @@ var App = class _App extends React43.Component {
             this.state,
             this.scene.getNonDeletedElementsMap()
           );
-          index = nextCoords ? LinearElementEditor13.getSegmentMidPointIndex(
+          index = nextCoords ? LinearElementEditor12.getSegmentMidPointIndex(
             this.state.selectedLinearElement,
             this.state,
             nextCoords,
             this.scene.getNonDeletedElementsMap()
           ) : -1;
         }
-        const ret = LinearElementEditor13.moveFixedSegment(
+        const ret = LinearElementEditor12.moveFixedSegment(
           this.state.selectedLinearElement,
           index,
           gridX2,
           gridY2,
           this.scene
         );
-        flushSync3(() => {
-          if (this.state.selectedLinearElement) {
-            this.setState({
-              selectedLinearElement: {
-                ...this.state.selectedLinearElement,
-                segmentMidPointHoveredCoords: ret.segmentMidPointHoveredCoords,
-                pointerDownState: ret.pointerDownState
-              }
-            });
+        this.setState({
+          selectedLinearElement: {
+            ...this.state.selectedLinearElement,
+            segmentMidPointHoveredCoords: ret.segmentMidPointHoveredCoords,
+            pointerDownState: ret.pointerDownState
           }
         });
         return;
@@ -37693,7 +37690,7 @@ var App = class _App extends React43.Component {
         if (pointDistance8(
           pointFrom28(pointerCoords.x, pointerCoords.y),
           pointFrom28(pointerDownState.origin.x, pointerDownState.origin.y)
-        ) < DRAGGING_THRESHOLD2) {
+        ) * this.state.zoom.value < MINIMUM_ARROW_SIZE) {
           return;
         }
       }
@@ -37709,14 +37706,14 @@ var App = class _App extends React43.Component {
       }
       const elementsMap = this.scene.getNonDeletedElementsMap();
       if (this.state.selectedLinearElement) {
-        const linearElementEditor = this.state.editingLinearElement || this.state.selectedLinearElement;
-        if (LinearElementEditor13.shouldAddMidpoint(
+        const linearElementEditor = this.state.selectedLinearElement;
+        if (LinearElementEditor12.shouldAddMidpoint(
           this.state.selectedLinearElement,
           pointerCoords,
           this.state,
           elementsMap
         )) {
-          const ret = LinearElementEditor13.addMidpoint(
+          const ret = LinearElementEditor12.addMidpoint(
             this.state.selectedLinearElement,
             pointerCoords,
             this,
@@ -37737,22 +37734,12 @@ var App = class _App extends React43.Component {
                 }
               });
             }
-            if (this.state.editingLinearElement) {
-              this.setState({
-                editingLinearElement: {
-                  ...this.state.editingLinearElement,
-                  pointerDownState: ret.pointerDownState,
-                  selectedPointsIndices: ret.selectedPointsIndices,
-                  segmentMidPointHoveredCoords: null
-                }
-              });
-            }
           });
           return;
         } else if (linearElementEditor.pointerDownState.segmentMidpoint.value !== null && !linearElementEditor.pointerDownState.segmentMidpoint.added) {
           return;
         }
-        const newState = LinearElementEditor13.handlePointDragging(
+        const newState = LinearElementEditor12.handlePointDragging(
           event,
           this,
           pointerCoords.x,
@@ -37770,14 +37757,14 @@ var App = class _App extends React43.Component {
       const hasHitASelectedElement = pointerDownState.hit.allHitElements.some(
         (element) => this.isASelectedElement(element)
       );
-      const isSelectingPointsInLineEditor = this.state.editingLinearElement && event.shiftKey && this.state.editingLinearElement.elementId === pointerDownState.hit.element?.id;
+      const isSelectingPointsInLineEditor = this.state.selectedLinearElement?.isEditing && event.shiftKey && this.state.selectedLinearElement.elementId === pointerDownState.hit.element?.id;
       if ((hasHitASelectedElement || pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) && !isSelectingPointsInLineEditor && this.state.activeTool.type !== "lasso") {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.every((element) => element.locked)) {
           return;
         }
         const selectedElementsHasAFrame = selectedElements.find(
-          (e) => isFrameLikeElement16(e)
+          (e) => isFrameLikeElement15(e)
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
         const frameToHighlight = topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null;
@@ -38021,23 +38008,21 @@ var App = class _App extends React43.Component {
         pointerDownState.lastCoords.x = pointerCoords.x;
         pointerDownState.lastCoords.y = pointerCoords.y;
         if (event.altKey) {
-          flushSync3(() => {
-            this.setActiveTool(
-              { type: "lasso", fromSelection: true },
-              event.shiftKey
-            );
-            this.lassoTrail.startPath(
-              pointerDownState.origin.x,
-              pointerDownState.origin.y,
-              event.shiftKey
-            );
-            this.setAppState({
-              selectionElement: null
-            });
+          this.setActiveTool(
+            { type: "lasso", fromSelection: true },
+            event.shiftKey
+          );
+          this.lassoTrail.startPath(
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+            event.shiftKey
+          );
+          this.setAppState({
+            selectionElement: null
           });
-        } else {
-          this.maybeDragNewGenericElement(pointerDownState, event);
+          return;
         }
+        this.maybeDragNewGenericElement(pointerDownState, event);
       } else if (this.state.activeTool.type === "lasso") {
         if (!event.altKey && this.state.activeTool.fromSelection) {
           this.setActiveTool({ type: "selection" });
@@ -38134,8 +38119,8 @@ var App = class _App extends React43.Component {
       if (this.state.activeTool.type === "selection") {
         pointerDownState.boxSelection.hasOccurred = true;
         const elements = this.scene.getNonDeletedElements();
-        if (this.state.editingLinearElement) {
-          LinearElementEditor13.handleBoxSelection(
+        if (this.state.selectedLinearElement?.isEditing) {
+          LinearElementEditor12.handleBoxSelection(
             event,
             this.state,
             this.setState.bind(this),
@@ -38198,7 +38183,7 @@ var App = class _App extends React43.Component {
                 this
               ),
               // select linear element only when we haven't box-selected anything else
-              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement13(elementsWithinSelection[0]) ? new LinearElementEditor13(
+              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement13(elementsWithinSelection[0]) ? new LinearElementEditor12(
                 elementsWithinSelection[0],
                 this.scene.getNonDeletedElementsMap()
               ) : null,
@@ -38304,26 +38289,26 @@ var App = class _App extends React43.Component {
           });
         }
       }
-      if (this.state.editingLinearElement) {
-        if (!pointerDownState.boxSelection.hasOccurred && pointerDownState.hit?.element?.id !== this.state.editingLinearElement.elementId) {
+      if (this.state.selectedLinearElement?.isEditing) {
+        if (!pointerDownState.boxSelection.hasOccurred && pointerDownState.hit?.element?.id !== this.state.selectedLinearElement.elementId) {
           this.actionManager.executeAction(actionFinalize);
         } else {
-          const editingLinearElement = LinearElementEditor13.handlePointerUp(
+          const editingLinearElement = LinearElementEditor12.handlePointerUp(
             childEvent,
-            this.state.editingLinearElement,
+            this.state.selectedLinearElement,
             this.state,
             this.scene
           );
-          if (editingLinearElement !== this.state.editingLinearElement) {
+          if (editingLinearElement !== this.state.selectedLinearElement) {
             this.setState({
-              editingLinearElement,
+              selectedLinearElement: editingLinearElement,
               suggestedBindings: []
             });
           }
         }
       } else if (this.state.selectedLinearElement) {
         if (this.state.selectedLinearElement.elbowed) {
-          const element = LinearElementEditor13.getElement(
+          const element = LinearElementEditor12.getElement(
             this.state.selectedLinearElement.elementId,
             this.scene.getNonDeletedElementsMap()
           );
@@ -38398,24 +38383,43 @@ var App = class _App extends React43.Component {
           childEvent,
           this.state
         );
-        if (!pointerDownState.drag.hasOccurred && newElement6 && !multiElement) {
-          this.scene.mutateElement(
-            newElement6,
-            {
-              points: [
-                ...newElement6.points,
-                pointFrom28(
-                  pointerCoords.x - newElement6.x,
-                  pointerCoords.y - newElement6.y
-                )
-              ]
-            },
-            { informMutation: false, isDragging: false }
-          );
-          this.setState({
-            multiElement: newElement6,
-            newElement: newElement6
-          });
+        const dragDistance = pointDistance8(
+          pointFrom28(pointerCoords.x, pointerCoords.y),
+          pointFrom28(pointerDownState.origin.x, pointerDownState.origin.y)
+        ) * this.state.zoom.value;
+        if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement6 && !multiElement) {
+          if (this.device.isTouchScreen) {
+            const FIXED_DELTA_X = Math.min(
+              this.state.width * 0.7 / this.state.zoom.value,
+              100
+            );
+            this.scene.mutateElement(
+              newElement6,
+              {
+                x: newElement6.x - FIXED_DELTA_X / 2,
+                points: [
+                  pointFrom28(0, 0),
+                  pointFrom28(FIXED_DELTA_X, 0)
+                ]
+              },
+              { informMutation: false, isDragging: false }
+            );
+            this.actionManager.executeAction(actionFinalize);
+          } else {
+            const dx = pointerCoords.x - newElement6.x;
+            const dy = pointerCoords.y - newElement6.y;
+            this.scene.mutateElement(
+              newElement6,
+              {
+                points: [...newElement6.points, pointFrom28(dx, dy)]
+              },
+              { informMutation: false, isDragging: false }
+            );
+            this.setState({
+              multiElement: newElement6,
+              newElement: newElement6
+            });
+          }
         } else if (pointerDownState.drag.hasOccurred && !multiElement) {
           if (isBindingEnabled4(this.state) && isBindingElement3(newElement6, false)) {
             this.actionManager.executeAction(actionFinalize, "ui", {
@@ -38438,7 +38442,7 @@ var App = class _App extends React43.Component {
                 },
                 prevState
               ),
-              selectedLinearElement: new LinearElementEditor13(
+              selectedLinearElement: new LinearElementEditor12(
                 newElement6,
                 this.scene.getNonDeletedElementsMap()
               )
@@ -38470,7 +38474,7 @@ var App = class _App extends React43.Component {
           isExistingElement: true
         });
       }
-      if (activeTool.type !== "selection" && newElement6 && isInvisiblySmallElement2(newElement6)) {
+      if (activeTool.type !== "selection" && newElement6 && isInvisiblySmallElement3(newElement6)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== newElement6.id),
           appState: {
@@ -38480,7 +38484,7 @@ var App = class _App extends React43.Component {
         });
         return;
       }
-      if (isFrameLikeElement16(newElement6)) {
+      if (isFrameLikeElement15(newElement6)) {
         const elementsInsideFrame = getElementsInNewFrame(
           this.scene.getElementsIncludingDeleted(),
           newElement6,
@@ -38600,7 +38604,7 @@ var App = class _App extends React43.Component {
       if (resizingElement) {
         this.store.scheduleCapture();
       }
-      if (resizingElement && isInvisiblySmallElement2(resizingElement)) {
+      if (resizingElement && isInvisiblySmallElement3(resizingElement)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== resizingElement.id),
           captureUpdate: CaptureUpdateAction37.NEVER
@@ -38613,7 +38617,7 @@ var App = class _App extends React43.Component {
           this
         );
         const selectedFrames = this.scene.getSelectedElements(this.state).filter(
-          (element) => isFrameLikeElement16(element)
+          (element) => isFrameLikeElement15(element)
         );
         for (const frame of selectedFrames) {
           nextElements = replaceAllElementsInFrame4(
@@ -38635,7 +38639,7 @@ var App = class _App extends React43.Component {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           this.setState({
-            selectedLinearElement: new LinearElementEditor13(
+            selectedLinearElement: new LinearElementEditor12(
               hitElement,
               this.scene.getNonDeletedElementsMap()
             )
@@ -38682,10 +38686,10 @@ var App = class _App extends React43.Component {
       }
       if (hitElement && !pointerDownState.drag.hasOccurred && !pointerDownState.hit.wasAddedToSelection && // if we're editing a line, pointerup shouldn't switch selection if
       // box selected
-      (!this.state.editingLinearElement || !pointerDownState.boxSelection.hasOccurred) && // hitElement can be set when alt + ctrl to toggle lasso and we will
+      (!this.state.selectedLinearElement?.isEditing || !pointerDownState.boxSelection.hasOccurred) && // hitElement can be set when alt + ctrl to toggle lasso and we will
       // just respect the selected elements from lasso instead
       this.state.activeTool.type !== "lasso") {
-        if (childEvent.shiftKey && !this.state.editingLinearElement) {
+        if (childEvent.shiftKey && !this.state.selectedLinearElement?.isEditing) {
           if (this.state.selectedElementIds[hitElement.id]) {
             if (isSelectedViaGroup2(this.state, hitElement)) {
               this.setState((_prevState) => {
@@ -38732,7 +38736,7 @@ var App = class _App extends React43.Component {
                     this
                   ),
                   // set selectedLinearElement only if thats the only element selected
-                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement13(newSelectedElements[0]) ? new LinearElementEditor13(
+                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement13(newSelectedElements[0]) ? new LinearElementEditor12(
                     newSelectedElements[0],
                     this.scene.getNonDeletedElementsMap()
                   ) : prevState.selectedLinearElement
@@ -38788,7 +38792,7 @@ var App = class _App extends React43.Component {
             ),
             selectedLinearElement: isLinearElement13(hitElement) && // Don't set `selectedLinearElement` if its same as the hitElement, this is mainly to prevent resetting the `hoverPointIndex` to -1.
             // Future we should update the API to take care of setting the correct `hoverPointIndex` when initialized
-            prevState.selectedLinearElement?.elementId !== hitElement.id ? new LinearElementEditor13(
+            prevState.selectedLinearElement?.elementId !== hitElement.id ? new LinearElementEditor12(
               hitElement,
               this.scene.getNonDeletedElementsMap()
             ) : prevState.selectedLinearElement
@@ -38810,13 +38814,13 @@ var App = class _App extends React43.Component {
             element: hitElement,
             elementsMap,
             threshold: this.getElementHitThreshold(hitElement),
-            frameNameBound: isFrameLikeElement16(hitElement) ? this.frameNameBoundsCache.get(hitElement) : null
+            frameNameBound: isFrameLikeElement15(hitElement) ? this.frameNameBoundsCache.get(hitElement) : null
           },
           elementsMap
         ) || !hitElement && pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements)
       ) {
-        if (this.state.editingLinearElement) {
-          this.setState({ editingLinearElement: null });
+        if (this.state.selectedLinearElement?.isEditing) {
+          this.actionManager.executeAction(actionToggleLinearEditor);
         } else {
           this.setState({
             selectedElementIds: makeNextSelectedElementIds2({}, this.state),
@@ -39310,7 +39314,7 @@ import {
   getNonDeletedElements as getNonDeletedElements14
 } from "@excalidraw/element";
 import { getTextFromElements as getTextFromElements2 } from "@excalidraw/element";
-import { isInvisiblySmallElement as isInvisiblySmallElement3 } from "@excalidraw/element";
+import { isInvisiblySmallElement as isInvisiblySmallElement4 } from "@excalidraw/element";
 
 // data/reconcile.ts
 import throttle4 from "lodash.throttle";
@@ -39322,8 +39326,7 @@ import {
 } from "@excalidraw/element";
 var shouldDiscardRemoteElement = (localAppState, local, remote) => {
   if (local && // local element is being edited
-  (local.id === localAppState.editingTextElement?.id || local.id === localAppState.resizingElement?.id || local.id === localAppState.newElement?.id || // TODO: Is this still valid? As newElement is selection element, which is never part of the elements array
-  // local element is newer
+  (local.id === localAppState.editingTextElement?.id || local.id === localAppState.resizingElement?.id || local.id === localAppState.newElement?.id || // local element is newer
   local.version > remote.version || // resolve conflicting edits deterministically by taking the one with
   // the lowest versionNonce
   local.version === remote.version && local.versionNonce < remote.versionNonce)) {
@@ -39641,7 +39644,7 @@ export {
   hashString2 as hashString,
   isElementInsideBBox,
   isElementLink3 as isElementLink,
-  isInvisiblySmallElement3 as isInvisiblySmallElement,
+  isInvisiblySmallElement4 as isInvisiblySmallElement,
   isLinearElement14 as isLinearElement,
   languages,
   loadFromBlob,