@excalidraw/common 0.18.0-508de2f3a → 0.18.0-54a9826

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,1058 @@ 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;
+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) => {
+  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, 93);
+  const rotated = cssHueRotate(
+    inverted.r,
+    inverted.g,
+    inverted.b,
+    180
+  );
+  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 pick = (source, keys) => {
   return keys.reduce((acc, key) => {
     if (key in source) {
@@ -544,28 +1428,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, [
@@ -637,19 +1517,61 @@ 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 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 (tc.getFormat() === "hex" && !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 +1653,19 @@ 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"
+};
+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 +1718,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 +1761,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 +1812,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,10 +1832,6 @@ 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;
@@ -1017,6 +1951,11 @@ 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)"
+};
 
 // src/font-metadata.ts
 init_define_import_meta_env();
@@ -1172,6 +2111,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",
@@ -1417,7 +2483,7 @@ var isInteractive = (target) => {
   return isInputLike(target) || target instanceof Element && !!target.closest("label, button");
 };
 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 instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search");
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -1434,6 +2500,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;
@@ -1598,6 +2667,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 {
@@ -1619,13 +2691,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 +2764,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;
@@ -2025,9 +3084,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 +3126,38 @@ 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);
+  }
+};
 
 // src/random.ts
 var random = new Random(Date.now());
@@ -2147,10 +3238,10 @@ export {
   ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
   ARROW_LABEL_WIDTH_FRACTION,
   ARROW_TYPE,
+  BIND_MODE_TIMEOUT,
   BOUND_TEXT_PADDING,
   BinaryHeap,
   CANVAS_ONLY_ACTIONS,
-  CANVAS_PALETTE_SHADE_INDEXES,
   CANVAS_SEARCH_TAB,
   CJK_HAND_DRAWN_FALLBACK_FONT,
   CLASSES,
@@ -2162,6 +3253,7 @@ export {
   COLOR_VOICE_CALL,
   COLOR_WHITE,
   CURSOR_TYPE,
+  DARK_THEME_FILTER,
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_CANVAS_BACKGROUND_PICKS,
   DEFAULT_CHART_COLOR_INDEX,
@@ -2189,9 +3281,9 @@ export {
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERSION,
   DEFAULT_VERTICAL_ALIGN,
+  DOUBLE_TAP_POSITION_THRESHOLD,
   DRAGGING_THRESHOLD,
   EDITOR_LS_KEYS,
-  ELEMENTS_PALETTE_SHADE_INDEXES,
   ELEMENT_LINK_KEY,
   ELEMENT_READY_TO_ERASE_OPACITY,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
@@ -2208,6 +3300,7 @@ export {
   FONT_FAMILY_FALLBACKS,
   FONT_FAMILY_GENERIC_FALLBACKS,
   FONT_METADATA,
+  FONT_SIZES,
   FRAME_STYLE,
   GOOGLE_FONTS_RANGES,
   HYPERLINK_TOOLTIP_DELAY,
@@ -2230,10 +3323,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,6 +3344,7 @@ export {
   SHIFT_LOCKING_ANGLE,
   SIDE_RESIZING_THRESHOLD,
   STATS_PANELS,
+  STRING_MIME_TYPES,
   STROKE_WIDTH,
   SVG_DOCUMENT_PREAMBLE,
   SVG_NS,
@@ -2255,7 +3353,6 @@ export {
   TEXT_AUTOWRAP_THRESHOLD,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   THEME,
-  THEME_FILTER,
   TITLE_TIMEOUT,
   TOOL_TYPE,
   TOUCH_CTX_MENU_TIMEOUT,
@@ -2270,6 +3367,7 @@ export {
   ZOOM_STEP,
   addEventListener,
   allowFullScreen,
+  applyDarkModeFilter,
   arrayToList,
   arrayToMap,
   arrayToMapWithIndex,
@@ -2280,8 +3378,11 @@ export {
   castArray,
   chunk,
   cloneJSON,
+  colorToHex,
   composeEventHandlers,
+  createUserAgentDescriptor,
   debounce,
+  deriveStylesPanelMode,
   distance,
   easeOut,
   easeToValuesRAF,
@@ -2293,18 +3394,18 @@ export {
   getAllColorsSpecificShade,
   getDateTime,
   getExportSource,
+  getFeatureFlag,
   getFontFamilyFallbacks,
   getFontFamilyString,
   getFontString,
+  getFormFactor,
   getFrame,
   getGenericFontFamilyFallback,
   getGlobalCSSVariable,
   getGridPoint,
   getLineHeight,
   getNearestScrollableContainer,
-  getShortcutKey,
   getSizeFromPoints,
-  getSpecificColorShades,
   getSvgPathFromStroke,
   getUpdatedTimestamp,
   getVersion,
@@ -2313,9 +3414,10 @@ export {
   isAndroid,
   isAnyTrue,
   isArrowKey,
-  isBindingFallthroughEnabled,
+  isBounds,
   isBrave,
   isChrome,
+  isColorDark,
   isDarwin,
   isDevEnv,
   isFirefox,
@@ -2326,6 +3428,7 @@ export {
   isLatinChar,
   isLocalLink,
   isMemberOf,
+  isMobileBreakpoint,
   isPrimitive,
   isProdEnv,
   isPromiseLike,
@@ -2333,19 +3436,24 @@ export {
   isReadonlyArray,
   isRunningInIframe,
   isSafari,
+  isSelectionLikeTool,
   isServerEnv,
   isShallowEqual,
+  isTabletBreakpoint,
   isTestEnv,
   isToolIcon,
   isTransparent,
   isWindows,
   isWritableElement,
+  loadDesktopUIModePreference,
   mapFind,
   matchKey,
   memoize,
   muteFSAbortError,
   nFormatter,
+  nextAnimationFrame,
   normalizeEOL,
+  normalizeInputColor,
   normalizeLink,
   preventUnload,
   promiseTry,
@@ -2357,11 +3465,13 @@ export {
   rescalePoints,
   reseed,
   resolvablePromise,
-  rgbToHex,
+  rgbToHex2 as rgbToHex,
   safelyParseJSON,
   sceneCoordsToViewportCoords,
   selectNode,
   setDateTimeForTests,
+  setDesktopUIMode,
+  setFeatureFlag,
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   shouldRotateWithDiscreteAngle,