@excalidraw/excalidraw 0.18.0-b9d27d3 → 0.18.0-c158187

package/dist/dev/{chunk-WWDIUJ2Q.js → chunk-5A4X24JB.js}

@@ -9,17 +9,16 @@ import {
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
 import decodePng from "png-chunks-extract";
-import { EXPORT_DATA_TYPES as EXPORT_DATA_TYPES3, MIME_TYPES as MIME_TYPES7 } from "@excalidraw/common";
+import { EXPORT_DATA_TYPES as EXPORT_DATA_TYPES3, MIME_TYPES as MIME_TYPES6 } from "@excalidraw/common";
 
 // data/blob.ts
 import { nanoid } from "nanoid";
 import {
   IMAGE_MIME_TYPES,
-  MIME_TYPES as MIME_TYPES6,
+  MIME_TYPES as MIME_TYPES5,
   bytesToHexString,
   isPromiseLike
 } from "@excalidraw/common";
-import { clearElementsForExport as clearElementsForExport2 } from "@excalidraw/element";
 
 // appState.ts
 import {
@@ -70,6 +69,10 @@ var getDefaultAppState = () => {
       fromSelection: false,
       lastActiveTool: null
     },
+    preferredSelectionTool: {
+      type: "selection",
+      initialized: false
+    },
     penMode: false,
     penDetected: false,
     errorMessage: null,
@@ -111,7 +114,7 @@ var getDefaultAppState = () => {
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties
     },
     startBoundElement: null,
-    suggestedBindings: [],
+    suggestedBinding: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
     editingFrame: null,
@@ -137,7 +140,8 @@ var getDefaultAppState = () => {
     croppingElementId: null,
     searchMatches: null,
     lockedMultiSelections: {},
-    activeLockedId: null
+    activeLockedId: null,
+    bindMode: "orbit"
   };
 };
 var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
@@ -174,6 +178,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   editingTextElement: { browser: false, export: false, server: false },
   editingGroupId: { browser: true, export: false, server: false },
   activeTool: { browser: true, export: false, server: false },
+  preferredSelectionTool: { browser: true, export: false, server: false },
   penMode: { browser: true, export: false, server: false },
   penDetected: { browser: true, export: false, server: false },
   errorMessage: { browser: false, export: false, server: false },
@@ -223,7 +228,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
   startBoundElement: { browser: false, export: false, server: false },
-  suggestedBindings: { browser: false, export: false, server: false },
+  suggestedBinding: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
   editingFrame: { browser: false, export: false, server: false },
@@ -245,7 +250,8 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },
   lockedMultiSelections: { browser: true, export: true, server: true },
