@excalidraw/common 0.18.0-200a6bd94 → 0.18.0-214cd6e

package/dist/dev/index.js

@@ -281,49 +281,48 @@ var BinaryHeap = class {
   content = [];
   sinkDown(idx) {
     const node = this.content[idx];
+    const nodeScore = this.scoreFunction(node);
     while (idx > 0) {
       const parentN = (idx + 1 >> 1) - 1;
       const parent = this.content[parentN];
-      if (this.scoreFunction(node) < this.scoreFunction(parent)) {
-        this.content[parentN] = node;
+      if (nodeScore < this.scoreFunction(parent)) {
         this.content[idx] = parent;
         idx = parentN;
       } else {
         break;
       }
     }
+    this.content[idx] = node;
   }
   bubbleUp(idx) {
     const length = this.content.length;
     const node = this.content[idx];
     const score = this.scoreFunction(node);
     while (true) {
-      const child2N = idx + 1 << 1;
-      const child1N = child2N - 1;
-      let swap = null;
-      let child1Score = 0;
+      const child1N = (idx + 1 << 1) - 1;
+      const child2N = child1N + 1;
+      let smallestIdx = idx;
+      let smallestScore = score;
       if (child1N < length) {
-        const child1 = this.content[child1N];
-        child1Score = this.scoreFunction(child1);
-        if (child1Score < score) {
-          swap = child1N;
+        const child1Score = this.scoreFunction(this.content[child1N]);
+        if (child1Score < smallestScore) {
+          smallestIdx = child1N;
+          smallestScore = child1Score;
         }
       }
       if (child2N < length) {
-        const child2 = this.content[child2N];
-        const child2Score = this.scoreFunction(child2);
-        if (child2Score < (swap === null ? score : child1Score)) {
-          swap = child2N;
+        const child2Score = this.scoreFunction(this.content[child2N]);
+        if (child2Score < smallestScore) {
+          smallestIdx = child2N;
         }
       }
-      if (swap !== null) {
-        this.content[idx] = this.content[swap];
-        this.content[swap] = node;
-        idx = swap;
-      } else {
+      if (smallestIdx === idx) {
         break;
       }
+      this.content[idx] = this.content[smallestIdx];
+      idx = smallestIdx;
     }
+    this.content[idx] = node;
   }
   push(node) {
     this.content.push(node);
@@ -364,173 +363,1095 @@ var BinaryHeap = class {
   }
 };
 
+// src/bounds.ts
+init_define_import_meta_env();
+var isBounds = (box) => Array.isArray(box) && box.length === 4 && typeof box[0] === "number" && typeof box[1] === "number" && typeof box[2] === "number" && typeof box[3] === "number";
+
 // src/colors.ts
 init_define_import_meta_env();
 
-// ../../node_modules/open-color/open-color.json
-var open_color_default = {
-  white: "#ffffff",
-  black: "#000000",
-  gray: [
-    "#f8f9fa",
-    "#f1f3f5",
-    "#e9ecef",
-    "#dee2e6",
-    "#ced4da",
-    "#adb5bd",
-    "#868e96",
-    "#495057",
-    "#343a40",
-    "#212529"
-  ],
-  red: [
-    "#fff5f5",
-    "#ffe3e3",
-    "#ffc9c9",
-    "#ffa8a8",
-    "#ff8787",
-    "#ff6b6b",
-    "#fa5252",
-    "#f03e3e",
-    "#e03131",
-    "#c92a2a"
-  ],
-  pink: [
-    "#fff0f6",
-    "#ffdeeb",
-    "#fcc2d7",
-    "#faa2c1",
-    "#f783ac",
-    "#f06595",
-    "#e64980",
-    "#d6336c",
-    "#c2255c",
-    "#a61e4d"
-  ],
-  grape: [
-    "#f8f0fc",
-    "#f3d9fa",
-    "#eebefa",
-    "#e599f7",
-    "#da77f2",
-    "#cc5de8",
-    "#be4bdb",
-    "#ae3ec9",
-    "#9c36b5",
-    "#862e9c"
-  ],
-  violet: [
-    "#f3f0ff",
-    "#e5dbff",
-    "#d0bfff",
-    "#b197fc",
-    "#9775fa",
-    "#845ef7",
-    "#7950f2",
-    "#7048e8",
-    "#6741d9",
-    "#5f3dc4"
-  ],
-  indigo: [
-    "#edf2ff",
-    "#dbe4ff",
-    "#bac8ff",
-    "#91a7ff",
-    "#748ffc",
-    "#5c7cfa",
-    "#4c6ef5",
-    "#4263eb",
-    "#3b5bdb",
-    "#364fc7"
-  ],
-  blue: [
-    "#e7f5ff",
-    "#d0ebff",
-    "#a5d8ff",
-    "#74c0fc",
-    "#4dabf7",
-    "#339af0",
-    "#228be6",
-    "#1c7ed6",
-    "#1971c2",
-    "#1864ab"
-  ],
-  cyan: [
-    "#e3fafc",
-    "#c5f6fa",
-    "#99e9f2",
-    "#66d9e8",
-    "#3bc9db",
-    "#22b8cf",
-    "#15aabf",
-    "#1098ad",
-    "#0c8599",
-    "#0b7285"
-  ],
-  teal: [
-    "#e6fcf5",
-    "#c3fae8",
-    "#96f2d7",
-    "#63e6be",
-    "#38d9a9",
-    "#20c997",
-    "#12b886",
-    "#0ca678",
-    "#099268",
-    "#087f5b"
-  ],
-  green: [
-    "#ebfbee",
-    "#d3f9d8",
-    "#b2f2bb",
-    "#8ce99a",
-    "#69db7c",
-    "#51cf66",
-    "#40c057",
-    "#37b24d",
-    "#2f9e44",
-    "#2b8a3e"
-  ],
-  lime: [
-    "#f4fce3",
-    "#e9fac8",
-    "#d8f5a2",
-    "#c0eb75",
-    "#a9e34b",
-    "#94d82d",
-    "#82c91e",
-    "#74b816",
-    "#66a80f",
-    "#5c940d"
-  ],
-  yellow: [
-    "#fff9db",
-    "#fff3bf",
-    "#ffec99",
-    "#ffe066",
-    "#ffd43b",
-    "#fcc419",
-    "#fab005",
-    "#f59f00",
-    "#f08c00",
-    "#e67700"
-  ],
-  orange: [
-    "#fff4e6",
-    "#ffe8cc",
-    "#ffd8a8",
-    "#ffc078",
-    "#ffa94d",
-    "#ff922b",
-    "#fd7e14",
-    "#f76707",
-    "#e8590c",
-    "#d9480f"
-  ]
+// ../../node_modules/tinycolor2/esm/tinycolor.js
+init_define_import_meta_env();
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj2) {
+    return typeof obj2;
+  } : function(obj2) {
+    return obj2 && "function" == typeof Symbol && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+  }, _typeof(obj);
+}
+var trimLeft = /^\s+/;
+var trimRight = /\s+$/;
+function tinycolor(color, opts) {
+  color = color ? color : "";
+  opts = opts || {};
+  if (color instanceof tinycolor) {
+    return color;
+  }
+  if (!(this instanceof tinycolor)) {
+    return new tinycolor(color, opts);
+  }
+  var rgb = inputToRGB(color);
+  this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format;
+  this._gradientType = opts.gradientType;
+  if (this._r < 1)
+    this._r = Math.round(this._r);
+  if (this._g < 1)
+    this._g = Math.round(this._g);
+  if (this._b < 1)
+    this._b = Math.round(this._b);
+  this._ok = rgb.ok;
+}
+tinycolor.prototype = {
+  isDark: function isDark() {
+    return this.getBrightness() < 128;
+  },
+  isLight: function isLight() {
+    return !this.isDark();
+  },
+  isValid: function isValid() {
+    return this._ok;
+  },
+  getOriginalInput: function getOriginalInput() {
+    return this._originalInput;
+  },
+  getFormat: function getFormat() {
+    return this._format;
+  },
+  getAlpha: function getAlpha() {
+    return this._a;
+  },
+  getBrightness: function getBrightness() {
+    var rgb = this.toRgb();
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+  },
+  getLuminance: function getLuminance() {
+    var rgb = this.toRgb();
+    var RsRGB, GsRGB, BsRGB, R, G, B;
+    RsRGB = rgb.r / 255;
+    GsRGB = rgb.g / 255;
+    BsRGB = rgb.b / 255;
+    if (RsRGB <= 0.03928)
+      R = RsRGB / 12.92;
+    else
+      R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+    if (GsRGB <= 0.03928)
+      G = GsRGB / 12.92;
+    else
+      G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+    if (BsRGB <= 0.03928)
+      B = BsRGB / 12.92;
+    else
+      B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  },
+  setAlpha: function setAlpha(value) {
+    this._a = boundAlpha(value);
+    this._roundA = Math.round(100 * this._a) / 100;
+    return this;
+  },
+  toHsv: function toHsv() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    return {
+      h: hsv.h * 360,
+      s: hsv.s,
+      v: hsv.v,
+      a: this._a
+    };
+  },
+  toHsvString: function toHsvString() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    var h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100);
+    return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
+  },
+  toHsl: function toHsl() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    return {
+      h: hsl.h * 360,
+      s: hsl.s,
+      l: hsl.l,
+      a: this._a
+    };
+  },
+  toHslString: function toHslString() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    var h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100);
+    return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
+  },
+  toHex: function toHex(allow3Char) {
+    return rgbToHex(this._r, this._g, this._b, allow3Char);
+  },
+  toHexString: function toHexString(allow3Char) {
+    return "#" + this.toHex(allow3Char);
+  },
+  toHex8: function toHex8(allow4Char) {
+    return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
+  },
+  toHex8String: function toHex8String(allow4Char) {
+    return "#" + this.toHex8(allow4Char);
+  },
+  toRgb: function toRgb() {
+    return {
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
+    };
+  },
+  toRgbString: function toRgbString() {
+    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
+  },
+  toPercentageRgb: function toPercentageRgb() {
+    return {
+      r: Math.round(bound01(this._r, 255) * 100) + "%",
+      g: Math.round(bound01(this._g, 255) * 100) + "%",
+      b: Math.round(bound01(this._b, 255) * 100) + "%",
+      a: this._a
+    };
+  },
+  toPercentageRgbString: function toPercentageRgbString() {
+    return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
+  },
+  toName: function toName() {
+    if (this._a === 0) {
+      return "transparent";
+    }
+    if (this._a < 1) {
+      return false;
+    }
+    return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+  },
+  toFilter: function toFilter(secondColor) {
+    var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
+    var secondHex8String = hex8String;
+    var gradientType = this._gradientType ? "GradientType = 1, " : "";
+    if (secondColor) {
+      var s = tinycolor(secondColor);
+      secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
+    }
+    return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
+  },
+  toString: function toString(format) {
+    var formatSet = !!format;
+    format = format || this._format;
+    var formattedString = false;
+    var hasAlpha = this._a < 1 && this._a >= 0;
+    var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
+    if (needsAlphaFormat) {
+      if (format === "name" && this._a === 0) {
+        return this.toName();
+      }
+      return this.toRgbString();
+    }
+    if (format === "rgb") {
+      formattedString = this.toRgbString();
+    }
+    if (format === "prgb") {
+      formattedString = this.toPercentageRgbString();
+    }
+    if (format === "hex" || format === "hex6") {
+      formattedString = this.toHexString();
+    }
+    if (format === "hex3") {
+      formattedString = this.toHexString(true);
+    }
+    if (format === "hex4") {
+      formattedString = this.toHex8String(true);
+    }
+    if (format === "hex8") {
+      formattedString = this.toHex8String();
+    }
+    if (format === "name") {
+      formattedString = this.toName();
+    }
+    if (format === "hsl") {
+      formattedString = this.toHslString();
+    }
+    if (format === "hsv") {
+      formattedString = this.toHsvString();
+    }
+    return formattedString || this.toHexString();
+  },
+  clone: function clone() {
+    return tinycolor(this.toString());
+  },
+  _applyModification: function _applyModification(fn, args) {
+    var color = fn.apply(null, [this].concat([].slice.call(args)));
+    this._r = color._r;
+    this._g = color._g;
+    this._b = color._b;
+    this.setAlpha(color._a);
+    return this;
+  },
+  lighten: function lighten() {
+    return this._applyModification(_lighten, arguments);
+  },
+  brighten: function brighten() {
+    return this._applyModification(_brighten, arguments);
+  },
+  darken: function darken() {
+    return this._applyModification(_darken, arguments);
+  },
+  desaturate: function desaturate() {
+    return this._applyModification(_desaturate, arguments);
+  },
+  saturate: function saturate() {
+    return this._applyModification(_saturate, arguments);
+  },
+  greyscale: function greyscale() {
+    return this._applyModification(_greyscale, arguments);
+  },
+  spin: function spin() {
+    return this._applyModification(_spin, arguments);
+  },
+  _applyCombination: function _applyCombination(fn, args) {
+    return fn.apply(null, [this].concat([].slice.call(args)));
+  },
+  analogous: function analogous() {
+    return this._applyCombination(_analogous, arguments);
+  },
+  complement: function complement() {
+    return this._applyCombination(_complement, arguments);
+  },
+  monochromatic: function monochromatic() {
+    return this._applyCombination(_monochromatic, arguments);
+  },
+  splitcomplement: function splitcomplement() {
+    return this._applyCombination(_splitcomplement, arguments);
+  },
+  // Disabled until https://github.com/bgrins/TinyColor/issues/254
+  // polyad: function (number) {
+  //   return this._applyCombination(polyad, [number]);
+  // },
+  triad: function triad() {
+    return this._applyCombination(polyad, [3]);
+  },
+  tetrad: function tetrad() {
+    return this._applyCombination(polyad, [4]);
+  }
+};
+tinycolor.fromRatio = function(color, opts) {
+  if (_typeof(color) == "object") {
+    var newColor = {};
+    for (var i in color) {
+      if (color.hasOwnProperty(i)) {
+        if (i === "a") {
+          newColor[i] = color[i];
+        } else {
+          newColor[i] = convertToPercentage(color[i]);
+        }
+      }
+    }
+    color = newColor;
+  }
+  return tinycolor(color, opts);
+};
+function inputToRGB(color) {
+  var rgb = {
+    r: 0,
+    g: 0,
+    b: 0
+  };
+  var a = 1;
+  var s = null;
+  var v = null;
+  var l = null;
+  var ok = false;
+  var format = false;
+  if (typeof color == "string") {
+    color = stringInputToObject(color);
+  }
+  if (_typeof(color) == "object") {
+    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
+      rgb = rgbToRgb(color.r, color.g, color.b);
+      ok = true;
+      format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
+      s = convertToPercentage(color.s);
+      v = convertToPercentage(color.v);
+      rgb = hsvToRgb(color.h, s, v);
+      ok = true;
+      format = "hsv";
+    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
+      s = convertToPercentage(color.s);
+      l = convertToPercentage(color.l);
+      rgb = hslToRgb(color.h, s, l);
+      ok = true;
+      format = "hsl";
+    }
+    if (color.hasOwnProperty("a")) {
+      a = color.a;
+    }
+  }
+  a = boundAlpha(a);
+  return {
+    ok,
+    format: color.format || format,
+    r: Math.min(255, Math.max(rgb.r, 0)),
+    g: Math.min(255, Math.max(rgb.g, 0)),
+    b: Math.min(255, Math.max(rgb.b, 0)),
+    a
+  };
+}
+function rgbToRgb(r, g, b) {
+  return {
+    r: bound01(r, 255) * 255,
+    g: bound01(g, 255) * 255,
+    b: bound01(b, 255) * 255
+  };
+}
+function rgbToHsl(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h,
+    s,
+    l
+  };
+}
+function hslToRgb(h, s, l) {
+  var r, g, b;
+  h = bound01(h, 360);
+  s = bound01(s, 100);
+  l = bound01(l, 100);
+  function hue2rgb(p2, q2, t) {
+    if (t < 0)
+      t += 1;
+    if (t > 1)
+      t -= 1;
+    if (t < 1 / 6)
+      return p2 + (q2 - p2) * 6 * t;
+    if (t < 1 / 2)
+      return q2;
+    if (t < 2 / 3)
+      return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+    return p2;
+  }
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+function rgbToHsv(r, g, b) {
+  r = bound01(r, 255);
+  g = bound01(g, 255);
+  b = bound01(b, 255);
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, v = max;
+  var d = max - min;
+  s = max === 0 ? 0 : d / max;
+  if (max == min) {
+    h = 0;
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h,
+    s,
+    v
+  };
+}
+function hsvToRgb(h, s, v) {
+  h = bound01(h, 360) * 6;
+  s = bound01(s, 100);
+  v = bound01(v, 100);
+  var i = Math.floor(h), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod];
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+function rgbToHex(r, g, b, allow3Char) {
+  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+  if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
+  }
+  return hex.join("");
+}
+function rgbaToHex(r, g, b, a, allow4Char) {
+  var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
+  if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
+    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
+  }
+  return hex.join("");
+}
+function rgbaToArgbHex(r, g, b, a) {
+  var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
+  return hex.join("");
+}
+tinycolor.equals = function(color1, color2) {
+  if (!color1 || !color2)
+    return false;
+  return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
+};
+tinycolor.random = function() {
+  return tinycolor.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
 };
