snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

2026-09-16 05:18:53 +05:00
commit 3faa0021f0
447 changed files with 109496 additions and 0 deletions
--- a/packages/common/.eslintrc.json
+++ b/packages/common/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["../eslintrc.base.json"]
+}
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -0,0 +1,19 @@
+# @excalidraw/common
+
+## Install
+
+```bash
+npm install @excalidraw/common
+```
+
+If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
+
+```bash
+yarn add @excalidraw/common
+```
+
+With PNPM, similarly install the package with this command:
+
+```bash
+pnpm add @excalidraw/common
+```
--- a/packages/common/debug.ts
+++ b/packages/common/debug.ts
@@ -0,0 +1,220 @@
+const lessPrecise = (num: number, precision = 5) =>
+  parseFloat(num.toPrecision(precision));
+
+const getAvgFrameTime = (times: number[]) =>
+  lessPrecise(times.reduce((a, b) => a + b) / times.length);
+
+export class Debug {
+  public static DEBUG_LOG_TIMES = true;
+
+  private static TIMES_AGGR: Record<string, { t: number; times: number[] }> =
+    {};
+  private static TIMES_AVG: Record<
+    string,
+    { t: number; times: number[]; avg: number | null }
+  > = {};
+  private static LAST_DEBUG_LOG_CALL = 0;
+  private static DEBUG_LOG_INTERVAL_ID: null | number = null;
+
+  private static LAST_FRAME_TIMESTAMP = 0;
+  private static FRAME_COUNT = 0;
+  private static ANIMATION_FRAME_ID: null | number = null;
+
+  private 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();
+        }
+      });
+    }
+  };
+
+  private 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, 1000);
+      Debug.scheduleAnimationFrame();
+    }
+    Debug.LAST_DEBUG_LOG_CALL = Date.now();
+  };
+
+  private 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 avgFrameTime = getAvgFrameTime(times);
+          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;
+
+    // Check for stop condition after logging
+    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 = {};
+    }
+  };
+
+  public static logTime = (time?: number, 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;
+  };
+  public static logTimeAverage = (time?: number, 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;
+  };
+
+  private static logWrapper =
+    (type: "logTime" | "logTimeAverage") =>
+    <T extends any[], R>(fn: (...args: T) => R, name = "default") => {
+      return (...args: T) => {
+        const t0 = performance.now();
+        const ret = fn(...args);
+        Debug[type](performance.now() - t0, name);
+        return ret;
+      };
+    };
+
+  public static logTimeWrap = Debug.logWrapper("logTime");
+  public static logTimeAverageWrap = Debug.logWrapper("logTimeAverage");
+
+  public static perfWrap = <T extends any[], R>(
+    fn: (...args: T) => R,
+    name = "default",
+  ) => {
+    return (...args: T) => {
+      // eslint-disable-next-line no-console
+      console.time(name);
+      const ret = fn(...args);
+      // eslint-disable-next-line no-console
+      console.timeEnd(name);
+      return ret;
+    };
+  };
+
+  private static CHANGED_CACHE: Record<string, Record<string, unknown>> = {};
+
+  public static logChanged(name: string, obj: Record<string, unknown>) {
+    const prev = Debug.CHANGED_CACHE[name];
+
+    Debug.CHANGED_CACHE[name] = obj;
+
+    if (!prev) {
+      return;
+    }
+
+    const allKeys = new Set([...Object.keys(prev), ...Object.keys(obj)]);
+    const changed: Record<string, { prev: unknown; next: unknown }> = {};
+
+    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: unknown, b: unknown): boolean {
+  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 as Record<string, unknown>);
+  const keysB = Object.keys(b as Record<string, unknown>);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  for (const key of keysA) {
+    if (
+      !deepEqual(
+        (a as Record<string, unknown>)[key],
+        (b as Record<string, unknown>)[key],
+      )
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}
--- a/packages/common/global.d.ts
+++ b/packages/common/global.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+import "@excalidraw/excalidraw/global";
+import "@excalidraw/excalidraw/css";
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@excalidraw/common",
+  "version": "0.18.0",
+  "type": "module",
+  "types": "./dist/types/common/src/index.d.ts",
+  "main": "./dist/prod/index.js",
+  "module": "./dist/prod/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/common/src/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "production": "./dist/prod/index.js",
+      "default": "./dist/prod/index.js"
+    },
+    "./*": {
+      "types": "./dist/types/common/src/*.d.ts",
+      "development": "./dist/dev/index.js",
+      "production": "./dist/prod/index.js",
+      "default": "./dist/prod/index.js"
+    }
+  },
+  "files": [
+    "dist/*"
+  ],
+  "description": "Excalidraw common functions, constants, etc.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "keywords": [
+    "excalidraw",
+    "excalidraw-utils"
+  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all",
+      "not safari < 12",
+      "not kaios <= 2.5",
+      "not edge < 79",
+      "not chrome < 70",
+      "not and_uc < 13",
+      "not samsung < 10"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "bugs": "https://github.com/excalidraw/excalidraw/issues",
+  "repository": "https://github.com/excalidraw/excalidraw",
+  "scripts": {
+    "gen:types": "rimraf types && tsc",
+    "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
+  },
+  "dependencies": {
+    "tinycolor2": "1.6.0"
+  },
+  "devDependencies": {
+    "@types/tinycolor2": "1.4.6"
+  }
+}
--- a/packages/common/src/snapshots/colors.test.ts.snap
+++ b/packages/common/src/snapshots/colors.test.ts.snap
@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`COLOR_PALETTE > color palette doesn't regress 1`] = `
+{
+  "black": "#1e1e1e",
+  "blue": [
+    "#e7f5ff",
+    "#a5d8ff",
+    "#4dabf7",
+    "#228be6",
+    "#1971c2",
+  ],
+  "bronze": [
+    "#f8f1ee",
+    "#eaddd7",
+    "#d2bab0",
+    "#a18072",
+    "#846358",
+  ],
+  "cyan": [
+    "#e3fafc",
+    "#99e9f2",
+    "#3bc9db",
+    "#15aabf",
+    "#0c8599",
+  ],
+  "grape": [
+    "#f8f0fc",
+    "#eebefa",
+    "#da77f2",
+    "#be4bdb",
+    "#9c36b5",
+  ],
+  "gray": [
+    "#f8f9fa",
+    "#e9ecef",
+    "#ced4da",
+    "#868e96",
+    "#343a40",
+  ],
+  "green": [
+    "#ebfbee",
+    "#b2f2bb",
+    "#69db7c",
+    "#40c057",
+    "#2f9e44",
+  ],
+  "orange": [
+    "#fff4e6",
+    "#ffd8a8",
+    "#ffa94d",
+    "#fd7e14",
+    "#e8590c",
+  ],
+  "pink": [
+    "#fff0f6",
+    "#fcc2d7",
+    "#f783ac",
+    "#e64980",
+    "#c2255c",
+  ],
+  "red": [
+    "#fff5f5",
+    "#ffc9c9",
+    "#ff8787",
+    "#fa5252",
+    "#e03131",
+  ],
+  "teal": [
+    "#e6fcf5",
+    "#96f2d7",
+    "#38d9a9",
+    "#12b886",
+    "#099268",
+  ],
+  "transparent": "transparent",
+  "violet": [
+    "#f3f0ff",
+    "#d0bfff",
+    "#9775fa",
+    "#7950f2",
+    "#6741d9",
+  ],
+  "white": "#ffffff",
+  "yellow": [
+    "#fff9db",
+    "#ffec99",
+    "#ffd43b",
+    "#fab005",
+    "#f08c00",
+  ],
+}
+`;
+
+exports[`applyDarkModeFilter > COLOR_PALETTE regression tests > matches snapshot for all palette colors 1`] = `
+{
+  "black": "#d3d3d3",
+  "blue": [
+    "#121e26",
+    "#154162",
+    "#2273b4",
+    "#3791e0",
+    "#56a2e8",
+  ],
+  "bronze": [
+    "#221c1a",
+    "#362b26",
+    "#5a463d",
+    "#917569",
+    "#a98d84",
+  ],
+  "cyan": [
+    "#0a1e20",
+    "#004149",
+    "#007281",
+    "#0f8fa1",
+    "#3da5b6",
+  ],
+  "grape": [
+    "#211a25",
+    "#5b3165",
+    "#a954be",
+    "#d471ed",
+    "#e28af8",
+  ],
+  "gray": [
+    "#161718",
+    "#202325",
+    "#33383d",
+    "#6e757c",
+    "#b7bcc1",
+  ],
+  "green": [
+    "#0f1d12",
+    "#043b0c",
+    "#056715",
+    "#16842a",
+    "#39994b",
+  ],
+  "orange": [
+    "#22190d",
+    "#4c2b01",
+    "#924800",
+    "#cd6005",
+    "#f17634",
+  ],
+  "pink": [
+    "#26191e",
+    "#602e40",
+    "#b04d70",
+    "#f56e9d",
+    "#ff8dbc",
+  ],
+  "red": [
+    "#1f1717",
+    "#5a2c2c",
+    "#b44d4d",
+    "#fa6969",
+    "#ff8383",
+  ],
+  "teal": [
+    "#0a1d17",
+    "#00422b",
+    "#00744b",
+    "#039267",
+    "#32a783",
+  ],
+  "transparent": "#ededed00",
+  "violet": [
+    "#1f1c29",
+    "#4a3b72",
+    "#8a6cdf",
+    "#a885ff",
+    "#b595ff",
+  ],
+  "white": "#121212",
+  "yellow": [
+    "#1e1900",
+    "#362600",
+    "#5f3a00",
+    "#905000",
+    "#b86200",
+  ],
+}
+`;
--- a/packages/common/src/appEventBus.test.ts
+++ b/packages/common/src/appEventBus.test.ts
@@ -0,0 +1,74 @@
+import { AppEventBus } from "./appEventBus";
+
+type TestEvents = {
+  initialize: [api: number];
+  pointerUp: [pointerId: string];
+  viewState: [zoom: number];
+};
+
+const behavior = {
+  initialize: { cardinality: "once", replay: "last" },
+  pointerUp: { cardinality: "many", replay: "none" },
+  viewState: { cardinality: "many", replay: "last" },
+} as const;
+
+const flushMicrotasks = async () => Promise.resolve();
+
+describe("AppEventBus", () => {
+  it("replays once events to late callback and Promise subscribers", async () => {
+    const bus = new AppEventBus<TestEvents, typeof behavior>(behavior);
+    bus.emit("initialize", 42);
+
+    const calls: number[] = [];
+    bus.on("initialize", (value) => {
+      calls.push(value);
+    });
+
+    expect(calls).toEqual([]);
+    await flushMicrotasks();
+    expect(calls).toEqual([42]);
+
+    await expect(bus.on("initialize")).resolves.toBe(42);
+  });
+
+  it("does not replay stream events to late subscribers", async () => {
+    const bus = new AppEventBus<TestEvents, typeof behavior>(behavior);
+    bus.emit("pointerUp", "first");
+
+    const calls: string[] = [];
+    bus.on("pointerUp", (pointerId) => {
+      calls.push(pointerId);
+    });
+
+    await flushMicrotasks();
+    expect(calls).toEqual([]);
+
+    bus.emit("pointerUp", "second");
+    expect(calls).toEqual(["second"]);
+  });
+
+  it("replays replay-last stream events and stays subscribed", async () => {
+    const bus = new AppEventBus<TestEvents, typeof behavior>(behavior);
+    bus.emit("viewState", 1);
+
+    const calls: number[] = [];
+    bus.on("viewState", (zoom) => {
+      calls.push(zoom);
+    });
+
+    await flushMicrotasks();
+    expect(calls).toEqual([1]);
+
+    bus.emit("viewState", 2);
+    expect(calls).toEqual([1, 2]);
+  });
+
+  it("throws when emitting a once event twice", () => {
+    const bus = new AppEventBus<TestEvents, typeof behavior>(behavior);
+    bus.emit("initialize", 1);
+
+    expect(() => {
+      bus.emit("initialize", 2);
+    }).toThrow('Event "initialize" can only be emitted once');
+  });
+});
--- a/packages/common/src/appEventBus.ts
+++ b/packages/common/src/appEventBus.ts
@@ -0,0 +1,136 @@
+import type { UnsubscribeCallback } from "@excalidraw/excalidraw/types";
+
+import { Emitter } from "./emitter";
+import { isProdEnv } from "./utils";
+
+export type AppEventPayloadMap = Record<string, unknown[]>;
+
+export type AppEventBehavior = {
+  cardinality: "once" | "many";
+  replay: "none" | "last";
+};
+
+export type AppEventBehaviorMap<Events extends AppEventPayloadMap> = {
+  [K in keyof Events]: AppEventBehavior;
+};
+
+type AwaitableAppEventKeys<
+  Events extends AppEventPayloadMap,
+  Behavior extends AppEventBehaviorMap<Events>,
+> = {
+  [K in keyof Events]: Behavior[K]["cardinality"] extends "once"
+    ? Behavior[K]["replay"] extends "last"
+      ? K
+      : never
+    : never;
+}[keyof Events];
+
+type AppEventPromiseValue<Args extends any[]> = Args extends [infer Only]
+  ? Only
+  : Args;
+
+export class AppEventBus<
+  Events extends AppEventPayloadMap,
+  Behavior extends AppEventBehaviorMap<Events>,
+> {
+  private readonly emitters = new Map<keyof Events, Emitter<any>>();
+  private readonly lastPayload = new Map<keyof Events, any[]>();
+  private readonly emittedOnce = new Set<keyof Events>();
+
+  constructor(private readonly behavior: Behavior) {}
+
+  private getEmitter<K extends keyof Events>(name: K): Emitter<Events[K]> {
+    let emitter = this.emitters.get(name);
+    if (!emitter) {
+      emitter = new Emitter<any>();
+      this.emitters.set(name, emitter);
+    }
+    return emitter as Emitter<Events[K]>;
+  }
+
+  private toPromiseValue<Args extends any[]>(
+    args: Args,
+  ): AppEventPromiseValue<Args> {
+    return (args.length === 1 ? args[0] : args) as AppEventPromiseValue<Args>;
+  }
+
+  public on<K extends keyof Events>(
+    name: K,
+    callback: (...args: Events[K]) => void,
+  ): UnsubscribeCallback;
+  public on<K extends AwaitableAppEventKeys<Events, Behavior>>(
+    name: K,
+  ): Promise<AppEventPromiseValue<Events[K]>>;
+  public on<K extends keyof Events>(
+    name: K,
+    callback?: (...args: Events[K]) => void,
+  ): UnsubscribeCallback | Promise<AppEventPromiseValue<Events[K]>> {
+    const eventBehavior = this.behavior[name];
+    const cachedPayload = this.lastPayload.get(name) as Events[K] | undefined;
+
+    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<AppEventPromiseValue<Events[K]>>((resolve) => {
+      this.getEmitter(name).once((...args: Events[K]) => {
+        resolve(this.toPromiseValue(args));
+      });
+    });
+  }
+
+  public emit<K extends keyof Events>(name: K, ...args: Events[K]) {
+    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();
+      }
+    }
+  }
+
+  public clear() {
+    this.lastPayload.clear();
+    this.emittedOnce.clear();
+
+    for (const emitter of this.emitters.values()) {
+      emitter.clear();
+    }
+
+    this.emitters.clear();
+  }
+}
--- a/packages/common/src/binary-heap.ts
+++ b/packages/common/src/binary-heap.ts
@@ -0,0 +1,110 @@
+export class BinaryHeap<T> {
+  private content: T[] = [];
+
+  constructor(private scoreFunction: (node: T) => number) {}
+
+  sinkDown(idx: number) {
+    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 (nodeScore < this.scoreFunction(parent)) {
+        this.content[idx] = parent;
+        idx = parentN; // TODO: Optimize
+      } else {
+        break;
+      }
+    }
+    this.content[idx] = node;
+  }
+
+  bubbleUp(idx: number) {
+    const length = this.content.length;
+    const node = this.content[idx];
+    const score = this.scoreFunction(node);
+
+    while (true) {
+      const child1N = ((idx + 1) << 1) - 1;
+      const child2N = child1N + 1;
+      let smallestIdx = idx;
+      let smallestScore = score;
+
+      // Check left child
+      if (child1N < length) {
+        const child1Score = this.scoreFunction(this.content[child1N]);
+        if (child1Score < smallestScore) {
+          smallestIdx = child1N;
+          smallestScore = child1Score;
+        }
+      }
+
+      // Check right child
+      if (child2N < length) {
+        const child2Score = this.scoreFunction(this.content[child2N]);
+        if (child2Score < smallestScore) {
+          smallestIdx = child2N;
+        }
+      }
+
+      if (smallestIdx === idx) {
+        break;
+      }
+
+      // Move the smaller child up, continue finding position for node
+      this.content[idx] = this.content[smallestIdx];
+      idx = smallestIdx;
+    }
+
+    // Place node in its final position
+    this.content[idx] = node;
+  }
+
+  push(node: T) {
+    this.content.push(node);
+    this.sinkDown(this.content.length - 1);
+  }
+
+  pop(): T | null {
+    if (this.content.length === 0) {
+      return null;
+    }
+
+    const result = this.content[0];
+    const end = this.content.pop()!;
+
+    if (this.content.length > 0) {
+      this.content[0] = end;
+      this.bubbleUp(0);
+    }
+
+    return result;
+  }
+
+  remove(node: T) {
+    if (this.content.length === 0) {
+      return;
+    }
+
+    const i = this.content.indexOf(node);
+    const end = this.content.pop()!;
+
+    if (i < this.content.length) {
+      this.content[i] = end;
+
+      if (this.scoreFunction(end) < this.scoreFunction(node)) {
+        this.sinkDown(i);
+      } else {
+        this.bubbleUp(i);
+      }
+    }
+  }
+
+  size(): number {
+    return this.content.length;
+  }
+
+  rescoreElement(node: T) {
+    this.sinkDown(this.content.indexOf(node));
+  }
+}
--- a/packages/common/src/bounds.ts
+++ b/packages/common/src/bounds.ts
@@ -0,0 +1,17 @@
+/**
+ * x and y position of top left corner, x and y position of bottom right corner
+ */
+export type Bounds = readonly [
+  minX: number,
+  minY: number,
+  maxX: number,
+  maxY: number,
+];
+
+export const isBounds = (box: unknown): box is Bounds =>
+  Array.isArray(box) &&
+  box.length === 4 &&
+  typeof box[0] === "number" &&
+  typeof box[1] === "number" &&
+  typeof box[2] === "number" &&
+  typeof box[3] === "number";
--- a/packages/common/src/colors.test.ts
+++ b/packages/common/src/colors.test.ts
@@ -0,0 +1,305 @@
+import {
+  applyDarkModeFilter,
+  COLOR_PALETTE,
+  removeDarkModeFilter,
+  rgbToHex,
+} from "@excalidraw/common";
+
+describe("COLOR_PALETTE", () => {
+  it("color palette doesn't regress", () => {
+    expect(COLOR_PALETTE).toMatchSnapshot();
+  });
+});
+
+describe("applyDarkModeFilter", () => {
+  describe("basic transformations", () => {
+    it("transforms black to near-white", () => {
+      const result = applyDarkModeFilter("#000000");
+      // Black inverted 93% + hue rotate should be near white/light gray
+      expect(result).toBe("#ededed");
+    });
+
+    it("transforms white to near-black", () => {
+      const result = applyDarkModeFilter("#ffffff");
+      // White inverted 93% should be near black/dark gray
+      expect(result).toBe("#121212");
+    });
+
+    it("transforms pure red", () => {
+      const result = applyDarkModeFilter("#ff0000");
+      // Invert 93% + hue rotate 180deg produces a cyan-ish tint
+      expect(result).toBe("#ff9090");
+    });
+
+    it("transforms pure green", () => {
+      const result = applyDarkModeFilter("#00ff00");
+      // Invert 93% + hue rotate 180deg
+      expect(result).toBe("#008f00");
+    });
+
+    it("transforms pure blue", () => {
+      const result = applyDarkModeFilter("#0000ff");
+      // Invert 93% + hue rotate 180deg produces a light purple
+      expect(result).toBe("#cdcdff");
+    });
+  });
+
+  describe("color formats", () => {
+    it("handles hex with hash", () => {
+      const result = applyDarkModeFilter("#ff0000");
+      // Fully opaque colors return 6-char hex
+      expect(result).toMatch(/^#[0-9a-f]{6}$/);
+    });
+
+    it("handles named colors", () => {
+      const result = applyDarkModeFilter("red");
+      // "red" = #ff0000, fully opaque
+      expect(result).toBe("#ff9090");
+    });
+
+    it("handles rgb format", () => {
+      const result = applyDarkModeFilter("rgb(255, 0, 0)");
+      expect(result).toBe("#ff9090");
+    });
+
+    it("handles rgba format and preserves alpha", () => {
+      const result = applyDarkModeFilter("rgba(255, 0, 0, 0.5)");
+      expect(result).toMatch(/^#[0-9a-f]{8}$/);
+      // Alpha 0.5 = 128 in hex = 80
+      expect(result).toBe("#ff909080");
+    });
+
+    it("handles transparent", () => {
+      const result = applyDarkModeFilter("transparent");
+      // transparent = rgba(0,0,0,0), inverted should still have 0 alpha
+      expect(result).toBe("#ededed00");
+    });
+
+    it("handles shorthand hex", () => {
+      const result = applyDarkModeFilter("#f00");
+      expect(result).toBe("#ff9090");
+    });
+  });
+
+  describe("alpha preservation", () => {
+    it("omits alpha for full opacity", () => {
+      const result = applyDarkModeFilter("#ff0000ff");
+      // Full opacity returns 6-char hex (no alpha suffix)
+      expect(result).toBe("#ff9090");
+    });
+
+    it("preserves 50% opacity", () => {
+      const result = applyDarkModeFilter("#ff000080");
+      expect(result.slice(-2)).toBe("80");
+    });
+
+    it("preserves 0% opacity", () => {
+      const result = applyDarkModeFilter("#ff000000");
+      expect(result.slice(-2)).toBe("00");
+    });
+  });
+
+  describe("COLOR_PALETTE regression tests", () => {
+    it("transforms black from palette", () => {
+      // COLOR_PALETTE.black is #1e1e1e (not pure black)
+      const result = applyDarkModeFilter(COLOR_PALETTE.black);
+      expect(result).toBe("#d3d3d3");
+    });
+
+    it("transforms white from palette", () => {
+      const result = applyDarkModeFilter(COLOR_PALETTE.white);
+      expect(result).toBe("#121212");
+    });
+
+    it("transforms transparent from palette", () => {
+      const result = applyDarkModeFilter(COLOR_PALETTE.transparent);
+      expect(result).toBe("#ededed00");
+    });
+
+    // Test each color family from the palette (all opaque, so 6-char hex)
+    describe("red shades", () => {
+      const redShades = COLOR_PALETTE.red;
+      it.each(redShades.map((color, i) => [color, i]))(
+        "transforms red shade %s (index %d)",
+        (color) => {
+          const result = applyDarkModeFilter(color as string);
+          expect(result).toMatch(/^#[0-9a-f]{6}$/);
+        },
+      );
+    });
+
+    describe("blue shades", () => {
+      const blueShades = COLOR_PALETTE.blue;
+      it.each(blueShades.map((color, i) => [color, i]))(
+        "transforms blue shade %s (index %d)",
+        (color) => {
+          const result = applyDarkModeFilter(color as string);
+          expect(result).toMatch(/^#[0-9a-f]{6}$/);
+        },
+      );
+    });
+
+    describe("green shades", () => {
+      const greenShades = COLOR_PALETTE.green;
+      it.each(greenShades.map((color, i) => [color, i]))(
+        "transforms green shade %s (index %d)",
+        (color) => {
+          const result = applyDarkModeFilter(color as string);
+          expect(result).toMatch(/^#[0-9a-f]{6}$/);
+        },
+      );
+    });
+
+    describe("gray shades", () => {
+      const grayShades = COLOR_PALETTE.gray;
+      it.each(grayShades.map((color, i) => [color, i]))(
+        "transforms gray shade %s (index %d)",
+        (color) => {
+          const result = applyDarkModeFilter(color as string);
+          expect(result).toMatch(/^#[0-9a-f]{6}$/);
+        },
+      );
+    });
+
+    describe("bronze shades", () => {
+      const bronzeShades = COLOR_PALETTE.bronze;
+      it.each(bronzeShades.map((color, i) => [color, i]))(
+        "transforms bronze shade %s (index %d)",
+        (color) => {
+          const result = applyDarkModeFilter(color as string);
+          expect(result).toMatch(/^#[0-9a-f]{6}$/);
+        },
+      );
+    });
+
+    // Snapshot test for full palette to catch any regressions
+    it("matches snapshot for all palette colors", () => {
+      const transformedPalette: Record<string, string | string[]> = {};
+
+      transformedPalette.black = applyDarkModeFilter(COLOR_PALETTE.black);
+      transformedPalette.white = applyDarkModeFilter(COLOR_PALETTE.white);
+      transformedPalette.transparent = applyDarkModeFilter(
+        COLOR_PALETTE.transparent,
+      );
+
+      // Transform color arrays
+      for (const colorName of [
+        "gray",
+        "red",
+        "pink",
+        "grape",
+        "violet",
+        "blue",
+        "cyan",
+        "teal",
+        "green",
+        "yellow",
+        "orange",
+        "bronze",
+      ] as const) {
+        const shades = COLOR_PALETTE[colorName];
+        transformedPalette[colorName] = shades.map((shade) =>
+          applyDarkModeFilter(shade),
+        );
+      }
+
+      expect(transformedPalette).toMatchSnapshot();
+    });
+  });
+
+  describe("caching", () => {
+    it("returns same result for same input (cached)", () => {
+      const result1 = applyDarkModeFilter("#ff0000");
+      const result2 = applyDarkModeFilter("#ff0000");
+      expect(result1).toBe(result2);
+    });
+  });
+});
+
+describe("removeDarkModeFilter", () => {
+  it("restores black and white", () => {
+    expect(removeDarkModeFilter("#ededed")).toBe("#000000");
+    expect(removeDarkModeFilter("#121212")).toBe("#ffffff");
+  });
+
+  it.each([
+    COLOR_PALETTE.black,
+    COLOR_PALETTE.white,
+    COLOR_PALETTE.red[4],
+    COLOR_PALETTE.green[4],
+    COLOR_PALETTE.blue[4],
+  ])("preserves the rendered dark-mode color for %s", (color) => {
+    const filtered = applyDarkModeFilter(color);
+    expect(applyDarkModeFilter(removeDarkModeFilter(filtered))).toBe(filtered);
+  });
+});
+
+describe("rgbToHex", () => {
+  describe("basic RGB conversion", () => {
+    it("converts black (0,0,0)", () => {
+      expect(rgbToHex(0, 0, 0)).toBe("#000000");
+    });
+
+    it("converts white (255,255,255)", () => {
+      expect(rgbToHex(255, 255, 255)).toBe("#ffffff");
+    });
+
+    it("converts red (255,0,0)", () => {
+      expect(rgbToHex(255, 0, 0)).toBe("#ff0000");
+    });
+
+    it("converts green (0,255,0)", () => {
+      expect(rgbToHex(0, 255, 0)).toBe("#00ff00");
+    });
+
+    it("converts blue (0,0,255)", () => {
+      expect(rgbToHex(0, 0, 255)).toBe("#0000ff");
+    });
+
+    it("converts arbitrary color", () => {
+      expect(rgbToHex(30, 30, 30)).toBe("#1e1e1e");
+    });
+  });
+
+  describe("leading zeros preservation", () => {
+    it("preserves leading zeros for low values", () => {
+      expect(rgbToHex(0, 0, 1)).toBe("#000001");
+      expect(rgbToHex(0, 1, 0)).toBe("#000100");
+      expect(rgbToHex(1, 0, 0)).toBe("#010000");
+    });
+
+    it("preserves zeros for single-digit hex values", () => {
+      expect(rgbToHex(15, 15, 15)).toBe("#0f0f0f");
+    });
+  });
+
+  describe("alpha handling", () => {
+    it("omits alpha when undefined", () => {
+      expect(rgbToHex(255, 0, 0)).toBe("#ff0000");
+      expect(rgbToHex(255, 0, 0, undefined)).toBe("#ff0000");
+    });
+
+    it("omits alpha when fully opaque (1)", () => {
+      expect(rgbToHex(255, 0, 0, 1)).toBe("#ff0000");
+    });
+
+    it("includes alpha for semi-transparent (0.5)", () => {
+      // 0.5 * 255 = 127.5 -> rounds to 128 = 0x80
+      expect(rgbToHex(255, 0, 0, 0.5)).toBe("#ff000080");
+    });
+
+    it("includes alpha for fully transparent (0)", () => {
+      expect(rgbToHex(255, 0, 0, 0)).toBe("#ff000000");
+    });
+
+    it("includes alpha for near-opaque (0.99)", () => {
+      // 0.99 * 255 = 252.45 -> rounds to 252 = 0xfc
+      expect(rgbToHex(255, 0, 0, 0.99)).toBe("#ff0000fc");
+    });
+
+    it("pads alpha with leading zero when needed", () => {
+      // 0.05 * 255 = 12.75 -> rounds to 13 = 0x0d
+      expect(rgbToHex(255, 0, 0, 0.05)).toBe("#ff00000d");
+    });
+  });
+});
--- a/packages/common/src/colors.ts
+++ b/packages/common/src/colors.ts
@@ -0,0 +1,461 @@
+import tinycolor from "tinycolor2";
+
+import { clamp } from "@excalidraw/math";
+import { degreesToRadians } from "@excalidraw/math";
+
+import type { Degrees } from "@excalidraw/math";
+
+// ---------------------------------------------------------------------------
+// Dark mode color transformation
+// ---------------------------------------------------------------------------
+
+// Browser-only cache to avoid memory leaks on server
+const DARK_MODE_COLORS_CACHE: Map<string, string> | null =
+  typeof window !== "undefined" ? new Map() : null;
+
+const DARK_MODE_FILTER_INVERT_PERCENT = 93;
+const DARK_MODE_FILTER_HUE_ROTATE_DEGREES = 180 as Degrees;
+
+function cssHueRotate(
+  red: number,
+  green: number,
+  blue: number,
+  degrees: Degrees,
+): { r: number; g: number; b: number } {
+  // normalize
+  const r = red / 255;
+  const g = green / 255;
+  const b = blue / 255;
+
+  // Convert degrees to radians
+  const a = degreesToRadians(degrees);
+
+  const c = Math.cos(a);
+  const s = Math.sin(a);
+
+  // rotation matrix
+  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,
+  ];
+
+  // transform
+  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];
+
+  // clamp the values to [0, 1] range and convert back to [0, 255]
+  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),
+  };
+}
+
+const cssInvert = (
+  r: number,
+  g: number,
+  b: number,
+  percent: number,
+): { r: number; g: number; b: number } => {
+  const p = clamp(percent, 0, 100) / 100;
+
+  // Function to invert a single color component
+  const invertComponent = (color: number): number => {
+    // Apply the invert formula
+    const inverted = color * (1 - p) + (255 - color) * p;
+    // Round to the nearest integer and clamp to [0, 255]
+    return Math.round(clamp(inverted, 0, 255));
+  };
+
+  // Calculate the inverted RGB components
+  const invertedR = invertComponent(r);
+  const invertedG = invertComponent(g);
+  const invertedB = invertComponent(b);
+
+  return { r: invertedR, g: invertedG, b: invertedB };
+};
+
+export const applyDarkModeFilter = (color: string, enable = true): string => {
+  if (!enable) {
+    return color;
+  }
+
+  const cached = DARK_MODE_COLORS_CACHE?.get(color);
+  if (cached) {
+    return cached;
+  }
+
+  const tc = tinycolor(color);
+  const alpha = tc.getAlpha();
+
+  // order of operations matters
+  // (corresponds to "filter: invert(invertPercent) hue-rotate(hueDegrees)" in css)
+  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 = rgbToHex(rotated.r, rotated.g, rotated.b, alpha);
+
+  if (DARK_MODE_COLORS_CACHE) {
+    DARK_MODE_COLORS_CACHE.set(color, result);
+  }
+
+  return result;
+};
+
+const _reverseDarkModeInvert = (
+  r: number,
+  g: number,
+  b: number,
+): { r: number; g: number; b: number } => {
+  const p = DARK_MODE_FILTER_INVERT_PERCENT / 100;
+  const denominator = 1 - 2 * p;
+  const restore = (color: number) =>
+    Math.round(clamp((color - 255 * p) / denominator, 0, 255));
+
+  return {
+    r: restore(r),
+    g: restore(g),
+    b: restore(b),
+  };
+};
+
+export const removeDarkModeFilter = (color: string): string => {
+  const tc = tinycolor(color);
+  const alpha = tc.getAlpha();
+  const rgb = tc.toRgb();
+
+  // 180deg hue rotation is its own inverse, so undo it before the inversion.
+  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 rgbToHex(restored.r, restored.g, restored.b, alpha);
+};
+
+// ---------------------------------------------------------------------------
+// Color palette
+// ---------------------------------------------------------------------------
+
+// FIXME can't put to utils.ts rn because of circular dependency
+const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
+  source: R,
+  keys: K,
+) => {
+  return keys.reduce((acc, key: K[number]) => {
+    if (key in source) {
+      acc[key] = source[key];
+    }
+    return acc;
+  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
+};
+
+export type ColorTuple = readonly [string, string, string, string, string];
+
+// used general type instead of specific type (ColorPalette) to support custom colors
+export type ColorPaletteCustom = { [key: string]: ColorTuple | string };
+export type ColorShadesIndexes = [number, number, number, number, number];
+
+export const MAX_CUSTOM_COLORS_USED_IN_CANVAS = 5;
+export const COLORS_PER_ROW = 5;
+
+export const DEFAULT_CHART_COLOR_INDEX = 4;
+
+export const DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
+export const DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
+
+export const COLOR_PALETTE = {
+  transparent: "transparent",
+  black: "#1e1e1e",
+  white: "#ffffff",
+  // 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"],
+} as const;
+
+export type ColorPalette = typeof COLOR_PALETTE;
+export type ColorPickerColor = keyof typeof COLOR_PALETTE;
+
+const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
+  "cyan",
+  "blue",
+  "violet",
+  "grape",
+  "pink",
+  "green",
+  "teal",
+  "yellow",
+  "orange",
+  "red",
+]);
+
+// quick picks defaults
+// -----------------------------------------------------------------------------
+
+/** number of slots in the color-picker top-picks strip — the strip layout is
+ * sized for exactly this many swatches, and pick customization (replace /
+ * reorder) preserves it */
+export const COLOR_TOP_PICKS_SLOTS = 5;
+
+// ORDER matters for positioning in quick picker
+export const DEFAULT_ELEMENT_STROKE_PICKS = [
+  COLOR_PALETTE.black,
+  COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+  COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+  COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
+] as ColorTuple;
+
+// ORDER matters for positioning in quick picker
+export const DEFAULT_ELEMENT_BACKGROUND_PICKS = [
+  COLOR_PALETTE.transparent,
+  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],
+] as ColorTuple;
+
+// ORDER matters for positioning in quick picker.
+// Same as element background picks, with `transparent` (a no-op fill for the
+// bucket tool) swapped for white.
+export const 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],
+] as ColorTuple;
+
+// sticky notes are their own color domain (own defaults, own picks)
+export const DEFAULT_STICKY_NOTE_BG = "#ffdf6b";
+
+export const STICKY_NOTE_STROKE_PICKS: ColorTuple =
+  DEFAULT_ELEMENT_STROKE_PICKS;
+
+// ORDER matters for positioning in quick picker. Classic note colors; the
+// first one is `DEFAULT_STICKY_NOTE_BG`. Never transparent.
+export const STICKY_NOTE_BACKGROUND_PICKS = [
+  DEFAULT_STICKY_NOTE_BG,
+  COLOR_PALETTE.pink[1],
+  COLOR_PALETTE.green[1],
+  COLOR_PALETTE.blue[1],
+  COLOR_PALETTE.orange[1],
+] as ColorTuple;
+
+// ORDER matters for positioning in quick picker
+export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
+  COLOR_PALETTE.white,
+  // radix slate2
+  "#f8f9fa",
+  // radix blue2
+  "#f5faff",
+  // radix yellow2
+  "#fffce8",
+  // radix bronze2
+  "#fdf8f6",
+] as ColorTuple;
+
+// palette defaults
+// -----------------------------------------------------------------------------
+
+export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
+  // 1st row
+  transparent: COLOR_PALETTE.transparent,
+  white: COLOR_PALETTE.white,
+  gray: COLOR_PALETTE.gray,
+  black: COLOR_PALETTE.black,
+  bronze: COLOR_PALETTE.bronze,
+  // rest
+  ...COMMON_ELEMENT_SHADES,
+} as const;
+
+// ORDER matters for positioning in pallete (5x3 grid)s
+export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
+  transparent: COLOR_PALETTE.transparent,
+  white: COLOR_PALETTE.white,
+  gray: COLOR_PALETTE.gray,
+  black: COLOR_PALETTE.black,
+  bronze: COLOR_PALETTE.bronze,
+
+  ...COMMON_ELEMENT_SHADES,
+} as const;
+
+// color palette helpers
+// -----------------------------------------------------------------------------
+
+// !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!!
+export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) => [
+  // 2nd row
+  COLOR_PALETTE.cyan[index],
+  COLOR_PALETTE.blue[index],
+  COLOR_PALETTE.violet[index],
+  COLOR_PALETTE.grape[index],
+  COLOR_PALETTE.pink[index],
+
+  // 3rd row
+  COLOR_PALETTE.green[index],
+  COLOR_PALETTE.teal[index],
+  COLOR_PALETTE.yellow[index],
+  COLOR_PALETTE.orange[index],
+  COLOR_PALETTE.red[index],
+];
+
+// -----------------------------------------------------------------------------
+// other helpers
+// -----------------------------------------------------------------------------
+
+export const rgbToHex = (r: number, g: number, b: number, a?: number) => {
+  // (1 << 24) adds 0x1000000 to ensure the hex string is always 7 chars,
+  // then slice(1) removes the leading "1" to get exactly 6 hex digits
+  // e.g. rgb(0,0,0) -> 0x1000000 -> "1000000" -> "000000"
+  const hex6 = `#${((1 << 24) + (r << 16) + (g << 8) + b)
+    .toString(16)
+    .slice(1)}`;
+  if (a !== undefined && a < 1) {
+    // convert alpha from 0-1 float to 0-255 int, then to 2-digit hex
+    // e.g. 0.5 -> 128 -> "80"
+    const alphaHex = Math.round(a * 255)
+      .toString(16)
+      .padStart(2, "0");
+    return `${hex6}${alphaHex}`;
+  }
+  return hex6;
+};
+
+/**
+ * @returns the color with its alpha replaced by `alpha` (as #RRGGBBAA), or the
+ *  input unchanged if it's not a valid color
+ */
+export const setColorAlpha = (color: string, alpha: number): string => {
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    return color;
+  }
+  const { r, g, b } = tc.toRgb();
+  return rgbToHex(r, g, b, alpha);
+};
+
+/**
+ * @returns #RRGGBB or #RRGGBBAA based on color containing non-opaque alpha,
+ *  null if not valid color
+ */
+export const colorToHex = (color: string): string | null => {
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    return null;
+  }
+  const { r, g, b, a } = tc.toRgb();
+  return rgbToHex(r, g, b, a);
+};
+
+export const isTransparent = (color: string) => {
+  return tinycolor(color).getAlpha() === 0;
+};
+
+/**
+ * Whether the color is fully opaque (alpha exactly 1).
+ *
+ * NOT the negation of `isTransparent`, which is true only at alpha 0 — a
+ * partial-alpha color (`#RRGGBBAA`, `rgba(…, 0.5)`) is neither transparent
+ * (it renders) nor opaque (what's beneath shows through it).
+ */
+export const isOpaqueColor = (color: string) => {
+  return tinycolor(color).getAlpha() === 1;
+};
+
+// -----------------------------------------------------------------------------
+// color contract helpers
+// -----------------------------------------------------------------------------
+
+export const COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
+
+const calculateContrast = (r: number, g: number, b: number): number => {
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq;
+};
+
+// YIQ algo, inspiration from https://stackoverflow.com/a/11868398
+export const isColorDark = (color: string, threshold = 160): boolean => {
+  // no color ("") -> assume it default to black
+  if (!color) {
+    return true;
+  }
+
+  if (isTransparent(color)) {
+    return false;
+  }
+
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    // invalid color -> assume it defaults to black
+    return true;
+  }
+
+  const { r, g, b } = tc.toRgb();
+  return calculateContrast(r, g, b) < threshold;
+};
+
+// -----------------------------------------------------------------------------
+// normalization
+// -----------------------------------------------------------------------------
+
+/**
+ * tries to keep the input color as-is if it's valid, making minimal adjustments
+ * (trimming whitespace or adding `#` to hex colors)
+ */
+export const normalizeInputColor = (color: string): string | null => {
+  color = color.trim();
+  if (isTransparent(color)) {
+    return color;
+  }
+
+  const tc = tinycolor(color);
+  if (tc.isValid()) {
+    // testing for `#` first fixes a bug on Electron (more specfically, an
+    // Obsidian popout window), where a hex color without `#` is considered valid
+    if (["hex", "hex8"].includes(tc.getFormat()) && !color.startsWith("#")) {
+      return `#${color}`;
+    }
+    return color;
+  }
+
+  return null;
+};
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -0,0 +1,606 @@
+import type {
+  ExcalidrawElement,
+  FontFamilyValues,
+} from "@excalidraw/element/types";
+import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
+
+import { COLOR_PALETTE } from "./colors";
+
+export { DEFAULT_STICKY_NOTE_BG } from "./colors";
+
+export const supportsResizeObserver =
+  typeof window !== "undefined" && "ResizeObserver" in window;
+
+export const APP_NAME = "Excalidraw";
+
+// distance when creating text before it's considered `autoResize: false`
+// we're using higher threshold so that clicks that end up being drags
+// don't unintentionally create text elements that are wrapped to a few chars
+// (happens a lot with fast clicks with the text tool)
+export const TEXT_AUTOWRAP_THRESHOLD = 36; // px
+export const DRAGGING_THRESHOLD = 10; // px
+export const MINIMUM_ARROW_SIZE = 20; // px
+export const LINE_CONFIRM_THRESHOLD = 8; // px
+export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
+export const ELEMENT_TRANSLATE_AMOUNT = 1;
+export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
+export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
+export const DEFAULT_LASER_COLOR = "red";
+export const CURSOR_TYPE = {
+  TEXT: "text",
+  CROSSHAIR: "crosshair",
+  GRABBING: "grabbing",
+  GRAB: "grab",
+  POINTER: "pointer",
+  MOVE: "move",
+  AUTO: "",
+};
+export const POINTER_BUTTON = {
+  MAIN: 0,
+  WHEEL: 1,
+  SECONDARY: 2,
+  TOUCH: -1,
+  ERASER: 5,
+} as const;
+
+export const POINTER_EVENTS = {
+  enabled: "all",
+  disabled: "none",
+  // asserted as any so it can be freely assigned to React Element
+  // "pointerEnvets" CSS prop
+  inheritFromUI: "var(--ui-pointerEvents)" as any,
+} as const;
+
+export enum EVENT {
+  COPY = "copy",
+  PASTE = "paste",
+  CUT = "cut",
+  KEYDOWN = "keydown",
+  KEYUP = "keyup",
+  MOUSE_MOVE = "mousemove",
+  RESIZE = "resize",
+  UNLOAD = "unload",
+  FOCUS = "focus",
+  BLUR = "blur",
+  DRAG_OVER = "dragover",
+  DROP = "drop",
+  GESTURE_END = "gestureend",
+  BEFORE_UNLOAD = "beforeunload",
+  GESTURE_START = "gesturestart",
+  GESTURE_CHANGE = "gesturechange",
+  POINTER_MOVE = "pointermove",
+  POINTER_DOWN = "pointerdown",
+  POINTER_UP = "pointerup",
+  POINTER_CANCEL = "pointercancel",
+  STATE_CHANGE = "statechange",
+  WHEEL = "wheel",
+  TOUCH_START = "touchstart",
+  TOUCH_END = "touchend",
+  HASHCHANGE = "hashchange",
+  VISIBILITY_CHANGE = "visibilitychange",
+  SCROLL = "scroll",
+  // custom events
+  EXCALIDRAW_LINK = "excalidraw-link",
+  MENU_ITEM_SELECT = "menu.itemSelect",
+  MESSAGE = "message",
+  FULLSCREENCHANGE = "fullscreenchange",
+}
+
+export const YOUTUBE_STATES = {
+  UNSTARTED: -1,
+  ENDED: 0,
+  PLAYING: 1,
+  PAUSED: 2,
+  BUFFERING: 3,
+  CUED: 5,
+} as const;
+
+export const ENV = {
+  TEST: "test",
+  DEVELOPMENT: "development",
+  PRODUCTION: "production",
+};
+
+export const 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",
+  SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
+  FRAME_NAME: "frame-name",
+  DROPDOWN_MENU_EVENT_WRAPPER: "dropdown-menu-event-wrapper",
+};
+
+export const FONT_SIZES = {
+  sm: 16,
+  md: 20,
+  lg: 28,
+  xl: 36,
+} as const;
+
+export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
+export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
+
+/**
+ * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
+ *
+ * Let's think this through and consider:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
+ * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
+ * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
+ */
+export const FONT_FAMILY = {
+  Virgil: 1,
+  Helvetica: 2,
+  Cascadia: 3,
+  // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)
+  Excalifont: 5,
+  Nunito: 6,
+  "Lilita One": 7,
+  "Comic Shanns": 8,
+  "Liberation Sans": 9,
+  Assistant: 10,
+};
+
+// Segoe UI Emoji fails to properly fallback for some glyphs: ∞, ∫, ≠
+// so we need to have generic font fallback before it
+export const SANS_SERIF_GENERIC_FONT = "sans-serif";
+export const MONOSPACE_GENERIC_FONT = "monospace";
+
+export const FONT_FAMILY_GENERIC_FALLBACKS = {
+  [SANS_SERIF_GENERIC_FONT]: 998,
+  [MONOSPACE_GENERIC_FONT]: 999,
+};
+
+export const FONT_FAMILY_FALLBACKS = {
+  [CJK_HAND_DRAWN_FALLBACK_FONT]: 100,
+  ...FONT_FAMILY_GENERIC_FALLBACKS,
+  [WINDOWS_EMOJI_FALLBACK_FONT]: 1000,
+};
+
+export function getGenericFontFamilyFallback(
+  fontFamily: number,
+): keyof typeof FONT_FAMILY_GENERIC_FALLBACKS {
+  switch (fontFamily) {
+    case FONT_FAMILY.Cascadia:
+    case FONT_FAMILY["Comic Shanns"]:
+      return MONOSPACE_GENERIC_FONT;
+
+    default:
+      return SANS_SERIF_GENERIC_FONT;
+  }
+}
+
+export const getFontFamilyFallbacks = (
+  fontFamily: number,
+): Array<keyof typeof FONT_FAMILY_FALLBACKS> => {
+  const genericFallbackFont = getGenericFontFamilyFallback(fontFamily);
+
+  switch (fontFamily) {
+    case FONT_FAMILY.Excalifont:
+      return [
+        CJK_HAND_DRAWN_FALLBACK_FONT,
+        genericFallbackFont,
+        WINDOWS_EMOJI_FALLBACK_FONT,
+      ];
+    default:
+      return [genericFallbackFont, WINDOWS_EMOJI_FALLBACK_FONT];
+  }
+};
+
+export const THEME = {
+  LIGHT: "light",
+  DARK: "dark",
+} as const;
+
+export const DARK_THEME_FILTER = "invert(93%) hue-rotate(180deg)";
+
+export const FRAME_STYLE = {
+  strokeColor: "#bbb" as ExcalidrawElement["strokeColor"],
+  strokeWidth: 2 as ExcalidrawElement["strokeWidth"],
+  strokeStyle: "solid" as ExcalidrawElement["strokeStyle"],
+  fillStyle: "solid" as ExcalidrawElement["fillStyle"],
+  roughness: 0 as ExcalidrawElement["roughness"],
+  roundness: null as ExcalidrawElement["roundness"],
+  backgroundColor: "transparent" as ExcalidrawElement["backgroundColor"],
+  radius: 8,
+  nameOffsetY: 3,
+  nameColorLightTheme: "#999999",
+  nameColorDarkTheme: "#7a7a7a",
+  nameFontSize: 14,
+  nameLineHeight: 1.25,
+};
+
+export const MIN_FONT_SIZE = 1;
+export const DEFAULT_FONT_SIZE = 20;
+export const STICKY_NOTE_MIN_FONT_SIZE = 16;
+export const STICKY_NOTE_MAX_FONT_SIZE = 512;
+export const STICKY_NOTE_FALLBACK_FONT_SIZE = 28;
+export const STICKY_NOTE_FONT_STEP = 2;
+export const STICKY_NOTE_PADDING = 16;
+/**
+ * The creation-date footer: a 20px text row under the label body plus a 12px
+ * gap above it, inside the note's bottom padding. Reserved for every note —
+ * also when `created` is unknown — so geometry never depends on data
+ * availability. The label is chosen by width bucket, never measured, so
+ * painting stays measurement-free (the server has no text measurer):
+ * `minBodyWidthForYear` is the worst case ("30 May 2026") in the system sans
+ * stack at 12px, with margin for wider fallbacks such as DejaVu Sans.
+ */
+/**
+ * The creation-date footer of a sticky note. The label body ends `height`
+ * above the note's bottom padding, and the date's baseline sits
+ * `baselineFromBottom` above the note's bottom edge — so the 12px glyphs
+ * (~9px above the baseline, ~3px below) end up roughly 11px from the edge
+ * with a ~13px gap to the label body above them.
+ */
+export const STICKY_NOTE_FOOTER = {
+  height: 20,
+  fontSize: 12,
+  fontFamily: "Helvetica, Arial, sans-serif",
+  baselineFromBottom: 14,
+  opacity: 1,
+  minBodyWidthForYear: 80,
+} as const;
+/**
+ * outer height → label body height: top + bottom padding + footer. The body
+ * is what the label is fitted into; a middle-aligned label is still centered
+ * in the whole padded note when it fits (see `computeBoundTextPosition`).
+ */
+export const STICKY_NOTE_BODY_INSET_Y =
+  STICKY_NOTE_PADDING * 2 + STICKY_NOTE_FOOTER.height;
+export const DEFAULT_STICKY_NOTE_SIZE = 250;
+// floor for a finalized note's width and base height; the UI floor is font-aware
+// on top of it (see `getStickyNoteMinSize`)
+export const STICKY_NOTE_MIN_SIZE = 75;
+export const STICKY_NOTE_SHADOW_OFFSET = 3;
+export const STICKY_NOTE_SHADOW_OPACITY = 0.16;
+export const STICKY_NOTE_EDGE_SHADOW_WIDTH = 0.5;
+export const STICKY_NOTE_EDGE_SHADOW_OPACITY = 0.08;
+export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Excalifont;
+export const DEFAULT_TEXT_ALIGN = "left";
+export const DEFAULT_VERTICAL_ALIGN = "top";
+export const DEFAULT_VERSION = "{version}";
+export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
+
+export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
+// a small epsilon to make side resizing always take precedence
+// (avoids an increase in renders and changes to tests)
+export const EPSILON = 0.00001;
+export const DEFAULT_COLLISION_THRESHOLD =
+  2 * SIDE_RESIZING_THRESHOLD - EPSILON;
+
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
+// keep this in sync with CSS
+export const COLOR_VOICE_CALL = "#a2f1a6";
+
+export const CANVAS_ONLY_ACTIONS = ["selectAll"];
+
+export const DEFAULT_GRID_SIZE = 20;
+export const DEFAULT_GRID_STEP = 5;
+
+export const IMAGE_MIME_TYPES = {
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+  avif: "image/avif",
+  jfif: "image/jfif",
+} as const;
+
+export const 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",
+} as const;
+
+export const MIME_TYPES = {
+  ...STRING_MIME_TYPES,
+  // image-encoded excalidraw data
+  "excalidraw.svg": "image/svg+xml",
+  "excalidraw.png": "image/png",
+  // binary
+  binary: "application/octet-stream",
+  // image
+  ...IMAGE_MIME_TYPES,
+} as const;
+
+export const ALLOWED_PASTE_MIME_TYPES = [
+  MIME_TYPES.text,
+  MIME_TYPES.html,
+  ...Object.values(IMAGE_MIME_TYPES),
+] as const;
+
+export const EXPORT_IMAGE_TYPES = {
+  png: "png",
+  svg: "svg",
+  clipboard: "clipboard",
+} as const;
+
+export const EXPORT_DATA_TYPES = {
+  excalidraw: "excalidraw",
+  excalidrawClipboard: "excalidraw/clipboard",
+  excalidrawLibrary: "excalidrawlib",
+  excalidrawClipboardWithAPI: "excalidraw-api/clipboard",
+} as const;
+
+export const getExportSource = () =>
+  window.EXCALIDRAW_EXPORT_SOURCE || window.location.origin;
+
+// time in milliseconds
+export const IMAGE_RENDER_TIMEOUT = 500;
+export const TAP_TWICE_TIMEOUT = 300;
+export const TOUCH_CTX_MENU_TIMEOUT = 500;
+export const TITLE_TIMEOUT = 10000;
+export const VERSION_TIMEOUT = 30000;
+export const SCROLL_TIMEOUT = 100;
+export const ZOOM_STEP = 0.1;
+export const MIN_ZOOM = 0.1;
+export const MAX_ZOOM = 30;
+export const HYPERLINK_TOOLTIP_DELAY = 300;
+
+// Report a user inactive after IDLE_THRESHOLD milliseconds
+export const IDLE_THRESHOLD = 60_000;
+// Report a user active each ACTIVE_THRESHOLD milliseconds
+export const ACTIVE_THRESHOLD = 3_000;
+
+export const URL_QUERY_KEYS = {
+  addLibrary: "addLibrary",
+} as const;
+
+export const URL_HASH_KEYS = {
+  addLibrary: "addLibrary",
+} as const;
+
+export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
+  canvasActions: {
+    changeViewBackgroundColor: true,
+    clearCanvas: true,
+    export: { saveFileToDisk: true },
+    loadScene: true,
+    saveToActiveFile: true,
+    toggleTheme: null,
+    saveAsImage: true,
+  },
+  tools: {
+    image: true,
+  },
+};
+
+export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
+
+export const EXPORT_SCALES = [1, 2, 3];
+export const DEFAULT_EXPORT_PADDING = 10; // px
+
+export const DEFAULT_IMAGE_OPTIONS: AppProps["imageOptions"] = {
+  maxWidthOrHeight: 1440,
+  maxFileSizeBytes: 4 * 1024 * 1024,
+};
+
+export const SVG_NS = "http://www.w3.org/2000/svg";
+export const 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">
+`;
+
+export const ENCRYPTION_KEY_BITS = 128;
+
+export const VERSIONS = {
+  excalidraw: 2,
+  excalidrawLibrary: 2,
+} as const;
+
+export const BOUND_TEXT_PADDING = 5;
+export const ARROW_LABEL_WIDTH_FRACTION = 0.7;
+export const ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO = 11;
+
+export const VERTICAL_ALIGN = {
+  TOP: "top",
+  MIDDLE: "middle",
+  BOTTOM: "bottom",
+};
+
+export const TEXT_ALIGN = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right",
+};
+
+export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
+export const ELEMENT_PENDING_DRAW_SHAPE_OPACITY = 70;
+
+// Radius represented as 25% of element's largest side (width/height).
+// Used for LEGACY and PROPORTIONAL_RADIUS algorithms, or when the element is
+// below the cutoff size.
+export const DEFAULT_PROPORTIONAL_RADIUS = 0.25;
+// Fixed radius for the ADAPTIVE_RADIUS algorithm. In pixels.
+export const DEFAULT_ADAPTIVE_RADIUS = 32;
+// roundness type (algorithm)
+export const ROUNDNESS = {
+  // Used for legacy rounding (rectangles), which currently works the same
+  // as PROPORTIONAL_RADIUS, but we need to differentiate for UI purposes and
+  // forwards-compat.
+  LEGACY: 1,
+
+  // Used for linear elements & diamonds
+  PROPORTIONAL_RADIUS: 2,
+
+  // Current default algorithm for rectangles, using fixed pixel radius.
+  // It's working similarly to a regular border-radius, but attemps to make
+  // radius visually similar across differnt element sizes, especially
+  // very large and very small elements.
+  //
+  // NOTE right now we don't allow configuration and use a constant radius
+  // (see DEFAULT_ADAPTIVE_RADIUS constant)
+  ADAPTIVE_RADIUS: 3,
+} as const;
+
+export const ROUGHNESS = {
+  architect: 0,
+  artist: 1,
+  cartoonist: 2,
+} as const;
+
+export type StrokeWidthKey = "thin" | "medium" | "bold";
+
+export const STROKE_WIDTH_KEYS: readonly StrokeWidthKey[] = [
+  "thin",
+  "medium",
+  "bold",
+];
+
+export const STROKE_WIDTH: Readonly<
+  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
+> = {
+  thin: 1,
+  medium: 2,
+  bold: 4,
+  extraBold: 8, // unused (may be introduced in the future)
+};
+
+// freedraw schema 2.0 uses thinner stroke, but to maintain backwards and
+// forwards compatibility, instead of changing the shape renderer, we scale
+// the stroke width by 1/2 (previous, thin was 1, medium 2 etc.)
+//
+// note that in the UI, STROKE_WIDTH.thin == FREEDRAW_STROKE_WIDTH.thin still
+export const FREEDRAW_STROKE_WIDTH: Readonly<
+  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
+> = {
+  thin: 0.5,
+  medium: 1,
+  bold: 2,
+  extraBold: 4, // legacy (may be used again in the future)
+};
+
+export const getStrokeWidthByKey = (
+  elementType: ExcalidrawElement["type"],
+  strokeWidthKey: StrokeWidthKey,
+): ExcalidrawElement["strokeWidth"] => {
+  return elementType === "freedraw"
+    ? FREEDRAW_STROKE_WIDTH[strokeWidthKey]
+    : STROKE_WIDTH[strokeWidthKey];
+};
+
+export const DEFAULT_ELEMENT_STROKE_WIDTH_KEY: StrokeWidthKey = "medium";
+
+export const DEFAULT_ELEMENT_PROPS: {
+  strokeColor: ExcalidrawElement["strokeColor"];
+  backgroundColor: ExcalidrawElement["backgroundColor"];
+  fillStyle: ExcalidrawElement["fillStyle"];
+  strokeWidth: ExcalidrawElement["strokeWidth"];
+  strokeStyle: ExcalidrawElement["strokeStyle"];
+  roughness: ExcalidrawElement["roughness"];
+  opacity: ExcalidrawElement["opacity"];
+  locked: ExcalidrawElement["locked"];
+} = {
+  strokeColor: COLOR_PALETTE.black,
+  backgroundColor: COLOR_PALETTE.transparent,
+  fillStyle: "solid",
+  strokeWidth: STROKE_WIDTH[DEFAULT_ELEMENT_STROKE_WIDTH_KEY],
+  strokeStyle: "solid",
+  roughness: ROUGHNESS.artist,
+  opacity: 100,
+  locked: false,
+};
+
+export const LIBRARY_SIDEBAR_TAB = "library";
+export const CANVAS_SEARCH_TAB = "search";
+
+export const DEFAULT_SIDEBAR = {
+  name: "default",
+  defaultTab: LIBRARY_SIDEBAR_TAB,
+} as const;
+
+export const LIBRARY_DISABLED_TYPES = new Set([
+  "iframe",
+  "embeddable",
+  "image",
+] as const);
+
+// use these constants to easily identify reference sites
+export const TOOL_TYPE = {
+  selection: "selection",
+  lasso: "lasso",
+  rectangle: "rectangle",
+  diamond: "diamond",
+  ellipse: "ellipse",
+  arrow: "arrow",
+  line: "line",
+  freedraw: "freedraw",
+  text: "text",
+  image: "image",
+  eraser: "eraser",
+  hand: "hand",
+  frame: "frame",
+  magicframe: "magicframe",
+  stickynote: "stickynote",
+  embeddable: "embeddable",
+  laser: "laser",
+  autoshape: "autoshape",
+  bucketfill: "bucketfill",
+} as const;
+
+export const EDITOR_LS_KEYS = {
+  OAI_API_KEY: "excalidraw-oai-api-key",
+  // legacy naming (non)scheme
+  MERMAID_TO_EXCALIDRAW: "mermaid-to-excalidraw",
+  PUBLISH_LIBRARY: "publish-library-data",
+} as const;
+
+/**
+ * not translated as this is used only in public, stateless API as default value
+ * where filename is optional and we can't retrieve name from app state
+ */
+export const DEFAULT_FILENAME = "Untitled";
+
+export const STATS_PANELS = { generalStats: 1, elementProperties: 2 } as const;
+
+export const MIN_WIDTH_OR_HEIGHT = 1;
+
+export const ARROW_TYPE: { [T in AppState["currentItemArrowType"]]: T } = {
+  sharp: "sharp",
+  round: "round",
+  elbow: "elbow",
+};
+
+export const DEFAULT_REDUCED_GLOBAL_ALPHA = 0.3;
+export const ELEMENT_LINK_KEY = "element";
+
+/** used in tests */
+export const ORIG_ID = Symbol.for("__test__originalId__");
+
+export enum UserIdleState {
+  ACTIVE = "active",
+  AWAY = "away",
+  IDLE = "idle",
+}
+
+/**
+ * distance at which we merge points instead of adding a new merge-point
+ * when converting a line to a polygon (merge currently means overlaping
+ * the start and end points)
+ */
+export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
+
+export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
+
+export const BIND_MODE_TIMEOUT = 700; // ms
+
+// glass background for mobile action buttons
+export const MOBILE_ACTION_BUTTON_BG = {
+  background: "var(--mobile-action-button-bg)",
+} as const;
+
+export const DEFAULT_STROKE_STREAMLINE = 0.5;
+export const DEFAULT_STROKE_STREAMLINE_PRECISE = 0.2;
--- a/packages/common/src/editorInterface.ts
+++ b/packages/common/src/editorInterface.ts
@@ -0,0 +1,222 @@
+export type StylesPanelMode = "compact" | "full" | "mobile";
+
+export type EditorInterface = Readonly<{
+  formFactor: "phone" | "tablet" | "desktop";
+  desktopUIMode: "compact" | "full";
+  userAgent: Readonly<{
+    isMobileDevice: boolean;
+    platform: "ios" | "android" | "other" | "unknown";
+  }>;
+  isTouchScreen: boolean;
+  canFitSidebar: boolean;
+  isLandscape: boolean;
+}>;
+
+// storage key
+const DESKTOP_UI_MODE_STORAGE_KEY = "excalidraw.desktopUIMode";
+
+// breakpoints
+export const MQ_MAX_MOBILE = 599;
+
+export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
+export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
+
+// tablets
+export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
+export const MQ_MAX_TABLET = 1180; // ipad air
+
+// desktop/laptop (NOTE: not used for form factor detection)
+export const MQ_MIN_WIDTH_DESKTOP = 1440;
+
+// sidebar
+export const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
+
+// -----------------------------------------------------------------------------
+
+// user agent detections
+export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+export const isWindows = /^Win/.test(navigator.platform);
+export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
+export const isFirefox =
+  typeof window !== "undefined" &&
+  "netscape" in window &&
+  navigator.userAgent.indexOf("rv:") > 1 &&
+  navigator.userAgent.indexOf("Gecko") > 1;
+export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
+export const isSafari =
+  !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
+export const isIOS =
+  /iPad|iPhone/i.test(navigator.platform) ||
+  // iPadOS 13+
+  (navigator.userAgent.includes("Mac") && "ontouchend" in document);
+// keeping function so it can be mocked in test
+export const isBrave = () =>
+  (navigator as any).brave?.isBrave?.name === "isBrave";
+
+// export const isMobile =
+//   isIOS ||
+//   /android|webos|ipod|blackberry|iemobile|opera mini/i.test(
+//     navigator.userAgent,
+//   ) ||
+//   /android|ios|ipod|blackberry|windows phone/i.test(navigator.platform);
+
+// utilities
+export const isMobileBreakpoint = (width: number, height: number) => {
+  return (
+    width <= MQ_MAX_MOBILE ||
+    (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
+  );
+};
+
+export const isTabletBreakpoint = (
+  editorWidth: number,
+  editorHeight: number,
+) => {
+  const minSide = Math.min(editorWidth, editorHeight);
+  const maxSide = Math.max(editorWidth, editorHeight);
+
+  return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
+};
+
+const isMobileOrTablet = (): boolean => {
+  const ua = navigator.userAgent || "";
+  const platform = navigator.platform || "";
+  const uaData = (navigator as any).userAgentData as
+    | { mobile?: boolean; platform?: string }
+    | undefined;
+
+  // --- 1) chromium: prefer ua client hints -------------------------------
+  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;
+    }
+  }
+
+  // --- 2) ios (includes ipad) --------------------------------------------
+  if (isIOS) {
+    return true;
+  }
+
+  // --- 3) android legacy ua fallback -------------------------------------
+  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;
+    }
+  }
+
+  // --- 4) last resort desktop exclusion ----------------------------------
+  const looksDesktopPlatform =
+    /Win|Linux|CrOS|Mac/.test(platform) ||
+    /Windows NT|X11|CrOS|Macintosh/.test(ua);
+  if (looksDesktopPlatform) {
+    return false;
+  }
+  return false;
+};
+
+export const getFormFactor = (
+  editorWidth: number,
+  editorHeight: number,
+): EditorInterface["formFactor"] => {
+  if (isMobileBreakpoint(editorWidth, editorHeight)) {
+    return "phone";
+  }
+
+  if (isTabletBreakpoint(editorWidth, editorHeight)) {
+    return "tablet";
+  }
+
+  return "desktop";
+};
+
+export const deriveStylesPanelMode = (
+  editorInterface: EditorInterface,
+): StylesPanelMode => {
+  if (editorInterface.formFactor === "phone") {
+    return "mobile";
+  }
+
+  if (editorInterface.formFactor === "tablet") {
+    return "compact";
+  }
+
+  return editorInterface.desktopUIMode;
+};
+
+export const createUserAgentDescriptor = (
+  userAgentString: string,
+): EditorInterface["userAgent"] => {
+  const normalizedUA = userAgentString ?? "";
+  let platform: EditorInterface["userAgent"]["platform"] = "unknown";
+
+  if (isIOS) {
+    platform = "ios";
+  } else if (isAndroid) {
+    platform = "android";
+  } else if (normalizedUA) {
+    platform = "other";
+  }
+
+  return {
+    isMobileDevice: isMobileOrTablet(),
+    platform,
+  } as const;
+};
+
+export const 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 as EditorInterface["desktopUIMode"];
+    }
+  } catch (error) {
+    // ignore storage access issues (e.g., Safari private mode)
+  }
+
+  return null;
+};
+
+const persistDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(DESKTOP_UI_MODE_STORAGE_KEY, mode);
+  } catch (error) {
+    // ignore storage access issues (e.g., Safari private mode)
+  }
+};
+
+export const setDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
+  if (mode !== "compact" && mode !== "full") {
+    return;
+  }
+
+  persistDesktopUIMode(mode);
+
+  return mode;
+};
--- a/packages/common/src/emitter.ts
+++ b/packages/common/src/emitter.ts
@@ -0,0 +1,51 @@
+import type { UnsubscribeCallback } from "@excalidraw/excalidraw/types";
+
+type Subscriber<T extends any[]> = (...payload: T) => void;
+
+export class Emitter<T extends any[] = []> {
+  public subscribers: Subscriber<T>[] = [];
+
+  /**
+   * Attaches subscriber
+   *
+   * @returns unsubscribe function
+   */
+  on(...handlers: Subscriber<T>[] | Subscriber<T>[][]): UnsubscribeCallback {
+    const _handlers = handlers
+      .flat()
+      .filter((item) => typeof item === "function");
+
+    this.subscribers.push(..._handlers);
+
+    return () => this.off(_handlers);
+  }
+
+  once(...handlers: Subscriber<T>[] | Subscriber<T>[][]): UnsubscribeCallback {
+    const _handlers = handlers
+      .flat()
+      .filter((item) => typeof item === "function");
+
+    _handlers.push(() => detach());
+
+    const detach = this.on(..._handlers);
+    return detach;
+  }
+
+  off(...handlers: Subscriber<T>[] | Subscriber<T>[][]) {
+    const _handlers = handlers.flat();
+    this.subscribers = this.subscribers.filter(
+      (handler) => !_handlers.includes(handler),
+    );
+  }
+
+  trigger(...payload: T) {
+    for (const handler of this.subscribers) {
+      handler(...payload);
+    }
+    return this;
+  }
+
+  clear() {
+    this.subscribers = [];
+  }
+}
--- a/packages/common/src/font-metadata.ts
+++ b/packages/common/src/font-metadata.ts
@@ -0,0 +1,181 @@
+import type {
+  ExcalidrawTextElement,
+  FontFamilyValues,
+} from "@excalidraw/element/types";
+
+import { FONT_FAMILY, FONT_FAMILY_FALLBACKS } from "./constants";
+
+/**
+ * Encapsulates font metrics with additional font metadata.
+ * */
+export interface FontMetadata {
+  /** for head & hhea metrics read the woff2 with https://fontdrop.info/ */
+  metrics: {
+    /** head.unitsPerEm metric */
+    unitsPerEm: 1000 | 1024 | 2048;
+    /** hhea.ascender metric */
+    ascender: number;
+    /** hhea.descender metric */
+    descender: number;
+    /** harcoded unitless line-height, https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971 */
+    lineHeight: number;
+  };
+  /** flag to indicate a deprecated font */
+  deprecated?: true;
+  /**
+   * whether this is a font that users can use (= shown in font picker)
+   */
+  private?: true;
+  /** flag to indiccate a local-only font */
+  local?: true;
+  /** flag to indicate a fallback font */
+  fallback?: true;
+}
+
+export const FONT_METADATA: Record<number, FontMetadata> = {
+  [FONT_FAMILY.Excalifont]: {
+    metrics: {
+      unitsPerEm: 1000,
+      ascender: 886,
+      descender: -374,
+      lineHeight: 1.25,
+    },
+  },
+  [FONT_FAMILY.Nunito]: {
+    metrics: {
+      unitsPerEm: 1000,
+      ascender: 1011,
+      descender: -353,
+      lineHeight: 1.25,
+    },
+  },
+  [FONT_FAMILY["Lilita One"]]: {
+    metrics: {
+      unitsPerEm: 1000,
+      ascender: 923,
+      descender: -220,
+      lineHeight: 1.15,
+    },
+  },
+  [FONT_FAMILY["Comic Shanns"]]: {
+    metrics: {
+      unitsPerEm: 1000,
+      ascender: 750,
+      descender: -250,
+      lineHeight: 1.25,
+    },
+  },
+  [FONT_FAMILY.Virgil]: {
+    metrics: {
+      unitsPerEm: 1000,
+      ascender: 886,
+      descender: -374,
+      lineHeight: 1.25,
+    },
+    deprecated: true,
+  },
+  [FONT_FAMILY.Helvetica]: {
+    metrics: {
+      unitsPerEm: 2048,
+      ascender: 1577,
+      descender: -471,
+      lineHeight: 1.15,
+    },
+    deprecated: true,
+    local: true,
+  },
+  [FONT_FAMILY.Cascadia]: {
+    metrics: {
+      unitsPerEm: 2048,
+      ascender: 1900,
+      descender: -480,
+      lineHeight: 1.2,
+    },
+    deprecated: true,
+  },
+  [FONT_FAMILY["Liberation Sans"]]: {
+    metrics: {
+      unitsPerEm: 2048,
+      ascender: 1854,
+      descender: -434,
+      lineHeight: 1.15,
+    },
+    private: true,
+  },
+  [FONT_FAMILY.Assistant]: {
+    metrics: {
+      unitsPerEm: 2048,
+      ascender: 1021,
+      descender: -287,
+      lineHeight: 1.25,
+    },
+    private: true,
+  },
+  [FONT_FAMILY_FALLBACKS.Xiaolai]: {
+    metrics: {
+      unitsPerEm: 1000,
+      ascender: 880,
+      descender: -144,
+      lineHeight: 1.25,
+    },
+    fallback: true,
+  },
+  [FONT_FAMILY_FALLBACKS["Segoe UI Emoji"]]: {
+    metrics: {
+      // reusing Excalifont metrics
+      unitsPerEm: 1000,
+      ascender: 886,
+      descender: -374,
+      lineHeight: 1.25,
+    },
+    local: true,
+    fallback: true,
+  },
+};
+
+/** Unicode ranges defined by google fonts */
+export const GOOGLE_FONTS_RANGES = {
+  LATIN:
+    "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
+  LATIN_EXT:
+    "U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",
+  CYRILIC_EXT:
+    "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
+  CYRILIC: "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
+  VIETNAMESE:
+    "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",
+};
+
+/** local protocol to skip the local font from registering or inlining */
+export const LOCAL_FONT_PROTOCOL = "local:";
+
+/**
+ * Calculates vertical offset for a text with alphabetic baseline.
+ */
+export const getVerticalOffset = (
+  fontFamily: ExcalidrawTextElement["fontFamily"],
+  fontSize: ExcalidrawTextElement["fontSize"],
+  lineHeightPx: number,
+) => {
+  const { unitsPerEm, ascender, descender } =
+    FONT_METADATA[fontFamily]?.metrics ||
+    FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
+
+  const fontSizeEm = fontSize / unitsPerEm;
+  const lineGap =
+    (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2;
+
+  const verticalOffset = fontSizeEm * ascender + lineGap;
+  return verticalOffset;
+};
+
+/**
+ * Gets line height for a selected family.
+ */
+export const getLineHeight = (fontFamily: FontFamilyValues) => {
+  const { lineHeight } =
+    FONT_METADATA[fontFamily]?.metrics ||
+    FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
+
+  return lineHeight as ExcalidrawTextElement["lineHeight"];
+};
--- a/packages/common/src/index.ts
+++ b/packages/common/src/index.ts
@@ -0,0 +1,17 @@
+export * from "./binary-heap";
+export * from "./bounds";
+export * from "./colors";
+export * from "./constants";
+export * from "./font-metadata";
+export * from "./queue";
+export * from "./keys";
+export * from "./points";
+export * from "./promise-pool";
+export * from "./random";
+export * from "./url";
+export * from "./utils";
+export * from "./emitter";
+export * from "./appEventBus";
+export * from "./editorInterface";
+export * from "./versionedSnapshotStore";
+export { Debug } from "../debug";
--- a/packages/common/src/keys.ts
+++ b/packages/common/src/keys.ts
@@ -0,0 +1,153 @@
+import { isDarwin } from "./editorInterface";
+
+import type { ValueOf } from "./utility-types";
+
+export const CODES = {
+  EQUAL: "Equal",
+  MINUS: "Minus",
+  NUM_ADD: "NumpadAdd",
+  NUM_SUBTRACT: "NumpadSubtract",
+  NUM_ZERO: "Numpad0",
+  BRACKET_RIGHT: "BracketRight",
+  BRACKET_LEFT: "BracketLeft",
+  ONE: "Digit1",
+  TWO: "Digit2",
+  THREE: "Digit3",
+  NINE: "Digit9",
+  QUOTE: "Quote",
+  ZERO: "Digit0",
+  SLASH: "Slash",
+  C: "KeyC",
+  D: "KeyD",
+  H: "KeyH",
+  V: "KeyV",
+  Z: "KeyZ",
+  Y: "KeyY",
+  R: "KeyR",
+  S: "KeyS",
+} as const;
+
+export const KEYS = {
+  ARROW_DOWN: "ArrowDown",
+  ARROW_LEFT: "ArrowLeft",
+  ARROW_RIGHT: "ArrowRight",
+  ARROW_UP: "ArrowUp",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  BACKSPACE: "Backspace",
+  ALT: "Alt",
+  CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",
+  DELETE: "Delete",
+  ENTER: "Enter",
+  ESCAPE: "Escape",
+  QUESTION_MARK: "?",
+  SPACE: " ",
+  TAB: "Tab",
+  CHEVRON_LEFT: "<",
+  CHEVRON_RIGHT: ">",
+  PERIOD: ".",
+  COMMA: ",",
+  SUBTRACT: "-",
+  SLASH: "/",
+
+  A: "a",
+  B: "b",
+  C: "c",
+  D: "d",
+  E: "e",
+  F: "f",
+  G: "g",
+  H: "h",
+  I: "i",
+  L: "l",
+  N: "n",
+  O: "o",
+  P: "p",
+  Q: "q",
+  R: "r",
+  S: "s",
+  T: "t",
+  V: "v",
+  X: "x",
+  Y: "y",
+  Z: "z",
+  K: "k",
+  W: "w",
+
+  0: "0",
+  1: "1",
+  2: "2",
+  3: "3",
+  4: "4",
+  5: "5",
+  6: "6",
+  7: "7",
+  8: "8",
+  9: "9",
+} as const;
+
+export type Key = keyof typeof KEYS;
+
+// defines key code mapping for matching codes as fallback to respective keys on non-latin keyboard layouts
+export const KeyCodeMap = new Map<ValueOf<typeof KEYS>, ValueOf<typeof CODES>>([
+  [KEYS.Z, CODES.Z],
+  [KEYS.Y, CODES.Y],
+]);
+
+export const isLatinChar = (key: string) => /^[a-z]$/.test(key.toLowerCase());
+
+/**
+ * Used to match key events for any keyboard layout, especially on Windows and Linux,
+ * where non-latin character with modified (CMD) is not substituted with latin-based alternative.
+ *
+ * Uses `event.key` when it's latin, otherwise fallbacks to `event.code` (if mapping exists).
+ *
+ * Example of pressing "z" on different layouts, with the chosen key or code highlighted in []:
+ *
+ * Layout                | Code  | Key | Comment
+ * --------------------- | ----- | --- | -------
+ * U.S.                  |  KeyZ  | [z] |
+ * Czech                 |  KeyY  | [z] |
+ * Turkish               |  KeyN  | [z] |
+ * French                |  KeyW  | [z] |
+ * Macedonian            | [KeyZ] |  з  | z with cmd; з is Cyrillic equivalent of z
+ * Russian               | [KeyZ] |  я  | z with cmd
+ * Serbian               | [KeyZ] |  ѕ  | z with cmd
+ * Greek                 | [KeyZ] |  ζ  | z with cmd; also ζ is Greek equivalent of z
+ * Hebrew                | [KeyZ] |  ז  | z with cmd; also ז is Hebrew equivalent of z
+ * Pinyin - Simplified   |  KeyZ  | [z] | due to IME
+ * Cangije - Traditional | [KeyZ] |  重 | z with cmd
+ * Japanese              | [KeyZ] |  つ | z with cmd
+ * 2-Set Korean          | [KeyZ] |  ㅋ | z with cmd
+ *
+ * More details in https://github.com/excalidraw/excalidraw/pull/5944
+ */
+export const matchKey = (
+  event: KeyboardEvent | React.KeyboardEvent<Element>,
+  key: ValueOf<typeof KEYS>,
+): boolean => {
+  // for latin layouts use key
+  if (key === event.key.toLowerCase()) {
+    return true;
+  }
+
+  // non-latin layouts fallback to code
+  const code = KeyCodeMap.get(key);
+  return Boolean(code && !isLatinChar(event.key) && event.code === code);
+};
+
+export const isArrowKey = (key: string) =>
+  key === KEYS.ARROW_LEFT ||
+  key === KEYS.ARROW_RIGHT ||
+  key === KEYS.ARROW_DOWN ||
+  key === KEYS.ARROW_UP;
+
+export const shouldResizeFromCenter = (event: MouseEvent | KeyboardEvent) =>
+  event.altKey;
+
+export const shouldMaintainAspectRatio = (event: MouseEvent | KeyboardEvent) =>
+  event.shiftKey;
+
+export const shouldRotateWithDiscreteAngle = (
+  event: MouseEvent | KeyboardEvent | React.PointerEvent<HTMLCanvasElement>,
+) => event.shiftKey;
--- a/packages/common/src/points.ts
+++ b/packages/common/src/points.ts
@@ -0,0 +1,81 @@
+import {
+  pointFrom,
+  pointFromPair,
+  type GlobalPoint,
+  type LocalPoint,
+} from "@excalidraw/math";
+
+import type { NullableGridSize } from "@excalidraw/excalidraw/types";
+
+export const getSizeFromPoints = (
+  points: readonly (GlobalPoint | LocalPoint)[],
+) => {
+  const xs = points.map((point) => point[0]);
+  const ys = points.map((point) => point[1]);
+  return {
+    width: Math.max(...xs) - Math.min(...xs),
+    height: Math.max(...ys) - Math.min(...ys),
+  };
+};
+
+/** @arg dimension, 0 for rescaling only x, 1 for y */
+export const rescalePoints = <Point extends GlobalPoint | LocalPoint>(
+  dimension: 0 | 1,
+  newSize: number,
+  points: readonly Point[],
+  normalize: boolean,
+): Point[] => {
+  const coordinates = points.map((point) => point[dimension]);
+  const maxCoordinate = Math.max(...coordinates);
+  const minCoordinate = Math.min(...coordinates);
+  const size = maxCoordinate - minCoordinate;
+  const scale = size === 0 ? 1 : newSize / size;
+
+  let nextMinCoordinate = Infinity;
+
+  const scaledPoints = points.map((point): Point => {
+    const newCoordinate = point[dimension] * scale;
+    const newPoint = [...point];
+    newPoint[dimension] = newCoordinate;
+    if (newCoordinate < nextMinCoordinate) {
+      nextMinCoordinate = newCoordinate;
+    }
+    return newPoint as Point;
+  });
+
+  if (!normalize) {
+    return scaledPoints;
+  }
+
+  if (scaledPoints.length === 2) {
+    // we don't translate two-point lines
+    return scaledPoints;
+  }
+
+  const translation = minCoordinate - nextMinCoordinate;
+
+  const nextPoints = scaledPoints.map((scaledPoint) =>
+    pointFromPair<Point>(
+      scaledPoint.map((value, currentDimension) => {
+        return currentDimension === dimension ? value + translation : value;
+      }) as [number, number],
+    ),
+  );
+
+  return nextPoints;
+};
+
+// TODO: Rounding this point causes some shake when free drawing
+export const getGridPoint = (
+  x: number,
+  y: number,
+  gridSize: NullableGridSize,
+): GlobalPoint => {
+  if (gridSize) {
+    return pointFrom<GlobalPoint>(
+      Math.round(x / gridSize) * gridSize,
+      Math.round(y / gridSize) * gridSize,
+    );
+  }
+  return pointFrom<GlobalPoint>(x, y);
+};
--- a/packages/common/src/promise-pool.ts
+++ b/packages/common/src/promise-pool.ts
@@ -0,0 +1,50 @@
+import Pool from "es6-promise-pool";
+
+// extending the missing types
+// relying on the [Index, T] to keep a correct order
+type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
+  addEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => (event: { data: { result: [Index, T] } }) => void;
+  removeEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => void;
+};
+
+export class PromisePool<T> {
+  private readonly pool: TPromisePool<T>;
+  private readonly entries: Record<number, T> = {};
+
+  constructor(
+    source: IterableIterator<Promise<void | readonly [number, T]>>,
+    concurrency: number,
+  ) {
+    this.pool = new Pool(
+      source as unknown as () => void | PromiseLike<[number, T][]>,
+      concurrency,
+    ) as TPromisePool<T>;
+  }
+
+  public all() {
+    const listener = (event: { data: { result: void | [number, T] } }) => {
+      if (event.data.result) {
+        // by default pool does not return the results, so we are gathering them manually
+        // with the correct call order (represented by the index in the tuple)
+        const [index, value] = event.data.result;
+        this.entries[index] = value;
+      }
+    };
+
+    this.pool.addEventListener("fulfilled", listener);
+
+    return this.pool.start().then(() => {
+      setTimeout(() => {
+        this.pool.removeEventListener("fulfilled", listener);
+      });
+
+      return Object.values(this.entries);
+    });
+  }
+}
--- a/packages/common/src/queue.ts
+++ b/packages/common/src/queue.ts
@@ -0,0 +1,48 @@
+import { promiseTry, resolvablePromise } from ".";
+
+import type { ResolvablePromise } from ".";
+
+import type { MaybePromise } from "./utility-types";
+
+type Job<T, TArgs extends unknown[]> = (...args: TArgs) => MaybePromise<T>;
+
+type QueueJob<T, TArgs extends unknown[]> = {
+  jobFactory: Job<T, TArgs>;
+  promise: ResolvablePromise<T>;
+  args: TArgs;
+};
+
+export class Queue {
+  private jobs: QueueJob<any, any[]>[] = [];
+  private running = false;
+
+  private tick() {
+    if (this.running) {
+      return;
+    }
+    const job = this.jobs.shift();
+    if (job) {
+      this.running = true;
+      job.promise.resolve(
+        promiseTry(job.jobFactory, ...job.args).finally(() => {
+          this.running = false;
+          this.tick();
+        }),
+      );
+    } else {
+      this.running = false;
+    }
+  }
+
+  push<TValue, TArgs extends unknown[]>(
+    jobFactory: Job<TValue, TArgs>,
+    ...args: TArgs
+  ): Promise<TValue> {
+    const promise = resolvablePromise<TValue>();
+    this.jobs.push({ jobFactory, promise, args });
+
+    this.tick();
+
+    return promise;
+  }
+}
--- a/packages/common/src/random.ts
+++ b/packages/common/src/random.ts
@@ -0,0 +1,33 @@
+import { nanoid } from "nanoid";
+import { Random } from "roughjs/bin/math";
+
+import { isTestEnv } from "./utils";
+
+let random = new Random(Date.now());
+let testIdBase = 0;
+
+export const randomInteger = () => Math.floor(random.next() * 2 ** 31);
+
+export const reseed = (seed: number) => {
+  random = new Random(seed);
+  testIdBase = 0;
+};
+
+export const randomId = () => (isTestEnv() ? `id${testIdBase++}` : nanoid());
+
+/**
+ * Deterministic PRNG (mulberry32) for a given seed: same seed, same
+ * sequence — used where a render must be stable across frames and clients
+ * (e.g. the sticky note's corner jitter) and roughjs's `Random` is
+ * unsuitable (it degenerates for seed 0). Returns numbers in [0, 1).
+ */
+export const seededRandom = (seed: number) => {
+  let value = seed >>> 0;
+  return () => {
+    value += 0x6d2b79f5;
+    let next = value;
+    next = Math.imul(next ^ (next >>> 15), next | 1);
+    next ^= next + Math.imul(next ^ (next >>> 7), next | 61);
+    return ((next ^ (next >>> 14)) >>> 0) / 4294967296;
+  };
+};
--- a/packages/common/src/url.ts
+++ b/packages/common/src/url.ts
@@ -0,0 +1,37 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
+
+import { escapeDoubleQuotes } from "./utils";
+
+export const normalizeLink = (link: string) => {
+  link = link.trim();
+  if (!link) {
+    return link;
+  }
+  return sanitizeUrl(escapeDoubleQuotes(link));
+};
+
+export const isLocalLink = (link: string | null) => {
+  return !!(link?.includes(location.origin) || link?.startsWith("/"));
+};
+
+/**
+ * Returns URL sanitized and safe for usage in places such as
+ * iframe's src attribute or <a> href attributes.
+ */
+export const toValidURL = (link: string) => {
+  link = normalizeLink(link);
+
+  // make relative links into fully-qualified urls
+  if (link.startsWith("/")) {
+    return `${location.origin}${link}`;
+  }
+
+  try {
+    new URL(link);
+  } catch {
+    // if link does not parse as URL, assume invalid and return blank page
+    return "about:blank";
+  }
+
+  return link;
+};
--- a/packages/common/src/utility-types.ts
+++ b/packages/common/src/utility-types.ts
@@ -0,0 +1,79 @@
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+
+export type ValueOf<T> = T[keyof T];
+
+export type Merge<M, N> = Omit<M, keyof N> & N;
+
+/** utility type to assert that the second type is a subtype of the first type.
+ * Returns the subtype. */
+export type SubtypeOf<Supertype, Subtype extends Supertype> = Subtype;
+
+export type ResolutionType<T extends (...args: any) => any> = T extends (
+  ...args: any
+) => Promise<infer R>
+  ? R
+  : any;
+
+// https://github.com/krzkaczor/ts-essentials
+export type MarkOptional<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;
+
+export type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> &
+  Required<Pick<T, RK>>;
+
+export type MarkNonNullable<T, K extends keyof T> = {
+  [P in K]-?: P extends K ? NonNullable<T[P]> : T[P];
+} & { [P in keyof T]: T[P] };
+
+export type NonOptional<T> = Exclude<T, undefined>;
+
+// -----------------------------------------------------------------------------
+// type getter for interface's callable type
+// src: https://stackoverflow.com/a/58658851/927631
+// -----------------------------------------------------------------------------
+export type SignatureType<T> = T extends (...args: infer R) => any ? R : never;
+export type CallableType<T extends (...args: any[]) => any> = (
+  ...args: SignatureType<T>
+) => ReturnType<T>;
+// --------------------------------------------------------------------------—
+
+// Type for React.forwardRef --- supply only the first generic argument T
+export type ForwardRef<T, P = any> = Parameters<
+  CallableType<React.ForwardRefRenderFunction<T, P>>
+>[1];
+
+export type ExtractSetType<T extends Set<any>> = T extends Set<infer U>
+  ? U
+  : never;
+
+export type SameType<T, U> = T extends U ? (U extends T ? true : false) : false;
+export type Assert<T extends true> = T;
+
+export type NestedKeyOf<T, K = keyof T> = K extends keyof T & (string | number)
+  ? `${K}` | (T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : never)
+  : never;
+
+export type SetLike<T> = Set<T> | T[];
+export type ReadonlySetLike<T> = ReadonlySet<T> | readonly T[];
+
+export type MakeBrand<T extends string> = {
+  /** @private using ~ to sort last in intellisense */
+  [K in `~brand~${T}`]: T;
+};
+
+/** Maybe just promise or already fulfilled one! */
+export type MaybePromise<T> = T | Promise<T>;
+
+// get union of all keys from the union of types
+export type AllPossibleKeys<T> = T extends any ? keyof T : never;
+
+/** Strip all the methods or functions from a type */
+export type DTO<T> = {
+  [K in keyof T as T[K] extends Function ? never : K]: T[K];
+};
+
+export type MapEntry<M extends Map<any, any>> = M extends Map<infer K, infer V>
+  ? [K, V]
+  : never;
--- a/packages/common/src/utils.test.ts
+++ b/packages/common/src/utils.test.ts
@@ -0,0 +1,204 @@
+import {
+  getNearestScrollableContainer,
+  isInputLike,
+  isInteractive,
+  isToolIcon,
+  isTransparent,
+  isWritableElement,
+  mapFind,
+  reduceToCommonValue,
+} from "@excalidraw/common";
+import { vi } from "vitest";
+
+// Import directly to avoid the @excalidraw/common throttleRAF mock from setupTests.ts.
+import { throttleRAF } from "./utils";
+
+type RafCallback = FrameRequestCallback;
+
+describe("@excalidraw/common/utils", () => {
+  describe("cross-document element guards", () => {
+    it("uses constructors from the target element's window", () => {
+      const iframe = document.createElement("iframe");
+      document.body.append(iframe);
+
+      const iframeDocument = iframe.contentDocument!;
+      const iframeWindow = iframe.contentWindow!;
+      const textarea = iframeDocument.createElement("textarea");
+      const button = iframeDocument.createElement("button");
+      const toolIcon = iframeDocument.createElement("div");
+      toolIcon.className = "ToolIcon__icon";
+
+      expect(textarea).not.toBeInstanceOf(HTMLTextAreaElement);
+      expect(textarea).toBeInstanceOf(
+        (iframeWindow as Window & typeof globalThis).HTMLTextAreaElement,
+      );
+      expect(isInputLike(textarea)).toBe(true);
+      expect(isWritableElement(textarea)).toBe(true);
+      expect(isInteractive(button)).toBe(true);
+      expect(isToolIcon(toolIcon)).toBe(true);
+
+      iframeDocument.body.append(textarea);
+      expect(getNearestScrollableContainer(textarea)).toBe(iframeDocument);
+
+      iframe.remove();
+    });
+  });
+
+  describe("isTransparent()", () => {
+    it("should return true when color is rgb transparent", () => {
+      expect(isTransparent("#ff00")).toEqual(true);
+      expect(isTransparent("#fff00000")).toEqual(true);
+      expect(isTransparent("transparent")).toEqual(true);
+    });
+
+    it("should return false when color is not transparent", () => {
+      expect(isTransparent("#ced4da")).toEqual(false);
+    });
+  });
+
+  describe("reduceToCommonValue()", () => {
+    it("should return the common value when all values are the same", () => {
+      expect(reduceToCommonValue([1, 1])).toEqual(1);
+      expect(reduceToCommonValue([0, 0])).toEqual(0);
+      expect(reduceToCommonValue(["a", "a"])).toEqual("a");
+      expect(reduceToCommonValue(new Set([1]))).toEqual(1);
+      expect(reduceToCommonValue([""])).toEqual("");
+      expect(reduceToCommonValue([0])).toEqual(0);
+
+      const o = {};
+      expect(reduceToCommonValue([o, o])).toEqual(o);
+
+      expect(
+        reduceToCommonValue([{ a: 1 }, { a: 1, b: 2 }], (o) => o.a),
+      ).toEqual(1);
+      expect(
+        reduceToCommonValue(new Set([{ a: 1 }, { a: 1, b: 2 }]), (o) => o.a),
+      ).toEqual(1);
+    });
+
+    it("should return `null` when values are different", () => {
+      expect(reduceToCommonValue([1, 2, 3])).toEqual(null);
+      expect(reduceToCommonValue(new Set([1, 2]))).toEqual(null);
+      expect(reduceToCommonValue([{ a: 1 }, { a: 2 }], (o) => o.a)).toEqual(
+        null,
+      );
+    });
+
+    it("should return `null` when some values are nullable", () => {
+      expect(reduceToCommonValue([1, null, 1])).toEqual(null);
+      expect(reduceToCommonValue([null, 1])).toEqual(null);
+      expect(reduceToCommonValue([1, undefined])).toEqual(null);
+      expect(reduceToCommonValue([undefined, 1])).toEqual(null);
+      expect(reduceToCommonValue([null])).toEqual(null);
+      expect(reduceToCommonValue([undefined])).toEqual(null);
+      expect(reduceToCommonValue([])).toEqual(null);
+    });
+  });
+
+  describe("mapFind()", () => {
+    it("should return the first mapped non-null element", () => {
+      {
+        let counter = 0;
+
+        const result = mapFind(["a", "b", "c"], (value) => {
+          counter++;
+          return value === "b" ? 42 : null;
+        });
+        expect(result).toEqual(42);
+        expect(counter).toBe(2);
+      }
+
+      expect(mapFind([1, 2], (value) => value * 0)).toBe(0);
+      expect(mapFind([1, 2], () => false)).toBe(false);
+      expect(mapFind([1, 2], () => "")).toBe("");
+    });
+
+    it("should return undefined if no mapped element is found", () => {
+      expect(mapFind([1, 2], () => undefined)).toBe(undefined);
+      expect(mapFind([1, 2], () => null)).toBe(undefined);
+    });
+  });
+
+  describe("throttleRAF()", () => {
+    let frameCallbacks: Map<number, RafCallback>;
+    let nextFrameId: number;
+
+    const runScheduledFrame = (timestamp = 16) => {
+      const callbacks = [...frameCallbacks.values()];
+      frameCallbacks.clear();
+      callbacks.forEach((callback) => callback(timestamp));
+    };
+
+    beforeEach(() => {
+      frameCallbacks = new Map();
+      nextFrameId = 0;
+
+      vi.spyOn(window, "requestAnimationFrame").mockImplementation(
+        (callback) => {
+          const frameId = ++nextFrameId;
+          frameCallbacks.set(frameId, callback);
+          return frameId;
+        },
+      );
+
+      vi.spyOn(window, "cancelAnimationFrame").mockImplementation((frameId) => {
+        frameCallbacks.delete(frameId);
+      });
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it("should invoke the callback with the last args from the same frame", () => {
+      const fn = vi.fn();
+      const throttled = throttleRAF(fn);
+
+      throttled("first", 1);
+      throttled("second", 2);
+      throttled("last", 3);
+
+      expect(fn).not.toHaveBeenCalled();
+      expect(window.requestAnimationFrame).toHaveBeenCalledTimes(1);
+
+      runScheduledFrame();
+
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledWith("last", 3);
+    });
+
+    it("should flush the pending callback immediately", () => {
+      const fn = vi.fn();
+      const throttled = throttleRAF(fn);
+
+      throttled("first");
+      throttled("last");
+
+      throttled.flush();
+
+      expect(window.cancelAnimationFrame).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledWith("last");
+
+      runScheduledFrame();
+
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+
+    it("should cancel the pending callback", () => {
+      const fn = vi.fn();
+      const throttled = throttleRAF(fn);
+
+      throttled("first");
+      throttled("last");
+
+      throttled.cancel();
+
+      expect(window.cancelAnimationFrame).toHaveBeenCalledTimes(1);
+
+      runScheduledFrame();
+
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+});
--- a/packages/common/src/utils.ts
+++ b/packages/common/src/utils.ts
--- a/packages/common/src/versionedSnapshotStore.ts
+++ b/packages/common/src/versionedSnapshotStore.ts
@@ -0,0 +1,70 @@
+export type VersionedSnapshot<T> = Readonly<{
+  version: number;
+  value: T;
+}>;
+
+export class VersionedSnapshotStore<T> {
+  private version = 0;
+  private value: T;
+  private readonly waiters = new Set<
+    (snapshot: VersionedSnapshot<T>) => void
+  >();
+  private readonly subscribers = new Set<
+    (snapshot: VersionedSnapshot<T>) => void
+  >();
+
+  constructor(
+    initialValue: T,
+    private readonly isEqual: (prev: T, next: T) => boolean = Object.is,
+  ) {
+    this.value = initialValue;
+  }
+
+  public getSnapshot(): VersionedSnapshot<T> {
+    return { version: this.version, value: this.value };
+  }
+
+  public set(nextValue: T): boolean {
+    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;
+  }
+
+  public update(updater: (prev: T) => T): boolean {
+    return this.set(updater(this.value));
+  }
+
+  public subscribe(
+    subscriber: (snapshot: VersionedSnapshot<T>) => void,
+  ): () => void {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+
+  public pull(sinceVersion = -1): Promise<VersionedSnapshot<T>> {
+    if (this.version !== sinceVersion) {
+      return Promise.resolve(this.getSnapshot());
+    }
+
+    return new Promise((resolve) => {
+      this.waiters.add(resolve);
+    });
+  }
+}
--- a/packages/common/tests/binary-heap.test.ts
+++ b/packages/common/tests/binary-heap.test.ts
@@ -0,0 +1,109 @@
+import { BinaryHeap } from "../src/binary-heap";
+
+describe("BinaryHeap", () => {
+  const numberHeap = () => new BinaryHeap<number>((n) => n);
+
+  const drain = (heap: BinaryHeap<number>) => {
+    const out: number[] = [];
+    while (heap.size() > 0) {
+      out.push(heap.pop()!);
+    }
+    return out;
+  };
+
+  describe("empty heap", () => {
+    it("has size 0", () => {
+      expect(numberHeap().size()).toBe(0);
+    });
+
+    it("pop() returns null", () => {
+      expect(numberHeap().pop()).toBe(null);
+    });
+
+    it("remove() is a no-op and does not throw", () => {
+      const heap = numberHeap();
+      expect(() => heap.remove(1)).not.toThrow();
+      expect(heap.size()).toBe(0);
+    });
+  });
+
+  describe("push / pop", () => {
+    it("tracks size as items are added and removed", () => {
+      const heap = numberHeap();
+      [3, 1, 2].forEach((n) => heap.push(n));
+      expect(heap.size()).toBe(3);
+
+      heap.pop();
+      expect(heap.size()).toBe(2);
+    });
+
+    it("pops a single pushed element back out", () => {
+      const heap = numberHeap();
+      heap.push(42);
+      expect(heap.pop()).toBe(42);
+      expect(heap.pop()).toBe(null);
+    });
+
+    it("always pops the smallest score first", () => {
+      const heap = numberHeap();
+      [5, 3, 8, 1, 9, 2, 7].forEach((n) => heap.push(n));
+      expect(drain(heap)).toEqual([1, 2, 3, 5, 7, 8, 9]);
+    });
+
+    it("handles duplicate scores", () => {
+      const heap = numberHeap();
+      [4, 1, 4, 1, 2].forEach((n) => heap.push(n));
+      expect(drain(heap)).toEqual([1, 1, 2, 4, 4]);
+    });
+
+    it("maintains the heap invariant for a large adversarial (reverse-sorted) input", () => {
+      const heap = numberHeap();
+      // pushing in descending order forces a sift-up on every insert
+      const input = Array.from({ length: 1000 }, (_, i) => 1000 - i);
+      input.forEach((n) => heap.push(n));
+      expect(drain(heap)).toEqual([...input].sort((a, b) => a - b));
+    });
+  });
+
+  describe("remove", () => {
+    it("removes an interior element and keeps the rest ordered", () => {
+      const heap = numberHeap();
+      [5, 3, 8, 1, 9].forEach((n) => heap.push(n));
+
+      heap.remove(8);
+
+      expect(heap.size()).toBe(4);
+      expect(drain(heap)).toEqual([1, 3, 5, 9]);
+    });
+
+    it("can remove the current minimum", () => {
+      const heap = numberHeap();
+      [5, 3, 8, 1, 9].forEach((n) => heap.push(n));
+
+      heap.remove(1);
+
+      expect(heap.size()).toBe(4);
+      expect(heap.pop()).toBe(3);
+    });
+  });
+
+  describe("rescoreElement", () => {
+    type Node = { id: string; f: number };
+
+    it("re-sorts a node after its score is lowered", () => {
+      const heap = new BinaryHeap<Node>((node) => node.f);
+
+      const a = { id: "a", f: 10 };
+      const b = { id: "b", f: 20 };
+      const c = { id: "c", f: 30 };
+      [a, b, c].forEach((node) => heap.push(node));
+
+      c.f = 5;
+      heap.rescoreElement(c);
+
+      expect(heap.pop()).toBe(c);
+      expect(heap.pop()).toBe(a);
+      expect(heap.pop()).toBe(b);
+    });
+  });
+});
--- a/packages/common/tests/keys.test.ts
+++ b/packages/common/tests/keys.test.ts
@@ -0,0 +1,271 @@
+import { KEYS, matchKey } from "../src/keys";
+
+describe("key matcher", async () => {
+  it("should not match unexpected key", async () => {
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "N" }), KEYS.Y),
+    ).toBeFalsy();
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "Unidentified" }), KEYS.Z),
+    ).toBeFalsy();
+
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "z" }), KEYS.Y),
+    ).toBeFalsy();
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "y" }), KEYS.Z),
+    ).toBeFalsy();
+
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "Z" }), KEYS.Y),
+    ).toBeFalsy();
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "Y" }), KEYS.Z),
+    ).toBeFalsy();
+  });
+
+  it("should match key (case insensitive) when key is latin", async () => {
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "z" }), KEYS.Z),
+    ).toBeTruthy();
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "y" }), KEYS.Y),
+    ).toBeTruthy();
+
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "Z" }), KEYS.Z),
+    ).toBeTruthy();
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "Y" }), KEYS.Y),
+    ).toBeTruthy();
+  });
+
+  it("should match key on QWERTY, QWERTZ, AZERTY", async () => {
+    // QWERTY
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "y", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // QWERTZ
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeyY" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "y", code: "KeyZ" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // AZERTY
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeyW" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "y", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+  });
+
+  it("should match key on DVORAK, COLEMAK", async () => {
+    // DVORAK
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeySemicolon" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "y", code: "KeyF" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // COLEMAK
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "y", code: "KeyJ" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+  });
+
+  it("should match key on Turkish-Q", async () => {
+    // Turkish-Q
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeyN" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "Y", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+  });
+
+  it("should not fallback when code is not defined", async () => {
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "я" }), KEYS.Z),
+    ).toBeFalsy();
+
+    expect(
+      matchKey(new KeyboardEvent("keydown", { key: "卜" }), KEYS.Y),
+    ).toBeFalsy();
+  });
+
+  it("should not fallback when code is incorrect", async () => {
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "z", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeFalsy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "Y", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeFalsy();
+  });
+
+  it("should fallback to code when key is non-latin", async () => {
+    // Macedonian
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "з", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ѕ", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // Russian
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "я", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "н", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // Serbian
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ѕ", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "з", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // Greek
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ζ", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "υ", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // Hebrew
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ז", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ט", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // Cangjie - Traditional
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "重", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "卜", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // Japanese
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "つ", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ん", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+
+    // 2-Set Korean
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ㅋ", code: "KeyZ" }),
+        KEYS.Z,
+      ),
+    ).toBeTruthy();
+    expect(
+      matchKey(
+        new KeyboardEvent("keydown", { key: "ㅛ", code: "KeyY" }),
+        KEYS.Y,
+      ),
+    ).toBeTruthy();
+  });
+});
--- a/packages/common/tests/queue.test.ts
+++ b/packages/common/tests/queue.test.ts
@@ -0,0 +1,62 @@
+import { Queue } from "../src/queue";
+
+describe("Queue", () => {
+  const calls: any[] = [];
+
+  const createJobFactory =
+    <T>(
+      // for purpose of this test, Error object will become a rejection value
+      resolutionOrRejectionValue: T,
+      ms = 1,
+    ) =>
+    () => {
+      return new Promise<T>((resolve, reject) => {
+        setTimeout(() => {
+          if (resolutionOrRejectionValue instanceof Error) {
+            reject(resolutionOrRejectionValue);
+          } else {
+            resolve(resolutionOrRejectionValue);
+          }
+        }, ms);
+      }).then((x) => {
+        calls.push(x);
+        return x;
+      });
+    };
+
+  beforeEach(() => {
+    calls.length = 0;
+  });
+
+  it("should await and resolve values in order of enqueueing", async () => {
+    const queue = new Queue();
+
+    const p1 = queue.push(createJobFactory("A", 50));
+    const p2 = queue.push(createJobFactory("B"));
+    const p3 = queue.push(createJobFactory("C"));
+
+    expect(await p3).toBe("C");
+    expect(await p2).toBe("B");
+    expect(await p1).toBe("A");
+
+    expect(calls).toEqual(["A", "B", "C"]);
+  });
+
+  it("should reject a job if it throws, and not affect other jobs", async () => {
+    const queue = new Queue();
+
+    const err = new Error("B");
+
+    queue.push(createJobFactory("A", 50));
+    const p2 = queue.push(createJobFactory(err));
+    const p3 = queue.push(createJobFactory("C"));
+
+    const p2err = p2.catch((err) => err);
+
+    await p3;
+
+    expect(await p2err).toBe(err);
+
+    expect(calls).toEqual(["A", "C"]);
+  });
+});
--- a/packages/common/tests/url.test.tsx
+++ b/packages/common/tests/url.test.tsx
@@ -0,0 +1,31 @@
+import { normalizeLink } from "../src/url";
+
+describe("normalizeLink", () => {
+  // NOTE not an extensive XSS test suite, just to check if we're not
+  // regressing in sanitization
+  it("should sanitize links", () => {
+    expect(
+      // eslint-disable-next-line no-script-url
+      normalizeLink(`javascript://%0aalert(document.domain)`).startsWith(
+        // eslint-disable-next-line no-script-url
+        `javascript:`,
+      ),
+    ).toBe(false);
+    expect(normalizeLink("ola")).toBe("ola");
+    expect(normalizeLink(" ola")).toBe("ola");
+
+    expect(normalizeLink("https://www.excalidraw.com")).toBe(
+      "https://www.excalidraw.com",
+    );
+    expect(normalizeLink("www.excalidraw.com")).toBe("www.excalidraw.com");
+    expect(normalizeLink("/ola")).toBe("/ola");
+    expect(normalizeLink("http://test")).toBe("http://test");
+    expect(normalizeLink("ftp://test")).toBe("ftp://test");
+    expect(normalizeLink("file://")).toBe("file://");
+    expect(normalizeLink("file://")).toBe("file://");
+    expect(normalizeLink("[test](https://test)")).toBe("[test](https://test)");
+    expect(normalizeLink("[[test]]")).toBe("[[test]]");
+    expect(normalizeLink("<test>")).toBe("<test>");
+    expect(normalizeLink("test&")).toBe("test&");
+  });
+});
--- a/packages/common/tsconfig.json
+++ b/packages/common/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist/types",
+    "rootDir": "../"
+  },
+  "include": ["src/**/*", "global.d.ts"],
+  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
+}