fix(editor): tweak freedraw settings and tablet UI/UX (#11551 )

* fix(editor): align constant freedraw stroke width more with generic shapes * reduce streamline for non-mouse * do not change `currentItemStrokeVariability` unintentionally * render penMode button under compact styles panel on tablets * show stroke variability as standalone button in compact actions menu * improve toolbar clicking UX with pen * change streamline defaults * change to `variable` stroke if toggling penMode for the first time
fix(editor): Modern TS require imports from rootDir (#11552 )
2026-06-24 16:59:10 +02:00 · 2026-06-24 10:52:56 +00:00 · 2026-06-24 09:16:22 +02:00 · 2026-06-22 18:22:26 +02:00 · 2026-06-15 18:19:20 +02:00 · 2026-06-15 18:19:08 +02:00
388 changed files with 21333 additions and 9053 deletions
@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM node:24-bullseye

 # Vite wants to open the browser using `open`, so we
 # need to install those utils.
@@ -19,6 +19,11 @@
      "command": "yarn fix",
      "runAtStart": false
    },
+    "prettier": {
+      "name": "Prettify",
+      "command": "yarn prettier",
+      "runAtStart": false
+    },
    "start": {
      "name": "Start Excalidraw",
      "command": "yarn start",
@@ -37,6 +37,9 @@ VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=
 # Set this flag to false if you want to open the overlay by default
 VITE_APP_COLLAPSE_OVERLAY=true

+# Set this flag to false to disable eslint
+VITE_APP_ENABLE_ESLINT=true
+
 # Enable PWA in dev server
 VITE_APP_ENABLE_PWA=false

@@ -29,3 +29,6 @@ PQIDAQAB'
 # Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when  running the build command
 VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
 VITE_APP_COLLAPSE_OVERLAY=false
+# Enable eslint in dev server
+VITE_APP_ENABLE_ESLINT=false
+
@@ -0,0 +1,7 @@
+# VITE_DEBUG_DOM
+#   When "true", testing-library failures (waitFor / getBy*) include the full
+#   serialized DOM in the error message. It's off by default because it's noisy.
+#
+#   Flip it to "true" (or use `VITE_DEBUG_DOM=true yarn test`) when you need to
+#   inspect the DOM of a failing test.
+VITE_DEBUG_DOM=false
@@ -0,0 +1,11 @@
+node_modules/
+build/
+package-lock.json
+.vscode/
+firebase/
+dist/
+public/workbox
+packages/excalidraw/types
+examples/**/public
+dev-dist
+coverage
@@ -0,0 +1,64 @@
+{
+  "extends": ["@excalidraw/eslint-config", "react-app"],
+  "rules": {
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
+        "pathGroups": [
+          {
+            "pattern": "@excalidraw/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always-and-inside-groups",
+        "warnOnUnassignedImports": true
+      }
+    ],
+    "import/no-anonymous-default-export": "off",
+    "no-restricted-globals": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "disallowTypeAnnotations": false,
+        "fixStyle": "separate-type-imports"
+      }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "name": "jotai",
+        "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
+      }
+    ],
+    "react/jsx-no-target-blank": [
+      "error",
+      {
+        "allowReferrer": true
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["packages/excalidraw/**/*.{ts,tsx}"],
+      "excludedFiles": ["packages/excalidraw/**/*.test.{ts,tsx}", "packages/excalidraw/**/*.test.*.{ts,tsx}"],
+      "rules": {
+        "@typescript-eslint/no-restricted-imports": [
+          "error",
+          {
+            "patterns": [
+              {
+                "group": ["@excalidraw/excalidraw"],
+                "message": "Do not import from the barrel 'index.tsx' files. Use direct relative imports to the specific module instead.",
+                "allowTypeImports": true
+              }
+            ],
+            "paths": [".", "..", "../..", "../../..", "../../../..", "../../../../..", "../index", "../../index", "../../../index", "../../../../index"]
+          }
+        ]
+      }
+    }
+  ]
+}
@@ -9,11 +9,11 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
        with:
          fetch-depth: 2
      - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 20.x
      - name: Set up publish access
@@ -9,5 +9,5 @@ jobs:
  build-docker:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
      - run: docker build -t excalidraw .
@@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest
    timeout-minutes: 3
    steps:
-      - uses: styfle/cancel-workflow-action@0.6.0
+      - uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0
        with:
          workflow_id: 400555, 400556, 905313, 1451724, 1710116, 3185001, 3438604
          access_token: ${{ secrets.GITHUB_TOKEN }}
@@ -7,10 +7,10 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4

      - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 20.x

@@ -10,12 +10,12 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
        with:
          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}

      - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 20.x

@@ -40,7 +40,7 @@ jobs:
          echo ::set-output name=body::$body

      - name: Update description with coverage
-        uses: kt3k/update-pr-description@v1.0.1
+        uses: kt3k/update-pr-description@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1
        with:
          pr_body: ${{ steps.getCommentBody.outputs.body }}
          pr_title: "chore: Update translations from Crowdin"
@@ -11,18 +11,18 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
      - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
      - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
        with:
          context: .
          push: true
@@ -6,11 +6,97 @@ on:
      - opened
      - edited
      - synchronize
+      - labeled
+      - unlabeled

 jobs:
  semantic:
    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
    steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
+        with:
+          requireScope: true
+          scopes: |
+            app
+            editor
+            packages/excalidraw
+            packages/utils
+            docker
+            repo
+          ignoreLabels: |
+            skip-semantic-title
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  label-scope:
+    needs: semantic
+    if: github.event.pull_request.head.repo.full_name == github.repository
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Label scoped PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_NUMBER: ${{ github.event.pull_request.number }}
+          PR_TITLE: ${{ github.event.pull_request.title }}
+          REPOSITORY: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+
+          scope_labels=(s-app s-editor s-package)
+
+          readarray -t desired_labels < <(
+            node <<'NODE'
+          const title = process.env.PR_TITLE;
+          const match = title.match(/^[a-z]+(?:\(([^)]+)\))?!?:/i);
+          const scopes = match?.[1]?.split(",").map((scope) => scope.trim()) ?? [];
+          const labels = new Set();
+
+          for (const scope of scopes) {
+            if (scope === "app") {
+              labels.add("s-app");
+            } else if (scope === "editor") {
+              labels.add("s-editor");
+            } else if (scope.startsWith("packages/")) {
+              labels.add("s-package");
+            }
+          }
+
+          process.stdout.write([...labels].join("\n"));
+          NODE
+          )
+
+          should_apply_label() {
+            local label="$1"
+
+            for desired_label in "${desired_labels[@]}"; do
+              if [[ "$desired_label" == "$label" ]]; then
+                return 0
+              fi
+            done
+
+            return 1
+          }
+
+          for label in "${scope_labels[@]}"; do
+            if ! should_apply_label "$label"; then
+              gh api \
+                --method DELETE \
+                "repos/${REPOSITORY}/issues/${PR_NUMBER}/labels/${label}" \
+                --silent 2>/dev/null || true
+            fi
+          done
+
+          for label in "${desired_labels[@]}"; do
+            if ! gh api \
+              --method POST \
+              "repos/${REPOSITORY}/issues/${PR_NUMBER}/labels" \
+              --field "labels[]=${label}" \
+              --silent; then
+              echo "::warning::Could not apply ${label}. The workflow token likely does not have issues:write permission for this PR."
+            fi
+          done
@@ -9,9 +9,9 @@ jobs:
  sentry:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
      - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 20.x
      - name: Install and build
@@ -10,9 +10,9 @@ jobs:
      CI_JOB_NUMBER: 1
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 20.x
      - name: Install in packages/excalidraw
@@ -20,7 +20,7 @@ jobs:
        working-directory: packages/excalidraw
        env:
          CI: true
-      - uses: andresz1/size-limit-action@v1
+      - uses: andresz1/size-limit-action@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          build_script: build:esm
@@ -10,9 +10,9 @@ jobs:
      pull-requests: write

    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
      - name: "Install Node"
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: "20.x"
      - name: "Install Deps"
@@ -21,6 +21,6 @@ jobs:
        run: yarn test:coverage
      - name: "Report Coverage"
        if: always() # Also generate the report if tests are failing
-        uses: davelosert/vitest-coverage-report-action@v2
+        uses: davelosert/vitest-coverage-report-action@2500dafcee7dd64f85ab689c0b83798a8359770e # v2
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -8,9 +8,9 @@ jobs:
  test:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
        with:
          node-version: 20.x
      - name: Install and test
@@ -8,9 +8,7 @@
 .history
 .idea
 .vercel
-.vscode/*
-!.vscode/extensions.json
-!.vscode/settings.recommended.json
+.vscode
 .yarn
 *.log
 *.tgz
@@ -0,0 +1,14 @@
+const { CLIEngine } = require("eslint");
+
+// see https://github.com/okonet/lint-staged#how-can-i-ignore-files-from-eslintignore-
+// for explanation
+const cli = new CLIEngine({});
+
+module.exports = {
+  "*.{js,ts,tsx}": files => {
+    return (
+      "eslint --max-warnings=0 --fix " + files.filter(file => !cli.isPathIgnored(file)).join(" ")
+    );
+  },
+  "*.{css,scss,json,md,html,yml}": ["prettier --write"],
+};
@@ -1,5 +0,0 @@
-{
-  "printWidth": 80,
-  "proseWrap": "never",
-  "trailingComma": "all"
-}
@@ -1,149 +0,0 @@
-{
-  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json",
-  "plugins": ["typescript", "react", "jsx-a11y", "import"],
-  "rules": {
-    "no-unused-vars": [
-      "warn",
-      {
-        "ignoreRestSiblings": true
-      }
-    ],
-    "curly": "warn",
-    "no-console": [
-      "warn",
-      {
-        "allow": ["info", "warn", "error"]
-      }
-    ],
-    "no-else-return": "warn",
-    "no-lonely-if": "warn",
-    "no-unneeded-ternary": "warn",
-    "no-unused-expressions": "warn",
-    "no-useless-return": "warn",
-    "no-var": "warn",
-    "one-var": "warn",
-    "prefer-arrow-callback": "warn",
-    "prefer-const": "warn",
-    "prefer-template": "warn",
-    "typescript/consistent-type-imports": [
-      "error",
-      {
-        "disallowTypeAnnotations": false
-      }
-    ],
-    "typescript/no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          {
-            "group": [
-              "../../excalidraw",
-              "../../../packages/excalidraw",
-              "@excalidraw/excalidraw"
-            ],
-            "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
-            "allowTypeImports": true
-          }
-        ]
-      }
-    ],
-    "eslint/no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "jotai",
-            "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
-          }
-        ]
-      }
-    ],
-    "react/jsx-no-target-blank": [
-      "error",
-      {
-        "allowReferrer": true
-      }
-    ],
-
-    "eslint/no-unreachable": "warn",
-
-    // react
-    "react/jsx-no-comment-textnodes": "error",
-    "react/iframe-missing-sandbox": "warn",
-    "react/rules-of-hooks": "error",
-    "react/no-unescaped-entities": "warn",
-
-    // for later
-    // ----------
-    // "react/no-array-index-key": "warn",
-    // "react/jsx-no-useless-fragment": "warn",
-
-    // will require major refactor
-    // ---------------------------
-    // "react/only-export-components": "warn",
-
-    // type-aware rules (requires --type-aware flag)
-    // -------------------------------------------------------------------------
-    "typescript/switch-exhaustiveness-check": "warn",
-    "typescript/unbound-method": [
-      "warn",
-      {
-        "ignoreStatic": true
-      }
-    ],
-
-    // disabled rules
-    // -------------------------------------------------------------------------
-    // may be re-enabled later
-    "typescript/no-redundant-type-constituents": "off",
-    "typescript/no-unsafe-unary-minus": "off",
-    "typescript/no-floating-promises": "off",
-    // not planned
-    "eslint/no-async-promise-executor": "off",
-    "jsx-a11y/no-autofocus": "off",
-    "eslint-plugin-jsx-a11y/click-events-have-key-events": "off",
-    "eslint-plugin-jsx-a11y/label-has-associated-control": "off"
-  },
-  "ignorePatterns": [
-    "node_modules/",
-    "build/",
-    "dist/",
-    ".vscode/",
-    "firebase/",
-    "public/workbox",
-    "packages/excalidraw/types",
-    "examples/**/public",
-    "dev-dist",
-    "coverage"
-    // "**/tests/**",
-    // "**/*.test*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "packages/common/src/**/*.ts",
-        "packages/common/src/**/*.tsx",
-        "packages/element/src/**/*.ts",
-        "packages/element/src/**/*.tsx"
-      ],
-      "rules": {
-        "typescript/no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": [
-                  "../../excalidraw",
-                  "../../../packages/excalidraw",
-                  "@excalidraw/excalidraw"
-                ],
-                "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
-                "allowTypeImports": true
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ]
-}
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["oxc.oxc-vscode"]
-}
@@ -1,22 +0,0 @@
-{
-  "oxc.enable": true,
-  "editor.formatOnSave": true,
-  "[javascript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  }
-}
@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:18 AS build
+FROM --platform=${BUILDPLATFORM} node:24@sha256:8530f76a96d88820d288761f022e318970dda93d01536919fbc16076b7983e63 AS build

 WORKDIR /opt/node_app

@@ -7,13 +7,13 @@ COPY . .
 # do not ignore optional dependencies:
 # Error: Cannot find module @rollup/rollup-linux-x64-gnu
 RUN --mount=type=cache,target=/root/.cache/yarn \
-    npm_config_target_arch=${TARGETARCH} yarn --network-timeout 600000
+    npm_config_target_arch=${TARGETARCH} yarn --frozen-lockfile --network-timeout 600000

 ARG NODE_ENV=production

 RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker

-FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
+FROM nginx:stable-alpine-slim@sha256:2c605dbeab79a6b2a63340474fe58119d0ef95bdc4b1f41df0aa689659b3d13b

 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html

