@excalidraw/common 0.18.0-3a5ef40 → 0.18.0-3c916c5

package/dist/dev/index.js

@@ -1356,6 +1356,8 @@ function validateWCAG2Parms(parms) {
 import { clamp } from "@excalidraw/math";
 import { degreesToRadians } from "@excalidraw/math";
 var DARK_MODE_COLORS_CACHE = typeof window !== "undefined" ? /* @__PURE__ */ new Map() : null;
+var DARK_MODE_FILTER_INVERT_PERCENT = 93;
+var DARK_MODE_FILTER_HUE_ROTATE_DEGREES = 180;
 function cssHueRotate(red, green, blue, degrees) {
   const r = red / 255;
   const g = green / 255;
@@ -1394,7 +1396,10 @@ var cssInvert = (r, g, b, percent) => {
   const invertedB = invertComponent(b);
   return { r: invertedR, g: invertedG, b: invertedB };
 };
-var applyDarkModeFilter = (color) => {
+var applyDarkModeFilter = (color, enable = true) => {
+  if (!enable) {
+    return color;
+  }
   const cached = DARK_MODE_COLORS_CACHE?.get(color);
   if (cached) {
     return cached;
@@ -1402,12 +1407,17 @@ var applyDarkModeFilter = (color) => {
   const tc = tinycolor(color);
   const alpha = tc.getAlpha();
   const rgb = tc.toRgb();
-  const inverted = cssInvert(rgb.r, rgb.g, rgb.b, 93);
+  const inverted = cssInvert(
+    rgb.r,
+    rgb.g,
+    rgb.b,
+    DARK_MODE_FILTER_INVERT_PERCENT
+  );
   const rotated = cssHueRotate(
     inverted.r,
     inverted.g,
     inverted.b,
-    180
+    DARK_MODE_FILTER_HUE_ROTATE_DEGREES
   );
   const result = rgbToHex2(rotated.r, rotated.g, rotated.b, alpha);
   if (DARK_MODE_COLORS_CACHE) {
@@ -1415,6 +1425,33 @@ var applyDarkModeFilter = (color) => {
   }
   return result;
 };
+var _reverseDarkModeInvert = (r, g, b) => {
+  const p = DARK_MODE_FILTER_INVERT_PERCENT / 100;
+  const denominator = 1 - 2 * p;
+  const restore = (color) => Math.round(clamp((color - 255 * p) / denominator, 0, 255));
+  return {
+    r: restore(r),
+    g: restore(g),
+    b: restore(b)
+  };
+};
+var removeDarkModeFilter = (color) => {
+  const tc = tinycolor(color);
+  const alpha = tc.getAlpha();
+  const rgb = tc.toRgb();
+  const rotatedBack = cssHueRotate(
+    rgb.r,
+    rgb.g,
+    rgb.b,
+    DARK_MODE_FILTER_HUE_ROTATE_DEGREES
+  );
+  const restored = _reverseDarkModeInvert(
+    rotatedBack.r,
+    rotatedBack.g,
+    rotatedBack.b
+  );
+  return rgbToHex2(restored.r, restored.g, restored.b, alpha);
+};
 var pick = (source, keys) => {
   return keys.reduce((acc, key) => {
     if (key in source) {
@@ -1460,6 +1497,7 @@ var COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
   "orange",
   "red"
 ]);
+var COLOR_TOP_PICKS_SLOTS = 5;
 var DEFAULT_ELEMENT_STROKE_PICKS = [
   COLOR_PALETTE.black,
   COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
@@ -1474,6 +1512,22 @@ var DEFAULT_ELEMENT_BACKGROUND_PICKS = [
   COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
   COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX]
 ];
+var BUCKET_FILL_BACKGROUND_PICKS = [
+  COLOR_PALETTE.white,
+  COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX]
+];
+var DEFAULT_STICKY_NOTE_BG = "#ffdf6b";
+var STICKY_NOTE_STROKE_PICKS = DEFAULT_ELEMENT_STROKE_PICKS;
+var STICKY_NOTE_BACKGROUND_PICKS = [
+  DEFAULT_STICKY_NOTE_BG,
+  COLOR_PALETTE.pink[1],
+  COLOR_PALETTE.green[1],
+  COLOR_PALETTE.blue[1],
+  COLOR_PALETTE.orange[1]
+];
 var DEFAULT_CANVAS_BACKGROUND_PICKS = [
   COLOR_PALETTE.white,
   // radix slate2
@@ -1525,6 +1579,14 @@ var rgbToHex2 = (r, g, b, a) => {
   }
   return hex6;
 };
+var setColorAlpha = (color, alpha) => {
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    return color;
+  }
+  const { r, g, b } = tc.toRgb();
+  return rgbToHex2(r, g, b, alpha);
+};
 var colorToHex = (color) => {
   const tc = tinycolor(color);
   if (!tc.isValid()) {
@@ -1536,6 +1598,9 @@ var colorToHex = (color) => {
 var isTransparent = (color) => {
   return tinycolor(color).getAlpha() === 0;
 };
+var isOpaqueColor = (color) => {
+  return tinycolor(color).getAlpha() === 1;
+};
 var COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
 var calculateContrast = (r, g, b) => {
   const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
@@ -1562,7 +1627,7 @@ var normalizeInputColor = (color) => {
   }
   const tc = tinycolor(color);
   if (tc.isValid()) {
-    if (tc.getFormat() === "hex" && !color.startsWith("#")) {
+    if (["hex", "hex8"].includes(tc.getFormat()) && !color.startsWith("#")) {
       return `#${color}`;
     }
     return color;
@@ -1575,6 +1640,8 @@ init_define_import_meta_env();
 var supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 var APP_NAME = "Excalidraw";
 var TEXT_AUTOWRAP_THRESHOLD = 36;
+var TEXT_VIEWPORT_PADDING = 20;
+var TEXT_MAX_WRAP_WIDTH = 800;
 var DRAGGING_THRESHOLD = 10;
 var MINIMUM_ARROW_SIZE = 20;
 var LINE_CONFIRM_THRESHOLD = 8;
@@ -1626,6 +1693,7 @@ var EVENT = /* @__PURE__ */ ((EVENT2) => {
   EVENT2["POINTER_MOVE"] = "pointermove";
   EVENT2["POINTER_DOWN"] = "pointerdown";
   EVENT2["POINTER_UP"] = "pointerup";
+  EVENT2["POINTER_CANCEL"] = "pointercancel";
   EVENT2["STATE_CHANGE"] = "statechange";
   EVENT2["WHEEL"] = "wheel";
   EVENT2["TOUCH_START"] = "touchstart";
@@ -1737,7 +1805,28 @@ var FRAME_STYLE = {
 };
 var MIN_FONT_SIZE = 1;
 var DEFAULT_FONT_SIZE = 20;
+var STICKY_NOTE_MIN_FONT_SIZE = 16;
+var STICKY_NOTE_MAX_FONT_SIZE = 512;
+var STICKY_NOTE_FALLBACK_FONT_SIZE = 28;
+var STICKY_NOTE_FONT_STEP = 2;
+var STICKY_NOTE_PADDING = 16;
+var STICKY_NOTE_FOOTER = {
+  height: 20,
+  fontSize: 12,
+  fontFamily: "Helvetica, Arial, sans-serif",
+  baselineFromBottom: 14,
+  opacity: 1,
+  minBodyWidthForYear: 80
+};
+var STICKY_NOTE_BODY_INSET_Y = STICKY_NOTE_PADDING * 2 + STICKY_NOTE_FOOTER.height;
+var DEFAULT_STICKY_NOTE_SIZE = 250;
+var STICKY_NOTE_MIN_SIZE = 75;
+var STICKY_NOTE_SHADOW_OFFSET = 3;
+var STICKY_NOTE_SHADOW_OPACITY = 0.16;
+var STICKY_NOTE_EDGE_SHADOW_WIDTH = 0.5;
+var STICKY_NOTE_EDGE_SHADOW_OPACITY = 0.08;
 var DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;
+var FONT_TOP_PICKS_SLOTS = 3;
 var DEFAULT_TEXT_ALIGN = "left";
 var DEFAULT_VERTICAL_ALIGN = "top";
 var DEFAULT_VERSION = "{version}";
@@ -1807,9 +1896,13 @@ var TOUCH_CTX_MENU_TIMEOUT = 500;
 var TITLE_TIMEOUT = 1e4;
 var VERSION_TIMEOUT = 3e4;
 var SCROLL_TIMEOUT = 100;
+var ZEN_MODE_TRANSITION_DURATION = 250;
 var ZOOM_STEP = 0.1;
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 30;
+var DEFAULT_ZOOM = Object.freeze({
+  value: 1
+});
 var HYPERLINK_TOOLTIP_DELAY = 300;
 var IDLE_THRESHOLD = 6e4;
 var ACTIVE_THRESHOLD = 3e3;
@@ -1836,8 +1929,10 @@ var DEFAULT_UI_OPTIONS = {
 var MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 var EXPORT_SCALES = [1, 2, 3];
 var DEFAULT_EXPORT_PADDING = 10;
-var DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-var MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+var DEFAULT_IMAGE_OPTIONS = {
+  maxWidthOrHeight: 1440,
+  maxFileSizeBytes: 4 * 1024 * 1024
+};
 var SVG_NS = "http://www.w3.org/2000/svg";
 var SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
@@ -1861,6 +1956,7 @@ var TEXT_ALIGN = {
   RIGHT: "right"
 };
 var ELEMENT_READY_TO_ERASE_OPACITY = 20;
+var ELEMENT_PENDING_DRAW_SHAPE_OPACITY = 70;
 var DEFAULT_PROPORTIONAL_RADIUS = 0.25;
 var DEFAULT_ADAPTIVE_RADIUS = 32;
 var ROUNDNESS = {
@@ -1884,16 +1980,34 @@ var ROUGHNESS = {
   artist: 1,
   cartoonist: 2
 };
+var STROKE_WIDTH_KEYS = [
+  "thin",
+  "medium",
+  "bold"
+];
 var STROKE_WIDTH = {
   thin: 1,
+  medium: 2,
+  bold: 4,
+  extraBold: 8
+  // unused (may be introduced in the future)
+};
+var FREEDRAW_STROKE_WIDTH = {
+  thin: 0.5,
+  medium: 1,
   bold: 2,
   extraBold: 4
+  // legacy (may be used again in the future)
+};
+var getStrokeWidthByKey = (elementType, strokeWidthKey) => {
+  return elementType === "freedraw" ? FREEDRAW_STROKE_WIDTH[strokeWidthKey] : STROKE_WIDTH[strokeWidthKey];
 };
+var DEFAULT_ELEMENT_STROKE_WIDTH_KEY = "medium";
 var DEFAULT_ELEMENT_PROPS = {
   strokeColor: COLOR_PALETTE.black,
   backgroundColor: COLOR_PALETTE.transparent,
   fillStyle: "solid",
-  strokeWidth: 2,
+  strokeWidth: STROKE_WIDTH[DEFAULT_ELEMENT_STROKE_WIDTH_KEY],
   strokeStyle: "solid",
   roughness: ROUGHNESS.artist,
   opacity: 100,
@@ -1925,8 +2039,11 @@ var TOOL_TYPE = {
   hand: "hand",
   frame: "frame",
   magicframe: "magicframe",
+  stickynote: "stickynote",
   embeddable: "embeddable",
-  laser: "laser"
+  laser: "laser",
+  autoshape: "autoshape",
+  bucketfill: "bucketfill"
 };
 var EDITOR_LS_KEYS = {
   OAI_API_KEY: "excalidraw-oai-api-key",
@@ -1957,6 +2074,8 @@ var BIND_MODE_TIMEOUT = 700;
 var MOBILE_ACTION_BUTTON_BG = {
   background: "var(--mobile-action-button-bg)"
 };
+var DEFAULT_STROKE_STREAMLINE = 0.5;
+var DEFAULT_STROKE_STREAMLINE_PRECISE = 0.2;
 
 // src/font-metadata.ts
 init_define_import_meta_env();
@@ -2123,15 +2242,18 @@ var MQ_MIN_TABLET = MQ_MAX_MOBILE + 1;
 var MQ_MAX_TABLET = 1180;
 var MQ_MIN_WIDTH_DESKTOP = 1440;
 var MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
-var isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-var isWindows = /^Win/.test(navigator.platform);
-var isAndroid = /\b(android)\b/i.test(navigator.userAgent);
-var isFirefox = typeof window !== "undefined" && "netscape" in window && navigator.userAgent.indexOf("rv:") > 1 && navigator.userAgent.indexOf("Gecko") > 1;
-var isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
-var isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
-var isIOS = /iPad|iPhone/i.test(navigator.platform) || // iPadOS 13+
-navigator.userAgent.includes("Mac") && "ontouchend" in document;
-var isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
+var ua = typeof navigator === "undefined" ? void 0 : navigator;
+var uaPlatform = ua?.platform ?? "";
+var uaString = ua?.userAgent ?? "";
+var isDarwin = /Mac|iPod|iPhone|iPad/.test(uaPlatform);
+var isWindows = /^Win/.test(uaPlatform);
+var isAndroid = /\b(android)\b/i.test(uaString);
+var isFirefox = typeof window !== "undefined" && "netscape" in window && uaString.indexOf("rv:") > 1 && uaString.indexOf("Gecko") > 1;
+var isChrome = uaString.indexOf("Chrome") !== -1;
+var isSafari = !isChrome && uaString.indexOf("Safari") !== -1;
+var isIOS = /iPad|iPhone/i.test(uaPlatform) || // iPadOS 13+
+uaString.includes("Mac") && typeof document !== "undefined" && "ontouchend" in document;
+var isBrave = () => ua?.brave?.isBrave?.name === "isBrave";
 var isMobileBreakpoint = (width, height) => {
   return width <= MQ_MAX_MOBILE || height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE;
 };
@@ -2141,7 +2263,7 @@ var isTabletBreakpoint = (editorWidth, editorHeight) => {
   return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
 };
 var isMobileOrTablet = () => {
-  const ua = navigator.userAgent || "";
+  const ua2 = navigator.userAgent || "";
   const platform = navigator.platform || "";
   const uaData = navigator.userAgentData;
   if (uaData) {
@@ -2162,14 +2284,14 @@ var isMobileOrTablet = () => {
     return true;
   }
   if (isAndroid) {
-    const isAndroidPhone = /Mobile/i.test(ua);
+    const isAndroidPhone = /Mobile/i.test(ua2);
     const isAndroidTablet = !isAndroidPhone;
     if (isAndroidPhone || isAndroidTablet) {
       const looksTouchTablet = matchMedia?.("(hover: none)").matches && matchMedia?.("(pointer: coarse)").matches;
       return looksTouchTablet;
     }
   }
-  const looksDesktopPlatform = /Win|Linux|CrOS|Mac/.test(platform) || /Windows NT|X11|CrOS|Macintosh/.test(ua);
+  const looksDesktopPlatform = /Win|Linux|CrOS|Mac/.test(platform) || /Windows NT|X11|CrOS|Macintosh/.test(ua2);
   if (looksDesktopPlatform) {
     return false;
   }
@@ -2286,6 +2408,7 @@ var KEYS = {
   SUBTRACT: "-",
   SLASH: "/",
   A: "a",
+  B: "b",
   C: "c",
   D: "d",
   E: "e",
@@ -2294,6 +2417,7 @@ var KEYS = {
   H: "h",
   I: "i",
   L: "l",
+  N: "n",
   O: "o",
   P: "p",
   Q: "q",
@@ -2337,6 +2461,7 @@ var shouldRotateWithDiscreteAngle = (event) => event.shiftKey;
 // src/points.ts
 init_define_import_meta_env();
 import {
+  pointFrom,
   pointFromPair
 } from "@excalidraw/math";
 var getSizeFromPoints = (points) => {
@@ -2381,12 +2506,12 @@ var rescalePoints = (dimension, newSize, points, normalize) => {
 };
 var getGridPoint = (x, y, gridSize) => {
   if (gridSize) {
-    return [
+    return pointFrom(
       Math.round(x / gridSize) * gridSize,
       Math.round(y / gridSize) * gridSize
-    ];
+    );
   }
-  return [x, y];
+  return pointFrom(x, y);
 };
 
 // src/promise-pool.ts
@@ -2477,14 +2602,28 @@ var getDateTime = () => {
   return `${year}-${month}-${day}-${hr}${min}`;
 };
 var capitalizeString = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-var isToolIcon = (target) => target instanceof HTMLElement && target.className.includes("ToolIcon");
-var isInputLike = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
-target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
+var getTargetWindow = (target) => {
+  const owner = target;
+  return owner?.ownerDocument?.defaultView ?? owner?.defaultView ?? (typeof window === "undefined" ? null : window);
+};
+var isToolIcon = (target) => {
+  const targetWindow = getTargetWindow(target);
+  return !!targetWindow && target instanceof targetWindow.HTMLElement && target.className.includes("ToolIcon");
+};
+var isInputLike = (target) => {
+  const targetWindow = getTargetWindow(target);
+  return !!targetWindow && (target instanceof targetWindow.HTMLElement && target.dataset.type === "wysiwyg" || target instanceof targetWindow.HTMLBRElement || // newline in wysiwyg
+  target instanceof targetWindow.HTMLInputElement || target instanceof targetWindow.HTMLTextAreaElement || target instanceof targetWindow.HTMLSelectElement);
+};
 var isInteractive = (target) => {
-  return isInputLike(target) || target instanceof Element && !!target.closest("label, button");
+  const targetWindow = getTargetWindow(target);
+  return isInputLike(target) || !!targetWindow && target instanceof targetWindow.Element && !!target.closest("label, button");
+};
+var isWritableElement = (target) => {
+  const targetWindow = getTargetWindow(target);
+  return !!targetWindow && (target instanceof targetWindow.HTMLElement && target.dataset.type === "wysiwyg" || target instanceof targetWindow.HTMLBRElement || // newline in wysiwyg
+  target instanceof targetWindow.HTMLTextAreaElement || target instanceof targetWindow.HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search") || target instanceof targetWindow.HTMLElement && target.closest(".cm-editor") !== null);
 };
-var isWritableElement = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
-target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search");
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -2529,48 +2668,40 @@ var debounce = (fn, timeout) => {
   };
   return ret;
 };
-var throttleRAF = (fn, opts) => {
+var throttleRAF = (fn, ownerWindow) => {
   let timerId = null;
   let lastArgs = null;
-  let lastArgsTrailing = null;
-  const scheduleFunc = (args) => {
-    timerId = window.requestAnimationFrame(() => {
+  const getOwnerWindow = () => ownerWindow ?? window;
+  const scheduleFunc = () => {
+    timerId = getOwnerWindow().requestAnimationFrame(() => {
       timerId = null;
-      fn(...args);
+      const args = lastArgs;
       lastArgs = null;
-      if (lastArgsTrailing) {
-        lastArgs = lastArgsTrailing;
-        lastArgsTrailing = null;
-        scheduleFunc(lastArgs);
+      if (args) {
+        fn(...args);
       }
     });
   };
   const ret = (...args) => {
-    if (isTestEnv()) {
-      fn(...args);
-      return;
-    }
     lastArgs = args;
     if (timerId === null) {
-      scheduleFunc(lastArgs);
-    } else if (opts?.trailing) {
-      lastArgsTrailing = args;
+      scheduleFunc();
     }
   };
   ret.flush = () => {
     if (timerId !== null) {
-      cancelAnimationFrame(timerId);
+      getOwnerWindow().cancelAnimationFrame(timerId);
       timerId = null;
     }
     if (lastArgs) {
-      fn(...lastArgsTrailing || lastArgs);
-      lastArgs = lastArgsTrailing = null;
+      fn(...lastArgs);
+      lastArgs = null;
     }
   };
   ret.cancel = () => {
-    lastArgs = lastArgsTrailing = null;
+    lastArgs = null;
     if (timerId !== null) {
-      cancelAnimationFrame(timerId);
+      getOwnerWindow().cancelAnimationFrame(timerId);
       timerId = null;
     }
   };
@@ -2579,67 +2710,6 @@ var throttleRAF = (fn, opts) => {
 var easeOut = (k) => {
   return 1 - Math.pow(1 - k, 4);
 };
-var easeOutInterpolate = (from, to, progress) => {
-  return (to - from) * easeOut(progress) + from;
-};
-var easeToValuesRAF = ({
-  fromValues,
-  toValues,
-  onStep,
-  duration = 250,
-  interpolateValue,
-  onStart,
-  onEnd,
-  onCancel
-}) => {
-  let canceled = false;
-  let frameId = 0;
-  let startTime;
-  function step(timestamp) {
-    if (canceled) {
-      return;
-    }
-    if (startTime === void 0) {
-      startTime = timestamp;
-      onStart?.();
-    }
-    const elapsed = Math.min(timestamp - startTime, duration);
-    const factor = easeOut(elapsed / duration);
-    const newValues = {};
-    Object.keys(fromValues).forEach((key) => {
-      const _key = key;
-      const result = (toValues[_key] - fromValues[_key]) * factor + fromValues[_key];
-      newValues[_key] = result;
-    });
-    onStep(newValues);
-    if (elapsed < duration) {
-      const progress = elapsed / duration;
-      const newValues2 = {};
-      Object.keys(fromValues).forEach((key) => {
-        const _key = key;
-        const startValue = fromValues[_key];
-        const endValue = toValues[_key];
-        let result;
-        result = interpolateValue ? interpolateValue(startValue, endValue, progress, _key) : easeOutInterpolate(startValue, endValue, progress);
-        if (result == null) {
-          result = easeOutInterpolate(startValue, endValue, progress);
-        }
-        newValues2[_key] = result;
-      });
-      onStep(newValues2);
-      frameId = window.requestAnimationFrame(step);
-    } else {
-      onStep(toValues);
-      onEnd?.();
-    }
-  }
-  frameId = window.requestAnimationFrame(step);
-  return () => {
-    onCancel?.();
-    canceled = true;
-    window.cancelAnimationFrame(frameId);
-  };
-};
 var chunk = (array, size) => {
   if (!array.length || size < 1) {
     return [];
@@ -2682,7 +2752,7 @@ var updateActiveTool = (appState, data) => {
   }
   return {
     ...appState.activeTool,
-    lastActiveTool: data.lastActiveToolBeforeEraser === void 0 ? appState.activeTool.lastActiveTool : data.lastActiveToolBeforeEraser,
+    lastActiveTool: data.lastActiveTool === void 0 ? appState.activeTool.lastActiveTool : data.lastActiveTool,
     type: data.type,
     customType: null,
     locked: data.locked ?? appState.activeTool.locked,
@@ -2719,6 +2789,8 @@ var RS_LTR_CHARS = "A-Za-z\xC0-\xD6\xD8-\xF6\xF8-\u02B8\u0300-\u0590\u0800-\u1FF
 var RS_RTL_CHARS = "\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC";
 var RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);
 var isRTL = (text) => RE_RTL_CHECK.test(text);
+var RE_RTL_CHARS = new RegExp(`[${RS_RTL_CHARS}]`);
+var hasRTLChars = (text) => RE_RTL_CHARS.test(text);
 var tupleToCoors = (xyTuple) => {
   const [x, y] = xyTuple;
   return { x, y };
@@ -2809,19 +2881,21 @@ var supportsEmoji = () => {
   return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
 };
 var getNearestScrollableContainer = (element) => {
+  const ownerDocument = element.ownerDocument;
+  const ownerWindow = ownerDocument.defaultView ?? window;
   let parent = element.parentElement;
   while (parent) {
-    if (parent === document.body) {
-      return document;
+    if (parent === ownerDocument.body) {
+      return ownerDocument;
     }
-    const { overflowY } = window.getComputedStyle(parent);
+    const { overflowY } = ownerWindow.getComputedStyle(parent);
     const hasScrollableContent = parent.scrollHeight > parent.clientHeight;
     if (hasScrollableContent && (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay")) {
       return parent;
     }
     parent = parent.parentElement;
   }
-  return document;
+  return ownerDocument;
 };
 var focusNearestParent = (element) => {
   let parent = element.parentElement;
@@ -3159,6 +3233,9 @@ var setFeatureFlag = (flag, value) => {
     console.error("unable to set feature flag", e);
   }
 };
+var oneOf = (needle, haystack) => {
+  return haystack.includes(needle);
+};
 
 // src/random.ts
 var random = new Random(Date.now());
@@ -3169,6 +3246,16 @@ var reseed = (seed) => {
   testIdBase = 0;
 };
 var randomId = () => isTestEnv() ? `id${testIdBase++}` : nanoid();
+var seededRandom = (seed) => {
+  let value = seed >>> 0;
+  return () => {
+    value += 1831565813;
+    let next = value;
+    next = Math.imul(next ^ next >>> 15, next | 1);
+    next ^= next + Math.imul(next ^ next >>> 7, next | 61);
+    return ((next ^ next >>> 14) >>> 0) / 4294967296;
+  };
+};
 
 // src/url.ts
 init_define_import_meta_env();
@@ -3232,6 +3319,298 @@ var Emitter = class {
     this.subscribers = [];
   }
 };
+
+// src/appEventBus.ts
+init_define_import_meta_env();
+var AppEventBus = class {
+  constructor(behavior) {
+    this.behavior = behavior;
+  }
+  emitters = /* @__PURE__ */ new Map();
+  lastPayload = /* @__PURE__ */ new Map();
+  emittedOnce = /* @__PURE__ */ new Set();
+  getEmitter(name) {
+    let emitter = this.emitters.get(name);
+    if (!emitter) {
+      emitter = new Emitter();
+      this.emitters.set(name, emitter);
+    }
+    return emitter;
+  }
+  toPromiseValue(args) {
+    return args.length === 1 ? args[0] : args;
+  }
+  on(name, callback) {
+    const eventBehavior = this.behavior[name];
+    const cachedPayload = this.lastPayload.get(name);
+    if (callback) {
+      if (eventBehavior.replay === "last" && cachedPayload) {
+        queueMicrotask(() => callback(...cachedPayload));
+        if (eventBehavior.cardinality === "once") {
+          return () => {
+          };
+        }
+      }
+      return this.getEmitter(name).on(callback);
+    }
+    if (eventBehavior.cardinality !== "once" || eventBehavior.replay !== "last") {
+      throw new Error(`Event "${String(name)}" requires a callback`);
+    }
+    if (cachedPayload) {
+      return Promise.resolve(this.toPromiseValue(cachedPayload));
+    }
+    return new Promise((resolve) => {
+      this.getEmitter(name).once((...args) => {
+        resolve(this.toPromiseValue(args));
+      });
+    });
+  }
+  emit(name, ...args) {
+    const eventBehavior = this.behavior[name];
+    if (!isProdEnv()) {
+      if (eventBehavior.cardinality === "once") {
+        if (this.emittedOnce.has(name)) {
+          throw new Error(`Event "${String(name)}" can only be emitted once`);
+        }
+        this.emittedOnce.add(name);
+      }
+    }
+    if (eventBehavior.replay === "last") {
+      this.lastPayload.set(name, args);
+    }
+    try {
+      this.getEmitter(name).trigger(...args);
+    } finally {
+      if (eventBehavior.cardinality === "once") {
+        this.getEmitter(name).clear();
+      }
+    }
+  }
+  clear() {
+    this.lastPayload.clear();
+    this.emittedOnce.clear();
+    for (const emitter of this.emitters.values()) {
+      emitter.clear();
+    }
+    this.emitters.clear();
+  }
+};
+
+// src/versionedSnapshotStore.ts
+init_define_import_meta_env();
+var VersionedSnapshotStore = class {
+  constructor(initialValue, isEqual = Object.is) {
+    this.isEqual = isEqual;
+    this.value = initialValue;
+  }
+  version = 0;
+  value;
+  waiters = /* @__PURE__ */ new Set();
+  subscribers = /* @__PURE__ */ new Set();
+  getSnapshot() {
+    return { version: this.version, value: this.value };
+  }
+  set(nextValue) {
+    if (this.isEqual(this.value, nextValue)) {
+      return false;
+    }
+    this.value = nextValue;
+    this.version += 1;
+    const snapshot = this.getSnapshot();
+    for (const subscriber of this.subscribers) {
+      subscriber(snapshot);
+    }
+    for (const waiter of this.waiters) {
+      waiter(snapshot);
+    }
+    this.waiters.clear();
+    return true;
+  }
+  update(updater) {
+    return this.set(updater(this.value));
+  }
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+  pull(sinceVersion = -1) {
+    if (this.version !== sinceVersion) {
+      return Promise.resolve(this.getSnapshot());
+    }
+    return new Promise((resolve) => {
+      this.waiters.add(resolve);
+    });
+  }
+};
+
+// debug.ts
+init_define_import_meta_env();
+var lessPrecise = (num, precision = 5) => parseFloat(num.toPrecision(precision));
+var getAvgFrameTime = (times) => lessPrecise(times.reduce((a, b) => a + b) / times.length);
+var Debug = class _Debug {
+  static DEBUG_LOG_TIMES = true;
+  static TIMES_AGGR = {};
+  static TIMES_AVG = {};
+  static LAST_DEBUG_LOG_CALL = 0;
+  static DEBUG_LOG_INTERVAL_ID = null;
+  static LAST_FRAME_TIMESTAMP = 0;
+  static FRAME_COUNT = 0;
+  static ANIMATION_FRAME_ID = null;
+  static scheduleAnimationFrame = () => {
+    if (_Debug.DEBUG_LOG_INTERVAL_ID !== null) {
+      _Debug.ANIMATION_FRAME_ID = requestAnimationFrame((timestamp) => {
+        if (_Debug.LAST_FRAME_TIMESTAMP !== timestamp) {
+          _Debug.LAST_FRAME_TIMESTAMP = timestamp;
+          _Debug.FRAME_COUNT++;
+        }
+        if (_Debug.DEBUG_LOG_INTERVAL_ID !== null) {
+          _Debug.scheduleAnimationFrame();
+        }
+      });
+    }
+  };
+  static setupInterval = () => {
+    if (_Debug.DEBUG_LOG_INTERVAL_ID === null) {
+      console.info("%c(starting perf recording)", "color: lime");
+      _Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(_Debug.debugLogger, 1e3);
+      _Debug.scheduleAnimationFrame();
+    }
+    _Debug.LAST_DEBUG_LOG_CALL = Date.now();
+  };
+  static debugLogger = () => {
+    if (_Debug.DEBUG_LOG_TIMES) {
+      for (const [name, { t, times }] of Object.entries(_Debug.TIMES_AGGR)) {
+        if (times.length) {
+          console.info(
+            name,
+            lessPrecise(times.reduce((a, b) => a + b)),
+            times.sort((a, b) => a - b).map((x) => lessPrecise(x))
+          );
+          _Debug.TIMES_AGGR[name] = { t, times: [] };
+        }
+      }
+      for (const [name, { t, times, avg }] of Object.entries(_Debug.TIMES_AVG)) {
+        if (times.length) {
+          const totalTime = times.reduce((a, b) => a + b);
+          const avgFrameTime = lessPrecise(totalTime / _Debug.FRAME_COUNT);
+          console.info(
+            name,
+            `- ${times.length} calls - ${avgFrameTime}ms/frame across ${_Debug.FRAME_COUNT} frames (${lessPrecise(
+              avgFrameTime / 16.67 * 100,
+              1
+            )}% of frame budget)`
+          );
+          _Debug.TIMES_AVG[name] = {
+            t,
+            times: [],
+            avg: avg != null ? getAvgFrameTime([avg, avgFrameTime]) : avgFrameTime
+          };
+        }
+      }
+    }
+    _Debug.FRAME_COUNT = 0;
+    if (Date.now() - _Debug.LAST_DEBUG_LOG_CALL > 600 && _Debug.DEBUG_LOG_INTERVAL_ID !== null) {
+      console.info("%c(stopping perf recording)", "color: red");
+      window.clearInterval(_Debug.DEBUG_LOG_INTERVAL_ID);
+      window.cancelAnimationFrame(_Debug.ANIMATION_FRAME_ID);
+      _Debug.ANIMATION_FRAME_ID = null;
+      _Debug.FRAME_COUNT = 0;
+      _Debug.LAST_FRAME_TIMESTAMP = 0;
+      _Debug.DEBUG_LOG_INTERVAL_ID = null;
+      _Debug.TIMES_AGGR = {};
+      _Debug.TIMES_AVG = {};
+    }
+  };
+  static logTime = (time, name = "default") => {
+    _Debug.setupInterval();
+    const now = performance.now();
+    const { t, times } = _Debug.TIMES_AGGR[name] = _Debug.TIMES_AGGR[name] || {
+      t: 0,
+      times: []
+    };
+    if (t) {
+      times.push(time != null ? time : now - t);
+    }
+    _Debug.TIMES_AGGR[name].t = now;
+  };
+  static logTimeAverage = (time, name = "default") => {
+    _Debug.setupInterval();
+    const now = performance.now();
+    const { t, times } = _Debug.TIMES_AVG[name] = _Debug.TIMES_AVG[name] || {
+      t: 0,
+      times: []
+    };
+    if (t) {
+      times.push(time != null ? time : now - t);
+    }
+    _Debug.TIMES_AVG[name].t = now;
+  };
+  static logWrapper = (type) => (fn, name = "default") => {
+    return (...args) => {
+      const t0 = performance.now();
+      const ret = fn(...args);
+      _Debug[type](performance.now() - t0, name);
+      return ret;
+    };
+  };
+  static logTimeWrap = _Debug.logWrapper("logTime");
+  static logTimeAverageWrap = _Debug.logWrapper("logTimeAverage");
+  static perfWrap = (fn, name = "default") => {
+    return (...args) => {
+      console.time(name);
+      const ret = fn(...args);
+      console.timeEnd(name);
+      return ret;
+    };
+  };
+  static CHANGED_CACHE = {};
+  static logChanged(name, obj) {
+    const prev = _Debug.CHANGED_CACHE[name];
+    _Debug.CHANGED_CACHE[name] = obj;
+    if (!prev) {
+      return;
+    }
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(obj)]);
+    const changed = {};
+    for (const key of allKeys) {
+      const prevVal = prev[key];
+      const nextVal = obj[key];
+      if (!deepEqual(prevVal, nextVal)) {
+        changed[key] = { prev: prevVal, next: nextVal };
+      }
+    }
+    if (Object.keys(changed).length > 0) {
+      console.info(`[${name}] changed:`, changed);
+    }
+  }
+};
+function deepEqual(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (a === null || b === null || typeof a !== "object" || typeof b !== "object") {
+    return false;
+  }
+  if (Array.isArray(a) !== Array.isArray(b)) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!deepEqual(
+      a[key],
+      b[key]
+    )) {
+      return false;
+    }
+  }
+  return true;
+}
 export {
   ACTIVE_THRESHOLD,
   ALLOWED_PASTE_MIME_TYPES,
@@ -3239,8 +3618,10 @@ export {
   ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
   ARROW_LABEL_WIDTH_FRACTION,
   ARROW_TYPE,
+  AppEventBus,
   BIND_MODE_TIMEOUT,
   BOUND_TEXT_PADDING,
+  BUCKET_FILL_BACKGROUND_PICKS,
   BinaryHeap,
   CANVAS_ONLY_ACTIONS,
   CANVAS_SEARCH_TAB,
@@ -3251,6 +3632,7 @@ export {
   COLOR_CHARCOAL_BLACK,
   COLOR_OUTLINE_CONTRAST_THRESHOLD,
   COLOR_PALETTE,
+  COLOR_TOP_PICKS_SLOTS,
   COLOR_VOICE_CALL,
   COLOR_WHITE,
   CURSOR_TYPE,
@@ -3266,26 +3648,34 @@ export {
   DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
   DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,
   DEFAULT_ELEMENT_STROKE_PICKS,
+  DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
   DEFAULT_EXPORT_PADDING,
   DEFAULT_FILENAME,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_GRID_SIZE,
   DEFAULT_GRID_STEP,
+  DEFAULT_IMAGE_OPTIONS,
   DEFAULT_LASER_COLOR,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_PROPORTIONAL_RADIUS,
   DEFAULT_REDUCED_GLOBAL_ALPHA,
   DEFAULT_SIDEBAR,
+  DEFAULT_STICKY_NOTE_BG,
+  DEFAULT_STICKY_NOTE_SIZE,
+  DEFAULT_STROKE_STREAMLINE,
+  DEFAULT_STROKE_STREAMLINE_PRECISE,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERSION,
   DEFAULT_VERTICAL_ALIGN,
+  DEFAULT_ZOOM,
   DOUBLE_TAP_POSITION_THRESHOLD,
   DRAGGING_THRESHOLD,
+  Debug,
   EDITOR_LS_KEYS,
   ELEMENT_LINK_KEY,
+  ELEMENT_PENDING_DRAW_SHAPE_OPACITY,
   ELEMENT_READY_TO_ERASE_OPACITY,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
@@ -3302,7 +3692,9 @@ export {
   FONT_FAMILY_GENERIC_FALLBACKS,
   FONT_METADATA,
   FONT_SIZES,
+  FONT_TOP_PICKS_SLOTS,
   FRAME_STYLE,
+  FREEDRAW_STROKE_WIDTH,
   GOOGLE_FONTS_RANGES,
   HYPERLINK_TOOLTIP_DELAY,
   IDLE_THRESHOLD,
@@ -3315,7 +3707,6 @@ export {
   LINE_CONFIRM_THRESHOLD,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
   LOCAL_FONT_PROTOCOL,
-  MAX_ALLOWED_FILE_BYTES,
   MAX_CUSTOM_COLORS_USED_IN_CANVAS,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MAX_ZOOM,
@@ -3345,14 +3736,31 @@ export {
   SHIFT_LOCKING_ANGLE,
   SIDE_RESIZING_THRESHOLD,
   STATS_PANELS,
+  STICKY_NOTE_BACKGROUND_PICKS,
+  STICKY_NOTE_BODY_INSET_Y,
+  STICKY_NOTE_EDGE_SHADOW_OPACITY,
+  STICKY_NOTE_EDGE_SHADOW_WIDTH,
+  STICKY_NOTE_FALLBACK_FONT_SIZE,
+  STICKY_NOTE_FONT_STEP,
+  STICKY_NOTE_FOOTER,
+  STICKY_NOTE_MAX_FONT_SIZE,
+  STICKY_NOTE_MIN_FONT_SIZE,
+  STICKY_NOTE_MIN_SIZE,
+  STICKY_NOTE_PADDING,
+  STICKY_NOTE_SHADOW_OFFSET,
+  STICKY_NOTE_SHADOW_OPACITY,
+  STICKY_NOTE_STROKE_PICKS,
   STRING_MIME_TYPES,
   STROKE_WIDTH,
+  STROKE_WIDTH_KEYS,
   SVG_DOCUMENT_PREAMBLE,
   SVG_NS,
   TAP_TWICE_TIMEOUT,
   TEXT_ALIGN,
   TEXT_AUTOWRAP_THRESHOLD,
+  TEXT_MAX_WRAP_WIDTH,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
+  TEXT_VIEWPORT_PADDING,
   THEME,
   TITLE_TIMEOUT,
   TOOL_TYPE,
@@ -3363,8 +3771,10 @@ export {
   VERSIONS,
   VERSION_TIMEOUT,
   VERTICAL_ALIGN,
+  VersionedSnapshotStore,
   WINDOWS_EMOJI_FALLBACK_FONT,
   YOUTUBE_STATES,
+  ZEN_MODE_TRANSITION_DURATION,
   ZOOM_STEP,
   addEventListener,
   allowFullScreen,
@@ -3386,7 +3796,6 @@ export {
   deriveStylesPanelMode,
   distance,
   easeOut,
-  easeToValuesRAF,
   escapeDoubleQuotes,
   exitFullScreen,
   findIndex,
@@ -3407,10 +3816,13 @@ export {
   getLineHeight,
   getNearestScrollableContainer,
   getSizeFromPoints,
+  getStrokeWidthByKey,
   getSvgPathFromStroke,
+  getTargetWindow,
   getUpdatedTimestamp,
   getVersion,
   getVerticalOffset,
+  hasRTLChars,
   invariant,
   isAndroid,
   isAnyTrue,
@@ -3430,6 +3842,7 @@ export {
   isLocalLink,
   isMemberOf,
   isMobileBreakpoint,
+  isOpaqueColor,
   isPrimitive,
   isProdEnv,
   isPromiseLike,
@@ -3456,12 +3869,14 @@ export {
   normalizeEOL,
   normalizeInputColor,
   normalizeLink,
+  oneOf,
   preventUnload,
   promiseTry,
   queryFocusableElements,
   randomId,
   randomInteger,
   reduceToCommonValue,
+  removeDarkModeFilter,
   removeSelection,
   rescalePoints,
   reseed,
@@ -3469,7 +3884,9 @@ export {
   rgbToHex2 as rgbToHex,
   safelyParseJSON,
   sceneCoordsToViewportCoords,
+  seededRandom,
   selectNode,
+  setColorAlpha,
   setDateTimeForTests,
   setDesktopUIMode,
   setFeatureFlag,