+function _desaturate(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.s -= amount / 100;
+  hsl.s = clamp01(hsl.s);
+  return tinycolor(hsl);
+}
+function _saturate(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.s += amount / 100;
+  hsl.s = clamp01(hsl.s);
+  return tinycolor(hsl);
+}
+function _greyscale(color) {
+  return tinycolor(color).desaturate(100);
+}
+function _lighten(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.l += amount / 100;
+  hsl.l = clamp01(hsl.l);
+  return tinycolor(hsl);
+}
+function _brighten(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var rgb = tinycolor(color).toRgb();
+  rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
+  rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
+  rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
+  return tinycolor(rgb);
+}
+function _darken(color, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color).toHsl();
+  hsl.l -= amount / 100;
+  hsl.l = clamp01(hsl.l);
+  return tinycolor(hsl);
+}
+function _spin(color, amount) {
+  var hsl = tinycolor(color).toHsl();
+  var hue = (hsl.h + amount) % 360;
+  hsl.h = hue < 0 ? 360 + hue : hue;
+  return tinycolor(hsl);
+}
+function _complement(color) {
+  var hsl = tinycolor(color).toHsl();
+  hsl.h = (hsl.h + 180) % 360;
+  return tinycolor(hsl);
+}
+function polyad(color, number) {
+  if (isNaN(number) || number <= 0) {
+    throw new Error("Argument to polyad must be a positive number");
+  }
+  var hsl = tinycolor(color).toHsl();
+  var result = [tinycolor(color)];
+  var step = 360 / number;
+  for (var i = 1; i < number; i++) {
+    result.push(tinycolor({
+      h: (hsl.h + i * step) % 360,
+      s: hsl.s,
+      l: hsl.l
+    }));
+  }
+  return result;
+}
+function _splitcomplement(color) {
+  var hsl = tinycolor(color).toHsl();
+  var h = hsl.h;
+  return [tinycolor(color), tinycolor({
+    h: (h + 72) % 360,
+    s: hsl.s,
+    l: hsl.l
+  }), tinycolor({
+    h: (h + 216) % 360,
+    s: hsl.s,
+    l: hsl.l
+  })];
+}
+function _analogous(color, results, slices) {
+  results = results || 6;
+  slices = slices || 30;
+  var hsl = tinycolor(color).toHsl();
+  var part = 360 / slices;
+  var ret = [tinycolor(color)];
+  for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; ) {
+    hsl.h = (hsl.h + part) % 360;
+    ret.push(tinycolor(hsl));
+  }
+  return ret;
+}
+function _monochromatic(color, results) {
+  results = results || 6;
+  var hsv = tinycolor(color).toHsv();
+  var h = hsv.h, s = hsv.s, v = hsv.v;
+  var ret = [];
+  var modification = 1 / results;
+  while (results--) {
+    ret.push(tinycolor({
+      h,
+      s,
+      v
+    }));
+    v = (v + modification) % 1;
+  }
+  return ret;
+}
+tinycolor.mix = function(color1, color2, amount) {
+  amount = amount === 0 ? 0 : amount || 50;
+  var rgb1 = tinycolor(color1).toRgb();
+  var rgb2 = tinycolor(color2).toRgb();
+  var p = amount / 100;
+  var rgba = {
+    r: (rgb2.r - rgb1.r) * p + rgb1.r,
+    g: (rgb2.g - rgb1.g) * p + rgb1.g,
+    b: (rgb2.b - rgb1.b) * p + rgb1.b,
+    a: (rgb2.a - rgb1.a) * p + rgb1.a
+  };
+  return tinycolor(rgba);
+};
+tinycolor.readability = function(color1, color2) {
+  var c1 = tinycolor(color1);
+  var c2 = tinycolor(color2);
+  return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
+};
+tinycolor.isReadable = function(color1, color2, wcag2) {
+  var readability = tinycolor.readability(color1, color2);
+  var wcag2Parms, out;
+  out = false;
+  wcag2Parms = validateWCAG2Parms(wcag2);
+  switch (wcag2Parms.level + wcag2Parms.size) {
+    case "AAsmall":
+    case "AAAlarge":
+      out = readability >= 4.5;
+      break;
+    case "AAlarge":
+      out = readability >= 3;
+      break;
+    case "AAAsmall":
+      out = readability >= 7;
+      break;
+  }
+  return out;
+};
+tinycolor.mostReadable = function(baseColor, colorList, args) {
+  var bestColor = null;
+  var bestScore = 0;
+  var readability;
+  var includeFallbackColors, level, size;
+  args = args || {};
+  includeFallbackColors = args.includeFallbackColors;
+  level = args.level;
+  size = args.size;
+  for (var i = 0; i < colorList.length; i++) {
+    readability = tinycolor.readability(baseColor, colorList[i]);
+    if (readability > bestScore) {
+      bestScore = readability;
+      bestColor = tinycolor(colorList[i]);
+    }
+  }
+  if (tinycolor.isReadable(baseColor, bestColor, {
+    level,
+    size
+  }) || !includeFallbackColors) {
+    return bestColor;
+  } else {
+    args.includeFallbackColors = false;
+    return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
+  }
+};
+var names = tinycolor.names = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "0ff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "00f",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  burntsienna: "ea7e5d",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "0ff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "f0f",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "663399",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+};
+var hexNames = tinycolor.hexNames = flip(names);
+function flip(o) {
+  var flipped = {};
+  for (var i in o) {
+    if (o.hasOwnProperty(i)) {
+      flipped[o[i]] = i;
+    }
+  }
+  return flipped;
+}
+function boundAlpha(a) {
+  a = parseFloat(a);
+  if (isNaN(a) || a < 0 || a > 1) {
+    a = 1;
+  }
+  return a;
+}
+function bound01(n, max) {
+  if (isOnePointZero(n))
+    n = "100%";
+  var processPercent = isPercentage(n);
+  n = Math.min(max, Math.max(0, parseFloat(n)));
+  if (processPercent) {
+    n = parseInt(n * max, 10) / 100;
+  }
+  if (Math.abs(n - max) < 1e-6) {
+    return 1;
+  }
+  return n % max / parseFloat(max);
+}
+function clamp01(val) {
+  return Math.min(1, Math.max(0, val));
+}
+function parseIntFromHex(val) {
+  return parseInt(val, 16);
+}
+function isOnePointZero(n) {
+  return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
+}
+function isPercentage(n) {
+  return typeof n === "string" && n.indexOf("%") != -1;
+}
+function pad2(c) {
+  return c.length == 1 ? "0" + c : "" + c;
+}
+function convertToPercentage(n) {
+  if (n <= 1) {
+    n = n * 100 + "%";
+  }
+  return n;
+}
+function convertDecimalToHex(d) {
+  return Math.round(parseFloat(d) * 255).toString(16);
+}
+function convertHexToDecimal(h) {
+  return parseIntFromHex(h) / 255;
+}
+var matchers = function() {
+  var CSS_INTEGER = "[-\\+]?\\d+%?";
+  var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
+  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+  return {
+    CSS_UNIT: new RegExp(CSS_UNIT),
+    rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
+    rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
+    hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
+    hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
+    hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
+    hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+  };
+}();
+function isValidCSSUnit(color) {
+  return !!matchers.CSS_UNIT.exec(color);
+}
+function stringInputToObject(color) {
+  color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
+  var named = false;
+  if (names[color]) {
+    color = names[color];
+    named = true;
+  } else if (color == "transparent") {
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      format: "name"
+    };
+  }
+  var match;
+  if (match = matchers.rgb.exec(color)) {
+    return {
+      r: match[1],
+      g: match[2],
+      b: match[3]
+    };
+  }
+  if (match = matchers.rgba.exec(color)) {
+    return {
+      r: match[1],
+      g: match[2],
+      b: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hsl.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      l: match[3]
+    };
+  }
+  if (match = matchers.hsla.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      l: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hsv.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      v: match[3]
+    };
+  }
+  if (match = matchers.hsva.exec(color)) {
+    return {
+      h: match[1],
+      s: match[2],
+      v: match[3],
+      a: match[4]
+    };
+  }
+  if (match = matchers.hex8.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      a: convertHexToDecimal(match[4]),
+      format: named ? "name" : "hex8"
+    };
+  }
+  if (match = matchers.hex6.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1]),
+      g: parseIntFromHex(match[2]),
+      b: parseIntFromHex(match[3]),
+      format: named ? "name" : "hex"
+    };
+  }
+  if (match = matchers.hex4.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1] + "" + match[1]),
+      g: parseIntFromHex(match[2] + "" + match[2]),
+      b: parseIntFromHex(match[3] + "" + match[3]),
+      a: convertHexToDecimal(match[4] + "" + match[4]),
+      format: named ? "name" : "hex8"
+    };
+  }
+  if (match = matchers.hex3.exec(color)) {
+    return {
+      r: parseIntFromHex(match[1] + "" + match[1]),
+      g: parseIntFromHex(match[2] + "" + match[2]),
+      b: parseIntFromHex(match[3] + "" + match[3]),
+      format: named ? "name" : "hex"
+    };
+  }
+  return false;
+}
+function validateWCAG2Parms(parms) {
+  var level, size;
+  parms = parms || {
+    level: "AA",
+    size: "small"
+  };
+  level = (parms.level || "AA").toUpperCase();
+  size = (parms.size || "small").toLowerCase();
+  if (level !== "AA" && level !== "AAA") {
+    level = "AA";
+  }
+  if (size !== "small" && size !== "large") {
+    size = "small";
+  }
+  return {
+    level,
+    size
+  };
+}
 
 // src/colors.ts