@@ -29,7 +29,7 @@
  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  /></a>
  <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
+    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
  <a href="https://deepwiki.com/excalidraw/excalidraw">
    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
  <a href="https://twitter.com/excalidraw">
@@ -10,11 +10,11 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";

 `FONT_FAMILY` contains all the font families used in `Excalidraw`. The default families are the following:

-| Font Family    | Description           |
-| -------------- | --------------------- |
-| `Excalifont`   | The `Hand-drawn` font |
-| `Nunito`       | The `Normal` Font     |
-| `Comic Shanns` | The `Code` Font       |
+| Font Family | Description            |
+| ----------- | ---------------------- |
+| `Excalifont`    | The `Hand-drawn` font |
+| `Nunito` | The `Normal` Font      |
+| `Comic Shanns`  | The `Code` Font        |

 Pre-selected family is `FONT_FAMILY.Excalifont`, unless it's overriden with `initialData.appState.currentItemFontFamily`.

@@ -172,7 +172,7 @@ convertToExcalidrawElements([
    type: "arrow",
    x: 450,
    y: 20,
-    startArrowhead: "dot",
+    startArrowhead: "circle",
    endArrowhead: "triangle",
    strokeColor: "#1971c2",
    strokeWidth: 2,
@@ -13,7 +13,7 @@ Once the callback is triggered, you will need to store the api in state to acces
 ```jsx showLineNumbers
 export default function App() {
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-  return <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />;
+  return <Excalidraw excalidrawAPI={(api)=> setExcalidrawAPI(api)} />;
 }
 ```

@@ -362,9 +362,10 @@ This API has the below signature. It sets the `tool` passed in param as the acti

 ```ts
 (
-  tool: ({ type: ToolType } | { type: "custom"; customType: string }) & {
-    locked?: boolean;
-  },
+  tool: (
+    | { type: ToolType }
+    | { type: "custom"; customType: string }
+  ) & { locked?: boolean },
 ) => {};
 ```

@@ -1,15 +1,7 @@
 # initialData

 <pre>
-  &#123; elements?:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
-    ExcalidrawElement[]
-  </a>
-  , appState?:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
-    AppState
-  </a>{" "}
-  &#125;
+&#123; elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a> &#125;
 </pre>

 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
@@ -54,7 +46,7 @@ function App() {
            },
          ],
          appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
-          scrollToContent: true,
+          scrollToContent: true
        }}
      />
    </div>