-  activeLockedId: { browser: false, export: false, server: false }
+  activeLockedId: { browser: false, export: false, server: false },
+  bindMode: { browser: true, export: false, server: false }
 });
 var _clearAppStateForStorage = (appState, exportType) => {
   const stateForExport = {};
@@ -416,14 +422,14 @@ import {
   FRAME_STYLE as FRAME_STYLE3,
   FONT_FAMILY as FONT_FAMILY2,
   SVG_NS as SVG_NS2,
-  THEME as THEME3,
-  THEME_FILTER as THEME_FILTER2,
-  MIME_TYPES as MIME_TYPES5,
+  THEME as THEME5,
+  MIME_TYPES as MIME_TYPES4,
   EXPORT_DATA_TYPES as EXPORT_DATA_TYPES2,
   arrayToMap,
   distance,
   getFontString as getFontString2,
-  toBrandedType
+  toBrandedType,
+  applyDarkModeFilter as applyDarkModeFilter4
 } from "@excalidraw/common";
 import { getCommonBounds as getCommonBounds2, getElementAbsoluteCoords as getElementAbsoluteCoords4 } from "@excalidraw/element";
 import {
@@ -517,10 +523,6 @@ import {
   MIME_TYPES as MIME_TYPES2,
   VERSIONS
 } from "@excalidraw/common";
-import {
-  clearElementsForDatabase,
-  clearElementsForExport
-} from "@excalidraw/element";
 
 // data/filesystem.ts
 import {
@@ -529,8 +531,8 @@ import {
   supported as nativeFileSystemSupported
 } from "browser-fs-access";
 import { EVENT, MIME_TYPES, debounce } from "@excalidraw/common";
-var INPUT_CHANGE_INTERVAL_MS = 500;
-var fileOpen = (opts) => {
+var INPUT_CHANGE_INTERVAL_MS = 5e3;
+var fileOpen = async (opts) => {
   const mimeTypes = opts.extensions?.reduce((mimeTypes2, type) => {
     mimeTypes2.push(MIME_TYPES[type]);
     return mimeTypes2;
@@ -541,7 +543,7 @@ var fileOpen = (opts) => {
     }
     return acc.concat(`.${ext}`);
   }, []);
-  return _fileOpen({
+  const files = await _fileOpen({
     description: opts.description,
     extensions,
     mimeTypes,
@@ -579,6 +581,12 @@ var fileOpen = (opts) => {
       };
     }
   });
+  if (Array.isArray(files)) {
+    return await Promise.all(
+      files.map((file) => normalizeFile(file))
+    );
+  }
+  return await normalizeFile(files);
 };
 var fileSave = (blob, opts) => {
   return _fileSave(
@@ -608,7 +616,7 @@ var serializeAsJSON = (elements, appState, files, type) => {
     type: EXPORT_DATA_TYPES.excalidraw,
     version: VERSIONS.excalidraw,
     source: getExportSource(),
-    elements: type === "local" ? clearElementsForExport(elements) : clearElementsForDatabase(elements),
+    elements,
     appState: type === "local" ? cleanAppStateForExport(appState) : clearAppStateForDatabase(appState),
     files: type === "local" ? filterOutDeletedFiles(elements, files) : (
       // will be stripped from JSON
@@ -637,12 +645,7 @@ var loadFromJSON = async (localAppState, localElements) => {
     // gets resolved. Else, iOS users cannot open `.excalidraw` files.
     // extensions: ["json", "excalidraw", "png", "svg"],
   });
-  return loadFromBlob(
-    await normalizeFile(file),
-    localAppState,
-    localElements,
-    file.handle
-  );
+  return loadFromBlob(file, localAppState, localElements, file.handle);
 };
 var isValidExcalidrawData = (data) => {
   return data?.type === EXPORT_DATA_TYPES.excalidraw && (!data.elements || Array.isArray(data.elements) && (!data.appState || typeof data.appState === "object"));
@@ -679,7 +682,8 @@ import {
   FONT_FAMILY_FALLBACKS,
   CJK_HAND_DRAWN_FALLBACK_FONT,
   WINDOWS_EMOJI_FALLBACK_FONT,
-  getFontFamilyFallbacks
+  getFontFamilyFallbacks,
+  FONT_SIZES
 } from "@excalidraw/common";
 import { getContainerElement } from "@excalidraw/element";
 import { charWidth } from "@excalidraw/element";
@@ -2908,7 +2912,7 @@ var _Fonts = class _Fonts {
     for (const [index, fontFamily] of fontFamilies.entries()) {
       const font = getFontString({
         fontFamily,
-        fontSize: 16
+        fontSize: FONT_SIZES.sm
       });
       const text = _Fonts.getCharacters(charsPerFamily, fontFamily);
       if (!window.document.fonts.check(font, text)) {
@@ -3065,7 +3069,12 @@ __publicField(_Fonts, "loadElementsFonts", async (elements) => {
 var Fonts = _Fonts;
 
 // renderer/staticScene.ts
-import { FRAME_STYLE, throttleRAF } from "@excalidraw/common";
+import {
+  applyDarkModeFilter as applyDarkModeFilter2,
+  FRAME_STYLE,
+  THEME as THEME3,
+  throttleRAF
+} from "@excalidraw/common";
 import { isElementLink } from "@excalidraw/element";
 import { createPlaceholderEmbeddableLabel } from "@excalidraw/element";
 import { getBoundTextElement } from "@excalidraw/element";
@@ -3147,19 +3156,7 @@ var isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
 };
 
 // renderer/helpers.ts
-import { THEME as THEME2, THEME_FILTER } from "@excalidraw/common";
-import { FIXED_BINDING_DISTANCE } from "@excalidraw/element";
-import { getDiamondPoints } from "@excalidraw/element";
-import { elementCenterPoint, getCornerRadius } from "@excalidraw/element";
-import {
-  curve,
-  curveCatmullRomCubicApproxPoints,
-  curveCatmullRomQuadraticApproxPoints,
-  curveOffsetPoints,
-  offsetPointsForQuadraticBezier,
-  pointFrom as pointFrom2,
-  pointRotateRads as pointRotateRads2
-} from "@excalidraw/math";
+import { THEME as THEME2, applyDarkModeFilter } from "@excalidraw/common";
 var fillCircle = (context, cx, cy, radius, stroke, fill = true) => {
   context.beginPath();
   context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -3185,9 +3182,6 @@ var bootstrapCanvas = ({
   const context = canvas.getContext("2d");
   context.setTransform(1, 0, 0, 1, 0, 0);
   context.scale(scale, scale);
-  if (isExporting && theme === THEME2.DARK) {
-    context.filter = THEME_FILTER;
-  }
   if (typeof viewBackgroundColor === "string") {
     const hasTransparence = viewBackgroundColor === "transparent" || viewBackgroundColor.length === 5 || // #RGBA
     viewBackgroundColor.length === 9 || // #RRGGBBA
@@ -3196,7 +3190,7 @@ var bootstrapCanvas = ({
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle = viewBackgroundColor;
+    context.fillStyle = theme === THEME2.DARK ? applyDarkModeFilter(viewBackgroundColor) : viewBackgroundColor;
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {
@@ -3204,127 +3198,7 @@ var bootstrapCanvas = ({
   }
   return context;
 };
-function drawCatmullRomQuadraticApprox(ctx, points, tension = 0.5) {
-  const pointSets = curveCatmullRomQuadraticApproxPoints(points, tension);
-  if (pointSets) {
-    for (let i = 0; i < pointSets.length - 1; i++) {
-      const [[cpX, cpY], [p2X, p2Y]] = pointSets[i];
-      ctx.quadraticCurveTo(cpX, cpY, p2X, p2Y);
-    }
-  }
-}
-function drawCatmullRomCubicApprox(ctx, points, tension = 0.5) {
-  const pointSets = curveCatmullRomCubicApproxPoints(points, tension);
-  if (pointSets) {
-    for (let i = 0; i < pointSets.length; i++) {
-      const [[cp1x, cp1y], [cp2x, cp2y], [x, y]] = pointSets[i];
-      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-    }
-  }
-}
-var drawHighlightForRectWithRotation = (context, element, elementsMap, padding) => {
-  const [x, y] = pointRotateRads2(
-    pointFrom2(element.x, element.y),
-    elementCenterPoint(element, elementsMap),
-    element.angle
-  );
-  context.save();
-  context.translate(x, y);
-  context.rotate(element.angle);
-  let radius = getCornerRadius(
-    Math.min(element.width, element.height),
-    element
-  );
-  if (radius === 0) {
-    radius = 0.01;
-  }
-  context.beginPath();
-  {
-    const topLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(0, 0 + radius),
-      pointFrom2(0, 0),
-      pointFrom2(0 + radius, 0),
-      padding
-    );
-    const topRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width - radius, 0),
-      pointFrom2(element.width, 0),
-      pointFrom2(element.width, radius),
-      padding
-    );
-    const bottomRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width, element.height - radius),
-      pointFrom2(element.width, element.height),
-      pointFrom2(element.width - radius, element.height),
-      padding
-    );
-    const bottomLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(radius, element.height),
-      pointFrom2(0, element.height),
-      pointFrom2(0, element.height - radius),
-      padding
-    );
-    context.moveTo(
-      topLeftApprox[topLeftApprox.length - 1][0],
-      topLeftApprox[topLeftApprox.length - 1][1]
-    );
-    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topRightApprox);
-    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
-    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
-    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topLeftApprox);
-  }
-  {
-    const topLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(0 + radius, 0),
-      pointFrom2(0, 0),
-      pointFrom2(0, 0 + radius),
-      -FIXED_BINDING_DISTANCE
-    );
-    const topRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width, radius),
-      pointFrom2(element.width, 0),
-      pointFrom2(element.width - radius, 0),
-      -FIXED_BINDING_DISTANCE
-    );
-    const bottomRightApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(element.width - radius, element.height),
-      pointFrom2(element.width, element.height),
-      pointFrom2(element.width, element.height - radius),
-      -FIXED_BINDING_DISTANCE
-    );
-    const bottomLeftApprox = offsetPointsForQuadraticBezier(
-      pointFrom2(0, element.height - radius),
-      pointFrom2(0, element.height),
-      pointFrom2(radius, element.height),
-      -FIXED_BINDING_DISTANCE
-    );
-    context.moveTo(
-      topLeftApprox[topLeftApprox.length - 1][0],
-      topLeftApprox[topLeftApprox.length - 1][1]
-    );
-    context.lineTo(bottomLeftApprox[0][0], bottomLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomLeftApprox);
-    context.lineTo(bottomRightApprox[0][0], bottomRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, bottomRightApprox);
-    context.lineTo(topRightApprox[0][0], topRightApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topRightApprox);
-    context.lineTo(topLeftApprox[0][0], topLeftApprox[0][1]);
-    drawCatmullRomQuadraticApprox(context, topLeftApprox);
-  }
-  context.closePath();
-  context.fill();
-  context.restore();
-};
-var strokeEllipseWithRotation = (context, width, height, cx, cy, angle) => {
-  context.beginPath();
-  context.ellipse(cx, cy, width / 2, height / 2, angle, 0, Math.PI * 2);
-  context.stroke();
-};
-var strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill = false, radius = 0) => {
+var strokeRectWithRotation_simple = (context, x, y, width, height, cx, cy, angle, fill = false, radius = 0) => {
   context.save();
   context.translate(cx, cy);
   context.rotate(angle);
@@ -3341,133 +3215,19 @@ var strokeRectWithRotation = (context, x, y, width, height, cx, cy, angle, fill
   }
   context.restore();
 };
-var drawHighlightForDiamondWithRotation = (context, padding, element, elementsMap) => {
-  const [x, y] = pointRotateRads2(
-    pointFrom2(element.x, element.y),
-    elementCenterPoint(element, elementsMap),
-    element.angle
-  );
-  context.save();
-  context.translate(x, y);
-  context.rotate(element.angle);
-  {
-    context.beginPath();
-    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
-    const verticalRadius = element.roundness ? getCornerRadius(Math.abs(topX - leftX), element) : (topX - leftX) * 0.01;
-    const horizontalRadius = element.roundness ? getCornerRadius(Math.abs(rightY - topY), element) : (rightY - topY) * 0.01;
-    const topApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(topX - verticalRadius, topY + horizontalRadius),
-        pointFrom2(topX, topY),
-        pointFrom2(topX, topY),
-        pointFrom2(topX + verticalRadius, topY + horizontalRadius)
-      ),
-      padding
-    );
-    const rightApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(rightX - verticalRadius, rightY - horizontalRadius),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX - verticalRadius, rightY + horizontalRadius)
-      ),
-      padding
-    );
-    const bottomApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(bottomX + verticalRadius, bottomY - horizontalRadius),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX - verticalRadius, bottomY - horizontalRadius)
-      ),
-      padding
-    );
-    const leftApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(leftX + verticalRadius, leftY + horizontalRadius),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX + verticalRadius, leftY - horizontalRadius)
-      ),
-      padding
-    );
-    context.moveTo(
-      topApprox[topApprox.length - 1][0],
-      topApprox[topApprox.length - 1][1]
-    );
-    context.lineTo(rightApprox[1][0], rightApprox[1][1]);
-    drawCatmullRomCubicApprox(context, rightApprox);
-    context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
-    drawCatmullRomCubicApprox(context, bottomApprox);
-    context.lineTo(leftApprox[1][0], leftApprox[1][1]);
-    drawCatmullRomCubicApprox(context, leftApprox);
-    context.lineTo(topApprox[1][0], topApprox[1][1]);
-    drawCatmullRomCubicApprox(context, topApprox);
-  }
-  {
-    const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = getDiamondPoints(element);
-    const verticalRadius = element.roundness ? getCornerRadius(Math.abs(topX - leftX), element) : (topX - leftX) * 0.01;
-    const horizontalRadius = element.roundness ? getCornerRadius(Math.abs(rightY - topY), element) : (rightY - topY) * 0.01;
-    const topApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(topX + verticalRadius, topY + horizontalRadius),
-        pointFrom2(topX, topY),
-        pointFrom2(topX, topY),
-        pointFrom2(topX - verticalRadius, topY + horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    const rightApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(rightX - verticalRadius, rightY + horizontalRadius),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX, rightY),
-        pointFrom2(rightX - verticalRadius, rightY - horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    const bottomApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(bottomX - verticalRadius, bottomY - horizontalRadius),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX, bottomY),
-        pointFrom2(bottomX + verticalRadius, bottomY - horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    const leftApprox = curveOffsetPoints(
-      curve(
-        pointFrom2(leftX + verticalRadius, leftY - horizontalRadius),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX, leftY),
-        pointFrom2(leftX + verticalRadius, leftY + horizontalRadius)
-      ),
-      -FIXED_BINDING_DISTANCE
-    );
-    context.moveTo(
-      topApprox[topApprox.length - 1][0],
-      topApprox[topApprox.length - 1][1]
-    );
-    context.lineTo(leftApprox[1][0], leftApprox[1][1]);
-    drawCatmullRomCubicApprox(context, leftApprox);
-    context.lineTo(bottomApprox[1][0], bottomApprox[1][1]);
-    drawCatmullRomCubicApprox(context, bottomApprox);
-    context.lineTo(rightApprox[1][0], rightApprox[1][1]);
-    drawCatmullRomCubicApprox(context, rightApprox);
-    context.lineTo(topApprox[1][0], topApprox[1][1]);
-    drawCatmullRomCubicApprox(context, topApprox);
-  }
-  context.closePath();
-  context.fill();
-  context.restore();
-};
 
 // renderer/staticScene.ts
 var GridLineColor = {
-  Bold: "#dddddd",
-  Regular: "#e5e5e5"
+  [THEME3.LIGHT]: {
+    bold: "#dddddd",
+    regular: "#e5e5e5"
+  },
+  [THEME3.DARK]: {
+    bold: applyDarkModeFilter2("#dddddd"),
+    regular: applyDarkModeFilter2("#e5e5e5")
+  }
 };
