@excalidraw/excalidraw 0.17.1-7441-8b04eb5 → 0.17.1-7500-ac247a0

package/dist/dev/index.js

@@ -411,7 +411,7 @@ var init_colors = __esm({
 });
 
 // constants.ts
-var isDarwin, isWindows, isAndroid, isFirefox, isChrome, isSafari, isBrave, APP_NAME, DRAGGING_THRESHOLD, LINE_CONFIRM_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, TEXT_TO_CENTER_SNAP_THRESHOLD, SHIFT_LOCKING_ANGLE, CURSOR_TYPE, POINTER_BUTTON, POINTER_EVENTS, YOUTUBE_STATES, ENV, CLASSES, FONT_FAMILY, THEME, FRAME_STYLE, WINDOWS_EMOJI_FALLBACK_FONT, MIN_FONT_SIZE, DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, GRID_SIZE, IMAGE_MIME_TYPES, ALLOWED_PASTE_MIME_TYPES, MIME_TYPES, EXPORT_IMAGE_TYPES, EXPORT_DATA_TYPES, EXPORT_SOURCE, IMAGE_RENDER_TIMEOUT, TAP_TWICE_TIMEOUT, TOUCH_CTX_MENU_TIMEOUT, SCROLL_TIMEOUT, ZOOM_STEP, MIN_ZOOM, HYPERLINK_TOOLTIP_DELAY, THEME_FILTER, URL_QUERY_KEYS, URL_HASH_KEYS, DEFAULT_UI_OPTIONS, MQ_MAX_WIDTH_PORTRAIT, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_HEIGHT_LANDSCAPE, MQ_RIGHT_SIDEBAR_MIN_WIDTH, LIBRARY_SIDEBAR_WIDTH, MAX_DECIMALS_FOR_SVG_EXPORT, EXPORT_SCALES, DEFAULT_EXPORT_PADDING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, MAX_ALLOWED_FILE_BYTES, SVG_NS, VERSIONS, BOUND_TEXT_PADDING, ARROW_LABEL_WIDTH_FRACTION, ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, VERTICAL_ALIGN, TEXT_ALIGN, ELEMENT_READY_TO_ERASE_OPACITY, DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_ADAPTIVE_RADIUS, ROUNDNESS, PRECEDING_ELEMENT_KEY, ROUGHNESS, STROKE_WIDTH, DEFAULT_ELEMENT_PROPS, LIBRARY_SIDEBAR_TAB, DEFAULT_SIDEBAR, LIBRARY_DISABLED_TYPES, TOOL_TYPE, EDITOR_LS_KEYS;
+var isDarwin, isWindows, isAndroid, isFirefox, isChrome, isSafari, isIOS, isBrave, APP_NAME, DRAGGING_THRESHOLD, LINE_CONFIRM_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, TEXT_TO_CENTER_SNAP_THRESHOLD, SHIFT_LOCKING_ANGLE, CURSOR_TYPE, POINTER_BUTTON, POINTER_EVENTS, YOUTUBE_STATES, ENV, CLASSES, FONT_FAMILY, THEME, FRAME_STYLE, WINDOWS_EMOJI_FALLBACK_FONT, MIN_FONT_SIZE, DEFAULT_FONT_SIZE, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, GRID_SIZE, IMAGE_MIME_TYPES, ALLOWED_PASTE_MIME_TYPES, MIME_TYPES, EXPORT_IMAGE_TYPES, EXPORT_DATA_TYPES, EXPORT_SOURCE, IMAGE_RENDER_TIMEOUT, TAP_TWICE_TIMEOUT, TOUCH_CTX_MENU_TIMEOUT, SCROLL_TIMEOUT, ZOOM_STEP, MIN_ZOOM, HYPERLINK_TOOLTIP_DELAY, THEME_FILTER, URL_QUERY_KEYS, URL_HASH_KEYS, DEFAULT_UI_OPTIONS, MQ_MAX_WIDTH_PORTRAIT, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_HEIGHT_LANDSCAPE, MQ_RIGHT_SIDEBAR_MIN_WIDTH, LIBRARY_SIDEBAR_WIDTH, MAX_DECIMALS_FOR_SVG_EXPORT, EXPORT_SCALES, DEFAULT_EXPORT_PADDING, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, MAX_ALLOWED_FILE_BYTES, SVG_NS, VERSIONS, BOUND_TEXT_PADDING, ARROW_LABEL_WIDTH_FRACTION, ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, VERTICAL_ALIGN, TEXT_ALIGN, ELEMENT_READY_TO_ERASE_OPACITY, DEFAULT_PROPORTIONAL_RADIUS, DEFAULT_ADAPTIVE_RADIUS, ROUNDNESS, PRECEDING_ELEMENT_KEY, ROUGHNESS, STROKE_WIDTH, DEFAULT_ELEMENT_PROPS, LIBRARY_SIDEBAR_TAB, DEFAULT_SIDEBAR, LIBRARY_DISABLED_TYPES, TOOL_TYPE, EDITOR_LS_KEYS;
 var init_constants = __esm({
   "constants.ts"() {
     "use strict";
@@ -424,6 +424,8 @@ var init_constants = __esm({
     isFirefox = "netscape" in window && navigator.userAgent.indexOf("rv:") > 1 && navigator.userAgent.indexOf("Gecko") > 1;
     isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
     isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
+    isIOS = /iPad|iPhone/.test(navigator.platform) || // iPadOS 13+
+    navigator.userAgent.includes("Mac") && "ontouchend" in document;
     isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
     APP_NAME = "Excalidraw";
     DRAGGING_THRESHOLD = 10;
@@ -445,7 +447,8 @@ var init_constants = __esm({
       MAIN: 0,
       WHEEL: 1,
       SECONDARY: 2,
-      TOUCH: -1
+      TOUCH: -1,
+      ERASER: 5
     };
     POINTER_EVENTS = {
       enabled: "all",
@@ -743,6 +746,16 @@ var init_InitializeApp = __esm({
 // utils.ts
 import { unstable_batchedUpdates } from "react-dom";
 import React3 from "react";
+function addEventListener(target, type, listener, options) {
+  if (!target) {
+    return () => {
+    };
+  }
+  target?.addEventListener?.(type, listener, options);
+  return () => {
+    target?.removeEventListener?.(type, listener, options);
+  };
+}
 var mockDateTime, getDateTime, capitalizeString, isToolIcon, isInputLike, isInteractive, isWritableElement, getFontFamilyString, getFontString, debounce, throttleRAF, easeOut, easeOutInterpolate, easeToValuesRAF, chunk, distance, updateActiveTool, getShortcutKey, viewportCoordsToSceneCoords, sceneCoordsToViewportCoords, getGlobalCSSVariable, RS_LTR_CHARS, RS_RTL_CHARS, RE_RTL_CHECK, isRTL, tupleToCoors, muteFSAbortError, findIndex, findLastIndex, isTransparent, withBatchedUpdates, withBatchedUpdatesThrottled, getNearestScrollableContainer, focusNearestParent, bytesToHexString, getUpdatedTimestamp, arrayToMap, arrayToMapWithIndex, isTestEnv, wrapEvent, updateObject, getFrame, isPromiseLike, queryFocusableElements, _defaultIsShallowComparatorFallback, isShallowEqual, composeEventHandlers, assertNever, memoize, isRenderThrottlingEnabled, isMemberOf, cloneJSON, isFiniteNumber, updateStable;
 var init_utils = __esm({
   "utils.ts"() {
@@ -16575,6 +16588,177 @@ var init_math = __esm({
   }
 });
 
+// ../utils/bbox.ts
+function getBBox(line) {
+  return [
+    Math.min(line[0][0], line[1][0]),
+    Math.min(line[0][1], line[1][1]),
+    Math.max(line[0][0], line[1][0]),
+    Math.max(line[0][1], line[1][1])
+  ];
+}
+function crossProduct(a, b) {
+  return a[0] * b[1] - b[0] * a[1];
+}
+function doBBoxesIntersect(a, b) {
+  return a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
+}
+function translate(a, b) {
+  return [a[0] - b[0], a[1] - b[1]];
+}
+function isPointOnLine(l, p) {
+  const p1 = translate(l[1], l[0]);
+  const p2 = translate(p, l[0]);
+  const r = crossProduct(p1, p2);
+  return Math.abs(r) < EPSILON;
+}
+function isPointRightOfLine(l, p) {
+  const p1 = translate(l[1], l[0]);
+  const p2 = translate(p, l[0]);
+  return crossProduct(p1, p2) < 0;
+}
+function isLineSegmentTouchingOrCrossingLine(a, b) {
+  return isPointOnLine(a, b[0]) || isPointOnLine(a, b[1]) || (isPointRightOfLine(a, b[0]) ? !isPointRightOfLine(a, b[1]) : isPointRightOfLine(a, b[1]));
+}
+function doLineSegmentsIntersect(a, b) {
+  return doBBoxesIntersect(getBBox(a), getBBox(b)) && isLineSegmentTouchingOrCrossingLine(a, b) && isLineSegmentTouchingOrCrossingLine(b, a);
+}
+var EPSILON;
+var init_bbox = __esm({
+  "../utils/bbox.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    EPSILON = 1e-6;
+  }
+});
+
+// ../utils/withinBounds.ts
+var getNonLinearElementRelativePoints, getElementRelativePoints, getMinMaxPoints, getRotatedBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, elementsOverlappingBBox;
+var init_withinBounds = __esm({
+  "../utils/withinBounds.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    init_excalidraw();
+    getNonLinearElementRelativePoints = (element) => {
+      if (element.type === "diamond") {
+        return [
+          [element.width / 2, 0],
+          [element.width, element.height / 2],
+          [element.width / 2, element.height],
+          [0, element.height / 2]
+        ];
+      }
+      return [
+        [0, 0],
+        [0 + element.width, 0],
+        [0 + element.width, element.height],
+        [0, element.height]
+      ];
+    };
+    getElementRelativePoints = (element) => {
+      if (isLinearElement(element) || isFreeDrawElement(element)) {
+        return element.points;
+      }
+      return getNonLinearElementRelativePoints(element);
+    };
+    getMinMaxPoints = (points) => {
+      const ret = points.reduce(
+        (limits, [x, y]) => {
+          limits.minY = Math.min(limits.minY, y);
+          limits.minX = Math.min(limits.minX, x);
+          limits.maxX = Math.max(limits.maxX, x);
+          limits.maxY = Math.max(limits.maxY, y);
+          return limits;
+        },
+        {
+          minX: Infinity,
+          minY: Infinity,
+          maxX: -Infinity,
+          maxY: -Infinity,
+          cx: 0,
+          cy: 0
+        }
+      );
+      ret.cx = (ret.maxX + ret.minX) / 2;
+      ret.cy = (ret.maxY + ret.minY) / 2;
+      return ret;
+    };
+    getRotatedBBox = (element) => {
+      const points = getElementRelativePoints(element);
+      const { cx, cy } = getMinMaxPoints(points);
+      const centerPoint2 = [cx, cy];
+      const rotatedPoints = points.map(
+        (point2) => rotatePoint([point2[0], point2[1]], centerPoint2, element.angle)
+      );
+      const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
+      return [
+        minX + element.x,
+        minY + element.y,
+        maxX + element.x,
+        maxY + element.y
+      ];
+    };
+    isElementInsideBBox = (element, bbox, eitherDirection = false) => {
+      const elementBBox = getRotatedBBox(element);
+      const elementInsideBbox = bbox[0] <= elementBBox[0] && bbox[2] >= elementBBox[2] && bbox[1] <= elementBBox[1] && bbox[3] >= elementBBox[3];
+      if (!eitherDirection) {
+        return elementInsideBbox;
+      }
+      if (elementInsideBbox) {
+        return true;
+      }
+      return elementBBox[0] <= bbox[0] && elementBBox[2] >= bbox[2] && elementBBox[1] <= bbox[1] && elementBBox[3] >= bbox[3];
+    };
+    elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
+      const elementBBox = getRotatedBBox(element);
+      return (isValueInRange(elementBBox[0], bbox[0], bbox[2]) || isValueInRange(bbox[0], elementBBox[0], elementBBox[2])) && (isValueInRange(elementBBox[1], bbox[1], bbox[3]) || isValueInRange(bbox[1], elementBBox[1], elementBBox[3]));
+    };
+    elementsOverlappingBBox = ({
+      elements,
+      bounds,
+      type,
+      errorMargin = 0
+    }) => {
+      if (isExcalidrawElement(bounds)) {
+        bounds = getElementBounds(bounds);
+      }
+      const adjustedBBox = [
+        bounds[0] - errorMargin,
+        bounds[1] - errorMargin,
+        bounds[2] + errorMargin,
+        bounds[3] + errorMargin
+      ];
+      const includedElementSet = /* @__PURE__ */ new Set();
+      for (const element of elements) {
+        if (includedElementSet.has(element.id)) {
+          continue;
+        }
+        const isOverlaping = type === "overlap" ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox) : type === "inside" ? isElementInsideBBox(element, adjustedBBox) : isElementInsideBBox(element, adjustedBBox, true);
+        if (isOverlaping) {
+          includedElementSet.add(element.id);
+          if (element.boundElements) {
+            for (const boundElement of element.boundElements) {
+              includedElementSet.add(boundElement.id);
+            }
+          }
+          if (isTextElement(element) && element.containerId) {
+            includedElementSet.add(element.containerId);
+          }
+          if (isArrowElement(element)) {
+            if (element.startBinding) {
+              includedElementSet.add(element.startBinding.elementId);
+            }
+            if (element.endBinding) {
+              includedElementSet.add(element.endBinding?.elementId);
+            }
+          }
+        }
+      }
+      return elements.filter((element) => includedElementSet.has(element.id));
+    };
+  }
+});
+
 // data/filesystem.ts
 import {
   fileOpen as _fileOpen,
@@ -17798,7 +17982,7 @@ var init_export = __esm({
     init_appState();
     init_json();
     init_image2();
-    init_export2();
+    init_utils2();
     init_frame();
     init_element();
     init_mutateElement();
@@ -18093,578 +18277,6 @@ var init_export = __esm({
   }
 });
 
-// ../utils/bbox.ts
-function getBBox(line) {
-  return [
-    Math.min(line[0][0], line[1][0]),
-    Math.min(line[0][1], line[1][1]),
-    Math.max(line[0][0], line[1][0]),
-    Math.max(line[0][1], line[1][1])
-  ];
-}
-function crossProduct(a, b) {
-  return a[0] * b[1] - b[0] * a[1];
-}
-function doBBoxesIntersect(a, b) {
-  return a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
-}
-function translate(a, b) {
-  return [a[0] - b[0], a[1] - b[1]];
-}
-function isPointOnLine(l, p) {
-  const p1 = translate(l[1], l[0]);
-  const p2 = translate(p, l[0]);
-  const r = crossProduct(p1, p2);
-  return Math.abs(r) < EPSILON;
-}
-function isPointRightOfLine(l, p) {
-  const p1 = translate(l[1], l[0]);
-  const p2 = translate(p, l[0]);
-  return crossProduct(p1, p2) < 0;
-}
-function isLineSegmentTouchingOrCrossingLine(a, b) {
-  return isPointOnLine(a, b[0]) || isPointOnLine(a, b[1]) || (isPointRightOfLine(a, b[0]) ? !isPointRightOfLine(a, b[1]) : isPointRightOfLine(a, b[1]));
-}
-function doLineSegmentsIntersect(a, b) {
-  return doBBoxesIntersect(getBBox(a), getBBox(b)) && isLineSegmentTouchingOrCrossingLine(a, b) && isLineSegmentTouchingOrCrossingLine(b, a);
-}
-var EPSILON;
-var init_bbox = __esm({
-  "../utils/bbox.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    EPSILON = 1e-6;
-  }
-});
-
-// ../utils/withinBounds.ts
-var getNonLinearElementRelativePoints, getElementRelativePoints, getMinMaxPoints, getRotatedBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, elementsOverlappingBBox;
-var init_withinBounds = __esm({
-  "../utils/withinBounds.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    init_typeChecks();
-    init_math();
-    init_bounds();
-    getNonLinearElementRelativePoints = (element) => {
-      if (element.type === "diamond") {
-        return [
-          [element.width / 2, 0],
-          [element.width, element.height / 2],
-          [element.width / 2, element.height],
-          [0, element.height / 2]
-        ];
-      }
-      return [
-        [0, 0],
-        [0 + element.width, 0],
-        [0 + element.width, element.height],
-        [0, element.height]
-      ];
-    };
-    getElementRelativePoints = (element) => {
-      if (isLinearElement(element) || isFreeDrawElement(element)) {
-        return element.points;
-      }
-      return getNonLinearElementRelativePoints(element);
-    };
-    getMinMaxPoints = (points) => {
-      const ret = points.reduce(
-        (limits, [x, y]) => {
-          limits.minY = Math.min(limits.minY, y);
-          limits.minX = Math.min(limits.minX, x);
-          limits.maxX = Math.max(limits.maxX, x);
-          limits.maxY = Math.max(limits.maxY, y);
-          return limits;
-        },
-        {
-          minX: Infinity,
-          minY: Infinity,
-          maxX: -Infinity,
-          maxY: -Infinity,
-          cx: 0,
-          cy: 0
-        }
-      );
-      ret.cx = (ret.maxX + ret.minX) / 2;
-      ret.cy = (ret.maxY + ret.minY) / 2;
-      return ret;
-    };
-    getRotatedBBox = (element) => {
-      const points = getElementRelativePoints(element);
-      const { cx, cy } = getMinMaxPoints(points);
-      const centerPoint2 = [cx, cy];
-      const rotatedPoints = points.map(
-        (point2) => rotatePoint([point2[0], point2[1]], centerPoint2, element.angle)
-      );
-      const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
-      return [
-        minX + element.x,
-        minY + element.y,
-        maxX + element.x,
-        maxY + element.y
-      ];
-    };
-    isElementInsideBBox = (element, bbox, eitherDirection = false) => {
-      const elementBBox = getRotatedBBox(element);
-      const elementInsideBbox = bbox[0] <= elementBBox[0] && bbox[2] >= elementBBox[2] && bbox[1] <= elementBBox[1] && bbox[3] >= elementBBox[3];
-      if (!eitherDirection) {
-        return elementInsideBbox;
-      }
-      if (elementInsideBbox) {
-        return true;
-      }
-      return elementBBox[0] <= bbox[0] && elementBBox[2] >= bbox[2] && elementBBox[1] <= bbox[1] && elementBBox[3] >= bbox[3];
-    };
-    elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
-      const elementBBox = getRotatedBBox(element);
-      return (isValueInRange(elementBBox[0], bbox[0], bbox[2]) || isValueInRange(bbox[0], elementBBox[0], elementBBox[2])) && (isValueInRange(elementBBox[1], bbox[1], bbox[3]) || isValueInRange(bbox[1], elementBBox[1], elementBBox[3]));
-    };
-    elementsOverlappingBBox = ({
-      elements,
-      bounds,
-      type,
-      errorMargin = 0
-    }) => {
-      if (isExcalidrawElement(bounds)) {
-        bounds = getElementBounds(bounds);
-      }
-      const adjustedBBox = [
-        bounds[0] - errorMargin,
-        bounds[1] - errorMargin,
-        bounds[2] + errorMargin,
-        bounds[3] + errorMargin
-      ];
-      const includedElementSet = /* @__PURE__ */ new Set();
-      for (const element of elements) {
-        if (includedElementSet.has(element.id)) {
-          continue;
-        }
-        const isOverlaping = type === "overlap" ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox) : type === "inside" ? isElementInsideBBox(element, adjustedBBox) : isElementInsideBBox(element, adjustedBBox, true);
-        if (isOverlaping) {
-          includedElementSet.add(element.id);
-          if (element.boundElements) {
-            for (const boundElement of element.boundElements) {
-              includedElementSet.add(boundElement.id);
-            }
-          }
-          if (isTextElement(element) && element.containerId) {
-            includedElementSet.add(element.containerId);
-          }
-          if (isArrowElement(element)) {
-            if (element.startBinding) {
-              includedElementSet.add(element.startBinding.elementId);
-            }
-            if (element.endBinding) {
-              includedElementSet.add(element.endBinding?.elementId);
-            }
-          }
-        }
-      }
-      return elements.filter((element) => includedElementSet.has(element.id));
-    };
-  }
-});
-
-// hooks/useLibraryItemSvg.ts
-import { atom as atom4, useAtom as useAtom8 } from "jotai";
-import { useEffect as useEffect14, useState as useState8 } from "react";
-var libraryItemSvgsCache, exportLibraryItemToSvg, useLibraryItemSvg, useLibraryCache;
-var init_useLibraryItemSvg = __esm({
-  "hooks/useLibraryItemSvg.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    init_colors();
-    init_jotai();
-    init_export2();
-    libraryItemSvgsCache = atom4(/* @__PURE__ */ new Map());
-    exportLibraryItemToSvg = async (elements) => {
-      return await exportToSvg2({
-        elements,
-        appState: {
-          exportBackground: false,
-          viewBackgroundColor: COLOR_PALETTE.white
-        },
-        files: null,
-        renderEmbeddables: false
-      });
-    };
-    useLibraryItemSvg = (id, elements, svgCache) => {
-      const [svg, setSvg] = useState8();
-      useEffect14(() => {
-        if (elements) {
-          if (id) {
-            const cachedSvg = svgCache.get(id);
-            if (cachedSvg) {
-              setSvg(cachedSvg);
-            } else {
-              (async () => {
-                const exportedSvg = await exportLibraryItemToSvg(elements);
-                exportedSvg.querySelector(".style-fonts")?.remove();
-                if (exportedSvg) {
-                  svgCache.set(id, exportedSvg);
-                  setSvg(exportedSvg);
-                }
-              })();
-            }
-          } else {
-            (async () => {
-              const exportedSvg = await exportLibraryItemToSvg(elements);
-              setSvg(exportedSvg);
-            })();
-          }
-        }
-      }, [id, elements, svgCache, setSvg]);
-      return svg;
-    };
-    useLibraryCache = () => {
-      const [svgCache] = useAtom8(libraryItemSvgsCache, jotaiScope);
-      const clearLibraryCache = () => svgCache.clear();
-      const deleteItemsFromLibraryCache = (items) => {
-        items.forEach((item) => svgCache.delete(item));
-      };
-      return {
-        clearLibraryCache,
-        deleteItemsFromLibraryCache,
-        svgCache
-      };
-    };
-  }
-});
-
-// data/library.ts
-import { atom as atom5 } from "jotai";
-import { useEffect as useEffect15, useRef as useRef11 } from "react";
-var libraryItemsAtom, cloneLibraryItems, isUniqueItem, mergeLibraryItems, Library, library_default, distributeLibraryItemsOnSquareGrid, parseLibraryTokensFromUrl, useHandleLibrary;
-var init_library = __esm({
-  "data/library.ts"() {
-    "use strict";
-    init_define_import_meta_env();
-    init_blob();
-    init_restore();
-    init_jotai();
-    init_bounds();
-    init_errors();
-    init_i18n();
-    init_constants();
-    init_useLibraryItemSvg();
-    init_utils();
-    libraryItemsAtom = atom5({ status: "loaded", isInitialized: true, libraryItems: [] });
-    cloneLibraryItems = (libraryItems) => cloneJSON(libraryItems);
-    isUniqueItem = (existingLibraryItems, targetLibraryItem) => {
-      return !existingLibraryItems.find((libraryItem) => {
-        if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
-          return false;
-        }
-        return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
-          return libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id && libItemExcalidrawItem.versionNonce === targetLibraryItem.elements[idx].versionNonce;
-        });
-      });
-    };
-    mergeLibraryItems = (localItems, otherItems) => {
-      const newItems = [];
-      for (const item of otherItems) {
-        if (isUniqueItem(localItems, item)) {
-          newItems.push(item);
-        }
-      }
-      return [...newItems, ...localItems];
-    };
-    Library = class {
-      /** latest libraryItems */
-      lastLibraryItems = [];
-      /** indicates whether library is initialized with library items (has gone
-       * though at least one update) */
-      isInitialized = false;
-      app;
-      constructor(app) {
-        this.app = app;
-      }
-      updateQueue = [];
-      getLastUpdateTask = () => {
-        return this.updateQueue[this.updateQueue.length - 1];
-      };
-      notifyListeners = () => {
-        if (this.updateQueue.length > 0) {
-          jotaiStore.set(libraryItemsAtom, {
-            status: "loading",
-            libraryItems: this.lastLibraryItems,
-            isInitialized: this.isInitialized
-          });
-        } else {
-          this.isInitialized = true;
-          jotaiStore.set(libraryItemsAtom, {
-            status: "loaded",
-            libraryItems: this.lastLibraryItems,
-            isInitialized: this.isInitialized
-          });
-          try {
-            this.app.props.onLibraryChange?.(
-              cloneLibraryItems(this.lastLibraryItems)
-            );
-          } catch (error) {
-            console.error(error);
-          }
-        }
-      };
-      /** call on excalidraw instance unmount */
-      destroy = () => {
-        this.isInitialized = false;
-        this.updateQueue = [];
-        this.lastLibraryItems = [];
-        jotaiStore.set(libraryItemSvgsCache, /* @__PURE__ */ new Map());
-      };
-      resetLibrary = () => {
-        return this.setLibrary([]);
-      };
-      /**
-       * @returns latest cloned libraryItems. Awaits all in-progress updates first.
-       */
-      getLatestLibrary = () => {
-        return new Promise(async (resolve) => {
-          try {
-            const libraryItems = await (this.getLastUpdateTask() || this.lastLibraryItems);
-            if (this.updateQueue.length > 0) {
-              resolve(this.getLatestLibrary());
-            } else {
-              resolve(cloneLibraryItems(libraryItems));
-            }
-          } catch (error) {
-            return resolve(this.lastLibraryItems);
-          }
-        });
-      };
-      // NOTE this is a high-level public API (exposed on ExcalidrawAPI) with
-      // a slight overhead (always restoring library items). For internal use
-      // where merging isn't needed, use `library.setLibrary()` directly.
-      updateLibrary = async ({
-        libraryItems,
-        prompt = false,
-        merge = false,
-        openLibraryMenu = false,
-        defaultStatus = "unpublished"
-      }) => {
-        if (openLibraryMenu) {
-          this.app.setState({
-            openSidebar: { name: DEFAULT_SIDEBAR.name, tab: LIBRARY_SIDEBAR_TAB }
-          });
-        }
-        return this.setLibrary(() => {
-          return new Promise(async (resolve, reject) => {
-            try {
-              const source = await (typeof libraryItems === "function" && !(libraryItems instanceof Blob) ? libraryItems(this.lastLibraryItems) : libraryItems);
-              let nextItems;
-              if (source instanceof Blob) {
-                nextItems = await loadLibraryFromBlob(source, defaultStatus);
-              } else {
-                nextItems = restoreLibraryItems(source, defaultStatus);
-              }
-              if (!prompt || window.confirm(
-                t("alerts.confirmAddLibrary", {
-                  numShapes: nextItems.length
-                })
-              )) {
-                if (prompt) {
-                  this.app.focusContainer();
-                }
-                if (merge) {
-                  resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
-                } else {
-                  resolve(nextItems);
-                }
-              } else {
-                reject(new AbortError());
-              }
-            } catch (error) {
-              reject(error);
-            }
-          });
-        });
-      };
-      setLibrary = (libraryItems) => {
-        const task = new Promise(async (resolve, reject) => {
-          try {
-            await this.getLastUpdateTask();
-            if (typeof libraryItems === "function") {
-              libraryItems = libraryItems(this.lastLibraryItems);
-            }
-            this.lastLibraryItems = cloneLibraryItems(await libraryItems);
-            resolve(this.lastLibraryItems);
-          } catch (error) {
-            reject(error);
-          }
-        }).catch((error) => {
-          if (error.name === "AbortError") {
-            console.warn("Library update aborted by user");
-            return this.lastLibraryItems;
-          }
-          throw error;
-        }).finally(() => {
-          this.updateQueue = this.updateQueue.filter((_task) => _task !== task);
-          this.notifyListeners();
-        });
-        this.updateQueue.push(task);
-        this.notifyListeners();
-        return task;
-      };
-    };
-    library_default = Library;
-    distributeLibraryItemsOnSquareGrid = (libraryItems) => {
-      const PADDING = 50;
-      const ITEMS_PER_ROW = Math.ceil(Math.sqrt(libraryItems.length));
-      const resElements = [];
-      const getMaxHeightPerRow = (row2) => {
-        const maxHeight = libraryItems.slice(row2 * ITEMS_PER_ROW, row2 * ITEMS_PER_ROW + ITEMS_PER_ROW).reduce((acc, item) => {
-          const { height } = getCommonBoundingBox(item.elements);
-          return Math.max(acc, height);
-        }, 0);
-        return maxHeight;
-      };
-      const getMaxWidthPerCol = (targetCol) => {
-        let index2 = 0;
-        let currCol = 0;
-        let maxWidth = 0;
-        for (const item of libraryItems) {
-          if (index2 % ITEMS_PER_ROW === 0) {
-            currCol = 0;
-          }
-          if (currCol === targetCol) {
-            const { width } = getCommonBoundingBox(item.elements);
-            maxWidth = Math.max(maxWidth, width);
-          }
-          index2++;
-          currCol++;
-        }
-        return maxWidth;
-      };
-      let colOffsetX = 0;
-      let rowOffsetY = 0;
-      let maxHeightCurrRow = 0;
-      let maxWidthCurrCol = 0;
-      let index = 0;
-      let col = 0;
-      let row = 0;
-      for (const item of libraryItems) {
-        if (index && index % ITEMS_PER_ROW === 0) {
-          rowOffsetY += maxHeightCurrRow + PADDING;
-          colOffsetX = 0;
-          col = 0;
-          row++;
-        }
-        if (col === 0) {
-          maxHeightCurrRow = getMaxHeightPerRow(row);
-        }
-        maxWidthCurrCol = getMaxWidthPerCol(col);
-        const { minX, minY, width, height } = getCommonBoundingBox(item.elements);
-        const offsetCenterX = (maxWidthCurrCol - width) / 2;
-        const offsetCenterY = (maxHeightCurrRow - height) / 2;
-        resElements.push(
-          ...item.elements.map((element) => ({
-            ...element,
-            x: element.x + // offset for column
-            colOffsetX + // offset to center in given square grid
-            offsetCenterX - // subtract minX so that given item starts at 0 coord
-            minX,
-            y: element.y + // offset for row
-            rowOffsetY + // offset to center in given square grid
-            offsetCenterY - // subtract minY so that given item starts at 0 coord
-            minY
-          }))
-        );
-        colOffsetX += maxWidthCurrCol + PADDING;
-        index++;
-        col++;
-      }
-      return resElements;
-    };
-    parseLibraryTokensFromUrl = () => {
-      const libraryUrl = (
-        // current
-        new URLSearchParams(window.location.hash.slice(1)).get(
-          URL_HASH_KEYS.addLibrary
-        ) || // legacy, kept for compat reasons
-        new URLSearchParams(window.location.search).get(URL_QUERY_KEYS.addLibrary)
-      );
-      const idToken = libraryUrl ? new URLSearchParams(window.location.hash.slice(1)).get("token") : null;
-      return libraryUrl ? { libraryUrl, idToken } : null;
-    };
-    useHandleLibrary = ({
-      excalidrawAPI,
-      getInitialLibraryItems
-    }) => {
-      const getInitialLibraryRef = useRef11(getInitialLibraryItems);
-      useEffect15(() => {
-        if (!excalidrawAPI) {
-          return;
-        }
-        const importLibraryFromURL = async ({
-          libraryUrl,
-          idToken
-        }) => {
-          const libraryPromise = new Promise(async (resolve, reject) => {
-            try {
-              const request = await fetch(decodeURIComponent(libraryUrl));
-              const blob = await request.blob();
-              resolve(blob);
-            } catch (error) {
-              reject(error);
-            }
-          });
-          const shouldPrompt = idToken !== excalidrawAPI.id;
-          await (shouldPrompt && document.hidden ? new Promise((resolve) => {
-            window.addEventListener("focus", () => resolve(), {
-              once: true
-            });
-          }) : null);
-          try {
-            await excalidrawAPI.updateLibrary({
-              libraryItems: libraryPromise,
-              prompt: shouldPrompt,
-              merge: true,
-              defaultStatus: "published",
-              openLibraryMenu: true
-            });
-          } catch (error) {
-            throw error;
-          } finally {
-            if (window.location.hash.includes(URL_HASH_KEYS.addLibrary)) {
-              const hash = new URLSearchParams(window.location.hash.slice(1));
-              hash.delete(URL_HASH_KEYS.addLibrary);
-              window.history.replaceState({}, APP_NAME, `#${hash.toString()}`);
-            } else if (window.location.search.includes(URL_QUERY_KEYS.addLibrary)) {
-              const query = new URLSearchParams(window.location.search);
-              query.delete(URL_QUERY_KEYS.addLibrary);
-              window.history.replaceState({}, APP_NAME, `?${query.toString()}`);
-            }
-          }
-        };
-        const onHashChange = (event) => {
-          event.preventDefault();
-          const libraryUrlTokens2 = parseLibraryTokensFromUrl();
-          if (libraryUrlTokens2) {
-            event.stopImmediatePropagation();
-            window.history.replaceState({}, "", event.oldURL);
-            importLibraryFromURL(libraryUrlTokens2);
-          }
-        };
-        if (getInitialLibraryRef.current) {
-          excalidrawAPI.updateLibrary({
-            libraryItems: getInitialLibraryRef.current()
-          });
-        }
-        const libraryUrlTokens = parseLibraryTokensFromUrl();
-        if (libraryUrlTokens) {
-          importLibraryFromURL(libraryUrlTokens);
-        }
-        window.addEventListener("hashchange" /* HASHCHANGE */, onHashChange);
-        return () => {
-          window.removeEventListener("hashchange" /* HASHCHANGE */, onHashChange);
-        };
-      }, [excalidrawAPI]);
-    };
-  }
-});
-
 // ../utils/export.ts
 var exportToCanvas2, exportToBlob, exportToSvg2, exportToClipboard;
 var init_export2 = __esm({
@@ -18672,18 +18284,10 @@ var init_export2 = __esm({
     "use strict";
     init_define_import_meta_env();
     init_export();
-    init_appState();
-    init_restore();
-    init_constants();
+    init_excalidraw();
     init_image();
     init_json();
     init_clipboard();
-    init_bbox();
-    init_withinBounds();
-    init_json();
-    init_blob();
-    init_renderElement();
-    init_library();
     exportToCanvas2 = ({
       elements,
       appState,
@@ -18814,6 +18418,17 @@ var init_export2 = __esm({
   }
 });
 
+// ../utils/index.ts
+var init_utils2 = __esm({
+  "../utils/index.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    init_bbox();
+    init_withinBounds();
+    init_export2();
+  }
+});
+
 // frame.ts
 function isElementIntersectingFrame(element, frame) {
   const frameLineSegments = getElementLineSegments(frame);
@@ -18839,7 +18454,7 @@ var init_frame = __esm({
     init_groups();
     init_Scene();
     init_bounds();
-    init_export2();
+    init_utils2();
     init_typeChecks();
     bindElementsToFramesAfterDuplication = (nextElements, oldElements, oldIdToDuplicatedId) => {
       const nextElementMap = arrayToMap(nextElements);
@@ -21914,7 +21529,7 @@ var init_ProjectName = __esm({
 });
 
 // components/ProjectName.tsx
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var ProjectName;
 var init_ProjectName2 = __esm({
@@ -21928,7 +21543,7 @@ var init_ProjectName2 = __esm({
     init_keys();
     ProjectName = (props) => {
       const { id } = useExcalidrawContainer();
-      const [fileName, setFileName] = useState9(props.value);
+      const [fileName, setFileName] = useState8(props.value);
       const handleBlur = (event) => {
         if (!props.ignoreFocus) {
           focusNearestParent(event.target);
@@ -22021,7 +21636,7 @@ var init_data = __esm({
     init_element();
     init_typeChecks();
     init_i18n();
-    init_export2();
+    init_utils2();
     init_scene();
     init_export();
     init_utils();
@@ -22934,7 +22549,7 @@ var init_Avatar = __esm({
 });
 
 // components/Avatar.tsx
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import clsx14 from "clsx";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var Avatar;
@@ -22953,7 +22568,7 @@ var init_Avatar2 = __esm({
       isCurrentUser
     }) => {
       const shortName = getNameInitial(name);
-      const [error, setError] = useState10(false);
+      const [error, setError] = useState9(false);
       const loadImg = !error && src;
       const style = loadImg ? void 0 : { background: color };
       return /* @__PURE__ */ jsx32(
@@ -24618,6 +24233,405 @@ var init_manager = __esm({
   }
 });
 
+// hooks/useLibraryItemSvg.ts
+import { atom as atom4, useAtom as useAtom8 } from "jotai";
+import { useEffect as useEffect14, useState as useState10 } from "react";
+var libraryItemSvgsCache, exportLibraryItemToSvg, useLibraryItemSvg, useLibraryCache;
+var init_useLibraryItemSvg = __esm({
+  "hooks/useLibraryItemSvg.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    init_colors();
+    init_jotai();
+    init_utils2();
+    libraryItemSvgsCache = atom4(/* @__PURE__ */ new Map());
+    exportLibraryItemToSvg = async (elements) => {
+      return await exportToSvg2({
+        elements,
+        appState: {
+          exportBackground: false,
+          viewBackgroundColor: COLOR_PALETTE.white
+        },
+        files: null,
+        renderEmbeddables: false
+      });
+    };
+    useLibraryItemSvg = (id, elements, svgCache) => {
+      const [svg, setSvg] = useState10();
+      useEffect14(() => {
+        if (elements) {
+          if (id) {
+            const cachedSvg = svgCache.get(id);
+            if (cachedSvg) {
+              setSvg(cachedSvg);
+            } else {
+              (async () => {
+                const exportedSvg = await exportLibraryItemToSvg(elements);
+                exportedSvg.querySelector(".style-fonts")?.remove();
+                if (exportedSvg) {
+                  svgCache.set(id, exportedSvg);
+                  setSvg(exportedSvg);
+                }
+              })();
+            }
+          } else {
+            (async () => {
+              const exportedSvg = await exportLibraryItemToSvg(elements);
+              setSvg(exportedSvg);
+            })();
+          }
+        }
+      }, [id, elements, svgCache, setSvg]);
+      return svg;
+    };
+    useLibraryCache = () => {
+      const [svgCache] = useAtom8(libraryItemSvgsCache, jotaiScope);
+      const clearLibraryCache = () => svgCache.clear();
+      const deleteItemsFromLibraryCache = (items) => {
+        items.forEach((item) => svgCache.delete(item));
+      };
+      return {
+        clearLibraryCache,
+        deleteItemsFromLibraryCache,
+        svgCache
+      };
+    };
+  }
+});
+
+// data/library.ts
+import { atom as atom5 } from "jotai";
+import { useEffect as useEffect15, useRef as useRef11 } from "react";
+var libraryItemsAtom, cloneLibraryItems, isUniqueItem, mergeLibraryItems, Library, library_default, distributeLibraryItemsOnSquareGrid, parseLibraryTokensFromUrl, useHandleLibrary;
+var init_library = __esm({
+  "data/library.ts"() {
+    "use strict";
+    init_define_import_meta_env();
+    init_blob();
+    init_restore();
+    init_jotai();
+    init_bounds();
+    init_errors();
+    init_i18n();
+    init_constants();
+    init_useLibraryItemSvg();
+    init_utils();
+    libraryItemsAtom = atom5({ status: "loaded", isInitialized: true, libraryItems: [] });
+    cloneLibraryItems = (libraryItems) => cloneJSON(libraryItems);
+    isUniqueItem = (existingLibraryItems, targetLibraryItem) => {
+      return !existingLibraryItems.find((libraryItem) => {
+        if (libraryItem.elements.length !== targetLibraryItem.elements.length) {
+          return false;
+        }
+        return libraryItem.elements.every((libItemExcalidrawItem, idx) => {
+          return libItemExcalidrawItem.id === targetLibraryItem.elements[idx].id && libItemExcalidrawItem.versionNonce === targetLibraryItem.elements[idx].versionNonce;
+        });
+      });
+    };
+    mergeLibraryItems = (localItems, otherItems) => {
+      const newItems = [];
+      for (const item of otherItems) {
+        if (isUniqueItem(localItems, item)) {
+          newItems.push(item);
+        }
+      }
+      return [...newItems, ...localItems];
+    };
+    Library = class {
+      /** latest libraryItems */
+      lastLibraryItems = [];
+      /** indicates whether library is initialized with library items (has gone
+       * though at least one update) */
+      isInitialized = false;
+      app;
+      constructor(app) {
+        this.app = app;
+      }
+      updateQueue = [];
+      getLastUpdateTask = () => {
+        return this.updateQueue[this.updateQueue.length - 1];
+      };
+      notifyListeners = () => {
+        if (this.updateQueue.length > 0) {
+          jotaiStore.set(libraryItemsAtom, {
+            status: "loading",
+            libraryItems: this.lastLibraryItems,
+            isInitialized: this.isInitialized
+          });
+        } else {
+          this.isInitialized = true;
+          jotaiStore.set(libraryItemsAtom, {
+            status: "loaded",
+            libraryItems: this.lastLibraryItems,
+            isInitialized: this.isInitialized
+          });
+          try {
+            this.app.props.onLibraryChange?.(
+              cloneLibraryItems(this.lastLibraryItems)
+            );
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      };
+      /** call on excalidraw instance unmount */
+      destroy = () => {
+        this.isInitialized = false;
+        this.updateQueue = [];
+        this.lastLibraryItems = [];
+        jotaiStore.set(libraryItemSvgsCache, /* @__PURE__ */ new Map());
+      };
+      resetLibrary = () => {
+        return this.setLibrary([]);
+      };
+      /**
+       * @returns latest cloned libraryItems. Awaits all in-progress updates first.
+       */
+      getLatestLibrary = () => {
+        return new Promise(async (resolve) => {
+          try {
+            const libraryItems = await (this.getLastUpdateTask() || this.lastLibraryItems);
+            if (this.updateQueue.length > 0) {
+              resolve(this.getLatestLibrary());
+            } else {
+              resolve(cloneLibraryItems(libraryItems));
+            }
+          } catch (error) {
+            return resolve(this.lastLibraryItems);
+          }
+        });
+      };
+      // NOTE this is a high-level public API (exposed on ExcalidrawAPI) with
+      // a slight overhead (always restoring library items). For internal use
+      // where merging isn't needed, use `library.setLibrary()` directly.
+      updateLibrary = async ({
+        libraryItems,
+        prompt = false,
+        merge = false,
+        openLibraryMenu = false,
+        defaultStatus = "unpublished"
+      }) => {
+        if (openLibraryMenu) {
+          this.app.setState({
+            openSidebar: { name: DEFAULT_SIDEBAR.name, tab: LIBRARY_SIDEBAR_TAB }
+          });
+        }
+        return this.setLibrary(() => {
+          return new Promise(async (resolve, reject) => {
+            try {
+              const source = await (typeof libraryItems === "function" && !(libraryItems instanceof Blob) ? libraryItems(this.lastLibraryItems) : libraryItems);
+              let nextItems;
+              if (source instanceof Blob) {
+                nextItems = await loadLibraryFromBlob(source, defaultStatus);
+              } else {
+                nextItems = restoreLibraryItems(source, defaultStatus);
+              }
+              if (!prompt || window.confirm(
+                t("alerts.confirmAddLibrary", {
+                  numShapes: nextItems.length
+                })
+              )) {
+                if (prompt) {
+                  this.app.focusContainer();
+                }
+                if (merge) {
+                  resolve(mergeLibraryItems(this.lastLibraryItems, nextItems));
+                } else {
+                  resolve(nextItems);
+                }
+              } else {
+                reject(new AbortError());
+              }
+            } catch (error) {
+              reject(error);
+            }
+          });
+        });
+      };
+      setLibrary = (libraryItems) => {
+        const task = new Promise(async (resolve, reject) => {
+          try {
+            await this.getLastUpdateTask();
+            if (typeof libraryItems === "function") {
+              libraryItems = libraryItems(this.lastLibraryItems);
+            }
+            this.lastLibraryItems = cloneLibraryItems(await libraryItems);
+            resolve(this.lastLibraryItems);
+          } catch (error) {
+            reject(error);
+          }
+        }).catch((error) => {
+          if (error.name === "AbortError") {
+            console.warn("Library update aborted by user");
+            return this.lastLibraryItems;
+          }
+          throw error;
+        }).finally(() => {
+          this.updateQueue = this.updateQueue.filter((_task) => _task !== task);
+          this.notifyListeners();
+        });
+        this.updateQueue.push(task);
+        this.notifyListeners();
+        return task;
+      };
+    };
+    library_default = Library;
+    distributeLibraryItemsOnSquareGrid = (libraryItems) => {
+      const PADDING = 50;
+      const ITEMS_PER_ROW = Math.ceil(Math.sqrt(libraryItems.length));
+      const resElements = [];
+      const getMaxHeightPerRow = (row2) => {
+        const maxHeight = libraryItems.slice(row2 * ITEMS_PER_ROW, row2 * ITEMS_PER_ROW + ITEMS_PER_ROW).reduce((acc, item) => {
+          const { height } = getCommonBoundingBox(item.elements);
+          return Math.max(acc, height);
+        }, 0);
+        return maxHeight;
+      };
+      const getMaxWidthPerCol = (targetCol) => {
+        let index2 = 0;
+        let currCol = 0;
+        let maxWidth = 0;
+        for (const item of libraryItems) {
+          if (index2 % ITEMS_PER_ROW === 0) {
+            currCol = 0;
+          }
+          if (currCol === targetCol) {
+            const { width } = getCommonBoundingBox(item.elements);
+            maxWidth = Math.max(maxWidth, width);
+          }
+          index2++;
+          currCol++;
+        }
+        return maxWidth;
+      };
+      let colOffsetX = 0;
+      let rowOffsetY = 0;
+      let maxHeightCurrRow = 0;
+      let maxWidthCurrCol = 0;
+      let index = 0;
+      let col = 0;
+      let row = 0;
+      for (const item of libraryItems) {
+        if (index && index % ITEMS_PER_ROW === 0) {
+          rowOffsetY += maxHeightCurrRow + PADDING;
+          colOffsetX = 0;
+          col = 0;
+          row++;
+        }
+        if (col === 0) {
+          maxHeightCurrRow = getMaxHeightPerRow(row);
+        }
+        maxWidthCurrCol = getMaxWidthPerCol(col);
+        const { minX, minY, width, height } = getCommonBoundingBox(item.elements);
+        const offsetCenterX = (maxWidthCurrCol - width) / 2;
+        const offsetCenterY = (maxHeightCurrRow - height) / 2;
+        resElements.push(
+          ...item.elements.map((element) => ({
+            ...element,
+            x: element.x + // offset for column
+            colOffsetX + // offset to center in given square grid
+            offsetCenterX - // subtract minX so that given item starts at 0 coord
+            minX,
+            y: element.y + // offset for row
+            rowOffsetY + // offset to center in given square grid
+            offsetCenterY - // subtract minY so that given item starts at 0 coord
+            minY
+          }))
+        );
+        colOffsetX += maxWidthCurrCol + PADDING;
+        index++;
+        col++;
+      }
+      return resElements;
+    };
+    parseLibraryTokensFromUrl = () => {
+      const libraryUrl = (
+        // current
+        new URLSearchParams(window.location.hash.slice(1)).get(
+          URL_HASH_KEYS.addLibrary
+        ) || // legacy, kept for compat reasons
+        new URLSearchParams(window.location.search).get(URL_QUERY_KEYS.addLibrary)
+      );
+      const idToken = libraryUrl ? new URLSearchParams(window.location.hash.slice(1)).get("token") : null;
+      return libraryUrl ? { libraryUrl, idToken } : null;
+    };
+    useHandleLibrary = ({
+      excalidrawAPI,
+      getInitialLibraryItems
+    }) => {
+      const getInitialLibraryRef = useRef11(getInitialLibraryItems);
+      useEffect15(() => {
+        if (!excalidrawAPI) {
+          return;
+        }
+        const importLibraryFromURL = async ({
+          libraryUrl,
+          idToken
+        }) => {
+          const libraryPromise = new Promise(async (resolve, reject) => {
+            try {
+              const request = await fetch(decodeURIComponent(libraryUrl));
+              const blob = await request.blob();
+              resolve(blob);
+            } catch (error) {
+              reject(error);
+            }
+          });
+          const shouldPrompt = idToken !== excalidrawAPI.id;
+          await (shouldPrompt && document.hidden ? new Promise((resolve) => {
+            window.addEventListener("focus", () => resolve(), {
+              once: true
+            });
+          }) : null);
+          try {
+            await excalidrawAPI.updateLibrary({
+              libraryItems: libraryPromise,
+              prompt: shouldPrompt,
+              merge: true,
+              defaultStatus: "published",
+              openLibraryMenu: true
+            });
+          } catch (error) {
+            throw error;
+          } finally {
+            if (window.location.hash.includes(URL_HASH_KEYS.addLibrary)) {
+              const hash = new URLSearchParams(window.location.hash.slice(1));
+              hash.delete(URL_HASH_KEYS.addLibrary);
+              window.history.replaceState({}, APP_NAME, `#${hash.toString()}`);
+            } else if (window.location.search.includes(URL_QUERY_KEYS.addLibrary)) {
+              const query = new URLSearchParams(window.location.search);
+              query.delete(URL_QUERY_KEYS.addLibrary);
+              window.history.replaceState({}, APP_NAME, `?${query.toString()}`);
+            }
+          }
+        };
+        const onHashChange = (event) => {
+          event.preventDefault();
+          const libraryUrlTokens2 = parseLibraryTokensFromUrl();
+          if (libraryUrlTokens2) {
+            event.stopImmediatePropagation();
+            window.history.replaceState({}, "", event.oldURL);
+            importLibraryFromURL(libraryUrlTokens2);
+          }
+        };
+        if (getInitialLibraryRef.current) {
+          excalidrawAPI.updateLibrary({
+            libraryItems: getInitialLibraryRef.current()
+          });
+        }
+        const libraryUrlTokens = parseLibraryTokensFromUrl();
+        if (libraryUrlTokens) {
+          importLibraryFromURL(libraryUrlTokens);
+        }
+        window.addEventListener("hashchange" /* HASHCHANGE */, onHashChange);
+        return () => {
+          window.removeEventListener("hashchange" /* HASHCHANGE */, onHashChange);
+        };
+      }, [excalidrawAPI]);
+    };
+  }
+});
+
 // gesture.ts
 var getCenter, getDistance, sum;
 var init_gesture = __esm({
@@ -26364,7 +26378,7 @@ var init_PublishLibrary2 = __esm({
     init_Dialog2();
     init_i18n();
     init_Trans();
-    init_export2();
+    init_utils2();
     init_constants();
     init_blob();
     init_utils();
@@ -28061,7 +28075,7 @@ var init_ImageExportDialog2 = __esm({
     init_filesystem();
     init_i18n();
     init_scene();
-    init_export2();
+    init_utils2();
     init_icons();
     init_Dialog2();
     init_RadioGroup2();
@@ -35450,12 +35464,6 @@ var init_emitter = __esm({
     init_define_import_meta_env();
     Emitter = class {
       subscribers = [];
-      value;
-      updateOnChangeOnly;
-      constructor(opts) {
-        this.updateOnChangeOnly = opts?.updateOnChangeOnly ?? false;
-        this.value = opts?.initialState;
-      }
       /**
        * Attaches subscriber
        *
@@ -35466,6 +35474,12 @@ var init_emitter = __esm({
         this.subscribers.push(..._handlers);
         return () => this.off(_handlers);
       }
+      once(...handlers) {
+        const _handlers = handlers.flat().filter((item) => typeof item === "function");
+        _handlers.push(() => detach());
+        const detach = this.on(..._handlers);
+        return detach;
+      }
       off(...handlers) {
         const _handlers = handlers.flat();
         this.subscribers = this.subscribers.filter(
@@ -35473,15 +35487,13 @@ var init_emitter = __esm({
         );
       }
       trigger(...payload) {
-        if (this.updateOnChangeOnly && this.value === payload) {
-          return [];
+        for (const handler of this.subscribers) {
+          handler(...payload);
         }
-        this.value = payload;
-        return this.subscribers.map((handler) => handler(...payload));
+        return this;
       }
-      destroy() {
+      clear() {
         this.subscribers = [];
-        this.value = void 0;
       }
     };
   }
@@ -35797,7 +35809,7 @@ var init_App = __esm({
     init_emitter();
     init_ElementCanvasButtons2();
     init_magic();
-    init_export2();
+    init_utils2();
     init_colors();
     init_MagicButton();
     init_icons();
@@ -35890,6 +35902,7 @@ var init_App = __esm({
       hitLinkElement;
       lastPointerDownEvent = null;
       lastPointerUpEvent = null;
+      lastPointerMoveEvent = null;
       lastViewportPosition = { x: 0, y: 0 };
       laserPathManager = new LaserPathManager(this);
       onChangeEmitter = new Emitter();
@@ -35897,6 +35910,8 @@ var init_App = __esm({
       onPointerUpEmitter = new Emitter();
       onUserFollowEmitter = new Emitter();
       onScrollChangeEmitter = new Emitter();
+      missingPointerEventCleanupEmitter = new Emitter();
+      onRemoveEventListenersEmitter = new Emitter();
       constructor(props) {
         super(props);
         const defaultAppState2 = getDefaultAppState();
@@ -37274,6 +37289,7 @@ var init_App = __esm({
         return false;
       };
       async componentDidMount() {
+        console.log("HELLO IS");
         this.unmounted = false;
         this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;
         if (define_import_meta_env_default.MODE === ENV.TEST || define_import_meta_env_default.DEV) {
@@ -37346,7 +37362,7 @@ var init_App = __esm({
         this.scene.destroy();
         this.library.destroy();
         this.laserPathManager.destroy();
-        this.onChangeEmitter.destroy();
+        this.onChangeEmitter.clear();
         ShapeCache.destroy();
         SnapCache.destroy();
         clearTimeout(touchTimeout);
@@ -37363,60 +37379,6 @@ var init_App = __esm({
         }
         this.setState({});
       });
-      removeEventListeners() {
-        document.removeEventListener("pointerup" /* POINTER_UP */, this.removePointer);
-        document.removeEventListener("copy" /* COPY */, this.onCopy);
-        document.removeEventListener("paste" /* PASTE */, this.pasteFromClipboard);
-        document.removeEventListener("cut" /* CUT */, this.onCut);
-        this.excalidrawContainerRef.current?.removeEventListener(
-          "wheel" /* WHEEL */,
-          this.onWheel
-        );
-        this.nearestScrollableContainer?.removeEventListener(
-          "scroll" /* SCROLL */,
-          this.onScroll
-        );
-        document.removeEventListener("keydown" /* KEYDOWN */, this.onKeyDown, false);
-        document.removeEventListener(
-          "mousemove" /* MOUSE_MOVE */,
-          this.updateCurrentCursorPosition,
-          false
-        );
-        document.removeEventListener("keyup" /* KEYUP */, this.onKeyUp);
-        window.removeEventListener("resize" /* RESIZE */, this.onResize, false);
-        window.removeEventListener("unload" /* UNLOAD */, this.onUnload, false);
-        window.removeEventListener("blur" /* BLUR */, this.onBlur, false);
-        this.excalidrawContainerRef.current?.removeEventListener(
-          "dragover" /* DRAG_OVER */,
-          this.disableEvent,
-          false
-        );
-        this.excalidrawContainerRef.current?.removeEventListener(
-          "drop" /* DROP */,
-          this.disableEvent,
-          false
-        );
-        document.removeEventListener(
-          "gesturestart" /* GESTURE_START */,
-          this.onGestureStart,
-          false
-        );
-        document.removeEventListener(
-          "gesturechange" /* GESTURE_CHANGE */,
-          this.onGestureChange,
-          false
-        );
-        document.removeEventListener(
-          "gestureend" /* GESTURE_END */,
-          this.onGestureEnd,
-          false
-        );
-        document.removeEventListener(
-          "fullscreenchange" /* FULLSCREENCHANGE */,
-          this.onFullscreenChange
-        );
-        window.removeEventListener("message" /* MESSAGE */, this.onWindowMessage, false);
-      }
       /** generally invoked only if fullscreen was invoked programmatically */
       onFullscreenChange = () => {
         if (
@@ -37428,71 +37390,97 @@ var init_App = __esm({
           });
         }
       };
+      removeEventListeners() {
+        this.onRemoveEventListenersEmitter.trigger();
+      }
       addEventListeners() {
         this.removeEventListeners();
-        window.addEventListener("message" /* MESSAGE */, this.onWindowMessage, false);
-        document.addEventListener("pointerup" /* POINTER_UP */, this.removePointer);
-        document.addEventListener("copy" /* COPY */, this.onCopy);
-        this.excalidrawContainerRef.current?.addEventListener(
-          "wheel" /* WHEEL */,
-          this.onWheel,
-          { passive: false }
-        );
         if (this.props.handleKeyboardGlobally) {
-          document.addEventListener("keydown" /* KEYDOWN */, this.onKeyDown, false);
+          this.onRemoveEventListenersEmitter.once(
+            addEventListener(document, "keydown" /* KEYDOWN */, this.onKeyDown, false)
+          );
         }
-        document.addEventListener("keyup" /* KEYUP */, this.onKeyUp, { passive: true });
-        document.addEventListener(
-          "mousemove" /* MOUSE_MOVE */,
-          this.updateCurrentCursorPosition
-        );
-        document.fonts?.addEventListener?.("loadingdone", (event) => {
-          const loadedFontFaces = event.fontfaces;
-          this.fonts.onFontsLoaded(loadedFontFaces);
-        });
-        document.addEventListener(
-          "gesturestart" /* GESTURE_START */,
-          this.onGestureStart,
-          false
-        );
-        document.addEventListener(
-          "gesturechange" /* GESTURE_CHANGE */,
-          this.onGestureChange,
-          false
-        );
-        document.addEventListener(
-          "gestureend" /* GESTURE_END */,
-          this.onGestureEnd,
-          false
+        this.onRemoveEventListenersEmitter.once(
+          addEventListener(
+            this.excalidrawContainerRef.current,
+            "wheel" /* WHEEL */,
+            this.onWheel,
+            { passive: false }
+          ),
+          addEventListener(window, "message" /* MESSAGE */, this.onWindowMessage, false),
+          addEventListener(document, "pointerup" /* POINTER_UP */, this.removePointer),
+          // #3553
+          addEventListener(document, "copy" /* COPY */, this.onCopy),
+          addEventListener(document, "keyup" /* KEYUP */, this.onKeyUp, { passive: true }),
+          addEventListener(
+            document,
+            "mousemove" /* MOUSE_MOVE */,
+            this.updateCurrentCursorPosition
+          ),
+          // rerender text elements on font load to fix #637 && #1553
+          addEventListener(document.fonts, "loadingdone", (event) => {
+            const loadedFontFaces = event.fontfaces;
+            this.fonts.onFontsLoaded(loadedFontFaces);
+          }),
+          // Safari-only desktop pinch zoom
+          addEventListener(
+            document,
+            "gesturestart" /* GESTURE_START */,
+            this.onGestureStart,
+            false
+          ),
+          addEventListener(
+            document,
+            "gesturechange" /* GESTURE_CHANGE */,
+            this.onGestureChange,
+            false
+          ),
+          addEventListener(
+            document,
+            "gestureend" /* GESTURE_END */,
+            this.onGestureEnd,
+            false
+          ),
+          addEventListener(window, "focus" /* FOCUS */, () => {
+            this.maybeCleanupAfterMissingPointerUp(null);
+          })
         );
         if (this.state.viewModeEnabled) {
           return;
         }
-        document.addEventListener("fullscreenchange" /* FULLSCREENCHANGE */, this.onFullscreenChange);
-        document.addEventListener("paste" /* PASTE */, this.pasteFromClipboard);
-        document.addEventListener("cut" /* CUT */, this.onCut);
+        this.onRemoveEventListenersEmitter.once(
+          addEventListener(
+            document,
+            "fullscreenchange" /* FULLSCREENCHANGE */,
+            this.onFullscreenChange
+          ),
+          addEventListener(document, "paste" /* PASTE */, this.pasteFromClipboard),
+          addEventListener(document, "cut" /* CUT */, this.onCut),
+          addEventListener(window, "resize" /* RESIZE */, this.onResize, false),
+          addEventListener(window, "unload" /* UNLOAD */, this.onUnload, false),
+          addEventListener(window, "blur" /* BLUR */, this.onBlur, false),
+          addEventListener(
+            this.excalidrawContainerRef.current,
+            "dragover" /* DRAG_OVER */,
+            this.disableEvent,
+            false
+          ),
+          addEventListener(
+            this.excalidrawContainerRef.current,
+            "drop" /* DROP */,
+            this.disableEvent,
+            false
+          )
+        );
         if (this.props.detectScroll) {
-          this.nearestScrollableContainer = getNearestScrollableContainer(
-            this.excalidrawContainerRef.current
-          );
-          this.nearestScrollableContainer.addEventListener(
-            "scroll" /* SCROLL */,
-            this.onScroll
+          this.onRemoveEventListenersEmitter.once(
+            addEventListener(
+              getNearestScrollableContainer(this.excalidrawContainerRef.current),
+              "scroll" /* SCROLL */,
+              this.onScroll
+            )
           );
         }
-        window.addEventListener("resize" /* RESIZE */, this.onResize, false);
-        window.addEventListener("unload" /* UNLOAD */, this.onUnload, false);
-        window.addEventListener("blur" /* BLUR */, this.onBlur, false);
-        this.excalidrawContainerRef.current?.addEventListener(
-          "dragover" /* DRAG_OVER */,
-          this.disableEvent,
-          false
-        );
-        this.excalidrawContainerRef.current?.addEventListener(
-          "drop" /* DROP */,
-          this.disableEvent,
-          false
-        );
       }
       componentDidUpdate(prevProps, prevState) {
         this.updateEmbeddables();
@@ -37665,7 +37653,7 @@ var init_App = __esm({
         didTapTwice = false;
       }
       onTouchStart = (event) => {
-        if (!isAndroid) {
+        if (isIOS) {
           event.preventDefault();
         }
         if (!didTapTwice) {
@@ -37686,9 +37674,6 @@ var init_App = __esm({
           didTapTwice = false;
           clearTimeout(tappedTwiceTimer);
         }
-        if (isAndroid) {
-          event.preventDefault();
-        }
         if (event.touches.length === 2) {
           this.setState({
             selectedElementIds: makeNextSelectedElementIds({}, this.state),
@@ -39018,6 +39003,7 @@ var init_App = __esm({
       };
       handleCanvasPointerMove = (event) => {
         this.savePointer(event.clientX, event.clientY, this.state.cursorButton);
+        this.lastPointerMoveEvent = event.nativeEvent;
         if (gesture.pointers.has(event.pointerId)) {
           gesture.pointers.set(event.pointerId, {
             x: event.clientX,
@@ -39443,6 +39429,7 @@ var init_App = __esm({
         }
       }
       handleCanvasPointerDown = (event) => {
+        this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);
         this.maybeUnfollowRemoteUser();
         if (this.state.contextMenu) {
           this.setState({ contextMenu: null });
@@ -39478,7 +39465,6 @@ var init_App = __esm({
           selection.removeAllRanges();
         }
         this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event);
-        this.maybeCleanupAfterMissingPointerUp(event);
         if (!this.state.penDetected && event.pointerType === "pen") {
           this.setState((prevState) => {
             return {
@@ -39502,7 +39488,47 @@ var init_App = __esm({
           cursorButton: "down"
         });
         this.savePointer(event.clientX, event.clientY, "down");
-        if (event.button !== POINTER_BUTTON.MAIN && event.button !== POINTER_BUTTON.TOUCH) {
+        if (event.button === POINTER_BUTTON.ERASER && this.state.activeTool.type !== TOOL_TYPE.eraser) {
+          this.setState(
+            {
+              activeTool: updateActiveTool(this.state, {
+                type: TOOL_TYPE.eraser,
+                lastActiveToolBeforeEraser: this.state.activeTool
+              })
+            },
+            () => {
+              this.handleCanvasPointerDown(event);
+              const onPointerUp2 = () => {
+                unsubPointerUp();
+                unsubCleanup?.();
+                if (isEraserActive(this.state)) {
+                  this.setState({
+                    activeTool: updateActiveTool(this.state, {
+                      ...this.state.activeTool.lastActiveTool || {
+                        type: TOOL_TYPE.selection
+                      },
+                      lastActiveToolBeforeEraser: null
+                    })
+                  });
+                }
+              };
+              const unsubPointerUp = addEventListener(
+                window,
+                "pointerup" /* POINTER_UP */,
+                onPointerUp2,
+                {
+                  once: true
+                }
+              );
+              let unsubCleanup;
+              requestAnimationFrame(() => {
+                unsubCleanup = this.missingPointerEventCleanupEmitter.once(onPointerUp2);
+              });
+            }
+          );
+          return;
+        }
+        if (event.button !== POINTER_BUTTON.MAIN && event.button !== POINTER_BUTTON.TOUCH && event.button !== POINTER_BUTTON.ERASER) {
           return;
         }
         if (gesture.pointers.size > 1) {
@@ -39586,7 +39612,9 @@ var init_App = __esm({
         const onPointerUp = this.onPointerUpFromPointerDownHandler(pointerDownState);
         const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
         const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
-        lastPointerUp = onPointerUp;
+        this.missingPointerEventCleanupEmitter.once(
+          (_event) => onPointerUp(_event || event.nativeEvent)
+        );
         if (!this.state.viewModeEnabled || this.state.activeTool.type === "laser") {
           window.addEventListener("pointermove" /* POINTER_MOVE */, onPointerMove);
           window.addEventListener("pointerup" /* POINTER_UP */, onPointerUp);
@@ -39667,11 +39695,15 @@ var init_App = __esm({
         touchTimeout = 0;
         invalidateContextMenu = false;
       };
-      maybeCleanupAfterMissingPointerUp(event) {
-        if (lastPointerUp !== null) {
-          lastPointerUp(event);
-        }
-      }
+      /**
+       * pointerup may not fire in certian cases (user tabs away...), so in order
+       * to properly cleanup pointerdown state, we need to fire any hanging
+       * pointerup handlers manually
+       */
+      maybeCleanupAfterMissingPointerUp = (event) => {
+        lastPointerUp?.();
+        this.missingPointerEventCleanupEmitter.trigger(event).clear();
+      };
       // Returns whether the event is a panning
       handleCanvasPanUsingWheelOrSpaceDrag = (event) => {
         if (!(gesture.pointers.size <= 1 && (event.button === POINTER_BUTTON.WHEEL || event.button === POINTER_BUTTON.MAIN && isHoldingSpace || isHandToolActive(this.state) || this.state.viewModeEnabled)) || isTextElement(this.state.editingElement)) {
@@ -39823,9 +39855,9 @@ var init_App = __esm({
           this.handlePointerMoveOverScrollbars(event2, pointerDownState);
         });
         const onPointerUp = withBatchedUpdates(() => {
+          lastPointerUp = null;
           isDraggingScrollBar = false;
           setCursorForShape(this.interactiveCanvas, this.state);
-          lastPointerUp = null;
           this.setState({
             cursorButton: "up"
           });
@@ -40872,6 +40904,7 @@ var init_App = __esm({
       }
       onPointerUpFromPointerDownHandler(pointerDownState) {
         return withBatchedUpdates((childEvent) => {
+          this.removePointer(childEvent);
           if (pointerDownState.eventListeners.onMove) {
             pointerDownState.eventListeners.onMove.flush();
           }
@@ -40951,7 +40984,7 @@ var init_App = __esm({
               }
             }
           }
-          lastPointerUp = null;
+          this.missingPointerEventCleanupEmitter.clear();
           window.removeEventListener(
             "pointermove" /* POINTER_MOVE */,
             pointerDownState.eventListeners.onMove
@@ -41242,18 +41275,20 @@ var init_App = __esm({
               });
             }
           }
-          if (isEraserActive(this.state)) {
+          const pointerStart = this.lastPointerDownEvent;
+          const pointerEnd = this.lastPointerUpEvent || this.lastPointerMoveEvent;
+          if (isEraserActive(this.state) && pointerStart && pointerEnd) {
             const draggedDistance = distance2d(
-              this.lastPointerDownEvent.clientX,
-              this.lastPointerDownEvent.clientY,
-              this.lastPointerUpEvent.clientX,
-              this.lastPointerUpEvent.clientY
+              pointerStart.clientX,
+              pointerStart.clientY,
+              pointerEnd.clientX,
+              pointerEnd.clientY
             );
             if (draggedDistance === 0) {
               const scenePointer = viewportCoordsToSceneCoords(
                 {
-                  clientX: this.lastPointerUpEvent.clientX,
-                  clientY: this.lastPointerUpEvent.clientY
+                  clientX: pointerEnd.clientX,
+                  clientY: pointerEnd.clientY
                 },
                 this.state
               );
@@ -42922,7 +42957,9 @@ var init_excalidraw = __esm({
     init_element();
     init_i18n();
     init_restore();
-    init_export2();
+    init_utils2();
+    init_json();
+    init_blob();
     init_typeChecks();
     init_constants();
     init_mutateElement();
@@ -42938,7 +42975,10 @@ var init_excalidraw = __esm({
     init_actionCanvas();
     init_transform();
     init_bounds();
-    init_export2();
+    init_appState();
+    init_math();
+    init_typeChecks();
+    init_renderElement();
     polyfill_default();
     ExcalidrawBase = (props) => {
       const {
@@ -43091,20 +43131,24 @@ export {
   bumpVersion,
   convertToExcalidrawElements,
   defaultLang,
-  elementPartiallyOverlapsWithOrContainsBBox,
-  elementsOverlappingBBox,
   exportToBlob,
   exportToCanvas2 as exportToCanvas,
   exportToClipboard,
   exportToSvg2 as exportToSvg,
   getCommonBounds,
+  getDefaultAppState,
+  getElementBounds,
   getFreeDrawSvgPath,
   getNonDeletedElements2 as getNonDeletedElements,
   getSceneVersion,
   getVisibleSceneBounds,
-  isElementInsideBBox,
+  isArrowElement,
+  isExcalidrawElement,
+  isFreeDrawElement,
   isInvisiblySmallElement,
   isLinearElement,
+  isTextElement,
+  isValueInRange,
   languages,
   loadFromBlob,
   loadLibraryFromBlob,
@@ -43118,6 +43162,7 @@ export {
   restoreAppState,
   restoreElements,
   restoreLibraryItems,
+  rotatePoint,
   sceneCoordsToViewportCoords,
   serializeAsJSON,
   serializeLibraryAsJSON,