@@ -3,7 +3,7 @@
 All `props` are _optional_.

 | Name | Type | Default | Description |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
 | [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
 | [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
@@ -31,7 +31,7 @@ All `props` are _optional_.
 | [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
 | [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| <code>((link: string) => boolean &#124; undefined)</code> | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
-| [`renderScrollbars`] | `boolean` |  | `false` | Indicates whether scrollbars will be shown |
+| [`renderScrollbars`] | `boolean`| | `false` | Indicates whether scrollbars will be shown

 ### Storing custom data on Excalidraw elements

@@ -247,7 +247,7 @@ This prop indicates whether to `focus` the Excalidraw component on page load. De
 Allows you to override `id` generation for files added on canvas (images). By default, an SHA-1 digest of the file is used.

 ```tsx
-(file: File) => string | Promise<string>;
+(file: File) => string | Promise<string>
 ```

 ### validateEmbeddable
@@ -65,7 +65,7 @@ If user choses to `dock` the sidebar, it will push the right part of the UI towa
 function App() {
  return (
    <div style={{ height: "500px" }}>
-      <Excalidraw UIOptions={{ dockedSidebarBreakpoint: 200 }} />
+      <Excalidraw UIOptions={{dockedSidebarBreakpoint: 200}}/>
    </div>
  );
 }
@@ -73,8 +73,9 @@ function App() {

 ## tools

-This `prop` controls the visibility of the tools in the editor. Currently you can control the visibility of `image` tool via this prop.
+This `prop` controls the visibility of the tools in the editor.
+Currently you can control the visibility of `image` tool via this prop.

-| Prop  | Type    | Default | Description                                     |
-| ----- | ------- | ------- | ----------------------------------------------- |
-| image | boolean | true    | Decides whether `image` tool should be visible. |
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| image | boolean | true | Decides whether `image` tool should be visible.
@@ -14,44 +14,35 @@ We're working on much improved export utilities. Stay tuned!
 **_Signature_**

 <pre>
-  exportToCanvas(&#123;
-  <br />
-  &nbsp; elements,
-  <br />
-  &nbsp; appState
-  <br />
-  &nbsp; getDimensions,
-  <br />
-  &nbsp; files,
-  <br />
-  &nbsp; exportPadding?: number;
-  <br />
-  &#125;:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/utils/export.ts#L24">
-    ExportOpts
-  </a>
+exportToCanvas(&#123;<br/>&nbsp;
+  elements,<br/>&nbsp;
+  appState<br/>&nbsp;
+  getDimensions,<br/>&nbsp;
+  files,<br/>&nbsp;
+  exportPadding?: number;<br/>
+&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/utils/export.ts#L24">ExportOpts</a>
 </pre>

 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to be exported to canvas. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L17) | The app state of the scene. |
-| [`getDimensions`](#getdimensions) | `function` | \_ | A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. |
-| `maxWidthOrHeight` | `number` | \_ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
-| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | \_ | The files added to the scene. |
+| [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported. |
+| `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
+| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | _ | The files added to the scene. |
 | `exportPadding` | `number` | `10` | The `padding` to be added on canvas. |

+
 #### getDimensions

 ```tsx
-(width: number, height: number) => {
+(width: number, height: number) => { 
  width: number,
-  height: number,
-  scale?: number
+  height: number, 
+  scale?: number 
 }
 ```
-
-A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported.
+A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported.

 **How to use**

@@ -66,17 +57,17 @@ function App() {
  const [canvasUrl, setCanvasUrl] = useState("");
  const [excalidrawAPI, setExcalidrawAPI] = useState(null);

-  return (
+  return  (
    <>
      <button
        className="custom-button"
        onClick={async () => {
          if (!excalidrawAPI) {
-            return;
+            return
          }
          const elements = excalidrawAPI.getSceneElements();
          if (!elements || !elements.length) {
-            return;
+            return
          }
          const canvas = await exportToCanvas({
            elements,
@@ -85,9 +76,7 @@ function App() {
              exportWithDarkMode: false,
            },
            files: excalidrawAPI.getFiles(),
-            getDimensions: () => {
-              return { width: 350, height: 350 };
-            },
+            getDimensions: () => { return {width: 350, height: 350}}
          });
          const ctx = canvas.getContext("2d");
          ctx.font = "30px Virgil";
@@ -101,13 +90,15 @@ function App() {
        <img src={canvasUrl} alt="" />
      </div>
      <div style={{ height: "400px" }}>
-        <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />
+        <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)}
+/>
      </div>
    </>
-  );
+  )
 }
 ```

+
 ### exportToBlob

 **_Signature_**
@@ -123,7 +114,7 @@ exportToBlob(<br/>&nbsp;

 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `opts` | `object` | \_ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
+| `opts` | `object` | _ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
 | `mimeType` | `string` | `image/png` | Indicates the image format. |
 | `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. |
 | `exportPadding` | `number` | `10` | The padding to be added on canvas. |
@@ -141,34 +132,26 @@ Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-
 **_Signature_**

 <pre>
-  exportToSvg(&#123;
-  <br />
-  &nbsp; elements:&nbsp;
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
-    ExcalidrawElement[]
-  </a>
-  ,<br />
-  &nbsp; appState:
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
-    {" "}
-    AppState
-  </a>
-  ,<br />
-  &nbsp; exportPadding: number,
-  <br />
-  &nbsp; metadata: string,
-  <br />
-  &nbsp; files:&nbsp;
+exportToSvg(&#123;<br/>&nbsp;
+  elements:&nbsp; 
+    <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
+      ExcalidrawElement[]
+    </a>,<br/>&nbsp;
+  appState:
+    <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95"> AppState
+    </a>,<br/>&nbsp;
+  exportPadding: number,<br/>&nbsp;
+  metadata: string,<br/>&nbsp;
+  files:&nbsp;
  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59">
-    BinaryFiles
-  </a>
-  ,<br />
-  &#125;);
+      BinaryFiles
+    </a>,<br/>
+&#125;);
 </pre>

 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to exported as `svg ` |
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to exported as `svg `|
 | appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L11) | The `appState` of the scene |
 | exportPadding | number | 10 | The `padding` to be added on canvas |
 | files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) | undefined | The `files` added to the scene. |
@@ -193,7 +176,7 @@ exportToClipboard(<br/>&nbsp;
 | `opts` |  |  | This param is same as the params passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas). |
 | `mimeType` | `string` | `image/png` | Indicates the image format, this will be used when exporting as `png`. |
 | `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg` / `image/webp` MIME types. This will be used when exporting as `png`. |
-| `type` | 'png' &#124; 'svg' &#124; 'json' | \_ | This determines the format to which the scene data should be `exported`. |
+| `type` | 'png' &#124; 'svg' &#124; 'json' | _ | This determines the format to which the scene data should be `exported`. |

 **How to use**

@@ -20,7 +20,8 @@ import { restoreAppState } from "@excalidraw/excalidraw";
 This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) and if any key is missing, it will be set to its `default` value.

 When `localAppState` is supplied, it's used in place of values that are missing (`undefined`) in `appState` instead of the defaults.  
-Use this as a way to not override user's defaults if you persist them. You can pass `null` / `undefined` if not applicable.
+Use this as a way to not override user's defaults if you persist them.
+You can pass `null` / `undefined` if not applicable.

 ### restoreElements

@@ -35,10 +36,10 @@ restoreElements(
 </pre>

 | Prop | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ---- |
 | `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
-| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
-| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements |
+| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined |  When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
+| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements

 #### localElements

@@ -46,14 +47,13 @@ When `localElements` are supplied, they are used to ensure that existing restore
 Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update

 #### opts
-
 The extra optional parameter to configure restored elements. It has the following attributes

-| Prop | Type | Description |
-| --- | --- | --- |
+| Prop | Type | Description|
+| --- | --- | ------|
 | `refreshDimensions` | `boolean` | Indicates whether we should also _recalculate_ text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` | `boolean` | Indicates whether the _bindings_ for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
-| `normalizeIndices` | `boolean` | Indicates whether _fractional indices_ for the elements should be normalized. This is to prevent possible issues caused by using stale (too old, too long) indices. |
+| `repairBindings` |`boolean` | Indicates whether the _bindings_ for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+| `normalizeIndices` |`boolean` | Indicates whether _fractional indices_ for the elements should be normalized. This is to prevent possible issues caused by using stale (too old, too long) indices. |

 **_How to use_**

@@ -94,12 +94,8 @@ This function makes sure elements and state is set to appropriate values and set
 **_Signature_**

 <pre>
-  restoreLibraryItems(libraryItems:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">
-    ImportedDataState["libraryItems"]
-  </a>
-  ,<br />
-  &nbsp; defaultStatus: "published" | "unpublished")
+restoreLibraryItems(libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["libraryItems"]</a>,<br/>&nbsp;
+defaultStatus: "published" | "unpublished")
 </pre>

 **_How to use_**
@@ -38,7 +38,6 @@ For a complete list of variables, check [theme.scss](https://github.com/excalidr
  --color-primary-light: #dcbec9;
 }
 ```
-
 ```tsx live
 function App() {
  return (
@@ -23,7 +23,7 @@ To start the example app using the `@excalidraw/excalidraw` package, follow the
   ```

   [http://localhost:3001](http://localhost:3001) will open in your default browser.
-
+   
   This is the same example as the [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.

 ## Releasing
@@ -6,17 +6,21 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple

 ### Turning off Aggressive Anti-Fingerprinting in Brave browser

-When _Aggressive Anti-Fingerprinting_ is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
+When *Aggressive Anti-Fingerprinting* is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.

 We strongly recommend turning it off. You can follow the steps below on how to do so.

-1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button ![Shield button](../../assets/brave-shield.png)
+
+1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button
+![Shield button](../../assets/brave-shield.png)

 <div style={{width:'30rem'}}>

-2. Once opened, look for **Aggressively Block Fingerprinting** ![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+2. Once opened, look for **Aggressively Block Fingerprinting**
+![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)

-3. Switch to **Block Fingerprinting** ![Block filtering](../../assets/block-fingerprint.png)
+3. Switch to **Block Fingerprinting**
+![Block filtering](../../assets/block-fingerprint.png)

 4. Thats all. All text elements should be fixed now 🎉

@@ -24,6 +28,7 @@ We strongly recommend turning it off. You can follow the steps below on how to d

 If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).

+
 ### ReferenceError: process is not defined

 When using `vite` or any build tools, you will have to make sure the `process` is accessible as we are accessing `process.env.IS_PREACT` to decide whether to use `preact` build.
@@ -31,7 +31,9 @@ or, if you serve your assets from the root of your CDN, you would do:
 ```js
 // Vanilla
 <head>
-  <script>window.EXCALIDRAW_ASSET_PATH = "https://my.cdn.com/assets/";</script>
+    <script>
+        window.EXCALIDRAW_ASSET_PATH = "https://my.cdn.com/assets/";
+    </script>    
 </head>
 ```

@@ -39,8 +41,8 @@ or, if you prefer the path to be dynamicly set based on the `location.origin`, y

 ```jsx
 // Next.js
-<Script id="load-env-variables" strategy="beforeInteractive">
-  {`window["EXCALIDRAW_ASSET_PATH"] = location.origin;`} // or use just "/"!
+<Script id="load-env-variables" strategy="beforeInteractive" >
+    { `window["EXCALIDRAW_ASSET_PATH"] = location.origin;` } // or use just "/"!
 </Script>
 ```

@@ -12,7 +12,8 @@ import { Excalidraw } from "@excalidraw/excalidraw";

 Throughout the documentation we use live, editable Excalidraw examples like the one shown below.

-While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes. For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.
+While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.
+For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.

 :::

@@ -57,76 +58,80 @@ If you are using `pages router` then importing the wrapper dynamically would wor
 <Tabs>
  <TabItem value="Excalidraw Wrapper" label="Excalidraw Wrapper" >

-```jsx showLineNumbers
-"use client";
-import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";
+  ```jsx showLineNumbers
+  "use client";
+  import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";

-import "@excalidraw/excalidraw/index.css";
+  import "@excalidraw/excalidraw/index.css";

-const ExcalidrawWrapper: React.FC = () => {
-  console.info(convertToExcalidrawElements([{
-    type: "rectangle",
-    id: "rect-1",
-    width: 186.47265625,
-    height: 141.9765625,
-  },]));
-  return (
-    <div style={{height:"500px", width:"500px"}}>
-      <Excalidraw />
-    </div>
-  );
-};
-export default ExcalidrawWrapper;
-```
+  const ExcalidrawWrapper: React.FC = () => {
+    console.info(convertToExcalidrawElements([{
+      type: "rectangle",
+      id: "rect-1",
+      width: 186.47265625,
+      height: 141.9765625,
+    },]));
+    return (
+      <div style={{height:"500px", width:"500px"}}>
+        <Excalidraw />
+      </div>
+    );
+  };
+  export default ExcalidrawWrapper;
+  ```

  </TabItem>

  <TabItem value="pages" label="Pages router">

-```jsx showLineNumbers
-import dynamic from "next/dynamic";
+  ```jsx showLineNumbers
+  import dynamic from "next/dynamic";

-// Since client components get prerenderd on server as well hence importing
-// the excalidraw stuff dynamically with ssr false
+  // Since client components get prerenderd on server as well hence importing
+  // the excalidraw stuff dynamically with ssr false

-const ExcalidrawWrapper = dynamic(
-  async () => (await import("../excalidrawWrapper")).default,
-  {
-    ssr: false,
-  },
-);
-
-export default function Page() {
-  return <ExcalidrawWrapper />;
-}
-```
+  const ExcalidrawWrapper = dynamic(
+    async () => (await import("../excalidrawWrapper")).default,
+    {
+      ssr: false,
+    },
+  );

+  export default function Page() {
+    return (
+      <ExcalidrawWrapper />
+    );
+  }
+  ```
  </TabItem>

  <TabItem value="app" label="App router">

-```jsx showLineNumbers
-import dynamic from "next/dynamic";
+  ```jsx showLineNumbers
+  import dynamic from "next/dynamic";

-// Since client components get prerenderd on server as well hence importing
-// the excalidraw stuff dynamically with ssr false
+  // Since client components get prerenderd on server as well hence importing
+  // the excalidraw stuff dynamically with ssr false

-const ExcalidrawWrapper = dynamic(
-  async () => (await import("../excalidrawWrapper")).default,
-  {
-    ssr: false,
-  },
-);
+  const ExcalidrawWrapper = dynamic(
+    async () => (await import("../excalidrawWrapper")).default,
+    {
+      ssr: false,
+    },
+  );

-export default function Page() {
-  return <ExcalidrawWrapper />;
-}
-```
+  export default function Page() {
+    return (
+      <ExcalidrawWrapper />
+    );
+  }
+  ```

  </TabItem>
 </Tabs>

-{/* Link  should be updated to point to the latest! */} Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs.vercel.app/).
+{/* Link  should be updated to point to the latest! */}
+Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs.vercel.app/).

 The `types` are available at `@excalidraw/excalidraw/types`, check [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example for details.

@@ -149,7 +154,6 @@ Since Vite removes env variables by default, you can update the vite config to e
    "process.env.IS_PREACT": JSON.stringify("true"),
  },
 ```
-
 :::

 ## Browser
@@ -176,16 +180,15 @@ import TabItem from "@theme/TabItem";
    />
    <link rel="stylesheet" href="./index.css" />
    <script>
-      window.EXCALIDRAW_ASSET_PATH =
-        "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
-    </script>
+    	window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
+		</script>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.0.0",
          "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
          "react-dom": "https://esm.sh/react-dom@19.0.0"
-        }
+          }
      }
    </script>
  </head>
@@ -205,9 +208,9 @@ import TabItem from "@theme/TabItem";

 ```js showLineNumbers
 // See https://www.npmjs.com/package/@excalidraw/excalidraw documentation.
-import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.js?external=react,react-dom";
+import * as ExcalidrawLib from 'https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.js?external=react,react-dom';
 import React from "https://esm.sh/react@19.0.0";
-import ReactDOM from "https://esm.sh/react-dom@19.0.0";
+import ReactDOM from "https://esm.sh/react-dom@19.0.0"

 window.ExcalidrawLib = ExcalidrawLib;
 console.log("Excalidraw library", ExcalidrawLib);
@@ -41,24 +41,18 @@ flowchart TD
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[Car]
-```
+ ```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c8ea84fc-e9fb-4652-9a12-154136d1a798"  width="250" height="200"/>

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/c8ea84fc-e9fb-4652-9a12-154136d1a798"
-  width="250"
-  height="200"
-/>

 ```
 flowchart LR
  id1((Hello from Circle))
 ```

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/6202a8b9-8aa7-451e-9478-4d8d75c0f2fa"
-  width="250"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/6202a8b9-8aa7-451e-9478-4d8d75c0f2fa"  width="250" height="200"/>
+

 #### Subgraphs

@@ -78,11 +72,7 @@ flowchart TB
  end
 ```

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/098bce52-8f93-437c-9a06-c6972e27c70a"
-  width="350"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/098bce52-8f93-437c-9a06-c6972e27c70a"  width="350" height="200"/>

 #### Unsupported shapes fallback to Rectangle

@@ -97,14 +87,9 @@ flowchart LR
  id5[/Parallelogram fallback to Rectangle /]
  id6[/Trapezoid fallback to Rectangle\]
 ```
-
 The above shapes are not supported in Excalidraw hence they fallback to Rectangle

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/cb269473-16c5-4c35-bd7a-d631d8cc5b47"
-  width="350"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/cb269473-16c5-4c35-bd7a-d631d8cc5b47"  width="350" height="200"/>

 #### Markdown fallback to Regular text

@@ -114,12 +99,7 @@ Since we don't support wysiwyg text editor yet, hence [Markdown Strings](https:/
 flowchart LR
  A("`Hello **World**`") --> B("`Whats **up** ?`")
 ```
-
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/107bd428-9ab9-42d4-ba12-b1e29c8db478"
-  width="250"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/107bd428-9ab9-42d4-ba12-b1e29c8db478"  width="250" height="200"/>

 #### Basic FontAwesome fallback to text

@@ -132,11 +112,8 @@ flowchart TD
  B-->E(A fa:fa-camera-retro perhaps?)
 ```

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/7a693863-c3f9-42ff-b325-4b3f8303c7af"
-  width="250"
-  height="200"
-/>
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/7a693863-c3f9-42ff-b325-4b3f8303c7af"  width="250" height="200"/>

 #### Cross Arrow head fallback to Bar Arrow head

@@ -144,12 +121,8 @@ flowchart TD
 flowchart LR
  Start x--x Stop
 ```
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/217dd1ad-7f4e-4c80-8c1c-03647b42d821"  width="250" height="200"/>

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/217dd1ad-7f4e-4c80-8c1c-03647b42d821"
-  width="250"
-  height="200"
-/>

 ## Unsupported Diagram Types

@@ -162,11 +135,7 @@ erDiagram
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/c1d3fdb3-32ef-4bf3-a38a-02ac3d7d2cb9"
-  width="300"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c1d3fdb3-32ef-4bf3-a38a-02ac3d7d2cb9"  width="300" height="200"/>

 ```
 gitGraph
@@ -183,8 +152,4 @@ gitGraph

 ```

-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/e5dcec0b-d570-4eb4-b981-412a996aa96c"
-  width="400"
-  height="300"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/e5dcec0b-d570-4eb4-b981-412a996aa96c"  width="400" height="300"/>
@@ -2,6 +2,6 @@

 The Codebase is divided into 2 Sections

- [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
+* [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.

- [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.
+* [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.
@@ -10,7 +10,7 @@ lets run the playground server in local :point_down:
 yarn start
 ```

-This will start the playground server in port `1234` and open it in browser so you start playing with the playground.
+This will start the playground server in port `1234` and open it in browser so  you start playing with the playground.

 ## Update Supported Diagram Types

@@ -26,13 +26,13 @@ For this create a file named `{{diagramType}}.ts` in [`src/parser`](https://gith

 The main aim of the parser is :point_down:

-1. Determine how elements are connected in the diagram and thus finding arrow and text bindings.
+1. Determine how elements are connected in the diagram and thus finding arrow and text bindings. 

 For this you might have to dig in to the parser `diagram.parser.yy` and which attributes to parse for the new diagram.

 2. Determine the position and dimensions of each element, for this would be using the `svg`

-Once the parser is ready, lets start using it.
+Once the parser is ready, lets start using it. 

 Add the diagram type in switch case in [`parseMermaid`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L97) and call the parser for the same.

@@ -51,3 +51,4 @@ Thats it, you have added the new diagram type 🥳, now lets test it out!
 2. Incase the new diagram type added is present in [`unsupported.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/unsupported.ts) then remove it from there.

 3. Verify if the test cases are running fine in playground.
+
@@ -8,10 +8,12 @@ In this section we will be diving into how the [flowchart parser](https://github

 We use `diagram.parser.yy` attribute to parse the data. If you want to know more about how the `diagram.parse.yy` attribute looks like, you can check it [here](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), however for scope of flowchart we are using **3** APIs from this parser to compute `vertices`, `edges` and `clusters` as we need these data to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).

+
 For computing `vertices` and `edge`s lets consider the below svg generated by mermaid

 ![image](https://github.com/excalidraw/excalidraw/assets/11256141/d7013305-0b90-4fa0-a66e-b4f4604ad0b2)

+
 ## Computing the vertices

 We use `getVertices` API from `diagram.parse.yy` to get the vertices for a given flowchart.
@@ -40,10 +42,9 @@ Considering the same example this is the response from the API
 	}
 }
 ```
-
 The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) which takes the above response and uses the `svg` together to compute position, dimensions and cleans up the response.

-The final output from `parseVertex` looks like :point_down:
+ The final output from `parseVertex` looks like :point_down:

 ```js
 {
@@ -72,55 +73,57 @@ The final output from `parseVertex` looks like :point_down:
 }
 ```

+
 ## Computing the edges

-The lines and arrows are considered as `edges` in mermaid as shown in the above diagram. We use `getEdges` API from `diagram.parse.yy` to get the edges for a given flowchart. Considering the same example this is the response from the API
+The lines and arrows are considered as `edges` in mermaid as shown in the above diagram.
+We use `getEdges` API from `diagram.parse.yy` to get the edges for a given flowchart.
+Considering the same example this is the response from the API

 ```js
 [
-  {
-    start: "start",
-    end: "stop",
-    type: "arrow_point",
-    text: "",
-    labelType: "text",
-    stroke: "normal",
-    length: 1,
-  },
-];
+	{
+		"start": "start",
+		"end": "stop",
+		"type": "arrow_point",
+		"text": "",
+		"labelType": "text",
+		"stroke": "normal",
+		"length": 1
+	}
+]
 ```

 Similarly here the dimensions and position is missing and we compute that from the svg. The [`parseEdge`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L245) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.

-The final output from `parseEdge` looks like :point_down:
+ The final output from `parseEdge` looks like :point_down:

 ```js
 [
-  {
-    start: "start",
-    end: "stop",
-    type: "arrow_point",
-    text: "",
-    labelType: "text",
-    stroke: "normal",
-    startX: 67.797,
-    startY: 22,
-    endX: 117.797,
-    endY: 22,
-    reflectionPoints: [
-      {
-        x: 67.797,
-        y: 22,
-      },
-      {
-        x: 117.797,
-        y: 22,
-      },
-    ],
-  },
-];
+	{
+		"start": "start",
+		"end": "stop",
+		"type": "arrow_point",
+		"text": "",
+		"labelType": "text",
+		"stroke": "normal",
+		"startX": 67.797,
+		"startY": 22,
+		"endX": 117.797,
+		"endY": 22,
+		"reflectionPoints": [
+			{
+				"x": 67.797,
+				"y": 22
+			},
+			{
+				"x": 117.797,
+				"y": 22
+			}
+		]
+	}
+]
 ```
-
 ## Computing the Subgraphs

 `Subgraphs` is collection of elements grouped together. The Subgraphs map to `grouping` elements in Excalidraw.
@@ -129,35 +132,46 @@ Lets consider the below example :point_down:

 ![image](https://github.com/excalidraw/excalidraw/assets/11256141/5243ce4c-beaa-43d2-812a-0577b0a574d7)

-We use `getSubgraphs` API to get the subgraph data for a given flowchart. Considering the same example this is the response from the API
+We use `getSubgraphs` API to get the subgraph data for a given flowchart.
+Considering the same example this is the response from the API

 ```js
 [
-  {
-    id: "one",
-    nodes: ["flowchart-a2-1399", "flowchart-a1-1400"],
-    title: "one",
-    classes: [],
-    labelType: "text",
-  },
-];
+	{
+		"id": "one",
+		"nodes": [
+				"flowchart-a2-1399",
+				"flowchart-a1-1400"
+		],
+		"title": "one",
+		"classes": [],
+		"labelType": "text"
+	}
+]
 ```

 For position and dimensions we use the svg to compute. The [`parseSubgraph`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L139) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.

+
 ```js
 [
-  {
-    id: "one",
-    nodes: ["flowchart-a2-1399", "flowchart-a1-1400"],
-    title: "one",
-    labelType: "text",
-    nodeIds: ["a2", "a1"],
-    x: 75.4921875,
-    y: 0,
-    width: 121.25,
-    height: 188,
-    text: "one",
-  },
-];
-```
+	{
+		"id": "one",
+		"nodes": [
+				"flowchart-a2-1399",
+				"flowchart-a1-1400"
+		],
+		"title": "one",
+		"labelType": "text",
+		"nodeIds": [
+				"a2",
+				"a1"
+		],
+		"x": 75.4921875,
+		"y": 0,
+		"width": 121.25,
+		"height": 188,
+		"text": "one"
+	}
+]
+```
@@ -2,6 +2,7 @@

 [This](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/index.ts) is the entry point of the library.

+
 `parseMermaidToExcalidraw` function is the only function exposed which receives mermaid syntax as the input, parses the mermaid syntax and resolves to Excalidraw Skeleton.

 Lets look at the high level overview at how the parse works :point_down:
@@ -12,10 +13,10 @@ Lets dive deeper into individual section now to understand better.

 ## Parsing Mermaid diagram

-One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library. We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
+One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library.
+We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.

 Parsing is broken into two steps
-
 1. [`Rendering Mermaid to Svg`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#rendering-mermaid-to-svg) - This helps in determining the position and dimensions of each element in the diagram

 2. [`Parsing the mermaid syntax`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#parsing-the-mermaid-syntax) - We also need to know how elements are connected which isn't possible with svg alone hence we also parse the mermaid syntax which helps in determining the connections and bindings between elements in the diagram.
@@ -26,8 +27,10 @@ Parsing is broken into two steps

 The [`mermaid`](https://www.npmjs.com/package/mermaid) library provides the API `mermaid.render` API which gives the output of the diagram in `svg`.

+
 If the diagram isn't supported, this svg is converted to `dataURL` and can be rendered as an image in Excalidraw.

+
 ### Parsing the mermaid syntax

 For this we first need to process the options along with mermaid defination for diagram provided by the user.
@@ -54,8 +57,9 @@ If you want to understand how flowchart parser works, you can navigate to [Flowc

 Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.

-For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton. For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
+For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton.
+For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.

 For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).

-![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)
@@ -10,6 +10,7 @@ To set up the library in local, follow the below steps 👇🏼

 Go to [@excalidraw/mermaid-to-excalidraw](https://github.com/excalidraw/mermaid-to-excalidraw) and clone the repository to your local.

+
 ```bash
 git clone git@github.com:excalidraw/mermaid-to-excalidraw.git
 ```
@@ -20,7 +20,7 @@ Once the library is installed, its ready to use.

 ```js
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
-import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
+import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"

 try {
  const { elements, files } = await parseMermaid(diagramDefinition, {
@@ -38,4 +38,5 @@ try {

 ## Playground

-Try it out [here](https://mermaid-to-excalidraw.vercel.app)
+ Try it out [here](https://mermaid-to-excalidraw.vercel.app)
+
@@ -2,7 +2,8 @@

 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.

-We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you. For new contributors we would recommend to start with _Easy_ tasks.
+We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
+For new contributors we would recommend to start with *Easy* tasks.

 In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.

@@ -59,7 +60,10 @@ It's also a good idea to consider if your change should include additional tests

 Finally - always manually test your changes using the convenient staging environment deployed for each pull request. As much as local development attempts to replicate production, there can still be subtle differences in behavior. For larger features consider testing your change in multiple browsers as well.

-:::note Some checks, such as the `lint` and `test`, require approval from the maintainers to run. They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval. :::
+:::note
+Some checks, such as the `lint` and `test`, require approval from the maintainers to run. 
+They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval.
+:::

 ## Translating

@@ -54,7 +54,7 @@ yarn
 yarn start
 ```

-### Lint & format
+### Reformat all files with Prettier

 ```bash
 yarn fix
@@ -72,6 +72,12 @@ yarn test
 yarn test:update
 ```

+### Test for formatting with Prettier
+
+```bash
+yarn test:code
+```
+
 ### Docker Compose

 You can use docker-compose to work on Excalidraw locally if you don't want to setup a Node.js env.
@@ -97,8 +97,8 @@ const config = {
                href: "https://discord.gg/UexuTaE",
              },
              {
-                label: "Twitter",
-                href: "https://twitter.com/excalidraw",
+                label: "𝕏",
+                href: "https://x.com/excalidraw",
              },
              {
                label: "Linkedin",
@@ -16,8 +16,8 @@ const FeatureList = [
    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
    description: (
      <>
-        Want to build your own app powered by Excalidraw but don&apos;t know
-        where to start?
+        Want to build your own app powered by Excalidraw but don't know where to
+        start?
      </>
    ),
  },
@@ -1,5 +1,7 @@
 {
  // This file is not used in compilation. It is here just for a nice editor experience.
  "extends": "@tsconfig/docusaurus/tsconfig.json",
-  "compilerOptions": {}
+  "compilerOptions": {
+    "baseUrl": "."
+  }
 }
@@ -11,7 +11,7 @@ const ExcalidrawWrapper: React.FC = () => {
    <>
      <App
        appTitle={"Excalidraw with Nextjs Example"}
-        useCustom={() => {}}
+        useCustom={(api: any, args?: any[]) => {}}
        excalidrawLib={excalidrawLib}
      >
        <Excalidraw />
@@ -23,12 +23,6 @@
    },
    "forceConsistentCasingInFileNames": true
  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "build/types/**/*.ts"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "build/types/**/*.ts"],
  "exclude": ["node_modules"]
 }
@@ -1,4 +1,3 @@
 {
-  "outputDirectory": "build",
-  "installCommand": "yarn install && yarn --cwd ../../ install"
+  "outputDirectory": "build"
 }
@@ -238,7 +238,7 @@ export default function ExampleApp({
            left: "50%",
            transform: "translateX(-50%)",
            bottom: "20px",
-            zIndex: 999999999999999,
+            zIndex: 9999999999999999,
          }}
        >
          Toggle Custom Sidebar
@@ -250,7 +250,7 @@ export default function ExampleApp({
          </TTDDialogTrigger>
        )}
        <TTDDialog
-          onTextSubmit={async () => {
+          onTextSubmit={async (_) => {
            console.info("submit");
            // sleep for 2s
            await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -555,7 +555,7 @@ export default function ExampleApp({
    if (!comment) {
      return null;
    }
-    const appState = excalidrawAPI?.getAppState();
+    const appState = excalidrawAPI?.getAppState()!;
    const { x, y } = sceneCoordsToViewportCoords(
      { sceneX: comment.x, sceneY: comment.y },
      appState,
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -20,7 +20,7 @@ root.render(
  <StrictMode>
    <App
      appTitle={"Excalidraw Example"}
-      useCustom={() => {}}
+      useCustom={(api: any, args?: any[]) => {}}
      excalidrawLib={window.ExcalidrawLib}
    >
      <Excalidraw />
@@ -1,4 +1,4 @@
-import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/data/transform";
+import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/element/transform";
 import type { FileId } from "@excalidraw/excalidraw/element/types";

 const elements: ExcalidrawElementSkeleton[] = [
@@ -2,21 +2,21 @@
  "name": "with-script-in-browser",
  "version": "1.0.0",
  "private": true,
-  "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "preview": "vite preview --port 5002",
-    "build:preview": "yarn build && yarn preview",
-    "build:packages": "yarn --cwd ../../ build:packages"
-  },
  "dependencies": {
-    "@excalidraw/excalidraw": "0.18.0",
-    "browser-fs-access": "0.29.1",
+    "@excalidraw/excalidraw": "*",
+    "browser-fs-access": "0.38.0",
    "react": "19.0.0",
    "react-dom": "19.0.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "vite": "5.0.12"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5002",
+    "build:preview": "yarn build && yarn preview",
+    "build:packages": "yarn --cwd ../../ build:packages"
  }
 }
@@ -4,8 +4,6 @@ import { unstable_batchedUpdates } from "react-dom";

 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;

-const INPUT_CHANGE_INTERVAL_MS = 500;
-
 export type ResolvablePromise<T> = Promise<T> & {
  resolve: [T] extends [undefined] ? (value?: T) => void : (value: T) => void;
  reject: (error: Error) => void;
@@ -54,40 +52,6 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
    extensions,
    mimeTypes,
    multiple: opts.multiple ?? false,
-    legacySetup: (resolve, reject, input) => {
-      const scheduleRejection = debounce(reject, INPUT_CHANGE_INTERVAL_MS);
-      const focusHandler = () => {
-        checkForFile();
-        document.addEventListener("keyup", scheduleRejection);
-        document.addEventListener("pointerup", scheduleRejection);
-        scheduleRejection();
-      };
-      const checkForFile = () => {
-        // this hack might not work when expecting multiple files
-        if (input.files?.length) {
-          const ret = opts.multiple ? [...input.files] : input.files[0];
-          resolve(ret as RetType);
-        }
-      };
-      requestAnimationFrame(() => {
-        window.addEventListener("focus", focusHandler);
-      });
-      const interval = window.setInterval(() => {
-        checkForFile();
-      }, INPUT_CHANGE_INTERVAL_MS);
-      return (rejectPromise) => {
-        clearInterval(interval);
-        scheduleRejection.cancel();
-        window.removeEventListener("focus", focusHandler);
-        document.removeEventListener("keyup", scheduleRejection);
-        document.removeEventListener("pointerup", scheduleRejection);
-        if (rejectPromise) {
-          // so that something is shown in console if we need to debug this
-          console.warn("Opening the file was canceled (legacy-fs).");
-          rejectPromise(new Error("Request Aborted"));
-        }
-      };
-    },
  }) as Promise<RetType>;
 };

@@ -1,5 +1,5 @@
 {
  "outputDirectory": "dist",
-  "installCommand": "yarn install && yarn --cwd ../../ install",
+  "installCommand": "yarn install",
  "buildCommand": "yarn build:packages && yarn build"
 }
@@ -5,6 +5,8 @@ import {
  CaptureUpdateAction,
  reconcileElements,
  useEditorInterface,
+  ExcalidrawAPIProvider,
+  useExcalidrawAPI,
 } from "@excalidraw/excalidraw";
 import { trackEvent } from "@excalidraw/excalidraw/analytics";
 import { getDefaultAppState } from "@excalidraw/excalidraw/appState";
@@ -20,7 +22,6 @@ import Trans from "@excalidraw/excalidraw/components/Trans";
 import {
  APP_NAME,
  EVENT,
-  THEME,
  VERSION_TIMEOUT,
  debounce,
  getVersion,
@@ -34,7 +35,6 @@ import {
 import polyfill from "@excalidraw/excalidraw/polyfill";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { loadFromBlob } from "@excalidraw/excalidraw/data/blob";
-import { useCallbackRefState } from "@excalidraw/excalidraw/hooks/useCallbackRefState";
 import { t } from "@excalidraw/excalidraw/i18n";

 import {
@@ -74,6 +74,7 @@ import type {
  BinaryFiles,
  ExcalidrawInitialDataState,
  UIAppState,
+  ExcalidrawProps,
 } from "@excalidraw/excalidraw/types";
 import type { ResolutionType } from "@excalidraw/common/utility-types";
 import type { ResolvablePromise } from "@excalidraw/common/utils";
@@ -114,6 +115,7 @@ import {
 } from "./data";

 import { updateStaleImageStatuses } from "./data/FileManager";
+import { FileStatusStore } from "./data/fileStatusStore";
 import {
  importFromLocalStorage,
  importUsernameFromLocalStorage,
@@ -192,7 +194,7 @@ if (window.self !== window.top) {
    if (parentUrl.origin === currentUrl.origin) {
      isSelfEmbedding = true;
    }
-  } catch {
+  } catch (error) {
    // ignore
  }
 }
@@ -310,7 +312,7 @@ const initializeScene = async (opts: {
      ) {
        return { scene: data, isExternalScene };
      }
-    } catch {
+    } catch (error: any) {
      return {
        scene: {
          appState: {
@@ -369,6 +371,8 @@ const initializeScene = async (opts: {
 };

 const ExcalidrawWrapper = () => {
+  const excalidrawAPI = useExcalidrawAPI();
+
  const [errorMessage, setErrorMessage] = useState("");
  const isCollabDisabled = isRunningInIframe();

@@ -399,9 +403,6 @@ const ExcalidrawWrapper = () => {
    }, VERSION_TIMEOUT);
  }, []);

-  const [excalidrawAPI, excalidrawRefCallback] =
-    useCallbackRefState<ExcalidrawImperativeAPI>();
-
  const [, setShareDialogState] = useAtom(shareDialogStateAtom);
  const [collabAPI] = useAtom(collabAPIAtom);
  const [isCollaborating] = useAtomWithInitialValue(isCollaboratingAtom, () => {
@@ -433,18 +434,15 @@ const ExcalidrawWrapper = () => {
    }
  }, [excalidrawAPI]);

-  useEffect(() => {
-    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
-      return;
-    }
-
-    const loadImages = (
-      data: ResolutionType<typeof initializeScene>,
-      isInitialLoad = false,
-    ) => {
-      if (!data.scene) {
+  // ---------------------------------------------------------------------------
+  // Hoisted loadImages
+  // ---------------------------------------------------------------------------
+  const loadImages = useCallback(
+    (data: ResolutionType<typeof initializeScene>, isInitialLoad = false) => {
+      if (!data.scene || !excalidrawAPI) {
        return;
      }
+
      if (collabAPI?.isCollaborating()) {
        if (data.scene.elements) {
          collabAPI
@@ -471,6 +469,12 @@ const ExcalidrawWrapper = () => {
          }, [] as FileId[]) || [];

        if (data.isExternalScene) {
+          if (fileIds.length) {
+            // Direct Firebase call (not through FileManager), so track manually
+            FileStatusStore.updateStatuses(
+              fileIds.map((id) => [id, "loading"]),
+            );
+          }
          loadFilesFromFirebase(
            `${FIREBASE_STORAGE_PREFIXES.shareLinkFiles}/${data.id}`,
            data.key,
@@ -482,12 +486,18 @@ const ExcalidrawWrapper = () => {
              erroredFiles,
              elements: excalidrawAPI.getSceneElementsIncludingDeleted(),
            });
+            FileStatusStore.updateStatuses([
+              ...loadedFiles.map((f) => [f.id, "loaded"] as [FileId, "loaded"]),
+              ...[...erroredFiles.keys()].map(
+                (id) => [id, "error"] as [FileId, "error"],
+              ),
+            ]);
          });
        } else if (isInitialLoad) {
          if (fileIds.length) {
            LocalData.fileStorage
              .getFiles(fileIds)
-              .then(({ loadedFiles, erroredFiles }) => {
+              .then(async ({ loadedFiles, erroredFiles }) => {
                if (loadedFiles.length) {
                  excalidrawAPI.addFiles(loadedFiles);
                }
@@ -500,10 +510,19 @@ const ExcalidrawWrapper = () => {
          }
          // on fresh load, clear unused files from IDB (from previous
          // session)
-          LocalData.fileStorage.clearObsoleteFiles({ currentFileIds: fileIds });
+          LocalData.fileStorage.clearObsoleteFiles({
+            currentFileIds: fileIds,
+          });
        }
      }
-    };
+    },
+    [collabAPI, excalidrawAPI],
+  );
+
+  useEffect(() => {
+    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
+      return;
+    }

    initializeScene({ collabAPI, excalidrawAPI }).then(async (data) => {
      loadImages(data, /* isInitialLoad */ true);
@@ -628,7 +647,7 @@ const ExcalidrawWrapper = () => {
        false,
      );
    };
-  }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode]);
+  }, [isCollabDisabled, collabAPI, excalidrawAPI, setLangCode, loadImages]);

  useEffect(() => {
    const unloadHandler = (event: BeforeUnloadEvent) => {
@@ -773,6 +792,56 @@ const ExcalidrawWrapper = () => {
    [setShareDialogState],
  );

+  // ---------------------------------------------------------------------------
+  // onExport — intercepts file save to wait for pending image loads
+  // ---------------------------------------------------------------------------
+  const onExport: Required<ExcalidrawProps>["onExport"] = useCallback(
+    async function* () {
+      let snapshot = FileStatusStore.getSnapshot();
+      const { pending, total } = FileStatusStore.getPendingCount(
+        snapshot.value,
+      );
+      if (pending === 0) {
+        return;
+      }
+
+      // Yield initial progress
+      yield {
+        type: "progress",
+        progress: (total - pending) / total,
+        message: `Loading images (${total - pending}/${total})...`,
+      };
+
+      // Wait for all pending images to finish
+      while (true) {
+        snapshot = await FileStatusStore.pull(snapshot.version);
+        const { pending: nowPending, total: nowTotal } =
+          FileStatusStore.getPendingCount(snapshot.value);
+
+        yield {
+          type: "progress",
+          progress: (nowTotal - nowPending) / nowTotal,
+          message: `Loading images (${nowTotal - nowPending}/${nowTotal})...`,
+        };
+
+        if (nowPending === 0) {
+          await new Promise((r) => setTimeout(r, 500));
+          yield {
+            type: "progress",
+            message: `Preparing export...`,
+          };
+          return;
+        }
+      }
+    },
+    [],
+  );
+
+  // const onExport = () => {
+  //   return new Promise((r) => setTimeout(r, 2500));
+  //   // console.log("onExport");
+  // };
+
  // browsers generally prevent infinite self-embedding, there are
  // cases where it still happens, and while we disallow self-embedding
  // by not whitelisting our own origin, this serves as an additional guard
@@ -787,7 +856,7 @@ const ExcalidrawWrapper = () => {
          height: "100%",
        }}
      >
-        <h1>I&apos;m not a pretzel!</h1>
+        <h1>I'm not a pretzel!</h1>
      </div>
    );
  }
@@ -839,8 +908,8 @@ const ExcalidrawWrapper = () => {
      })}
    >
      <Excalidraw
-        excalidrawAPI={excalidrawRefCallback}
        onChange={onChange}
+        onExport={onExport}
        initialData={initialStatePromiseRef.current.promise}
        isCollaborating={isCollaborating}
        onPointerUpdate={collabAPI?.onPointerUpdate}
@@ -882,6 +951,7 @@ const ExcalidrawWrapper = () => {
        handleKeyboardGlobally={true}
        autoFocus={true}
        theme={editorTheme}
+        onThemeChange={setAppTheme}
        renderTopRightUI={(isMobile) => {
          if (isMobile || !collabAPI || isCollabDisabled) {
            return null;
@@ -918,7 +988,6 @@ const ExcalidrawWrapper = () => {
          isCollaborating={isCollaborating}
          isCollabEnabled={!isCollabDisabled}
          theme={appTheme}
-          setTheme={(theme) => setAppTheme(theme)}
          refresh={() => forceRefresh((prev) => !prev)}
        />
        <AppWelcomeScreen
@@ -1159,14 +1228,6 @@ const ExcalidrawWrapper = () => {
                }
              },
            },
-            {
-              ...CommandPalette.defaultItems.toggleTheme,
-              perform: () => {
-                setAppTheme(
-                  editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK,
-                );
-              },
-            },
            {
              label: t("labels.installPWA"),
              category: DEFAULT_CATEGORIES.app,
@@ -1206,7 +1267,9 @@ const ExcalidrawApp = () => {
  return (
    <TopErrorBoundary>
      <Provider store={appJotaiStore}>
-        <ExcalidrawWrapper />
+        <ExcalidrawAPIProvider>
+          <ExcalidrawWrapper />
+        </ExcalidrawAPIProvider>
      </Provider>
    </TopErrorBoundary>
  );
@@ -72,6 +72,7 @@ import {
  FileManager,
  updateStaleImageStatuses,
 } from "../data/FileManager";
+import { FileStatusStore } from "../data/fileStatusStore";
 import { LocalData } from "../data/LocalData";
 import {
  isSavedToFirebase,
@@ -149,6 +150,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
    };
    this.portal = new Portal(this);
    this.fileManager = new FileManager({
+      onFileStatusChange: FileStatusStore.updateStatuses.bind(FileStatusStore),
      getFiles: async (fileIds) => {
        const { roomId, roomKey } = this.portal;
        if (!roomId || !roomKey) {
@@ -210,9 +212,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
    window.addEventListener(EVENT.UNLOAD, this.onUnload);

    const unsubOnUserFollow = this.excalidrawAPI.onUserFollow((payload) => {
-      if (this.portal.socket) {
-        this.portal.broadcastUserFollowed(payload);
-      }
+      this.portal.socket && this.portal.broadcastUserFollowed(payload);
    });
    const throttledRelayUserViewportBounds = throttleRAF(
      this.relayVisibleSceneBounds,
@@ -917,9 +917,9 @@ class Collab extends PureComponent<CollabProps, CollabState> {
      button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
      pointersMap: Gesture["pointers"];
    }) => {
-      if (payload.pointersMap.size < 2 && this.portal.socket) {
+      payload.pointersMap.size < 2 &&
+        this.portal.socket &&
        this.portal.broadcastMouseLocation(payload);
-      }
    },
    CURSOR_SYNC_TIMEOUT,
  );
@@ -1,4 +1,4 @@
-@use "../../packages/excalidraw/css/variables.module.scss" as *;
+@import "../../packages/excalidraw/css/variables.module.scss";

 .excalidraw {
  .collab-errors-button {
@@ -46,7 +46,7 @@ class Portal {
        trackEvent("share", "room joined");
      }
    });
-    this.socket.on("new-user", async () => {
+    this.socket.on("new-user", async (_socketId: string) => {
      this.broadcastScene(
        WS_SUBTYPES.INIT,
        this.collab.getSceneElementsIncludingDeleted(),
@@ -95,7 +95,7 @@ export const AIComponents = ({
            return {
              html,
            };
-          } catch {
+          } catch (error: any) {
            throw new Error("Generation failed (invalid response)");
          }
        }}
@@ -20,7 +20,6 @@ export const AppMainMenu: React.FC<{
  isCollaborating: boolean;
  isCollabEnabled: boolean;
  theme: Theme | "system";
-  setTheme: (theme: Theme | "system") => void;
  refresh: () => void;
 }> = React.memo((props) => {
  return (
@@ -78,11 +77,7 @@ export const AppMainMenu: React.FC<{
      )}
      <MainMenu.Separator />
      <MainMenu.DefaultItems.Preferences />
-      <MainMenu.DefaultItems.ToggleTheme
-        allowSystemTheme
-        theme={props.theme}
-        onSelect={props.setTheme}
-      />
+      <MainMenu.DefaultItems.ToggleTheme allowSystemTheme theme={props.theme} />
      <MainMenu.ItemCustom>
        <LanguageList style={{ width: "100%" }} />
      </MainMenu.ItemCustom>
@@ -16,8 +16,11 @@
    background-position: center;
    background-repeat: no-repeat;

-    background-image:
-      radial-gradient(circle, transparent 60%, var(--sidebar-bg-color) 100%),
+    background-image: radial-gradient(
+        circle,
+        transparent 60%,
+        var(--sidebar-bg-color) 100%
+      ),
      var(--image-source);

    display: flex;
@@ -414,7 +414,6 @@ export const debugRenderer = throttleRAF(
  ) => {
    _debugRenderer(canvas, appState, elements, scale);
  },
-  { trailing: true },
 );

 export const loadSavedDebugState = () => {
@@ -28,7 +28,7 @@ export class TopErrorBoundary extends React.Component<
    for (const [key, value] of Object.entries({ ...localStorage })) {
      try {
        _localStorage[key] = JSON.parse(value);
-      } catch {
+      } catch (error: any) {
        _localStorage[key] = value;
      }
    }
@@ -37,7 +37,7 @@ export class TopErrorBoundary extends React.Component<
      scope.setExtras(errorInfo);
      const eventId = Sentry.captureException(error);

-      this.setState(() => ({
+      this.setState((state) => ({
        hasError: true,
        sentryEventId: eventId,
        localStorage: JSON.stringify(_localStorage),
@@ -40,10 +40,12 @@ export class FileManager {

  private _getFiles;
  private _saveFiles;
+  private _onFileStatusChange;

  constructor({
    getFiles,
    saveFiles,
+    onFileStatusChange,
  }: {
    getFiles: (fileIds: FileId[]) => Promise<{
      loadedFiles: BinaryFileData[];
@@ -53,9 +55,13 @@ export class FileManager {
      savedFiles: Map<FileId, BinaryFileData>;
      erroredFiles: Map<FileId, BinaryFileData>;
    }>;
+    onFileStatusChange?: (
+      updates: Array<[FileId, "loading" | "loaded" | "error"]>,
+    ) => void;
  }) {
    this._getFiles = getFiles;
    this._saveFiles = saveFiles;
+    this._onFileStatusChange = onFileStatusChange;
  }

  /**
@@ -146,6 +152,8 @@ export class FileManager {
      this.fetchingFiles.set(id, true);
    }

+    this._onFileStatusChange?.(ids.map((id) => [id, "loading"]));
+
    try {
      const { loadedFiles, erroredFiles } = await this._getFiles(ids);

@@ -156,6 +164,13 @@ export class FileManager {
        this.erroredFiles_fetch.set(fileId, true);
      }

+      this._onFileStatusChange?.([
+        ...loadedFiles.map((f) => [f.id, "loaded"] as [FileId, "loaded"]),
+        ...[...erroredFiles.keys()].map(
+          (id) => [id, "error"] as [FileId, "error"],
+        ),
+      ]);
+
      return { loadedFiles, erroredFiles };
    } finally {
      for (const id of ids) {
@@ -195,6 +210,13 @@ export class FileManager {
  };

  reset() {
+    if (this._onFileStatusChange && this.fetchingFiles.size) {
+      this._onFileStatusChange(
+        [...this.fetchingFiles.keys()].map(
+          (id) => [id, "error"] as [FileId, "error"],
+        ),
+      );
+    }
    this.fetchingFiles.clear();
    this.savingFiles.clear();
    this.savedFiles.clear();
@@ -26,7 +26,6 @@ import {
  get,
 } from "idb-keyval";

-import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
 import { getNonDeletedElements } from "@excalidraw/element";

 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
@@ -39,9 +38,11 @@ import type {
 } from "@excalidraw/excalidraw/types";
 import type { MaybePromise } from "@excalidraw/common/utility-types";

+import { appJotaiStore, atom } from "../app-jotai";
 import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";

 import { FileManager } from "./FileManager";
+import { FileStatusStore } from "./fileStatusStore";
 import { Locker } from "./Locker";
 import { updateBrowserStateVersion } from "./tabSync";

@@ -166,6 +167,7 @@ export class LocalData {
  // ---------------------------------------------------------------------------

  static fileStorage = new LocalFileManager({
+    onFileStatusChange: FileStatusStore.updateStatuses.bind(FileStatusStore),
    getFiles(ids) {
      return getMany(ids, filesStore).then(
        async (filesData: (BinaryFileData | undefined)[]) => {
@@ -0,0 +1,48 @@
+import { VersionedSnapshotStore } from "@excalidraw/common";
+
+import type { FileId } from "@excalidraw/element/types";
+
+export type FileLoadingStatus = "loading" | "loaded" | "error";
+
+export class FileStatusStore {
+  private static store = new VersionedSnapshotStore<
+    Map<FileId, FileLoadingStatus>
+  >(new Map());
+
+  static getSnapshot() {
+    return this.store.getSnapshot();
+  }
+
+  static pull(sinceVersion?: number) {
+    return this.store.pull(sinceVersion);
+  }
+
+  static updateStatuses(updates: Array<[FileId, FileLoadingStatus]>) {
+    if (!updates.length) {
+      return;
+    }
+    this.store.update((prev) => {
+      let changed = false;
+      const next = new Map(prev);
+      for (const [id, status] of updates) {
+        if (next.get(id) !== status) {
+          next.set(id, status);
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }
+
+  static getPendingCount(statuses: Map<FileId, FileLoadingStatus>) {
+    let pending = 0;
+    let total = 0;
+    for (const status of statuses.values()) {
+      total++;
+      if (status === "loading") {
+        pending++;
+      }
+    }
+    return { pending, total };
+  }
+}
@@ -44,7 +44,7 @@ import type { Socket } from "socket.io-client";
 let FIREBASE_CONFIG: Record<string, any>;
 try {
  FIREBASE_CONFIG = JSON.parse(import.meta.env.VITE_APP_FIREBASE_CONFIG);
-} catch {
+} catch (error: any) {
  console.warn(
    `Error JSON parsing firebase config. Supplied value: ${
      import.meta.env.VITE_APP_FIREBASE_CONFIG
@@ -162,7 +162,7 @@ export const saveFilesToFirebase = async ({
          cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`,
        });
        savedFiles.push(id);
-      } catch {
+      } catch (error: any) {
        erroredFiles.push(id);
      }
    }),
@@ -181,7 +181,7 @@ const legacy_decodeFromBackend = async ({
    const iv = buffer.slice(0, IV_LENGTH_BYTES);
    const encrypted = buffer.slice(IV_LENGTH_BYTES, buffer.byteLength);
    decrypted = await decryptData(new Uint8Array(iv), encrypted, decryptionKey);
-  } catch {
+  } catch (error: any) {
    // Fixed IV (old format, backward compatibility)
    const fixedIv = new Uint8Array(IV_LENGTH_BYTES);
    decrypted = await decryptData(fixedIv, buffer, decryptionKey);
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -1,4 +1,4 @@
-@use "../packages/excalidraw/css/variables.module.scss" as *;
+@import "../packages/excalidraw/css/variables.module.scss";

 .excalidraw {
  --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion
@@ -3,34 +3,6 @@
  "version": "1.0.0",
  "private": true,
  "homepage": ".",
-  "scripts": {
-    "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
-    "build:version": "node ../scripts/build-version.js",
-    "build": "yarn build:app && yarn build:version",
-    "start": "yarn && vite",
-    "start:production": "yarn build && yarn serve",
-    "serve": "npx http-server build -a localhost -p 5001 -o",
-    "build:preview": "yarn build && vite preview --port 5000"
-  },
-  "dependencies": {
-    "@excalidraw/random-username": "1.0.0",
-    "@sentry/browser": "9.0.1",
-    "callsites": "4.2.0",
-    "firebase": "11.3.1",
-    "i18next-browser-languagedetector": "6.1.4",
-    "idb-keyval": "6.0.3",
-    "jotai": "2.11.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "socket.io-client": "4.7.2",
-    "uqr": "0.1.2",
-    "vite-plugin-html": "3.2.2"
-  },
-  "devDependencies": {
-    "vite-plugin-sitemap": "0.7.1"
-  },
  "browserslist": {
    "production": [
      ">0.2%",
@@ -52,5 +24,34 @@
  },
  "engines": {
    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@excalidraw/random-username": "1.0.0",
+    "@sentry/browser": "9.0.1",
+    "callsites": "4.2.0",
+    "firebase": "11.3.1",
+    "i18next-browser-languagedetector": "6.1.4",
+    "idb-keyval": "6.0.3",
+    "jotai": "2.11.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "socket.io-client": "4.7.2",
+    "uqr": "0.1.2",
+    "vite-plugin-html": "3.2.2"
+  },
+  "prettier": "@excalidraw/prettier-config",
+  "scripts": {
+    "build-node": "node ./scripts/build-node.js",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
+    "build:version": "node ../scripts/build-version.js",
+    "build": "yarn build:app && yarn build:version",
+    "start": "yarn && vite",
+    "start:production": "yarn build && yarn serve",
+    "serve": "npx http-server build -a localhost -p 5001 -o",
+    "build:preview": "yarn build && vite preview --port 5000"
+  },
+  "devDependencies": {
+    "vite-plugin-sitemap": "0.7.1"
  }
 }
@@ -1,4 +1,4 @@
-@use "../../packages/excalidraw/css/variables.module.scss" as *;
+@import "../../packages/excalidraw/css/variables.module.scss";

 .excalidraw {
  .ShareDialog {
@@ -73,7 +73,7 @@ const ActiveRoomDialog = ({
  const copyRoomLink = async () => {
    try {
      await copyTextToSystemClipboard(activeRoomLink);
-    } catch {
+    } catch (e) {
      collabAPI.setCollabError(t("errors.copyToSystemClipboardFailed"));
    }

@@ -97,7 +97,7 @@ const ActiveRoomDialog = ({
        text: t("roomDialog.shareTitle"),
        url: activeRoomLink,
      });
-    } catch {
+    } catch (error: any) {
      // Just ignore.
    }
  };
@@ -1,5 +1,4 @@
 import { THEME } from "@excalidraw/excalidraw";
-import { EVENT, CODES, KEYS } from "@excalidraw/common";
 import { useEffect, useLayoutEffect, useState } from "react";

 import type { Theme } from "@excalidraw/element/types";
@@ -31,28 +30,10 @@ export const useHandleAppTheme = () => {
      mediaQuery?.addEventListener("change", handleChange);
    }

-    const handleKeydown = (event: KeyboardEvent) => {
-      if (
-        !event[KEYS.CTRL_OR_CMD] &&
-        event.altKey &&
-        event.shiftKey &&
-        event.code === CODES.D
-      ) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        setAppTheme(editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK);
-      }
-    };
-
-    document.addEventListener(EVENT.KEYDOWN, handleKeydown, { capture: true });
-
    return () => {
      mediaQuery?.removeEventListener("change", handleChange);
-      document.removeEventListener(EVENT.KEYDOWN, handleKeydown, {
-        capture: true,
-      });
    };
-  }, [appTheme, editorTheme, setAppTheme]);
+  }, [appTheme]);

  useLayoutEffect(() => {
    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, appTheme);
@@ -26,6 +26,9 @@ interface ImportMetaEnv {
  // Set this flag to false if you want to open the overlay by default
  VITE_APP_COLLAPSE_OVERLAY: string;

+  // Enable eslint in dev server
+  VITE_APP_ENABLE_ESLINT: string;
+
  // Enable PWA in dev server
  VITE_APP_ENABLE_PWA: string;

@@ -5,7 +5,6 @@ import svgrPlugin from "vite-plugin-svgr";
 import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
-import oxlint from "vite-plugin-oxlint";
 import { createHtmlPlugin } from "vite-plugin-html";
 import Sitemap from "vite-plugin-sitemap";
 import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
@@ -76,6 +75,20 @@ export default defineConfig(({ mode }) => {
          find: /^@excalidraw\/utils\/(.*?)/,
          replacement: path.resolve(__dirname, "../packages/utils/src/$1"),
        },
+        {
+          find: /^@excalidraw\/fractional-indexing$/,
+          replacement: path.resolve(
+            __dirname,
+            "../packages/fractional-indexing/src/index.ts",
+          ),
+        },
+        {
+          find: /^@excalidraw\/laser-pointer$/,
+          replacement: path.resolve(
+            __dirname,
+            "../packages/laser-pointer/src/index.ts",
+          ),
+        },
      ],
    },
    build: {
@@ -107,6 +120,10 @@ export default defineConfig(({ mode }) => {
            if (id.includes("@excalidraw/mermaid-to-excalidraw")) {
              return "mermaid-to-excalidraw";
            }
+
+            if (id.includes("@codemirror/") || id.includes("@lezer/")) {
+              return "codemirror.chunk";
+            }
          },
        },
      },
@@ -126,16 +143,15 @@ export default defineConfig(({ mode }) => {
      react(),
      checker({
        typescript: true,
+        eslint:
+          envVars.VITE_APP_ENABLE_ESLINT === "false"
+            ? undefined
+            : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
        overlay: {
          initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
          badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
        },
      }),
-      oxlint({
-        configFile: path.resolve(__dirname, "../.oxlintrc.json"),
-        path: path.resolve(__dirname, ".."),
-        oxlintPath: path.resolve(__dirname, "../node_modules/.bin/oxlint"),
-      }),
      svgrPlugin(),
      ViteEjsPlugin(),
      VitePWA({
@@ -152,6 +168,11 @@ export default defineConfig(({ mode }) => {
            "**/locales/**",
            "service-worker.js",
            "**/*.chunk-*.js",
+            // CodeMirrorEditor can't be assigned a `.chunk` name via
+            // manualChunks because Rollup would hoist shared deps (React)
+            // via a static import from the main bundle, defeating lazy
+            // loading. So we exclude it by name instead.
+            "**/CodeMirrorEditor-*.js",
          ],
          runtimeCaching: [
            {
@@ -191,7 +212,7 @@ export default defineConfig(({ mode }) => {
              },
            },
            {
-              urlPattern: new RegExp(".chunk-.+.js"),
+              urlPattern: new RegExp("(.chunk-.+|CodeMirrorEditor-.+)\\.js"),
              handler: "CacheFirst",
              options: {
                cacheName: "chunk",
@@ -1,53 +1,16 @@
 {
-  "name": "excalidraw-monorepo",
  "private": true,
-  "homepage": ".",
+  "name": "excalidraw-monorepo",
+  "packageManager": "yarn@1.22.22",
  "workspaces": [
    "excalidraw-app",
-    "packages/*"
+    "packages/*",
+    "examples/*"
  ],
-  "scripts": {
-    "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "yarn --cwd ./excalidraw-app build:app:docker",
-    "build:app": "yarn --cwd ./excalidraw-app build:app",
-    "build:common": "yarn --cwd ./packages/common build:esm",
-    "build:element": "yarn --cwd ./packages/element build:esm",
-    "build:excalidraw": "yarn --cwd ./packages/excalidraw build:esm",
-    "build:math": "yarn --cwd ./packages/math build:esm",
-    "build:packages": "yarn build:common && yarn build:math && yarn build:element && yarn build:excalidraw",
-    "build:version": "yarn --cwd ./excalidraw-app build:version",
-    "build": "yarn --cwd ./excalidraw-app build",
-    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
-    "start": "yarn --cwd ./excalidraw-app start",
-    "start:production": "yarn --cwd ./excalidraw-app start:production",
-    "start:example": "yarn build:packages && yarn --cwd ./examples/with-script-in-browser start",
-    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
-    "test:app": "vitest",
-    "test:code": "oxlint .",
-    "test:other": "oxfmt --check .",
-    "test:typecheck": "tsc",
-    "test:update": "yarn test:app --update --watch=false",
-    "test": "yarn test:app",
-    "test:coverage": "vitest --coverage",
-    "test:coverage:watch": "vitest --coverage --watch",
-    "test:ui": "yarn test --ui --coverage.enabled=true",
-    "lint": "oxlint",
-    "lint:type-aware": "oxlint --type-aware",
-    "lint:fix": "oxlint --fix",
-    "format:fix": "oxfmt",
-    "fix": "yarn lint:fix && yarn format:fix",
-    "locales-coverage": "node scripts/build-locales-coverage.js",
-    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "release": "node scripts/release.js",
-    "release:test": "node scripts/release.js --tag=test",
-    "release:next": "node scripts/release.js --tag=next",
-    "release:latest": "node scripts/release.js --tag=latest",
-    "rm:build": "rimraf --glob excalidraw-app/build excalidraw-app/dist excalidraw-app/dev-dist packages/*/dist packages/*/build examples/*/build examples/*/dist",
-    "rm:node_modules": "rimraf --glob node_modules excalidraw-app/node_modules packages/*/node_modules",
-    "clean-install": "yarn rm:node_modules && yarn install"
-  },
  "devDependencies": {
    "@babel/preset-env": "7.26.9",
+    "@excalidraw/eslint-config": "1.0.3",
+    "@excalidraw/prettier-config": "1.0.2",
    "@types/chai": "4.3.0",
    "@types/jest": "27.4.0",
    "@types/lodash.throttle": "4.1.7",
@@ -59,30 +22,75 @@
    "@vitest/ui": "2.0.5",
    "chai": "4.3.6",
    "dotenv": "16.0.1",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-prettier": "3.3.1",
    "http-server": "14.1.1",
+    "husky": "7.0.4",
    "jsdom": "22.1.0",
    "lint-staged": "12.3.7",
-    "oxfmt": "0.26.0",
-    "oxlint": "1.41.0",
-    "oxlint-tsgolint": "0.11.1",
    "pepjs": "0.5.3",
+    "prettier": "2.6.2",
    "rewire": "6.0.0",
    "rimraf": "^5.0.0",
    "typescript": "5.9.3",
    "vite": "5.0.12",
    "vite-plugin-checker": "0.7.2",
    "vite-plugin-ejs": "1.7.0",
-    "vite-plugin-oxlint": "github:dwelle/vite-plugin-oxlint",
    "vite-plugin-pwa": "0.21.1",
    "vite-plugin-svgr": "4.2.0",
    "vitest": "3.0.6",
    "vitest-canvas-mock": "0.3.3"
  },
-  "resolutions": {
-    "strip-ansi": "6.0.1"
-  },
  "engines": {
    "node": ">=18.0.0"
  },
-  "packageManager": "yarn@1.22.22"
+  "homepage": ".",
+  "prettier": "@excalidraw/prettier-config",
+  "scripts": {
+    "build-node": "node ./scripts/build-node.js",
+    "build:app:docker": "yarn --cwd ./excalidraw-app build:app:docker",
+    "build:app": "yarn --cwd ./excalidraw-app build:app",
+    "build:common": "yarn --cwd ./packages/common build:esm",
+    "build:element": "yarn --cwd ./packages/element build:esm",
+    "build:excalidraw": "yarn --cwd ./packages/excalidraw build:esm",
+    "build:math": "yarn --cwd ./packages/math build:esm",
+    "build:fractional-indexing": "yarn --cwd ./packages/fractional-indexing build:esm",
+    "build:laser-pointer": "yarn --cwd ./packages/laser-pointer build:esm",
+    "build:packages": "yarn build:common && yarn build:fractional-indexing && yarn build:laser-pointer && yarn build:math && yarn build:element && yarn build:excalidraw",
+    "build:version": "yarn --cwd ./excalidraw-app build:version",
+    "build": "yarn --cwd ./excalidraw-app build",
+    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
+    "start": "yarn --cwd ./excalidraw-app start",
+    "start:production": "yarn --cwd ./excalidraw-app start:production",
+    "start:example": "yarn build:packages && yarn --cwd ./examples/with-script-in-browser start",
+    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
+    "test:app": "vitest",
+    "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
+    "test:other": "yarn prettier --list-different",
+    "test:typecheck": "tsc",
+    "test:update": "yarn test:app --update --watch=false",
+    "test": "yarn test:app",
+    "test:coverage": "vitest --coverage",
+    "test:coverage:watch": "vitest --coverage --watch",
+    "test:ui": "yarn test --ui --coverage.enabled=true",
+    "fix:code": "yarn test:code --fix",
+    "fix:other": "yarn prettier --write",
+    "fix": "yarn fix:other && yarn fix:code",
+    "locales-coverage": "node scripts/build-locales-coverage.js",
+    "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "prepare": "husky install",
+    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
+    "release": "node scripts/release.js",
+    "release:test": "node scripts/release.js --tag=test",
+    "release:next": "node scripts/release.js --tag=next",
+    "release:latest": "node scripts/release.js --tag=latest",
+    "rm:build": "rimraf --glob excalidraw-app/build excalidraw-app/dist excalidraw-app/dev-dist packages/*/dist packages/*/build examples/*/build examples/*/dist",
+    "rm:node_modules": "rimraf --glob node_modules excalidraw-app/node_modules packages/*/node_modules",
+    "clean-install": "yarn rm:node_modules && yarn install"
+  },
+  "resolutions": {
+    "strip-ansi": "6.0.1"
+  }
 }
@@ -0,0 +1,3 @@
+{
+  "extends": ["../eslintrc.base.json"]
+}
@@ -1,21 +1,10 @@
 {
  "name": "@excalidraw/common",
  "version": "0.18.0",
-  "description": "Excalidraw common functions, constants, etc.",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-utils"
-  ],
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "license": "MIT",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "files": [
-    "dist/*"
-  ],
  "type": "module",
+  "types": "./dist/types/common/src/index.d.ts",
  "main": "./dist/prod/index.js",
  "module": "./dist/prod/index.js",
-  "types": "./dist/types/common/src/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/types/common/src/index.d.ts",
@@ -30,19 +19,18 @@
      "default": "./dist/prod/index.js"
    }
  },
+  "files": [
+    "dist/*"
+  ],
+  "description": "Excalidraw common functions, constants, etc.",
  "publishConfig": {
    "access": "public"
  },
-  "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"
-  },
+  "license": "MIT",
+  "keywords": [
+    "excalidraw",
+    "excalidraw-utils"
+  ],
  "browserslist": {
    "production": [
      ">0.2%",
@@ -61,5 +49,17 @@
      "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"
  }
 }
@@ -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');
+  });
+});
@@ -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();
+  }
+}
@@ -80,7 +80,11 @@ const cssInvert = (
  return { r: invertedR, g: invertedG, b: invertedB };
 };

-export const applyDarkModeFilter = (color: string): string => {
+export const applyDarkModeFilter = (color: string, enable = true): string => {
+  if (!enable) {
+    return color;
+  }
+
  const cached = DARK_MODE_COLORS_CACHE?.get(color);
  if (cached) {
    return cached;
@@ -118,15 +122,12 @@ 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]>;
+  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];
@@ -243,22 +244,21 @@ export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
 // -----------------------------------------------------------------------------

 // !!!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],
+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],
-  ] as const;
+  // 3rd row
+  COLOR_PALETTE.green[index],
+  COLOR_PALETTE.teal[index],
+  COLOR_PALETTE.yellow[index],
+  COLOR_PALETTE.orange[index],
+  COLOR_PALETTE.red[index],
+];

 // -----------------------------------------------------------------------------
 // other helpers
@@ -337,9 +337,10 @@ 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_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-
-export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+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"?>
@@ -403,11 +404,47 @@ export const ROUGHNESS = {
  cartoonist: 2,
 } as const;

-export const STROKE_WIDTH = {
+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,
-} as const;
+  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"];
@@ -422,7 +459,7 @@ export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: COLOR_PALETTE.black,
  backgroundColor: COLOR_PALETTE.transparent,
  fillStyle: "solid",
-  strokeWidth: 2,
+  strokeWidth: STROKE_WIDTH[DEFAULT_ELEMENT_STROKE_WIDTH_KEY],
  strokeStyle: "solid",
  roughness: ROUGHNESS.artist,
  opacity: 100,
@@ -513,3 +550,6 @@ export const BIND_MODE_TIMEOUT = 700; // ms
 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;
@@ -193,7 +193,7 @@ export const loadDesktopUIModePreference = () => {
    if (stored === "compact" || stored === "full") {
      return stored as EditorInterface["desktopUIMode"];
    }
-  } catch {
+  } catch (error) {
    // ignore storage access issues (e.g., Safari private mode)
  }

@@ -206,7 +206,7 @@ const persistDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
  }
  try {
    window.localStorage.setItem(DESKTOP_UI_MODE_STORAGE_KEY, mode);
-  } catch {
+  } catch (error) {
    // ignore storage access issues (e.g., Safari private mode)
  }
 };
@@ -11,5 +11,7 @@ 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";
@@ -44,8 +44,9 @@ 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 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;
@@ -73,5 +74,6 @@ 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;
+export type MapEntry<M extends Map<any, any>> = M extends Map<infer K, infer V>
+  ? [K, V]
+  : never;
@@ -3,6 +3,12 @@ import {
  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("isTransparent()", () => {
@@ -79,4 +85,87 @@ describe("@excalidraw/common/utils", () => {
      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();
+    });
+  });
 });
@@ -88,7 +88,8 @@ export const isWritableElement = (
    (target.type === "text" ||
      target.type === "number" ||
      target.type === "password" ||
-      target.type === "search"));
+      target.type === "search")) ||
+  (target instanceof HTMLElement && target.closest(".cm-editor") !== null);

 export const getFontFamilyString = ({
  fontFamily,
@@ -150,38 +151,27 @@ export const debounce = <T extends any[]>(
  return ret;
 };

-// throttle callback to execute once per animation frame
-export const throttleRAF = <T extends any[]>(
-  fn: (...args: T) => void,
-  opts?: { trailing?: boolean },
-) => {
+// throttle callback to execute once per animation frame using the latest args
+export const throttleRAF = <T extends any[]>(fn: (...args: T) => void) => {
  let timerId: number | null = null;
  let lastArgs: T | null = null;
-  let lastArgsTrailing: T | null = null;

-  const scheduleFunc = (args: T) => {
+  const scheduleFunc = () => {
    timerId = window.requestAnimationFrame(() => {
      timerId = null;
-      fn(...args);
+      const args = lastArgs;
      lastArgs = null;
-      if (lastArgsTrailing) {
-        lastArgs = lastArgsTrailing;
-        lastArgsTrailing = null;
-        scheduleFunc(lastArgs);
+
+      if (args) {
+        fn(...args);
      }
    });
  };

  const ret = (...args: T) => {
-    if (isTestEnv()) {
-      fn(...args);
-      return;
-    }
    lastArgs = args;
    if (timerId === null) {
-      scheduleFunc(lastArgs);
-    } else if (opts?.trailing) {
-      lastArgsTrailing = args;
+      scheduleFunc();
    }
  };
  ret.flush = () => {
@@ -190,12 +180,12 @@ export const throttleRAF = <T extends any[]>(
      timerId = null;
    }
    if (lastArgs) {
-      fn(...(lastArgsTrailing || lastArgs));
-      lastArgs = lastArgsTrailing = null;
+      fn(...lastArgs);
+      lastArgs = null;
    }
  };
  ret.cancel = () => {
-    lastArgs = lastArgsTrailing = null;
+    lastArgs = null;
    if (timerId !== null) {
      cancelAnimationFrame(timerId);
      timerId = null;
@@ -669,13 +659,10 @@ export const arrayToMap = <T extends { id: string } | string>(
  if (items instanceof Map) {
    return items;
  }
-  return items.reduce(
-    (acc: Map<string, T>, element) => {
-      acc.set(typeof element === "string" ? element : element.id, element);
-      return acc;
-    },
-    new Map() as Map<string, T>,
-  );
+  return items.reduce((acc: Map<string, T>, element) => {
+    acc.set(typeof element === "string" ? element : element.id, element);
+    return acc;
+  }, new Map() as Map<string, T>);
 };

 export const arrayToMapWithIndex = <T extends { id: string }>(
@@ -693,13 +680,10 @@ export const arrayToObject = <T>(
  array: readonly T[],
  groupBy?: (value: T) => string | number,
 ) =>
-  array.reduce(
-    (acc, value, idx) => {
-      acc[groupBy ? groupBy(value) : idx] = value;
-      return acc;
-    },
-    {} as { [key: string]: T },
-  );
+  array.reduce((acc, value, idx) => {
+    acc[groupBy ? groupBy(value) : idx] = value;
+    return acc;
+  }, {} as { [key: string]: T });

 /** Doubly linked node */
 export type Node<T> = T & {
@@ -807,7 +791,7 @@ export const isPrimitive = (val: any) => {
 export const getFrame = () => {
  try {
    return window.self === window.top ? "top" : "iframe";
-  } catch {
+  } catch (error) {
    return "iframe";
  }
 };
@@ -1027,8 +1011,8 @@ export const isMemberOf = <T extends string>(
  return collection instanceof Set || collection instanceof Map
    ? collection.has(value as T)
    : "includes" in collection
-      ? collection.includes(value as T)
-      : collection.hasOwnProperty(value);
+    ? collection.includes(value as T)
+    : collection.hasOwnProperty(value);
 };

 export const cloneJSON = <T>(obj: T): T => JSON.parse(JSON.stringify(obj));
@@ -1159,38 +1143,35 @@ export type HasBrand<T> = {
  [K in keyof T]: K extends `~brand${infer _}` | "_brand" ? true : never;
 }[keyof T];

-type RemoveAllBrands<T> =
-  HasBrand<T> extends true
-    ? {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        [K in keyof T as K extends `~brand~${infer _}` | "_brand"
-          ? never
-          : K]: T[K];
-      }
-    : T;
+type RemoveAllBrands<T> = HasBrand<T> extends true
+  ? {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      [K in keyof T as K extends `~brand~${infer _}` | "_brand"
+        ? never
+        : K]: T[K];
+    }
+  : T;

 // For accepting values - uses loose matching for branded types
 // Preserves readonly modifier: mutable array requires mutable input
-type UnbrandForValue<T> =
-  T extends Map<infer E, infer F>
-    ? Map<UnbrandForValue<E>, UnbrandForValue<F>>
-    : T extends Set<infer E>
-      ? Set<UnbrandForValue<E>>
-      : T extends readonly any[]
-        ? T extends any[]
-          ? unknown[] // mutable array - require mutable input
-          : readonly unknown[] // readonly array - accept readonly input
-        : RemoveAllBrands<T>;
+type UnbrandForValue<T> = T extends Map<infer E, infer F>
+  ? Map<UnbrandForValue<E>, UnbrandForValue<F>>
+  : T extends Set<infer E>
+  ? Set<UnbrandForValue<E>>
+  : T extends readonly any[]
+  ? T extends any[]
+    ? unknown[] // mutable array - require mutable input
+    : readonly unknown[] // readonly array - accept readonly input
+  : RemoveAllBrands<T>;

 // For return types - preserves array element unbranding
-export type Unbrand<T> =
-  T extends Map<infer E, infer F>
-    ? Map<Unbrand<E>, Unbrand<F>>
-    : T extends Set<infer E>
-      ? Set<Unbrand<E>>
-      : T extends readonly (infer E)[]
-        ? Array<Unbrand<E>>
-        : RemoveAllBrands<T>;
+export type Unbrand<T> = T extends Map<infer E, infer F>
+  ? Map<Unbrand<E>, Unbrand<F>>
+  : T extends Set<infer E>
+  ? Set<Unbrand<E>>
+  : T extends readonly (infer E)[]
+  ? Array<Unbrand<E>>
+  : RemoveAllBrands<T>;

 export type CombineBrands<BrandedType, CurrentType> =
  BrandedType extends readonly (infer BE)[]
@@ -1202,8 +1183,8 @@ export type CombineBrands<BrandedType, CurrentType> =
 export type CombineBrandsIfNeeded<T, Required> = [T] extends [Required]
  ? T[]
  : HasBrand<T> extends true
-    ? CombineBrands<T, Required>[]
-    : Required[];
+  ? CombineBrands<T, Required>[]
+  : Required[];

 /**
 * Makes type into a branded type, ensuring that value is assignable to
@@ -1270,8 +1251,8 @@ export const sizeOf = (
  return isReadonlyArray(value)
    ? value.length
    : value instanceof Map || value instanceof Set
-      ? value.size
-      : Object.keys(value).length;
+    ? value.size
+    : Object.keys(value).length;
 };

 export const reduceToCommonValue = <T, R = T>(
@@ -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);
+    });
+  }
+}
@@ -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);
+    });
+  });
+});
@@ -1,7 +1,8 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
-    "outDir": "./dist/types"
+    "outDir": "./dist/types",
+    "rootDir": "../"
  },
  "include": ["src/**/*", "global.d.ts"],
  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
David Luzar	2a82821ec5	fix(editor): tweak freedraw settings and tablet UI/UX (#11551 ) * fix(editor): align constant freedraw stroke width more with generic shapes * reduce streamline for non-mouse * do not change `currentItemStrokeVariability` unintentionally * render penMode button under compact styles panel on tablets * show stroke variability as standalone button in compact actions menu * improve toolbar clicking UX with pen * change streamline defaults * change to `variable` stroke if toggling penMode for the first time	2026-06-24 16:59:10 +02:00
Márk Tolmács	070df27e4d	fix(editor): Modern TS require imports from rootDir (#11552 ) --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-06-24 10:52:56 +00:00
Márk Tolmács	cd514d72d6	feat(editor): LaserPointer based freedraw (#11507 ) Introduces constant width freedraw mode, keeping the original variable mode as default. --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-06-24 09:16:22 +02:00
zsviczian	0642e72cfa	fix(editor): Arrows with text are rendered blurry in PNG export with larger scale (#11492 )	2026-06-22 18:22:26 +02:00
David Luzar	28a9b1711d	test(repo): less noisy test output (#11505 )	2026-06-15 18:19:20 +02:00
Márk Tolmács	1cb9fff569	fix(editor): Double history (#11445 ) --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-06-15 18:19:08 +02:00
David Luzar	069982606d	fix(editor): update `element.frameId` on frame change (#11490 ) Co-authored-by: Diego Mateos <dimateos@ucm.es>	2026-06-13 22:39:04 +02:00
David Luzar	b324a85ab1	fix(editor): elements duplicated when moving frame children (#11485 ) * fix(editor): elements duplicated when moving frame children * fix(editor): accumulate reorders across frames in bring-to-front/back * add invalid-order tests * fix: make sure moved indices are within range * add length/duplicate elements guards	2026-06-13 20:32:45 +02:00
Augusto Xavier	a83ac48853	fix(editor): recalculate roundness type when switching shape types (#11473 ) When converting between generic shapes, the roundness type was only recalculated when the target type was a diamond. Converting a diamond (which uses the proportional radius algorithm) back to a rectangle kept the proportional radius, so rectangles ended up rendering with overly round corners. --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: Maruthan G <maruthang4@gmail.com> Co-authored-by: Sivram <withsivram@gmail.com> Co-authored-by: Jai Kumar Dewani <jai.dewani.99@gmail.com> Co-authored-by: Mark Tolmacs <mark@lazycat.hu>	2026-06-11 19:17:15 +02:00
KrishhnaT	0cf56b19c7	test(editor): add unit tests for BinaryHeap (#11419 )	2026-06-10 17:12:42 +02:00
KrishhnaT	61fe15a51d	fix(editor): cardinal direction arrows with label are invisible in exported SVG (#11441 ) fix: arrows with bound text labels missing from SVG export Axis-aligned (horizontal/vertical) arrows with a bound label vanished from SVG exports. The label-gap mask defaulted to objectBoundingBox units, whose region collapses to zero area for a zero-size bounding box, masking out the whole line. Pin the mask to userSpaceOnUse with an explicit user-space region (the coords already used by the visible rect). Fixes #11439	2026-06-07 19:19:44 +02:00
David Luzar	647a264a48	feat(packages/excalidraw): consolidate theme state handling (#11453 )	2026-06-06 18:18:06 +02:00
Márk Tolmács	b6d80e4256	fix(packages/excalidraw): consolidate bounds checks (#11275 ) Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2026-06-04 19:27:25 +02:00
David Luzar	3372149277	feat(packages/excalidraw): export applyDarkModeFilter and simplify (#11429 )	2026-06-01 15:43:45 +02:00
David Luzar	c08be69618	ci(docker): fix docker dep bundling and pin remaining actions (#11398 ) * docker: use slim alpine image to remove bundling deps in Docker image * pin remaining yml actions * use lockfile * remove pulling	2026-05-25 14:39:21 +02:00
Márk Tolmács	b42b1a193d	fix(editor): excessive battery usage (#11377 ) * fix: Excessive battery usage * chore: Refactor Eraser, Lasso and Laser pointer to use AnimationController * fix: Last laser trail element is not removed from SVG --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-05-24 16:12:17 +02:00
David Luzar	f6d85bc80f	feat(packages/excalidraw): expose image size config and optimize resizing (#11332 )	2026-05-14 22:45:03 +02:00
David Luzar	0457ac9063	fix(editor): handle invalid points on restore (#11321 ) * fix: handle invalid points on restore * move isValidPoint to @excalidraw/math	2026-05-12 18:44:49 +02:00
Praneeth Kodumagulla	b2b2815954	fix(editor): prevent duplicate lasso toolbar item (#11286 )	2026-05-06 23:10:50 +02:00
alechulkin	d992c10bc1	fix(app): resolve app-jotai import path in LocalData (#11290 ) Co-authored-by: chulkin-mdb <oleksandr.chulkin@mongodb.com> Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-06 23:03:10 +02:00
melvin	091b9053a3	fix(editor): enabled ctrl+y redo shortcut on linux and mac (#11179 ) * enabled ctrl+y redo shortcut on linux and mac * Apply suggestion from @dwelle --------- Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>	2026-05-06 22:59:28 +02:00
David Luzar	97274a74b2	ci(repo): enforce scopes (#11292 )	2026-05-06 19:54:30 +02:00
Márk Tolmács	c59fb8dcbc	fix: LocalStorage is empty object on node@25 which breaks tests (#11240 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-05-06 17:42:36 +02:00
Márk Tolmács	7f56cc0cf3	fix: Speculative fixes for arrow invariant failures (#11241 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-05-06 14:39:45 +00:00
Márk Tolmács	974b338b7e	fix: Group selection (#11234 ) * fix: Group selection Co-authored-by: Copilot <copilot@github.com> Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * fix: Tests Co-authored-by: Copilot <copilot@github.com> Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * fix: Frames and overlap Co-authored-by: Copilot <copilot@github.com> Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * fix: Remove unnecessary crust Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * revert unused Set signature * skip ignored elements from group condition when wrap-mode selecting grouped elements, we should not require to select those we ignore (bound elements or locked ones), else it's impossible to select grouped text containers unclear whether locked elements should also be excluded - but it feels like a good heuristic on the whole * apply exclusion * simplify * feat: return all elements in group for overlap selection --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: Copilot <copilot@github.com> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-05-06 15:27:34 +02:00
David Luzar	d2557474e2	fix(editor): fix target element index when creating/adding elements to frames (#11257 )	2026-05-05 21:35:32 +02:00
Márk Tolmács	3004c642da	fix: Fractional index validation (#11258 ) - Vendored fractional-indexing and converted to TypeScript - Stricter index format validation in fractional-indexing - Added format validation to fractional index validation --- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-05-04 11:37:17 +02:00
Márk Tolmács	2dfcc6f0ce	chore: Remove startBoundElement from state (#11264 )	2026-05-02 16:36:42 +02:00
David Luzar	3f5fdec04e	fix: group defragmenting (#11269 )	2026-05-02 15:50:58 +02:00
David Luzar	278cd35772	feat(editor): scale video embeddables based on zoom (#11251 )	2026-04-28 21:49:40 +02:00
David Luzar	43fa4b5602	fix: frame selection and membership (#11250 ) fix: element fully overlapping frame	2026-04-28 18:23:10 +02:00
Márk Tolmács	2e1a529c67	fix(editor): remove extremely large arrows on restore (#11235 ) * fix: Temp fix for elbow arrow at restore Co-authored-by: Copilot <copilot@github.com> Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * fix: Speculative fixes to avoid Infinity Co-authored-by: Copilot <copilot@github.com> Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * validate/remove arrow size after point normalization & move binding repairs back * validate even simple arrows * remove x/y check * remove duplicate constant --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: Copilot <copilot@github.com> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-04-25 12:03:50 +02:00
David Luzar	b1c6bfcf40	chore(docker): bump node (#11208 )	2026-04-20 22:07:00 +02:00
Tom Louveau	1caec99b29	docs: change twitter label by X (#11158 ) Co-authored-by: David Luzar <5153846+dwelle@users.noreply.github.com>	2026-04-13 10:30:58 +02:00
Nand Gopal Sharma	e18c1dd213	Fix typo in Discord badge URL parameter (#11096 )	2026-04-02 10:37:02 +02:00
David Luzar	d9e8a33aa4	feat(editor): implement overlap box selection (#11053 ) Co-authored-by: Mark Tolmacs <mark@lazycat.hu>	2026-04-01 18:41:11 +02:00
dagecko	4be4cc0ed0	fix: pin 9 actions to commit SHA (#11075 )	2026-03-30 16:49:27 +02:00
David Luzar	4a5c9e990c	fix(editor): ensure font picker font names are not quoted (#11036 )	2026-03-25 17:56:48 +01:00
David Luzar	c09e170bdd	feat(editor): deselect on esc (#11035 ) Co-authored-by: Jawahar <jawahars_16@live.in> Co-authored-by: Andrew Aquino <dawneraq@gmail.com>	2026-03-25 17:14:24 +01:00
David Luzar	c1082923ee	feat(editor): support mermaid staate diagrams (#11031 )	2026-03-24 20:20:28 +01:00
Kundan	1c292e4936	fix(math): correctly validate second point in isLineSegment (#11007 ) Co-authored-by: Mark Tolmacs <mark@lazycat.hu>	2026-03-24 19:01:08 +01:00
Márk Tolmács	d6f0f34fe9	fix: Rotated rounded arrow center point (#10962 )	2026-03-23 15:54:59 +01:00
Márk Tolmács	75789f620d	fix: Other endpoint is not immediately updated on midpoint snap (#10933 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-03-23 14:54:44 +00:00
David Luzar	a9ca16eb42	chore(packages/excalidraw): export Fonts helper class (#11008 )	2026-03-21 22:44:27 +01:00
Márk Tolmács	987173b52f	fix: Arrow point index Out-of-Bounds (#10922 ) * fix: Make OOB not fatal Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * fix: More conservative temp arrow state update Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * chore: Capture condition variables in binding restoration failure Signed-off-by: Mark Tolmacs <mark@lazycat.hu> --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2026-03-21 19:26:47 +01:00
David Luzar	81ab857a6f	feat(editor): various text related improvements (#10979 )	2026-03-19 16:00:58 +01:00
David Luzar	e8b4620a96	feat(editor): put caret at pointer coords when clicking on selected text element (#10970 )	2026-03-18 19:14:44 +01:00
David Luzar	2b0e4c9623	fix(editor): remove leftover debug code path (#10954 )	2026-03-14 13:12:48 +01:00
David Luzar	c9ba7f839c	chore(editor): bump @excalidraw/mermaid-to-excalidraw@2.1.1 (#10944 )	2026-03-12 17:32:13 +01:00
David Luzar	b4ce7c713b	fix(editor): arrowhead picker overflowing viewport (#10943 )	2026-03-12 16:08:46 +01:00
David Luzar	816c81c12e	feat(editor): ERD arrowheads and diagrams (#10940 )	2026-03-11 22:00:31 +01:00
David Luzar	92d25446d6	feat(packages/excalidraw): tweak and expose more API around state and lifecycle (#10939 )	2026-03-11 16:51:03 +01:00
David Luzar	e73a5b0116	docs(packages/excalidraw): improve readme (#10932 )	2026-03-11 09:49:12 +01:00
David Luzar	21dd1cfacc	feat(packages/excalidraw): state tracking, api hook, and others (#10870 )	2026-03-08 23:15:18 +01:00
David Luzar	fa1f7d9f22	feat(packages/excalidraw): export throttleRAF (#10912 )	2026-03-07 12:05:33 +01:00
David Luzar	3d8c12fba4	fix(editor): do not conditionally disable midpoint snapping menu preference (#10906 )	2026-03-06 20:44:57 +01:00
David Luzar	757dfeb6ad	fix(editor): call throttleRAF with lastArgs and remove trailing (#10905 ) Co-authored-by: Varun Chawla <varun_6april@hotmail.com> Co-authored-by: aziamimoh <aziamimoh@users.noreply.github.com> Co-authored-by: pgzcoa <pgzcoa@users.noreply.github.com> Co-authored-by: TinaZhang24 <TinaZhang24@users.noreply.github.com>	2026-03-06 20:40:36 +01:00
David Luzar	a0e93b6040	feat(editor): sync export theme with ui theme (#10903 )	2026-03-06 18:37:28 +01:00
Hendrik Horstmann	499e9d64a5	fix: dropdownMenu item badge position (#10895 )	2026-03-06 08:41:49 +00:00
David Luzar	c1dbbdf678	feat(editor): mermaid code editor & improve parsing (#10897 )	2026-03-05 18:52:41 +01:00
David Luzar	47c254216b	fix(editor): disable snap-to-midpoint menu item when arrow-binding disabled (#10885 )	2026-03-04 16:48:33 +01:00
Hendrik Horstmann	d1cff91b75	fix: spacing in the left menu (#10880 )	2026-03-03 22:11:30 +00:00
Márk Tolmács	437595fa65	feat: Arrow binding is a preference (#10839 ) Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-03-03 21:55:40 +00:00
David Luzar	60b275880d	feat(editor): support radar chart and multiple series for other chart types (#10824 )	2026-02-26 16:13:15 +01:00
zsviczian	cae9d2bcbd	fix: "hand" tool active after exiting view mode if laser point was used (#10841 )	2026-02-26 12:55:13 +01:00
David Luzar	2874f9e48c	fix(editor): simplify and fix midpoint highlighting (#10832 )	2026-02-24 21:11:46 +01:00
Márk Tolmács	0b3a5e7cc4	fix: Multi-point arrow bound point update (#10831 ) Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2026-02-24 13:32:44 +01:00