-var COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
+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;
+  const b = blue / 255;
+  const a = degreesToRadians(degrees);
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+  const matrix = [
+    0.213 + c * 0.787 - s * 0.213,
+    0.715 - c * 0.715 - s * 0.715,
+    0.072 - c * 0.072 + s * 0.928,
+    0.213 - c * 0.213 + s * 0.143,
+    0.715 + c * 0.285 + s * 0.14,
+    0.072 - c * 0.072 - s * 0.283,
+    0.213 - c * 0.213 - s * 0.787,
+    0.715 - c * 0.715 + s * 0.715,
+    0.072 + c * 0.928 + s * 0.072
+  ];
+  const newR = r * matrix[0] + g * matrix[1] + b * matrix[2];
+  const newG = r * matrix[3] + g * matrix[4] + b * matrix[5];
+  const newB = r * matrix[6] + g * matrix[7] + b * matrix[8];
+  return {
+    r: Math.round(Math.max(0, Math.min(1, newR)) * 255),
+    g: Math.round(Math.max(0, Math.min(1, newG)) * 255),
+    b: Math.round(Math.max(0, Math.min(1, newB)) * 255)
+  };
+}
+var cssInvert = (r, g, b, percent) => {
+  const p = clamp(percent, 0, 100) / 100;
+  const invertComponent = (color) => {
+    const inverted = color * (1 - p) + (255 - color) * p;
+    return Math.round(clamp(inverted, 0, 255));
+  };
+  const invertedR = invertComponent(r);
+  const invertedG = invertComponent(g);
+  const invertedB = invertComponent(b);
+  return { r: invertedR, g: invertedG, b: invertedB };
+};
+var applyDarkModeFilter = (color, enable = true) => {
+  if (!enable) {
+    return color;
+  }
+  const cached = DARK_MODE_COLORS_CACHE?.get(color);
+  if (cached) {
+    return cached;
+  }
+  const tc = tinycolor(color);
+  const alpha = tc.getAlpha();
+  const rgb = tc.toRgb();
+  const inverted = cssInvert(
+    rgb.r,
+    rgb.g,
+    rgb.b,
+    DARK_MODE_FILTER_INVERT_PERCENT
+  );
+  const rotated = cssHueRotate(
+    inverted.r,
+    inverted.g,
+    inverted.b,
+    DARK_MODE_FILTER_HUE_ROTATE_DEGREES
+  );
+  const result = rgbToHex2(rotated.r, rotated.g, rotated.b, alpha);
+  if (DARK_MODE_COLORS_CACHE) {
+    DARK_MODE_COLORS_CACHE.set(color, result);
+  }
+  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) {
@@ -544,28 +1465,24 @@ var COLORS_PER_ROW = 5;
 var DEFAULT_CHART_COLOR_INDEX = 4;
 var DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
 var DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
-var ELEMENTS_PALETTE_SHADE_INDEXES = [0, 2, 4, 6, 8];
-var CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4];
-var getSpecificColorShades = (color, indexArr) => {
-  return indexArr.map((index) => open_color_default[color][index]);
-};
 var COLOR_PALETTE = {
   transparent: "transparent",
   black: "#1e1e1e",
   white: "#ffffff",
-  // open-colors
-  gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
-  red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
-  pink: getSpecificColorShades("pink", ELEMENTS_PALETTE_SHADE_INDEXES),
-  grape: getSpecificColorShades("grape", ELEMENTS_PALETTE_SHADE_INDEXES),
-  violet: getSpecificColorShades("violet", ELEMENTS_PALETTE_SHADE_INDEXES),
-  blue: getSpecificColorShades("blue", ELEMENTS_PALETTE_SHADE_INDEXES),
-  cyan: getSpecificColorShades("cyan", ELEMENTS_PALETTE_SHADE_INDEXES),
-  teal: getSpecificColorShades("teal", ELEMENTS_PALETTE_SHADE_INDEXES),
-  green: getSpecificColorShades("green", ELEMENTS_PALETTE_SHADE_INDEXES),
-  yellow: getSpecificColorShades("yellow", ELEMENTS_PALETTE_SHADE_INDEXES),
-  orange: getSpecificColorShades("orange", ELEMENTS_PALETTE_SHADE_INDEXES),
-  // radix bronze shades 3,5,7,9,11
+  // open-color from https://github.com/yeun/open-color/blob/master/open-color.js
+  // corresponds to indexes [0,2,4,6,8] (weights: 50, 200, 400, 600, 800)
+  gray: ["#f8f9fa", "#e9ecef", "#ced4da", "#868e96", "#343a40"],
+  red: ["#fff5f5", "#ffc9c9", "#ff8787", "#fa5252", "#e03131"],
+  pink: ["#fff0f6", "#fcc2d7", "#f783ac", "#e64980", "#c2255c"],
+  grape: ["#f8f0fc", "#eebefa", "#da77f2", "#be4bdb", "#9c36b5"],
+  violet: ["#f3f0ff", "#d0bfff", "#9775fa", "#7950f2", "#6741d9"],
+  blue: ["#e7f5ff", "#a5d8ff", "#4dabf7", "#228be6", "#1971c2"],
+  cyan: ["#e3fafc", "#99e9f2", "#3bc9db", "#15aabf", "#0c8599"],
+  teal: ["#e6fcf5", "#96f2d7", "#38d9a9", "#12b886", "#099268"],
+  green: ["#ebfbee", "#b2f2bb", "#69db7c", "#40c057", "#2f9e44"],
+  yellow: ["#fff9db", "#ffec99", "#ffd43b", "#fab005", "#f08c00"],
+  orange: ["#fff4e6", "#ffd8a8", "#ffa94d", "#fd7e14", "#e8590c"],
+  // radix bronze shades [3,5,7,9,11]
   bronze: ["#f8f1ee", "#eaddd7", "#d2bab0", "#a18072", "#846358"]
 };
 var COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