-var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, width, height) => {
+var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, theme, width, height) => {
   const offsetX = scrollX % gridSize - gridSize;
   const offsetY = scrollY % gridSize - gridSize;
   const actualGridSize = gridSize * zoom.value;
@@ -3486,7 +3246,7 @@ var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, width, he
     const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
     context.beginPath();
     context.setLineDash(isBold ? [] : lineDash);
-    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
+    context.strokeStyle = isBold ? GridLineColor[theme].bold : GridLineColor[theme].regular;
     context.moveTo(x, offsetY - gridSize);
     context.lineTo(x, Math.ceil(offsetY + height + gridSize * 2));
     context.stroke();
@@ -3501,7 +3261,7 @@ var strokeGrid = (context, gridSize, gridStep, scrollX, scrollY, zoom, width, he
     const lineDash = [lineWidth * 3, spaceWidth + (lineWidth + spaceWidth)];
     context.beginPath();
     context.setLineDash(isBold ? [] : lineDash);
-    context.strokeStyle = isBold ? GridLineColor.Bold : GridLineColor.Regular;
+    context.strokeStyle = isBold ? GridLineColor[theme].bold : GridLineColor[theme].regular;
     context.moveTo(offsetX - gridSize, y);
     context.lineTo(Math.ceil(offsetX + width + gridSize * 2), y);
     context.stroke();
@@ -3614,6 +3374,7 @@ var _renderStaticScene = ({
       appState.scrollX,
       appState.scrollY,
       appState.zoom,
+      renderConfig.theme,
       normalizedWidth / appState.zoom.value,
       normalizedHeight / appState.zoom.value
     );
@@ -3780,12 +3541,13 @@ var renderStaticScene = (renderConfig, throttle) => {
 import {
   FRAME_STYLE as FRAME_STYLE2,
   MAX_DECIMALS_FOR_SVG_EXPORT,
-  MIME_TYPES as MIME_TYPES4,
   SVG_NS,
+  THEME as THEME4,
   getFontFamilyString,
   isRTL,
   isTestEnv as isTestEnv2,
-  getVerticalOffset
+  getVerticalOffset,
+  applyDarkModeFilter as applyDarkModeFilter3
 } from "@excalidraw/common";
 import { normalizeLink, toValidURL } from "@excalidraw/common";
 import { hashString } from "@excalidraw/element";
@@ -3804,9 +3566,8 @@ import {
   isTextElement as isTextElement3
 } from "@excalidraw/element";
 import { getContainingFrame } from "@excalidraw/element";
-import { getCornerRadius as getCornerRadius2, isPathALoop } from "@excalidraw/element";
+import { getCornerRadius, isPathALoop } from "@excalidraw/element";
 import { ShapeCache as ShapeCache2 } from "@excalidraw/element";
-import { getFreeDrawSvgPath, IMAGE_INVERT_FILTER } from "@excalidraw/element";
 import { getElementAbsoluteCoords as getElementAbsoluteCoords3 } from "@excalidraw/element";
 var roughSVGDrawWithPrecision = (rsvg, drawable, precision) => {
   if (typeof precision === "undefined") {
@@ -3874,7 +3635,7 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
     case "rectangle":
     case "diamond":
     case "ellipse": {
-      const shape = ShapeCache2.generateElementShape(element, null);
+      const shape = ShapeCache2.generateElementShape(element, renderConfig);
       const node = roughSVGDrawWithPrecision(
         rsvg,
         shape,
@@ -3942,7 +3703,7 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
       while (embeddableNode.firstChild) {
         embeddableNode.removeChild(embeddableNode.firstChild);
       }
-      const radius = getCornerRadius2(
+      const radius = getCornerRadius(
         Math.min(element.width, element.height),
         element
       );
@@ -4067,36 +3828,49 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
       break;
     }
     case "freedraw": {
-      const backgroundFillShape = ShapeCache2.generateElementShape(
-        element,
-        renderConfig
-      );
-      const node = backgroundFillShape ? roughSVGDrawWithPrecision(
-        rsvg,
-        backgroundFillShape,
-        MAX_DECIMALS_FOR_SVG_EXPORT
-      ) : svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
+      const wrapper = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
+      const shapes = ShapeCache2.generateElementShape(element, renderConfig);
+      for (const shape of shapes) {
+        if (typeof shape === "string") {
+          const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
+          path.setAttribute(
+            "fill",
+            renderConfig.theme === THEME4.DARK ? applyDarkModeFilter3(element.strokeColor) : element.strokeColor
+          );
+          path.setAttribute("d", shape);
+          wrapper.appendChild(path);
+        } else {
+          const bgNode = roughSVGDrawWithPrecision(
+            rsvg,
+            shape,
+            MAX_DECIMALS_FOR_SVG_EXPORT
+          );
+          if (bgNode.nodeName === "g") {
+            while (bgNode.firstChild) {
+              wrapper.appendChild(bgNode.firstChild);
+            }
+          } else {
+            wrapper.appendChild(bgNode);
+          }
+        }
+      }
       if (opacity !== 1) {
-        node.setAttribute("stroke-opacity", `${opacity}`);
-        node.setAttribute("fill-opacity", `${opacity}`);
+        wrapper.setAttribute("stroke-opacity", `${opacity}`);
+        wrapper.setAttribute("fill-opacity", `${opacity}`);
       }
-      node.setAttribute(
+      wrapper.setAttribute(
         "transform",
         `translate(${offsetX || 0} ${offsetY || 0}) rotate(${degree} ${cx} ${cy})`
       );
-      node.setAttribute("stroke", "none");
-      const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
-      path.setAttribute("fill", element.strokeColor);
-      path.setAttribute("d", getFreeDrawSvgPath(element));
-      node.appendChild(path);
+      wrapper.setAttribute("stroke", "none");
       const g = maybeWrapNodesInFrameClipPath(
         element,
         root,
-        [node],
+        [wrapper],
         renderConfig.frameRendering,
         elementsMap
       );
-      addToRoot(g || node, element);
+      addToRoot(g || wrapper, element);
       break;
     }
     case "image": {
@@ -4136,9 +3910,6 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
         }
         const use = svgRoot.ownerDocument.createElementNS(SVG_NS, "use");
         use.setAttribute("href", `#${symbolId}`);
-        if (renderConfig.exportWithDarkMode && fileData.mimeType !== MIME_TYPES4.svg) {
-          use.setAttribute("filter", IMAGE_INVERT_FILTER);
-        }
         let normalizedCropX = 0;
         let normalizedCropY = 0;
         if (element.crop) {
@@ -4185,14 +3956,19 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
             "clipPath"
           );
           clipPath.id = `image-clipPath-${element.id}`;
+          clipPath.setAttribute("clipPathUnits", "userSpaceOnUse");
           const clipRect = svgRoot.ownerDocument.createElementNS(
             SVG_NS,
             "rect"
           );
-          const radius = getCornerRadius2(
+          const radius = getCornerRadius(
             Math.min(element.width, element.height),
             element
           );
+          const clipOffsetX = element.crop ? normalizedCropX : 0;
+          const clipOffsetY = element.crop ? normalizedCropY : 0;
+          clipRect.setAttribute("x", `${clipOffsetX}`);
+          clipRect.setAttribute("y", `${clipOffsetY}`);
           clipRect.setAttribute("width", `${element.width}`);
           clipRect.setAttribute("height", `${element.height}`);
           clipRect.setAttribute("rx", `${radius}`);
@@ -4225,7 +4001,10 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
         rect.setAttribute("rx", FRAME_STYLE2.radius.toString());
         rect.setAttribute("ry", FRAME_STYLE2.radius.toString());
         rect.setAttribute("fill", "none");
-        rect.setAttribute("stroke", FRAME_STYLE2.strokeColor);
+        rect.setAttribute(
+          "stroke",
+          renderConfig.theme === THEME4.DARK ? applyDarkModeFilter3(FRAME_STYLE2.strokeColor) : FRAME_STYLE2.strokeColor
+        );
         rect.setAttribute("stroke-width", FRAME_STYLE2.strokeWidth.toString());
         addToRoot(rect, element);
       }
@@ -4262,7 +4041,10 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
           text.setAttribute("y", `${i * lineHeightPx + verticalOffset}`);
           text.setAttribute("font-family", getFontFamilyString(element));
           text.setAttribute("font-size", `${element.fontSize}px`);
-          text.setAttribute("fill", element.strokeColor);
+          text.setAttribute(
+            "fill",
+            renderConfig.theme === THEME4.DARK ? applyDarkModeFilter3(element.strokeColor) : element.strokeColor
+          );
           text.setAttribute("text-anchor", textAnchor);
           text.setAttribute("style", "white-space: pre;");
           text.setAttribute("direction", direction);
@@ -4475,7 +4257,7 @@ var exportToCanvas = async (elements, appState, files, {
       scrollY: -minY + exportPadding,
       zoom: defaultAppState.zoom,
       shouldCacheIgnoreZoom: false,
-      theme: appState.exportWithDarkMode ? THEME3.DARK : THEME3.LIGHT
+      theme: appState.exportWithDarkMode ? THEME5.DARK : THEME5.LIGHT
     },
     renderConfig: {
       canvasBackgroundColor: viewBackgroundColor,
@@ -4485,7 +4267,8 @@ var exportToCanvas = async (elements, appState, files, {
       // empty disables embeddable rendering
       embedsValidationStatus: /* @__PURE__ */ new Map(),
       elementsPendingErasure: /* @__PURE__ */ new Set(),
-      pendingFlowchartNodes: null
+      pendingFlowchartNodes: null,
+      theme: appState.exportWithDarkMode ? THEME5.DARK : THEME5.LIGHT
     }
   });
   return canvas;
@@ -4527,9 +4310,6 @@ var exportToSvg = async (elements, appState, files, opts) => {
   svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
   svgRoot.setAttribute("width", `${width * exportScale}`);
   svgRoot.setAttribute("height", `${height * exportScale}`);
-  if (exportWithDarkMode) {
-    svgRoot.setAttribute("filter", THEME_FILTER2);
-  }
   const defsElement = svgRoot.ownerDocument.createElementNS(SVG_NS2, "defs");
   const metadataElement = svgRoot.ownerDocument.createElementNS(
     SVG_NS2,
@@ -4593,7 +4373,10 @@ var exportToSvg = async (elements, appState, files, opts) => {
     rect.setAttribute("y", "0");
     rect.setAttribute("width", `${width}`);
     rect.setAttribute("height", `${height}`);
-    rect.setAttribute("fill", viewBackgroundColor);
+    rect.setAttribute(
+      "fill",
+      exportWithDarkMode ? applyDarkModeFilter4(viewBackgroundColor) : viewBackgroundColor
+    );
     svgRoot.appendChild(rect);
   }
   const rsvg = rough.svg(svgRoot);
@@ -4615,7 +4398,8 @@ var exportToSvg = async (elements, appState, files, opts) => {
       embedsValidationStatus: renderEmbeddables ? new Map(
         elementsForRender.filter((element) => isFrameLikeElement(element)).map((element) => [element.id, true])
       ) : /* @__PURE__ */ new Map(),
-      reuseImages: opts?.reuseImages ?? true
+      reuseImages: opts?.reuseImages ?? true,
+      theme: exportWithDarkMode ? THEME5.DARK : THEME5.LIGHT
     }
   );
   return svgRoot;
@@ -4629,7 +4413,7 @@ var encodeSvgBase64Payload = ({
     true
   );
   metadataElement.appendChild(
-    createHTMLComment(`payload-type:${MIME_TYPES5.excalidraw}`)
+    createHTMLComment(`payload-type:${MIME_TYPES4.excalidraw}`)
   );
   metadataElement.appendChild(createHTMLComment("payload-version:2"));
   metadataElement.appendChild(createHTMLComment("payload-start"));
@@ -4637,7 +4421,7 @@ var encodeSvgBase64Payload = ({
   metadataElement.appendChild(createHTMLComment("payload-end"));
 };
 var decodeSvgBase64Payload = ({ svg }) => {
-  if (svg.includes(`payload-type:${MIME_TYPES5.excalidraw}`)) {
+  if (svg.includes(`payload-type:${MIME_TYPES4.excalidraw}`)) {
     const match = svg.match(
       /<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/
     );
@@ -4678,7 +4462,7 @@ var getExportSize = (elements, exportPadding, scale) => {
 };
 
 // data/restore.ts
-import { isFiniteNumber, pointFrom as pointFrom3 } from "@excalidraw/math";
+import { isFiniteNumber, pointFrom as pointFrom2 } from "@excalidraw/math";
 import {
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
   DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
@@ -4697,7 +4481,13 @@ import {
   normalizeLink as normalizeLink2,
   getLineHeight
 } from "@excalidraw/common";
-import { getNonDeletedElements, isValidPolygon } from "@excalidraw/element";
+import {
+  calculateFixedPointForNonElbowArrowBinding,
+  getNonDeletedElements,
+  isPointInElement,
+  isValidPolygon,
+  projectFixedPointOntoDiagonal
+} from "@excalidraw/element";
 import { normalizeFixedPoint } from "@excalidraw/element";
 import {
   updateElbowArrowPoints,
@@ -4711,7 +4501,6 @@ import {
   isArrowBoundToElement,
   isArrowElement as isArrowElement2,
   isElbowArrow,
-  isFixedPointBinding,
   isLinearElement,
   isLineElement,
   isTextElement as isTextElement4,
@@ -4746,23 +4535,62 @@ var getFontFamilyByName = (fontFamilyName) => {
   }
   return DEFAULT_FONT_FAMILY2;
 };
-var repairBinding = (element, binding) => {
+var repairBinding = (element, binding, targetElementsMap, existingElementsMap, startOrEnd) => {
   if (!binding) {
     return null;
   }
-  const focus = binding.focus || 0;
   if (isElbowArrow(element)) {
-    const fixedPointBinding = isFixedPointBinding(binding) ? {
+    const fixedPointBinding = {
       ...binding,
-      focus,
-      fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0])
-    } : null;
+      fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
+      mode: binding.mode || "orbit"
+    };
     return fixedPointBinding;
   }
-  return {
-    ...binding,
-    focus
-  };
+  if (binding.mode) {
+    if (binding.elementId) {
+      return {
+        elementId: binding.elementId,
+        mode: binding.mode,
+        fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5])
+      };
+    }
+    return null;
+  }
+  const targetBoundElement = targetElementsMap.get(binding.elementId) || void 0;
+  const boundElement = targetBoundElement || existingElementsMap?.get(
+    binding.elementId
+  ) || void 0;
+  const elementsMap = targetBoundElement ? targetElementsMap : existingElementsMap;
+  if (boundElement && elementsMap) {
+    const p = LinearElementEditor2.getPointAtIndexGlobalCoordinates(
+      element,
+      startOrEnd === "start" ? 0 : element.points.length - 1,
+      elementsMap
+    );
+    const mode = isPointInElement(p, boundElement, elementsMap) ? "inside" : "orbit";
+    const focusPoint = mode === "inside" ? p : projectFixedPointOntoDiagonal(
+      element,
+      p,
+      boundElement,
+      startOrEnd,
+      elementsMap
+    ) || p;
+    const { fixedPoint } = calculateFixedPointForNonElbowArrowBinding(
+      element,
+      boundElement,
+      startOrEnd,
+      elementsMap,
+      focusPoint
+    );
+    return {
+      mode,
+      elementId: binding.elementId,
+      fixedPoint
+    };
+  }
+  console.error(`could not repair binding for element`);
+  return null;
 };
 var restoreElementWithProperties = (element, extra) => {
   const base = {
@@ -4815,7 +4643,7 @@ var restoreElementWithProperties = (element, extra) => {
   delete ret.boundElementIds;
   return ret;
 };
-var restoreElement = (element, opts) => {
+var restoreElement = (element, targetElementsMap, existingElementsMap, opts) => {
   element = { ...element };
   switch (element.type) {
     case "text":
@@ -4855,7 +4683,6 @@ var restoreElement = (element, opts) => {
     case "freedraw": {
       return restoreElementWithProperties(element, {
         points: element.points,
-        lastCommittedPoint: null,
         simulatePressure: element.simulatePressure,
         pressures: element.pressures
       });
@@ -4874,16 +4701,15 @@ var restoreElement = (element, opts) => {
       let y = element.y;
       let points = (
         // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom3(0, 0), pointFrom3(element.width, element.height)] : element.points
+        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom2(0, 0), pointFrom2(element.width, element.height)] : element.points
       );
       if (points[0][0] !== 0 || points[0][1] !== 0) {
         ({ points, x, y } = LinearElementEditor2.getNormalizeElementPointsAndCoords(element));
       }
       return restoreElementWithProperties(element, {
-        type: element.type === "draw" ? "line" : element.type,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
-        lastCommittedPoint: null,
+        type: "line",
+        startBinding: null,
+        endBinding: null,
         startArrowhead,
         endArrowhead,
         points,
@@ -4896,20 +4722,28 @@ var restoreElement = (element, opts) => {
       });
     case "arrow": {
       const { startArrowhead: startArrowhead2 = null, endArrowhead: endArrowhead2 = "arrow" } = element;
-      let x2 = element.x;
-      let y2 = element.y;
-      let points2 = (
+      const x2 = element.x;
+      const y2 = element.y;
+      const points2 = (
         // migrate old arrow model to new one
-        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom3(0, 0), pointFrom3(element.width, element.height)] : element.points
+        !Array.isArray(element.points) || element.points.length < 2 ? [pointFrom2(0, 0), pointFrom2(element.width, element.height)] : element.points
       );
-      if (points2[0][0] !== 0 || points2[0][1] !== 0) {
-        ({ points: points2, x: x2, y: y2 } = LinearElementEditor2.getNormalizeElementPointsAndCoords(element));
-      }
       const base = {
         type: element.type,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
-        lastCommittedPoint: null,
+        startBinding: repairBinding(
+          element,
+          element.startBinding,
+          targetElementsMap,
+          existingElementsMap,
+          "start"
+        ),
+        endBinding: repairBinding(
+          element,
+          element.endBinding,
+          targetElementsMap,
+          existingElementsMap,
+          "end"
+        ),
         startArrowhead: startArrowhead2,
         endArrowhead: endArrowhead2,
         points: points2,
@@ -4918,15 +4752,19 @@ var restoreElement = (element, opts) => {
         elbowed: element.elbowed,
         ...getSizeFromPoints(points2)
       };
-      return isElbowArrow(element) ? restoreElementWithProperties(element, {
+      const restoredElement = isElbowArrow(element) ? restoreElementWithProperties(element, {
         ...base,
         elbowed: true,
-        startBinding: repairBinding(element, element.startBinding),
-        endBinding: repairBinding(element, element.endBinding),
         fixedSegments: element.fixedSegments?.length && base.points.length >= 4 ? element.fixedSegments : null,
         startIsSpecial: element.startIsSpecial,
         endIsSpecial: element.endIsSpecial
       }) : restoreElementWithProperties(element, base);
+      return {
+        ...restoredElement,
+        ...LinearElementEditor2.getNormalizeElementPointsAndCoords(
+          restoredElement
+        )
+      };
     }
     case "ellipse":
     case "rectangle":
@@ -4991,21 +4829,27 @@ var repairFrameMembership = (element, elementsMap) => {
     }
   }
 };
-var restoreElements = (elements, localElements, opts) => {
+var restoreElements = (targetElements, existingElements, opts) => {
   const existingIds = /* @__PURE__ */ new Set();
-  const localElementsMap = localElements ? arrayToMap2(localElements) : null;
+  const targetElementsMap = arrayToMap2(targetElements || []);
+  const existingElementsMap = existingElements ? arrayToMap2(existingElements) : null;
   const restoredElements = syncInvalidIndices2(
-    (elements || []).reduce((elements2, element) => {
+    (targetElements || []).reduce((elements, element) => {
       if (element.type === "selection") {
-        return elements2;
+        return elements;
       }
-      let migratedElement = restoreElement(element, {
-        deleteInvisibleElements: opts?.deleteInvisibleElements
-      });
+      let migratedElement = restoreElement(
+        element,
+        targetElementsMap,
+        existingElementsMap,
+        {
+          deleteInvisibleElements: opts?.deleteInvisibleElements
+        }
+      );
       if (migratedElement) {
-        const localElement = localElementsMap?.get(element.id);
+        const localElement = existingElementsMap?.get(element.id);
         const shouldMarkAsDeleted = opts?.deleteInvisibleElements && isInvisiblySmallElement(element);
-        if (shouldMarkAsDeleted || localElement && localElement.version > migratedElement.version) {
+        if (shouldMarkAsDeleted) {
           migratedElement = bumpVersion(migratedElement, localElement?.version);
         }
         if (shouldMarkAsDeleted) {
@@ -5015,9 +4859,9 @@ var restoreElements = (elements, localElements, opts) => {
           migratedElement = { ...migratedElement, id: randomId() };
         }
         existingIds.add(migratedElement.id);
-        elements2.push(migratedElement);
+        elements.push(migratedElement);
       }
-      return elements2;
+      return elements;
     }, [])
   );
   if (!opts?.repairBindings) {
@@ -5061,7 +4905,7 @@ var restoreElements = (elements, localElements, opts) => {
           restoredElementsMap,
           {
             points: [
-              pointFrom3(0, 0),
+              pointFrom2(0, 0),
               element.points[element.points.length - 1]
             ]
           }
@@ -5090,10 +4934,10 @@ var restoreElements = (elements, localElements, opts) => {
         width: boundElement.width,
         height: boundElement.height,
         points: [
-          pointFrom3(0, 0),
-          pointFrom3(0, -10),
-          pointFrom3(boundElement.width / 2 + 5, -10),
-          pointFrom3(
+          pointFrom2(0, 0),
+          pointFrom2(0, -10),
+          pointFrom2(boundElement.width / 2 + 5, -10),
+          pointFrom2(
             boundElement.width / 2 + 5,
             boundElement.height / 2 + 5
           )
@@ -5171,13 +5015,6 @@ var restoreAppState = (appState, localAppState) => {
     editingFrame: null
   };
 };
-var restore = (data, localAppState, localElements, elementsConfig) => {
-  return {
-    elements: restoreElements(data?.elements, localElements, elementsConfig),
-    appState: restoreAppState(data?.appState, localAppState || null),
-    files: data?.files || {}
-  };
-};
 var restoreLibraryItem = (libraryItem) => {
   const elements = restoreElements(
     getNonDeletedElements(libraryItem.elements),
@@ -5217,9 +5054,9 @@ var restoreLibraryItems = (libraryItems = [], defaultStatus) => {
 // data/blob.ts
 var parseFileContents = async (blob) => {
   let contents;
-  if (blob.type === MIME_TYPES6.png) {
+  if (blob.type === MIME_TYPES5.png) {
     try {
-      return await (await import("./data/image-VTYIFRQE.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-Q6JHR7OE.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5244,7 +5081,7 @@ var parseFileContents = async (blob) => {
         };
       });
     }
-    if (blob.type === MIME_TYPES6.svg) {
+    if (blob.type === MIME_TYPES5.svg) {
       try {
         return decodeSvgBase64Payload({
           svg: contents
@@ -5300,30 +5137,27 @@ var loadSceneOrLibraryFromBlob = async (blob, localAppState, localElements, file
     }
     if (isValidExcalidrawData(data)) {
       return {
-        type: MIME_TYPES6.excalidraw,
-        data: restore(
-          {
-            elements: clearElementsForExport2(data.elements || []),
-            appState: {
+        type: MIME_TYPES5.excalidraw,
+        data: {
+          elements: restoreElements(data.elements, localElements, {
+            repairBindings: true,
+            deleteInvisibleElements: true
+          }),
+          appState: restoreAppState(
+            {
               theme: localAppState?.theme,
               fileHandle: fileHandle || blob.handle || null,
               ...cleanAppStateForExport(data.appState || {}),
               ...localAppState ? calculateScrollCenter(data.elements || [], localAppState) : {}
             },
-            files: data.files
-          },
-          localAppState,
-          localElements,
-          {
-            repairBindings: true,
-            refreshDimensions: false,
-            deleteInvisibleElements: true
-          }
-        )
+            localAppState
+          ),
+          files: data.files || {}
+        }
       };
     } else if (isValidLibrary(data)) {
       return {
-        type: MIME_TYPES6.excalidrawlib,
+        type: MIME_TYPES5.excalidrawlib,
         data
       };
     }
@@ -5342,7 +5176,7 @@ var loadFromBlob = async (blob, localAppState, localElements, fileHandle) => {
     localElements,
     fileHandle
   );
-  if (ret.type !== MIME_TYPES6.excalidraw) {
+  if (ret.type !== MIME_TYPES5.excalidraw) {
     throw new Error("Error: invalid file");
   }
   return ret.data;
@@ -5410,7 +5244,7 @@ var dataURLToString = (dataURL) => {
   return base64ToString(dataURL.slice(dataURL.indexOf(",") + 1));
 };
 var resizeImageFile = async (file, opts) => {
-  if (file.type === MIME_TYPES6.svg) {
+  if (file.type === MIME_TYPES5.svg) {
     return file;
   }
   const [pica, imageBlobReduce] = await Promise.all([
@@ -5443,7 +5277,7 @@ var resizeImageFile = async (file, opts) => {
 };
 var SVGStringToFile = (SVGString, filename = "") => {
   return new File([new TextEncoder().encode(SVGString)], filename, {
-    type: MIME_TYPES6.svg
+    type: MIME_TYPES5.svg
   });
 };
 var ImageURLToFile = async (imageUrl, filename = "") => {
@@ -5476,61 +5310,52 @@ var getFileHandle = async (event) => {
   }
   return null;
 };
-var getActualMimeTypeFromImage = (buffer) => {
+var getActualMimeTypeFromImage = async (file) => {
   let mimeType = null;
-  const first8Bytes = `${[...new Uint8Array(buffer).slice(0, 8)].join(" ")} `;
-  const headerBytes = {
+  const leadingBytes = [
+    ...new Uint8Array(await blobToArrayBuffer(file.slice(0, 15)))
+  ].join(" ");
+  const bytes = {
     // https://en.wikipedia.org/wiki/Portable_Network_Graphics#File_header
-    png: "137 80 78 71 13 10 26 10 ",
+    png: /^137 80 78 71 13 10 26 10\b/,
     // https://en.wikipedia.org/wiki/JPEG#Syntax_and_structure
     // jpg is a bit wonky. Checking the first three bytes should be enough,
     // but may yield false positives. (https://stackoverflow.com/a/23360709/927631)
-    jpg: "255 216 255 ",
+    jpg: /^255 216 255\b/,
     // https://en.wikipedia.org/wiki/GIF#Example_GIF_file
-    gif: "71 73 70 56 57 97 "
+    gif: /^71 73 70 56 57 97\b/,
+    // 4 bytes for RIFF + 4 bytes for chunk size + WEBP identifier
+    webp: /^82 73 70 70 \d+ \d+ \d+ \d+ 87 69 66 80 86 80 56\b/
   };
-  if (first8Bytes === headerBytes.png) {
-    mimeType = MIME_TYPES6.png;
-  } else if (first8Bytes.startsWith(headerBytes.jpg)) {
-    mimeType = MIME_TYPES6.jpg;
-  } else if (first8Bytes.startsWith(headerBytes.gif)) {
-    mimeType = MIME_TYPES6.gif;
-  }
-  return mimeType;
+  for (const type of Object.keys(bytes)) {
+    if (leadingBytes.match(bytes[type])) {
+      mimeType = MIME_TYPES5[type];
+      break;
+    }
+  }
+  return mimeType || file.type || null;
 };
 var createFile = (blob, mimeType, name) => {
   return new File([blob], name || "", {
     type: mimeType
   });
 };
+var normalizedFileSymbol = Symbol("fileNormalized");
 var normalizeFile = async (file) => {
-  if (!file.type) {
-    if (file?.name?.endsWith(".excalidrawlib")) {
-      file = createFile(
-        await blobToArrayBuffer(file),
-        MIME_TYPES6.excalidrawlib,
-        file.name
-      );
-    } else if (file?.name?.endsWith(".excalidraw")) {
-      file = createFile(
-        await blobToArrayBuffer(file),
-        MIME_TYPES6.excalidraw,
-        file.name
-      );
-    } else {
-      const buffer = await blobToArrayBuffer(file);
-      const mimeType = getActualMimeTypeFromImage(buffer);
-      if (mimeType) {
-        file = createFile(buffer, mimeType, file.name);
-      }
-    }
-  } else if (isSupportedImageFile(file)) {
-    const buffer = await blobToArrayBuffer(file);
-    const mimeType = getActualMimeTypeFromImage(buffer);
+  if (file[normalizedFileSymbol]) {
+    return file;
+  }
+  if (file?.name?.endsWith(".excalidrawlib")) {
+    file = createFile(file, MIME_TYPES5.excalidrawlib, file.name);
+  } else if (file?.name?.endsWith(".excalidraw")) {
+    file = createFile(file, MIME_TYPES5.excalidraw, file.name);
+  } else if (!file.type || file.type?.startsWith("image/")) {
+    const mimeType = await getActualMimeTypeFromImage(file);
     if (mimeType && mimeType !== file.type) {
-      file = createFile(buffer, mimeType, file.name);
+      file = createFile(file, mimeType, file.name);
     }
   }
+  file[normalizedFileSymbol] = true;
   return file;
 };
 var blobToArrayBuffer = (blob) => {
@@ -5564,7 +5389,7 @@ var encodePngMetadata = async ({
 }) => {
   const chunks = decodePng(new Uint8Array(await blobToArrayBuffer(blob)));
   const metadataChunk = tEXt.encode(
-    MIME_TYPES7.excalidraw,
+    MIME_TYPES6.excalidraw,
     JSON.stringify(
       encode({
         text: metadata,
@@ -5573,11 +5398,11 @@ var encodePngMetadata = async ({
     )
   );
   chunks.splice(-1, 0, metadataChunk);
-  return new Blob([encodePng(chunks)], { type: MIME_TYPES7.png });
+  return new Blob([encodePng(chunks)], { type: MIME_TYPES6.png });
 };
 var decodePngMetadata = async (blob) => {
   const metadata = await getTEXtChunk(blob);
-  if (metadata?.keyword === MIME_TYPES7.excalidraw) {
+  if (metadata?.keyword === MIME_TYPES6.excalidraw) {
     try {
       const encodedData = JSON.parse(metadata.text);
       if (!("encoded" in encodedData)) {
@@ -5630,10 +5455,7 @@ export {
   fillCircle,
   getNormalizedCanvasDimensions,
   bootstrapCanvas,
-  drawHighlightForRectWithRotation,
-  strokeEllipseWithRotation,
-  strokeRectWithRotation,
-  drawHighlightForDiamondWithRotation,
+  strokeRectWithRotation_simple,
   frameClip,
   renderStaticSceneThrottled,
   renderStaticScene,
@@ -5643,7 +5465,6 @@ export {
   restoreElement,
   restoreElements,
   restoreAppState,
-  restore,
   restoreLibraryItems,
   getTEXtChunk,
   encodePngMetadata,
@@ -5669,4 +5490,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-WWDIUJ2Q.js.map
+//# sourceMappingURL=chunk-5A4X24JB.js.map