@excalidraw/excalidraw 0.18.0-c141960 → 0.18.0-c158187

package/dist/dev/index.js

@@ -56,7 +56,6 @@ import {
   renderStaticScene,
   renderStaticSceneThrottled,
   resizeImageFile,
-  restore,
   restoreAppState,
   restoreElement,
   restoreElements,
@@ -66,16 +65,16 @@ import {
   serializeAsJSON,
   serializeLibraryAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-SJTAY27F.js";
+} from "./chunk-5A4X24JB.js";
 import {
   define_import_meta_env_default
 } from "./chunk-CP5DND7P.js";
 import {
   en_default
-} from "./chunk-AWYOLLYX.js";
+} from "./chunk-OCFTI2BU.js";
 import {
   percentages_default
-} from "./chunk-PMQWN2AA.js";
+} from "./chunk-DJHLEOOZ.js";
 import {
   __export,
   __glob,
@@ -95,7 +94,7 @@ import rough3 from "roughjs/bin/rough";
 import { nanoid } from "nanoid";
 import {
   clamp as clamp8,
-  pointFrom as pointFrom30,
+  pointFrom as pointFrom29,
   pointDistance as pointDistance8,
   vector as vector3,
   pointRotateRads as pointRotateRads19,
@@ -110,7 +109,7 @@ import {
   CODES as CODES13,
   shouldResizeFromCenter,
   shouldMaintainAspectRatio,
-  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
+  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle3,
   isArrowKey as isArrowKey2,
   KEYS as KEYS54,
   APP_NAME as APP_NAME2,
@@ -133,10 +132,9 @@ import {
   SCROLL_TIMEOUT,
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
-  THEME as THEME15,
-  THEME_FILTER,
+  THEME as THEME17,
   TOUCH_CTX_MENU_TIMEOUT,
-  VERTICAL_ALIGN as VERTICAL_ALIGN6,
+  VERTICAL_ALIGN as VERTICAL_ALIGN5,
   YOUTUBE_STATES,
   ZOOM_STEP as ZOOM_STEP2,
   POINTER_EVENTS,
@@ -150,10 +148,10 @@ import {
   normalizeLink as normalizeLink3,
   toValidURL as toValidURL2,
   getGridPoint as getGridPoint2,
-  getLineHeight as getLineHeight5,
+  getLineHeight as getLineHeight4,
   debounce as debounce4,
   distance as distance2,
-  getFontString as getFontString10,
+  getFontString as getFontString9,
   getNearestScrollableContainer,
   isInputLike,
   isToolIcon,
@@ -164,18 +162,19 @@ import {
   wrapEvent as wrapEvent2,
   updateObject as updateObject2,
   updateActiveTool as updateActiveTool7,
-  isTransparent as isTransparent7,
+  isTransparent as isTransparent8,
   easeToValuesRAF,
   muteFSAbortError as muteFSAbortError2,
   isTestEnv as isTestEnv5,
-  isDevEnv as isDevEnv10,
+  isDevEnv as isDevEnv9,
   easeOut as easeOut4,
   updateStable,
   addEventListener as addEventListener3,
   normalizeEOL as normalizeEOL2,
   getDateTime,
   isShallowEqual as isShallowEqual9,
-  arrayToMap as arrayToMap27,
+  arrayToMap as arrayToMap26,
+  applyDarkModeFilter as applyDarkModeFilter4,
   randomInteger as randomInteger4,
   CLASSES as CLASSES9,
   Emitter as Emitter3,
@@ -196,31 +195,31 @@ import {
 } from "@excalidraw/common";
 import {
   getObservedAppState,
-  getCommonBounds as getCommonBounds12,
+  getCommonBounds as getCommonBounds11,
   getElementAbsoluteCoords as getElementAbsoluteCoords8,
   bindOrUnbindBindingElements as bindOrUnbindBindingElements2,
   fixBindingsAfterDeletion as fixBindingsAfterDeletion2,
-  getHoveredElementForBinding as getHoveredElementForBinding3,
+  getHoveredElementForBinding as getHoveredElementForBinding2,
   isBindingEnabled as isBindingEnabled2,
   shouldEnableBindingForPointerEvent,
   updateBoundElements as updateBoundElements3,
-  LinearElementEditor as LinearElementEditor12,
+  LinearElementEditor as LinearElementEditor11,
   newElementWith as newElementWith11,
-  newFrameElement as newFrameElement3,
+  newFrameElement as newFrameElement2,
   newFreeDrawElement,
   newEmbeddableElement,
-  newMagicFrameElement as newMagicFrameElement2,
+  newMagicFrameElement,
   newIframeElement,
-  newArrowElement as newArrowElement3,
-  newElement as newElement5,
-  newImageElement as newImageElement2,
-  newLinearElement as newLinearElement4,
-  newTextElement as newTextElement4,
+  newArrowElement as newArrowElement2,
+  newElement as newElement4,
+  newImageElement,
+  newLinearElement as newLinearElement3,
+  newTextElement as newTextElement3,
   refreshTextDimensions,
   deepCopyElement as deepCopyElement5,
   duplicateElements as duplicateElements3,
   hasBoundTextElement as hasBoundTextElement9,
-  isArrowElement as isArrowElement14,
+  isArrowElement as isArrowElement13,
   isBindingElement as isBindingElement4,
   isBindingElementType,
   isBoundToContainer as isBoundToContainer9,
@@ -256,7 +255,7 @@ import {
   getContainerCenter,
   getContainerElement as getContainerElement5,
   isValidTextContainer,
-  redrawTextBoundingBox as redrawTextBoundingBox9,
+  redrawTextBoundingBox as redrawTextBoundingBox8,
   hasBoundingBox as hasBoundingBox2,
   getFrameChildren as getFrameChildren6,
   isCursorInFrame,
@@ -284,8 +283,8 @@ import {
   isElementLink as isElementLink2,
   parseElementLinkFromURL,
   isMeasureTextSupported,
-  normalizeText as normalizeText3,
-  measureText as measureText7,
+  normalizeText as normalizeText2,
+  measureText as measureText6,
   getLineHeightInPx as getLineHeightInPx2,
   getApproxMinLineWidth,
   getApproxMinLineHeight,
@@ -299,7 +298,7 @@ import {
   isElementInGroup as isElementInGroup2,
   isSelectedViaGroup as isSelectedViaGroup2,
   selectGroupsForSelectedElements as selectGroupsForSelectedElements6,
-  syncInvalidIndices as syncInvalidIndices2,
+  syncInvalidIndices,
   syncMovedIndices as syncMovedIndices4,
   excludeElementsInFramesFromSelection,
   getSelectionStateForElements as getSelectionStateForElements2,
@@ -314,7 +313,7 @@ import {
   dragSelectedElements,
   getDragOffsetXY,
   isNonDeletedElement,
-  Scene as Scene2,
+  Scene,
   Store,
   CaptureUpdateAction as CaptureUpdateAction37,
   hitElementBoundingBox as hitElementBoundingBox2,
@@ -328,7 +327,8 @@ import {
   getElementBounds as getElementBounds5,
   doBoundsIntersect as doBoundsIntersect4,
   isPointInElement as isPointInElement3,
-  maxBindingDistance_simple as maxBindingDistance_simple2
+  maxBindingDistance_simple as maxBindingDistance_simple2,
+  convertToExcalidrawElements as convertToExcalidrawElements2
 } from "@excalidraw/element";
 
 // actions/actionDeleteSelected.tsx
@@ -370,64 +370,64 @@ var editorJotaiStore = createStore();
 
 // import("./locales/**/*.json") in i18n.ts
 var globImport_locales_json = __glob({
-  "./locales/ar-SA.json": () => import("./locales/ar-SA-USQAA427.js"),
-  "./locales/az-AZ.json": () => import("./locales/az-AZ-CVQRXULV.js"),
-  "./locales/bg-BG.json": () => import("./locales/bg-BG-E4I2JVOQ.js"),
-  "./locales/bn-BD.json": () => import("./locales/bn-BD-O55ROP2R.js"),
-  "./locales/bn-IN.json": () => import("./locales/bn-IN-OL7OUKTP.js"),
-  "./locales/ca-ES.json": () => import("./locales/ca-ES-73KY52DM.js"),
-  "./locales/cs-CZ.json": () => import("./locales/cs-CZ-2YGHPQ24.js"),
-  "./locales/da-DK.json": () => import("./locales/da-DK-OEIZIPJU.js"),
-  "./locales/de-CH.json": () => import("./locales/de-CH-4GJTW23D.js"),
-  "./locales/de-DE.json": () => import("./locales/de-DE-YRH6WMM5.js"),
-  "./locales/el-GR.json": () => import("./locales/el-GR-W7S64QNM.js"),
-  "./locales/en.json": () => import("./locales/en-ZO6QSABV.js"),
-  "./locales/es-ES.json": () => import("./locales/es-ES-7JEN5PTZ.js"),
-  "./locales/eu-ES.json": () => import("./locales/eu-ES-HQNHU6VR.js"),
-  "./locales/fa-IR.json": () => import("./locales/fa-IR-IN6XOPA6.js"),
-  "./locales/fi-FI.json": () => import("./locales/fi-FI-5BAAYJDZ.js"),
-  "./locales/fr-FR.json": () => import("./locales/fr-FR-KCXBY2R4.js"),
-  "./locales/gl-ES.json": () => import("./locales/gl-ES-5OPGWS6N.js"),
-  "./locales/he-IL.json": () => import("./locales/he-IL-3A6ZWK6L.js"),
-  "./locales/hi-IN.json": () => import("./locales/hi-IN-HZTBH6EG.js"),
-  "./locales/hu-HU.json": () => import("./locales/hu-HU-52IRZEAZ.js"),
-  "./locales/id-ID.json": () => import("./locales/id-ID-W6HBGXTS.js"),
-  "./locales/it-IT.json": () => import("./locales/it-IT-AV75ICYT.js"),
-  "./locales/ja-JP.json": () => import("./locales/ja-JP-SS4G3ZXF.js"),
-  "./locales/kaa.json": () => import("./locales/kaa-Y5BBB3IW.js"),
-  "./locales/kab-KAB.json": () => import("./locales/kab-KAB-KDVZQXBT.js"),
-  "./locales/kk-KZ.json": () => import("./locales/kk-KZ-762YODLJ.js"),
-  "./locales/km-KH.json": () => import("./locales/km-KH-K2TE5MIK.js"),
-  "./locales/ko-KR.json": () => import("./locales/ko-KR-75RUMBCO.js"),
-  "./locales/ku-TR.json": () => import("./locales/ku-TR-E6DJ6LYM.js"),
-  "./locales/lt-LT.json": () => import("./locales/lt-LT-BYS5DA45.js"),
-  "./locales/lv-LV.json": () => import("./locales/lv-LV-SPQ2VWX3.js"),
-  "./locales/mr-IN.json": () => import("./locales/mr-IN-2HLK6LUA.js"),
-  "./locales/my-MM.json": () => import("./locales/my-MM-P2LR44WR.js"),
-  "./locales/nb-NO.json": () => import("./locales/nb-NO-7YZHFFVS.js"),
-  "./locales/nl-NL.json": () => import("./locales/nl-NL-TF2OVIKN.js"),
-  "./locales/nn-NO.json": () => import("./locales/nn-NO-2BWEL2IS.js"),
-  "./locales/oc-FR.json": () => import("./locales/oc-FR-5JYIFGLE.js"),
-  "./locales/pa-IN.json": () => import("./locales/pa-IN-KBBGER76.js"),
-  "./locales/percentages.json": () => import("./locales/percentages-2RAYDWNS.js"),
-  "./locales/pl-PL.json": () => import("./locales/pl-PL-BWZ2X734.js"),
-  "./locales/pt-BR.json": () => import("./locales/pt-BR-ERVIQI63.js"),
-  "./locales/pt-PT.json": () => import("./locales/pt-PT-ZNJ5NB5S.js"),
-  "./locales/ro-RO.json": () => import("./locales/ro-RO-UYNXGUB7.js"),
-  "./locales/ru-RU.json": () => import("./locales/ru-RU-F7LPIMGQ.js"),
-  "./locales/si-LK.json": () => import("./locales/si-LK-5GF2DJUH.js"),
-  "./locales/sk-SK.json": () => import("./locales/sk-SK-H6WE7IJX.js"),
-  "./locales/sl-SI.json": () => import("./locales/sl-SI-4PJ6LBI7.js"),
-  "./locales/sv-SE.json": () => import("./locales/sv-SE-E5VQLCRE.js"),
-  "./locales/ta-IN.json": () => import("./locales/ta-IN-2YWIVLKF.js"),
-  "./locales/th-TH.json": () => import("./locales/th-TH-IV7RUTDK.js"),
-  "./locales/tr-TR.json": () => import("./locales/tr-TR-LEQWIQH7.js"),
-  "./locales/uk-UA.json": () => import("./locales/uk-UA-DWVOQPTB.js"),
-  "./locales/uz-UZ.json": () => import("./locales/uz-UZ-CKXQ3QKG.js"),
-  "./locales/vi-VN.json": () => import("./locales/vi-VN-3P6DZOGS.js"),
-  "./locales/zh-CN.json": () => import("./locales/zh-CN-XXVG53TQ.js"),
-  "./locales/zh-HK.json": () => import("./locales/zh-HK-JCHGKEUE.js"),
-  "./locales/zh-TW.json": () => import("./locales/zh-TW-ARVT7RZU.js")
+  "./locales/ar-SA.json": () => import("./locales/ar-SA-JK5MQ7TT.js"),
+  "./locales/az-AZ.json": () => import("./locales/az-AZ-2PAD62G4.js"),
+  "./locales/bg-BG.json": () => import("./locales/bg-BG-HUKVYCRK.js"),
+  "./locales/bn-BD.json": () => import("./locales/bn-BD-V2CQI46P.js"),
+  "./locales/bn-IN.json": () => import("./locales/bn-IN-MBEO4C3J.js"),
+  "./locales/ca-ES.json": () => import("./locales/ca-ES-KWEKW4C3.js"),
+  "./locales/cs-CZ.json": () => import("./locales/cs-CZ-W5AHZB5H.js"),
+  "./locales/da-DK.json": () => import("./locales/da-DK-ITTM6YM4.js"),
+  "./locales/de-CH.json": () => import("./locales/de-CH-OAWPDQFJ.js"),
+  "./locales/de-DE.json": () => import("./locales/de-DE-ZRDYEPMS.js"),
+  "./locales/el-GR.json": () => import("./locales/el-GR-QXASZLPE.js"),
+  "./locales/en.json": () => import("./locales/en-MLZIHOCR.js"),
+  "./locales/es-ES.json": () => import("./locales/es-ES-VLQBB7FJ.js"),
+  "./locales/eu-ES.json": () => import("./locales/eu-ES-TF2DGTZU.js"),
+  "./locales/fa-IR.json": () => import("./locales/fa-IR-ITKFQ7QV.js"),
+  "./locales/fi-FI.json": () => import("./locales/fi-FI-UWZRVXFI.js"),
+  "./locales/fr-FR.json": () => import("./locales/fr-FR-A72LKGCO.js"),
+  "./locales/gl-ES.json": () => import("./locales/gl-ES-2QCVIBFP.js"),
+  "./locales/he-IL.json": () => import("./locales/he-IL-WJNUHU26.js"),
+  "./locales/hi-IN.json": () => import("./locales/hi-IN-XGMO235V.js"),
+  "./locales/hu-HU.json": () => import("./locales/hu-HU-37FDQFIS.js"),
+  "./locales/id-ID.json": () => import("./locales/id-ID-EJIDCO4E.js"),
+  "./locales/it-IT.json": () => import("./locales/it-IT-X34PIOJ2.js"),
+  "./locales/ja-JP.json": () => import("./locales/ja-JP-37FC23PR.js"),
+  "./locales/kaa.json": () => import("./locales/kaa-7ZYDFVKA.js"),
+  "./locales/kab-KAB.json": () => import("./locales/kab-KAB-MILWXBA6.js"),
+  "./locales/kk-KZ.json": () => import("./locales/kk-KZ-7BWTPIAV.js"),
+  "./locales/km-KH.json": () => import("./locales/km-KH-BV4P2KSZ.js"),
+  "./locales/ko-KR.json": () => import("./locales/ko-KR-TSXE5P7B.js"),
+  "./locales/ku-TR.json": () => import("./locales/ku-TR-ASSXNN3U.js"),
+  "./locales/lt-LT.json": () => import("./locales/lt-LT-G7RZYQQU.js"),
+  "./locales/lv-LV.json": () => import("./locales/lv-LV-DXNPBJZU.js"),
+  "./locales/mr-IN.json": () => import("./locales/mr-IN-7F2ZCTCF.js"),
+  "./locales/my-MM.json": () => import("./locales/my-MM-NBI3KQGW.js"),
+  "./locales/nb-NO.json": () => import("./locales/nb-NO-4DCTQT6L.js"),
+  "./locales/nl-NL.json": () => import("./locales/nl-NL-XGZJ7V2V.js"),
+  "./locales/nn-NO.json": () => import("./locales/nn-NO-FR534JV5.js"),
+  "./locales/oc-FR.json": () => import("./locales/oc-FR-YQCIKZIK.js"),
+  "./locales/pa-IN.json": () => import("./locales/pa-IN-UM43JGD2.js"),
+  "./locales/percentages.json": () => import("./locales/percentages-OGWD7R2K.js"),
+  "./locales/pl-PL.json": () => import("./locales/pl-PL-2UGKA6HK.js"),
+  "./locales/pt-BR.json": () => import("./locales/pt-BR-H23QFYE3.js"),
+  "./locales/pt-PT.json": () => import("./locales/pt-PT-RHKJH5I5.js"),
+  "./locales/ro-RO.json": () => import("./locales/ro-RO-IIFONL3T.js"),
+  "./locales/ru-RU.json": () => import("./locales/ru-RU-QEP6D7GK.js"),
+  "./locales/si-LK.json": () => import("./locales/si-LK-LZYJQLHF.js"),
+  "./locales/sk-SK.json": () => import("./locales/sk-SK-RWC6UWGY.js"),
+  "./locales/sl-SI.json": () => import("./locales/sl-SI-QJT2CAUO.js"),
+  "./locales/sv-SE.json": () => import("./locales/sv-SE-3MAT3NDX.js"),
+  "./locales/ta-IN.json": () => import("./locales/ta-IN-J7XOYF2T.js"),
+  "./locales/th-TH.json": () => import("./locales/th-TH-2OI52EOQ.js"),
+  "./locales/tr-TR.json": () => import("./locales/tr-TR-G7TAUHUI.js"),
+  "./locales/uk-UA.json": () => import("./locales/uk-UA-IVSVBJIG.js"),
+  "./locales/uz-UZ.json": () => import("./locales/uz-UZ-KCVDUVDE.js"),
+  "./locales/vi-VN.json": () => import("./locales/vi-VN-KBZAVWP5.js"),
+  "./locales/zh-CN.json": () => import("./locales/zh-CN-IS26RG2D.js"),
+  "./locales/zh-HK.json": () => import("./locales/zh-HK-KBWQ6SJC.js"),
+  "./locales/zh-TW.json": () => import("./locales/zh-TW-JKJWJQ4J.js")
 });
 
 // i18n.ts
@@ -3550,9 +3550,10 @@ import {
   arrayToMap as arrayToMap3,
   getFontFamilyString as getFontFamilyString2,
   getLineHeight,
-  isTransparent as isTransparent2,
+  isTransparent as isTransparent3,
   reduceToCommonValue,
-  invariant
+  invariant,
+  FONT_SIZES
 } from "@excalidraw/common";
 import { canBecomePolygon, getNonDeletedElements as getNonDeletedElements4 } from "@excalidraw/element";
 import {
@@ -3682,7 +3683,6 @@ import { useRef as useRef8, useEffect as useEffect9 } from "react";
 import {
   COLOR_OUTLINE_CONTRAST_THRESHOLD as COLOR_OUTLINE_CONTRAST_THRESHOLD2,
   COLOR_PALETTE as COLOR_PALETTE2,
-  isTransparent,
   isWritableElement
 } from "@excalidraw/common";
 
@@ -4111,10 +4111,15 @@ var temporarilyDisableTextEditorBlur = (duration = 100) => {
 // components/ColorPicker/ColorInput.tsx
 import clsx7 from "clsx";
 import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
-import { KEYS as KEYS6 } from "@excalidraw/common";
+import { isTransparent as isTransparent2, KEYS as KEYS6 } from "@excalidraw/common";
+import tinycolor2 from "tinycolor2";
 
 // components/ColorPicker/colorPickerUtils.ts
-import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "@excalidraw/common";
+import {
+  isTransparent,
+  MAX_CUSTOM_COLORS_USED_IN_CANVAS,
+  tinycolor
+} from "@excalidraw/common";
 var getColorNameAndShadeFromColor = ({
   palette: palette2,
   color
@@ -4178,36 +4183,33 @@ var isColorDark = (color, threshold = 160) => {
   if (!color) {
     return true;
   }
-  if (color === "transparent") {
+  if (isTransparent(color)) {
     return false;
   }
-  if (!color.startsWith("#")) {
-    const node = document.createElement("div");
-    node.style.color = color;
-    if (node.style.color) {
-      node.style.position = "absolute";
-      node.style.visibility = "hidden";
-      node.style.width = "0";
-      node.style.height = "0";
-      document.body.appendChild(node);
-      const computedColor = getComputedStyle(node).color;
-      document.body.removeChild(node);
-      const rgb = computedColor.replace(/^(rgb|rgba)\(/, "").replace(/\)$/, "").replace(/\s/g, "").split(",");
-      const r2 = parseInt(rgb[0]);
-      const g2 = parseInt(rgb[1]);
-      const b2 = parseInt(rgb[2]);
-      return calculateContrast(r2, g2, b2) < threshold;
-    }
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
     return true;
   }
-  const r = parseInt(color.slice(1, 3), 16);
-  const g = parseInt(color.slice(3, 5), 16);
-  const b = parseInt(color.slice(5, 7), 16);
+  const { r, g, b } = tc.toRgb();
   return calculateContrast(r, g, b) < threshold;
 };
 
 // components/ColorPicker/ColorInput.tsx
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var normalizeInputColor = (color) => {
+  color = color.trim();
+  if (isTransparent2(color)) {
+    return color;
+  }
+  const tc = tinycolor2(color);
+  if (tc.isValid()) {
+    if (tc.getFormat() === "hex" && !color.startsWith("#")) {
+      return `#${color}`;
+    }
+    return color;
+  }
+  return null;
+};
 var ColorInput = ({
   color,
   onChange,
@@ -4226,7 +4228,7 @@ var ColorInput = ({
   const changeColor = useCallback2(
     (inputValue) => {
       const value = inputValue.toLowerCase();
-      const color2 = getColor(value);
+      const color2 = normalizeInputColor(value);
       if (color2) {
         onChange(color2);
       }
@@ -4937,17 +4939,6 @@ var TopPicks = ({
 
 // components/ColorPicker/ColorPicker.tsx
 import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
-var isValidColor = (color) => {
-  const style = new Option().style;
-  style.color = color;
-  return !!style.color;
-};
-var getColor = (color) => {
-  if (isTransparent(color)) {
-    return color;
-  }
-  return isValidColor(`#${color}`) ? `#${color}` : isValidColor(color) ? color : null;
-};
 var ColorPickerPopupContent = ({
   type,
   color,
@@ -6212,20 +6203,20 @@ var changeFontSize = (elements, appState, app, getNewFontSize, fallbackValue) =>
       if (isTextElement2(oldElement)) {
         const newFontSize = getNewFontSize(oldElement);
         newFontSizes.add(newFontSize);
-        let newElement6 = newElementWith2(oldElement, {
+        let newElement5 = newElementWith2(oldElement, {
           fontSize: newFontSize
         });
         redrawTextBoundingBox(
-          newElement6,
+          newElement5,
           app.scene.getContainerElement(oldElement),
           app.scene
         );
-        newElement6 = offsetElementAfterFontResize(
+        newElement5 = offsetElementAfterFontResize(
           oldElement,
-          newElement6,
+          newElement5,
           app.scene
         );
-        return newElement6;
+        return newElement5;
       }
       return oldElement;
     },
@@ -6317,7 +6308,7 @@ var actionChangeBackgroundColor = register({
     }
     let nextElements;
     const selectedElements = app.scene.getSelectedElements(appState);
-    const shouldEnablePolygon = !isTransparent2(value.currentItemBackgroundColor) && selectedElements.every(
+    const shouldEnablePolygon = !isTransparent3(value.currentItemBackgroundColor) && selectedElements.every(
       (el) => isLineElement(el) && canBecomePolygon(el.points)
     );
     if (shouldEnablePolygon) {
@@ -6651,25 +6642,25 @@ var actionChangeFontSize = register(
             group: "font-size",
             options: [
               {
-                value: 16,
+                value: FONT_SIZES.sm,
                 text: t("labels.small"),
                 icon: FontSizeSmallIcon,
                 testId: "fontSize-small"
               },
               {
-                value: 20,
+                value: FONT_SIZES.md,
                 text: t("labels.medium"),
                 icon: FontSizeMediumIcon,
                 testId: "fontSize-medium"
               },
               {
-                value: 28,
+                value: FONT_SIZES.lg,
                 text: t("labels.large"),
                 icon: FontSizeLargeIcon,
                 testId: "fontSize-large"
               },
               {
-                value: 36,
+                value: FONT_SIZES.xl,
                 text: t("labels.veryLarge"),
                 icon: FontSizeExtraLargeIcon,
                 testId: "fontSize-veryLarge"
@@ -6764,10 +6755,10 @@ var actionChangeFontFamily = register({
         (element) => {
           const cachedElement = cachedElements?.get(element.id);
           if (cachedElement) {
-            const newElement6 = newElementWith2(element, {
+            const newElement5 = newElementWith2(element, {
               ...cachedElement
             });
-            return newElement6;
+            return newElement5;
           }
           return element;
         },
@@ -6835,7 +6826,7 @@ var actionChangeFontFamily = register({
           appState,
           (oldElement) => {
             if (isTextElement2(oldElement) && (oldElement.fontFamily !== nextFontFamily || currentItemFontFamily)) {
-              const newElement6 = newElementWith2(
+              const newElement5 = newElementWith2(
                 oldElement,
                 {
                   fontFamily: nextFontFamily,
@@ -6850,11 +6841,11 @@ var actionChangeFontFamily = register({
               if (!skipFontFaceCheck) {
                 uniqueChars = /* @__PURE__ */ new Set([
                   ...uniqueChars,
-                  ...Array.from(newElement6.originalText)
+                  ...Array.from(newElement5.originalText)
                 ]);
               }
-              elementContainerMapping.set(newElement6, container);
-              return newElement6;
+              elementContainerMapping.set(newElement5, container);
+              return newElement5;
             }
             return oldElement;
           },
@@ -7040,16 +7031,16 @@ var actionChangeTextAlign = register({
         appState,
         (oldElement) => {
           if (isTextElement2(oldElement)) {
-            const newElement6 = newElementWith2(
+            const newElement5 = newElementWith2(
               oldElement,
               { textAlign: value }
             );
             redrawTextBoundingBox(
-              newElement6,
+              newElement5,
               app.scene.getContainerElement(oldElement),
               app.scene
             );
-            return newElement6;
+            return newElement5;
           }
           return oldElement;
         },
@@ -7134,16 +7125,16 @@ var actionChangeVerticalAlign = register({
         appState,
         (oldElement) => {
           if (isTextElement2(oldElement)) {
-            const newElement6 = newElementWith2(
+            const newElement5 = newElementWith2(
               oldElement,
               { verticalAlign: value }
             );
             redrawTextBoundingBox(
-              newElement6,
+              newElement5,
               app.scene.getContainerElement(oldElement),
               app.scene
             );
-            return newElement6;
+            return newElement5;
           }
           return oldElement;
         },
@@ -7463,7 +7454,7 @@ var actionChangeArrowType = register({
         -1,
         elementsMap
       );
-      let newElement6 = newElementWith2(el, {
+      let newElement5 = newElementWith2(el, {
         x: value === ARROW_TYPE.elbow ? startPoint[0] : el.x,
         y: value === ARROW_TYPE.elbow ? startPoint[1] : el.y,
         roundness: value === ARROW_TYPE.round ? {
@@ -7494,53 +7485,53 @@ var actionChangeArrowType = register({
           )
         ] : el.points
       });
-      if (isElbowArrow2(newElement6)) {
-        newElement6.fixedSegments = null;
+      if (isElbowArrow2(newElement5)) {
+        newElement5.fixedSegments = null;
         const elementsMap2 = app.scene.getNonDeletedElementsMap();
         app.dismissLinearEditor();
         const startGlobalPoint = LinearElementEditor4.getPointAtIndexGlobalCoordinates(
-          newElement6,
+          newElement5,
           0,
           elementsMap2
         );
         const endGlobalPoint = LinearElementEditor4.getPointAtIndexGlobalCoordinates(
-          newElement6,
+          newElement5,
           -1,
           elementsMap2
         );
-        const startElement = newElement6.startBinding && elementsMap2.get(
-          newElement6.startBinding.elementId
+        const startElement = newElement5.startBinding && elementsMap2.get(
+          newElement5.startBinding.elementId
         );
-        const endElement = newElement6.endBinding && elementsMap2.get(
-          newElement6.endBinding.elementId
+        const endElement = newElement5.endBinding && elementsMap2.get(
+          newElement5.endBinding.elementId
         );
-        const startBinding = startElement && newElement6.startBinding ? {
+        const startBinding = startElement && newElement5.startBinding ? {
           // @ts-ignore TS cannot discern check above
-          ...newElement6.startBinding,
+          ...newElement5.startBinding,
           ...calculateFixedPointForElbowArrowBinding(
-            newElement6,
+            newElement5,
             startElement,
             "start",
             elementsMap2
           )
         } : null;
-        const endBinding = endElement && newElement6.endBinding ? {
+        const endBinding = endElement && newElement5.endBinding ? {
           // @ts-ignore TS cannot discern check above
-          ...newElement6.endBinding,
+          ...newElement5.endBinding,
           ...calculateFixedPointForElbowArrowBinding(
-            newElement6,
+            newElement5,
             endElement,
             "end",
             elementsMap2
           )
         } : null;
-        newElement6 = {
-          ...newElement6,
+        newElement5 = {
+          ...newElement5,
           startBinding,
           endBinding,
-          ...updateElbowArrowPoints(newElement6, elementsMap2, {
+          ...updateElbowArrowPoints(newElement5, elementsMap2, {
             points: [startGlobalPoint, endGlobalPoint].map(
-              (p) => pointFrom(p[0] - newElement6.x, p[1] - newElement6.y)
+              (p) => pointFrom(p[0] - newElement5.x, p[1] - newElement5.y)
             ),
             startBinding,
             endBinding,
@@ -7549,13 +7540,13 @@ var actionChangeArrowType = register({
         };
       } else {
         const elementsMap2 = app.scene.getNonDeletedElementsMap();
-        if (newElement6.startBinding) {
+        if (newElement5.startBinding) {
           const startElement = elementsMap2.get(
-            newElement6.startBinding.elementId
+            newElement5.startBinding.elementId
           );
           if (startElement) {
             bindBindingElement(
-              newElement6,
+              newElement5,
               startElement,
               appState.bindMode === "inside" ? "inside" : "orbit",
               "start",
@@ -7563,13 +7554,13 @@ var actionChangeArrowType = register({
             );
           }
         }
-        if (newElement6.endBinding) {
+        if (newElement5.endBinding) {
           const endElement = elementsMap2.get(
-            newElement6.endBinding.elementId
+            newElement5.endBinding.elementId
           );
           if (endElement) {
             bindBindingElement(
-              newElement6,
+              newElement5,
               endElement,
               appState.bindMode === "inside" ? "inside" : "orbit",
               "end",
@@ -7578,7 +7569,7 @@ var actionChangeArrowType = register({
           }
         }
       }
-      return newElement6;
+      return newElement5;
     });
     const newState = {
       ...appState,
@@ -8349,6 +8340,7 @@ import {
   KEYS as KEYS13,
   arrayToMap as arrayToMap4,
   invariant as invariant2,
+  shouldRotateWithDiscreteAngle,
   updateActiveTool as updateActiveTool4
 } from "@excalidraw/common";
 import { isPathALoop } from "@excalidraw/element";
@@ -8396,10 +8388,19 @@ var actionFinalize = register({
           });
           return map;
         }, /* @__PURE__ */ new Map()) ?? /* @__PURE__ */ new Map();
-        bindOrUnbindBindingElement(element2, draggedPoints, scene, appState, {
-          newArrow,
-          altKey: event.altKey
-        });
+        bindOrUnbindBindingElement(
+          element2,
+          draggedPoints,
+          sceneCoords.x,
+          sceneCoords.y,
+          scene,
+          appState,
+          {
+            newArrow,
+            altKey: event.altKey,
+            angleLocked: shouldRotateWithDiscreteAngle(event)
+          }
+        );
       } else if (isLineElement2(element2)) {
         if (appState.selectedLinearElement?.isEditing && !appState.newElement && !isValidPolygon(element2.points)) {
           scene.mutateElement(element2, {
@@ -8731,7 +8732,8 @@ import {
   DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE2,
   VERTICAL_ALIGN as VERTICAL_ALIGN2,
   randomId,
-  isDevEnv as isDevEnv3
+  isDevEnv as isDevEnv3,
+  FONT_SIZES as FONT_SIZES2
 } from "@excalidraw/common";
 import {
   newTextElement,
@@ -8863,7 +8865,7 @@ var chartXLabels = (spreadsheet, x, y, groupId, backgroundColor) => {
       y: y + BAR_GAP / 2,
       width: BAR_WIDTH,
       angle: 5.87,
-      fontSize: 16,
+      fontSize: FONT_SIZES2.sm,
       textAlign: "center",
       verticalAlign: "top"
     });
@@ -9098,7 +9100,6 @@ var createPasteEvent = ({
       if (typeof value !== "string") {
         files = files || [];
         files.push(value);
-        event.clipboardData?.items.add(value);
         continue;
       }
       try {
@@ -9556,7 +9557,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-S2GFZH7W.js").then(
+        (blob2) => import("./data/image-Q6JHR7OE.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -9968,7 +9969,7 @@ var actionPasteStyles = register({
           if (!elementStylesToCopyFrom) {
             return element;
           }
-          let newElement6 = newElementWith5(element, {
+          let newElement5 = newElementWith5(element, {
             backgroundColor: elementStylesToCopyFrom?.backgroundColor,
             strokeWidth: elementStylesToCopyFrom?.strokeWidth,
             strokeColor: elementStylesToCopyFrom?.strokeColor,
@@ -9981,36 +9982,36 @@ var actionPasteStyles = register({
               element
             ) ? elementStylesToCopyFrom.roundness : getDefaultRoundnessTypeForElement(element) : null
           });
-          if (isTextElement3(newElement6)) {
+          if (isTextElement3(newElement5)) {
             const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE3;
             const fontFamily = elementStylesToCopyFrom.fontFamily || DEFAULT_FONT_FAMILY3;
-            newElement6 = newElementWith5(newElement6, {
+            newElement5 = newElementWith5(newElement5, {
               fontSize,
               fontFamily,
               textAlign: elementStylesToCopyFrom.textAlign || DEFAULT_TEXT_ALIGN,
               lineHeight: elementStylesToCopyFrom.lineHeight || getLineHeight2(fontFamily)
             });
             let container = null;
-            if (newElement6.containerId) {
+            if (newElement5.containerId) {
               container = selectedElements.find(
-                (element2) => isTextElement3(newElement6) && element2.id === newElement6.containerId
+                (element2) => isTextElement3(newElement5) && element2.id === newElement5.containerId
               ) || null;
             }
-            redrawTextBoundingBox2(newElement6, container, app.scene);
+            redrawTextBoundingBox2(newElement5, container, app.scene);
           }
-          if (newElement6.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
-            newElement6 = newElementWith5(newElement6, {
+          if (newElement5.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
+            newElement5 = newElementWith5(newElement5, {
               startArrowhead: elementStylesToCopyFrom.startArrowhead,
               endArrowhead: elementStylesToCopyFrom.endArrowhead
             });
           }
           if (isFrameLikeElement4(element)) {
-            newElement6 = newElementWith5(newElement6, {
+            newElement5 = newElementWith5(newElement5, {
               roundness: null,
               backgroundColor: "transparent"
             });
           }
-          return newElement6;
+          return newElement5;
         }
         return element;
       }),
@@ -13412,12 +13413,10 @@ var exportToCanvas2 = ({
   exportPadding,
   exportingFrame
 }) => {
-  const { elements: restoredElements, appState: restoredAppState } = restore(
-    { elements, appState },
-    null,
-    null,
-    { deleteInvisibleElements: true }
-  );
+  const restoredElements = restoreElements(elements, null, {
+    deleteInvisibleElements: true
+  });
+  const restoredAppState = restoreAppState(appState, null);
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return exportToCanvas(
     restoredElements,
@@ -13507,12 +13506,10 @@ var exportToSvg2 = async ({
   skipInliningFonts,
   reuseImages
 }) => {
-  const { elements: restoredElements, appState: restoredAppState } = restore(
-    { elements, appState },
-    null,
-    null,
-    { deleteInvisibleElements: true }
-  );
+  const restoredElements = restoreElements(elements, null, {
+    deleteInvisibleElements: true
+  });
+  const restoredAppState = restoreAppState(appState, null);
   const exportAppState = {
     ...restoredAppState,
     exportPadding
@@ -16506,7 +16503,7 @@ import {
   CLASSES as CLASSES3,
   KEYS as KEYS36,
   capitalizeString as capitalizeString2,
-  isTransparent as isTransparent3
+  isTransparent as isTransparent4
 } from "@excalidraw/common";
 import {
   shouldAllowVerticalAlign,
@@ -16698,8 +16695,8 @@ var SelectedShapeActions = ({
   );
   const editorInterface = useEditorInterface();
   const isRTL2 = document.documentElement.getAttribute("dir") === "rtl";
-  const showFillIcons = hasBackground(appState.activeTool.type) && !isTransparent3(appState.currentItemBackgroundColor) || targetElements.some(
-    (element) => hasBackground(element.type) && !isTransparent3(element.backgroundColor)
+  const showFillIcons = hasBackground(appState.activeTool.type) && !isTransparent4(appState.currentItemBackgroundColor) || targetElements.some(
+    (element) => hasBackground(element.type) && !isTransparent4(element.backgroundColor)
   );
   const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
   const showLineEditorAction = !appState.selectedLinearElement?.isEditing && targetElements.length === 1 && isLinearElement5(targetElements[0]) && !isElbowArrow5(targetElements[0]);
@@ -16788,8 +16785,8 @@ var CombinedShapeProperties = ({
   targetElements,
   container
 }) => {
-  const showFillIcons = hasBackground(appState.activeTool.type) && !isTransparent3(appState.currentItemBackgroundColor) || targetElements.some(
-    (element) => hasBackground(element.type) && !isTransparent3(element.backgroundColor)
+  const showFillIcons = hasBackground(appState.activeTool.type) && !isTransparent4(appState.currentItemBackgroundColor) || targetElements.some(
+    (element) => hasBackground(element.type) && !isTransparent4(element.backgroundColor)
   );
   const shouldShowCombinedProperties = targetElements.length > 0 || appState.activeTool.type !== "selection" && appState.activeTool.type !== "eraser" && appState.activeTool.type !== "hand" && appState.activeTool.type !== "laser" && appState.activeTool.type !== "lasso";
   const isOpen = appState.openPopup === "compactStrokeStyles";
@@ -18431,6 +18428,7 @@ import {
 
 // ../element/src/shape.ts
 import { simplify } from "points-on-curve";
+import { getStroke } from "perfect-freehand";
 
 // ../utils/src/shape.ts
 import { pointsOnBezierCurves } from "points-on-curve";
@@ -18473,16 +18471,17 @@ import {
 } from "@excalidraw/math";
 import {
   ROUGHNESS,
-  isTransparent as isTransparent6,
+  THEME as THEME10,
+  isTransparent as isTransparent7,
   assertNever as assertNever3,
   COLOR_PALETTE as COLOR_PALETTE5,
-  LINE_POLYGON_POINT_MERGE_DISTANCE
+  LINE_POLYGON_POINT_MERGE_DISTANCE,
+  applyDarkModeFilter as applyDarkModeFilter2
 } from "@excalidraw/common";
 import { RoughGenerator } from "roughjs/bin/generator";
 
 // ../element/src/renderElement.ts
 import rough2 from "roughjs/bin/rough";
-import { getStroke } from "perfect-freehand";
 import {
   isRightAngleRads,
   lineSegment as lineSegment7,
@@ -18500,7 +18499,8 @@ import {
   getFontString as getFontString5,
   isRTL,
   getVerticalOffset,
-  invariant as invariant13
+  invariant as invariant13,
+  applyDarkModeFilter
 } from "@excalidraw/common";
 
 // ../element/src/bounds.ts
@@ -18536,7 +18536,7 @@ import {
 import {
   DRAGGING_THRESHOLD,
   KEYS as KEYS39,
-  shouldRotateWithDiscreteAngle,
+  shouldRotateWithDiscreteAngle as shouldRotateWithDiscreteAngle2,
   getGridPoint,
   invariant as invariant11,
   isShallowEqual as isShallowEqual2,
@@ -18544,7 +18544,6 @@ import {
 } from "@excalidraw/common";
 import {
   deconstructLinearOrFreeDrawElement as deconstructLinearOrFreeDrawElement2,
-  getHoveredElementForBinding as getHoveredElementForBinding2,
   isPathALoop as isPathALoop3,
   moveArrowAboveBindable,
   projectFixedPointOntoDiagonal as projectFixedPointOntoDiagonal2
@@ -18556,7 +18555,7 @@ import {
   arrayToMap as arrayToMap15,
   getFeatureFlag,
   invariant as invariant10,
-  isTransparent as isTransparent5
+  isTransparent as isTransparent6
 } from "@excalidraw/common";
 import {
   PRECISION as PRECISION2,
@@ -18573,7 +18572,7 @@ import {
 } from "@excalidraw/math";
 
 // ../element/src/collision.ts
-import { invariant as invariant7, isTransparent as isTransparent4 } from "@excalidraw/common";
+import { invariant as invariant7, isTransparent as isTransparent5 } from "@excalidraw/common";
 import {
   curveIntersectLineSegment,
   isPointWithinBounds,
@@ -18713,7 +18712,11 @@ import {
 import { ellipse, ellipseDistanceFromPoint } from "@excalidraw/math/ellipse";
 
 // ../element/src/heading.ts
-import { invariant as invariant8, isDevEnv as isDevEnv5, isTestEnv as isTestEnv3 } from "@excalidraw/common";
+import {
+  invariant as invariant8,
+  isDevEnv as isDevEnv5,
+  isTestEnv as isTestEnv3
+} from "@excalidraw/common";
 import {
   pointFrom as pointFrom10,
   pointFromVector as pointFromVector4,
@@ -19247,51 +19250,6 @@ IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES7.svg},${encodeURIComponent(
   `<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`
 )}`;
 var elementWithCanvasCache = /* @__PURE__ */ new WeakMap();
-var pathsCache = /* @__PURE__ */ new WeakMap([]);
-function generateFreeDrawShape(element) {
-  const svgPathData = getFreeDrawSvgPath(element);
-  const path = new Path2D(svgPathData);
-  pathsCache.set(element, path);
-  return path;
-}
-function getFreeDrawSvgPath(element) {
-  return getSvgPathFromStroke(getFreedrawOutlinePoints(element));
-}
-function getFreedrawOutlinePoints(element) {
-  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
-  const options = {
-    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
-    easing: (t2) => Math.sin(t2 * Math.PI / 2),
-    // https://easings.net/#easeOutSine
-    last: true
-  };
-  return getStroke(inputPoints, options);
-}
-function med(A, B) {
-  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
-}
-var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
-function getSvgPathFromStroke(points) {
-  if (!points.length) {
-    return "";
-  }
-  const max = points.length - 1;
-  return points.reduce(
-    (acc, point, i, arr) => {
-      if (i === max) {
-        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
-      } else {
-        acc.push(point, med(point, arr[i + 1]));
-      }
-      return acc;
-    },
-    ["M", points[0], "Q"]
-  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
-}
 
 // ../element/src/comparisons.ts
 var canChangeRoundness2 = (type) => type === "rectangle" || type === "iframe" || type === "embeddable" || type === "line" || type === "diamond" || type === "image";
@@ -19305,13 +19263,17 @@ __publicField(_ShapeCache, "cache", /* @__PURE__ */ new WeakMap());
  * Retrieves shape from cache if available. Use this only if shape
  * is optional and you have a fallback in case it's not cached.
  */
-__publicField(_ShapeCache, "get", (element) => {
-  return _ShapeCache.cache.get(
-    element
-  );
+__publicField(_ShapeCache, "get", (element, theme) => {
+  const cached = _ShapeCache.cache.get(element);
+  if (cached && (theme === null || cached.theme === theme)) {
+    return cached.shape;
+  }
+  return void 0;
+});
+__publicField(_ShapeCache, "delete", (element) => {
+  _ShapeCache.cache.delete(element);
+  elementWithCanvasCache.delete(element);
 });
-__publicField(_ShapeCache, "set", (element, shape) => _ShapeCache.cache.set(element, shape));
-__publicField(_ShapeCache, "delete", (element) => _ShapeCache.cache.delete(element));
 __publicField(_ShapeCache, "destroy", () => {
   _ShapeCache.cache = /* @__PURE__ */ new WeakMap();
 });
@@ -19320,21 +19282,27 @@ __publicField(_ShapeCache, "destroy", () => {
  * returns cached shape.
  */
 __publicField(_ShapeCache, "generateElementShape", (element, renderConfig) => {
-  const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element);
+  const cachedShape = renderConfig?.isExporting ? void 0 : _ShapeCache.get(element, renderConfig ? renderConfig.theme : null);
   if (cachedShape !== void 0) {
     return cachedShape;
   }
   elementWithCanvasCache.delete(element);
-  const shape = generateElementShape(
+  const shape = _generateElementShape(
     element,
     _ShapeCache.rg,
     renderConfig || {
       isExporting: false,
       canvasBackgroundColor: COLOR_PALETTE5.white,
-      embedsValidationStatus: null
+      embedsValidationStatus: null,
+      theme: THEME10.LIGHT
     }
   );
-  _ShapeCache.cache.set(element, shape);
+  if (!renderConfig?.isExporting) {
+    _ShapeCache.cache.set(element, {
+      shape,
+      theme: renderConfig?.theme || THEME10.LIGHT
+    });
+  }
   return shape;
 });
 var ShapeCache2 = _ShapeCache;
@@ -19354,7 +19322,7 @@ function adjustRoughness(element) {
   }
   return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);
 }
-var generateRoughOptions = (element, continuousPath = false) => {
+var generateRoughOptions = (element, continuousPath = false, isDarkMode = false) => {
   const options = {
     seed: element.seed,
     strokeLineDash: element.strokeStyle === "dashed" ? getDashArrayDashed(element.strokeWidth) : element.strokeStyle === "dotted" ? getDashArrayDotted(element.strokeWidth) : void 0,
@@ -19370,7 +19338,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: adjustRoughness(element),
-    stroke: element.strokeColor,
+    stroke: isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor,
     preserveVertices: continuousPath || element.roughness < ROUGHNESS.cartoonist
   };
   switch (element.type) {
@@ -19380,7 +19348,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     case "diamond":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
-      options.fill = isTransparent6(element.backgroundColor) ? void 0 : element.backgroundColor;
+      options.fill = isTransparent7(element.backgroundColor) ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
       if (element.type === "ellipse") {
         options.curveFitting = 1;
       }
@@ -19390,7 +19358,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
     case "freedraw": {
       if (isPathALoop2(element.points)) {
         options.fillStyle = element.fillStyle;
-        options.fill = element.backgroundColor === "transparent" ? void 0 : element.backgroundColor;
+        options.fill = element.backgroundColor === "transparent" ? void 0 : isDarkMode ? applyDarkModeFilter2(element.backgroundColor) : element.backgroundColor;
       }
       return options;
     }
@@ -19402,7 +19370,7 @@ var generateRoughOptions = (element, continuousPath = false) => {
   }
 };
 var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationStatus) => {
-  if (isIframeLikeElement(element) && (isExporting || isEmbeddableElement3(element) && embedsValidationStatus?.get(element.id) !== true) && isTransparent6(element.backgroundColor) && isTransparent6(element.strokeColor)) {
+  if (isIframeLikeElement(element) && (isExporting || isEmbeddableElement3(element) && embedsValidationStatus?.get(element.id) !== true) && isTransparent7(element.backgroundColor) && isTransparent7(element.strokeColor)) {
     return {
       ...element,
       roughness: 0,
@@ -19412,13 +19380,13 @@ var modifyIframeLikeForRoughOptions = (element, isExporting, embedsValidationSta
   } else if (isIframeElement(element)) {
     return {
       ...element,
-      strokeColor: isTransparent6(element.strokeColor) ? "#000000" : element.strokeColor,
-      backgroundColor: isTransparent6(element.backgroundColor) ? "#f4f4f6" : element.backgroundColor
+      strokeColor: isTransparent7(element.strokeColor) ? "#000000" : element.strokeColor,
+      backgroundColor: isTransparent7(element.backgroundColor) ? "#f4f4f6" : element.backgroundColor
     };
   }
   return element;
 };
-var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor) => {
+var getArrowheadShapes = (element, shape, position, arrowhead, generator, options, canvasBackgroundColor, isDarkMode) => {
   const arrowheadPoints = getArrowheadPoints(
     element,
     shape,
@@ -19435,6 +19403,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     const [, , x3, y3, x4, y4] = arrowheadPoints2;
     return [generator.line(x3, y3, x4, y4, options2)];
   };
+  const strokeColor = isDarkMode ? applyDarkModeFilter2(element.strokeColor) : element.strokeColor;
   switch (arrowhead) {
     case "dot":
     case "circle":
@@ -19444,9 +19413,9 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
       return [
         generator.circle(x, y, diameter, {
           ...options,
-          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : element.strokeColor,
+          fill: arrowhead === "circle_outline" ? canvasBackgroundColor : strokeColor,
           fillStyle: "solid",
-          stroke: element.strokeColor,
+          stroke: strokeColor,
           roughness: Math.min(0.5, options.roughness || 0)
         })
       ];
@@ -19465,7 +19434,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           ],
           {
             ...options,
-            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : element.strokeColor,
+            fill: arrowhead === "triangle_outline" ? canvasBackgroundColor : strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0)
           }
@@ -19487,7 +19456,7 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
           ],
           {
             ...options,
-            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : element.strokeColor,
+            fill: arrowhead === "diamond_outline" ? canvasBackgroundColor : strokeColor,
             fillStyle: "solid",
             roughness: Math.min(1, options.roughness || 0)
           }
@@ -19520,11 +19489,13 @@ var getArrowheadShapes = (element, shape, position, arrowhead, generator, option
     }
   }
 };
-var generateElementShape = (element, generator, {
+var _generateElementShape = (element, generator, {
   isExporting,
   canvasBackgroundColor,
-  embedsValidationStatus
+  embedsValidationStatus,
+  theme
 }) => {
+  const isDarkMode = theme === THEME10.DARK;
   switch (element.type) {
     case "rectangle":
     case "iframe":
@@ -19542,7 +19513,8 @@ var generateElementShape = (element, generator, {
               isExporting,
               embedsValidationStatus
             ),
-            true
+            true,
+            isDarkMode
           )
         );
       } else {
@@ -19557,7 +19529,8 @@ var generateElementShape = (element, generator, {
               isExporting,
               embedsValidationStatus
             ),
-            false
+            false,
+            isDarkMode
           )
         );
       }
@@ -19581,7 +19554,7 @@ var generateElementShape = (element, generator, {
             C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius}
             L ${topX - verticalRadius} ${topY + horizontalRadius}
             C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`,
-          generateRoughOptions(element, true)
+          generateRoughOptions(element, true, isDarkMode)
         );
       } else {
         shape = generator.polygon(
@@ -19591,7 +19564,7 @@ var generateElementShape = (element, generator, {
             [bottomX, bottomY],
             [leftX, leftY]
           ],
-          generateRoughOptions(element)
+          generateRoughOptions(element, false, isDarkMode)
         );
       }
       return shape;
@@ -19602,14 +19575,14 @@ var generateElementShape = (element, generator, {
         element.height / 2,
         element.width,
         element.height,
-        generateRoughOptions(element)
+        generateRoughOptions(element, false, isDarkMode)
       );
       return shape;
     }
     case "line":
     case "arrow": {
       let shape;
-      const options = generateRoughOptions(element);
+      const options = generateRoughOptions(element, false, isDarkMode);
       const points = element.points.length ? element.points : [pointFrom19(0, 0)];
       if (isElbowArrow6(element)) {
         if (!points.every(
@@ -19625,7 +19598,7 @@ var generateElementShape = (element, generator, {
           shape = [
             generator.path(
               generateElbowArrowShape(points, 16),
-              generateRoughOptions(element, true)
+              generateRoughOptions(element, true, isDarkMode)
             )
           ];
         }
@@ -19652,7 +19625,8 @@ var generateElementShape = (element, generator, {
             startArrowhead,
             generator,
             options,
-            canvasBackgroundColor
+            canvasBackgroundColor,
+            isDarkMode
           );
           shape.push(...shapes);
         }
@@ -19666,7 +19640,8 @@ var generateElementShape = (element, generator, {
             endArrowhead,
             generator,
             options,
-            canvasBackgroundColor
+            canvasBackgroundColor,
+            isDarkMode
           );
           shape.push(...shapes);
         }
@@ -19674,21 +19649,21 @@ var generateElementShape = (element, generator, {
       return shape;
     }
     case "freedraw": {
-      let shape;
-      generateFreeDrawShape(element);
+      const shapes = [];
       if (isPathALoop2(element.points)) {
         const simplifiedPoints = simplify(
           element.points,
           0.75
         );
-        shape = generator.curve(simplifiedPoints, {
-          ...generateRoughOptions(element),
-          stroke: "none"
-        });
-      } else {
-        shape = null;
+        shapes.push(
+          generator.curve(simplifiedPoints, {
+            ...generateRoughOptions(element, false, isDarkMode),
+            stroke: "none"
+          })
+        );
       }
-      return shape;
+      shapes.push(getFreeDrawSvgPath(element));
+      return shapes;
     }
     case "frame":
     case "magicframe":
@@ -19753,6 +19728,45 @@ var generateElbowArrowShape = (points, radius) => {
   d.push(`L ${points[points.length - 1][0]} ${points[points.length - 1][1]}`);
   return d.join(" ");
 };
+var getFreeDrawSvgPath = (element) => {
+  return getSvgPathFromStroke(
+    getFreedrawOutlinePoints(element)
+  );
+};
+var getFreedrawOutlinePoints = (element) => {
+  const inputPoints = element.simulatePressure ? element.points : element.points.length ? element.points.map(([x, y], i) => [x, y, element.pressures[i]]) : [[0, 0, 0.5]];
+  return getStroke(inputPoints, {
+    simulatePressure: element.simulatePressure,
+    size: element.strokeWidth * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
+    easing: (t2) => Math.sin(t2 * Math.PI / 2),
+    // https://easings.net/#easeOutSine
+    last: true
+  });
+};
+var med = (A, B) => {
+  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
+};
+var TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
+var getSvgPathFromStroke = (points) => {
+  if (!points.length) {
+    return "";
+  }
+  const max = points.length - 1;
+  return points.reduce(
+    (acc, point, i, arr) => {
+      if (i === max) {
+        acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
+      } else {
+        acc.push(point, med(point, arr[i + 1]));
+      }
+      return acc;
+    },
+    ["M", points[0], "Q"]
+  ).join(" ").replace(TO_FIXED_PRECISION, "$1");
+};
 
 // ../element/src/mutateElement.ts
 var newElementWith9 = (element, updates, force = false) => {
@@ -21588,8 +21602,8 @@ var snapResizingElements = (selectedElements, selectedOriginalElements, app, eve
     snapLines: pointSnapLines
   };
 };
-var snapNewElement = (newElement6, app, event, origin, dragOffset, elementsMap) => {
-  if (!isSnappingEnabled({ event, selectedElements: [newElement6], app })) {
+var snapNewElement = (newElement5, app, event, origin, dragOffset, elementsMap) => {
+  if (!isSnappingEnabled({ event, selectedElements: [newElement5], app })) {
     return {
       snapOffset: { x: 0, y: 0 },
       snapLines: []
@@ -21606,7 +21620,7 @@ var snapNewElement = (newElement6, app, event, origin, dragOffset, elementsMap)
   const nearestSnapsX = [];
   const nearestSnapsY = [];
   getPointSnaps(
-    [newElement6],
+    [newElement5],
     selectionSnapPoints,
     app,
     event,
@@ -21622,12 +21636,12 @@ var snapNewElement = (newElement6, app, event, origin, dragOffset, elementsMap)
   minOffset.y = 0;
   nearestSnapsX.length = 0;
   nearestSnapsY.length = 0;
-  const corners = getElementsCorners([newElement6], elementsMap, {
+  const corners = getElementsCorners([newElement5], elementsMap, {
     boundingBoxCorners: true,
     omitCenter: true
   });
   getPointSnaps(
-    [newElement6],
+    [newElement5],
     corners,
     app,
     event,
@@ -21702,533 +21716,9 @@ var isActiveToolNonLinearSnappable = (activeToolType) => {
   return activeToolType === TOOL_TYPE.rectangle || activeToolType === TOOL_TYPE.ellipse || activeToolType === TOOL_TYPE.diamond || activeToolType === TOOL_TYPE.frame || activeToolType === TOOL_TYPE.magicframe || activeToolType === TOOL_TYPE.image || activeToolType === TOOL_TYPE.text;
 };
 
-// data/transform.ts
-import { pointFrom as pointFrom21 } from "@excalidraw/math";
-import {
-  DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY5,
-  DEFAULT_FONT_SIZE as DEFAULT_FONT_SIZE6,
-  TEXT_ALIGN as TEXT_ALIGN3,
-  VERTICAL_ALIGN as VERTICAL_ALIGN5,
-  getSizeFromPoints as getSizeFromPoints3,
-  randomId as randomId6,
-  arrayToMap as arrayToMap22,
-  assertNever as assertNever4,
-  cloneJSON as cloneJSON3,
-  getFontString as getFontString7,
-  isDevEnv as isDevEnv7,
-  toBrandedType,
-  getLineHeight as getLineHeight3
-} from "@excalidraw/common";
-import { bindBindingElement as bindBindingElement2 } from "@excalidraw/element";
-import {
-  newArrowElement as newArrowElement2,
-  newElement as newElement4,
-  newFrameElement as newFrameElement2,
-  newImageElement,
-  newLinearElement as newLinearElement3,
-  newMagicFrameElement,
-  newTextElement as newTextElement2
-} from "@excalidraw/element";
-import { measureText as measureText5, normalizeText } from "@excalidraw/element";
-import { isArrowElement as isArrowElement9 } from "@excalidraw/element";
-import { syncInvalidIndices } from "@excalidraw/element";
-import { redrawTextBoundingBox as redrawTextBoundingBox5 } 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 = {
-  width: 100,
-  height: 0
-};
-var DEFAULT_DIMENSION = 100;
-var bindTextToContainer = (container, textProps, scene) => {
-  const textElement = newTextElement2({
-    x: 0,
-    y: 0,
-    textAlign: TEXT_ALIGN3.CENTER,
-    verticalAlign: VERTICAL_ALIGN5.MIDDLE,
-    ...textProps,
-    containerId: container.id,
-    strokeColor: textProps.strokeColor || container.strokeColor
-  });
-  Object.assign(container, {
-    boundElements: (container.boundElements || []).concat({
-      type: "text",
-      id: textElement.id
-    })
-  });
-  redrawTextBoundingBox5(textElement, container, scene);
-  return [container, textElement];
-};
-var bindLinearElementToElement = (linearElement, start2, end, elementStore, scene) => {
-  let startBoundElement;
-  let endBoundElement;
-  Object.assign(linearElement, {
-    startBinding: linearElement?.startBinding || null,
-    endBinding: linearElement.endBinding || null
-  });
-  if (start2) {
-    const width = start2?.width ?? DEFAULT_DIMENSION;
-    const height = start2?.height ?? DEFAULT_DIMENSION;
-    let existingElement;
-    if (start2.id) {
-      existingElement = elementStore.getElement(start2.id);
-      if (!existingElement) {
-        console.error(`No element for start binding with id ${start2.id} found`);
-      }
-    }
-    const startX = start2.x || linearElement.x - width;
-    const startY = start2.y || linearElement.y - height / 2;
-    const startType = existingElement ? existingElement.type : start2.type;
-    if (startType) {
-      if (startType === "text") {
-        let text = "";
-        if (existingElement && existingElement.type === "text") {
-          text = existingElement.text;
-        } else if (start2.type === "text") {
-          text = start2.text;
-        }
-        if (!text) {
-          console.error(
-            `No text found for start binding text element for ${linearElement.id}`
-          );
-        }
-        startBoundElement = newTextElement2({
-          x: startX,
-          y: startY,
-          type: "text",
-          ...existingElement,
-          ...start2,
-          text
-        });
-        Object.assign(startBoundElement, {
-          x: start2.x || linearElement.x - startBoundElement.width,
-          y: start2.y || linearElement.y - startBoundElement.height / 2
-        });
-      } else {
-        switch (startType) {
-          case "rectangle":
-          case "ellipse":
-          case "diamond": {
-            startBoundElement = newElement4({
-              x: startX,
-              y: startY,
-              width,
-              height,
-              ...existingElement,
-              ...start2,
-              type: startType
-            });
-            break;
-          }
-          default: {
-            assertNever4(
-              linearElement,
-              `Unhandled element start type "${start2.type}"`,
-              true
-            );
-          }
-        }
-      }
-      bindBindingElement2(
-        linearElement,
-        startBoundElement,
-        "orbit",
-        "start",
-        scene
-      );
-    }
-  }
-  if (end) {
-    const height = end?.height ?? DEFAULT_DIMENSION;
-    const width = end?.width ?? DEFAULT_DIMENSION;
-    let existingElement;
-    if (end.id) {
-      existingElement = elementStore.getElement(end.id);
-      if (!existingElement) {
-        console.error(`No element for end binding with id ${end.id} found`);
-      }
-    }
-    const endX = end.x || linearElement.x + linearElement.width;
-    const endY = end.y || linearElement.y - height / 2;
-    const endType = existingElement ? existingElement.type : end.type;
-    if (endType) {
-      if (endType === "text") {
-        let text = "";
-        if (existingElement && existingElement.type === "text") {
-          text = existingElement.text;
-        } else if (end.type === "text") {
-          text = end.text;
-        }
-        if (!text) {
-          console.error(
-            `No text found for end binding text element for ${linearElement.id}`
-          );
-        }
-        endBoundElement = newTextElement2({
-          x: endX,
-          y: endY,
-          type: "text",
-          ...existingElement,
-          ...end,
-          text
-        });
-        Object.assign(endBoundElement, {
-          y: end.y || linearElement.y - endBoundElement.height / 2
-        });
-      } else {
-        switch (endType) {
-          case "rectangle":
-          case "ellipse":
-          case "diamond": {
-            endBoundElement = newElement4({
-              x: endX,
-              y: endY,
-              width,
-              height,
-              ...existingElement,
-              ...end,
-              type: endType
-            });
-            break;
-          }
-          default: {
-            assertNever4(
-              linearElement,
-              `Unhandled element end type "${endType}"`,
-              true
-            );
-          }
-        }
-      }
-      bindBindingElement2(
-        linearElement,
-        endBoundElement,
-        "orbit",
-        "end",
-        scene
-      );
-    }
-  }
-  if (linearElement.points.length < 2) {
-    return {
-      linearElement,
-      startBoundElement,
-      endBoundElement
-    };
-  }
-  const endPointIndex = linearElement.points.length - 1;
-  const delta = 0.5;
-  const newPoints = cloneJSON3(linearElement.points);
-  if (linearElement.points[endPointIndex][0] > linearElement.points[endPointIndex - 1][0]) {
-    newPoints[0][0] = delta;
-    newPoints[endPointIndex][0] -= delta;
-  }
-  if (linearElement.points[endPointIndex][0] < linearElement.points[endPointIndex - 1][0]) {
-    newPoints[0][0] = -delta;
-    newPoints[endPointIndex][0] += delta;
-  }
-  if (linearElement.points[endPointIndex][1] > linearElement.points[endPointIndex - 1][1]) {
-    newPoints[0][1] = delta;
-    newPoints[endPointIndex][1] -= delta;
-  }
-  if (linearElement.points[endPointIndex][1] < linearElement.points[endPointIndex - 1][1]) {
-    newPoints[0][1] = -delta;
-    newPoints[endPointIndex][1] += delta;
-  }
-  Object.assign(
-    linearElement,
-    LinearElementEditor8.getNormalizeElementPointsAndCoords({
-      ...linearElement,
-      points: newPoints
-    })
-  );
-  return {
-    linearElement,
-    startBoundElement,
-    endBoundElement
-  };
-};
-var ElementStore = class {
-  constructor() {
-    __publicField(this, "excalidrawElements", /* @__PURE__ */ new Map());
-    __publicField(this, "add", (ele) => {
-      if (!ele) {
-        return;
-      }
-      this.excalidrawElements.set(ele.id, ele);
-    });
-    __publicField(this, "getElements", () => {
-      return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
-    });
-    __publicField(this, "getElementsMap", () => {
-      return toBrandedType(
-        arrayToMap22(this.getElements())
-      );
-    });
-    __publicField(this, "getElement", (id) => {
-      return this.excalidrawElements.get(id);
-    });
-  }
-};
-var convertToExcalidrawElements = (elementsSkeleton, opts) => {
-  if (!elementsSkeleton) {
-    return [];
-  }
-  const elements = cloneJSON3(elementsSkeleton);
-  const elementStore = new ElementStore();
-  const elementsWithIds = /* @__PURE__ */ new Map();
-  const oldToNewElementIdMap = /* @__PURE__ */ new Map();
-  for (const element of elements) {
-    let excalidrawElement;
-    const originalId = element.id;
-    if (opts?.regenerateIds !== false) {
-      Object.assign(element, { id: randomId6() });
-    }
-    switch (element.type) {
-      case "rectangle":
-      case "ellipse":
-      case "diamond": {
-        const width = element?.label?.text && element.width === void 0 ? 0 : element?.width || DEFAULT_DIMENSION;
-        const height = element?.label?.text && element.height === void 0 ? 0 : element?.height || DEFAULT_DIMENSION;
-        excalidrawElement = newElement4({
-          ...element,
-          width,
-          height
-        });
-        break;
-      }
-      case "line": {
-        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
-        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
-        excalidrawElement = newLinearElement3({
-          width,
-          height,
-          points: [pointFrom21(0, 0), pointFrom21(width, height)],
-          ...element
-        });
-        break;
-      }
-      case "arrow": {
-        const width = element.width || DEFAULT_LINEAR_ELEMENT_PROPS.width;
-        const height = element.height || DEFAULT_LINEAR_ELEMENT_PROPS.height;
-        excalidrawElement = newArrowElement2({
-          width,
-          height,
-          endArrowhead: "arrow",
-          points: [pointFrom21(0, 0), pointFrom21(width, height)],
-          ...element,
-          type: "arrow"
-        });
-        Object.assign(
-          excalidrawElement,
-          getSizeFromPoints3(excalidrawElement.points)
-        );
-        break;
-      }
-      case "text": {
-        const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY5;
-        const fontSize = element?.fontSize || DEFAULT_FONT_SIZE6;
-        const lineHeight = element?.lineHeight || getLineHeight3(fontFamily);
-        const text = element.text ?? "";
-        const normalizedText = normalizeText(text);
-        const metrics = measureText5(
-          normalizedText,
-          getFontString7({ fontFamily, fontSize }),
-          lineHeight
-        );
-        excalidrawElement = newTextElement2({
-          width: metrics.width,
-          height: metrics.height,
-          fontFamily,
-          fontSize,
-          ...element
-        });
-        break;
-      }
-      case "image": {
-        excalidrawElement = newImageElement({
-          width: element?.width || DEFAULT_DIMENSION,
-          height: element?.height || DEFAULT_DIMENSION,
-          ...element
-        });
-        break;
-      }
-      case "frame": {
-        excalidrawElement = newFrameElement2({
-          x: 0,
-          y: 0,
-          ...element
-        });
-        break;
-      }
-      case "magicframe": {
-        excalidrawElement = newMagicFrameElement({
-          x: 0,
-          y: 0,
-          ...element
-        });
-        break;
-      }
-      case "freedraw":
-      case "iframe":
-      case "embeddable": {
-        excalidrawElement = element;
-        break;
-      }
-      default: {
-        excalidrawElement = element;
-        assertNever4(
-          element,
-          `Unhandled element type "${element.type}"`,
-          true
-        );
-      }
-    }
-    const existingElement = elementStore.getElement(excalidrawElement.id);
-    if (existingElement) {
-      console.error(`Duplicate id found for ${excalidrawElement.id}`);
-    } else {
-      elementStore.add(excalidrawElement);
-      elementsWithIds.set(excalidrawElement.id, element);
-      if (originalId) {
-        oldToNewElementIdMap.set(originalId, excalidrawElement.id);
-      }
-    }
-  }
-  const elementsMap = elementStore.getElementsMap();
-  const scene = new Scene(elementsMap);
-  for (const [id, element] of elementsWithIds) {
-    const excalidrawElement = elementStore.getElement(id);
-    switch (element.type) {
-      case "rectangle":
-      case "ellipse":
-      case "diamond":
-      case "arrow": {
-        if (element.label?.text) {
-          let [container, text] = bindTextToContainer(
-            excalidrawElement,
-            element?.label,
-            scene
-          );
-          elementStore.add(container);
-          elementStore.add(text);
-          if (isArrowElement9(container)) {
-            const originalStart = element.type === "arrow" ? element?.start : void 0;
-            const originalEnd = element.type === "arrow" ? element?.end : void 0;
-            if (originalStart && originalStart.id) {
-              const newStartId = oldToNewElementIdMap.get(originalStart.id);
-              if (newStartId) {
-                Object.assign(originalStart, { id: newStartId });
-              }
-            }
-            if (originalEnd && originalEnd.id) {
-              const newEndId = oldToNewElementIdMap.get(originalEnd.id);
-              if (newEndId) {
-                Object.assign(originalEnd, { id: newEndId });
-              }
-            }
-            const { linearElement, startBoundElement, endBoundElement } = bindLinearElementToElement(
-              container,
-              originalStart,
-              originalEnd,
-              elementStore,
-              scene
-            );
-            container = linearElement;
-            elementStore.add(linearElement);
-            elementStore.add(startBoundElement);
-            elementStore.add(endBoundElement);
-          }
-        } else {
-          switch (element.type) {
-            case "arrow": {
-              const { start: start2, end } = element;
-              if (start2 && start2.id) {
-                const newStartId = oldToNewElementIdMap.get(start2.id);
-                Object.assign(start2, { id: newStartId });
-              }
-              if (end && end.id) {
-                const newEndId = oldToNewElementIdMap.get(end.id);
-                Object.assign(end, { id: newEndId });
-              }
-              const { linearElement, startBoundElement, endBoundElement } = bindLinearElementToElement(
-                excalidrawElement,
-                start2,
-                end,
-                elementStore,
-                scene
-              );
-              elementStore.add(linearElement);
-              elementStore.add(startBoundElement);
-              elementStore.add(endBoundElement);
-              break;
-            }
-          }
-        }
-        break;
-      }
-    }
-  }
-  for (const [id, element] of elementsWithIds) {
-    if (element.type !== "frame" && element.type !== "magicframe") {
-      continue;
-    }
-    const frame = elementStore.getElement(id);
-    if (!frame) {
-      throw new Error(`Excalidraw element with id ${id} doesn't exist`);
-    }
-    const childrenElements = [];
-    element.children.forEach((id2) => {
-      const newElementId = oldToNewElementIdMap.get(id2);
-      if (!newElementId) {
-        throw new Error(`Element with ${id2} wasn't mapped correctly`);
-      }
-      const elementInFrame = elementStore.getElement(newElementId);
-      if (!elementInFrame) {
-        throw new Error(`Frame element with id ${newElementId} doesn't exist`);
-      }
-      Object.assign(elementInFrame, { frameId: frame.id });
-      elementInFrame?.boundElements?.forEach((boundElement) => {
-        const ele = elementStore.getElement(boundElement.id);
-        if (!ele) {
-          throw new Error(
-            `Bound element with id ${boundElement.id} doesn't exist`
-          );
-        }
-        Object.assign(ele, { frameId: frame.id });
-        childrenElements.push(ele);
-      });
-      childrenElements.push(elementInFrame);
-    });
-    let [minX, minY, maxX, maxY] = getCommonBounds5(childrenElements);
-    const PADDING = 10;
-    minX = minX - PADDING;
-    minY = minY - PADDING;
-    maxX = maxX + PADDING;
-    maxY = maxY + PADDING;
-    const frameX = frame?.x || minX;
-    const frameY = frame?.y || minY;
-    const frameWidth = frame?.width || maxX - minX;
-    const frameHeight = frame?.height || maxY - minY;
-    Object.assign(frame, {
-      x: frameX,
-      y: frameY,
-      width: frameWidth,
-      height: frameHeight
-    });
-    if (isDevEnv7() && element.children.length && (frame?.x || frame?.y || frame?.width || frame?.height)) {
-      console.info(
-        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically"
-      );
-    }
-  }
-  return elementStore.getElements();
-};
-
 // scene/Renderer.ts
 import { isElementInViewport as isElementInViewport2 } from "@excalidraw/element";
-import { memoize, toBrandedType as toBrandedType2 } from "@excalidraw/common";
+import { memoize, toBrandedType } from "@excalidraw/common";
 var Renderer = class {
   constructor(scene) {
     __publicField(this, "scene");
@@ -22268,7 +21758,7 @@ var Renderer = class {
         editingTextElement,
         newElementId
       }) => {
-        const elementsMap = toBrandedType2(/* @__PURE__ */ new Map());
+        const elementsMap = toBrandedType(/* @__PURE__ */ new Map());
         for (const element of elements) {
           if (newElementId === element.id) {
             continue;
@@ -22636,23 +22126,25 @@ import {
   KEYS as KEYS44,
   CLASSES as CLASSES5,
   POINTER_BUTTON,
+  THEME as THEME11,
   isWritableElement as isWritableElement4,
-  getFontString as getFontString8,
+  getFontString as getFontString7,
   getFontFamilyString as getFontFamilyString3,
   isTestEnv as isTestEnv4,
-  MIME_TYPES as MIME_TYPES8
+  MIME_TYPES as MIME_TYPES8,
+  applyDarkModeFilter as applyDarkModeFilter3
 } from "@excalidraw/common";
 import {
   originalContainerCache,
   updateOriginalContainerCache as updateOriginalContainerCache3
 } from "@excalidraw/element";
-import { LinearElementEditor as LinearElementEditor9 } from "@excalidraw/element";
+import { LinearElementEditor as LinearElementEditor8 } from "@excalidraw/element";
 import { bumpVersion as bumpVersion2 } from "@excalidraw/element";
 import {
   getBoundTextElementId,
   getContainerElement as getContainerElement3,
   getTextElementAngle,
-  redrawTextBoundingBox as redrawTextBoundingBox6,
+  redrawTextBoundingBox as redrawTextBoundingBox5,
   getBoundTextMaxHeight as getBoundTextMaxHeight3,
   getBoundTextMaxWidth as getBoundTextMaxWidth3,
   computeContainerDimensionForBoundText as computeContainerDimensionForBoundText2,
@@ -22660,10 +22152,10 @@ import {
   getBoundTextElement as getBoundTextElement6
 } from "@excalidraw/element";
 import { getTextWidth } from "@excalidraw/element";
-import { normalizeText as normalizeText2 } from "@excalidraw/element";
+import { normalizeText } from "@excalidraw/element";
 import { wrapText as wrapText3 } from "@excalidraw/element";
 import {
-  isArrowElement as isArrowElement10,
+  isArrowElement as isArrowElement9,
   isBoundToContainer as isBoundToContainer7,
   isTextElement as isTextElement10
 } from "@excalidraw/element";
@@ -22724,8 +22216,8 @@ var textWysiwyg = ({
       let maxWidth = updatedTextElement.width;
       let maxHeight = updatedTextElement.height;
       if (container && updatedTextElement.containerId) {
-        if (isArrowElement10(container)) {
-          const boundTextCoords = LinearElementEditor9.getBoundTextElementPosition(
+        if (isArrowElement9(container)) {
+          const boundTextCoords = LinearElementEditor8.getBoundTextElementPosition(
             container,
             updatedTextElement,
             elementsMap
@@ -22757,7 +22249,7 @@ var textWysiwyg = ({
           container,
           updatedTextElement
         );
-        if (!isArrowElement10(container) && height > maxHeight) {
+        if (!isArrowElement9(container) && height > maxHeight) {
           const targetContainerHeight = computeContainerDimensionForBoundText2(
             height,
             container.type
@@ -22767,7 +22259,7 @@ var textWysiwyg = ({
         } else if (
           // autoshrink container height until original container height
           // is reached when text is removed
-          !isArrowElement10(container) && container.height > originalContainerData.height && height < maxHeight
+          !isArrowElement9(container) && container.height > originalContainerData.height && height < maxHeight
         ) {
           const targetContainerHeight = computeContainerDimensionForBoundText2(
             height,
@@ -22792,7 +22284,7 @@ var textWysiwyg = ({
         width += 0.5;
       }
       height *= 1.05;
-      const font = getFontString8(updatedTextElement);
+      const font = getFontString7(updatedTextElement);
       const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
       Object.assign(editable.style, {
         font,
@@ -22812,9 +22304,8 @@ var textWysiwyg = ({
         ),
         textAlign,
         verticalAlign,
-        color: updatedTextElement.strokeColor,
+        color: appState.theme === THEME11.DARK ? applyDarkModeFilter3(updatedTextElement.strokeColor) : updatedTextElement.strokeColor,
         opacity: updatedTextElement.opacity / 100,
-        filter: "var(--theme-filter)",
         maxHeight: `${editorMaxHeight}px`
       });
       editable.scrollTop = 0;
@@ -22866,7 +22357,7 @@ var textWysiwyg = ({
       if (!textItem) {
         return;
       }
-      const text = normalizeText2(textItem.value);
+      const text = normalizeText(textItem.value);
       if (!text) {
         return;
       }
@@ -22874,7 +22365,7 @@ var textWysiwyg = ({
         element,
         app.scene.getNonDeletedElementsMap()
       );
-      const font = getFontString8({
+      const font = getFontString7({
         fontSize: app.state.currentItemFontSize,
         fontFamily: app.state.currentItemFontFamily
       });
@@ -22893,7 +22384,7 @@ var textWysiwyg = ({
       }
     };
     editable.oninput = () => {
-      const normalized = normalizeText2(editable.value);
+      const normalized = normalizeText(editable.value);
       if (editable.value !== normalized) {
         const selectionStart = editable.selectionStart;
         editable.value = normalized;
@@ -23044,7 +22535,7 @@ var textWysiwyg = ({
               id: element.id
             })
           });
-        } else if (isArrowElement10(container)) {
+        } else if (isArrowElement9(container)) {
           bumpVersion2(container);
         }
       } else {
@@ -23056,7 +22547,7 @@ var textWysiwyg = ({
           )
         });
       }
-      redrawTextBoundingBox6(updateElement, container, app.scene);
+      redrawTextBoundingBox5(updateElement, container, app.scene);
     }
     onSubmit({
       viaKeyboard: submittedViaKeyboard,
@@ -23160,7 +22651,7 @@ var textWysiwyg = ({
 
 // scene/scrollbars.ts
 import { getGlobalCSSVariable } from "@excalidraw/common";
-import { getCommonBounds as getCommonBounds6 } from "@excalidraw/element";
+import { getCommonBounds as getCommonBounds5 } from "@excalidraw/element";
 var SCROLLBAR_MARGIN = 4;
 var SCROLLBAR_WIDTH = 6;
 var SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
@@ -23171,7 +22662,7 @@ var getScrollBars = (elements, viewportWidth, viewportHeight, appState) => {
       vertical: null
     };
   }
-  const [elementsMinX, elementsMinY, elementsMaxX, elementsMaxY] = getCommonBounds6(elements);
+  const [elementsMinX, elementsMinY, elementsMaxX, elementsMaxY] = getCommonBounds5(elements);
   const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
   const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
   const safeArea = {
@@ -23259,10 +22750,10 @@ var isMaybeMermaidDefinition = (text) => {
 
 // lasso/index.ts
 import {
-  pointFrom as pointFrom22
+  pointFrom as pointFrom21
 } from "@excalidraw/math";
 import { getElementLineSegments as getElementLineSegments2 } from "@excalidraw/element";
-import { LinearElementEditor as LinearElementEditor10 } from "@excalidraw/element";
+import { LinearElementEditor as LinearElementEditor9 } from "@excalidraw/element";
 import {
   isFrameLikeElement as isFrameLikeElement9,
   isLinearElement as isLinearElement9,
@@ -23271,7 +22762,7 @@ import {
 import { getFrameChildren as getFrameChildren4 } from "@excalidraw/element";
 import { selectGroupsForSelectedElements as selectGroupsForSelectedElements5 } from "@excalidraw/element";
 import { getContainerElement as getContainerElement4 } from "@excalidraw/element";
-import { arrayToMap as arrayToMap23, easeOut as easeOut2, isShallowEqual as isShallowEqual4 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap22, easeOut as easeOut2, isShallowEqual as isShallowEqual4 } from "@excalidraw/common";
 
 // lasso/utils.ts
 import { simplify as simplify2 } from "points-on-curve";
@@ -23443,7 +22934,7 @@ var LassoTrail = class extends AnimatedTrail {
         return {
           selectedElementIds: nextSelection.selectedElementIds,
           selectedGroupIds: nextSelection.selectedGroupIds,
-          selectedLinearElement: selectedIds.length === 1 && !selectedGroupIds.length && isLinearElement9(this.app.scene.getNonDeletedElement(selectedIds[0])) ? new LinearElementEditor10(
+          selectedLinearElement: selectedIds.length === 1 && !selectedGroupIds.length && isLinearElement9(this.app.scene.getNonDeletedElement(selectedIds[0])) ? new LinearElementEditor9(
             this.app.scene.getNonDeletedElement(
               selectedIds[0]
             ),
@@ -23458,7 +22949,7 @@ var LassoTrail = class extends AnimatedTrail {
       this.updateSelection();
     });
     __publicField(this, "updateSelection", () => {
-      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom22(p[0], p[1]));
+      const lassoPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom21(p[0], p[1]));
       const currentCanvasTranslate = {
         scrollX: this.app.state.scrollX,
         scrollY: this.app.state.scrollY,
@@ -23467,7 +22958,7 @@ var LassoTrail = class extends AnimatedTrail {
       if (!this.elementsSegments || !isShallowEqual4(currentCanvasTranslate, this.canvasTranslate ?? {})) {
         this.canvasTranslate = currentCanvasTranslate;
         this.elementsSegments = /* @__PURE__ */ new Map();
-        const visibleElementsMap = arrayToMap23(this.app.visibleElements);
+        const visibleElementsMap = arrayToMap22(this.app.visibleElements);
         for (const element of this.app.visibleElements) {
           const segments = getElementLineSegments2(element, visibleElementsMap);
           this.elementsSegments.set(element.id, segments);
@@ -23511,7 +23002,7 @@ var LassoTrail = class extends AnimatedTrail {
 };
 
 // eraser/index.ts
-import { arrayToMap as arrayToMap24, easeOut as easeOut3, THEME as THEME10 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap23, easeOut as easeOut3, THEME as THEME12 } from "@excalidraw/common";
 import {
   computeBoundTextPosition as computeBoundTextPosition4,
   doBoundsIntersect as doBoundsIntersect3,
@@ -23521,7 +23012,7 @@ import {
   getFreedrawOutlineAsSegments,
   getFreedrawOutlinePoints as getFreedrawOutlinePoints2,
   intersectElementWithLineSegment as intersectElementWithLineSegment3,
-  isArrowElement as isArrowElement11,
+  isArrowElement as isArrowElement10,
   isFreeDrawElement as isFreeDrawElement4,
   isLineElement as isLineElement5,
   isPointInElement as isPointInElement2
@@ -23529,7 +23020,7 @@ import {
 import {
   lineSegment as lineSegment9,
   lineSegmentsDistance,
-  pointFrom as pointFrom23,
+  pointFrom as pointFrom22,
   polygon as polygon2,
   polygonIncludesPointNonZero as polygonIncludesPointNonZero2
 } from "@excalidraw/math";
@@ -23553,7 +23044,7 @@ var EraserTrail = class extends AnimatedTrail {
         const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
         return Math.min(easeOut3(l), easeOut3(t2));
       },
-      fill: () => app.state.theme === THEME10.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
+      fill: () => app.state.theme === THEME12.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
     });
     __publicField(this, "elementsToErase", /* @__PURE__ */ new Set());
     __publicField(this, "groupsToErase", /* @__PURE__ */ new Set());
@@ -23563,13 +23054,13 @@ var EraserTrail = class extends AnimatedTrail {
     super.startPath(x, y);
     this.elementsToErase.clear();
   }
-  addPointToPath(x, y, restore2 = false) {
+  addPointToPath(x, y, restore = false) {
     super.addPointToPath(x, y);
-    const elementsToEraser = this.updateElementsToBeErased(restore2);
+    const elementsToEraser = this.updateElementsToBeErased(restore);
     return elementsToEraser;
   }
   updateElementsToBeErased(restoreToErase) {
-    const eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom23(p[0], p[1])) || [];
+    const eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom22(p[0], p[1])) || [];
     if (eraserPath.length < 2) {
       return [];
     }
@@ -23580,7 +23071,7 @@ var EraserTrail = class extends AnimatedTrail {
     const candidateElements = this.app.visibleElements.filter(
       (el) => !el.locked
     );
-    const candidateElementsMap = arrayToMap24(candidateElements);
+    const candidateElementsMap = arrayToMap23(candidateElements);
     for (const element of candidateElements) {
       if (restoreToErase && this.elementsToErase.has(element.id)) {
         const intersects = eraserTest(
@@ -23690,7 +23181,7 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
     }
     const poly = polygon2(
       ...outlinePoints.map(
-        ([x, y]) => pointFrom23(element.x + x, element.y + y)
+        ([x, y]) => pointFrom22(element.x + x, element.y + y)
       )
     );
     if (polygonIncludesPointNonZero2(pathSegment[0], poly)) {
@@ -23699,7 +23190,7 @@ var eraserTest = (pathSegment, element, elementsMap, zoom) => {
     return false;
   }
   const boundTextElement = getBoundTextElement8(element, elementsMap);
-  if (isArrowElement11(element) || isLineElement5(element) && !element.polygon) {
+  if (isArrowElement10(element) || isLineElement5(element) && !element.polygon) {
     const tolerance = Math.max(
       element.strokeWidth,
       element.strokeWidth * 2 / zoom
@@ -24011,7 +23502,7 @@ import {
   CLASSES as CLASSES8,
   DEFAULT_SIDEBAR as DEFAULT_SIDEBAR6,
   TOOL_TYPE as TOOL_TYPE2,
-  arrayToMap as arrayToMap25,
+  arrayToMap as arrayToMap24,
   capitalizeString as capitalizeString5,
   isShallowEqual as isShallowEqual6
 } from "@excalidraw/common";
@@ -24022,7 +23513,7 @@ import { ShapeCache as ShapeCache3 } from "@excalidraw/element";
 // components/LoadingMessage.tsx
 import clsx38 from "clsx";
 import { useState as useState26, useEffect as useEffect31 } from "react";
-import { THEME as THEME11 } from "@excalidraw/common";
+import { THEME as THEME13 } from "@excalidraw/common";
 import { jsx as jsx83, jsxs as jsxs46 } from "react/jsx-runtime";
 var LoadingMessage = ({
   delay,
@@ -24045,7 +23536,7 @@ var LoadingMessage = ({
     "div",
     {
       className: clsx38("LoadingMessage", {
-        "LoadingMessage--dark": theme === THEME11.DARK
+        "LoadingMessage--dark": theme === THEME13.DARK
       }),
       children: [
         /* @__PURE__ */ jsx83("div", { children: /* @__PURE__ */ jsx83(Spinner_default, {}) }),
@@ -25112,7 +24603,7 @@ import {
 import {
   CLASSES as CLASSES6,
   EVENT as EVENT11,
-  isDevEnv as isDevEnv8,
+  isDevEnv as isDevEnv7,
   KEYS as KEYS48,
   updateObject
 } from "@excalidraw/common";
@@ -25300,7 +24791,7 @@ var SidebarInner = forwardRef4(
     className,
     ...rest
   }, ref) => {
-    if (isDevEnv8() && onDock && docked == null) {
+    if (isDevEnv7() && onDock && docked == null) {
       console.warn(
         "Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`"
       );
@@ -25491,7 +24982,7 @@ __export(DefaultItems_exports, {
   ToggleTheme: () => ToggleTheme
 });
 import clsx50 from "clsx";
-import { THEME as THEME12 } from "@excalidraw/common";
+import { THEME as THEME14 } from "@excalidraw/common";
 
 // components/OverwriteConfirm/OverwriteConfirmState.ts
 var overwriteConfirmStateAtom = atom({
@@ -25746,12 +25237,12 @@ var ToggleTheme = (props) => {
         onChange: (value) => props.onSelect(value),
         choices: [
           {
-            value: THEME12.LIGHT,
+            value: THEME14.LIGHT,
             label: SunIcon,
             ariaLabel: `${t2("buttons.lightMode")} - ${shortcut}`
           },
           {
-            value: THEME12.DARK,
+            value: THEME14.DARK,
             label: MoonIcon,
             ariaLabel: `${t2("buttons.darkMode")} - ${shortcut}`
           },
@@ -25772,17 +25263,17 @@ var ToggleTheme = (props) => {
         event.preventDefault();
         if (props?.onSelect) {
           props.onSelect(
-            appState.theme === THEME12.DARK ? THEME12.LIGHT : THEME12.DARK
+            appState.theme === THEME14.DARK ? THEME14.LIGHT : THEME14.DARK
           );
         } else {
           return actionManager.executeAction(actionToggleTheme);
         }
       },
-      icon: appState.theme === THEME12.DARK ? SunIcon : MoonIcon,
+      icon: appState.theme === THEME14.DARK ? SunIcon : MoonIcon,
       "data-testid": "toggle-dark-mode",
       shortcut,
-      "aria-label": appState.theme === THEME12.DARK ? t2("buttons.lightMode") : t2("buttons.darkMode"),
-      children: appState.theme === THEME12.DARK ? t2("buttons.lightMode") : t2("buttons.darkMode")
+      "aria-label": appState.theme === THEME14.DARK ? t2("buttons.lightMode") : t2("buttons.darkMode"),
+      children: appState.theme === THEME14.DARK ? t2("buttons.lightMode") : t2("buttons.darkMode")
     }
   );
 };
@@ -26153,17 +25644,17 @@ import {
   EVENT as EVENT12,
   FONT_FAMILY as FONT_FAMILY4,
   FRAME_STYLE as FRAME_STYLE2,
-  getLineHeight as getLineHeight4
+  getLineHeight as getLineHeight3
 } from "@excalidraw/common";
 import { isElementCompletelyInViewport } from "@excalidraw/element";
-import { measureText as measureText6 } from "@excalidraw/element";
+import { measureText as measureText5 } from "@excalidraw/element";
 import {
   KEYS as KEYS49,
   randomInteger as randomInteger3,
   addEventListener as addEventListener2,
-  getFontString as getFontString9
+  getFontString as getFontString8
 } from "@excalidraw/common";
-import { newTextElement as newTextElement3 } from "@excalidraw/element";
+import { newTextElement as newTextElement2 } from "@excalidraw/element";
 import { isTextElement as isTextElement12, isFrameLikeElement as isFrameLikeElement10 } from "@excalidraw/element";
 import { getDefaultFrameName } from "@excalidraw/element/frame";
 import { Fragment as Fragment18, jsx as jsx110, jsxs as jsxs64 } from "react/jsx-runtime";
@@ -26263,7 +25754,7 @@ var SearchMenu2 = () => {
       const match = searchMatches.items[focusIndex];
       if (match) {
         const zoomValue = app.state.zoom.value;
-        const matchAsElement = newTextElement3({
+        const matchAsElement = newTextElement2({
           text: match.searchQuery,
           x: match.element.x + (match.matchedLines[0]?.offsetX ?? 0),
           y: match.element.y + (match.matchedLines[0]?.offsetY ?? 0),
@@ -26622,26 +26113,26 @@ var getMatchedLines = (textElement, searchQuery, index) => {
       );
       const matchedWord = remainingQuery.slice(0, matchCapacity);
       remainingQuery = remainingQuery.slice(matchCapacity);
-      const offset = measureText6(
+      const offset = measureText5(
         textToStart,
-        getFontString9(textElement),
+        getFontString8(textElement),
         textElement.lineHeight
       );
       if (textToStart === "") {
         offset.width = 0;
       }
       if (textElement.textAlign !== "left" && lineIndexRange.line.length > 0) {
-        const lineLength = measureText6(
+        const lineLength = measureText5(
           lineIndexRange.line,
-          getFontString9(textElement),
+          getFontString8(textElement),
           textElement.lineHeight
         );
         const spaceToStart = textElement.textAlign === "center" ? (textElement.width - lineLength.width) / 2 : textElement.width - lineLength.width;
         offset.width += spaceToStart;
       }
-      const { width, height } = measureText6(
+      const { width, height } = measureText5(
         matchedWord,
-        getFontString9(textElement),
+        getFontString8(textElement),
         textElement.lineHeight
       );
       const offsetX = offset.width;
@@ -26662,16 +26153,16 @@ var getMatchInFrame = (frame, searchQuery, index, zoomValue) => {
   const text = frame.name ?? getDefaultFrameName(frame);
   const matchedText = text.slice(index, index + searchQuery.length);
   const prefixText = text.slice(0, index);
-  const font = getFontString9({
+  const font = getFontString8({
     fontSize: FRAME_STYLE2.nameFontSize,
     fontFamily: FONT_FAMILY4.Assistant
   });
-  const lineHeight = getLineHeight4(FONT_FAMILY4.Assistant);
-  const offset = measureText6(prefixText, font, lineHeight);
+  const lineHeight = getLineHeight3(FONT_FAMILY4.Assistant);
+  const offset = measureText5(prefixText, font, lineHeight);
   if (prefixText === "") {
     offset.width = 0;
   }
-  const matchedMetrics = measureText6(matchedText, font, lineHeight);
+  const matchedMetrics = measureText5(matchedText, font, lineHeight);
   const offsetX = offset.width;
   const offsetY = -offset.height - FRAME_STYLE2.strokeWidth;
   const width = matchedMetrics.width;
@@ -26838,7 +26329,7 @@ import { isFiniteNumber } from "@excalidraw/math";
 
 // components/TTDDialog/MermaidToExcalidraw.tsx
 import { useState as useState32, useRef as useRef31, useEffect as useEffect36, useDeferredValue } from "react";
-import { EDITOR_LS_KEYS as EDITOR_LS_KEYS3, debounce as debounce3, isDevEnv as isDevEnv9 } from "@excalidraw/common";
+import { EDITOR_LS_KEYS as EDITOR_LS_KEYS3, debounce as debounce3, isDevEnv as isDevEnv8 } from "@excalidraw/common";
 
 // components/TTDDialog/TTDDialogInput.tsx
 import { useEffect as useEffect35, useRef as useRef30 } from "react";
@@ -27039,7 +26530,11 @@ var convertMermaidToExcalidraw = async ({
       elements: data.current.elements,
       files: data.current.files,
       exportPadding: DEFAULT_EXPORT_PADDING3,
-      maxWidthOrHeight: Math.max(parent.offsetWidth, parent.offsetHeight) * window.devicePixelRatio
+      maxWidthOrHeight: Math.max(parent.offsetWidth, parent.offsetHeight) * window.devicePixelRatio,
+      appState: {
+        // TODO hack (will be refactored in TTD v2)
+        exportWithDarkMode: document.querySelector(".excalidraw-container")?.classList.contains("theme--dark")
+      }
     });
     try {
       await canvasToBlob(canvas);
@@ -27110,7 +26605,7 @@ var MermaidToExcalidraw = ({
       setError,
       mermaidDefinition: deferredText
     }).catch((err) => {
-      if (isDevEnv9()) {
+      if (isDevEnv8()) {
         console.error("Failed to parse mermaid definition", err);
       }
     });
@@ -27551,7 +27046,7 @@ import clsx56 from "clsx";
 import throttle2 from "lodash.throttle";
 import { useEffect as useEffect39, useMemo as useMemo11, useState as useState35, memo as memo5 } from "react";
 import { STATS_PANELS } from "@excalidraw/common";
-import { getCommonBounds as getCommonBounds9 } from "@excalidraw/element";
+import { getCommonBounds as getCommonBounds8 } from "@excalidraw/element";
 import { getUncroppedWidthAndHeight as getUncroppedWidthAndHeight3 } from "@excalidraw/element";
 import { isImageElement as isImageElement6 } from "@excalidraw/element";
 import { frameAndChildrenSelectedTogether as frameAndChildrenSelectedTogether2 } from "@excalidraw/element";
@@ -27560,18 +27055,18 @@ import { elementsAreInSameGroup as elementsAreInSameGroup2 } from "@excalidraw/e
 // components/Stats/Angle.tsx
 import { degreesToRadians as degreesToRadians2, radiansToDegrees } from "@excalidraw/math";
 import { getBoundTextElement as getBoundTextElement10 } from "@excalidraw/element";
-import { isArrowElement as isArrowElement12, isElbowArrow as isElbowArrow8 } from "@excalidraw/element";
+import { isArrowElement as isArrowElement11, isElbowArrow as isElbowArrow8 } from "@excalidraw/element";
 import { updateBindings as updateBindings3 } from "@excalidraw/element";
 
 // components/Stats/DragInput.tsx
 import clsx55 from "clsx";
 import { useEffect as useEffect38, useRef as useRef34, useState as useState34 } from "react";
-import { EVENT as EVENT14, KEYS as KEYS51, cloneJSON as cloneJSON4 } from "@excalidraw/common";
+import { EVENT as EVENT14, KEYS as KEYS51, cloneJSON as cloneJSON3 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/element";
 
 // components/Stats/utils.ts
-import { pointFrom as pointFrom24, pointRotateRads as pointRotateRads16 } from "@excalidraw/math";
+import { pointFrom as pointFrom23, pointRotateRads as pointRotateRads16 } from "@excalidraw/math";
 import {
   getBoundTextElement as getBoundTextElement9,
   isBindingElement as isBindingElement3,
@@ -27622,15 +27117,15 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, appState, o
     originalElement.y + originalElement.height / 2
   ];
   const [topLeftX, topLeftY] = pointRotateRads16(
-    pointFrom24(originalElement.x, originalElement.y),
-    pointFrom24(cx, cy),
+    pointFrom23(originalElement.x, originalElement.y),
+    pointFrom23(cx, cy),
     originalElement.angle
   );
   const changeInX = newTopLeftX - topLeftX;
   const changeInY = newTopLeftY - topLeftY;
   const [x, y] = pointRotateRads16(
-    pointFrom24(newTopLeftX, newTopLeftY),
-    pointFrom24(cx + changeInX, cy + changeInY),
+    pointFrom23(newTopLeftX, newTopLeftY),
+    pointFrom23(cx + changeInX, cy + changeInY),
     -originalElement.angle
   );
   scene.mutateElement(
@@ -27672,15 +27167,15 @@ var moveElement = (newTopLeftX, newTopLeftY, originalElement, scene, appState, o
         child.y + child.height / 2
       ];
       const [childTopLeftX, childTopLeftY] = pointRotateRads16(
-        pointFrom24(child.x, child.y),
-        pointFrom24(childCX, childCY),
+        pointFrom23(child.x, child.y),
+        pointFrom23(childCX, childCY),
         child.angle
       );
       const childNewTopLeftX = Math.round(childTopLeftX + changeInX);
       const childNewTopLeftY = Math.round(childTopLeftY + changeInY);
       const [childX, childY] = pointRotateRads16(
-        pointFrom24(childNewTopLeftX, childNewTopLeftY),
-        pointFrom24(childCX + changeInX, childCY + changeInY),
+        pointFrom23(childNewTopLeftX, childNewTopLeftY),
+        pointFrom23(childCX + changeInX, childCY + changeInY),
         -child.angle
       );
       scene.mutateElement(
@@ -27737,7 +27232,7 @@ var StatsDragInput = ({
   const stateRef = useRef34(null);
   if (!stateRef.current) {
     stateRef.current = {
-      originalAppState: cloneJSON4(appState),
+      originalAppState: cloneJSON3(appState),
       originalElements: elements,
       lastUpdatedValue: inputValue,
       updatePending: false
@@ -27845,7 +27340,7 @@ var StatsDragInput = ({
                 let originalElements = elements.map(
                   (element) => originalElementsMap.get(element.id)
                 );
-                const originalAppState = cloneJSON4(appState);
+                const originalAppState = cloneJSON3(appState);
                 let accumulatedChange = 0;
                 let stepChange = 0;
                 const onPointerMove = (event2) => {
@@ -27940,7 +27435,7 @@ var StatsDragInput = ({
             onFocus: (event) => {
               event.target.select();
               stateRef.current.originalElements = elements;
-              stateRef.current.originalAppState = cloneJSON4(appState);
+              stateRef.current.originalAppState = cloneJSON3(appState);
             },
             onBlur: (event) => {
               if (!inputValue) {
@@ -27987,7 +27482,7 @@ var handleDegreeChange = ({
       });
       updateBindings3(latestElement, scene, app.state);
       const boundTextElement2 = getBoundTextElement10(latestElement, elementsMap);
-      if (boundTextElement2 && !isArrowElement12(latestElement)) {
+      if (boundTextElement2 && !isArrowElement11(latestElement)) {
         scene.mutateElement(boundTextElement2, { angle: nextAngle2 });
       }
       return;
@@ -28005,7 +27500,7 @@ var handleDegreeChange = ({
     });
     updateBindings3(latestElement, scene, app.state);
     const boundTextElement = getBoundTextElement10(latestElement, elementsMap);
-    if (boundTextElement && !isArrowElement12(latestElement)) {
+    if (boundTextElement && !isArrowElement11(latestElement)) {
       scene.mutateElement(boundTextElement, { angle: nextAngle });
     }
   }
@@ -28349,7 +27844,7 @@ var Dimension_default = DimensionDragInput;
 // components/Stats/FontSize.tsx
 import {
   getBoundTextElement as getBoundTextElement11,
-  redrawTextBoundingBox as redrawTextBoundingBox7
+  redrawTextBoundingBox as redrawTextBoundingBox6
 } from "@excalidraw/element";
 import { hasBoundTextElement as hasBoundTextElement7, isTextElement as isTextElement13 } from "@excalidraw/element";
 import { jsx as jsx127 } from "react/jsx-runtime";
@@ -28387,7 +27882,7 @@ var handleFontSizeChange = ({
       scene.mutateElement(latestElement, {
         fontSize: nextFontSize
       });
-      redrawTextBoundingBox7(
+      redrawTextBoundingBox6(
         latestElement,
         scene.getContainerElement(latestElement),
         scene
@@ -28419,7 +27914,7 @@ var FontSize_default = FontSize;
 // components/Stats/MultiAngle.tsx
 import { degreesToRadians as degreesToRadians3, radiansToDegrees as radiansToDegrees2 } from "@excalidraw/math";
 import { getBoundTextElement as getBoundTextElement12 } from "@excalidraw/element";
-import { isArrowElement as isArrowElement13 } from "@excalidraw/element";
+import { isArrowElement as isArrowElement12 } from "@excalidraw/element";
 import { isInGroup as isInGroup2 } from "@excalidraw/element";
 import { jsx as jsx128 } from "react/jsx-runtime";
 var STEP_SIZE6 = 15;
@@ -28446,7 +27941,7 @@ var handleDegreeChange2 = ({
         angle: nextAngle
       });
       const boundTextElement = getBoundTextElement12(element, elementsMap);
-      if (boundTextElement && !isArrowElement13(element)) {
+      if (boundTextElement && !isArrowElement12(element)) {
         scene.mutateElement(boundTextElement, { angle: nextAngle });
       }
     }
@@ -28471,7 +27966,7 @@ var handleDegreeChange2 = ({
       angle: nextAngle
     });
     const boundTextElement = getBoundTextElement12(latestElement, elementsMap);
-    if (boundTextElement && !isArrowElement13(latestElement)) {
+    if (boundTextElement && !isArrowElement12(latestElement)) {
       scene.mutateElement(boundTextElement, { angle: nextAngle });
     }
   }
@@ -28511,7 +28006,7 @@ var MultiAngle = ({
 var MultiAngle_default = MultiAngle;
 
 // components/Stats/MultiDimension.tsx
-import { pointFrom as pointFrom25 } from "@excalidraw/math";
+import { pointFrom as pointFrom24 } from "@excalidraw/math";
 import { useMemo as useMemo9 } from "react";
 import { MIN_WIDTH_OR_HEIGHT as MIN_WIDTH_OR_HEIGHT2 } from "@excalidraw/common";
 import {
@@ -28528,7 +28023,7 @@ import { getBoundTextElement as getBoundTextElement13, handleBindTextResize as h
 import { isTextElement as isTextElement14 } from "@excalidraw/element";
 
 // ../utils/src/index.ts
-import { getCommonBounds as getCommonBounds7 } from "@excalidraw/element";
+import { getCommonBounds as getCommonBounds6 } from "@excalidraw/element";
 
 // components/Stats/MultiDimension.tsx
 import { jsx as jsx129 } from "react/jsx-runtime";
@@ -28620,7 +28115,7 @@ var handleDimensionChange2 = ({
       if (elementsInUnit.length > 1) {
         const latestElements = elementsInUnit.map((el) => el.latest);
         const originalElements2 = elementsInUnit.map((el) => el.original);
-        const [x1, y1, x2, y2] = getCommonBounds7(originalElements2);
+        const [x1, y1, x2, y2] = getCommonBounds6(originalElements2);
         const initialWidth = x2 - x1;
         const initialHeight = y2 - y1;
         const aspectRatio = initialWidth / initialHeight;
@@ -28637,7 +28132,7 @@ var handleDimensionChange2 = ({
           nextHeight,
           initialHeight,
           aspectRatio,
-          pointFrom25(x1, y1),
+          pointFrom24(x1, y1),
           property,
           latestElements,
           originalElements2,
@@ -28712,7 +28207,7 @@ var handleDimensionChange2 = ({
     if (elementsInUnit.length > 1) {
       const latestElements = elementsInUnit.map((el) => el.latest);
       const originalElements2 = elementsInUnit.map((el) => el.original);
-      const [x1, y1, x2, y2] = getCommonBounds7(originalElements2);
+      const [x1, y1, x2, y2] = getCommonBounds6(originalElements2);
       const initialWidth = x2 - x1;
       const initialHeight = y2 - y1;
       const aspectRatio = initialWidth / initialHeight;
@@ -28739,7 +28234,7 @@ var handleDimensionChange2 = ({
         nextHeight,
         initialHeight,
         aspectRatio,
-        pointFrom25(x1, y1),
+        pointFrom24(x1, y1),
         property,
         latestElements,
         originalElements2,
@@ -28838,7 +28333,7 @@ var MultiDimension = ({
     () => atomicUnits.map((atomicUnit) => {
       const elementsInUnit = getElementsInAtomicUnit(atomicUnit, elementsMap);
       if (elementsInUnit.length > 1) {
-        const [x1, y1, x2, y2] = getCommonBounds7(
+        const [x1, y1, x2, y2] = getCommonBounds6(
           elementsInUnit.map((el2) => el2.latest)
         );
         return Math.round((property === "width" ? x2 - x1 : y2 - y1) * 100) / 100;
@@ -28872,7 +28367,7 @@ var MultiDimension_default = MultiDimension;
 // components/Stats/MultiFontSize.tsx
 import {
   getBoundTextElement as getBoundTextElement14,
-  redrawTextBoundingBox as redrawTextBoundingBox8
+  redrawTextBoundingBox as redrawTextBoundingBox7
 } from "@excalidraw/element";
 import { hasBoundTextElement as hasBoundTextElement8, isTextElement as isTextElement15 } from "@excalidraw/element";
 import { isInGroup as isInGroup3 } from "@excalidraw/element";
@@ -28917,7 +28412,7 @@ var handleFontSizeChange2 = ({
       scene.mutateElement(textElement, {
         fontSize: nextFontSize
       });
-      redrawTextBoundingBox8(
+      redrawTextBoundingBox7(
         textElement,
         scene.getContainerElement(textElement),
         scene
@@ -28941,7 +28436,7 @@ var handleFontSizeChange2 = ({
       scene.mutateElement(latestElement, {
         fontSize: nextFontSize2
       });
-      redrawTextBoundingBox8(
+      redrawTextBoundingBox7(
         latestElement,
         scene.getContainerElement(latestElement),
         scene
@@ -28984,10 +28479,10 @@ var MultiFontSize = ({
 var MultiFontSize_default = MultiFontSize;
 
 // components/Stats/MultiPosition.tsx
-import { pointFrom as pointFrom26, pointRotateRads as pointRotateRads17 } from "@excalidraw/math";
+import { pointFrom as pointFrom25, pointRotateRads as pointRotateRads17 } from "@excalidraw/math";
 import { useMemo as useMemo10 } from "react";
 import { isTextElement as isTextElement16 } from "@excalidraw/element";
-import { getCommonBounds as getCommonBounds8 } from "@excalidraw/element";
+import { getCommonBounds as getCommonBounds7 } from "@excalidraw/element";
 import { jsx as jsx131 } from "react/jsx-runtime";
 var moveElements = (property, changeInTopX, changeInTopY, originalElements, originalElementsMap, scene, appState) => {
   for (let i = 0; i < originalElements.length; i++) {
@@ -28997,8 +28492,8 @@ var moveElements = (property, changeInTopX, changeInTopY, originalElements, orig
       origElement.y + origElement.height / 2
     ];
     const [topLeftX, topLeftY] = pointRotateRads17(
-      pointFrom26(origElement.x, origElement.y),
-      pointFrom26(cx, cy),
+      pointFrom25(origElement.x, origElement.y),
+      pointFrom25(cx, cy),
       origElement.angle
     );
     const newTopLeftX = property === "x" ? Math.round(topLeftX + changeInTopX) : topLeftX;
@@ -29016,7 +28511,7 @@ var moveElements = (property, changeInTopX, changeInTopY, originalElements, orig
 };
 var moveGroupTo = (nextX, nextY, originalElements, originalElementsMap, scene, appState) => {
   const elementsMap = scene.getNonDeletedElementsMap();
-  const [x1, y1, ,] = getCommonBounds8(originalElements);
+  const [x1, y1, ,] = getCommonBounds7(originalElements);
   const offsetX = nextX - x1;
   const offsetY = nextY - y1;
   for (let i = 0; i < originalElements.length; i++) {
@@ -29031,8 +28526,8 @@ var moveGroupTo = (nextX, nextY, originalElements, originalElementsMap, scene, a
         latestElement.y + latestElement.height / 2
       ];
       const [topLeftX, topLeftY] = pointRotateRads17(
-        pointFrom26(latestElement.x, latestElement.y),
-        pointFrom26(cx, cy),
+        pointFrom25(latestElement.x, latestElement.y),
+        pointFrom25(cx, cy),
         latestElement.angle
       );
       moveElement(
@@ -29070,7 +28565,7 @@ var handlePositionChange = ({
         originalElementsMap
       );
       if (elementsInUnit.length > 1) {
-        const [x1, y1, ,] = getCommonBounds8(
+        const [x1, y1, ,] = getCommonBounds7(
           elementsInUnit.map((el) => el.latest)
         );
         const newTopLeftX = property === "x" ? nextValue : x1;
@@ -29092,8 +28587,8 @@ var handlePositionChange = ({
             origElement.y + origElement.height / 2
           ];
           const [topLeftX, topLeftY] = pointRotateRads17(
-            pointFrom26(origElement.x, origElement.y),
-            pointFrom26(cx, cy),
+            pointFrom25(origElement.x, origElement.y),
+            pointFrom25(cx, cy),
             origElement.angle
           );
           const newTopLeftX = property === "x" ? nextValue : topLeftX;
@@ -29139,14 +28634,14 @@ var MultiPosition = ({
     () => atomicUnits.map((atomicUnit) => {
       const elementsInUnit = Object.keys(atomicUnit).map((id) => elementsMap.get(id)).filter((el2) => el2 !== void 0);
       if (elementsInUnit.length > 1) {
-        const [x1, y1] = getCommonBounds8(elementsInUnit);
+        const [x1, y1] = getCommonBounds7(elementsInUnit);
         return Math.round((property === "x" ? x1 : y1) * 100) / 100;
       }
       const [el] = elementsInUnit;
       const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];
       const [topLeftX, topLeftY] = pointRotateRads17(
-        pointFrom26(el.x, el.y),
-        pointFrom26(cx, cy),
+        pointFrom25(el.x, el.y),
+        pointFrom25(cx, cy),
         el.angle
       );
       return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
@@ -29170,7 +28665,7 @@ var MultiPosition = ({
 var MultiPosition_default = MultiPosition;
 
 // components/Stats/Position.tsx
-import { clamp as clamp6, pointFrom as pointFrom27, pointRotateRads as pointRotateRads18, round as round4 } from "@excalidraw/math";
+import { clamp as clamp6, pointFrom as pointFrom26, pointRotateRads as pointRotateRads18, round as round4 } from "@excalidraw/math";
 import {
   getFlipAdjustedCropPosition,
   getUncroppedWidthAndHeight as getUncroppedWidthAndHeight2
@@ -29196,8 +28691,8 @@ var handlePositionChange2 = ({
     origElement.y + origElement.height / 2
   ];
   const [topLeftX, topLeftY] = pointRotateRads18(
-    pointFrom27(origElement.x, origElement.y),
-    pointFrom27(cx, cy),
+    pointFrom26(origElement.x, origElement.y),
+    pointFrom26(cx, cy),
     origElement.angle
   );
   if (originalAppState.croppingElementId === origElement.id) {
@@ -29298,8 +28793,8 @@ var Position = ({
   appState
 }) => {
   const [topLeftX, topLeftY] = pointRotateRads18(
-    pointFrom27(element.x, element.y),
-    pointFrom27(element.x + element.width / 2, element.y + element.height / 2),
+    pointFrom26(element.x, element.y),
+    pointFrom26(element.x + element.width / 2, element.y + element.height / 2),
     element.angle
   );
   let value = round4(property === "x" ? topLeftX : topLeftY, 2);
@@ -29401,7 +28896,7 @@ var StatsInner = memo5(
     });
     const throttledSetSceneDimension = useMemo11(
       () => throttle2((elements2) => {
-        const boundingBox = getCommonBounds9(elements2);
+        const boundingBox = getCommonBounds8(elements2);
         setSceneDimension({
           width: Math.round(boundingBox[2]) - Math.round(boundingBox[0]),
           height: Math.round(boundingBox[3]) - Math.round(boundingBox[1])
@@ -30548,6 +30043,13 @@ var getHints = ({
       shortcut: getTaggedShortcutKey("Alt")
     });
   }
+  const selectedElements = app.scene.getSelectedElements(appState);
+  if (appState.selectedLinearElement?.isDragging && selectedElements[0]?.type === "arrow") {
+    return t("hints.arrowBindModifiers", {
+      shortcut_1: getTaggedShortcutKey("Ctrl"),
+      shortcut_2: getTaggedShortcutKey("Alt")
+    });
+  }
   if (activeTool.type === "arrow" || activeTool.type === "line") {
     if (multiMode) {
       return t("hints.linearElementMulti", {
@@ -30571,7 +30073,6 @@ var getHints = ({
   if (activeTool.type === "embeddable") {
     return t("hints.embeddable");
   }
-  const selectedElements = app.scene.getSelectedElements(appState);
   if (isResizing && lastPointerDownWith === "mouse" && selectedElements.length === 1) {
     const targetElement = selectedElements[0];
     if (isLinearElement10(targetElement) && targetElement.points.length === 2) {
@@ -30704,7 +30205,7 @@ import {
   EXPORT_IMAGE_TYPES,
   isFirefox as isFirefox4,
   EXPORT_SCALES as EXPORT_SCALES2,
-  cloneJSON as cloneJSON5
+  cloneJSON as cloneJSON4
 } from "@excalidraw/common";
 
 // hooks/useCopiedIndicator.ts
@@ -30761,7 +30262,6 @@ var Switch = ({
 
 // components/ImageExportDialog.tsx
 import { jsx as jsx139, jsxs as jsxs75 } from "react/jsx-runtime";
-var supportsContextFilters = "filter" in document.createElement("canvas").getContext("2d");
 var ErrorCanvasPreview = () => {
   return /* @__PURE__ */ jsxs75("div", { children: [
     /* @__PURE__ */ jsx139("h3", { children: t("canvasError.cannotShowPreview") }),
@@ -30927,7 +30427,7 @@ var ImageExportModal = ({
           )
         }
       ),
-      supportsContextFilters && /* @__PURE__ */ jsx139(
+      /* @__PURE__ */ jsx139(
         ExportSetting,
         {
           label: t("imageExportDialog.label.darkMode"),
@@ -31075,8 +30575,8 @@ var ImageExportDialog = ({
 }) => {
   const [{ appStateSnapshot, elementsSnapshot }] = useState39(() => {
     return {
-      appStateSnapshot: cloneJSON5(appState),
-      elementsSnapshot: cloneJSON5(elements)
+      appStateSnapshot: cloneJSON4(appState),
+      elementsSnapshot: cloneJSON4(elements)
     };
   });
   return /* @__PURE__ */ jsx139(Dialog, { onCloseRequest, size: "wide", title: false, children: /* @__PURE__ */ jsx139(
@@ -31610,7 +31110,7 @@ var LayerUI = ({
           }
           if (selectedElements.length) {
             for (const element of selectedElements) {
-              mutateElement5(element, arrayToMap25(elements), {
+              mutateElement5(element, arrayToMap24(elements), {
                 [altKey && eyeDropperState.swapPreviewOnAlt ? colorPickerType === "elementBackground" ? "strokeColor" : "backgroundColor" : colorPickerType === "elementBackground" ? "backgroundColor" : "strokeColor"]: color
               });
               ShapeCache3.delete(element);
@@ -31727,14 +31227,7 @@ var LayerUI = ({
   return /* @__PURE__ */ jsx143(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx143(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx143(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
 };
 var stripIrrelevantAppStateProps = (appState) => {
-  const {
-    suggestedBinding,
-    startBoundElement,
-    cursorButton,
-    scrollX,
-    scrollY,
-    ...ret
-  } = appState;
+  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } = appState;
   return ret;
 };
 var areEqual2 = (prevProps, nextProps) => {
@@ -31882,18 +31375,18 @@ var AnimationController = _AnimationController;
 // renderer/interactiveScene.ts
 import {
   clamp as clamp7,
-  pointFrom as pointFrom29,
+  pointFrom as pointFrom28,
   pointsEqual as pointsEqual7
 } from "@excalidraw/math";
 import oc3 from "open-color";
 import {
-  arrayToMap as arrayToMap26,
+  arrayToMap as arrayToMap25,
   BIND_MODE_TIMEOUT,
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   FRAME_STYLE as FRAME_STYLE3,
   getFeatureFlag as getFeatureFlag3,
   invariant as invariant15,
-  THEME as THEME14
+  THEME as THEME16
 } from "@excalidraw/common";
 import {
   deconstructDiamondElement as deconstructDiamondElement2,
@@ -31909,7 +31402,7 @@ import {
   isLinearElement as isLinearElement11,
   isLineElement as isLineElement7,
   isTextElement as isTextElement18,
-  LinearElementEditor as LinearElementEditor11
+  LinearElementEditor as LinearElementEditor10
 } from "@excalidraw/element";
 import { renderSelectionElement } from "@excalidraw/element";
 import {
@@ -31918,11 +31411,11 @@ import {
   isSelectedViaGroup,
   selectGroupsFromGivenElements as selectGroupsFromGivenElements3
 } from "@excalidraw/element";
-import { getCommonBounds as getCommonBounds10, getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@excalidraw/element";
+import { getCommonBounds as getCommonBounds9, getElementAbsoluteCoords as getElementAbsoluteCoords7 } from "@excalidraw/element";
 
 // renderer/renderSnaps.ts
-import { pointFrom as pointFrom28 } from "@excalidraw/math";
-import { THEME as THEME13 } from "@excalidraw/common";
+import { pointFrom as pointFrom27 } from "@excalidraw/math";
+import { THEME as THEME15 } from "@excalidraw/common";
 var SNAP_COLOR_LIGHT = "#ff6b6b";
 var SNAP_COLOR_DARK = "#ff0000";
 var SNAP_WIDTH = 1;
@@ -31931,7 +31424,7 @@ var renderSnaps = (context, appState) => {
   if (!appState.snapLines.length) {
     return;
   }
-  const snapColor = appState.theme === THEME13.LIGHT || appState.zenModeEnabled ? SNAP_COLOR_LIGHT : SNAP_COLOR_DARK;
+  const snapColor = appState.theme === THEME15.LIGHT || appState.zenModeEnabled ? SNAP_COLOR_LIGHT : SNAP_COLOR_DARK;
   const snapWidth = (appState.zenModeEnabled ? SNAP_WIDTH * 1.5 : SNAP_WIDTH) / appState.zoom.value;
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
@@ -31999,25 +31492,25 @@ var drawGapLine = (from, to, direction, appState, context) => {
     const halfPoint = [(from[0] + to[0]) / 2, from[1]];
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom28(from[0], from[1] - FULL),
-        pointFrom28(from[0], from[1] + FULL),
+        pointFrom27(from[0], from[1] - FULL),
+        pointFrom27(from[0], from[1] + FULL),
         context
       );
     }
     drawLine(
-      pointFrom28(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
-      pointFrom28(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
+      pointFrom27(halfPoint[0] - QUARTER, halfPoint[1] - HALF),
+      pointFrom27(halfPoint[0] - QUARTER, halfPoint[1] + HALF),
       context
     );
     drawLine(
-      pointFrom28(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
-      pointFrom28(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
+      pointFrom27(halfPoint[0] + QUARTER, halfPoint[1] - HALF),
+      pointFrom27(halfPoint[0] + QUARTER, halfPoint[1] + HALF),
       context
     );
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom28(to[0], to[1] - FULL),
-        pointFrom28(to[0], to[1] + FULL),
+        pointFrom27(to[0], to[1] - FULL),
+        pointFrom27(to[0], to[1] + FULL),
         context
       );
       drawLine(from, to, context);
@@ -32026,25 +31519,25 @@ var drawGapLine = (from, to, direction, appState, context) => {
     const halfPoint = [from[0], (from[1] + to[1]) / 2];
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom28(from[0] - FULL, from[1]),
-        pointFrom28(from[0] + FULL, from[1]),
+        pointFrom27(from[0] - FULL, from[1]),
+        pointFrom27(from[0] + FULL, from[1]),
         context
       );
     }
     drawLine(
-      pointFrom28(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
-      pointFrom28(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
+      pointFrom27(halfPoint[0] - HALF, halfPoint[1] - QUARTER),
+      pointFrom27(halfPoint[0] + HALF, halfPoint[1] - QUARTER),
       context
     );
     drawLine(
-      pointFrom28(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
-      pointFrom28(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
+      pointFrom27(halfPoint[0] - HALF, halfPoint[1] + QUARTER),
+      pointFrom27(halfPoint[0] + HALF, halfPoint[1] + QUARTER),
       context
     );
     if (!appState.zenModeEnabled) {
       drawLine(
-        pointFrom28(to[0] - FULL, to[1]),
-        pointFrom28(to[0] + FULL, to[1]),
+        pointFrom27(to[0] - FULL, to[1]),
+        pointFrom27(to[0] + FULL, to[1]),
         context
       );
       drawLine(from, to, context);
@@ -32069,11 +31562,11 @@ var renderLinearElementPointHighlight = (context, appState, elementsMap) => {
   )) {
     return;
   }
-  const element = LinearElementEditor11.getElement(elementId, elementsMap);
+  const element = LinearElementEditor10.getElement(elementId, elementsMap);
   if (!element) {
     return;
   }
-  const point = LinearElementEditor11.getPointAtIndexGlobalCoordinates(
+  const point = LinearElementEditor10.getPointAtIndexGlobalCoordinates(
     element,
     hoverPointIndex,
     elementsMap
@@ -32089,7 +31582,7 @@ var highlightPoint = (point, context, appState) => {
     context,
     point[0],
     point[1],
-    LinearElementEditor11.POINT_HANDLE_SIZE / appState.zoom.value,
+    LinearElementEditor10.POINT_HANDLE_SIZE / appState.zoom.value,
     false
   );
 };
@@ -32114,10 +31607,7 @@ var renderSingleLinearPoint = (context, appState, point, radius, isSelected, isP
 var renderBindingHighlightForBindableElement_simple = (context, element, elementsMap, appState) => {
   const enclosingFrame = element.frameId && elementsMap.get(element.frameId);
   if (enclosingFrame && isFrameLikeElement14(enclosingFrame)) {
-    context.translate(
-      enclosingFrame.x + appState.scrollX,
-      enclosingFrame.y + appState.scrollY
-    );
+    context.translate(enclosingFrame.x, enclosingFrame.y);
     context.beginPath();
     if (FRAME_STYLE3.radius && context.roundRect) {
       context.roundRect(
@@ -32131,21 +31621,15 @@ var renderBindingHighlightForBindableElement_simple = (context, element, element
       context.rect(-1, -1, enclosingFrame.width + 1, enclosingFrame.height + 1);
     }
     context.clip();
-    context.translate(
-      -(enclosingFrame.x + appState.scrollX),
-      -(enclosingFrame.y + appState.scrollY)
-    );
+    context.translate(-enclosingFrame.x, -enclosingFrame.y);
   }
   switch (element.type) {
     case "magicframe":
     case "frame":
       context.save();
-      context.translate(
-        element.x + appState.scrollX,
-        element.y + appState.scrollY
-      );
+      context.translate(element.x, element.y);
       context.lineWidth = FRAME_STYLE3.strokeWidth / appState.zoom.value;
-      context.strokeStyle = appState.theme === THEME14.DARK ? `rgba(3, 93, 161, 1)` : `rgba(106, 189, 252, 1)`;
+      context.strokeStyle = appState.theme === THEME16.DARK ? `rgba(3, 93, 161, 1)` : `rgba(106, 189, 252, 1)`;
       if (FRAME_STYLE3.radius && context.roundRect) {
         context.beginPath();
         context.roundRect(
@@ -32170,7 +31654,7 @@ var renderBindingHighlightForBindableElement_simple = (context, element, element
       context.translate(-center[0], -center[1]);
       context.translate(element.x, element.y);
       context.lineWidth = clamp7(1.75, element.strokeWidth, 4) / Math.max(0.25, appState.zoom.value);
-      context.strokeStyle = appState.theme === THEME14.DARK ? `rgba(3, 93, 161, 1)` : `rgba(106, 189, 252, 1)`;
+      context.strokeStyle = appState.theme === THEME16.DARK ? `rgba(3, 93, 161, 1)` : `rgba(106, 189, 252, 1)`;
       switch (element.type) {
         case "ellipse":
           context.beginPath();
@@ -32260,10 +31744,7 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
   const offset = element.strokeWidth / 2;
   const enclosingFrame = element.frameId && allElementsMap.get(element.frameId);
   if (enclosingFrame && isFrameLikeElement14(enclosingFrame)) {
-    context.translate(
-      enclosingFrame.x + appState.scrollX,
-      enclosingFrame.y + appState.scrollY
-    );
+    context.translate(enclosingFrame.x, enclosingFrame.y);
     context.beginPath();
     if (FRAME_STYLE3.radius && context.roundRect) {
       context.roundRect(
@@ -32277,21 +31758,15 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
       context.rect(-1, -1, enclosingFrame.width + 1, enclosingFrame.height + 1);
     }
     context.clip();
-    context.translate(
-      -(enclosingFrame.x + appState.scrollX),
-      -(enclosingFrame.y + appState.scrollY)
-    );
+    context.translate(-enclosingFrame.x, -enclosingFrame.y);
   }
   switch (element.type) {
     case "magicframe":
     case "frame":
       context.save();
-      context.translate(
-        element.x + appState.scrollX,
-        element.y + appState.scrollY
-      );
+      context.translate(element.x, element.y);
       context.lineWidth = FRAME_STYLE3.strokeWidth / appState.zoom.value;
-      context.strokeStyle = appState.theme === THEME14.DARK ? `rgba(3, 93, 161, ${opacity})` : `rgba(106, 189, 252, ${opacity})`;
+      context.strokeStyle = appState.theme === THEME16.DARK ? `rgba(3, 93, 161, ${opacity})` : `rgba(106, 189, 252, ${opacity})`;
       if (FRAME_STYLE3.radius && context.roundRect) {
         context.beginPath();
         context.roundRect(
@@ -32321,7 +31796,7 @@ var renderBindingHighlightForBindableElement_complex = (app, context, element, a
         element.y + appState.scrollY - offset
       );
       context.lineWidth = clamp7(2.5, element.strokeWidth * 1.75, 4) / Math.max(0.25, appState.zoom.value);
-      context.strokeStyle = appState.theme === THEME14.DARK ? `rgba(3, 93, 161, ${opacity / 2})` : `rgba(106, 189, 252, ${opacity / 2})`;
+      context.strokeStyle = appState.theme === THEME16.DARK ? `rgba(3, 93, 161, ${opacity / 2})` : `rgba(106, 189, 252, ${opacity / 2})`;
       switch (element.type) {
         case "ellipse":
           context.beginPath();
@@ -32557,7 +32032,7 @@ var renderElementsBoxHighlight = (context, appState, elements, config) => {
     (element) => element.groupIds.length > 0
   );
   const getSelectionFromElements = (elements2) => {
-    const [x1, y1, x2, y2] = getCommonBounds10(elements2);
+    const [x1, y1, x2, y2] = getCommonBounds9(elements2);
     return {
       angle: 0,
       x1,
@@ -32588,11 +32063,11 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
   context.save();
   context.translate(appState.scrollX, appState.scrollY);
   context.lineWidth = 1 / appState.zoom.value;
-  const points = LinearElementEditor11.getPointsGlobalCoordinates(
+  const points = LinearElementEditor10.getPointsGlobalCoordinates(
     element,
     elementsMap
   );
-  const { POINT_HANDLE_SIZE } = LinearElementEditor11;
+  const { POINT_HANDLE_SIZE } = LinearElementEditor10;
   const radius = appState.selectedLinearElement?.isEditing ? POINT_HANDLE_SIZE : POINT_HANDLE_SIZE / 2;
   const _isElbowArrow = isElbowArrow9(element);
   const _isLineElement = isLineElement7(element);
@@ -32622,7 +32097,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
   if (isElbowArrow9(element)) {
     const fixedSegments = element.fixedSegments?.map((segment) => segment.index) || [];
     points.slice(0, -1).forEach((p, idx) => {
-      if (!LinearElementEditor11.isSegmentTooShort(
+      if (!LinearElementEditor10.isSegmentTooShort(
         element,
         points[idx + 1],
         points[idx],
@@ -32632,7 +32107,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
         renderSingleLinearPoint(
           context,
           appState,
-          pointFrom29(
+          pointFrom28(
             (p[0] + points[idx + 1][0]) / 2,
             (p[1] + points[idx + 1][1]) / 2
           ),
@@ -32644,7 +32119,7 @@ var renderLinearPointHandles = (context, appState, element, elementsMap) => {
       }
     });
   } else {
-    const midPoints = LinearElementEditor11.getEditorMidPoints(
+    const midPoints = LinearElementEditor10.getEditorMidPoints(
       element,
       elementsMap,
       appState
@@ -32946,7 +32421,7 @@ var _renderInteractiveScene = ({
     }
     const selectionColor = renderConfig.selectionColor || oc3.black;
     if (showBoundingBox) {
-      const locallySelectedIds = arrayToMap26(selectedElements);
+      const locallySelectedIds = arrayToMap25(selectedElements);
       const selections = [];
       for (const element of elementsMap.values()) {
         const selectionColors = [];
@@ -32993,7 +32468,7 @@ var _renderInteractiveScene = ({
       }
       const addSelectionForGroupId = (groupId) => {
         const groupElements = getElementsInGroup7(elementsMap, groupId);
-        const [x1, y1, x2, y2] = getCommonBounds10(groupElements);
+        const [x1, y1, x2, y2] = getCommonBounds9(groupElements);
         selections.push({
           angle: 0,
           x1,
@@ -33055,7 +32530,7 @@ var _renderInteractiveScene = ({
     } else if (selectedElements.length > 1 && !appState.isRotating && !selectedElements.some((el) => el.locked)) {
       const dashedLinePadding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2 / appState.zoom.value;
       context.fillStyle = oc3.white;
-      const [x1, y1, x2, y2] = getCommonBounds10(selectedElements, elementsMap);
+      const [x1, y1, x2, y2] = getCommonBounds9(selectedElements, elementsMap);
       const initialLineDash = context.getLineDash();
       context.setLineDash([2 / appState.zoom.value]);
       const lineWidth = context.lineWidth;
@@ -33104,7 +32579,7 @@ var _renderInteractiveScene = ({
         true
       );
       context.save();
-      if (appState.theme === THEME14.LIGHT) {
+      if (appState.theme === THEME16.LIGHT) {
         if (focus) {
           context.fillStyle = "rgba(255, 124, 0, 0.4)";
         } else {
@@ -33450,7 +32925,7 @@ import {
 var _renderNewElementScene = ({
   canvas,
   rc,
-  newElement: newElement6,
+  newElement: newElement5,
   elementsMap,
   allElementsMap,
   scale,
@@ -33470,19 +32945,19 @@ var _renderNewElementScene = ({
     });
     context.save();
     context.scale(appState.zoom.value, appState.zoom.value);
-    if (newElement6 && newElement6.type !== "selection") {
-      if (isInvisiblySmallElement2(newElement6)) {
+    if (newElement5 && newElement5.type !== "selection") {
+      if (isInvisiblySmallElement2(newElement5)) {
         return;
       }
-      const frameId = newElement6.frameId || appState.frameToHighlight?.id;
+      const frameId = newElement5.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)) {
+        const frame = getTargetFrame(newElement5, elementsMap, appState);
+        if (frame && shouldApplyFrameClip(newElement5, frame, appState, elementsMap)) {
           frameClip(frame, context, renderConfig, appState);
         }
       }
       renderElement(
-        newElement6,
+        newElement5,
         elementsMap,
         allElementsMap,
         rc,
@@ -33603,7 +33078,7 @@ var Toast = ({
 
 // components/UnlockPopup.tsx
 import {
-  getCommonBounds as getCommonBounds11,
+  getCommonBounds as getCommonBounds10,
   getElementsInGroup as getElementsInGroup8,
   selectGroupsFromGivenElements as selectGroupsFromGivenElements4
 } from "@excalidraw/element";
@@ -33619,7 +33094,7 @@ var UnlockPopup = ({
   if (elements.length === 0) {
     return null;
   }
-  const [x, y] = getCommonBounds11(elements);
+  const [x, y] = getCommonBounds10(elements);
   const { x: viewX, y: viewY } = sceneCoordsToViewportCoords6(
     { sceneX: x, sceneY: y },
     app.state
@@ -33883,7 +33358,7 @@ var App = class _App extends React45.Component {
         }
         return null;
       }
-      const isDarkTheme = this.state.theme === THEME15.DARK;
+      const isDarkTheme = this.state.theme === THEME17.DARK;
       const nonDeletedFramesLikes = this.scene.getNonDeletedFramesLikes();
       const focusedSearchMatch = nonDeletedFramesLikes.length > 0 ? this.state.searchMatches?.focusedId && isFrameLikeElement15(
         this.scene.getElement(this.state.searchMatches.focusedId)
@@ -33934,8 +33409,7 @@ var App = class _App extends React45.Component {
                 }
               },
               style: {
-                background: this.state.viewBackgroundColor,
-                filter: isDarkTheme ? THEME_FILTER : "none",
+                background: isDarkTheme ? applyDarkModeFilter4(this.state.viewBackgroundColor) : this.state.viewBackgroundColor,
                 zIndex: 2,
                 border: "none",
                 display: "block",
@@ -33945,7 +33419,7 @@ var App = class _App extends React45.Component {
                 fontFamily: "Assistant",
                 fontSize: `${FRAME_STYLE4.nameFontSize}px`,
                 transform: `translate(-${FRAME_NAME_EDIT_PADDING}px, ${FRAME_NAME_EDIT_PADDING}px)`,
-                color: "var(--color-gray-80)",
+                color: isDarkTheme ? FRAME_STYLE4.nameColorDarkTheme : FRAME_STYLE4.nameColorLightTheme,
                 overflow: "hidden",
                 maxWidth: `${document.body.clientWidth - x1 - FRAME_NAME_EDIT_PADDING}px`
               },
@@ -34083,9 +33557,9 @@ var App = class _App extends React45.Component {
         if (selectedMagicFrame) {
           frame = selectedMagicFrame;
         } else {
-          const [minX, minY, maxX, maxY] = getCommonBounds12(selectedElements);
+          const [minX, minY, maxX, maxY] = getCommonBounds11(selectedElements);
           const padding = 50;
-          frame = newMagicFrameElement2({
+          frame = newMagicFrameElement({
             ...FRAME_STYLE4,
             x: minX - padding,
             y: minY - padding,
@@ -34171,7 +33645,7 @@ var App = class _App extends React45.Component {
       if (actionResult.appState || editingTextElement || this.state.contextMenu) {
         let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
         let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
-        const theme = actionResult?.appState?.theme || this.props.theme || THEME15.LIGHT;
+        const theme = actionResult?.appState?.theme || this.props.theme || THEME17.LIGHT;
         const name = actionResult?.appState?.name ?? this.state.name;
         const errorMessage = actionResult?.appState?.errorMessage ?? this.state.errorMessage;
         if (typeof this.props.viewModeEnabled !== "undefined") {
@@ -34292,37 +33766,38 @@ var App = class _App extends React45.Component {
           }
         };
       }
-      const scene = restore(initialData, null, null, {
+      const restoredElements = restoreElements(initialData?.elements, null, {
         repairBindings: true,
         deleteInvisibleElements: true
       });
-      const activeTool = scene.appState.activeTool;
-      if (!scene.appState.preferredSelectionTool.initialized) {
-        scene.appState.preferredSelectionTool = {
+      let restoredAppState = restoreAppState(initialData?.appState, null);
+      const activeTool = restoredAppState.activeTool;
+      if (!restoredAppState.preferredSelectionTool.initialized) {
+        restoredAppState.preferredSelectionTool = {
           type: this.editorInterface.formFactor === "phone" ? "lasso" : "selection",
           initialized: true
         };
       }
-      scene.appState = {
-        ...scene.appState,
-        theme: this.props.theme || scene.appState.theme,
+      restoredAppState = {
+        ...restoredAppState,
+        theme: this.props.theme || restoredAppState.theme,
         // we're falling back to current (pre-init) state when deciding
         // whether to open the library, to handle a case where we
         // update the state outside of initialData (e.g. when loading the app
         // with a library install link, which should auto-open the library)
-        openSidebar: scene.appState?.openSidebar || this.state.openSidebar,
+        openSidebar: restoredAppState?.openSidebar || this.state.openSidebar,
         activeTool: activeTool.type === "image" || activeTool.type === "lasso" || activeTool.type === "selection" ? {
           ...activeTool,
-          type: scene.appState.preferredSelectionTool.type
-        } : scene.appState.activeTool,
+          type: restoredAppState.preferredSelectionTool.type
+        } : restoredAppState.activeTool,
         isLoading: false,
         toast: this.state.toast
       };
       if (initialData?.scrollToContent) {
-        scene.appState = {
-          ...scene.appState,
-          ...calculateScrollCenter(scene.elements, {
-            ...scene.appState,
+        restoredAppState = {
+          ...restoredAppState,
+          ...calculateScrollCenter(restoredElements, {
+            ...restoredAppState,
             width: this.state.width,
             height: this.state.height,
             offsetTop: this.state.offsetTop,
@@ -34333,7 +33808,9 @@ var App = class _App extends React45.Component {
       this.resetStore();
       this.resetHistory();
       this.syncActionResult({
-        ...scene,
+        elements: restoredElements,
+        appState: restoredAppState,
+        files: initialData?.files,
         captureUpdate: CaptureUpdateAction37.NEVER
       });
       this.clearImageShapeCache();
@@ -34480,8 +33957,8 @@ var App = class _App extends React45.Component {
       if (didTapTwice && event.touches.length === 1 && firstTapPosition) {
         const touch = event.touches[0];
         const distance3 = pointDistance8(
-          pointFrom30(touch.clientX, touch.clientY),
-          pointFrom30(firstTapPosition.x, firstTapPosition.y)
+          pointFrom29(touch.clientX, touch.clientY),
+          pointFrom29(firstTapPosition.x, firstTapPosition.y)
         );
         if (distance3 <= DOUBLE_TAP_POSITION_THRESHOLD) {
           this.lassoTrail.endPath();
@@ -34554,7 +34031,7 @@ var App = class _App extends React45.Component {
       const elements = restoreElements(opts.elements, null, {
         deleteInvisibleElements: true
       });
-      const [minX, minY, maxX, maxY] = getCommonBounds12(elements);
+      const [minX, minY, maxX, maxY] = getCommonBounds11(elements);
       const elementsCenterX = distance2(minX, maxX) / 2;
       const elementsCenterY = distance2(minY, maxY) / 2;
       const clientX = typeof opts.position === "object" ? opts.position.clientX : opts.position === "cursor" ? this.lastViewportPosition.x : this.state.width / 2 + this.state.offsetLeft;
@@ -34583,7 +34060,7 @@ var App = class _App extends React45.Component {
         prevElements
       );
       nextElements = mappedNewSceneElements || nextElements;
-      syncMovedIndices4(nextElements, arrayToMap27(duplicatedElements));
+      syncMovedIndices4(nextElements, arrayToMap26(duplicatedElements));
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
       if (topLayerFrame) {
         const eligibleElements = filterElementsEligibleAsFrameChildren(
@@ -34598,13 +34075,13 @@ var App = class _App extends React45.Component {
         );
       }
       this.scene.replaceAllElements(nextElements);
-      duplicatedElements.forEach((newElement6) => {
-        if (isTextElement19(newElement6) && isBoundToContainer9(newElement6)) {
+      duplicatedElements.forEach((newElement5) => {
+        if (isTextElement19(newElement5) && isBoundToContainer9(newElement5)) {
           const container = getContainerElement5(
-            newElement6,
+            newElement5,
             this.scene.getElementsMapIncludingDeleted()
           );
-          redrawTextBoundingBox9(newElement6, container, this.scene);
+          redrawTextBoundingBox8(newElement5, container, this.scene);
         }
       });
       if (isSafari) {
@@ -35399,13 +34876,13 @@ var App = class _App extends React45.Component {
             },
             this.state
           );
-          const hoveredElement = getHoveredElementForBinding3(
-            pointFrom30(scenePointer.x, scenePointer.y),
+          const hoveredElement = getHoveredElementForBinding2(
+            pointFrom29(scenePointer.x, scenePointer.y),
             this.scene.getNonDeletedElements(),
             this.scene.getNonDeletedElementsMap()
           );
           if (this.state.selectedLinearElement) {
-            const element = LinearElementEditor12.getElement(
+            const element = LinearElementEditor11.getElement(
               this.state.selectedLinearElement.elementId,
               this.scene.getNonDeletedElementsMap()
             );
@@ -35420,7 +34897,7 @@ var App = class _App extends React45.Component {
       }
       if (isArrowKey2(event.key)) {
         bindOrUnbindBindingElements2(
-          this.scene.getSelectedElements(this.state).filter(isArrowElement14),
+          this.scene.getSelectedElements(this.state).filter(isArrowElement13),
           this.scene,
           this.state
         );
@@ -35686,15 +35163,15 @@ var App = class _App extends React45.Component {
         existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
       }
       const fontFamily = existingTextElement?.fontFamily || this.state.currentItemFontFamily;
-      const lineHeight = existingTextElement?.lineHeight || getLineHeight5(fontFamily);
+      const lineHeight = existingTextElement?.lineHeight || getLineHeight4(fontFamily);
       const fontSize = this.state.currentItemFontSize;
-      if (!existingTextElement && shouldBindToContainer && container && !isArrowElement14(container)) {
+      if (!existingTextElement && shouldBindToContainer && container && !isArrowElement13(container)) {
         const fontString = {
           fontSize,
           fontFamily
         };
         const minWidth = getApproxMinLineWidth(
-          getFontString10(fontString),
+          getFontString9(fontString),
           lineHeight
         );
         const minHeight = getApproxMinLineHeight(fontSize, lineHeight);
@@ -35719,7 +35196,7 @@ var App = class _App extends React45.Component {
         x: sceneX,
         y: sceneY
       });
-      const element = existingTextElement || newTextElement4({
+      const element = existingTextElement || newTextElement3({
         x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
         y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
         strokeColor: this.state.currentItemStrokeColor,
@@ -35733,11 +35210,11 @@ var App = class _App extends React45.Component {
         fontSize,
         fontFamily,
         textAlign: parentCenterPosition ? "center" : this.state.currentItemTextAlign,
-        verticalAlign: parentCenterPosition ? VERTICAL_ALIGN6.MIDDLE : DEFAULT_VERTICAL_ALIGN,
+        verticalAlign: parentCenterPosition ? VERTICAL_ALIGN5.MIDDLE : DEFAULT_VERTICAL_ALIGN,
         containerId: shouldBindToContainer ? container?.id : void 0,
         groupIds: container?.groupIds ?? [],
         lineHeight,
-        angle: container ? isArrowElement14(container) ? 0 : container.angle : 0,
+        angle: container ? isArrowElement13(container) ? 0 : container.angle : 0,
         frameId: topLayerFrame ? topLayerFrame.id : null
       });
       if (!existingTextElement && shouldBindToContainer && container) {
@@ -35800,13 +35277,13 @@ var App = class _App extends React45.Component {
           this.actionManager.executeAction(actionToggleLinearEditor);
           return;
         } else if (this.state.selectedLinearElement && isElbowArrow10(selectedElements[0])) {
-          const hitCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
+          const hitCoords = LinearElementEditor11.getSegmentMidpointHitCoords(
             this.state.selectedLinearElement,
             { x: sceneX, y: sceneY },
             this.state,
             this.scene.getNonDeletedElementsMap()
           );
-          const midPoint = hitCoords ? LinearElementEditor12.getSegmentMidPointIndex(
+          const midPoint = hitCoords ? LinearElementEditor11.getSegmentMidPointIndex(
             this.state.selectedLinearElement,
             this.state,
             hitCoords,
@@ -35814,12 +35291,12 @@ var App = class _App extends React45.Component {
           ) : -1;
           if (midPoint && midPoint > -1) {
             this.store.scheduleCapture();
-            LinearElementEditor12.deleteFixedSegment(
+            LinearElementEditor11.deleteFixedSegment(
               selectedElements[0],
               this.scene,
               midPoint
             );
-            const nextCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
+            const nextCoords = LinearElementEditor11.getSegmentMidpointHitCoords(
               {
                 ...this.state.selectedLinearElement,
                 segmentMidPointHoveredCoords: null
@@ -35828,7 +35305,7 @@ var App = class _App extends React45.Component {
               this.state,
               this.scene.getNonDeletedElementsMap()
             );
-            const nextIndex = nextCoords ? LinearElementEditor12.getSegmentMidPointIndex(
+            const nextIndex = nextCoords ? LinearElementEditor11.getSegmentMidPointIndex(
               this.state.selectedLinearElement,
               this.state,
               nextCoords,
@@ -35895,8 +35372,8 @@ var App = class _App extends React45.Component {
             sceneY
           );
           if (container) {
-            if (hasBoundTextElement9(container) || !isTransparent7(container.backgroundColor) || hitElementItself({
-              point: pointFrom30(sceneX, sceneY),
+            if (hasBoundTextElement9(container) || !isTransparent8(container.backgroundColor) || hitElementItself({
+              point: pointFrom29(sceneX, sceneY),
               element: container,
               elementsMap: this.scene.getNonDeletedElementsMap(),
               threshold: this.getElementHitThreshold(container)
@@ -35934,7 +35411,7 @@ var App = class _App extends React45.Component {
           element,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom30(scenePointer.x, scenePointer.y),
+          pointFrom29(scenePointer.x, scenePointer.y),
           this.editorInterface.formFactor === "phone"
         )) {
           return element;
@@ -35943,11 +35420,11 @@ var App = class _App extends React45.Component {
     });
     __publicField(this, "redirectToLink", (event, isTouchScreen) => {
       const draggedDistance = pointDistance8(
-        pointFrom30(
+        pointFrom29(
           this.lastPointerDownEvent.clientX,
           this.lastPointerDownEvent.clientY
         ),
-        pointFrom30(
+        pointFrom29(
           this.lastPointerUpEvent.clientX,
           this.lastPointerUpEvent.clientY
         )
@@ -35964,7 +35441,7 @@ var App = class _App extends React45.Component {
         this.hitLinkElement,
         elementsMap,
         this.state,
-        pointFrom30(lastPointerDownCoords.x, lastPointerDownCoords.y),
+        pointFrom29(lastPointerDownCoords.x, lastPointerDownCoords.y),
         this.editorInterface.formFactor === "phone"
       );
       const lastPointerUpCoords = viewportCoordsToSceneCoords3(
@@ -35975,7 +35452,7 @@ var App = class _App extends React45.Component {
         this.hitLinkElement,
         elementsMap,
         this.state,
-        pointFrom30(lastPointerUpCoords.x, lastPointerUpCoords.y),
+        pointFrom29(lastPointerUpCoords.x, lastPointerUpCoords.y),
         this.editorInterface.formFactor === "phone"
       );
       if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
@@ -36109,7 +35586,7 @@ var App = class _App extends React45.Component {
         });
       }
       if (this.state.selectedLinearElement?.isEditing && !this.state.selectedLinearElement.isDragging) {
-        const editingLinearElement = this.state.newElement ? null : LinearElementEditor12.handlePointerMoveInEditMode(
+        const editingLinearElement = this.state.newElement ? null : LinearElementEditor11.handlePointerMoveInEditMode(
           event,
           scenePointerX,
           scenePointerY,
@@ -36124,10 +35601,10 @@ var App = class _App extends React45.Component {
         }
       }
       if (isBindingElementType(this.state.activeTool.type)) {
-        const { newElement: newElement6 } = this.state;
-        if (!newElement6 && isBindingEnabled2(this.state)) {
-          const hoveredElement = getHoveredElementForBinding3(
-            pointFrom30(scenePointerX, scenePointerY),
+        const { newElement: newElement5 } = this.state;
+        if (!newElement5 && isBindingEnabled2(this.state)) {
+          const hoveredElement = getHoveredElementForBinding2(
+            pointFrom29(scenePointerX, scenePointerY),
             this.scene.getNonDeletedElements(),
             this.scene.getNonDeletedElementsMap(),
             (el) => maxBindingDistance_simple2(this.state.zoom)
@@ -36150,8 +35627,8 @@ var App = class _App extends React45.Component {
         const { lastCommittedPoint } = selectedLinearElement;
         setCursorForShape(this.interactiveCanvas, this.state);
         if (lastPoint === lastCommittedPoint) {
-          const hoveredElement = getHoveredElementForBinding3(
-            pointFrom30(scenePointerX, scenePointerY),
+          const hoveredElement = isArrowElement13(this.state.newElement) && isBindingEnabled2(this.state) && getHoveredElementForBinding2(
+            pointFrom29(scenePointerX, scenePointerY),
             this.scene.getNonDeletedElements(),
             this.scene.getNonDeletedElementsMap(),
             (el) => maxBindingDistance_simple2(this.state.zoom)
@@ -36179,7 +35656,7 @@ var App = class _App extends React45.Component {
                   },
                   prevState
                 ),
-                selectedLinearElement: new LinearElementEditor12(
+                selectedLinearElement: new LinearElementEditor11(
                   multiElement,
                   this.scene.getNonDeletedElementsMap()
                 )
@@ -36189,7 +35666,7 @@ var App = class _App extends React45.Component {
             // if we haven't yet created a temp point and we're beyond commit-zone
             // threshold, add a point
             pointDistance8(
-              pointFrom30(scenePointerX - rx, scenePointerY - ry),
+              pointFrom29(scenePointerX - rx, scenePointerY - ry),
               lastPoint
             ) >= LINE_CONFIRM_THRESHOLD2
           ) {
@@ -36198,7 +35675,7 @@ var App = class _App extends React45.Component {
               {
                 points: [
                   ...points,
-                  pointFrom30(scenePointerX - rx, scenePointerY - ry)
+                  pointFrom29(scenePointerX - rx, scenePointerY - ry)
                 ]
               },
               { informMutation: false, isDragging: false }
@@ -36222,7 +35699,7 @@ var App = class _App extends React45.Component {
             setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
           }
         } else if (points.length > 2 && lastCommittedPoint && pointDistance8(
-          pointFrom30(scenePointerX - rx, scenePointerY - ry),
+          pointFrom29(scenePointerX - rx, scenePointerY - ry),
           lastCommittedPoint
         ) < LINE_CONFIRM_THRESHOLD2) {
           setCursor(this.interactiveCanvas, CURSOR_TYPE4.POINTER);
@@ -36257,8 +35734,8 @@ var App = class _App extends React45.Component {
           }
           const elementsMap = this.scene.getNonDeletedElementsMap();
           if (isSimpleArrow(multiElement)) {
-            const hoveredElement = getHoveredElementForBinding3(
-              pointFrom30(scenePointerX, scenePointerY),
+            const hoveredElement = getHoveredElementForBinding2(
+              pointFrom29(scenePointerX, scenePointerY),
               this.scene.getNonDeletedElements(),
               elementsMap
             );
@@ -36270,7 +35747,7 @@ var App = class _App extends React45.Component {
             this.state.selectedLinearElement,
             "Expected selectedLinearElement to be set to operate on a linear element"
           );
-          const newState = LinearElementEditor12.handlePointerMove(
+          const newState = LinearElementEditor11.handlePointerMove(
             event.nativeEvent,
             this,
             scenePointerX,
@@ -36284,14 +35761,14 @@ var App = class _App extends React45.Component {
         return;
       }
       if (this.state.activeTool.type === "arrow") {
-        const hit = getHoveredElementForBinding3(
-          pointFrom30(scenePointerX, scenePointerY),
+        const hit = getHoveredElementForBinding2(
+          pointFrom29(scenePointerX, scenePointerY),
           this.scene.getNonDeletedElements(),
           this.scene.getNonDeletedElementsMap(),
           (el) => maxBindingDistance_simple2(this.state.zoom)
         );
         if (hit && !isPointInElement3(
-          pointFrom30(scenePointerX, scenePointerY),
+          pointFrom29(scenePointerX, scenePointerY),
           hit,
           this.scene.getNonDeletedElementsMap()
         )) {
@@ -36337,7 +35814,7 @@ var App = class _App extends React45.Component {
         }
       } else if (selectedElements.length > 1 && !isOverScrollBar && this.state.openDialog?.name !== "elementLinkSelector") {
         const transformHandleType = getTransformHandleTypeFromCoords(
-          getCommonBounds12(selectedElements),
+          getCommonBounds11(selectedElements),
           scenePointerX,
           scenePointerY,
           this.state.zoom,
@@ -36808,7 +36285,7 @@ var App = class _App extends React45.Component {
           this.hitLinkElement,
           this.scene.getNonDeletedElementsMap(),
           this.state,
-          pointFrom30(scenePointer.x, scenePointer.y)
+          pointFrom29(scenePointer.x, scenePointer.y)
         )) {
           this.handleEmbeddableCenterClick(this.hitLinkElement);
         } else {
@@ -36963,7 +36440,7 @@ var App = class _App extends React45.Component {
           }
         } else if (selectedElements.length > 1) {
           pointerDownState.resize.handleType = getTransformHandleTypeFromCoords(
-            getCommonBounds12(selectedElements),
+            getCommonBounds11(selectedElements),
             pointerDownState.origin.x,
             pointerDownState.origin.y,
             this.state.zoom,
@@ -36991,7 +36468,7 @@ var App = class _App extends React45.Component {
         } else {
           if (this.state.selectedLinearElement) {
             const linearElementEditor = this.state.selectedLinearElement;
-            const ret = LinearElementEditor12.handlePointerDown(
+            const ret = LinearElementEditor11.handlePointerDown(
               event,
               this,
               this.store,
@@ -37252,7 +36729,7 @@ var App = class _App extends React45.Component {
         simulatePressure,
         locked: false,
         frameId: topLayerFrame ? topLayerFrame.id : null,
-        points: [pointFrom30(0, 0)],
+        points: [pointFrom29(0, 0)],
         pressures: simulatePressure ? [] : [event.pressure]
       });
       this.scene.insertElement(element);
@@ -37268,8 +36745,8 @@ var App = class _App extends React45.Component {
           )
         };
       });
-      const boundElement = getHoveredElementForBinding3(
-        pointFrom30(
+      const boundElement = getHoveredElementForBinding2(
+        pointFrom29(
           pointerDownState.origin.x,
           pointerDownState.origin.y
         ),
@@ -37368,7 +36845,7 @@ var App = class _App extends React45.Component {
         y: gridY
       }) : null;
       const placeholderSize = 100 / this.state.zoom.value;
-      return newImageElement2({
+      return newImageElement({
         type: "image",
         strokeColor: this.state.currentItemStrokeColor,
         backgroundColor: this.state.currentItemBackgroundColor,
@@ -37427,8 +36904,8 @@ var App = class _App extends React45.Component {
         }
         const { x: rx, y: ry } = multiElement;
         const { lastCommittedPoint } = selectedLinearElement;
-        const hoveredElementForBinding = getHoveredElementForBinding3(
-          pointFrom30(
+        const hoveredElementForBinding = isBindingEnabled2(this.state) && getHoveredElementForBinding2(
+          pointFrom29(
             this.lastPointerMoveCoords?.x ?? rx + multiElement.points[multiElement.points.length - 1][0],
             this.lastPointerMoveCoords?.y ?? ry + multiElement.points[multiElement.points.length - 1][1]
           ),
@@ -37436,7 +36913,7 @@ var App = class _App extends React45.Component {
           this.scene.getNonDeletedElementsMap()
         );
         if (isBindingElement4(multiElement) && hoveredElementForBinding || multiElement.points.length > 1 && lastCommittedPoint && pointDistance8(
-          pointFrom30(
+          pointFrom29(
             pointerDownState.origin.x - rx,
             pointerDownState.origin.y - ry
           ),
@@ -37473,7 +36950,7 @@ var App = class _App extends React45.Component {
         });
         const { currentItemStartArrowhead, currentItemEndArrowhead } = this.state;
         const [startArrowhead, endArrowhead] = elementType === "arrow" ? [currentItemStartArrowhead, currentItemEndArrowhead] : [null, null];
-        const element = elementType === "arrow" ? newArrowElement3({
+        const element = elementType === "arrow" ? newArrowElement2({
           type: elementType,
           x: gridX,
           y: gridY,
@@ -37495,7 +36972,7 @@ var App = class _App extends React45.Component {
           frameId: topLayerFrame ? topLayerFrame.id : null,
           elbowed: this.state.currentItemArrowType === ARROW_TYPE2.elbow,
           fixedSegments: this.state.currentItemArrowType === ARROW_TYPE2.elbow ? [] : null
-        }) : newLinearElement4({
+        }) : newLinearElement3({
           type: elementType,
           x: gridX,
           y: gridY,
@@ -37510,18 +36987,18 @@ var App = class _App extends React45.Component {
           locked: false,
           frameId: topLayerFrame ? topLayerFrame.id : null
         });
-        const point = pointFrom30(
+        const point = pointFrom29(
           pointerDownState.origin.x,
           pointerDownState.origin.y
         );
         const elementsMap = this.scene.getNonDeletedElementsMap();
-        const boundElement = isBindingEnabled2(this.state) ? getHoveredElementForBinding3(
+        const boundElement = isBindingEnabled2(this.state) ? getHoveredElementForBinding2(
           point,
           this.scene.getNonDeletedElements(),
           elementsMap
         ) : null;
         this.scene.mutateElement(element, {
-          points: [pointFrom30(0, 0), pointFrom30(0, 0)]
+          points: [pointFrom29(0, 0), pointFrom29(0, 0)]
         });
         this.scene.insertElement(element);
         if (isBindingElement4(element)) {
@@ -37531,14 +37008,21 @@ var App = class _App extends React45.Component {
               [
                 0,
                 {
-                  point: pointFrom30(0, 0),
+                  point: pointFrom29(0, 0),
                   isDragging: false
                 }
               ]
             ]),
+            point[0],
+            point[1],
             this.scene,
             this.state,
-            { newArrow: true, altKey: event.altKey, initialBinding: true }
+            {
+              newArrow: true,
+              altKey: event.altKey,
+              initialBinding: true,
+              angleLocked: shouldRotateWithDiscreteAngle3(event.nativeEvent)
+            }
           );
         }
         flushSync3(() => {
@@ -37546,7 +37030,7 @@ var App = class _App extends React45.Component {
             let linearElementEditor = null;
             let nextSelectedElementIds = prevState.selectedElementIds;
             if (isLinearElement12(element)) {
-              linearElementEditor = new LinearElementEditor12(
+              linearElementEditor = new LinearElementEditor11(
                 element,
                 this.scene.getNonDeletedElementsMap()
               );
@@ -37557,7 +37041,7 @@ var App = class _App extends React45.Component {
                 initialState: {
                   ...linearElementEditor.initialState,
                   lastClickedPoint: endIdx,
-                  origin: pointFrom30(
+                  origin: pointFrom29(
                     pointerDownState.origin.x,
                     pointerDownState.origin.y
                   )
@@ -37612,7 +37096,7 @@ var App = class _App extends React45.Component {
           ...baseElementAttributes
         });
       } else {
-        element = newElement5({
+        element = newElement4({
           type: elementType,
           ...baseElementAttributes
         });
@@ -37642,7 +37126,7 @@ var App = class _App extends React45.Component {
         locked: false,
         ...FRAME_STYLE4
       };
-      const frame = type === TOOL_TYPE3.magicframe ? newMagicFrameElement2(constructorOpts) : newFrameElement3(constructorOpts);
+      const frame = type === TOOL_TYPE3.magicframe ? newMagicFrameElement(constructorOpts) : newFrameElement2(constructorOpts);
       this.scene.insertElement(frame);
       this.setState({
         multiElement: null,
@@ -37978,14 +37462,14 @@ var App = class _App extends React45.Component {
           }
         })
       );
-      const initializedMap = arrayToMap27(initialized);
+      const initializedMap = arrayToMap26(initialized);
       const positioned = positionElementsOnGrid(
         initialized.filter((el) => !el.isDeleted),
         sceneX,
         sceneY,
         gridPadding
       );
-      const positionedMap = arrayToMap27(positioned);
+      const positionedMap = arrayToMap26(positioned);
       const nextElements = this.scene.getElementsIncludingDeleted().map((el) => positionedMap.get(el.id) ?? initializedMap.get(el.id) ?? el);
       this.updateScene({
         appState: {
@@ -38133,7 +37617,7 @@ var App = class _App extends React45.Component {
           return;
         }
         if (ret.type === MIME_TYPES9.excalidraw) {
-          syncInvalidIndices2(elements.concat(ret.data.elements));
+          syncInvalidIndices(elements.concat(ret.data.elements));
           this.store.scheduleMicroAction({
             action: CaptureUpdateAction37.NEVER,
             elements,
@@ -38198,7 +37682,7 @@ var App = class _App extends React45.Component {
               this.state,
               this
             ),
-            selectedLinearElement: isLinearElement12(element) ? new LinearElementEditor12(
+            selectedLinearElement: isLinearElement12(element) ? new LinearElementEditor11(
               element,
               this.scene.getNonDeletedElementsMap()
             ) : null
@@ -38215,7 +37699,7 @@ var App = class _App extends React45.Component {
     __publicField(this, "maybeDragNewGenericElement", (pointerDownState, event, informMutation = true) => {
       const selectionElement = this.state.selectionElement;
       const pointerCoords = pointerDownState.lastCoords;
-      if (selectionElement && this.state.activeTool.type !== "eraser") {
+      if (selectionElement && pointerDownState.boxSelection.hasOccurred && this.state.activeTool.type !== "eraser") {
         dragNewElement({
           newElement: selectionElement,
           elementType: this.state.activeTool.type,
@@ -38233,8 +37717,8 @@ var App = class _App extends React45.Component {
         });
         return;
       }
-      const newElement6 = this.state.newElement;
-      if (!newElement6) {
+      const newElement5 = this.state.newElement;
+      if (!newElement5) {
         return;
       }
       let [gridX, gridY] = getGridPoint2(
@@ -38242,11 +37726,11 @@ var App = class _App extends React45.Component {
         pointerCoords.y,
         event[KEYS54.CTRL_OR_CMD] ? null : this.getEffectiveGridSize()
       );
-      const image = isInitializedImageElement3(newElement6) && this.imageCache.get(newElement6.fileId)?.image;
+      const image = isInitializedImageElement3(newElement5) && this.imageCache.get(newElement5.fileId)?.image;
       const aspectRatio = image && !(image instanceof Promise) ? image.width / image.height : null;
-      this.maybeCacheReferenceSnapPoints(event, [newElement6]);
+      this.maybeCacheReferenceSnapPoints(event, [newElement5]);
       const { snapOffset, snapLines } = snapNewElement(
-        newElement6,
+        newElement5,
         this,
         event,
         {
@@ -38264,31 +37748,33 @@ var App = class _App extends React45.Component {
       this.setState({
         snapLines
       });
-      dragNewElement({
-        newElement: newElement6,
-        elementType: this.state.activeTool.type,
-        originX: pointerDownState.originInGrid.x,
-        originY: pointerDownState.originInGrid.y,
-        x: gridX,
-        y: gridY,
-        width: distance2(pointerDownState.originInGrid.x, gridX),
-        height: distance2(pointerDownState.originInGrid.y, gridY),
-        shouldMaintainAspectRatio: isImageElement9(newElement6) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
-        shouldResizeFromCenter: shouldResizeFromCenter(event),
-        zoom: this.state.zoom.value,
-        scene: this.scene,
-        widthAspectRatio: aspectRatio,
-        originOffset: this.state.originSnapOffset,
-        informMutation
-      });
+      if (!isBindingElement4(newElement5)) {
+        dragNewElement({
+          newElement: newElement5,
+          elementType: this.state.activeTool.type,
+          originX: pointerDownState.originInGrid.x,
+          originY: pointerDownState.originInGrid.y,
+          x: gridX,
+          y: gridY,
+          width: distance2(pointerDownState.originInGrid.x, gridX),
+          height: distance2(pointerDownState.originInGrid.y, gridY),
+          shouldMaintainAspectRatio: isImageElement9(newElement5) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
+          shouldResizeFromCenter: shouldResizeFromCenter(event),
+          zoom: this.state.zoom.value,
+          scene: this.scene,
+          widthAspectRatio: aspectRatio,
+          originOffset: this.state.originSnapOffset,
+          informMutation
+        });
+      }
       this.setState({
-        newElement: newElement6
+        newElement: newElement5
       });
       if (this.state.activeTool.type === TOOL_TYPE3.frame || this.state.activeTool.type === TOOL_TYPE3.magicframe) {
         this.setState({
           elementsToHighlight: getElementsInResizingFrame4(
             this.scene.getNonDeletedElements(),
-            newElement6,
+            newElement5,
             this.state,
             this.scene.getNonDeletedElementsMap()
           )
@@ -38426,7 +37912,7 @@ var App = class _App extends React45.Component {
         transformHandleType,
         selectedElements,
         this.scene,
-        shouldRotateWithDiscreteAngle2(event),
+        shouldRotateWithDiscreteAngle3(event),
         shouldResizeFromCenter(event),
         selectedElements.some((element) => isImageElement9(element)) ? !shouldMaintainAspectRatio(event) : shouldMaintainAspectRatio(event),
         resizeX,
@@ -38681,7 +38167,7 @@ var App = class _App extends React45.Component {
       () => this.scene.getElementsIncludingDeleted(),
       this
     );
-    this.scene = new Scene2();
+    this.scene = new Scene();
     this.canvas = document.createElement("canvas");
     this.rc = rough3.canvas(this.canvas);
     this.renderer = new Renderer(this.scene);
@@ -38798,15 +38284,15 @@ var App = class _App extends React45.Component {
         "Missing last pointer move coords when changing bind skip mode for arrow start"
       );
       const elementsMap = this.scene.getNonDeletedElementsMap();
-      const hoveredElement = getHoveredElementForBinding3(
-        pointFrom30(
+      const hoveredElement = getHoveredElementForBinding2(
+        pointFrom29(
           this.lastPointerMoveCoords.x,
           this.lastPointerMoveCoords.y
         ),
         this.scene.getNonDeletedElements(),
         elementsMap
       );
-      const element = LinearElementEditor12.getElement(
+      const element = LinearElementEditor11.getElement(
         this.state.selectedLinearElement.elementId,
         elementsMap
       );
@@ -38838,13 +38324,13 @@ var App = class _App extends React45.Component {
         invariant16(event, "Last event must exist");
         const deltaX = x - this.state.selectedLinearElement.pointerOffset.x;
         const deltaY = y - this.state.selectedLinearElement.pointerOffset.y;
-        const newState = this.state.multiElement ? LinearElementEditor12.handlePointerMove(
+        const newState = this.state.multiElement ? LinearElementEditor11.handlePointerMove(
           event,
           this,
           deltaX,
           deltaY,
           this.state.selectedLinearElement
-        ) : LinearElementEditor12.handlePointDragging(
+        ) : LinearElementEditor11.handlePointDragging(
           event,
           this,
           deltaX,
@@ -38893,8 +38379,8 @@ var App = class _App extends React45.Component {
         }
       }
       const { x, y } = this.lastPointerMoveCoords;
-      const hoveredElement2 = getHoveredElementForBinding3(
-        pointFrom30(x, y),
+      const hoveredElement2 = getHoveredElementForBinding2(
+        pointFrom29(x, y),
         this.scene.getNonDeletedElements(),
         this.scene.getNonDeletedElementsMap()
       );
@@ -38924,13 +38410,13 @@ var App = class _App extends React45.Component {
         invariant16(event, "Last event must exist");
         const deltaX = x - this.state.selectedLinearElement.pointerOffset.x;
         const deltaY = y - this.state.selectedLinearElement.pointerOffset.y;
-        const newState = this.state.multiElement ? LinearElementEditor12.handlePointerMove(
+        const newState = this.state.multiElement ? LinearElementEditor11.handlePointerMove(
           event,
           this,
           deltaX,
           deltaY,
           this.state.selectedLinearElement
-        ) : LinearElementEditor12.handlePointDragging(
+        ) : LinearElementEditor11.handlePointDragging(
           event,
           this,
           deltaX,
@@ -39124,7 +38610,7 @@ var App = class _App extends React45.Component {
                       html, body {
                         width: 100%;
                         height: 100%;
-                        color: ${this.state.theme === THEME15.DARK ? "white" : "black"};
+                        color: ${this.state.theme === THEME17.DARK ? "white" : "black"};
                       }
                       body {
                         display: flex;
@@ -39524,7 +39010,8 @@ var App = class _App extends React45.Component {
                               canvasBackgroundColor: this.state.viewBackgroundColor,
                               embedsValidationStatus: this.embedsValidationStatus,
                               elementsPendingErasure: this.elementsPendingErasure,
-                              pendingFlowchartNodes: this.flowChartCreator.pendingNodes
+                              pendingFlowchartNodes: this.flowChartCreator.pendingNodes,
+                              theme: this.state.theme
                             }
                           }
                         ),
@@ -39543,7 +39030,8 @@ var App = class _App extends React45.Component {
                               canvasBackgroundColor: this.state.viewBackgroundColor,
                               embedsValidationStatus: this.embedsValidationStatus,
                               elementsPendingErasure: this.elementsPendingErasure,
-                              pendingFlowchartNodes: null
+                              pendingFlowchartNodes: null,
+                              theme: this.state.theme
                             }
                           }
                         ),
@@ -39704,7 +39192,7 @@ var App = class _App extends React45.Component {
   async componentDidMount() {
     this.unmounted = false;
     this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;
-    if (isTestEnv5() || isDevEnv10()) {
+    if (isTestEnv5() || isDevEnv9()) {
       const setState = this.setState.bind(this);
       Object.defineProperties(window.h, {
         state: {
@@ -39775,7 +39263,7 @@ var App = class _App extends React45.Component {
     });
     this.renderer.destroy();
     this.scene.destroy();
-    this.scene = new Scene2();
+    this.scene = new Scene();
     this.fonts = new Fonts(this.scene);
     this.renderer = new Renderer(this.scene);
     this.files = {};
@@ -39988,7 +39476,7 @@ var App = class _App extends React45.Component {
     }
     this.excalidrawContainerRef.current?.classList.toggle(
       "theme--dark",
-      this.state.theme === THEME15.DARK
+      this.state.theme === THEME17.DARK
     );
     if (this.state.selectedLinearElement?.isEditing && !this.state.selectedElementIds[this.state.selectedLinearElement.elementId]) {
       setTimeout(() => {
@@ -40054,7 +39542,7 @@ var App = class _App extends React45.Component {
       return;
     }
     if (data.elements) {
-      const elements = data.programmaticAPI ? convertToExcalidrawElements(
+      const elements = data.programmaticAPI ? convertToExcalidrawElements2(
         data.elements
       ) : data.elements;
       this.addElementsFromPasteOrLibrary({
@@ -40072,7 +39560,7 @@ var App = class _App extends React45.Component {
       const api = await import("@excalidraw/mermaid-to-excalidraw");
       try {
         const { elements: skeletonElements, files } = await api.parseMermaidToExcalidraw(data.text);
-        const elements = convertToExcalidrawElements(skeletonElements, {
+        const elements = convertToExcalidrawElements2(skeletonElements, {
           regenerateIds: true
         });
         this.addElementsFromPasteOrLibrary({
@@ -40182,11 +39670,11 @@ var App = class _App extends React45.Component {
       verticalAlign: DEFAULT_VERTICAL_ALIGN,
       locked: false
     };
-    const fontString = getFontString10({
+    const fontString = getFontString9({
       fontSize: textElementProps.fontSize,
       fontFamily: textElementProps.fontFamily
     });
-    const lineHeight = getLineHeight5(textElementProps.fontFamily);
+    const lineHeight = getLineHeight4(textElementProps.fontFamily);
     const [x1, , x2] = getVisibleSceneBounds(this.state);
     const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);
     const LINE_GAP = 10;
@@ -40194,19 +39682,19 @@ var App = class _App extends React45.Component {
     const lines = isPlainPaste ? [text] : text.split("\n");
     const textElements = lines.reduce(
       (acc, line, idx) => {
-        const originalText = normalizeText3(line).trim();
+        const originalText = normalizeText2(line).trim();
         if (originalText.length) {
           const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
             x,
             y: currentY
           });
-          let metrics = measureText7(originalText, fontString, lineHeight);
+          let metrics = measureText6(originalText, fontString, lineHeight);
           const isTextUnwrapped = metrics.width > maxTextWidth;
           const text2 = isTextUnwrapped ? wrapText4(originalText, fontString, maxTextWidth) : originalText;
-          metrics = isTextUnwrapped ? measureText7(text2, fontString, lineHeight) : metrics;
+          metrics = isTextUnwrapped ? measureText6(text2, fontString, lineHeight) : metrics;
           const startX = x - metrics.width / 2;
           const startY = currentY - metrics.height / 2;
-          const element = newTextElement4({
+          const element = newTextElement3({
             ...textElementProps,
             x: startX,
             y: startY,
@@ -40382,7 +39870,7 @@ var App = class _App extends React45.Component {
       }
       const elementWithHighestZIndex = allHitElements[allHitElements.length - 1];
       return hitElementItself({
-        point: pointFrom30(x, y),
+        point: pointFrom29(x, y),
         element: elementWithHighestZIndex,
         // when overlapping, we would like to be more precise
         // this also avoids the need to update past tests
@@ -40426,7 +39914,7 @@ var App = class _App extends React45.Component {
   hitElement(x, y, element, considerBoundingBox = true) {
     if (considerBoundingBox && this.state.selectedElementIds[element.id] && hasBoundingBox2([element], this.state, this.editorInterface)) {
       if (hitElementBoundingBox2(
-        pointFrom30(x, y),
+        pointFrom29(x, y),
         element,
         this.scene.getNonDeletedElementsMap(),
         this.getElementHitThreshold(element)
@@ -40435,7 +39923,7 @@ var App = class _App extends React45.Component {
       }
     }
     const hitBoundTextOfElement = hitElementBoundText(
-      pointFrom30(x, y),
+      pointFrom29(x, y),
       element,
       this.scene.getNonDeletedElementsMap()
     );
@@ -40443,7 +39931,7 @@ var App = class _App extends React45.Component {
       return true;
     }
     return hitElementItself({
-      point: pointFrom30(x, y),
+      point: pointFrom29(x, y),
       element,
       threshold: this.getElementHitThreshold(element),
       elementsMap: this.scene.getNonDeletedElementsMap(),
@@ -40465,8 +39953,8 @@ var App = class _App extends React45.Component {
         elements[index],
         this.scene.getNonDeletedElementsMap()
       );
-      if (isArrowElement14(elements[index]) && hitElementItself({
-        point: pointFrom30(x, y),
+      if (isArrowElement13(elements[index]) && hitElementItself({
+        point: pointFrom29(x, y),
         element: elements[index],
         elementsMap: this.scene.getNonDeletedElementsMap(),
         threshold: this.getElementHitThreshold(elements[index])
@@ -40482,7 +39970,7 @@ var App = class _App extends React45.Component {
   }
   handleHoverSelectedLinearElement(linearElementEditor, scenePointerX, scenePointerY) {
     const elementsMap = this.scene.getNonDeletedElementsMap();
-    const element = LinearElementEditor12.getElement(
+    const element = LinearElementEditor11.getElement(
       linearElementEditor.elementId,
       elementsMap
     );
@@ -40493,19 +39981,19 @@ var App = class _App extends React45.Component {
       let hoverPointIndex = -1;
       let segmentMidPointHoveredCoords = null;
       if (hitElementItself({
-        point: pointFrom30(scenePointerX, scenePointerY),
+        point: pointFrom29(scenePointerX, scenePointerY),
         element,
         elementsMap,
         threshold: this.getElementHitThreshold(element)
       })) {
-        hoverPointIndex = LinearElementEditor12.getPointIndexUnderCursor(
+        hoverPointIndex = LinearElementEditor11.getPointIndexUnderCursor(
           element,
           elementsMap,
           this.state.zoom,
           scenePointerX,
           scenePointerY
         );
-        segmentMidPointHoveredCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
+        segmentMidPointHoveredCoords = LinearElementEditor11.getSegmentMidpointHitCoords(
           linearElementEditor,
           { x: scenePointerX, y: scenePointerY },
           this.state,
@@ -40542,7 +40030,7 @@ var App = class _App extends React45.Component {
           }
         });
       }
-      if (!LinearElementEditor12.arePointsEqual(
+      if (!LinearElementEditor11.arePointsEqual(
         this.state.selectedLinearElement.segmentMidPointHoveredCoords,
         segmentMidPointHoveredCoords
       )) {
@@ -40573,7 +40061,7 @@ var App = class _App extends React45.Component {
   initialPointerDownState(event) {
     const origin = viewportCoordsToSceneCoords3(event, this.state);
     const selectedElements = this.scene.getSelectedElements(this.state);
-    const [minX, minY, maxX, maxY] = getCommonBounds12(selectedElements);
+    const [minX, minY, maxX, maxY] = getCommonBounds11(selectedElements);
     const isElbowArrowOnly = selectedElements.findIndex(isElbowArrow10) === 0;
     return {
       origin,
@@ -40673,7 +40161,7 @@ var App = class _App extends React45.Component {
       DEFAULT_COLLISION_THRESHOLD / this.state.zoom.value,
       1
     );
-    const [x1, y1, x2, y2] = getCommonBounds12(selectedElements);
+    const [x1, y1, x2, y2] = getCommonBounds11(selectedElements);
     return point.x > x1 - threshold && point.x < x2 + threshold && point.y > y1 - threshold && point.y < y2 + threshold;
   }
   getCurrentItemRoundness(elementType) {
@@ -40749,7 +40237,7 @@ var App = class _App extends React45.Component {
         );
         let index = this.state.selectedLinearElement.initialState.segmentMidpoint.index;
         if (index < 0) {
-          const nextCoords = LinearElementEditor12.getSegmentMidpointHitCoords(
+          const nextCoords = LinearElementEditor11.getSegmentMidpointHitCoords(
             {
               ...this.state.selectedLinearElement,
               segmentMidPointHoveredCoords: null
@@ -40758,14 +40246,14 @@ var App = class _App extends React45.Component {
             this.state,
             this.scene.getNonDeletedElementsMap()
           );
-          index = nextCoords ? LinearElementEditor12.getSegmentMidPointIndex(
+          index = nextCoords ? LinearElementEditor11.getSegmentMidPointIndex(
             this.state.selectedLinearElement,
             this.state,
             nextCoords,
             this.scene.getNonDeletedElementsMap()
           ) : -1;
         }
-        const ret = LinearElementEditor12.moveFixedSegment(
+        const ret = LinearElementEditor11.moveFixedSegment(
           this.state.selectedLinearElement,
           index,
           gridX2,
@@ -40825,13 +40313,13 @@ var App = class _App extends React45.Component {
       const elementsMap = this.scene.getNonDeletedElementsMap();
       if (this.state.selectedLinearElement) {
         const linearElementEditor = this.state.selectedLinearElement;
-        if (LinearElementEditor12.shouldAddMidpoint(
+        if (LinearElementEditor11.shouldAddMidpoint(
           this.state.selectedLinearElement,
           pointerCoords,
           this.state,
           elementsMap
         )) {
-          const ret = LinearElementEditor12.addMidpoint(
+          const ret = LinearElementEditor11.addMidpoint(
             this.state.selectedLinearElement,
             pointerCoords,
             this,
@@ -40857,7 +40345,7 @@ var App = class _App extends React45.Component {
         } else if (linearElementEditor.initialState.segmentMidpoint.value !== null && !linearElementEditor.initialState.segmentMidpoint.added) {
           return;
         } else if (linearElementEditor.initialState.lastClickedPoint > -1) {
-          const element = LinearElementEditor12.getElement(
+          const element = LinearElementEditor11.getElement(
             linearElementEditor.elementId,
             elementsMap
           );
@@ -40865,8 +40353,8 @@ var App = class _App extends React45.Component {
             return;
           }
           if (isBindingElement4(element)) {
-            const hoveredElement = getHoveredElementForBinding3(
-              pointFrom30(pointerCoords.x, pointerCoords.y),
+            const hoveredElement = getHoveredElementForBinding2(
+              pointFrom29(pointerCoords.x, pointerCoords.y),
               this.scene.getNonDeletedElements(),
               elementsMap
             );
@@ -40880,7 +40368,7 @@ var App = class _App extends React45.Component {
           if (linearElementEditor.initialState.lastClickedPoint === -1) {
             return;
           }
-          const newState = LinearElementEditor12.handlePointDragging(
+          const newState = LinearElementEditor11.handlePointDragging(
             event,
             this,
             pointerCoords.x,
@@ -40967,22 +40455,22 @@ var App = class _App extends React45.Component {
                 );
                 const topLeft = vectorFromPoint10(
                   pointRotateRads19(
-                    pointFrom30(x1, y1),
-                    pointFrom30(cx, cy),
+                    pointFrom29(x1, y1),
+                    pointFrom29(cx, cy),
                     croppingElement.angle
                   )
                 );
                 const topRight = vectorFromPoint10(
                   pointRotateRads19(
-                    pointFrom30(x2, y1),
-                    pointFrom30(cx, cy),
+                    pointFrom29(x2, y1),
+                    pointFrom29(cx, cy),
                     croppingElement.angle
                   )
                 );
                 const bottomLeft = vectorFromPoint10(
                   pointRotateRads19(
-                    pointFrom30(x1, y2),
-                    pointFrom30(cx, cy),
+                    pointFrom29(x1, y2),
+                    pointFrom29(cx, cy),
                     croppingElement.angle
                   )
                 );
@@ -41108,7 +40596,7 @@ var App = class _App extends React45.Component {
             );
             const elementsWithIndices = syncMovedIndices4(
               mappedNewSceneElements || mappedClonedElements,
-              arrayToMap27(duplicatedElements)
+              arrayToMap26(duplicatedElements)
             );
             flushSync3(() => {
               if (pointerDownState.hit.element) {
@@ -41188,22 +40676,22 @@ var App = class _App extends React45.Component {
           );
         }
       } else {
-        const newElement6 = this.state.newElement;
-        if (!newElement6) {
+        const newElement5 = this.state.newElement;
+        if (!newElement5) {
           return;
         }
-        if (newElement6.type === "freedraw") {
-          const points = newElement6.points;
-          const dx = pointerCoords.x - newElement6.x;
-          const dy = pointerCoords.y - newElement6.y;
+        if (newElement5.type === "freedraw") {
+          const points = newElement5.points;
+          const dx = pointerCoords.x - newElement5.x;
+          const dy = pointerCoords.y - newElement5.y;
           const lastPoint = points.length > 0 && points[points.length - 1];
           const discardPoint = lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
           if (!discardPoint) {
-            const pressures = newElement6.simulatePressure ? newElement6.pressures : [...newElement6.pressures, event.pressure];
+            const pressures = newElement5.simulatePressure ? newElement5.pressures : [...newElement5.pressures, event.pressure];
             this.scene.mutateElement(
-              newElement6,
+              newElement5,
               {
-                points: [...points, pointFrom30(dx, dy)],
+                points: [...points, pointFrom29(dx, dy)],
                 pressures
               },
               {
@@ -41212,20 +40700,20 @@ var App = class _App extends React45.Component {
               }
             );
             this.setState({
-              newElement: newElement6
+              newElement: newElement5
             });
           }
-        } else if (isLinearElement12(newElement6) && !newElement6.isDeleted) {
+        } else if (isLinearElement12(newElement5) && !newElement5.isDeleted) {
           pointerDownState.drag.hasOccurred = true;
-          const points = newElement6.points;
+          const points = newElement5.points;
           invariant16(
             points.length > 1,
             "Do not create linear elements with less than 2 points"
           );
           let linearElementEditor = this.state.selectedLinearElement;
           if (!linearElementEditor) {
-            linearElementEditor = new LinearElementEditor12(
-              newElement6,
+            linearElementEditor = new LinearElementEditor11(
+              newElement5,
               this.scene.getNonDeletedElementsMap()
             );
             linearElementEditor = {
@@ -41238,8 +40726,8 @@ var App = class _App extends React45.Component {
             };
           }
           this.setState({
-            newElement: newElement6,
-            ...LinearElementEditor12.handlePointDragging(
+            newElement: newElement5,
+            ...LinearElementEditor11.handlePointDragging(
               event,
               this,
               gridX,
@@ -41257,7 +40745,7 @@ var App = class _App extends React45.Component {
         pointerDownState.boxSelection.hasOccurred = true;
         const elements = this.scene.getNonDeletedElements();
         if (this.state.selectedLinearElement?.isEditing) {
-          LinearElementEditor12.handleBoxSelection(
+          LinearElementEditor11.handleBoxSelection(
             event,
             this.state,
             this.setState.bind(this),
@@ -41320,7 +40808,7 @@ var App = class _App extends React45.Component {
                 this
               ),
               // select linear element only when we haven't box-selected anything else
-              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement12(elementsWithinSelection[0]) ? new LinearElementEditor12(
+              selectedLinearElement: elementsWithinSelection.length === 1 && isLinearElement12(elementsWithinSelection[0]) ? new LinearElementEditor11(
                 elementsWithinSelection[0],
                 this.scene.getNonDeletedElementsMap()
               ) : null,
@@ -41362,7 +40850,7 @@ var App = class _App extends React45.Component {
         pointerDownState.eventListeners.onMove.flush();
       }
       const {
-        newElement: newElement6,
+        newElement: newElement5,
         resizingElement,
         croppingElementId,
         multiElement,
@@ -41434,7 +40922,7 @@ var App = class _App extends React45.Component {
         if (!pointerDownState.boxSelection.hasOccurred && pointerDownState.hit?.element?.id !== this.state.selectedLinearElement.elementId) {
           this.actionManager.executeAction(actionFinalize);
         } else {
-          const editingLinearElement = LinearElementEditor12.handlePointerUp(
+          const editingLinearElement = LinearElementEditor11.handlePointerUp(
             childEvent,
             this.state.selectedLinearElement,
             this.state,
@@ -41453,7 +40941,7 @@ var App = class _App extends React45.Component {
         }
       } else if (this.state.selectedLinearElement) {
         if (this.state.selectedLinearElement.elbowed) {
-          const element = LinearElementEditor12.getElement(
+          const element = LinearElementEditor11.getElement(
             this.state.selectedLinearElement.elementId,
             this.scene.getNonDeletedElementsMap()
           );
@@ -41508,28 +40996,28 @@ var App = class _App extends React45.Component {
         pointerDownState,
         childEvent
       );
-      if (newElement6?.type === "freedraw") {
+      if (newElement5?.type === "freedraw") {
         const pointerCoords = viewportCoordsToSceneCoords3(
           childEvent,
           this.state
         );
-        const points = newElement6.points;
-        let dx = pointerCoords.x - newElement6.x;
-        let dy = pointerCoords.y - newElement6.y;
+        const points = newElement5.points;
+        let dx = pointerCoords.x - newElement5.x;
+        let dy = pointerCoords.y - newElement5.y;
         if (dx === points[0][0] && dy === points[0][1]) {
           dy += 1e-4;
           dx += 1e-4;
         }
-        const pressures = newElement6.simulatePressure ? [] : [...newElement6.pressures, childEvent.pressure];
-        this.scene.mutateElement(newElement6, {
-          points: [...points, pointFrom30(dx, dy)],
+        const pressures = newElement5.simulatePressure ? [] : [...newElement5.pressures, childEvent.pressure];
+        this.scene.mutateElement(newElement5, {
+          points: [...points, pointFrom29(dx, dy)],
           pressures
         });
         this.actionManager.executeAction(actionFinalize);
         return;
       }
-      if (isLinearElement12(newElement6)) {
-        if (newElement6.points.length > 1 && newElement6.points[1][0] !== 0 && newElement6.points[1][1] !== 0) {
+      if (isLinearElement12(newElement5)) {
+        if (newElement5.points.length > 1 && newElement5.points[1][0] !== 0 && newElement5.points[1][1] !== 0) {
           this.store.scheduleCapture();
         }
         const pointerCoords = viewportCoordsToSceneCoords3(
@@ -41537,44 +41025,44 @@ var App = class _App extends React45.Component {
           this.state
         );
         const dragDistance = pointDistance8(
-          pointFrom30(pointerCoords.x, pointerCoords.y),
-          pointFrom30(pointerDownState.origin.x, pointerDownState.origin.y)
+          pointFrom29(pointerCoords.x, pointerCoords.y),
+          pointFrom29(pointerDownState.origin.x, pointerDownState.origin.y)
         ) * this.state.zoom.value;
-        if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement6 && !multiElement) {
+        if ((!pointerDownState.drag.hasOccurred || dragDistance < MINIMUM_ARROW_SIZE) && newElement5 && !multiElement) {
           if (this.editorInterface.isTouchScreen) {
             const FIXED_DELTA_X = Math.min(
               this.state.width * 0.7 / this.state.zoom.value,
               100
             );
             this.scene.mutateElement(
-              newElement6,
+              newElement5,
               {
-                x: newElement6.x - FIXED_DELTA_X / 2,
+                x: newElement5.x - FIXED_DELTA_X / 2,
                 points: [
-                  pointFrom30(0, 0),
-                  pointFrom30(FIXED_DELTA_X, 0)
+                  pointFrom29(0, 0),
+                  pointFrom29(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;
+            const dx = pointerCoords.x - newElement5.x;
+            const dy = pointerCoords.y - newElement5.y;
             this.scene.mutateElement(
-              newElement6,
+              newElement5,
               {
-                points: [newElement6.points[0], pointFrom30(dx, dy)]
+                points: [newElement5.points[0], pointFrom29(dx, dy)]
               },
               { informMutation: false, isDragging: false }
             );
             this.setState({
-              multiElement: newElement6,
-              newElement: newElement6
+              multiElement: newElement5,
+              newElement: newElement5
             });
           }
         } else if (pointerDownState.drag.hasOccurred && !multiElement) {
-          if (isBindingElement4(newElement6, false)) {
+          if (isBindingElement4(newElement5, false)) {
             this.actionManager.executeAction(actionFinalize, "ui", {
               event: childEvent,
               sceneCoords
@@ -41591,12 +41079,12 @@ var App = class _App extends React45.Component {
               selectedElementIds: makeNextSelectedElementIds2(
                 {
                   ...prevState.selectedElementIds,
-                  [newElement6.id]: true
+                  [newElement5.id]: true
                 },
                 prevState
               ),
-              selectedLinearElement: new LinearElementEditor12(
-                newElement6,
+              selectedLinearElement: new LinearElementEditor11(
+                newElement5,
                 this.scene.getNonDeletedElementsMap()
               )
             }));
@@ -41609,27 +41097,27 @@ var App = class _App extends React45.Component {
         }
         return;
       }
-      if (isTextElement19(newElement6)) {
+      if (isTextElement19(newElement5)) {
         const minWidth = getMinTextElementWidth(
-          getFontString10({
-            fontSize: newElement6.fontSize,
-            fontFamily: newElement6.fontFamily
+          getFontString9({
+            fontSize: newElement5.fontSize,
+            fontFamily: newElement5.fontFamily
           }),
-          newElement6.lineHeight
+          newElement5.lineHeight
         );
-        if (newElement6.width < minWidth) {
-          this.scene.mutateElement(newElement6, {
+        if (newElement5.width < minWidth) {
+          this.scene.mutateElement(newElement5, {
             autoResize: true
           });
         }
         this.resetCursor();
-        this.handleTextWysiwyg(newElement6, {
+        this.handleTextWysiwyg(newElement5, {
           isExistingElement: true
         });
       }
-      if (activeTool.type !== "selection" && newElement6 && isInvisiblySmallElement3(newElement6)) {
+      if (activeTool.type !== "selection" && newElement5 && isInvisiblySmallElement3(newElement5)) {
         this.updateScene({
-          elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== newElement6.id),
+          elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== newElement5.id),
           appState: {
             newElement: null
           },
@@ -41637,25 +41125,25 @@ var App = class _App extends React45.Component {
         });
         return;
       }
-      if (isFrameLikeElement15(newElement6)) {
+      if (isFrameLikeElement15(newElement5)) {
         const elementsInsideFrame = getElementsInNewFrame(
           this.scene.getElementsIncludingDeleted(),
-          newElement6,
+          newElement5,
           this.scene.getNonDeletedElementsMap()
         );
         this.scene.replaceAllElements(
           addElementsToFrame2(
             this.scene.getElementsMapIncludingDeleted(),
             elementsInsideFrame,
-            newElement6,
+            newElement5,
             this.state
           )
         );
       }
-      if (newElement6) {
+      if (newElement5) {
         this.scene.mutateElement(
-          newElement6,
-          getNormalizedDimensions(newElement6),
+          newElement5,
+          getNormalizedDimensions(newElement5),
           {
             informMutation: false,
             isDragging: false
@@ -41792,7 +41280,7 @@ var App = class _App extends React45.Component {
         const selectedElements = this.scene.getSelectedElements(this.state);
         if (selectedElements.length === 1) {
           this.setState({
-            selectedLinearElement: new LinearElementEditor12(
+            selectedLinearElement: new LinearElementEditor11(
               hitElement,
               this.scene.getNonDeletedElementsMap()
             )
@@ -41813,8 +41301,8 @@ var App = class _App extends React45.Component {
       if (isEraserActive(this.state) && pointerStart && pointerEnd) {
         this.eraserTrail.endPath();
         const draggedDistance = pointDistance8(
-          pointFrom30(pointerStart.clientX, pointerStart.clientY),
-          pointFrom30(pointerEnd.clientX, pointerEnd.clientY)
+          pointFrom29(pointerStart.clientX, pointerStart.clientY),
+          pointFrom29(pointerEnd.clientX, pointerEnd.clientY)
         );
         if (draggedDistance === 0) {
           const scenePointer = viewportCoordsToSceneCoords3(
@@ -41889,7 +41377,7 @@ var App = class _App extends React45.Component {
                     this
                   ),
                   // set selectedLinearElement only if thats the only element selected
-                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement12(newSelectedElements[0]) ? new LinearElementEditor12(
+                  selectedLinearElement: newSelectedElements.length === 1 && isLinearElement12(newSelectedElements[0]) ? new LinearElementEditor11(
                     newSelectedElements[0],
                     this.scene.getNonDeletedElementsMap()
                   ) : prevState.selectedLinearElement
@@ -41945,7 +41433,7 @@ var App = class _App extends React45.Component {
             ),
             selectedLinearElement: isLinearElement12(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 LinearElementEditor12(
+            prevState.selectedLinearElement?.elementId !== hitElement.id ? new LinearElementEditor11(
               hitElement,
               this.scene.getNonDeletedElementsMap()
             ) : prevState.selectedLinearElement
@@ -41960,7 +41448,7 @@ var App = class _App extends React45.Component {
         !this.state.isResizing && // only hitting the bounding box of the previous hit element
         (hitElement && hitElementBoundingBoxOnly(
           {
-            point: pointFrom30(
+            point: pointFrom29(
               pointerDownState.origin.x,
               pointerDownState.origin.y
             ),
@@ -41985,16 +41473,16 @@ var App = class _App extends React45.Component {
         setCursor(this.interactiveCanvas, CURSOR_TYPE4.AUTO);
         return;
       }
-      if (!activeTool.locked && activeTool.type !== "freedraw" && newElement6) {
+      if (!activeTool.locked && activeTool.type !== "freedraw" && newElement5) {
         this.setState((prevState) => ({
           selectedElementIds: makeNextSelectedElementIds2(
             {
               ...prevState.selectedElementIds,
-              [newElement6.id]: true
+              [newElement5.id]: true
             },
             prevState
           ),
-          showHyperlinkPopup: isEmbeddableElement4(newElement6) && !newElement6.link ? "editor" : prevState.showHyperlinkPopup
+          showHyperlinkPopup: isEmbeddableElement4(newElement5) && !newElement5.link ? "editor" : prevState.showHyperlinkPopup
         }));
       }
       if (activeTool.type !== "selection" || isSomeElementSelected(this.scene.getNonDeletedElements(), this.state) || !isShallowEqual9(
@@ -42004,7 +41492,7 @@ var App = class _App extends React45.Component {
         this.store.scheduleCapture();
       }
       if (pointerDownState.drag.hasOccurred && !this.state.selectedLinearElement || isResizing || isRotating || isCropping) {
-        const linearElements = this.scene.getSelectedElements(this.state).filter(isArrowElement14);
+        const linearElements = this.scene.getSelectedElements(this.state).filter(isArrowElement13);
         bindOrUnbindBindingElements2(linearElements, this.scene, this.state);
       }
       if (activeTool.type === "laser") {
@@ -42101,7 +41589,7 @@ var App = class _App extends React45.Component {
   }
 };
 var createTestHook = () => {
-  if (isTestEnv5() || isDevEnv10()) {
+  if (isTestEnv5() || isDevEnv9()) {
     window.h = window.h || {};
     Object.defineProperties(window.h, {
       elements: {
@@ -42111,7 +41599,7 @@ var createTestHook = () => {
         },
         set(elements) {
           return this.app?.scene.replaceAllElements(
-            syncInvalidIndices2(elements)
+            syncInvalidIndices(elements)
           );
         }
       },
@@ -42470,10 +41958,10 @@ import { isInvisiblySmallElement as isInvisiblySmallElement4 } from "@excalidraw
 
 // data/reconcile.ts
 import throttle4 from "lodash.throttle";
-import { arrayToMap as arrayToMap28, isDevEnv as isDevEnv11, isTestEnv as isTestEnv6 } from "@excalidraw/common";
+import { arrayToMap as arrayToMap27, isDevEnv as isDevEnv10, isTestEnv as isTestEnv6 } from "@excalidraw/common";
 import {
   orderByFractionalIndex as orderByFractionalIndex2,
-  syncInvalidIndices as syncInvalidIndices3,
+  syncInvalidIndices as syncInvalidIndices2,
   validateFractionalIndices
 } from "@excalidraw/element";
 var shouldDiscardRemoteElement = (localAppState, local, remote) => {
@@ -42481,20 +41969,20 @@ var shouldDiscardRemoteElement = (localAppState, local, remote) => {
   (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)) {
+  local.version === remote.version && local.versionNonce <= remote.versionNonce)) {
     return true;
   }
   return false;
 };
 var validateIndicesThrottled = throttle4(
   (orderedElements, localElements, remoteElements) => {
-    if (isDevEnv11() || isTestEnv6() || window?.DEBUG_FRACTIONAL_INDICES) {
-      const elements = syncInvalidIndices3(
+    if (isDevEnv10() || isTestEnv6() || window?.DEBUG_FRACTIONAL_INDICES) {
+      const elements = syncInvalidIndices2(
         orderedElements.map((x) => ({ ...x }))
       );
       validateFractionalIndices(elements, {
         // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: isTestEnv6() || isDevEnv11(),
+        shouldThrow: isTestEnv6() || isDevEnv10(),
         includeBoundTextValidation: true,
         reconciliationContext: {
           localElements,
@@ -42507,7 +41995,7 @@ var validateIndicesThrottled = throttle4(
   { leading: true, trailing: false }
 );
 var reconcileElements = (localElements, remoteElements, localAppState) => {
-  const localElementsMap = arrayToMap28(localElements);
+  const localElementsMap = arrayToMap27(localElements);
   const reconciledElements = [];
   const added = /* @__PURE__ */ new Set();
   for (const remoteElement of remoteElements) {
@@ -42535,16 +42023,15 @@ var reconcileElements = (localElements, remoteElements, localAppState) => {
   }
   const orderedElements = orderByFractionalIndex2(reconciledElements);
   validateIndicesThrottled(orderedElements, localElements, remoteElements);
-  syncInvalidIndices3(orderedElements);
+  syncInvalidIndices2(orderedElements);
   return orderedElements;
 };
 
 // index.tsx
-import { getFreeDrawSvgPath as getFreeDrawSvgPath2 } from "@excalidraw/element";
 import { isLinearElement as isLinearElement13 } from "@excalidraw/element";
 import {
   FONT_FAMILY as FONT_FAMILY5,
-  THEME as THEME16,
+  THEME as THEME18,
   MIME_TYPES as MIME_TYPES10,
   ROUNDNESS as ROUNDNESS3,
   DEFAULT_LASER_COLOR as DEFAULT_LASER_COLOR2,
@@ -42588,7 +42075,11 @@ var TTDDialogTrigger = ({
 TTDDialogTrigger.displayName = "TTDDialogTrigger";
 
 // index.tsx
-import { getCommonBounds as getCommonBounds13, getVisibleSceneBounds as getVisibleSceneBounds2 } from "@excalidraw/element";
+import {
+  getCommonBounds as getCommonBounds12,
+  getVisibleSceneBounds as getVisibleSceneBounds2,
+  convertToExcalidrawElements
+} from "@excalidraw/element";
 
 // components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
 import { useLayoutEffect as useLayoutEffect9 } from "react";
@@ -42772,7 +42263,7 @@ export {
   ROUNDNESS3 as ROUNDNESS,
   Sidebar,
   Stats,
-  THEME16 as THEME,
+  THEME18 as THEME,
   TTDDialog,
   TTDDialogTrigger,
   UserIdleState2 as UserIdleState,
@@ -42786,10 +42277,9 @@ export {
   exportToCanvas2 as exportToCanvas,
   exportToClipboard,
   exportToSvg2 as exportToSvg,
-  getCommonBounds13 as getCommonBounds,
+  getCommonBounds12 as getCommonBounds,
   getDataURL,
   getFormFactor2 as getFormFactor,
-  getFreeDrawSvgPath2 as getFreeDrawSvgPath,
   getLibraryItemsHash,
   getNonDeletedElements13 as getNonDeletedElements,
   getSceneVersion,
@@ -42811,7 +42301,6 @@ export {
   normalizeLink4 as normalizeLink,
   parseLibraryTokensFromUrl,
   reconcileElements,
-  restore,
   restoreAppState,
   restoreElement,
   restoreElements,