@@ -580,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],
@@ -594,6 +1512,13 @@ 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_CANVAS_BACKGROUND_PICKS = [
   COLOR_PALETTE.white,
   // radix slate2
@@ -637,19 +1562,64 @@ var getAllColorsSpecificShade = (index) => [
   COLOR_PALETTE.orange[index],
   COLOR_PALETTE.red[index]
 ];
-var rgbToHex = (r, g, b) => `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+var rgbToHex2 = (r, g, b, a) => {
+  const hex6 = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+  if (a !== void 0 && a < 1) {
+    const alphaHex = Math.round(a * 255).toString(16).padStart(2, "0");
+    return `${hex6}${alphaHex}`;
+  }
+  return hex6;
+};
+var colorToHex = (color) => {
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    return null;
+  }
+  const { r, g, b, a } = tc.toRgb();
+  return rgbToHex2(r, g, b, a);
+};
+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;
+  return yiq;
+};
+var isColorDark = (color, threshold = 160) => {
+  if (!color) {
+    return true;
+  }
+  if (isTransparent(color)) {
+    return false;
+  }
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    return true;
+  }
+  const { r, g, b } = tc.toRgb();
+  return calculateContrast(r, g, b) < threshold;
+};
+var normalizeInputColor = (color) => {
+  color = color.trim();
+  if (isTransparent(color)) {
+    return color;
+  }
+  const tc = tinycolor(color);
+  if (tc.isValid()) {
+    if (["hex", "hex8"].includes(tc.getFormat()) && !color.startsWith("#")) {
+      return `#${color}`;
+    }
+    return color;
+  }
+  return null;
+};
 
 // src/constants.ts
 init_define_import_meta_env();
-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/.test(navigator.platform) || // iPadOS 13+
-navigator.userAgent.includes("Mac") && "ontouchend" in document;
-var isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
 var supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 var APP_NAME = "Excalidraw";
 var TEXT_AUTOWRAP_THRESHOLD = 36;
@@ -731,10 +1701,20 @@ var ENV = {
   PRODUCTION: "production"
 };
 var CLASSES = {
+  SIDEBAR: "sidebar",
   SHAPE_ACTIONS_MENU: "App-menu__left",
   ZOOM_ACTIONS: "zoom-actions",
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
-  CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup"
+  CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
+  SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
+  FRAME_NAME: "frame-name",
+  DROPDOWN_MENU_EVENT_WRAPPER: "dropdown-menu-event-wrapper"
+};
+var FONT_SIZES = {
+  sm: 16,
+  md: 20,
+  lg: 28,
+  xl: 36
 };
 var CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
 var WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
@@ -787,6 +1767,7 @@ var THEME = {
   LIGHT: "light",
   DARK: "dark"
 };
+var DARK_THEME_FILTER = "invert(93%) hue-rotate(180deg)";
 var FRAME_STYLE = {
   strokeColor: "#bbb",
   strokeWidth: 2,
@@ -829,13 +1810,20 @@ var IMAGE_MIME_TYPES = {
   avif: "image/avif",
   jfif: "image/jfif"
 };
-var MIME_TYPES = {
+var STRING_MIME_TYPES = {
   text: "text/plain",
   html: "text/html",
   json: "application/json",
   // excalidraw data
   excalidraw: "application/vnd.excalidraw+json",
+  excalidrawClipboard: "application/vnd.excalidraw.clipboard+json",
+  // LEGACY: fully-qualified library JSON data
   excalidrawlib: "application/vnd.excalidrawlib+json",
+  // list of excalidraw library item ids
+  excalidrawlibIds: "application/vnd.excalidrawlib.ids+json"
+};
+var MIME_TYPES = {
+  ...STRING_MIME_TYPES,
   // image-encoded excalidraw data
   "excalidraw.svg": "image/svg+xml",
   "excalidraw.png": "image/png",
@@ -873,7 +1861,6 @@ var MAX_ZOOM = 30;
 var HYPERLINK_TOOLTIP_DELAY = 300;
 var IDLE_THRESHOLD = 6e4;
 var ACTIVE_THRESHOLD = 3e3;
-var THEME_FILTER = "invert(93%) hue-rotate(180deg)";
 var URL_QUERY_KEYS = {
   addLibrary: "addLibrary"
 };
@@ -894,15 +1881,13 @@ var DEFAULT_UI_OPTIONS = {
     image: true
   }
 };
-var MQ_MAX_WIDTH_PORTRAIT = 730;
-var MQ_MAX_WIDTH_LANDSCAPE = 1e3;
-var MQ_MAX_HEIGHT_LANDSCAPE = 500;
-var MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
 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">
@@ -926,6 +1911,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 = {
@@ -949,16 +1935,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,
@@ -991,7 +1995,9 @@ var TOOL_TYPE = {
   frame: "frame",
   magicframe: "magicframe",
   embeddable: "embeddable",
-  laser: "laser"
+  laser: "laser",
+  autoshape: "autoshape",
+  bucketfill: "bucketfill"
 };
 var EDITOR_LS_KEYS = {
   OAI_API_KEY: "excalidraw-oai-api-key",
@@ -1017,6 +2023,13 @@ var UserIdleState = /* @__PURE__ */ ((UserIdleState2) => {
   return UserIdleState2;
 })(UserIdleState || {});
 var LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
+var DOUBLE_TAP_POSITION_THRESHOLD = 35;
+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();
@@ -1172,6 +2185,133 @@ var Queue = class {
 
 // src/keys.ts
 init_define_import_meta_env();
+
+// src/editorInterface.ts
+init_define_import_meta_env();
+var DESKTOP_UI_MODE_STORAGE_KEY = "excalidraw.desktopUIMode";
+var MQ_MAX_MOBILE = 599;
+var MQ_MAX_WIDTH_LANDSCAPE = 1e3;
+var MQ_MAX_HEIGHT_LANDSCAPE = 500;
+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 isMobileBreakpoint = (width, height) => {
+  return width <= MQ_MAX_MOBILE || height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE;
+};
+var isTabletBreakpoint = (editorWidth, editorHeight) => {
+  const minSide = Math.min(editorWidth, editorHeight);
+  const maxSide = Math.max(editorWidth, editorHeight);
+  return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
+};
+var isMobileOrTablet = () => {
+  const ua = navigator.userAgent || "";
+  const platform = navigator.platform || "";
+  const uaData = navigator.userAgentData;
+  if (uaData) {
+    const plat = (uaData.platform || "").toLowerCase();
+    const isDesktopOS = plat === "windows" || plat === "macos" || plat === "linux" || plat === "chrome os";
+    if (uaData.mobile === true) {
+      return true;
+    }
+    if (uaData.mobile === false && plat === "android") {
+      const looksTouchTablet = matchMedia?.("(hover: none)").matches && matchMedia?.("(pointer: coarse)").matches;
+      return looksTouchTablet;
+    }
+    if (isDesktopOS) {
+      return false;
+    }
+  }
+  if (isIOS) {
+    return true;
+  }
+  if (isAndroid) {
+    const isAndroidPhone = /Mobile/i.test(ua);
+    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);
+  if (looksDesktopPlatform) {
+    return false;
+  }
+  return false;
+};
+var getFormFactor = (editorWidth, editorHeight) => {
+  if (isMobileBreakpoint(editorWidth, editorHeight)) {
+    return "phone";
+  }
+  if (isTabletBreakpoint(editorWidth, editorHeight)) {
+    return "tablet";
+  }
+  return "desktop";
+};
+var deriveStylesPanelMode = (editorInterface) => {
+  if (editorInterface.formFactor === "phone") {
+    return "mobile";
+  }
+  if (editorInterface.formFactor === "tablet") {
+    return "compact";
+  }
+  return editorInterface.desktopUIMode;
+};
+var createUserAgentDescriptor = (userAgentString) => {
+  const normalizedUA = userAgentString ?? "";
+  let platform = "unknown";
+  if (isIOS) {
+    platform = "ios";
+  } else if (isAndroid) {
+    platform = "android";
+  } else if (normalizedUA) {
+    platform = "other";
+  }
+  return {
+    isMobileDevice: isMobileOrTablet(),
+    platform
+  };
+};
+var loadDesktopUIModePreference = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    const stored = window.localStorage.getItem(DESKTOP_UI_MODE_STORAGE_KEY);
+    if (stored === "compact" || stored === "full") {
+      return stored;
+    }
+  } catch (error) {
+  }
+  return null;
+};
+var persistDesktopUIMode = (mode) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(DESKTOP_UI_MODE_STORAGE_KEY, mode);
+  } catch (error) {
+  }
+};
+var setDesktopUIMode = (mode) => {
+  if (mode !== "compact" && mode !== "full") {
+    return;
+  }
+  persistDesktopUIMode(mode);
+  return mode;
+};
+
+// src/keys.ts
 var CODES = {
   EQUAL: "Equal",
   MINUS: "Minus",
@@ -1219,6 +2359,7 @@ var KEYS = {
   SUBTRACT: "-",
   SLASH: "/",
   A: "a",
+  B: "b",
   C: "c",
   D: "d",
   E: "e",
@@ -1270,6 +2411,7 @@ var shouldRotateWithDiscreteAngle = (event) => event.shiftKey;
 // src/points.ts
 init_define_import_meta_env();
 import {
+  pointFrom,
   pointFromPair
 } from "@excalidraw/math";
 var getSizeFromPoints = (points) => {
@@ -1314,12 +2456,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
@@ -1410,14 +2552,25 @@ 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) => target?.ownerDocument?.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");
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -1434,6 +2587,9 @@ var getFontString = ({
 }) => {
   return `${fontSize}px ${getFontFamilyString({ fontFamily })}`;
 };
+var nextAnimationFrame = async (cb) => {
+  requestAnimationFrame(() => requestAnimationFrame(cb));
+};
 var debounce = (fn, timeout) => {
   let handle = 0;
   let lastArgs = null;
@@ -1459,32 +2615,23 @@ var debounce = (fn, timeout) => {
   };
   return ret;
 };
-var throttleRAF = (fn, opts) => {
+var throttleRAF = (fn) => {
   let timerId = null;
   let lastArgs = null;
-  let lastArgsTrailing = null;
-  const scheduleFunc = (args) => {
+  const scheduleFunc = () => {
     timerId = window.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 = () => {
@@ -1493,12 +2640,12 @@ var throttleRAF = (fn, opts) => {
       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);
       timerId = null;
@@ -1509,67 +2656,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 [];
@@ -1598,6 +2684,9 @@ var removeSelection = () => {
   }
 };
 var distance = (x, y) => Math.abs(x - y);
+var isSelectionLikeTool = (type) => {
+  return type === "selection" || type === "lasso";
+};
 var updateActiveTool = (appState, data) => {
   if (data.type === "custom") {
     return {
@@ -1609,7 +2698,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,
@@ -1619,13 +2708,6 @@ var updateActiveTool = (appState, data) => {
 var isFullScreen = () => document.fullscreenElement?.nodeName === "HTML";
 var allowFullScreen = () => document.documentElement.requestFullscreen();
 var exitFullScreen = () => document.exitFullscreen();
-var getShortcutKey = (shortcut) => {
-  shortcut = shortcut.replace(/\bAlt\b/i, "Alt").replace(/\bShift\b/i, "Shift").replace(/\b(Enter|Return)\b/i, "Enter");
-  if (isDarwin) {
-    return shortcut.replace(/\bCtrlOrCmd\b/gi, "Cmd").replace(/\bAlt\b/i, "Option");
-  }
-  return shortcut.replace(/\bCtrlOrCmd\b/gi, "Ctrl");
-};
 var viewportCoordsToSceneCoords = ({ clientX, clientY }, {
   zoom,
   offsetLeft,
@@ -1699,12 +2781,6 @@ var mapFind = (collection, iteratee) => {
   }
   return void 0;
 };
-var isTransparent = (color) => {
-  const isRGBTransparent = color.length === 5 && color.substr(4, 1) === "0";
-  const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === "00";
-  return isRGBTransparent || isRRGGBBTransparent || color === COLOR_PALETTE.transparent;
-};
-var isBindingFallthroughEnabled = (el) => el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
 var resolvablePromise = () => {
   let resolve;
   let reject;
@@ -1749,19 +2825,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;
@@ -2025,9 +3103,9 @@ function getSvgPathFromStroke(points, closed = true) {
 var normalizeEOL = (str) => {
   return str.replace(/\r?\n|\r/g, "\n");
 };
-var toBrandedType = (value) => {
+function toBrandedType(value) {
   return value;
-};
+}
 var promiseTry = async (fn, ...args) => {
   return new Promise((resolve) => {
     resolve(fn(...args));
@@ -2067,6 +3145,41 @@ var reduceToCommonValue = (collection, getValue) => {
   }
   return commonValue;
 };
+var FEATURE_FLAGS_STORAGE_KEY = "excalidraw-feature-flags";
+var DEFAULT_FEATURE_FLAGS = {
+  COMPLEX_BINDINGS: false
+};
+var featureFlags = null;
+var getFeatureFlag = (flag) => {
+  if (!featureFlags) {
+    try {
+      const serializedFlags = localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
+      if (serializedFlags) {
+        const flags = JSON.parse(serializedFlags);
+        featureFlags = flags ?? DEFAULT_FEATURE_FLAGS;
+      }
+    } catch {
+    }
+  }
+  return (featureFlags || DEFAULT_FEATURE_FLAGS)[flag];
+};
+var setFeatureFlag = (flag, value) => {
+  try {
+    featureFlags = {
+      ...featureFlags || DEFAULT_FEATURE_FLAGS,
+      [flag]: value
+    };
+    localStorage.setItem(
+      FEATURE_FLAGS_STORAGE_KEY,
+      JSON.stringify(featureFlags)
+    );
+  } catch (e) {
+    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());
@@ -2140,6 +3253,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,
@@ -2147,10 +3552,12 @@ 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_PALETTE_SHADE_INDEXES,
   CANVAS_SEARCH_TAB,
   CJK_HAND_DRAWN_FALLBACK_FONT,
   CLASSES,
@@ -2159,9 +3566,11 @@ export {
   COLOR_CHARCOAL_BLACK,
   COLOR_OUTLINE_CONTRAST_THRESHOLD,
   COLOR_PALETTE,
+  COLOR_TOP_PICKS_SLOTS,
   COLOR_VOICE_CALL,
   COLOR_WHITE,
   CURSOR_TYPE,
+  DARK_THEME_FILTER,
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_CANVAS_BACKGROUND_PICKS,
   DEFAULT_CHART_COLOR_INDEX,
@@ -2173,26 +3582,31 @@ 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_STROKE_STREAMLINE,
+  DEFAULT_STROKE_STREAMLINE_PRECISE,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_TRANSFORM_HANDLE_SPACING,
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERSION,
   DEFAULT_VERTICAL_ALIGN,
+  DOUBLE_TAP_POSITION_THRESHOLD,
   DRAGGING_THRESHOLD,
+  Debug,
   EDITOR_LS_KEYS,
-  ELEMENTS_PALETTE_SHADE_INDEXES,
   ELEMENT_LINK_KEY,
+  ELEMENT_PENDING_DRAW_SHAPE_OPACITY,
   ELEMENT_READY_TO_ERASE_OPACITY,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
@@ -2208,7 +3622,9 @@ export {
   FONT_FAMILY_FALLBACKS,
   FONT_FAMILY_GENERIC_FALLBACKS,
   FONT_METADATA,
+  FONT_SIZES,
   FRAME_STYLE,
+  FREEDRAW_STROKE_WIDTH,
   GOOGLE_FONTS_RANGES,
   HYPERLINK_TOOLTIP_DELAY,
   IDLE_THRESHOLD,
@@ -2221,7 +3637,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,
@@ -2230,10 +3645,14 @@ export {
   MIN_FONT_SIZE,
   MIN_WIDTH_OR_HEIGHT,
   MIN_ZOOM,
+  MOBILE_ACTION_BUTTON_BG,
   MONOSPACE_GENERIC_FONT,
   MQ_MAX_HEIGHT_LANDSCAPE,
+  MQ_MAX_MOBILE,
+  MQ_MAX_TABLET,
   MQ_MAX_WIDTH_LANDSCAPE,
-  MQ_MAX_WIDTH_PORTRAIT,
+  MQ_MIN_TABLET,
+  MQ_MIN_WIDTH_DESKTOP,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
   ORIG_ID,
   POINTER_BUTTON,
@@ -2247,7 +3666,9 @@ export {
   SHIFT_LOCKING_ANGLE,
   SIDE_RESIZING_THRESHOLD,
   STATS_PANELS,
+  STRING_MIME_TYPES,
   STROKE_WIDTH,
+  STROKE_WIDTH_KEYS,
   SVG_DOCUMENT_PREAMBLE,
   SVG_NS,
   TAP_TWICE_TIMEOUT,
@@ -2255,7 +3676,6 @@ export {
   TEXT_AUTOWRAP_THRESHOLD,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   THEME,
-  THEME_FILTER,
   TITLE_TIMEOUT,
   TOOL_TYPE,
   TOUCH_CTX_MENU_TIMEOUT,
@@ -2265,11 +3685,13 @@ export {
   VERSIONS,
   VERSION_TIMEOUT,
   VERTICAL_ALIGN,
+  VersionedSnapshotStore,
   WINDOWS_EMOJI_FALLBACK_FONT,
   YOUTUBE_STATES,
   ZOOM_STEP,
   addEventListener,
   allowFullScreen,
+  applyDarkModeFilter,
   arrayToList,
   arrayToMap,
   arrayToMapWithIndex,
@@ -2280,11 +3702,13 @@ export {
   castArray,
   chunk,
   cloneJSON,
+  colorToHex,
   composeEventHandlers,
+  createUserAgentDescriptor,
   debounce,
+  deriveStylesPanelMode,
   distance,
   easeOut,
-  easeToValuesRAF,
   escapeDoubleQuotes,
   exitFullScreen,
   findIndex,
@@ -2293,18 +3717,19 @@ export {
   getAllColorsSpecificShade,
   getDateTime,
   getExportSource,
+  getFeatureFlag,
   getFontFamilyFallbacks,
   getFontFamilyString,
   getFontString,
+  getFormFactor,
   getFrame,
   getGenericFontFamilyFallback,
   getGlobalCSSVariable,
   getGridPoint,
   getLineHeight,
   getNearestScrollableContainer,
-  getShortcutKey,
   getSizeFromPoints,
-  getSpecificColorShades,
+  getStrokeWidthByKey,
   getSvgPathFromStroke,
   getUpdatedTimestamp,
   getVersion,
@@ -2313,9 +3738,10 @@ export {
   isAndroid,
   isAnyTrue,
   isArrowKey,
-  isBindingFallthroughEnabled,
+  isBounds,
   isBrave,
   isChrome,
+  isColorDark,
   isDarwin,
   isDevEnv,
   isFirefox,
@@ -2326,6 +3752,8 @@ export {
   isLatinChar,
   isLocalLink,
   isMemberOf,
+  isMobileBreakpoint,
+  isOpaqueColor,
   isPrimitive,
   isProdEnv,
   isPromiseLike,
@@ -2333,35 +3761,44 @@ export {
   isReadonlyArray,
   isRunningInIframe,
   isSafari,
+  isSelectionLikeTool,
   isServerEnv,
   isShallowEqual,
+  isTabletBreakpoint,
   isTestEnv,
   isToolIcon,
   isTransparent,
   isWindows,
   isWritableElement,
+  loadDesktopUIModePreference,
   mapFind,
   matchKey,
   memoize,
   muteFSAbortError,
   nFormatter,
+  nextAnimationFrame,
   normalizeEOL,
+  normalizeInputColor,
   normalizeLink,
+  oneOf,
   preventUnload,
   promiseTry,
   queryFocusableElements,
   randomId,
   randomInteger,
   reduceToCommonValue,
+  removeDarkModeFilter,
   removeSelection,
   rescalePoints,
   reseed,
   resolvablePromise,
-  rgbToHex,
+  rgbToHex2 as rgbToHex,
   safelyParseJSON,
   sceneCoordsToViewportCoords,
   selectNode,
   setDateTimeForTests,
+  setDesktopUIMode,
+  setFeatureFlag,
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   shouldRotateWithDiscreteAngle,