debuggs

2026-03-09 22:04:43 +01:00
205 changed files with 3251 additions and 11338 deletions
@@ -1,4 +1,4 @@
-FROM node:24-bullseye
+FROM node:18-bullseye

 # Vite wants to open the browser using `open`, so we
 # need to install those utils.
@@ -1,7 +0,0 @@
-# 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
@@ -9,11 +9,11 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@v2
        with:
          fetch-depth: 2
      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@v2
        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@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@v2
      - run: docker build -t excalidraw .
@@ -11,7 +11,7 @@ jobs:
    runs-on: ubuntu-latest
    timeout-minutes: 3
    steps:
-      - uses: styfle/cancel-workflow-action@ce177499ccf9fd2aded3b0426c97e5434c2e8a73 # 0.6.0
+      - uses: styfle/cancel-workflow-action@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@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@v2

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

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

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

      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@v2
        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@1b35a6dcd84d81aa0bc1889610efdcde7f37b0c0 # v1.0.1
+        uses: kt3k/update-pr-description@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@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        uses: actions/checkout@v3
      - name: Login to DockerHub
-        uses: docker/login-action@465a07811f14bebb1938fbed4728c6a1ff8901fc # v2
+        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3
+        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
+        uses: docker/setup-buildx-action@v3
      - name: Build and push
-        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
+        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
@@ -6,97 +6,11 @@ on:
      - opened
      - edited
      - synchronize
-      - labeled
-      - unlabeled

 jobs:
  semantic:
    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: read
    steps:
-      - uses: amannn/action-semantic-pull-request@e32d7e603df1aa1ba07e981f2a23455dee596825 # v5
-        with:
-          requireScope: true
-          scopes: |
-            app
-            editor
-            packages/excalidraw
-            packages/utils
-            docker
-            repo
-          ignoreLabels: |
-            skip-semantic-title
+      - uses: amannn/action-semantic-pull-request@v5
        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@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@v2
      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@v2
        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@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        uses: actions/checkout@v3
      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@v3
        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@e7493a72a44b113341c0cf6186ab49c17c4b65c1 # v1
+      - uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          build_script: build:esm
@@ -10,9 +10,9 @@ jobs:
      pull-requests: write

    steps:
-      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@v2
      - name: "Install Node"
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@v2
        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@2500dafcee7dd64f85ab689c0b83798a8359770e # v2
+        uses: davelosert/vitest-coverage-report-action@v2
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
@@ -8,9 +8,9 @@ jobs:
  test:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@v4
      - name: Setup Node.js
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@v4
        with:
          node-version: 20.x
      - name: Install and test
@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:24@sha256:8530f76a96d88820d288761f022e318970dda93d01536919fbc16076b7983e63 AS build
+FROM --platform=${BUILDPLATFORM} node:18 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 --frozen-lockfile --network-timeout 600000
+    npm_config_target_arch=${TARGETARCH} yarn --network-timeout 600000

 ARG NODE_ENV=production

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

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

 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&widget=false"/></a>
+    <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>
  <a href="https://deepwiki.com/excalidraw/excalidraw">
    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
  <a href="https://twitter.com/excalidraw">
@@ -172,7 +172,7 @@ convertToExcalidrawElements([
    type: "arrow",
    x: 450,
    y: 20,
-    startArrowhead: "circle",
+    startArrowhead: "dot",
    endArrowhead: "triangle",
    strokeColor: "#1971c2",
    strokeWidth: 2,
@@ -97,8 +97,8 @@ const config = {
                href: "https://discord.gg/UexuTaE",
              },
              {
-                label: "𝕏",
-                href: "https://x.com/excalidraw",
+                label: "Twitter",
+                href: "https://twitter.com/excalidraw",
              },
              {
                label: "Linkedin",
@@ -1,4 +1,4 @@
-import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/element/transform";
+import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/data/transform";
 import type { FileId } from "@excalidraw/excalidraw/element/types";

 const elements: ExcalidrawElementSkeleton[] = [
@@ -22,6 +22,7 @@ import Trans from "@excalidraw/excalidraw/components/Trans";
 import {
  APP_NAME,
  EVENT,
+  THEME,
  VERSION_TIMEOUT,
  debounce,
  getVersion,
@@ -951,7 +952,6 @@ const ExcalidrawWrapper = () => {
        handleKeyboardGlobally={true}
        autoFocus={true}
        theme={editorTheme}
-        onThemeChange={setAppTheme}
        renderTopRightUI={(isMobile) => {
          if (isMobile || !collabAPI || isCollabDisabled) {
            return null;
@@ -988,6 +988,7 @@ const ExcalidrawWrapper = () => {
          isCollaborating={isCollaborating}
          isCollabEnabled={!isCollabDisabled}
          theme={appTheme}
+          setTheme={(theme) => setAppTheme(theme)}
          refresh={() => forceRefresh((prev) => !prev)}
        />
        <AppWelcomeScreen
@@ -1228,6 +1229,14 @@ const ExcalidrawWrapper = () => {
                }
              },
            },
+            {
+              ...CommandPalette.defaultItems.toggleTheme,
+              perform: () => {
+                setAppTheme(
+                  editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK,
+                );
+              },
+            },
            {
              label: t("labels.installPWA"),
              category: DEFAULT_CATEGORIES.app,
@@ -20,6 +20,7 @@ export const AppMainMenu: React.FC<{
  isCollaborating: boolean;
  isCollabEnabled: boolean;
  theme: Theme | "system";
+  setTheme: (theme: Theme | "system") => void;
  refresh: () => void;
 }> = React.memo((props) => {
  return (
@@ -77,7 +78,11 @@ export const AppMainMenu: React.FC<{
      )}
      <MainMenu.Separator />
      <MainMenu.DefaultItems.Preferences />
-      <MainMenu.DefaultItems.ToggleTheme allowSystemTheme theme={props.theme} />
+      <MainMenu.DefaultItems.ToggleTheme
+        allowSystemTheme
+        theme={props.theme}
+        onSelect={props.setTheme}
+      />
      <MainMenu.ItemCustom>
        <LanguageList style={{ width: "100%" }} />
      </MainMenu.ItemCustom>
@@ -26,6 +26,7 @@ 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";
@@ -38,7 +39,6 @@ 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";
@@ -1,4 +1,5 @@
 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";
@@ -30,10 +31,28 @@ 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]);
+  }, [appTheme, editorTheme, setAppTheme]);

  useLayoutEffect(() => {
    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, appTheme);
@@ -75,20 +75,6 @@ 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: {
@@ -56,9 +56,7 @@
    "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: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",
@@ -80,11 +80,7 @@ const cssInvert = (
  return { r: invertedR, g: invertedG, b: invertedB };
 };

-export const applyDarkModeFilter = (color: string, enable = true): string => {
-  if (!enable) {
-    return color;
-  }
-
+export const applyDarkModeFilter = (color: string): string => {
  const cached = DARK_MODE_COLORS_CACHE?.get(color);
  if (cached) {
    return cached;
@@ -337,10 +337,9 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px

-export const DEFAULT_IMAGE_OPTIONS: AppProps["imageOptions"] = {
-  maxWidthOrHeight: 1440,
-  maxFileSizeBytes: 4 * 1024 * 1024,
-};
+export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
+
+export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;

 export const SVG_NS = "http://www.w3.org/2000/svg";
 export const SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>
@@ -404,47 +403,11 @@ export const ROUGHNESS = {
  cartoonist: 2,
 } as const;

-export type StrokeWidthKey = "thin" | "medium" | "bold";
-
-export const STROKE_WIDTH_KEYS: readonly StrokeWidthKey[] = [
-  "thin",
-  "medium",
-  "bold",
-];
-
-export const STROKE_WIDTH: Readonly<
-  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
-> = {
+export const STROKE_WIDTH = {
  thin: 1,
-  medium: 2,
-  bold: 4,
-  extraBold: 8, // unused (may be introduced in the future)
-};
-
-// freedraw schema 2.0 uses thinner stroke, but to maintain backwards and
-// forwards compatibility, instead of changing the shape renderer, we scale
-// the stroke width by 1/2 (previous, thin was 1, medium 2 etc.)
-//
-// note that in the UI, STROKE_WIDTH.thin == FREEDRAW_STROKE_WIDTH.thin still
-export const FREEDRAW_STROKE_WIDTH: Readonly<
-  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
-> = {
-  thin: 0.5,
-  medium: 1,
  bold: 2,
-  extraBold: 4, // legacy (may be used again in the future)
-};
-
-export const getStrokeWidthByKey = (
-  elementType: ExcalidrawElement["type"],
-  strokeWidthKey: StrokeWidthKey,
-): ExcalidrawElement["strokeWidth"] => {
-  return elementType === "freedraw"
-    ? FREEDRAW_STROKE_WIDTH[strokeWidthKey]
-    : STROKE_WIDTH[strokeWidthKey];
-};
-
-export const DEFAULT_ELEMENT_STROKE_WIDTH_KEY: StrokeWidthKey = "medium";
+  extraBold: 4,
+} as const;

 export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: ExcalidrawElement["strokeColor"];
@@ -459,7 +422,7 @@ export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: COLOR_PALETTE.black,
  backgroundColor: COLOR_PALETTE.transparent,
  fillStyle: "solid",
-  strokeWidth: STROKE_WIDTH[DEFAULT_ELEMENT_STROKE_WIDTH_KEY],
+  strokeWidth: 2,
  strokeStyle: "solid",
  roughness: ROUGHNESS.artist,
  opacity: 100,
@@ -550,6 +513,3 @@ 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;
@@ -204,6 +204,135 @@ export const easeOut = (k: number) => {
  return 1 - Math.pow(1 - k, 4);
 };

+const easeOutInterpolate = (from: number, to: number, progress: number) => {
+  return (to - from) * easeOut(progress) + from;
+};
+
+/**
+ * Animates values from `fromValues` to `toValues` using the requestAnimationFrame API.
+ * Executes the `onStep` callback on each step with the interpolated values.
+ * Returns a function that can be called to cancel the animation.
+ *
+ * @example
+ * // Example usage:
+ * const fromValues = { x: 0, y: 0 };
+ * const toValues = { x: 100, y: 200 };
+ * const onStep = ({x, y}) => {
+ *   setState(x, y)
+ * };
+ * const onCancel = () => {
+ *   console.log("Animation canceled");
+ * };
+ *
+ * const cancelAnimation = easeToValuesRAF({
+ *   fromValues,
+ *   toValues,
+ *   onStep,
+ *   onCancel,
+ * });
+ *
+ * // To cancel the animation:
+ * cancelAnimation();
+ */
+export const easeToValuesRAF = <
+  T extends Record<keyof T, number>,
+  K extends keyof T,
+>({
+  fromValues,
+  toValues,
+  onStep,
+  duration = 250,
+  interpolateValue,
+  onStart,
+  onEnd,
+  onCancel,
+}: {
+  fromValues: T;
+  toValues: T;
+  /**
+   * Interpolate a single value.
+   * Return undefined to be handled by the default interpolator.
+   */
+  interpolateValue?: (
+    fromValue: number,
+    toValue: number,
+    /** no easing applied  */
+    progress: number,
+    key: K,
+  ) => number | undefined;
+  onStep: (values: T) => void;
+  duration?: number;
+  onStart?: () => void;
+  onEnd?: () => void;
+  onCancel?: () => void;
+}) => {
+  let canceled = false;
+  let frameId = 0;
+  let startTime: number;
+
+  function step(timestamp: number) {
+    if (canceled) {
+      return;
+    }
+    if (startTime === undefined) {
+      startTime = timestamp;
+      onStart?.();
+    }
+
+    const elapsed = Math.min(timestamp - startTime, duration);
+    const factor = easeOut(elapsed / duration);
+
+    const newValues = {} as T;
+
+    Object.keys(fromValues).forEach((key) => {
+      const _key = key as keyof T;
+      const result = ((toValues[_key] - fromValues[_key]) * factor +
+        fromValues[_key]) as T[keyof T];
+      newValues[_key] = result;
+    });
+
+    onStep(newValues);
+
+    if (elapsed < duration) {
+      const progress = elapsed / duration;
+
+      const newValues = {} as T;
+
+      Object.keys(fromValues).forEach((key) => {
+        const _key = key as K;
+        const startValue = fromValues[_key];
+        const endValue = toValues[_key];
+
+        let result;
+
+        result = interpolateValue
+          ? interpolateValue(startValue, endValue, progress, _key)
+          : easeOutInterpolate(startValue, endValue, progress);
+
+        if (result == null) {
+          result = easeOutInterpolate(startValue, endValue, progress);
+        }
+
+        newValues[_key] = result as T[K];
+      });
+      onStep(newValues);
+
+      frameId = window.requestAnimationFrame(step);
+    } else {
+      onStep(toValues);
+      onEnd?.();
+    }
+  }
+
+  frameId = window.requestAnimationFrame(step);
+
+  return () => {
+    onCancel?.();
+    canceled = true;
+    window.cancelAnimationFrame(frameId);
+  };
+};
+
 // https://github.com/lodash/lodash/blob/es/chunk.js
 export const chunk = <T extends any>(
  array: readonly T[],
@@ -1,109 +0,0 @@
-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,8 +1,7 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
-    "outDir": "./dist/types",
-    "rootDir": "../"
+    "outDir": "./dist/types"
  },
  "include": ["src/**/*", "global.d.ts"],
  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
@@ -64,7 +64,6 @@
  },
  "dependencies": {
    "@excalidraw/common": "0.18.0",
-    "@excalidraw/math": "0.18.0",
-    "@excalidraw/fractional-indexing": "3.3.0"
+    "@excalidraw/math": "0.18.0"
  }
 }
@@ -338,18 +338,27 @@ export class Scene {
    this.callbacks.clear();
  }

-  /** low-level - generally use app.insertNewElements() */
-  insertElementsAtIndex(
-    elements: ExcalidrawElement[],
-    /** null indicates end of the array */
-    index: number | null,
-  ) {
-    if (!elements.length) {
-      return;
+  insertElementAtIndex(element: ExcalidrawElement, index: number) {
+    if (!Number.isFinite(index) || index < 0) {
+      throw new Error(
+        "insertElementAtIndex can only be called with index >= 0",
+      );
    }

-    if (index === null) {
-      index = this.elements.length;
+    const nextElements = [
+      ...this.elements.slice(0, index),
+      element,
+      ...this.elements.slice(index),
+    ];
+
+    syncMovedIndices(nextElements, arrayToMap([element]));
+
+    this.replaceAllElements(nextElements);
+  }
+
+  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
+    if (!elements.length) {
+      return;
    }

    if (!Number.isFinite(index) || index < 0) {
@@ -369,9 +378,24 @@ export class Scene {
    this.replaceAllElements(nextElements);
  }

-  /** low-level - generally use app.insertNewElement() */
  insertElement = (element: ExcalidrawElement) => {
-    this.insertElementsAtIndex([element], null);
+    const index = element.frameId
+      ? this.getElementIndex(element.frameId)
+      : this.elements.length;
+
+    this.insertElementAtIndex(element, index);
+  };
+
+  insertElements = (elements: ExcalidrawElement[]) => {
+    if (!elements.length) {
+      return;
+    }
+
+    const index = elements[0]?.frameId
+      ? this.getElementIndex(elements[0].frameId)
+      : this.elements.length;
+
+    this.insertElementsAtIndex(elements, index);
  };

  getElementIndex(elementId: string) {
@@ -1,32 +0,0 @@
-import type { Arrowhead, AnyArrowhead } from "./types";
-
-export const normalizeArrowhead = (
-  arrowhead: AnyArrowhead | null | undefined,
-): Arrowhead | null => {
-  switch (arrowhead) {
-    case undefined:
-    case null:
-      return null;
-    case "dot":
-      return "circle";
-    case "crowfoot_one":
-      return "cardinality_one";
-    case "crowfoot_many":
-      return "cardinality_many";
-    case "crowfoot_one_or_many":
-      return "cardinality_one_or_many";
-    default:
-      return arrowhead;
-  }
-};
-
-export const getArrowheadForPicker = (
-  arrowhead: AnyArrowhead | null | undefined,
-): Arrowhead | null => {
-  const normalizedArrowhead = normalizeArrowhead(arrowhead);
-  if (normalizedArrowhead === null) {
-    return null;
-  }
-
-  return normalizedArrowhead;
-};
@@ -643,13 +643,10 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
  let start: BindingStrategy = { mode: undefined };
  let end: BindingStrategy = { mode: undefined };

-  if (arrow.points.length < 2) {
-    console.error(
-      "Attempting to bind a linear element with less than 2 points",
-    );
-    // a single-point can't be bound -> cancel
-    return { start: { mode: undefined }, end: { mode: undefined } };
-  }
+  invariant(
+    arrow.points.length > 1,
+    "Do not attempt to bind linear elements with a single point",
+  );

  // If none of the ends are dragged, we don't change anything
  if (!startDragged && !endDragged) {
@@ -737,11 +734,12 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
    });

  // Handle outside-outside binding to the same element
-  if (
-    otherBinding &&
-    otherBinding.elementId === hit?.id &&
-    (!opts?.newArrow || appState.selectedLinearElement?.initialState.origin)
-  ) {
+  if (otherBinding && otherBinding.elementId === hit?.id) {
+    invariant(
+      !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
+      "appState.selectedLinearElement.initialState.origin must be defined for new arrows",
+    );
+
    return {
      start: {
        mode: "inside",
@@ -893,13 +891,10 @@ const getBindingStrategyForDraggingBindingElementEndpoints_complex = (
  let start: BindingStrategy = { mode: undefined };
  let end: BindingStrategy = { mode: undefined };

-  if (arrow.points.length < 2) {
-    console.error(
-      "Attempting to bind a linear element with less than 2 points",
-    );
-    // a single-point can't be bound -> cancel
-    return { start: { mode: undefined }, end: { mode: undefined } };
-  }
+  invariant(
+    arrow.points.length > 1,
+    "Do not attempt to bind linear elements with a single point",
+  );

  // If none of the ends are dragged, we don't change anything
  if (!startDragged && !endDragged) {
@@ -1948,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
  return {
    fixedPoint: normalizeFixedPoint([
      (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        Math.max(hoveredElement.width, PRECISION),
+        hoveredElement.width,
      (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        Math.max(hoveredElement.height, PRECISION),
+        hoveredElement.height,
    ]),
  };
 };
@@ -1981,11 +1976,9 @@ export const calculateFixedPointForNonElbowArrowBinding = (

  // Calculate the ratio relative to the element's bounds
  const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) /
-    Math.max(hoveredElement.width, PRECISION);
+    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
  const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) /
-    Math.max(hoveredElement.height, PRECISION);
+    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;

  return {
    fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
@@ -1,4 +1,5 @@
 import rough from "roughjs/bin/rough";
+
 import {
  arrayToMap,
  type Bounds,
@@ -6,6 +7,7 @@ import {
  rescalePoints,
  sizeOf,
 } from "@excalidraw/common";
+
 import {
  degreesToRadians,
  lineSegment,
@@ -14,7 +16,9 @@ import {
  pointFromArray,
  pointRotateRads,
 } from "@excalidraw/math";
+
 import { getCurvePathOps } from "@excalidraw/utils/shape";
+
 import { pointsOnBezierCurves } from "points-on-curve";

 import type {
@@ -25,7 +29,9 @@ import type {
  LocalPoint,
  Radians,
 } from "@excalidraw/math";
+
 import type { AppState } from "@excalidraw/excalidraw/types";
+
 import type { Mutable } from "@excalidraw/common/utility-types";

 import { generateRoughOptions } from "./shape";
@@ -35,20 +41,18 @@ import { getBoundTextElement, getContainerElement } from "./textElement";
 import {
  isArrowElement,
  isBoundToContainer,
-  isFrameLikeElement,
  isFreeDrawElement,
  isLinearElement,
  isLineElement,
  isTextElement,
-  isExcalidrawElement,
 } from "./typeChecks";
+
 import { getElementShape } from "./shape";
+
 import {
  deconstructDiamondElement,
  deconstructRectanguloidElement,
 } from "./utils";
-import { intersectElementWithLineSegment } from "./collision";
-import { elementOverlapsWithFrame, getContainingFrame } from "./frame";

 import type { Drawable, Op } from "roughjs/bin/core";
 import type { Point as RoughPoint } from "roughjs/bin/geometry";
@@ -63,7 +67,6 @@ import type {
  ExcalidrawRectanguloidElement,
  ExcalidrawTextElementWithContainer,
  NonDeleted,
-  NonDeletedExcalidrawElement,
 } from "./types";

 export type RectangleBox = {
@@ -677,9 +680,8 @@ export const getMinMaxXYFromCurvePathOps = (
  return [minX, minY, maxX, maxY];
 };

-export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
-  points: readonly P[],
-  padding: number = 0,
+export const getBoundsFromPoints = (
+  points: ExcalidrawFreeDrawElement["points"],
 ): Bounds => {
  let minX = Infinity;
  let minY = Infinity;
@@ -693,7 +695,7 @@ export const getBoundsFromPoints = <P extends GlobalPoint | LocalPoint>(
    maxY = Math.max(maxY, y);
  }

-  return [minX - padding, minY - padding, maxX + padding, maxY + padding];
+  return [minX, minY, maxX, maxY];
 };

 const getFreeDrawElementAbsoluteCoords = (
@@ -707,9 +709,6 @@ const getFreeDrawElementAbsoluteCoords = (
  return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };

-const CARDINALITY_MARKER_SIZE = 20;
-const CROWFOOT_ARROWHEAD_SIZE = 15;
-
 /** @returns number in pixels */
 export const getArrowheadSize = (arrowhead: Arrowhead): number => {
  switch (arrowhead) {
@@ -718,14 +717,10 @@ export const getArrowheadSize = (arrowhead: Arrowhead): number => {
    case "diamond":
    case "diamond_outline":
      return 12;
-    case "cardinality_many":
-    case "cardinality_one_or_many":
-    case "cardinality_zero_or_many":
-      return CROWFOOT_ARROWHEAD_SIZE;
-    case "cardinality_one":
-    case "cardinality_exactly_one":
-    case "cardinality_zero_or_one":
-      return CARDINALITY_MARKER_SIZE;
+    case "crowfoot_many":
+    case "crowfoot_one":
+    case "crowfoot_one_or_many":
+      return 20;
    default:
      return 15;
  }
@@ -748,12 +743,7 @@ export const getArrowheadPoints = (
  shape: Drawable[],
  position: "start" | "end",
  arrowhead: Arrowhead,
-  offsetMultiplier = 0,
 ) => {
-  if (arrowhead === null) {
-    return null;
-  }
-
  if (shape.length < 1) {
    return null;
  }
@@ -834,30 +824,29 @@ export const getArrowheadPoints = (
  const lengthMultiplier =
    arrowhead === "diamond" || arrowhead === "diamond_outline" ? 0.25 : 0.5;
  const minSize = Math.min(size, length * lengthMultiplier);
-  const tx = x2 - nx * minSize * offsetMultiplier;
-  const ty = y2 - ny * minSize * offsetMultiplier;
-  const xs = tx - nx * minSize;
-  const ys = ty - ny * minSize;
+  const xs = x2 - nx * minSize;
+  const ys = y2 - ny * minSize;

-  if (arrowhead === "circle" || arrowhead === "circle_outline") {
-    const diameter = Math.hypot(ys - ty, xs - tx) + element.strokeWidth - 2;
-    return [tx, ty, diameter];
+  if (
+    arrowhead === "dot" ||
+    arrowhead === "circle" ||
+    arrowhead === "circle_outline"
+  ) {
+    const diameter = Math.hypot(ys - y2, xs - x2) + element.strokeWidth - 2;
+    return [x2, y2, diameter];
  }

  const angle = getArrowheadAngle(arrowhead);

-  if (
-    arrowhead === "cardinality_many" ||
-    arrowhead === "cardinality_one_or_many"
-  ) {
+  if (arrowhead === "crowfoot_many" || arrowhead === "crowfoot_one_or_many") {
    // swap (xs, ys) with (x2, y2)
    const [x3, y3] = pointRotateRads(
-      pointFrom(tx, ty),
+      pointFrom(x2, y2),
      pointFrom(xs, ys),
      degreesToRadians(-angle as Degrees),
    );
    const [x4, y4] = pointRotateRads(
-      pointFrom(tx, ty),
+      pointFrom(x2, y2),
      pointFrom(xs, ys),
      degreesToRadians(angle),
    );
@@ -867,12 +856,12 @@ export const getArrowheadPoints = (
  // Return points
  const [x3, y3] = pointRotateRads(
    pointFrom(xs, ys),
-    pointFrom(tx, ty),
+    pointFrom(x2, y2),
    ((-angle * Math.PI) / 180) as Radians,
  );
  const [x4, y4] = pointRotateRads(
    pointFrom(xs, ys),
-    pointFrom(tx, ty),
+    pointFrom(x2, y2),
    degreesToRadians(angle),
  );

@@ -885,9 +874,9 @@ export const getArrowheadPoints = (
      const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];

      [ox, oy] = pointRotateRads(
-        pointFrom(tx + minSize * 2, ty),
-        pointFrom(tx, ty),
-        Math.atan2(py - ty, px - tx) as Radians,
+        pointFrom(x2 + minSize * 2, y2),
+        pointFrom(x2, y2),
+        Math.atan2(py - y2, px - x2) as Radians,
      );
    } else {
      const [px, py] =
@@ -896,16 +885,16 @@ export const getArrowheadPoints = (
          : [0, 0];

      [ox, oy] = pointRotateRads(
-        pointFrom(tx - minSize * 2, ty),
-        pointFrom(tx, ty),
-        Math.atan2(ty - py, tx - px) as Radians,
+        pointFrom(x2 - minSize * 2, y2),
+        pointFrom(x2, y2),
+        Math.atan2(y2 - py, x2 - px) as Radians,
      );
    }

-    return [tx, ty, x3, y3, ox, oy, x4, y4];
+    return [x2, y2, x3, y3, ox, oy, x4, y4];
  }

-  return [tx, ty, x3, y3, x4, y4];
+  return [x2, y2, x3, y3, x4, y4];
 };

 // TODO reuse shape.ts
@@ -1259,17 +1248,6 @@ export const pointInsideBounds = <P extends GlobalPoint | LocalPoint>(
 ): boolean =>
  p[0] > bounds[0] && p[0] < bounds[2] && p[1] > bounds[1] && p[1] < bounds[3];

-// TODO make pointInsideBounds inclusive and remove this function once we
-// test nothing is breaking
-export const pointInsideBoundsInclusive = <P extends GlobalPoint | LocalPoint>(
-  p: P,
-  bounds: Bounds,
-): boolean =>
-  p[0] >= bounds[0] &&
-  p[0] <= bounds[2] &&
-  p[1] >= bounds[1] &&
-  p[1] <= bounds[3];
-
 export const doBoundsIntersect = (
  bounds1: Bounds | null,
  bounds2: Bounds | null,
@@ -1284,310 +1262,13 @@ export const doBoundsIntersect = (
  return minX1 < maxX2 && maxX1 > minX2 && minY1 < maxY2 && maxY1 > minY2;
 };

-export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) =>
-  [
-    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[1]),
-    pointFrom<GlobalPoint>(innerBounds[0], innerBounds[3]),
-    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[1]),
-    pointFrom<GlobalPoint>(innerBounds[2], innerBounds[3]),
-  ].every((point) => pointInsideBoundsInclusive(point, outerBounds));
-
-/**
- * High level helper to get elements overlapping a bounding box.
- * It can be used to get elements overlapping a selection box, for example.
- *
- */
-export const elementsOverlappingBBox = ({
-  elements,
-  elementsMap,
-  bounds,
-  type,
-  excludeElementsInFrames,
-  shouldIgnoreElementFromSelection,
-}: {
-  elements: readonly NonDeletedExcalidrawElement[];
-  elementsMap?: ElementsMap;
-  bounds: Bounds | ExcalidrawElement;
-  /**
-   * - overlap: elements overlapping or inside bounds
-   * - contain: elements inside bounds
-   **/
-  type: "contain" | "overlap";
-  excludeElementsInFrames?: boolean;
-  shouldIgnoreElementFromSelection?: (
-    element: NonDeletedExcalidrawElement,
-  ) => boolean;
-}) => {
-  if (!elementsMap) {
-    elementsMap = arrayToMap(elements) as ElementsMap;
-  }
-  const selectionBounds = isExcalidrawElement(bounds)
-    ? getElementBounds(bounds, elementsMap)
-    : bounds;
-  const [selectionX1, selectionY1, selectionX2, selectionY2] = selectionBounds;
-  const selectionEdges = [
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX1, selectionY1),
-      pointFrom(selectionX2, selectionY1),
-    ),
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX2, selectionY1),
-      pointFrom(selectionX2, selectionY2),
-    ),
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX2, selectionY2),
-      pointFrom(selectionX1, selectionY2),
-    ),
-    lineSegment<GlobalPoint>(
-      pointFrom(selectionX1, selectionY2),
-      pointFrom(selectionX1, selectionY1),
-    ),
-  ];
-
-  const framesInSelection = excludeElementsInFrames
-    ? new Set<NonDeletedExcalidrawElement["id"]>()
-    : null;
-  const groups: Record<string, NonDeletedExcalidrawElement[]> = {};
-  const elementsInSelection: Set<NonDeletedExcalidrawElement> = new Set();
-
-  for (const element of elements) {
-    if (shouldIgnoreElementFromSelection?.(element)) {
-      continue;
-    }
-
-    // Track only selectable top-level group members, so ignored elements such
-    // as bound text and locked elements don't affect group selection.
-    const groupId = element.groupIds.at(-1);
-    if (groupId) {
-      if (!groups[groupId]) {
-        groups[groupId] = [];
-      }
-      groups[groupId].push(element);
-    }
-
-    const strokeWidth = element.strokeWidth;
-    let labelAABB: Bounds | null = null;
-    let elementAABB = getElementBounds(element, elementsMap);
-
-    elementAABB = [
-      elementAABB[0] - strokeWidth / 2,
-      elementAABB[1] - strokeWidth / 2,
-      elementAABB[2] + strokeWidth / 2,
-      elementAABB[3] + strokeWidth / 2,
-    ] as Bounds;
-
-    // Whether the element bounds should include the bound text element bounds
-    const boundTextElement =
-      isArrowElement(element) && getBoundTextElement(element, elementsMap);
-    if (boundTextElement) {
-      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
-        element,
-        boundTextElement,
-        elementsMap,
-      );
-      labelAABB = [
-        x,
-        y,
-        x + boundTextElement.width,
-        y + boundTextElement.height,
-      ] as Bounds;
-    }
-
-    // Clip element bounds by its containing frame (if any), since only the
-    // visible (frame-clipped) portion of the element is relevant for selection.
-    const associatedFrame = getContainingFrame(element, elementsMap);
-    if (
-      associatedFrame &&
-      elementOverlapsWithFrame(element, associatedFrame, elementsMap)
-    ) {
-      const frameAABB = getElementBounds(associatedFrame, elementsMap);
-      elementAABB = [
-        Math.max(elementAABB[0], frameAABB[0]),
-        Math.max(elementAABB[1], frameAABB[1]),
-        Math.min(elementAABB[2], frameAABB[2]),
-        Math.min(elementAABB[3], frameAABB[3]),
-      ] as Bounds;
-
-      labelAABB = labelAABB
-        ? ([
-            Math.max(labelAABB[0], frameAABB[0]),
-            Math.max(labelAABB[1], frameAABB[1]),
-            Math.min(labelAABB[2], frameAABB[2]),
-            Math.min(labelAABB[3], frameAABB[3]),
-          ] as Bounds)
-        : null;
-    }
-
-    const commonAABB = labelAABB
-      ? ([
-          Math.min(labelAABB[0], elementAABB[0]),
-          Math.min(labelAABB[1], elementAABB[1]),
-          Math.max(labelAABB[2], elementAABB[2]),
-          Math.max(labelAABB[3], elementAABB[3]),
-        ] as Bounds)
-      : elementAABB;
-
-    // ============== Evaluation ==============
-
-    // 1. If the selection box WRAPs the element's AABB, then add it to the
-    //    selection and move on, regardless of the selection mode.
-    //
-    //    PERF: This trick only works with axis-aligned box selection and the
-    //          current convex element shapes!
-    if (boundsContainBounds(selectionBounds, commonAABB)) {
-      if (framesInSelection && isFrameLikeElement(element)) {
-        framesInSelection.add(element.id);
-      }
-      elementsInSelection.add(element);
-      continue;
-    }
-
-    // 2. Handle the case where the label is overlapped by the selection box
-    if (
-      type === "overlap" &&
-      labelAABB &&
-      doBoundsIntersect(selectionBounds, labelAABB)
-    ) {
-      elementsInSelection.add(element);
-      continue;
-    }
-
-    // 3. Handle the case where the selection is not wrapping the element, but
-    //    it does intersect the element's outline (non-AABB).
-    if (type === "overlap" && doBoundsIntersect(selectionBounds, elementAABB)) {
-      let hasIntersection = false;
-
-      // Preliminary check potential intersection imprecision
-      if (isLinearElement(element) || isFreeDrawElement(element)) {
-        const center = elementCenterPoint(element, elementsMap);
-        hasIntersection = element.points.some((point) => {
-          const rotatedPoint = pointRotateRads(
-            pointFrom<GlobalPoint>(element.x + point[0], element.y + point[1]),
-            center,
-            element.angle,
-          );
-
-          return pointInsideBounds(rotatedPoint, selectionBounds);
-        });
-      } else {
-        const nonRotatedElementBounds = getElementBounds(
-          element,
-          elementsMap,
-          true,
-        );
-        const center = elementCenterPoint(element, elementsMap);
-        hasIntersection = [
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
-              nonRotatedElementBounds[1],
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              nonRotatedElementBounds[2],
-              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              (nonRotatedElementBounds[0] + nonRotatedElementBounds[2]) / 2,
-              nonRotatedElementBounds[3],
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            pointFrom<GlobalPoint>(
-              nonRotatedElementBounds[0],
-              (nonRotatedElementBounds[1] + nonRotatedElementBounds[3]) / 2,
-            ),
-            center,
-            element.angle,
-          ),
-        ].some((point) => {
-          return pointInsideBounds(
-            pointRotateRads(point, center, element.angle),
-            selectionBounds,
-          );
-        });
-      }
-
-      if (!hasIntersection) {
-        hasIntersection = selectionEdges.some(
-          (selectionEdge) =>
-            intersectElementWithLineSegment(
-              element,
-              elementsMap,
-              selectionEdge,
-              strokeWidth / 2,
-              true, // Stop at first hit for better performance
-            ).length > 0,
-        );
-      }
-
-      if (hasIntersection) {
-        if (framesInSelection && isFrameLikeElement(element)) {
-          framesInSelection.add(element.id);
-        }
-
-        elementsInSelection.add(element);
-        continue;
-      }
-    }
-
-    // 4. We don't need to handle when the selection is inside the element
-    //    as it is separately handled in App.
-  }
-
-  if (framesInSelection) {
-    elementsInSelection.forEach((element) => {
-      if (element.frameId && framesInSelection.has(element.frameId)) {
-        elementsInSelection.delete(element);
-      }
-    });
-  }
-
-  if (type === "overlap") {
-    Array.from(elementsInSelection).forEach((element) => {
-      const groupId = element.groupIds.at(-1);
-      const group = groupId ? groups[groupId] : null;
-
-      group?.forEach((groupElement) => elementsInSelection.add(groupElement));
-    });
-  } else if (type === "contain") {
-    elementsInSelection.forEach((element) => {
-      // note: currently we only support top-level group handling since
-      // we don't support box selecting while editing the group/subgroup
-      // see https://github.com/excalidraw/excalidraw/pull/11234#issuecomment-4387654451
-      const groupId = element.groupIds.at(-1);
-
-      const group = groupId ? groups[groupId] : null;
-
-      if (
-        group &&
-        !group.every((groupElement) => elementsInSelection.has(groupElement))
-      ) {
-        elementsInSelection.delete(element);
-      }
-    });
-  }
-
-  // to maintain original order elements (namely for group selection)
-  return elements.filter((element) => elementsInSelection.has(element));
-};
-
 export const elementCenterPoint = (
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
  xOffset: number = 0,
  yOffset: number = 0,
 ) => {
-  if (isLinearElement(element) || isFreeDrawElement(element)) {
+  if (isLinearElement(element)) {
    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);

@@ -61,8 +61,6 @@ import { distanceToElement } from "./distance";

 import { getBindingGap } from "./binding";

-import { hasBackground } from "./comparisons";
-
 import type {
  ElementsMap,
  ExcalidrawArrowElement,
@@ -85,7 +83,7 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
  }

  const isDraggableFromInside =
-    (hasBackground(element.type) && !isTransparent(element.backgroundColor)) ||
+    !isTransparent(element.backgroundColor) ||
    hasBoundTextElement(element) ||
    isIframeLikeElement(element) ||
    isTextElement(element);
@@ -156,11 +154,14 @@ export const hitElementItself = ({

  // Hit test against the extended, rotated bounding box of the element first
  const bounds = getElementBounds(element, elementsMap, true);
-  const hitBounds = isPointInRotatedBounds(
-    point,
-    bounds,
-    element.angle,
-    threshold,
+  const hitBounds = isPointWithinBounds(
+    pointFrom(bounds[0] - threshold, bounds[1] - threshold),
+    pointRotateRads(
+      point,
+      getCenterForBounds(bounds),
+      -element.angle as Radians,
+    ),
+    pointFrom(bounds[2] + threshold, bounds[3] + threshold),
  );

  // PERF: Bail out early if the point is not even in the
@@ -191,32 +192,18 @@ export const hitElementItself = ({
  return result;
 };

-const isPointInRotatedBounds = (
-  point: GlobalPoint,
-  bounds: Bounds,
-  angle: Radians,
-  tolerance = 0,
-) => {
-  const adjustedPoint =
-    angle === 0
-      ? point
-      : pointRotateRads(point, getCenterForBounds(bounds), -angle as Radians);
-
-  return isPointWithinBounds(
-    pointFrom(bounds[0] - tolerance, bounds[1] - tolerance),
-    adjustedPoint,
-    pointFrom(bounds[2] + tolerance, bounds[3] + tolerance),
-  );
-};
-
 export const hitElementBoundingBox = (
  point: GlobalPoint,
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
  tolerance = 0,
 ) => {
-  const bounds = getElementBounds(element, elementsMap, true);
-  return isPointInRotatedBounds(point, bounds, element.angle, tolerance);
+  let [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
+  x1 -= tolerance;
+  y1 -= tolerance;
+  x2 += tolerance;
+  y2 += tolerance;
+  return isPointWithinBounds(pointFrom(x1, y1), point, pointFrom(x2, y2));
 };

 export const hitElementBoundingBoxOnly = (
@@ -326,10 +313,7 @@ export const getAllHoveredElementAtPoint = (
    ) {
      candidateElements.push(element);

-      if (
-        hasBackground(element.type) &&
-        !isTransparent(element.backgroundColor)
-      ) {
+      if (!isTransparent(element.backgroundColor)) {
        break;
      }
    }
@@ -481,12 +465,7 @@ export const intersectElementWithLineSegment = (
    case "line":
    case "freedraw":
    case "arrow":
-      return intersectLinearOrFreeDrawWithLineSegment(
-        element,
-        line,
-        elementsMap,
-        onlyFirst,
-      );
+      return intersectLinearOrFreeDrawWithLineSegment(element, line, onlyFirst);
  }
 };

@@ -553,15 +532,11 @@ const lineIntersections = (
 const intersectLinearOrFreeDrawWithLineSegment = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
  segment: LineSegment<GlobalPoint>,
-  elementsMap: ElementsMap,
  onlyFirst = false,
 ): GlobalPoint[] => {
  // NOTE: This is the only one which return the decomposed elements
  // rotated! This is due to taking advantage of roughjs definitions.
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(
-    element,
-    elementsMap,
-  );
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
  const intersections: GlobalPoint[] = [];

  for (const l of lines) {
@@ -589,9 +564,7 @@ const intersectLinearOrFreeDrawWithLineSegment = (
      continue;
    }

-    const hits = curveIntersectLineSegment(c, segment, {
-      iterLimit: 10,
-    });
+    const hits = curveIntersectLineSegment(c, segment);

    if (hits.length > 0) {
      intersections.push(...hits);
@@ -38,8 +38,6 @@ export const hasStrokeStyle = (type: ElementOrToolType) =>
  type === "arrow" ||
  type === "line";

-export const hasFreedrawMode = (type: ElementOrToolType) => type === "freedraw";
-
 export const canChangeRoundness = (type: ElementOrToolType) =>
  type === "rectangle" ||
  type === "iframe" ||
@@ -48,7 +48,7 @@ export const distanceToElement = (
    case "line":
    case "arrow":
    case "freedraw":
-      return distanceToLinearOrFreeDraElement(element, elementsMap, p);
+      return distanceToLinearOrFreeDraElement(element, p);
  }
 };

@@ -133,13 +133,9 @@ const distanceToEllipseElement = (

 const distanceToLinearOrFreeDraElement = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-  elementsMap: ElementsMap,
  p: GlobalPoint,
 ) => {
-  const [lines, curves] = deconstructLinearOrFreeDrawElement(
-    element,
-    elementsMap,
-  );
+  const [lines, curves] = deconstructLinearOrFreeDrawElement(element);
  return Math.min(
    ...lines.map((s) => distanceToLineSegment(p, s)),
    ...curves.map((a) => curvePointDistance(a, p)),
@@ -111,9 +111,6 @@ export const duplicateElements = (
         * user interaction.
         */
        type: "everything";
-        // TODO remove/review this once we add frame children order migration
-        // and invariant checks
-        preserveFrameChildrenOrder?: boolean;
      }
    | {
        /**
@@ -173,8 +170,6 @@ export const duplicateElements = (
    opts.type === "in-place"
      ? opts.idsOfElementsToDuplicate
      : new Map(elements.map((el) => [el.id, el]));
-  const preserveFrameChildrenOrder =
-    opts.type === "everything" && opts.preserveFrameChildrenOrder;

  // For sanity
  if (opts.type === "in-place") {
@@ -255,9 +250,6 @@ export const duplicateElements = (
    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements));
  };

-  // main
-  // ---------------------------------------------------------------------------
-
  const frameIdsToDuplicate = new Set(
    elements
      .filter(
@@ -282,7 +274,7 @@ export const duplicateElements = (
    if (groupId) {
      const groupElements = getElementsInGroup(elements, groupId).flatMap(
        (element) =>
-          isFrameLikeElement(element) && !preserveFrameChildrenOrder
+          isFrameLikeElement(element)
            ? [...getFrameChildren(elements, element.id), element]
            : [element],
      );
@@ -298,25 +290,13 @@ export const duplicateElements = (
    // frame duplication
    // -------------------------------------------------------------------------

-    if (
-      !preserveFrameChildrenOrder &&
-      element.frameId &&
-      frameIdsToDuplicate.has(element.frameId)
-    ) {
+    if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
      continue;
    }

    if (isFrameLikeElement(element)) {
      const frameId = element.id;

-      if (preserveFrameChildrenOrder) {
-        insertBeforeOrAfterIndex(
-          findLastIndex(elementsWithDuplicates, (el) => el.id === frameId),
-          copyElements(element),
-        );
-        continue;
-      }
-
      const frameChildren = getFrameChildren(elements, frameId);

      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
    offsetY < -MAX_POS ||
    offsetY > MAX_POS ||
    offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetX + points[points.length - 1][0] > MAX_POS ||
-    offsetY + points[points.length - 1][1] < -MAX_POS ||
+    offsetY + points[points.length - 1][0] > MAX_POS ||
+    offsetX + points[points.length - 1][1] < -MAX_POS ||
    offsetY + points[points.length - 1][1] > MAX_POS
  ) {
    console.error(
@@ -1,9 +1,6 @@
-import { arrayToMap } from "@excalidraw/common";
+import { generateNKeysBetween } from "fractional-indexing";

-import {
-  validateOrderKey,
-  generateNKeysBetween,
-} from "@excalidraw/fractional-indexing";
+import { arrayToMap } from "@excalidraw/common";

 import { mutateElement, newElementWith } from "./mutateElement";
 import { getBoundTextElement } from "./textElement";
@@ -385,13 +382,6 @@ const isValidFractionalIndex = (
    return false;
  }

-  try {
-    // Format validation
-    validateOrderKey(index);
-  } catch {
-    return false;
-  }
-
  if (predecessor && successor) {
    return predecessor < index && index < successor;
  }
@@ -1,9 +1,7 @@
 import { arrayToMap } from "@excalidraw/common";
-import {
-  isPointWithinBounds,
-  pointFrom,
-  segmentsIntersectAt,
-} from "@excalidraw/math";
+import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
+import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
+import { elementsOverlappingBBox } from "@excalidraw/utils/withinBounds";

 import type {
  AppClassProperties,
@@ -20,13 +18,9 @@ import {
  getElementLineSegments,
  getCommonBounds,
  getElementAbsoluteCoords,
-  doBoundsIntersect,
-  getElementBounds,
-  boundsContainBounds,
 } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getBoundTextElement, getContainerElement } from "./textElement";
-import { syncMovedIndices } from "./fractionalIndex";
 import {
  isFrameElement,
  isFrameLikeElement,
@@ -81,7 +75,7 @@ export function isElementIntersectingFrame(

  const intersecting = frameLineSegments.some((frameLineSegment) =>
    elementLineSegments.some((elementLineSegment) =>
-      segmentsIntersectAt(frameLineSegment, elementLineSegment),
+      doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
    ),
  );

@@ -106,9 +100,8 @@ export const isElementContainingFrame = (
  frame: ExcalidrawFrameLikeElement,
  elementsMap: ElementsMap,
 ) => {
-  return boundsContainBounds(
-    getElementBounds(element, elementsMap),
-    getElementBounds(frame, elementsMap),
+  return getElementsWithinSelection([frame], element, elementsMap).some(
+    (e) => e.id === frame.id,
  );
 };

@@ -495,44 +488,10 @@ export const filterElementsEligibleAsFrameChildren = (
  return eligibleElements;
 };

-export const getCommonFrameId = (elements: readonly ExcalidrawElement[]) => {
-  let commonFrameId: ExcalidrawElement["frameId"] | undefined;
-
-  for (const element of elements) {
-    if (isFrameLikeElement(element) || !element.frameId) {
-      return null;
-    }
-
-    if (commonFrameId === undefined) {
-      commonFrameId = element.frameId;
-    } else if (commonFrameId !== element.frameId) {
-      return null;
-    }
-  }
-
-  return commonFrameId ?? null;
-};
-
-export const getFrameChildrenInsertionIndex = (
-  elements: readonly ExcalidrawElement[],
-  frameId: ExcalidrawFrameLikeElement["id"],
-): number | null => {
-  for (let index = elements.length - 1; index >= 0; index--) {
-    const element = elements[index];
-
-    if (element.id === frameId) {
-      return index;
-    } else if (element.frameId === frameId) {
-      return index + 1;
-    }
-  }
-
-  return null;
-};
-
 /**
- * Adds elements and their bound elements to frame. Reorders added elements to
- * be just below frame, or just above its highest child (whichever is higher).
+ * Retains (or repairs for target frame) the ordering invriant where children
+ * elements come right before the parent frame:
+ * [el, el, child, child, frame, el]
 *
 * @returns mutated allElements (same data structure)
 */
@@ -540,11 +499,19 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
  allElements: T,
  elementsToAdd: NonDeletedExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
+  appState: AppState,
 ): T => {
  const elementsMap = arrayToMap(allElements);
-  const commonFrameId = getCommonFrameId(elementsToAdd);
+  const currTargetFrameChildrenMap = new Map<ExcalidrawElement["id"], true>();
+  for (const element of allElements.values()) {
+    if (element.frameId === frame.id) {
+      currTargetFrameChildrenMap.set(element.id, true);
+    }
+  }

-  const finalElementsToAdd = new Set<ExcalidrawElement>();
+  const suppliedElementsToAddSet = new Set(elementsToAdd.map((el) => el.id));
+
+  const finalElementsToAdd: ExcalidrawElement[] = [];

  const otherFrames = new Set<ExcalidrawFrameLikeElement["id"]>();

@@ -555,8 +522,7 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
  }

  // - add bound text elements if not already in the array
-  // - keep elements already in the frame so mixed selections can be reordered
-  //   together
+  // - filter out elements that are already in the frame
  for (const element of omitGroupsContainingFrameLikes(
    allElements,
    elementsToAdd,
@@ -569,64 +535,38 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
      continue;
    }

-    finalElementsToAdd.add(element);
+    // if the element is already in another frame (which is also in elementsToAdd),
+    // it means that frame and children are selected at the same time
+    // => keep original frame membership, do not add to the target frame
+    if (
+      element.frameId &&
+      appState.selectedElementIds[element.id] &&
+      appState.selectedElementIds[element.frameId]
+    ) {
+      continue;
+    }
+
+    if (!currTargetFrameChildrenMap.has(element.id)) {
+      finalElementsToAdd.push(element);
+    }

    const boundTextElement = getBoundTextElement(element, elementsMap);
-    if (boundTextElement && !finalElementsToAdd.has(boundTextElement)) {
-      finalElementsToAdd.add(boundTextElement);
+    if (
+      boundTextElement &&
+      !suppliedElementsToAddSet.has(boundTextElement.id) &&
+      !currTargetFrameChildrenMap.has(boundTextElement.id)
+    ) {
+      finalElementsToAdd.push(boundTextElement);
    }
  }

  for (const element of finalElementsToAdd) {
-    // we don't always need to update the element if it's already in the frame,
-    // but we still need to accumulate in finalElementsToAdd so we potentially
-    // reorder them if added together
-    if (element.frameId !== frame.id) {
-      mutateElement(element, elementsMap, {
-        frameId: frame.id,
-      });
-    }
+    mutateElement(element, elementsMap, {
+      frameId: frame.id,
+    });
  }

-  // (re)order elements to be just below the frame,
-  // or just above the highest child if that is higher
-  // (latter case is denormalized order until we migrate)
-  // ---------------------------------------------------------------------------
-
-  if (
-    !finalElementsToAdd.size ||
-    // if all elements to add already belong to the frame, then we don't want to
-    // reorder (case: we're dragging element children within the frame)
-    commonFrameId === frame.id
-  ) {
-    return allElements;
-  }
-
-  const otherElements = Array.from(allElements.values()).filter(
-    (element) => !finalElementsToAdd.has(element),
-  );
-  const insertionIndex = getFrameChildrenInsertionIndex(
-    otherElements,
-    frame.id,
-  );
-
-  if (insertionIndex === null) {
-    return allElements;
-  }
-
-  const reorderedElements = [
-    ...otherElements.slice(0, insertionIndex),
-    ...finalElementsToAdd,
-    ...otherElements.slice(insertionIndex),
-  ];
-
-  syncMovedIndices(reorderedElements, arrayToMap([...finalElementsToAdd]));
-
-  return (
-    Array.isArray(allElements)
-      ? reorderedElements
-      : new Map(reorderedElements.map((element) => [element.id, element]))
-  ) as T;
+  return allElements;
 };

 export const removeElementsFromFrame = (
@@ -680,11 +620,13 @@ export const replaceAllElementsInFrame = <T extends ExcalidrawElement>(
  allElements: readonly T[],
  nextElementsInFrame: ExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
+  app: AppClassProperties,
 ): T[] => {
  return addElementsToFrame(
    removeAllElementsFromFrame(allElements, frame),
    nextElementsInFrame,
    frame,
+    app.state,
  ).slice();
 };

@@ -978,17 +920,16 @@ export const getFrameLikeTitle = (element: ExcalidrawFrameLikeElement) => {
 export const getElementsOverlappingFrame = (
  elements: readonly ExcalidrawElement[],
  frame: ExcalidrawFrameLikeElement,
-  elementsMap: ElementsMap,
 ) => {
-  return elements.filter(
-    (el) =>
-      // exclude elements which are overlapping, but are in a different frame,
+  return (
+    elementsOverlappingBBox({
+      elements,
+      bounds: frame,
+      type: "overlap",
+    })
+      // removes elements who are overlapping, but are in a different frame,
      // and thus invisible in target frame
-      (!el.frameId || el.frameId === frame.id) &&
-      doBoundsIntersect(
-        getElementBounds(el, elementsMap),
-        getElementBounds(frame, elementsMap),
-      ),
+      .filter((el) => !el.frameId || el.frameId === frame.id)
  );
 };

@@ -99,4 +99,3 @@ export * from "./typeChecks";
 export * from "./utils";
 export * from "./zindex";
 export * from "./arrows/helpers";
-export * from "./arrowheads";
@@ -476,22 +476,16 @@ export class LinearElementEditor {
      });
    }

-    if (
-      lastClickedPoint < 0 ||
-      !selectedPointsIndices.includes(lastClickedPoint) ||
-      !element.points[lastClickedPoint]
-    ) {
-      console.error(
-        `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
-          selectedPointsIndices,
-        )}) points(0..${
-          element.points.length - 1
-        }) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`,
-      );
-
-      // Fall back to the actual last point as a last resort.
-      lastClickedPoint = element.points.length - 1;
-    }
+    invariant(
+      lastClickedPoint > -1 &&
+        selectedPointsIndices.includes(lastClickedPoint) &&
+        element.points[lastClickedPoint],
+      `There must be a valid lastClickedPoint in order to drag it. selectedPointsIndices(${JSON.stringify(
+        selectedPointsIndices,
+      )}) points(0..${
+        element.points.length - 1
+      }) lastClickedPoint(${lastClickedPoint})`,
+    );

    // point that's being dragged (out of all selected points)
    const draggingPoint = element.points[lastClickedPoint];
@@ -800,7 +794,6 @@ export class LinearElementEditor {
          element.points[index + 1],
          index,
          appState.zoom,
-          elementsMap,
        )
      ) {
        midpoints.push(null);
@@ -810,7 +803,6 @@ export class LinearElementEditor {
      const segmentMidPoint = LinearElementEditor.getSegmentMidPoint(
        element,
        index + 1,
-        elementsMap,
      );
      midpoints.push(segmentMidPoint);
      index++;
@@ -898,7 +890,6 @@ export class LinearElementEditor {
    endPoint: P,
    index: number,
    zoom: Zoom,
-    elementsMap: ElementsMap,
  ) {
    if (isElbowArrow(element)) {
      if (index >= 0 && index < element.points.length) {
@@ -913,10 +904,7 @@ export class LinearElementEditor {

    let distance = pointDistance(startPoint, endPoint);
    if (element.points.length > 2 && element.roundness) {
-      const [lines, curves] = deconstructLinearOrFreeDrawElement(
-        element,
-        elementsMap,
-      );
+      const [lines, curves] = deconstructLinearOrFreeDrawElement(element);

      invariant(
        lines.length === 0 && curves.length > 0,
@@ -936,7 +924,6 @@ export class LinearElementEditor {
  static getSegmentMidPoint(
    element: NonDeleted<ExcalidrawLinearElement>,
    index: number,
-    elementsMap: ElementsMap,
  ): GlobalPoint {
    if (isElbowArrow(element)) {
      invariant(
@@ -949,10 +936,7 @@ export class LinearElementEditor {
      return pointFrom<GlobalPoint>(element.x + p[0], element.y + p[1]);
    }

-    const [lines, curves] = deconstructLinearOrFreeDrawElement(
-      element,
-      elementsMap,
-    );
+    const [lines, curves] = deconstructLinearOrFreeDrawElement(element);

    invariant(
      (lines.length === 0 && curves.length > 0) ||
@@ -1867,7 +1851,6 @@ export class LinearElementEditor {
      const midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
        element,
        index + 1,
-        elementsMap,
      );

      x = midSegmentMidpoint[0] - boundTextElement.width / 2;
@@ -2139,13 +2122,13 @@ const pointDraggingUpdates = (
 } => {
  const naiveDraggingPoints = new Map(
    selectedPointsIndices.map((pointIndex) => {
-      // NOTE: Avoid stale point index issue potentially caused by elbow
-      // arrows unpredictably changing the number of points during dragging
-      const point = element.points[pointIndex] ?? element.points.at(-1);
      return [
        pointIndex,
        {
-          point: pointFrom<LocalPoint>(point[0] + deltaX, point[1] + deltaY),
+          point: pointFrom<LocalPoint>(
+            element.points[pointIndex][0] + deltaX,
+            element.points[pointIndex][1] + deltaY,
+          ),
          isDragging: true,
        },
      ];
@@ -2417,7 +2400,7 @@ const pointDraggingUpdates = (
    ? nextArrow.points[0]
    : endBindable
    ? updateBoundPoint(
-        nextArrow,
+        element,
        "endBinding",
        nextArrow.endBinding,
        endBindable,
@@ -2448,7 +2431,7 @@ const pointDraggingUpdates = (
      ? endLocalPoint
      : startBindable
      ? updateBoundPoint(
-          nextArrow,
+          element,
          "startBinding",
          nextArrow.startBinding,
          startBindable,
@@ -4,7 +4,6 @@ import {
  DEFAULT_FONT_SIZE,
  DEFAULT_TEXT_ALIGN,
  DEFAULT_VERTICAL_ALIGN,
-  DEFAULT_STROKE_STREAMLINE,
  VERTICAL_ALIGN,
  randomInteger,
  randomId,
@@ -445,7 +444,6 @@ export const newFreeDrawElement = (
    type: "freedraw";
    points?: ExcalidrawFreeDrawElement["points"];
    simulatePressure: boolean;
-    strokeOptions?: ExcalidrawFreeDrawElement["strokeOptions"];
    pressures?: ExcalidrawFreeDrawElement["pressures"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFreeDrawElement> => {
@@ -454,10 +452,6 @@ export const newFreeDrawElement = (
    points: opts.points || [],
    pressures: opts.pressures || [],
    simulatePressure: opts.simulatePressure,
-    strokeOptions: opts.strokeOptions ?? {
-      variability: "variable",
-      streamline: DEFAULT_STROKE_STREAMLINE,
-    },
  };
 };

@@ -422,10 +422,10 @@ const drawElementOnCanvas = (

      for (const shape of shapes) {
        if (typeof shape === "string") {
-          context.fillStyle = applyDarkModeFilter(
-            element.strokeColor,
-            renderConfig.theme === THEME.DARK,
-          );
+          context.fillStyle =
+            renderConfig.theme === THEME.DARK
+              ? applyDarkModeFilter(element.strokeColor)
+              : element.strokeColor;
          context.fill(new Path2D(shape));
        } else {
          rc.draw(shape);
@@ -555,10 +555,10 @@ const drawElementOnCanvas = (
        context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
        context.save();
        context.font = getFontString(element);
-        context.fillStyle = applyDarkModeFilter(
-          element.strokeColor,
-          renderConfig.theme === THEME.DARK,
-        );
+        context.fillStyle =
+          renderConfig.theme === THEME.DARK
+            ? applyDarkModeFilter(element.strokeColor)
+            : element.strokeColor;
        context.textAlign = element.textAlign as CanvasTextAlign;

        // Canvas does not support multiline text by default
@@ -811,10 +811,10 @@ export const renderElement = (
        context.fillStyle = "rgba(0, 0, 200, 0.04)";

        context.lineWidth = FRAME_STYLE.strokeWidth / appState.zoom.value;
-        context.strokeStyle = applyDarkModeFilter(
-          FRAME_STYLE.strokeColor,
-          appState.theme === THEME.DARK,
-        );
+        context.strokeStyle =
+          appState.theme === THEME.DARK
+            ? applyDarkModeFilter(FRAME_STYLE.strokeColor)
+            : FRAME_STYLE.strokeColor;

        // TODO change later to only affect AI frames
        if (isMagicFrameElement(element)) {
@@ -889,10 +889,8 @@ export const renderElement = (
    case "embeddable": {
      if (renderConfig.isExporting) {
        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-        const centerX = (x1 + x2) / 2;
-        const centerY = (y1 + y2) / 2;
-        const cx = centerX + appState.scrollX;
-        const cy = centerY + appState.scrollY;
+        const cx = (x1 + x2) / 2 + appState.scrollX;
+        const cy = (y1 + y2) / 2 + appState.scrollY;
        let shiftX = (x2 - x1) / 2 - (element.x - x1);
        let shiftY = (y2 - y1) / 2 - (element.y - y1);
        if (isTextElement(element)) {
@@ -914,49 +912,64 @@ export const renderElement = (
        const boundTextElement = getBoundTextElement(element, elementsMap);

        if (isArrowElement(element) && boundTextElement) {
-          // Draw arrow directly as vector and clear label hole separately.
-          // This avoids temp-canvas bitmap blit which introduces resampling blur.
+          const tempCanvas = document.createElement("canvas");
+
+          const tempCanvasContext = tempCanvas.getContext("2d")!;
+
+          // Take max dimensions of arrow canvas so that when canvas is rotated
+          // the arrow doesn't get clipped
+          const maxDim = Math.max(distance(x1, x2), distance(y1, y2));
+          const padding = getCanvasPadding(element);
+          tempCanvas.width =
+            maxDim * appState.exportScale + padding * 10 * appState.exportScale;
+          tempCanvas.height =
+            maxDim * appState.exportScale + padding * 10 * appState.exportScale;
+
+          tempCanvasContext.translate(
+            tempCanvas.width / 2,
+            tempCanvas.height / 2,
+          );
+          tempCanvasContext.scale(appState.exportScale, appState.exportScale);
+
+          // Shift the canvas to left most point of the arrow
          shiftX = element.width / 2 - (element.x - x1);
          shiftY = element.height / 2 - (element.y - y1);

-          context.save();
-          context.rotate(element.angle);
-          context.translate(-shiftX, -shiftY);
-          drawElementOnCanvas(element, rc, context, renderConfig);
-          context.restore();
+          tempCanvasContext.rotate(element.angle);
+          const tempRc = rough.canvas(tempCanvas);

+          tempCanvasContext.translate(-shiftX, -shiftY);
+
+          drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
+
+          tempCanvasContext.translate(shiftX, shiftY);
+
+          tempCanvasContext.rotate(-element.angle);
+
+          // Shift the canvas to center of bound text
          const [, , , , boundTextCx, boundTextCy] = getElementAbsoluteCoords(
            boundTextElement,
            elementsMap,
          );
-          const holeX =
-            boundTextCx -
-            centerX -
-            boundTextElement.width / 2 -
-            BOUND_TEXT_PADDING;
-          const holeY =
-            boundTextCy -
-            centerY -
-            boundTextElement.height / 2 -
-            BOUND_TEXT_PADDING;
-          const holeWidth = boundTextElement.width + BOUND_TEXT_PADDING * 2;
-          const holeHeight = boundTextElement.height + BOUND_TEXT_PADDING * 2;
+          const boundTextShiftX = (x1 + x2) / 2 - boundTextCx;
+          const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;
+          tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY);

-          const isTransparentHole =
-            "viewBackgroundColor" in appState &&
-            (appState.viewBackgroundColor === "transparent" ||
-              !appState.viewBackgroundColor);
-          if (!isTransparentHole) {
-            context.save();
-            context.fillStyle = applyDarkModeFilter(
-              renderConfig.canvasBackgroundColor,
-              renderConfig.theme === THEME.DARK,
-            );
-            context.fillRect(holeX, holeY, holeWidth, holeHeight);
-            context.restore();
-          } else {
-            context.clearRect(holeX, holeY, holeWidth, holeHeight);
-          }
+          // Clear the bound text area
+          tempCanvasContext.clearRect(
+            -boundTextElement.width / 2,
+            -boundTextElement.height / 2,
+            boundTextElement.width,
+            boundTextElement.height,
+          );
+          context.scale(1 / appState.exportScale, 1 / appState.exportScale);
+          context.drawImage(
+            tempCanvas,
+            -tempCanvas.width / 2,
+            -tempCanvas.height / 2,
+            tempCanvas.width,
+            tempCanvas.height,
+          );
        } else {
          context.rotate(element.angle);

@@ -1,20 +1,22 @@
-import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
+import { arrayToMap, isShallowEqual } from "@excalidraw/common";

 import type {
  AppState,
-  BoxSelectionMode,
  InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";

-import { elementsOverlappingBBox, getElementAbsoluteCoords } from "./bounds";
+import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
 import { isElementInViewport } from "./sizeHelpers";
 import {
  isBoundToContainer,
  isFrameLikeElement,
  isLinearElement,
-  isTextElement,
 } from "./typeChecks";
-import { getFrameChildren } from "./frame";
+import {
+  elementOverlapsWithFrame,
+  getContainingFrame,
+  getFrameChildren,
+} from "./frame";

 import { LinearElementEditor } from "./linearElementEditor";
 import { selectGroupsForSelectedElements } from "./groups";
@@ -23,27 +25,9 @@ import type {
  ElementsMap,
  ElementsMapOrArray,
  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-  NonDeleted,
  NonDeletedExcalidrawElement,
 } from "./types";

-const shouldIgnoreElementFromSelection = (
-  element: NonDeletedExcalidrawElement,
-) => element.locked || isBoundToContainer(element);
-
-const excludeElementsFromFrames = <T extends ExcalidrawElement>(
-  selectedElements: readonly T[],
-  framesInSelection: Set<ExcalidrawFrameLikeElement["id"]>,
-) => {
-  return selectedElements.filter((element) => {
-    if (element.frameId && framesInSelection.has(element.frameId)) {
-      return false;
-    }
-    return true;
-  });
-};
-
 /**
 * Frames and their containing elements are not to be selected at the same time.
 * Given an array of selected elements, if there are frames and their containing elements
@@ -63,38 +47,68 @@ export const excludeElementsInFramesFromSelection = <
    }
  });

-  return excludeElementsFromFrames(selectedElements, framesInSelection);
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
 };

 export const getElementsWithinSelection = (
  elements: readonly NonDeletedExcalidrawElement[],
  selection: NonDeletedExcalidrawElement,
  elementsMap: ElementsMap,
-  // TODO remove (this flag is effectively unused AFAIK)
  excludeElementsInFrames: boolean = true,
-  boxSelectionMode: BoxSelectionMode = "contain",
-): NonDeletedExcalidrawElement[] => {
-  const [selectionStartX, selectionStartY, selectionEndX, selectionEndY] =
+) => {
+  const [selectionX1, selectionY1, selectionX2, selectionY2] =
    getElementAbsoluteCoords(selection, elementsMap);
-  const selectionX1 = Math.min(selectionStartX, selectionEndX);
-  const selectionY1 = Math.min(selectionStartY, selectionEndY);
-  const selectionX2 = Math.max(selectionStartX, selectionEndX);
-  const selectionY2 = Math.max(selectionStartY, selectionEndY);
-  const selectionBounds = [
-    selectionX1,
-    selectionY1,
-    selectionX2,
-    selectionY2,
-  ] as Bounds;

-  return elementsOverlappingBBox({
-    elements,
-    bounds: selectionBounds,
-    elementsMap,
-    type: boxSelectionMode,
-    shouldIgnoreElementFromSelection,
-    excludeElementsInFrames,
+  let elementsInSelection = elements.filter((element) => {
+    let [elementX1, elementY1, elementX2, elementY2] = getElementBounds(
+      element,
+      elementsMap,
+    );
+
+    const containingFrame = getContainingFrame(element, elementsMap);
+    if (containingFrame) {
+      const [fx1, fy1, fx2, fy2] = getElementBounds(
+        containingFrame,
+        elementsMap,
+      );
+
+      elementX1 = Math.max(fx1, elementX1);
+      elementY1 = Math.max(fy1, elementY1);
+      elementX2 = Math.min(fx2, elementX2);
+      elementY2 = Math.min(fy2, elementY2);
+    }
+
+    return (
+      element.locked === false &&
+      element.type !== "selection" &&
+      !isBoundToContainer(element) &&
+      selectionX1 <= elementX1 &&
+      selectionY1 <= elementY1 &&
+      selectionX2 >= elementX2 &&
+      selectionY2 >= elementY2
+    );
  });
+
+  elementsInSelection = excludeElementsInFrames
+    ? excludeElementsInFramesFromSelection(elementsInSelection)
+    : elementsInSelection;
+
+  elementsInSelection = elementsInSelection.filter((element) => {
+    const containingFrame = getContainingFrame(element, elementsMap);
+
+    if (containingFrame) {
+      return elementOverlapsWithFrame(element, containingFrame, elementsMap);
+    }
+
+    return true;
+  });
+
+  return elementsInSelection;
 };

 export const getVisibleAndNonSelectedElements = (
@@ -274,19 +288,3 @@ export const getSelectionStateForElements = (
    ),
  };
 };
-
-/**
- * Returns editing or single-selected text element, if any.
- */
-export const getActiveTextElement = (
-  selectedElements: readonly NonDeleted<ExcalidrawElement>[],
-  appState: Pick<AppState, "editingTextElement">,
-) => {
-  const activeTextElement =
-    appState.editingTextElement ||
-    (selectedElements.length === 1 &&
-      isTextElement(selectedElements[0]) &&
-      selectedElements[0]);
-
-  return activeTextElement || null;
-};
@@ -1,6 +1,5 @@
 import { simplify } from "points-on-curve";
 import { getStroke } from "perfect-freehand";
-import { LaserPointer } from "@excalidraw/laser-pointer";

 import {
  type GeometricShape,
@@ -25,7 +24,6 @@ import {
  COLOR_PALETTE,
  LINE_POLYGON_POINT_MERGE_DISTANCE,
  applyDarkModeFilter,
-  DEFAULT_STROKE_STREAMLINE,
 } from "@excalidraw/common";

 import { RoughGenerator } from "roughjs/bin/generator";
@@ -59,8 +57,8 @@ import { headingForPointIsHorizontal } from "./heading";

 import { canChangeRoundness } from "./comparisons";
 import {
-  elementCenterPoint,
  getArrowheadPoints,
+  getCenterForBounds,
  getDiamondPoints,
  getElementAbsoluteCoords,
 } from "./bounds";
@@ -71,10 +69,10 @@ import type {
  NonDeletedExcalidrawElement,
  ExcalidrawSelectionElement,
  ExcalidrawLinearElement,
+  Arrowhead,
  ExcalidrawFreeDrawElement,
  ElementsMap,
  ExcalidrawLineElement,
-  Arrowhead,
 } from "./types";

 import type { Drawable, Options } from "roughjs/bin/core";
@@ -220,7 +218,9 @@ export const generateRoughOptions = (
    fillWeight: element.strokeWidth / 2,
    hachureGap: element.strokeWidth * 4,
    roughness: adjustRoughness(element),
-    stroke: applyDarkModeFilter(element.strokeColor, isDarkMode),
+    stroke: isDarkMode
+      ? applyDarkModeFilter(element.strokeColor)
+      : element.strokeColor,
    preserveVertices:
      continuousPath || element.roughness < ROUGHNESS.cartoonist,
  };
@@ -234,7 +234,9 @@ export const generateRoughOptions = (
      options.fillStyle = element.fillStyle;
      options.fill = isTransparent(element.backgroundColor)
        ? undefined
-        : applyDarkModeFilter(element.backgroundColor, isDarkMode);
+        : isDarkMode
+        ? applyDarkModeFilter(element.backgroundColor)
+        : element.backgroundColor;
      if (element.type === "ellipse") {
        options.curveFitting = 1;
      }
@@ -247,7 +249,9 @@ export const generateRoughOptions = (
        options.fill =
          element.backgroundColor === "transparent"
            ? undefined
-            : applyDarkModeFilter(element.backgroundColor, isDarkMode);
+            : isDarkMode
+            ? applyDarkModeFilter(element.backgroundColor)
+            : element.backgroundColor;
      }
      return options;
    }
@@ -292,82 +296,6 @@ const modifyIframeLikeForRoughOptions = (
  return element;
 };

-const generateArrowheadCardinalityOne = (
-  generator: RoughGenerator,
-  arrowheadPoints: number[] | null,
-  lineOptions: Options,
-) => {
-  if (arrowheadPoints === null) {
-    return [];
-  }
-
-  const [, , x3, y3, x4, y4] = arrowheadPoints;
-
-  return [generator.line(x3, y3, x4, y4, lineOptions)];
-};
-
-const generateArrowheadLinesToTip = (
-  generator: RoughGenerator,
-  arrowheadPoints: number[] | null,
-  lineOptions: Options,
-) => {
-  if (arrowheadPoints === null) {
-    return [];
-  }
-
-  const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-
-  return [
-    generator.line(x3, y3, x2, y2, lineOptions),
-    generator.line(x4, y4, x2, y2, lineOptions),
-  ];
-};
-
-const getArrowheadLineOptions = (
-  element: ExcalidrawLinearElement,
-  options: Options,
-) => {
-  const lineOptions = { ...options };
-
-  if (element.strokeStyle === "dotted") {
-    // for dotted arrows caps, reduce gap to make it more legible
-    const dash = getDashArrayDotted(element.strokeWidth - 1);
-    lineOptions.strokeLineDash = [dash[0], dash[1] - 1];
-  } else {
-    // for solid/dashed, keep solid arrow cap
-    delete lineOptions.strokeLineDash;
-  }
-  lineOptions.roughness = Math.min(1, lineOptions.roughness || 0);
-
-  return lineOptions;
-};
-
-const generateArrowheadOutlineCircle = (
-  generator: RoughGenerator,
-  options: Options,
-  strokeColor: string,
-  arrowheadPoints: number[] | null,
-  fill: string,
-  diameterScale = 1,
-) => {
-  if (arrowheadPoints === null) {
-    return [];
-  }
-
-  const [x, y, diameter] = arrowheadPoints;
-  const circleOptions = {
-    ...options,
-    fill,
-    fillStyle: "solid" as const,
-    stroke: strokeColor,
-    roughness: Math.min(0.5, options.roughness || 0),
-  };
-
-  delete circleOptions.strokeLineDash;
-
-  return [generator.circle(x, y, diameter * diameterScale, circleOptions)];
-};
-
 const getArrowheadShapes = (
  element: ExcalidrawLinearElement,
  shape: Drawable[],
@@ -378,53 +306,63 @@ const getArrowheadShapes = (
  canvasBackgroundColor: string,
  isDarkMode: boolean,
 ) => {
-  if (arrowhead === null) {
+  const arrowheadPoints = getArrowheadPoints(
+    element,
+    shape,
+    position,
+    arrowhead,
+  );
+
+  if (arrowheadPoints === null) {
    return [];
  }

-  const strokeColor = applyDarkModeFilter(element.strokeColor, isDarkMode);
-  const backgroundFillColor = applyDarkModeFilter(
-    canvasBackgroundColor,
-    isDarkMode,
-  );
-  const cardinalityOneOrManyOffset = -0.25;
-  const cardinalityZeroCircleScale = 0.8;
+  const generateCrowfootOne = (
+    arrowheadPoints: number[] | null,
+    options: Options,
+  ) => {
+    if (arrowheadPoints === null) {
+      return [];
+    }
+
+    const [, , x3, y3, x4, y4] = arrowheadPoints;
+
+    return [generator.line(x3, y3, x4, y4, options)];
+  };
+
+  const strokeColor = isDarkMode
+    ? applyDarkModeFilter(element.strokeColor)
+    : element.strokeColor;

  switch (arrowhead) {
+    case "dot":
    case "circle":
    case "circle_outline": {
-      return generateArrowheadOutlineCircle(
-        generator,
-        options,
-        strokeColor,
-        getArrowheadPoints(element, shape, position, arrowhead),
-        arrowhead === "circle_outline" ? backgroundFillColor : strokeColor,
-      );
+      const [x, y, diameter] = arrowheadPoints;
+
+      // always use solid stroke for arrowhead
+      delete options.strokeLineDash;
+
+      return [
+        generator.circle(x, y, diameter, {
+          ...options,
+          fill:
+            arrowhead === "circle_outline"
+              ? canvasBackgroundColor
+              : strokeColor,
+
+          fillStyle: "solid",
+          stroke: strokeColor,
+          roughness: Math.min(0.5, options.roughness || 0),
+        }),
+      ];
    }
    case "triangle":
    case "triangle_outline": {
-      const arrowheadPoints = getArrowheadPoints(
-        element,
-        shape,
-        position,
-        arrowhead,
-      );
-
-      if (arrowheadPoints === null) {
-        return [];
-      }
-
      const [x, y, x2, y2, x3, y3] = arrowheadPoints;
-      const triangleOptions = {
-        ...options,
-        fill:
-          arrowhead === "triangle_outline" ? backgroundFillColor : strokeColor,
-        fillStyle: "solid" as const,
-        roughness: Math.min(1, options.roughness || 0),
-      };

      // always use solid stroke for arrowhead
-      delete triangleOptions.strokeLineDash;
+      delete options.strokeLineDash;

      return [
        generator.polygon(
@@ -434,34 +372,24 @@ const getArrowheadShapes = (
            [x3, y3],
            [x, y],
          ],
-          triangleOptions,
+          {
+            ...options,
+            fill:
+              arrowhead === "triangle_outline"
+                ? canvasBackgroundColor
+                : strokeColor,
+            fillStyle: "solid",
+            roughness: Math.min(1, options.roughness || 0),
+          },
        ),
      ];
    }
    case "diamond":
    case "diamond_outline": {
-      const arrowheadPoints = getArrowheadPoints(
-        element,
-        shape,
-        position,
-        arrowhead,
-      );
-
-      if (arrowheadPoints === null) {
-        return [];
-      }
-
      const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
-      const diamondOptions = {
-        ...options,
-        fill:
-          arrowhead === "diamond_outline" ? backgroundFillColor : strokeColor,
-        fillStyle: "solid" as const,
-        roughness: Math.min(1, options.roughness || 0),
-      };

      // always use solid stroke for arrowhead
-      delete diamondOptions.strokeLineDash;
+      delete options.strokeLineDash;

      return [
        generator.polygon(
@@ -472,117 +400,53 @@ const getArrowheadShapes = (
            [x4, y4],
            [x, y],
          ],
-          diamondOptions,
-        ),
-      ];
-    }
-    case "cardinality_one":
-      return generateArrowheadCardinalityOne(
-        generator,
-        getArrowheadPoints(element, shape, position, arrowhead),
-        getArrowheadLineOptions(element, options),
-      );
-    case "cardinality_many":
-      return generateArrowheadLinesToTip(
-        generator,
-        getArrowheadPoints(element, shape, position, arrowhead),
-        getArrowheadLineOptions(element, options),
-      );
-    case "cardinality_one_or_many": {
-      const lineOptions = getArrowheadLineOptions(element, options);
-
-      return [
-        ...generateArrowheadLinesToTip(
-          generator,
-          getArrowheadPoints(element, shape, position, "cardinality_many"),
-          lineOptions,
-        ),
-        ...generateArrowheadCardinalityOne(
-          generator,
-          getArrowheadPoints(
-            element,
-            shape,
-            position,
-            "cardinality_one",
-            cardinalityOneOrManyOffset,
-          ),
-          lineOptions,
-        ),
-      ];
-    }
-    case "cardinality_exactly_one": {
-      const lineOptions = getArrowheadLineOptions(element, options);
-
-      return [
-        ...generateArrowheadCardinalityOne(
-          generator,
-          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
-          lineOptions,
-        ),
-        ...generateArrowheadCardinalityOne(
-          generator,
-          getArrowheadPoints(element, shape, position, "cardinality_one"),
-          lineOptions,
-        ),
-      ];
-    }
-    case "cardinality_zero_or_one": {
-      const lineOptions = getArrowheadLineOptions(element, options);
-
-      return [
-        ...generateArrowheadOutlineCircle(
-          generator,
-          options,
-          strokeColor,
-          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
-          backgroundFillColor,
-          cardinalityZeroCircleScale,
-        ),
-        ...generateArrowheadCardinalityOne(
-          generator,
-          getArrowheadPoints(element, shape, position, "cardinality_one", -0.5),
-          lineOptions,
-        ),
-      ];
-    }
-    case "cardinality_zero_or_many": {
-      const lineOptions = getArrowheadLineOptions(element, options);
-
-      return [
-        ...generateArrowheadLinesToTip(
-          generator,
-          getArrowheadPoints(element, shape, position, "cardinality_many"),
-          lineOptions,
-        ),
-        ...generateArrowheadOutlineCircle(
-          generator,
-          options,
-          strokeColor,
-          getArrowheadPoints(element, shape, position, "circle_outline", 1.5),
-          backgroundFillColor,
-          cardinalityZeroCircleScale,
+          {
+            ...options,
+            fill:
+              arrowhead === "diamond_outline"
+                ? canvasBackgroundColor
+                : strokeColor,
+            fillStyle: "solid",
+            roughness: Math.min(1, options.roughness || 0),
+          },
        ),
      ];
    }
+    case "crowfoot_one":
+      return generateCrowfootOne(arrowheadPoints, options);
    case "bar":
    case "arrow":
+    case "crowfoot_many":
+    case "crowfoot_one_or_many":
    default: {
-      return generateArrowheadLinesToTip(
-        generator,
-        getArrowheadPoints(element, shape, position, arrowhead),
-        getArrowheadLineOptions(element, options),
-      );
+      const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+
+      if (element.strokeStyle === "dotted") {
+        // for dotted arrows caps, reduce gap to make it more legible
+        const dash = getDashArrayDotted(element.strokeWidth - 1);
+        options.strokeLineDash = [dash[0], dash[1] - 1];
+      } else {
+        // for solid/dashed, keep solid arrow cap
+        delete options.strokeLineDash;
+      }
+      options.roughness = Math.min(1, options.roughness || 0);
+      return [
+        generator.line(x3, y3, x2, y2, options),
+        generator.line(x4, y4, x2, y2, options),
+        ...(arrowhead === "crowfoot_one_or_many"
+          ? generateCrowfootOne(
+              getArrowheadPoints(element, shape, position, "crowfoot_one"),
+              options,
+            )
+          : []),
+      ];
    }
  }
 };

 export const generateLinearCollisionShape = (
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-  elementsMap: ElementsMap,
-): {
-  op: string;
-  data: number[];
-}[] => {
+) => {
  const generator = new RoughGenerator();
  const options: Options = {
    seed: element.seed,
@@ -591,7 +455,20 @@ export const generateLinearCollisionShape = (
    roughness: 0,
    preserveVertices: true,
  };
-  const center = elementCenterPoint(element, elementsMap);
+  const center = getCenterForBounds(
+    // Need a non-rotated center point
+    element.points.reduce(
+      (acc, point) => {
+        return [
+          Math.min(element.x + point[0], acc[0]),
+          Math.min(element.y + point[1], acc[1]),
+          Math.max(element.x + point[0], acc[2]),
+          Math.max(element.y + point[1], acc[3]),
+        ];
+      },
+      [Infinity, Infinity, -Infinity, -Infinity],
+    ),
+  );

  switch (element.type) {
    case "line":
@@ -1173,87 +1050,27 @@ const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
  ) as SVGPathString;
 };

-/**
- * Freedraw stroke geometry tuning constants.
- *
- * These factors are not derived analytically — they were tuned empirically by
- * visually comparing rendered strokes until they matched the desired feel.
- * Treat them as magic numbers backed by visual verification.
- */
-const VARIABLE_WIDTH_FREEDRAW = {
-  /** Stroke size relative to `strokeWidth` for pressure-sensitive strokes. */
-  SIZE_FACTOR: 4.25,
-  THINNING: 0.6,
-  SMOOTHING: 0.5,
-} as const;
-
-const CONSTANT_WIDTH_FREEDRAW = {
-  /** Stroke size relative to `strokeWidth` for uniform (laser) strokes. */
-  SIZE_FACTOR: 1.4,
-} as const;
-
-const getFreedrawStreamline = (element: ExcalidrawFreeDrawElement) =>
-  element.strokeOptions?.streamline ?? DEFAULT_STROKE_STREAMLINE;
-
-/**
- * Pressure-sensitive (variable width) freedraw outline, rendered with
- * perfect-freehand. This is the original Excalidraw freedraw look.
- */
-const getVariableWidthFreedrawOutline = (
+export const getFreedrawOutlinePoints = (
  element: ExcalidrawFreeDrawElement,
-): [number, number][] => {
+) => {
  // If input points are empty (should they ever be?) return a dot
  const inputPoints = element.simulatePressure
    ? element.points
    : element.points.length
-    ? element.points.map(
-        ([x, y], i) => [x, y, element.pressures[i]] as [number, number, number],
-      )
+    ? element.points.map(([x, y], i) => [x, y, element.pressures[i]])
    : [[0, 0, 0.5]];

  return getStroke(inputPoints as number[][], {
    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * VARIABLE_WIDTH_FREEDRAW.SIZE_FACTOR,
-    thinning: VARIABLE_WIDTH_FREEDRAW.THINNING,
-    smoothing: VARIABLE_WIDTH_FREEDRAW.SMOOTHING,
-    streamline: getFreedrawStreamline(element),
+    size: element.strokeWidth * 4.25,
+    thinning: 0.6,
+    smoothing: 0.5,
+    streamline: 0.5,
    easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
    last: true,
  }) as [number, number][];
 };

-const createLaserPointer = (element: ExcalidrawFreeDrawElement) =>
-  new LaserPointer({
-    size: element.strokeWidth * CONSTANT_WIDTH_FREEDRAW.SIZE_FACTOR,
-    streamline: getFreedrawStreamline(element),
-    simplify: 0,
-    sizeMapping: (details) => Math.max(0.1, details.pressure),
-  });
-
-/**
- * Uniform (constant width) freedraw outline, rendered with the laser-pointer
- * geometry. Pressure is pinned to 1 so the stroke keeps a constant width.
- */
-const getConstantWidthFreedrawOutline = (
-  element: ExcalidrawFreeDrawElement,
-): [number, number][] => {
-  const laserPointer = createLaserPointer(element);
-  element.points.map(([x, y]) => laserPointer.addPoint([x, y, 1]));
-
-  return laserPointer
-    .getStrokeOutline()
-    .map(([x, y]) => [x, y] as [number, number]);
-};
-
-export const getFreedrawOutlinePoints = (
-  element: ExcalidrawFreeDrawElement,
-): [number, number][] => {
-  // Unknown/absent variability falls back to the original variable rendering.
-  return element.strokeOptions?.variability === "constant"
-    ? getConstantWidthFreedrawOutline(element)
-    : getVariableWidthFreedrawOutline(element);
-};
-
 const med = (A: number[], B: number[]) => {
  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
 };
@@ -1,56 +1,59 @@
-import { arrayToMap } from "@excalidraw/common";
+import { arrayToMapWithIndex } from "@excalidraw/common";

 import type { ExcalidrawElement } from "./types";

-const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
-  const groupIdAtLevel = (element: ExcalidrawElement, level: number) => {
-    return element.groupIds[element.groupIds.length - level - 1];
-  };
+const normalizeGroupElementOrder = (elements: readonly ExcalidrawElement[]) => {
+  const origElements: ExcalidrawElement[] = elements.slice();
+  const sortedElements = new Set<ExcalidrawElement>();

-  const orderLevel = (
-    levelElements: readonly ExcalidrawElement[],
-    level: number,
+  const orderInnerGroups = (
+    elements: readonly ExcalidrawElement[],
  ): ExcalidrawElement[] => {
-    const buckets = new Map<string, ExcalidrawElement[]>();
-    // Slots preserve first-occurrence order: a groupId reserves its slot
-    // the first time one of its members is seen; loose elements occupy
-    // their own slot. Groups are then expanded (and recursed into) in place.
-    const slots: (ExcalidrawElement | string)[] = [];
-
-    for (const element of levelElements) {
-      const groupId = groupIdAtLevel(element, level);
-      if (groupId === undefined) {
-        slots.push(element);
-        continue;
+    const firstGroupSig = elements[0]?.groupIds?.join("");
+    const aGroup: ExcalidrawElement[] = [elements[0]];
+    const bGroup: ExcalidrawElement[] = [];
+    for (const element of elements.slice(1)) {
+      if (element.groupIds?.join("") === firstGroupSig) {
+        aGroup.push(element);
+      } else {
+        bGroup.push(element);
      }
-      let bucket = buckets.get(groupId);
-      if (!bucket) {
-        bucket = [];
-        buckets.set(groupId, bucket);
-        slots.push(groupId);
-      }
-      bucket.push(element);
    }
-
-    return slots.flatMap((slot) =>
-      typeof slot === "string"
-        ? orderLevel(buckets.get(slot)!, level + 1)
-        : [slot],
-    );
+    return bGroup.length ? [...aGroup, ...orderInnerGroups(bGroup)] : aGroup;
  };

-  // `groupIds` is stored innermost-first, so the outermost group is the
-  // last entry. We recurse from level 0 (outermost) inward.
-  const sortedElements = orderLevel(elements, 0);
+  const groupHandledElements = new Map<string, true>();
+
+  origElements.forEach((element, idx) => {
+    if (groupHandledElements.has(element.id)) {
+      return;
+    }
+    if (element.groupIds?.length) {
+      const topGroup = element.groupIds[element.groupIds.length - 1];
+      const groupElements = origElements.slice(idx).filter((element) => {
+        const ret = element?.groupIds?.some((id) => id === topGroup);
+        if (ret) {
+          groupHandledElements.set(element!.id, true);
+        }
+        return ret;
+      });
+
+      for (const elem of orderInnerGroups(groupElements)) {
+        sortedElements.add(elem);
+      }
+    } else {
+      sortedElements.add(element);
+    }
+  });

  // if there's a bug which resulted in losing some of the elements, return
  // original instead as that's better than losing data
-  if (sortedElements.length !== elements.length) {
-    console.error("defragmentGroups: lost some elements... bailing!");
+  if (sortedElements.size !== elements.length) {
+    console.error("normalizeGroupElementOrder: lost some elements... bailing!");
    return elements;
  }

-  return sortedElements;
+  return [...sortedElements];
 };

 /**
@@ -65,40 +68,39 @@ const defragmentGroups = (elements: readonly ExcalidrawElement[]) => {
 const normalizeBoundElementsOrder = (
  elements: readonly ExcalidrawElement[],
 ) => {
-  const elementsMap = arrayToMap(elements);
+  const elementsMap = arrayToMapWithIndex(elements);

+  const origElements: (ExcalidrawElement | null)[] = elements.slice();
  const sortedElements = new Set<ExcalidrawElement>();

-  for (const element of elements) {
-    if (sortedElements.has(element)) {
-      continue;
+  origElements.forEach((element, idx) => {
+    if (!element) {
+      return;
    }
-
    if (element.boundElements?.length) {
      sortedElements.add(element);
-      for (const boundElement of element.boundElements) {
+      origElements[idx] = null;
+      element.boundElements.forEach((boundElement) => {
        const child = elementsMap.get(boundElement.id);
        if (child && boundElement.type === "text") {
-          sortedElements.add(child);
+          sortedElements.add(child[0]);
+          origElements[child[1]] = null;
        }
+      });
+    } else if (element.type === "text" && element.containerId) {
+      const parent = elementsMap.get(element.containerId);
+      if (!parent?.[0].boundElements?.find((x) => x.id === element.id)) {
+        sortedElements.add(element);
+        origElements[idx] = null;
+
+        // if element has a container and container lists it, skip this element
+        // as it'll be taken care of by the container
      }
-      continue;
+    } else {
+      sortedElements.add(element);
+      origElements[idx] = null;
    }
-
-    // if element has a container and container lists it, skip this element
-    // as it'll be taken care of by the container
-    if (
-      element.type === "text" &&
-      element.containerId &&
-      elementsMap
-        .get(element.containerId)
-        ?.boundElements?.some((el) => el.id === element.id)
-    ) {
-      continue;
-    }
-
-    sortedElements.add(element);
-  }
+  });

  // if there's a bug which resulted in losing some of the elements, return
  // original instead as that's better than losing data
@@ -115,5 +117,5 @@ const normalizeBoundElementsOrder = (
 export const normalizeElementOrder = (
  elements: readonly ExcalidrawElement[],
 ) => {
-  return normalizeBoundElementsOrder(defragmentGroups(elements));
+  return normalizeBoundElementsOrder(normalizeGroupElementOrder(elements));
 };
@@ -347,7 +347,6 @@ export const getContainerCenter = (
    midSegmentMidpoint = LinearElementEditor.getSegmentMidPoint(
      container,
      index + 1,
-      elementsMap,
    );
  }
  return { x: midSegmentMidpoint[0], y: midSegmentMidpoint[1] };
@@ -442,8 +441,7 @@ const VALID_CONTAINER_TYPES = new Set([

 export const isValidTextContainer = (element: {
  type: ExcalidrawElementType;
-}): element is ExcalidrawTextContainer =>
-  VALID_CONTAINER_TYPES.has(element.type);
+}) => VALID_CONTAINER_TYPES.has(element.type);

 export const computeContainerDimensionForBoundText = (
  dimension: number,
@@ -4,22 +4,6 @@ import { charWidth, getLineWidth } from "./textMeasurements";

 import type { FontString } from "./types";

-/**
- * This module approximates browser-like soft wrapping for Excalidraw text.
- *
- * The flow is:
- * 1. `parseTokens()` splits a hard line into breakable tokens using a unicode-aware regex.
- * 2. `getWrappedTextLines()` reflows each hard line into one or more visual lines and
- *    records where each visual line came from in the source text.
- * 3. `wrapLine()` assembles tokens into lines, and `wrapWord()` handles a single token
- *    that is wider than the available width.
- * 4. `trimLine()` / `trimLineEndAtSoftBreak()` mirror browser behavior around trailing
- *    whitespace so the rendered text stays consistent with what users see on canvas.
- *
- * Mostly, you'll want to use wrapText(). getWrappedTextLines() is for callers
- * that need metadata such as mapping visual lines back to `originalText`
- * for caret placement or future editor features.
- */
 let cachedCjkRegex: RegExp | undefined;
 let cachedLineBreakRegex: RegExp | undefined;
 let cachedEmojiRegex: RegExp | undefined;
@@ -374,10 +358,6 @@ const Break = {

 /**
 * Breaks the line into the tokens based on the found line break opporutnities.
- *
- * Note: tokenization normalizes to NFC first so decomposed graphemes are treated as
- * their composed variants for wrapping. Any code that needs exact source offsets should
- * keep in mind that this assumes the input text is already NFC-normalized.
 */
 export const parseTokens = (line: string) => {
  const breakLineRegex = getLineBreakRegex();
@@ -390,120 +370,56 @@ export const parseTokens = (line: string) => {

 /**
 * Wraps the original text into the lines based on the given width.
- *
- * This is a convenience adapter over `getWrappedTextLines()` for call sites
- * that only need the rendered wrapped string and not the source offsets.
 */
 export const wrapText = (
  text: string,
  font: FontString,
  maxWidth: number,
 ): string => {
-  return getWrappedTextLines(text, font, maxWidth)
-    .map((line) => line.text)
-    .join("\n");
-};
-
-/**
- * A single rendered visual line produced from the original text.
- *
- * `start` and `end` are end-exclusive code-unit offsets into the original text, and do
- * not include synthetic soft line breaks inserted by this module. If trailing whitespace
- * was trimmed away at a wrap boundary, `end` points to the last rendered character.
- */
-export type WrappedTextLine = {
-  text: string;
-  start: number;
-  end: number;
-};
-
-/**
- * Splits only on existing hard line breaks and preserves original offsets.
- */
-const getHardLineBreaks = (text: string): WrappedTextLine[] => {
-  let offset = 0;
-
-  return text.split("\n").map((line) => {
-    const start = offset;
-    const end = start + line.length;
-
-    offset = end + 1;
-
-    return {
-      text: line,
-      start,
-      end,
-    };
-  });
-};
-
-/**
- * Returns the rendered visual lines together with their source offsets.
- *
- * This is the source-of-truth wrapping pipeline for callers that need more than the
- * final wrapped string, for example caret placement or future editor/rich-text mapping.
- */
-export const getWrappedTextLines = (
-  text: string,
-  font: FontString,
-  maxWidth: number,
-): WrappedTextLine[] => {
  // if maxWidth is not finite or NaN which can happen in case of bugs in
  // computation, we need to make sure we don't continue as we'll end up
  // in an infinite loop
  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return getHardLineBreaks(text);
+    return text;
  }

-  const lines: WrappedTextLine[] = [];
-  let offset = 0;
+  const lines: Array<string> = [];
+  const originalLines = text.split("\n");

-  for (const originalLine of text.split("\n")) {
-    const originalLineWidth = getLineWidth(originalLine, font);
+  for (const originalLine of originalLines) {
+    const currentLineWidth = getLineWidth(originalLine, font);

-    if (originalLineWidth <= maxWidth) {
-      lines.push({
-        text: originalLine,
-        start: offset,
-        end: offset + originalLine.length,
-      });
-    } else {
-      lines.push(...wrapLine(originalLine, font, maxWidth, offset));
+    if (currentLineWidth <= maxWidth) {
+      lines.push(originalLine);
+      continue;
    }

-    offset += originalLine.length + 1;
+    const wrappedLine = wrapLine(originalLine, font, maxWidth);
+    lines.push(...wrappedLine);
  }

-  return lines;
+  return lines.join("\n");
 };

 /**
- * Wraps a single hard line into one or more visual lines.
- *
- * The line-local offsets are tracked in original-text code units so
- * we can map the visual line back to the source.
+ * Wraps the original line into the lines based on the given width.
 */
 const wrapLine = (
  line: string,
  font: FontString,
  maxWidth: number,
-  lineStart: number,
-): WrappedTextLine[] => {
-  const lines: WrappedTextLine[] = [];
+): string[] => {
+  const lines: Array<string> = [];
  const tokens = parseTokens(line);
+  const tokenIterator = tokens[Symbol.iterator]();

  let currentLine = "";
-  let currentLineStart = lineStart;
-  let currentLineEnd = lineStart;
  let currentLineWidth = 0;
-  // Tracks the next token's code-unit position in the original source string.
-  let tokenOffset = lineStart;
-  let tokenIndex = 0;

-  while (tokenIndex < tokens.length) {
-    const token = tokens[tokenIndex];
-    const tokenStart = tokenOffset;
-    const tokenEnd = tokenStart + token.length;
+  let iterator = tokenIterator.next();
+
+  while (!iterator.done) {
+    const token = iterator.value;
    const testLine = currentLine + token;

    // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
@@ -513,59 +429,37 @@ const wrapLine = (

    // build up the current line, skipping length check for possibly trailing whitespaces
    if (/\s/.test(token) || testLineWidth <= maxWidth) {
-      if (!currentLine) {
-        currentLineStart = tokenStart;
-      }
      currentLine = testLine;
-      currentLineEnd = tokenEnd;
      currentLineWidth = testLineWidth;
-      tokenOffset = tokenEnd;
-      tokenIndex++;
+      iterator = tokenIterator.next();
      continue;
    }

    // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
    if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth, tokenStart);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? {
-        text: "",
-        start: tokenStart,
-        end: tokenStart,
-      };
+      const wrappedWord = wrapWord(token, font, maxWidth);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
      const precedingLines = wrappedWord.slice(0, -1);

      lines.push(...precedingLines);

      // trailing line of the wrapped word might still be joined with next token/s
-      currentLine = trailingLine.text;
-      currentLineStart = trailingLine.start;
-      currentLineEnd = trailingLine.end;
-      currentLineWidth = getLineWidth(trailingLine.text, font);
-      tokenOffset = tokenEnd;
-      tokenIndex++;
+      currentLine = trailingLine;
+      currentLineWidth = getLineWidth(trailingLine, font);
+      iterator = tokenIterator.next();
    } else {
      // push & reset, but don't iterate on the next token, as we didn't use it yet!
-      lines.push(
-        trimLineEndAtSoftBreak(currentLine, currentLineStart, currentLineEnd),
-      );
+      lines.push(currentLine.trimEnd());

      // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
      currentLine = "";
-      currentLineStart = tokenStart;
-      currentLineEnd = tokenStart;
      currentLineWidth = 0;
    }
  }

  // iterator done, push the trailing line if exists
  if (currentLine) {
-    const trailingLine = trimLine(
-      currentLine,
-      currentLineStart,
-      currentLineEnd,
-      font,
-      maxWidth,
-    );
+    const trailingLine = trimLine(currentLine, font, maxWidth);
    lines.push(trailingLine);
  }

@@ -573,100 +467,59 @@ const wrapLine = (
 };

 /**
- * Wraps a single word that could not be placed on an empty line as-is.
+ * Wraps the word into the lines based on the given width.
 */
 const wrapWord = (
  word: string,
  font: FontString,
  maxWidth: number,
-  wordStart: number,
-): WrappedTextLine[] => {
+): Array<string> => {
  // multi-codepoint emojis are already broken apart and shouldn't be broken further
  if (getEmojiRegex().test(word)) {
-    return [
-      {
-        text: word,
-        start: wordStart,
-        end: wordStart + word.length,
-      },
-    ];
+    return [word];
  }

  satisfiesWordInvariant(word);

-  const lines: WrappedTextLine[] = [];
+  const lines: Array<string> = [];
  const chars = Array.from(word);

  let currentLine = "";
-  let currentLineStart = wordStart;
-  let currentLineEnd = wordStart;
  let currentLineWidth = 0;
-  let offset = wordStart;

  for (const char of chars) {
-    const charStart = offset;
-    const charEnd = charStart + char.length;
    const _charWidth = charWidth.calculate(char, font);
    const testLineWidth = currentLineWidth + _charWidth;

    if (testLineWidth <= maxWidth) {
-      if (!currentLine) {
-        currentLineStart = charStart;
-      }
      currentLine = currentLine + char;
-      currentLineEnd = charEnd;
      currentLineWidth = testLineWidth;
-      offset = charEnd;
      continue;
    }

    if (currentLine) {
-      lines.push({
-        text: currentLine,
-        start: currentLineStart,
-        end: currentLineEnd,
-      });
+      lines.push(currentLine);
    }

    currentLine = char;
-    currentLineStart = charStart;
-    currentLineEnd = charEnd;
    currentLineWidth = _charWidth;
-    offset = charEnd;
  }

  if (currentLine) {
-    lines.push({
-      text: currentLine,
-      start: currentLineStart,
-      end: currentLineEnd,
-    });
+    lines.push(currentLine);
  }

  return lines;
 };

 /**
- * Trims trailing whitespace that is exceeding the `maxWidth`.
- *
- * Used for the trailing visual line of a hard line, where some trailing
- * whitespace may still be visible if it fits into the available width.
+ * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`.
 */
-const trimLine = (
-  line: string,
-  start: number,
-  end: number,
-  font: FontString,
-  maxWidth: number,
-): WrappedTextLine => {
+const trimLine = (line: string, font: FontString, maxWidth: number) => {
  const shouldTrimWhitespaces = getLineWidth(line, font) > maxWidth;

  if (!shouldTrimWhitespaces) {
-    return {
-      text: line,
-      start,
-      end,
-    };
+    return line;
  }

  // defensively default to `trimeEnd` in case the regex does not match
@@ -690,30 +543,7 @@ const trimLine = (
    trimmedLineWidth = testLineWidth;
  }

-  return {
-    text: trimmedLine,
-    start,
-    end: end - (line.length - trimmedLine.length),
-  };
-};
-
-/**
- * Used for internal soft-wrap boundaries, where trailing whitespace should not
- * survive into the rendered line even though it still exists in the original
- * text.
- */
-const trimLineEndAtSoftBreak = (
-  line: string,
-  start: number,
-  end: number,
-): WrappedTextLine => {
-  const trimmedLine = line.trimEnd();
-
-  return {
-    text: trimmedLine,
-    start,
-    end: end - (line.length - trimmedLine.length),
-  };
+  return trimmedLine;
 };

 /**
@@ -392,23 +392,3 @@ export const canBecomePolygon = (
    (points.length === 3 && !pointsEqual(points[0], points[points.length - 1]))
  );
 };
-
-export const isEligibleFrameChildType = (type: ElementOrToolType) => {
-  switch (type) {
-    case "rectangle":
-    case "diamond":
-    case "ellipse":
-    case "arrow":
-    case "line":
-    case "freedraw":
-    case "text":
-    case "image":
-    case "frame":
-    case "embeddable": {
-      return true;
-    }
-    default: {
-      return false;
-    }
-  }
-};
@@ -303,32 +303,19 @@ export type PointsPositionUpdates = Map<
  { point: LocalPoint; isDragging?: boolean }
 >;

-export type CardinalityArrowhead =
-  | "cardinality_one"
-  | "cardinality_many"
-  | "cardinality_one_or_many"
-  | "cardinality_exactly_one"
-  | "cardinality_zero_or_one"
-  | "cardinality_zero_or_many";
-
-export type ArrowheadLegacy =
-  | "dot"
-  | "crowfoot_one"
-  | "crowfoot_many"
-  | "crowfoot_one_or_many";
-
 export type Arrowhead =
  | "arrow"
  | "bar"
+  | "dot" // legacy. Do not use for new elements.
  | "circle"
  | "circle_outline"
  | "triangle"
  | "triangle_outline"
  | "diamond"
  | "diamond_outline"
-  | CardinalityArrowhead;
-
-export type AnyArrowhead = Arrowhead | ArrowheadLegacy;
+  | "crowfoot_one"
+  | "crowfoot_many"
+  | "crowfoot_one_or_many";

 export type ExcalidrawLinearElement = _ExcalidrawElementBase &
  Readonly<{
@@ -384,20 +371,12 @@ export type ExcalidrawElbowArrowElement = Merge<
  }
 >;

-export type StrokeVariability = "variable" | "constant";
-
-export type StrokeOptions = Readonly<{
-  variability: StrokeVariability;
-  streamline: number;
-}>;
-
 export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
  Readonly<{
    type: "freedraw";
    points: readonly LocalPoint[];
    pressures: readonly number[];
    simulatePressure: boolean;
-    strokeOptions: StrokeOptions;
  }>;

 export type FileId = string & { _brand: "FileId" };
@@ -124,7 +124,6 @@ const setElementShapesCacheEntry = <T extends ExcalidrawElement>(
 */
 export function deconstructLinearOrFreeDrawElement(
  element: ExcalidrawLinearElement | ExcalidrawFreeDrawElement,
-  elementsMap: ElementsMap,
 ): [LineSegment<GlobalPoint>[], Curve<GlobalPoint>[]] {
  const cachedShape = getElementShapesCacheEntry(element, 0);

@@ -132,7 +131,10 @@ export function deconstructLinearOrFreeDrawElement(
    return cachedShape;
  }

-  const ops = generateLinearCollisionShape(element, elementsMap);
+  const ops = generateLinearCollisionShape(element) as {
+    op: string;
+    data: number[];
+  }[];
  const lines = [];
  const curves = [];

@@ -5,7 +5,6 @@ import {
  pointFrom,
  type GlobalPoint,
  type LocalPoint,
-  type LineSegment,
 } from "@excalidraw/math";
 import { type Bounds, isBounds } from "@excalidraw/common";
 import {
@@ -18,6 +17,7 @@ import {

 import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 import type { Curve } from "@excalidraw/math";
+import type { LineSegment } from "@excalidraw/utils";

 // The global data holder to collect the debug operations
 declare global {
@@ -1,7 +1,5 @@
 import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";

-import { isFiniteNumber } from "@excalidraw/math";
-
 import type { AppState } from "@excalidraw/excalidraw/types";
 import type { GlobalPoint } from "@excalidraw/math";

@@ -315,46 +313,12 @@ const getTargetElementsMap = <T extends ExcalidrawElement>(
  }, new Map<string, ExcalidrawElement>());
 };

-const hasSameElementIds = (
-  prevElements: readonly ExcalidrawElement[],
-  nextElements: readonly ExcalidrawElement[],
-) => {
-  if (prevElements.length !== nextElements.length) {
-    console.error(
-      "z-index reordering failed: resulting array have different lengths",
-    );
-    return false;
-  }
-
-  const prevElementIdCounts = new Map<ExcalidrawElement["id"], number>();
-  for (const element of prevElements) {
-    prevElementIdCounts.set(
-      element.id,
-      (prevElementIdCounts.get(element.id) || 0) + 1,
-    );
-  }
-
-  for (const element of nextElements) {
-    const count = prevElementIdCounts.get(element.id);
-    if (!count) {
-      console.error(
-        "z-index reordering failed: element id mismatch / duplicate ids",
-      );
-      return false;
-    }
-    prevElementIdCounts.set(element.id, count - 1);
-  }
-
-  return true;
-};
-
 const shiftElementsByOne = (
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  direction: "left" | "right",
  scene: Scene,
 ) => {
-  const originalElements = elements;
  const indicesToMove = getIndicesToMove(elements, appState);
  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);

@@ -425,10 +389,6 @@ const shiftElementsByOne = (
          ];
  });

-  if (!hasSameElementIds(originalElements, elements)) {
-    return originalElements;
-  }
-
  syncMovedIndices(elements, targetElementsMap);

  return elements;
@@ -442,20 +402,11 @@ const shiftElementsToEnd = (
  elementsToBeMoved?: readonly ExcalidrawElement[],
 ) => {
  const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
-
-  // Nothing to move (e.g. `elementsToBeMoved` is empty because all selected
-  // elements were frame children handled in a prior pass). Bail out early —
-  // otherwise `leadingIndex`/`trailingIndex` below resolve to `undefined` and
-  // the resulting `slice()` calls overlap, duplicating elements.
-  if (indicesToMove.length === 0) {
-    return elements;
-  }
-
  const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
  const displacedElements: ExcalidrawElement[] = [];

-  let leadingIndex: number | undefined;
-  let trailingIndex: number | undefined;
+  let leadingIndex: number;
+  let trailingIndex: number;
  if (direction === "left") {
    if (containingFrame) {
      leadingIndex = findIndex(elements, (el) =>
@@ -500,19 +451,6 @@ const shiftElementsToEnd = (
    leadingIndex = 0;
  }

-  const isValidIndex = (index: number | undefined): index is number => {
-    return isFiniteNumber(index) && index >= 0;
-  };
-
-  if (
-    !isValidIndex(leadingIndex) ||
-    !isValidIndex(trailingIndex) ||
-    leadingIndex > trailingIndex ||
-    indicesToMove.some((index) => index < leadingIndex || index > trailingIndex)
-  ) {
-    return elements;
-  }
-
  for (let index = leadingIndex; index < trailingIndex + 1; index++) {
    if (!indicesToMove.includes(index)) {
      displacedElements.push(elements[index]);
@@ -537,10 +475,6 @@ const shiftElementsToEnd = (
          ...trailingElements,
        ];

-  if (!hasSameElementIds(elements, nextElements)) {
-    return elements;
-  }
-
  syncMovedIndices(nextElements, targetElementsMap);

  return nextElements;
@@ -609,7 +543,7 @@ function shiftElementsAccountingForFrames(

  for (const [frameId, children] of frameChildrenSets) {
    nextElements = shiftFunction(
-      nextElements,
+      allElements,
      appState,
      direction,
      frameId,
@@ -178,64 +178,6 @@ describe("binding for simple arrows", () => {
    });
  });

-  describe("self-binding (both ends to the same element) single-click finalize", () => {
-    // rect spans x:200..400, y:200..400; orbit ring is ~15px outside the outline
-    const INSIDE: [number, number] = [250, 250];
-    const ORBIT_LEFT: [number, number] = [187, 300];
-    const ORBIT_RIGHT: [number, number] = [413, 300];
-    const MIDDLE: [number, number] = [550, 100];
-
-    beforeEach(async () => {
-      mouse.reset();
-      await act(() => setLanguage(defaultLang));
-      await render(<Excalidraw handleKeyboardGlobally={true} />);
-      UI.createElement("rectangle", {
-        x: 200,
-        y: 200,
-        width: 200,
-        height: 200,
-      });
-    });
-
-    const drawSelfArrow = (start: [number, number], end: [number, number]) => {
-      UI.clickTool("arrow");
-      mouse.reset();
-      mouse.clickAt(...start);
-      mouse.moveTo(...MIDDLE);
-      mouse.clickAt(...MIDDLE); // commit a middle point so it's a multi-point arrow
-      mouse.moveTo(...end);
-      mouse.clickAt(...end); // single click at the end
-    };
-
-    it("orbit -> orbit finalizes on a single click", () => {
-      drawSelfArrow(ORBIT_LEFT, ORBIT_RIGHT);
-
-      const arrow = h.elements[h.elements.length - 1] as ExcalidrawArrowElement;
-      expect(h.state.multiElement).toBe(null);
-      expect(h.state.activeTool.type).toBe("selection");
-      expect(arrow.startBinding?.elementId).toBe(arrow.endBinding?.elementId);
-      expect(arrow.endBinding?.elementId).not.toBe(undefined);
-    });
-
-    it("inside -> orbit finalizes on a single click", () => {
-      drawSelfArrow(INSIDE, ORBIT_RIGHT);
-
-      const arrow = h.elements[h.elements.length - 1] as ExcalidrawArrowElement;
-      expect(h.state.multiElement).toBe(null);
-      expect(h.state.activeTool.type).toBe("selection");
-      expect(arrow.startBinding?.elementId).toBe(arrow.endBinding?.elementId);
-      expect(arrow.endBinding?.elementId).not.toBe(undefined);
-    });
-
-    it("inside -> inside keep in multi-point mode (no single-click finalize)", () => {
-      drawSelfArrow(INSIDE, [INSIDE[0] + 50, INSIDE[1] + 50]); // end dropped inside the rect
-
-      // ambiguous → must be confirmed with a second click, so still in progress
-      expect(h.state.multiElement).not.toBe(null);
-      expect(h.state.activeTool.type).toBe("arrow");
-    });
-  });
-
  describe("when arrow is outside of shape", () => {
    beforeEach(async () => {
      mouse.reset();
@@ -461,7 +403,6 @@ describe("binding for simple arrows", () => {
      mouse.moveTo(340, 251);
      mouse.moveTo(410, 251);
      mouse.clickAt(410, 251);
-      mouse.clickAt(410, 251);
      const arrow = h.elements[h.elements.length - 1] as any;

      expect(arrow.startBinding?.elementId).toBe(rectLeft.id);
@@ -506,7 +447,6 @@ describe("binding for simple arrows", () => {
      mouse.moveTo(350, 251);
      mouse.moveTo(410, 251);
      mouse.clickAt(410, 251);
-      mouse.clickAt(410, 251);

      const arrow = API.getSelectedElement() as ExcalidrawArrowElement;

@@ -1,14 +1,10 @@
 import { pointFrom } from "@excalidraw/math";
-import { arrayToMap, type Bounds, ROUNDNESS } from "@excalidraw/common";
-import { API } from "@excalidraw/excalidraw/tests/helpers/api";
+
+import { arrayToMap, ROUNDNESS } from "@excalidraw/common";

 import type { LocalPoint } from "@excalidraw/math";

-import {
-  elementsOverlappingBBox,
-  getElementAbsoluteCoords,
-  getElementBounds,
-} from "../src/bounds";
+import { getElementAbsoluteCoords, getElementBounds } from "../src/bounds";

 import type { ExcalidrawElement, ExcalidrawLinearElement } from "../src/types";

@@ -145,65 +141,3 @@ describe("getElementBounds", () => {
    expect(y2).toEqual(319.8162855827246);
  });
 });
-
-const makeElement = (x: number, y: number, width: number, height: number) =>
-  API.createElement({
-    type: "rectangle",
-    x,
-    y,
-    width,
-    height,
-  });
-
-const makeBBox = (
-  minX: number,
-  minY: number,
-  maxX: number,
-  maxY: number,
-): Bounds => [minX, minY, maxX, maxY];
-
-describe("elementsOverlappingBBox()", () => {
-  it("should return elements that overlap bbox", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    const rectOutside = makeElement(110, 110, 100, 100);
-    const rectInside = makeElement(10, 10, 85, 85);
-    const rectContainingBBox = makeElement(-10, -10, 110, 110);
-    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
-
-    expect(
-      elementsOverlappingBBox({
-        bounds: bbox,
-        type: "overlap",
-        elements: [
-          rectOutside,
-          rectInside,
-          rectContainingBBox,
-          rectOverlappingTopLeft,
-        ],
-      }),
-    ).toEqual([rectInside, rectOverlappingTopLeft]);
-  });
-
-  it("should return elements inside/containing bbox", () => {
-    const bbox = makeBBox(0, 0, 100, 100);
-
-    const rectOutside = makeElement(110, 110, 100, 100);
-    const rectInside = makeElement(10, 10, 85, 85);
-    const rectContainingBBox = makeElement(-10, -10, 110, 110);
-    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
-
-    expect(
-      elementsOverlappingBBox({
-        bounds: bbox,
-        type: "contain",
-        elements: [
-          rectOutside,
-          rectInside,
-          rectContainingBBox,
-          rectOverlappingTopLeft,
-        ],
-      }),
-    ).toEqual([rectInside]);
-  });
-});
@@ -1,4 +1,4 @@
-import { arrayToMap, reseed } from "@excalidraw/common";
+import { arrayToMap } from "@excalidraw/common";
 import { type GlobalPoint, type LocalPoint, pointFrom } from "@excalidraw/math";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
@@ -12,7 +12,6 @@ import { hitElementItself } from "../src/collision";
 describe("check rotated elements can be hit:", () => {
  beforeEach(async () => {
    localStorage.clear();
-    reseed(7);
    await render(<Excalidraw handleKeyboardGlobally={true} />);
  });

@@ -57,7 +56,6 @@ describe("hitElementItself cache", () => {
    });

    localStorage.clear();
-    reseed(7);
    await render(<Excalidraw handleKeyboardGlobally={true} />);
  });

@@ -1,8 +1,9 @@
 /* eslint-disable no-lone-blocks */
+import { generateKeyBetween } from "fractional-indexing";
+
 import { arrayToMap } from "@excalidraw/common";

 import {
-  InvalidFractionalIndexError,
  syncInvalidIndices,
  syncMovedIndices,
  validateFractionalIndices,
@@ -12,34 +13,13 @@ import { deepCopyElement } from "@excalidraw/element";

 import { API } from "@excalidraw/excalidraw/tests/helpers/api";

-import {
-  generateKeyBetween,
-  validateOrderKey,
-} from "@excalidraw/fractional-indexing";
-
 import type {
  ElementsMap,
  ExcalidrawElement,
  FractionalIndex,
 } from "@excalidraw/element/types";

-describe("fractional index format validation", () => {
-  it("should reject malformed base62 order keys", () => {
-    expect(() => validateOrderKey("a!")).toThrow();
-    expect(() => validateOrderKey("a_")).toThrow();
-    expect(() => validateOrderKey("a1!")).toThrow();
-    expect(() => validateOrderKey("a1_")).toThrow();
-    expect(() => validateOrderKey("zd0032")).toThrow();
-  });
-
-  it("should accept valid base62 order keys", () => {
-    expect(() => validateOrderKey("Zz")).not.toThrow();
-    expect(() => validateOrderKey("a0")).not.toThrow();
-    expect(() => validateOrderKey("a1")).not.toThrow();
-    expect(() => validateOrderKey("a1V")).not.toThrow();
-    expect(() => validateOrderKey("z".padEnd(28, "z"))).not.toThrow();
-  });
-});
+import { InvalidFractionalIndexError } from "../src/fractionalIndex";

 describe("sync invalid indices with array order", () => {
  describe("should NOT sync empty array", () => {
@@ -124,46 +104,6 @@ describe("sync invalid indices with array order", () => {
    });
  });

-  describe("should sync when fractional index is malformed", () => {
-    // "zd0032" has head "z" which requires length 28 per getIntegerLength,
-    // but the string is far too short, so validateOrderKey throws for it
-    testInvalidIndicesSync({
-      elements: [{ id: "A", index: "zd0032" }],
-      expect: {
-        unchangedElements: [],
-      },
-    });
-
-    testInvalidIndicesSync({
-      elements: [
-        { id: "A", index: "a1" },
-        { id: "B", index: "zd0032" },
-        { id: "C", index: "a3" },
-      ],
-      expect: {
-        unchangedElements: ["A", "C"],
-      },
-    });
-
-    testInvalidIndicesSync({
-      elements: [{ id: "A", index: "a!" }],
-      expect: {
-        unchangedElements: [],
-      },
-    });
-
-    testInvalidIndicesSync({
-      elements: [
-        { id: "A", index: "a1" },
-        { id: "B", index: "a!" },
-        { id: "C", index: "a2" },
-      ],
-      expect: {
-        unchangedElements: ["A", "C"],
-      },
-    });
-  });
-
  describe("should sync when fractional indices are duplicated", () => {
    testInvalidIndicesSync({
      elements: [
@@ -2,24 +2,15 @@ import {
  convertToExcalidrawElements,
  Excalidraw,
 } from "@excalidraw/excalidraw";
-import { arrayToMap } from "@excalidraw/common";

 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
-import { Keyboard, Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
-import { getTextEditor } from "@excalidraw/excalidraw/tests/queries/dom";
+import { Keyboard, Pointer } from "@excalidraw/excalidraw/tests/helpers/ui";
 import {
  getCloneByOrigId,
  render,
 } from "@excalidraw/excalidraw/tests/test-utils";

-import { getSelectedElements } from "@excalidraw/excalidraw/scene";
-
-import { elementOverlapsWithFrame } from "../src/frame";
-
-import type {
-  ExcalidrawElement,
-  ExcalidrawFrameLikeElement,
-} from "../src/types";
+import type { ExcalidrawElement } from "../src/types";

 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -134,250 +125,6 @@ describe("adding elements to frames", () => {
    });
  });

-  it("should treat an element fully containing a frame as overlapping the frame", () => {
-    const containingRect = API.createElement({
-      type: "rectangle",
-      x: -50,
-      y: -50,
-      width: 250,
-      height: 250,
-    });
-
-    API.setElements([containingRect, frame]);
-
-    expect(
-      elementOverlapsWithFrame(
-        containingRect,
-        frame as ExcalidrawFrameLikeElement,
-        arrayToMap(h.elements),
-      ),
-    ).toBe(true);
-  });
-
-  it("should not add a newly created element to a frame behind a non-frame element", () => {
-    const cover = API.createElement({
-      id: "cover",
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 80,
-      height: 80,
-      backgroundColor: "#ffc9c9",
-    });
-
-    API.setElements([frame, cover]);
-
-    UI.clickTool("rectangle");
-    mouse.downAt(20, 20);
-    mouse.moveTo(40, 40);
-    mouse.upAt(40, 40);
-
-    const createdElement = h.elements.find(
-      (element) => element.id !== frame.id && element.id !== cover.id,
-    );
-
-    expect(createdElement?.frameId).toBe(null);
-    expect(h.elements.map((element) => element.id)).toEqual([
-      frame.id,
-      cover.id,
-      createdElement?.id,
-    ]);
-  });
-
-  it("should add a newly created element to a frame over a non-frame element", () => {
-    const cover = API.createElement({
-      id: "cover",
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 80,
-      height: 80,
-      backgroundColor: "#ffc9c9",
-    });
-
-    API.setElements([cover, frame]);
-
-    UI.clickTool("rectangle");
-    mouse.downAt(20, 20);
-    mouse.moveTo(40, 40);
-    mouse.upAt(40, 40);
-
-    const createdElement = h.elements.find(
-      (element) => element.id !== frame.id && element.id !== cover.id,
-    );
-
-    expect(createdElement?.frameId).toBe(frame.id);
-  });
-
-  it("should highlight the target frame while creating a new element", () => {
-    API.setElements([frame]);
-
-    UI.clickTool("rectangle");
-    mouse.downAt(20, 20);
-    mouse.moveTo(40, 40);
-
-    expect(h.state.frameToHighlight?.id).toBe(frame.id);
-
-    mouse.upAt(40, 40);
-
-    expect(h.state.frameToHighlight).toBe(null);
-  });
-
-  it("should highlight the target frame while hovering with a creation tool", () => {
-    API.setElements([frame]);
-
-    UI.clickTool("rectangle");
-    mouse.moveTo(20, 20);
-
-    expect(h.state.frameToHighlight?.id).toBe(frame.id);
-
-    mouse.moveTo(200, 200);
-
-    expect(h.state.frameToHighlight).toBe(null);
-  });
-
-  it("should not add grid-snapped text outside the frame to the clicked frame", async () => {
-    const offsetFrame = API.createElement({
-      id: "offsetFrame",
-      type: "frame",
-      x: 10,
-      y: 0,
-      width: 150,
-      height: 150,
-    });
-
-    API.setElements([offsetFrame]);
-    API.setAppState({
-      gridModeEnabled: true,
-    });
-
-    UI.clickTool("text");
-    mouse.clickAt(12, 0);
-
-    await getTextEditor();
-
-    const createdText = h.elements.find(
-      (element) => element.id !== offsetFrame.id,
-    );
-
-    expect(createdText?.x).toBe(0);
-    expect(createdText?.y).toBe(0);
-    expect(createdText?.frameId).toBe(null);
-  });
-
-  it("should add a newly created element to a frame behind another frame", () => {
-    const lockedFrame = API.createElement({
-      id: "lockedFrame",
-      type: "frame",
-      x: 10,
-      y: 10,
-      width: 80,
-      height: 80,
-      locked: true,
-    });
-
-    API.setElements([frame, lockedFrame]);
-
-    UI.clickTool("rectangle");
-    mouse.downAt(20, 20);
-    mouse.moveTo(40, 40);
-    mouse.upAt(40, 40);
-
-    const createdElement = h.elements.find(
-      (element) => element.id !== frame.id && element.id !== lockedFrame.id,
-    );
-
-    expect(createdElement?.frameId).toBe(frame.id);
-  });
-
-  it("should insert a newly created frame child just below its frame", () => {
-    const frameChildUnderCursor = API.createElement({
-      id: "frameChildUnderCursor",
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 80,
-      height: 80,
-      backgroundColor: "#ffc9c9",
-      frameId: frame.id,
-    });
-    const otherFrameChild = API.createElement({
-      id: "otherFrameChild",
-      type: "rectangle",
-      x: 100,
-      y: 20,
-      width: 20,
-      height: 20,
-      frameId: frame.id,
-    });
-
-    API.setElements([frameChildUnderCursor, otherFrameChild, frame]);
-
-    UI.clickTool("rectangle");
-    mouse.downAt(20, 20);
-    mouse.moveTo(40, 40);
-    mouse.upAt(40, 40);
-
-    const createdElement = h.elements.find(
-      (element) =>
-        element.id !== frame.id &&
-        element.id !== frameChildUnderCursor.id &&
-        element.id !== otherFrameChild.id,
-    );
-
-    expect(createdElement?.frameId).toBe(frame.id);
-    expect(h.elements.map((element) => element.id)).toEqual([
-      frameChildUnderCursor.id,
-      otherFrameChild.id,
-      createdElement?.id,
-      frame.id,
-    ]);
-  });
-
-  it("should insert a newly created frame child above the highest frame child", () => {
-    const frameChildUnderCursor = API.createElement({
-      id: "frameChildUnderCursor",
-      type: "rectangle",
-      x: 10,
-      y: 10,
-      width: 80,
-      height: 80,
-      backgroundColor: "#ffc9c9",
-      frameId: frame.id,
-    });
-    const otherFrameChild = API.createElement({
-      id: "otherFrameChild",
-      type: "rectangle",
-      x: 100,
-      y: 20,
-      width: 20,
-      height: 20,
-      frameId: frame.id,
-    });
-
-    API.setElements([frame, frameChildUnderCursor, otherFrameChild]);
-
-    UI.clickTool("rectangle");
-    mouse.downAt(20, 20);
-    mouse.moveTo(40, 40);
-    mouse.upAt(40, 40);
-
-    const createdElement = h.elements.find(
-      (element) =>
-        element.id !== frame.id &&
-        element.id !== frameChildUnderCursor.id &&
-        element.id !== otherFrameChild.id,
-    );
-
-    expect(createdElement?.frameId).toBe(frame.id);
-    expect(h.elements.map((element) => element.id)).toEqual([
-      frame.id,
-      frameChildUnderCursor.id,
-      otherFrameChild.id,
-      createdElement?.id,
-    ]);
-  });
-
  const commonTestCases = async (
    func: typeof resizeFrameOverElement | typeof dragElementIntoFrame,
  ) => {
@@ -668,373 +415,6 @@ describe("adding elements to frames", () => {
  describe("dragging elements into the frame", async () => {
    await commonTestCases(dragElementIntoFrame);

-    it("should add a dragged element fully containing the frame", () => {
-      const containingRect = API.createElement({
-        type: "rectangle",
-        x: 220,
-        y: 20,
-        width: 300,
-        height: 300,
-      });
-
-      API.setElements([frame, containingRect]);
-
-      dragElementIntoFrame(frame, containingRect);
-
-      expect(API.getElement(containingRect).frameId).toBe(frame.id);
-    });
-
-    it("should drag an element into a frame", () => {
-      API.setElements([rect2, frame]);
-
-      dragElementIntoFrame(frame, rect2);
-
-      expect(rect2.frameId).toBe(frame.id);
-    });
-
-    it("should move an element dragged from one frame into another", () => {
-      const otherFrame = API.createElement({
-        id: "otherFrame",
-        type: "frame",
-        x: 300,
-        y: 0,
-        width: 150,
-        height: 150,
-      });
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 50,
-        y: 50,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-
-      API.setElements([frame, frameChild, otherFrame]);
-
-      expect(frameChild.frameId).toBe(frame.id);
-
-      dragElementIntoFrame(otherFrame, frameChild);
-
-      expect(frameChild.frameId).toBe(otherFrame.id);
-    });
-
-    it("should layer a dragged element above the highest frame child", () => {
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-
-      API.setElements([frame, frameChild, rect2]);
-
-      dragElementIntoFrame(frame, rect2);
-
-      expect(rect2.frameId).toBe(frame.id);
-      expect(h.elements.map((element) => element.id)).toEqual([
-        frame.id,
-        frameChild.id,
-        rect2.id,
-      ]);
-      expect(rect2.index! > frameChild.index!).toBe(true);
-      expect(rect2.index! > frame.index!).toBe(true);
-    });
-
-    it("should preview a dragged element above the highest frame child before pointerup", () => {
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-
-      API.setElements([rect2, frame, frameChild]);
-      API.setSelectedElements([rect2]);
-      API.updateElement(rect2, {
-        x: 10,
-        y: 10,
-      });
-
-      const getRenderableElementIds = (
-        selectedElementsAreBeingDragged: boolean,
-      ) => {
-        return h.app.renderer
-          .getRenderableElements({
-            zoom: h.state.zoom,
-            offsetLeft: 0,
-            offsetTop: 0,
-            scrollX: 0,
-            scrollY: 0,
-            height: 1000,
-            width: 1000,
-            editingTextElement: h.state.editingTextElement,
-            newElement: h.state.newElement,
-            selectedElements: getSelectedElements(h.elements, h.state),
-            selectedElementsAreBeingDragged,
-            frameToHighlight: frame as ExcalidrawFrameLikeElement,
-          })
-          .visibleElements.map((element) => element.id);
-      };
-
-      expect(h.elements.map((element) => element.id)).toEqual([
-        rect2.id,
-        frame.id,
-        frameChild.id,
-      ]);
-      expect(getRenderableElementIds(false)).toEqual([
-        rect2.id,
-        frame.id,
-        frameChild.id,
-      ]);
-      expect(getRenderableElementIds(true)).toEqual([
-        frame.id,
-        frameChild.id,
-        rect2.id,
-      ]);
-      expect(h.elements.map((element) => element.id)).toEqual([
-        rect2.id,
-        frame.id,
-        frameChild.id,
-      ]);
-      expect(rect2.frameId).toBe(null);
-    });
-
-    it("should not preview reorder dragged elements already in the highlighted frame", () => {
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-      const otherFrameChild = API.createElement({
-        id: "otherFrameChild",
-        type: "rectangle",
-        x: 40,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-
-      API.setElements([frameChild, frame, otherFrameChild]);
-      API.setSelectedElements([frameChild]);
-
-      const renderableElementIds = h.app.renderer
-        .getRenderableElements({
-          zoom: h.state.zoom,
-          offsetLeft: 0,
-          offsetTop: 0,
-          scrollX: 0,
-          scrollY: 0,
-          height: 1000,
-          width: 1000,
-          editingTextElement: h.state.editingTextElement,
-          newElement: h.state.newElement,
-          selectedElements: getSelectedElements(h.elements, h.state),
-          selectedElementsAreBeingDragged: true,
-          frameToHighlight: frame as ExcalidrawFrameLikeElement,
-        })
-        .visibleElements.map((element) => element.id);
-
-      expect(renderableElementIds).toEqual([
-        frameChild.id,
-        frame.id,
-        otherFrameChild.id,
-      ]);
-    });
-
-    it("should put a dragged mixed selection above the highest frame child", () => {
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 50,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-        boundElements: [{ id: "boundText", type: "text" }],
-      });
-      const boundText = API.createElement({
-        id: "boundText",
-        type: "text",
-        x: 50,
-        y: 10,
-        width: 20,
-        height: 20,
-        containerId: frameChild.id,
-        frameId: frame.id,
-      });
-      const otherFrameChild = API.createElement({
-        id: "otherFrameChild",
-        type: "rectangle",
-        x: 80,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-      const nonFrameElement = API.createElement({
-        id: "nonFrameElement",
-        type: "rectangle",
-        x: 155,
-        y: 10,
-        width: 20,
-        height: 20,
-      });
-
-      API.setElements([
-        frame,
-        frameChild,
-        boundText,
-        otherFrameChild,
-        nonFrameElement,
-      ]);
-      API.setSelectedElements([frameChild, nonFrameElement]);
-
-      mouse.downAt(
-        nonFrameElement.x + nonFrameElement.width / 2,
-        nonFrameElement.y + nonFrameElement.height / 2,
-      );
-      mouse.moveTo(frame.x + frame.width - 5, nonFrameElement.y + 10);
-      mouse.up();
-
-      expect(frameChild.frameId).toBe(frame.id);
-      expect(boundText.frameId).toBe(frame.id);
-      expect(nonFrameElement.frameId).toBe(frame.id);
-      expect(h.elements.map((element) => element.id)).toEqual([
-        frame.id,
-        otherFrameChild.id,
-        frameChild.id,
-        boundText.id,
-        nonFrameElement.id,
-      ]);
-    });
-
-    it("should not reorder dragged elements already in the highlighted frame", () => {
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 50,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-      const otherFrameChild = API.createElement({
-        id: "otherFrameChild",
-        type: "rectangle",
-        x: 80,
-        y: 10,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-
-      API.setElements([frame, frameChild, otherFrameChild]);
-      API.setSelectedElements([frameChild]);
-
-      mouse.downAt(
-        frameChild.x + frameChild.width / 2,
-        frameChild.y + frameChild.height / 2,
-      );
-      mouse.moveTo(frameChild.x + frameChild.width / 2 + 5, frameChild.y + 10);
-      mouse.up();
-
-      expect(frameChild.frameId).toBe(frame.id);
-      expect(h.elements.map((element) => element.id)).toEqual([
-        frame.id,
-        frameChild.id,
-        otherFrameChild.id,
-      ]);
-    });
-
-    it("should not drag an element into a frame behind a non-frame element", () => {
-      const cover = API.createElement({
-        id: "cover",
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        width: 80,
-        height: 80,
-        backgroundColor: "#ffc9c9",
-      });
-      API.setElements([frame, cover, rect2]);
-
-      mouse.clickAt(rect2.x, rect2.y);
-      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
-      mouse.moveTo(20, 20);
-      mouse.upAt(20, 20);
-
-      expect(rect2.frameId).toBe(null);
-    });
-
-    it("should drag an element into a frame over a non-frame element", () => {
-      const cover = API.createElement({
-        id: "cover",
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        width: 80,
-        height: 80,
-        backgroundColor: "#ffc9c9",
-      });
-      API.setElements([cover, rect2, frame]);
-
-      mouse.clickAt(rect2.x, rect2.y);
-      mouse.downAt(rect2.x + rect2.width / 2, rect2.y + rect2.height / 2);
-      mouse.moveTo(20, 20);
-      mouse.upAt(20, 20);
-
-      expect(rect2.frameId).toBe(frame.id);
-    });
-
-    it("should keep dragging a frame child over a non-frame element above its frame", () => {
-      const cover = API.createElement({
-        id: "cover",
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        width: 80,
-        height: 80,
-        backgroundColor: "#ffc9c9",
-      });
-      const frameChild = API.createElement({
-        id: "frameChild",
-        type: "rectangle",
-        x: 100,
-        y: 20,
-        width: 20,
-        height: 20,
-        frameId: frame.id,
-      });
-
-      API.setElements([frameChild, frame, cover]);
-      API.setSelectedElements([frameChild]);
-
-      mouse.downAt(
-        frameChild.x + frameChild.width / 2,
-        frameChild.y + frameChild.height / 2,
-      );
-      mouse.moveTo(20, 20);
-
-      expect(h.state.frameToHighlight?.id).toBe(frame.id);
-
-      mouse.upAt(20, 20);
-
-      expect(frameChild.frameId).toBe(frame.id);
-    });
-
    it.skip("should drag element inside, duplicate it and keep it in frame", () => {
      API.setElements([frame, rect2]);

@@ -326,59 +326,19 @@ describe("normalizeElementsOrder", () => {
      ]),
      [
        "BA_rect1",
-        "CBA_rect3",
-        "CBA_rect7",
        "BA_rect5",
        "BA_rect6",
        "A_rect2",
        "A_rect5",
+        "CBA_rect3",
+        "CBA_rect7",
        "rect4",
        "X_rect8",
-        "YX_rect10",
        "X_rect11",
+        "YX_rect10",
        "rect9",
      ],
    );
-    assertOrder(
-      normalizeElementOrder([
-        API.createElement({
-          id: "A_rect1",
-          type: "rectangle",
-          groupIds: ["A"],
-        }),
-        API.createElement({
-          id: "CBA_rect2",
-          type: "rectangle",
-          groupIds: ["C", "B", "A"],
-        }),
-        API.createElement({
-          id: "A_rect3",
-          type: "rectangle",
-          groupIds: ["A"],
-        }),
-      ]),
-      ["A_rect1", "CBA_rect2", "A_rect3"],
-    );
-    assertOrder(
-      normalizeElementOrder([
-        API.createElement({
-          id: "abcT_rect1",
-          type: "rectangle",
-          groupIds: ["ab", "c", "T"],
-        }),
-        API.createElement({
-          id: "abcT_rect2",
-          type: "rectangle",
-          groupIds: ["a", "bc", "T"],
-        }),
-        API.createElement({
-          id: "abcT_rect3",
-          type: "rectangle",
-          groupIds: ["ab", "c", "T"],
-        }),
-      ]),
-      ["abcT_rect1", "abcT_rect3", "abcT_rect2"],
-    );
  });

  // TODO
@@ -1,8 +1,4 @@
-import {
-  getWrappedTextLines,
-  parseTokens,
-  wrapText,
-} from "../src/textWrapping";
+import { wrapText, parseTokens } from "../src/textWrapping";

 import type { FontString } from "../src/types";

@@ -106,71 +102,6 @@ describe("Test wrapText", () => {
    expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
  });

-  it("should retain original text offsets for wrapped lines", () => {
-    expect(getWrappedTextLines("Hello World!", font, 60)).toEqual([
-      {
-        text: "Hello",
-        start: 0,
-        end: 5,
-      },
-      {
-        text: "World!",
-        start: 6,
-        end: 12,
-      },
-    ]);
-  });
-
-  it("should exclude whitespace trimmed away at soft-wrap boundaries from line offsets", () => {
-    expect(getWrappedTextLines("  Hello  World", font, 90)).toEqual([
-      {
-        text: "  Hello",
-        start: 0,
-        end: 7,
-      },
-      {
-        text: "World",
-        start: 9,
-        end: 14,
-      },
-    ]);
-  });
-
-  it("should retain offsets when wrapping a single long token", () => {
-    expect(getWrappedTextLines("Excalidraw", font, 50)).toEqual([
-      {
-        text: "Excal",
-        start: 0,
-        end: 5,
-      },
-      {
-        text: "idraw",
-        start: 5,
-        end: 10,
-      },
-    ]);
-  });
-
-  it("should preserve empty hard lines in metadata", () => {
-    expect(getWrappedTextLines("A\n\nB", font, 100)).toEqual([
-      {
-        text: "A",
-        start: 0,
-        end: 1,
-      },
-      {
-        text: "",
-        start: 2,
-        end: 2,
-      },
-      {
-        text: "B",
-        start: 3,
-        end: 4,
-      },
-    ]);
-  });
-
  describe("When text is CJK", () => {
    it("should break each CJK character when width is very small", () => {
      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
@@ -1509,190 +1509,4 @@ describe("z-indexing with frames", () => {
      ],
    });
  });
-
-  it("bringing to front / sending to back children of MULTIPLE frames at once moves all of them", () => {
-    assertZindex({
-      elements: [
-        { id: "F1_1", frameId: "F1", isSelected: true },
-        { id: "F1_2", frameId: "F1" },
-        { id: "F1", type: "frame" },
-        { id: "F2_1", frameId: "F2", isSelected: true },
-        { id: "F2_2", frameId: "F2" },
-        { id: "F2", type: "frame" },
-      ],
-      operations: [
-        // +∞: each selected child moves to the front of its own frame
-        [actionBringToFront, ["F1_2", "F1", "F1_1", "F2_2", "F2", "F2_1"]],
-        // -∞: each selected child moves to the back of its own frame
-        [actionSendToBack, ["F1_1", "F1_2", "F1", "F2_1", "F2_2", "F2"]],
-      ],
-    });
-  });
-
-  it("send to back / bring to front of a grouped frame child (in group-editing mode) must not duplicate elements", () => {
-    assertZindex({
-      elements: [
-        { id: "F1_1", frameId: "F1", groupIds: ["g1"] },
-        { id: "F1_2", frameId: "F1", groupIds: ["g1"], isSelected: true },
-        { id: "F1", type: "frame" },
-        { id: "F2_1", frameId: "F2", groupIds: ["g2"] },
-        { id: "F2_2", frameId: "F2", groupIds: ["g2"] },
-        { id: "F2", type: "frame" },
-      ],
-      appState: { editingGroupId: "g1" },
-      operations: [
-        // -∞ (send to back, within the frame)
-        [actionSendToBack, ["F1_2", "F1_1", "F1", "F2_1", "F2_2", "F2"]],
-        // +∞ (bring to front, within the frame)
-        [actionBringToFront, ["F1_1", "F1", "F1_2", "F2_1", "F2_2", "F2"]],
-      ],
-    });
-  });
-});
-
-/**
- * The inputs in this block intentionally VIOLATE the (soft) invariant that a
- * frame's children — and a group's members — are contiguous in the elements
- * array. Such states shouldn't occur in normal use, but they CAN arise from
- * bugs or broken input, because nothing re-defragments element order during
- * a reorder (`normalizeElementOrder` only runs on duplication). We keep these
- * tests so the reordering ops stay exercised against malformed order.
- *
- * HARD CONTRACT (a failure here is a real bug): a reorder must never throw,
- * duplicate, or drop elements. `assertReorderPreservesElements` checks this.
- *
- * SOFT SNAPSHOT (read before "fixing"): the exact resulting ORDER is NOT a
- * contract for invalid input — it's whatever the slice math happens to
- * produce. If a future change alters an `expected` order below, that is NOT
- * necessarily a functional regression. First confirm from the diff that the
- * hard contract still holds (nothing duplicated/lost), then update the
- * expected order to match, provided it's deemed an improvement over the
- * previous order, or it's an acceptable change given the underlying logic
- * change.
- */
-describe("z-index reordering with broken contiguity (invariant-violating input)", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  const assertReorderPreservesElements = (
-    elements: Parameters<typeof populateElements>[0],
-    appState: Parameters<typeof populateElements>[1],
-    // each op is applied to a freshly-populated (broken) state
-    cases: [Actions, string[]][],
-  ) => {
-    for (const [action, expected] of cases) {
-      populateElements(elements, appState);
-      const before = h.elements.map((el) => el.id);
-
-      expect(() => API.executeAction(action)).not.toThrow();
-
-      const after = h.elements.map((el) => el.id);
-      // hard contract:
-      expect(after.length).toBe(before.length); // no loss
-      expect(new Set(after).size).toBe(after.length); // no duplication
-      // soft snapshot (see block comment before changing):
-      expect(after).toEqual(expected);
-    }
-  };
-
-  it("discontiguous frame children (foreign frame's child interleaved in span)", () => {
-    // F2_1 (a child of frame F2) sits INSIDE frame F1's z-span. Reordering F1's
-    // child sweeps F2_1 along (span-based frame handling) — wrong ordering, but
-    // never a duplication/loss, and the op does not throw.
-    const elements: Parameters<typeof populateElements>[0] = [
-      { id: "F1_1", frameId: "F1", isSelected: true },
-      { id: "F2_1", frameId: "F2" },
-      { id: "F1_2", frameId: "F1" },
-      { id: "F1", type: "frame" },
-      { id: "F2", type: "frame" },
-    ];
-    assertReorderPreservesElements(elements, undefined, [
-      [actionBringForward, ["F2_1", "F1_2", "F1_1", "F1", "F2"]],
-      [actionSendBackward, ["F1_1", "F2_1", "F1_2", "F1", "F2"]],
-      [actionBringToFront, ["F2_1", "F1_2", "F1", "F1_1", "F2"]],
-      [actionSendToBack, ["F1_1", "F2_1", "F1_2", "F1", "F2"]],
-    ]);
-  });
-
-  it("discontiguous group, whole group selected", () => {
-    // g1 = {A, C}, scattered by the loose elements B and D.
-    const elements: Parameters<typeof populateElements>[0] = [
-      { id: "A", groupIds: ["g1"], isSelected: true },
-      { id: "B" },
-      { id: "C", groupIds: ["g1"], isSelected: true },
-      { id: "D" },
-    ];
-    assertReorderPreservesElements(elements, undefined, [
-      // move-by-one leaves the group scattered (each run moves independently)
-      [actionBringForward, ["B", "A", "D", "C"]],
-      [actionSendBackward, ["A", "C", "B", "D"]],
-      // to-front / to-back gather the scattered members back into one block
-      [actionBringToFront, ["B", "D", "A", "C"]],
-      [actionSendToBack, ["A", "C", "B", "D"]],
-    ]);
-  });
-
-  it("discontiguous group, single member selected in group-editing mode", () => {
-    const elements: Parameters<typeof populateElements>[0] = [
-      { id: "A", groupIds: ["g1"] },
-      { id: "B" },
-      { id: "C", groupIds: ["g1"], isSelected: true },
-      { id: "D" },
-    ];
-    assertReorderPreservesElements(elements, { editingGroupId: "g1" }, [
-      [actionBringForward, ["A", "B", "C", "D"]],
-      [actionSendBackward, ["C", "A", "B", "D"]],
-      [actionBringToFront, ["A", "B", "C", "D"]],
-      [actionSendToBack, ["C", "A", "B", "D"]],
-    ]);
-  });
-
-  it("two interleaved groups, both fully selected", () => {
-    const elements: Parameters<typeof populateElements>[0] = [
-      { id: "A", groupIds: ["g1"], isSelected: true },
-      { id: "X", groupIds: ["g2"], isSelected: true },
-      { id: "C", groupIds: ["g1"], isSelected: true },
-      { id: "Y", groupIds: ["g2"], isSelected: true },
-      { id: "Z" },
-    ];
-    assertReorderPreservesElements(elements, undefined, [
-      [actionBringForward, ["Z", "A", "X", "C", "Y"]],
-      [actionSendBackward, ["A", "X", "C", "Y", "Z"]],
-      [actionBringToFront, ["Z", "A", "X", "C", "Y"]],
-      [actionSendToBack, ["A", "X", "C", "Y", "Z"]],
-    ]);
-  });
-});
-
-describe("z-index reordering with inconsistent group-editing state", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  it("does not duplicate or drop elements when selected elements fall outside the edited group scope", () => {
-    assertZindex({
-      elements: [
-        { id: "A", groupIds: ["g1"], isSelected: true },
-        { id: "C", groupIds: ["g1"] },
-        { id: "X", groupIds: ["g2"] },
-        { id: "Y", groupIds: ["g2"] },
-        { id: "R" },
-      ],
-      appState: { editingGroupId: "g2" },
-      operations: [[actionSendToBack, ["A", "C", "X", "Y", "R"]]],
-    });
-
-    assertZindex({
-      elements: [
-        { id: "A", groupIds: ["g1"] },
-        { id: "C", groupIds: ["g1"] },
-        { id: "X", groupIds: ["g2"], isSelected: true },
-        { id: "Y", groupIds: ["g2"] },
-        { id: "R" },
-      ],
-      appState: { editingGroupId: "g1" },
-      operations: [[actionBringToFront, ["A", "C", "X", "Y", "R"]]],
-    });
-  });
 });
@@ -1,7 +1,6 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
-    "rootDir": "../",
    "outDir": "./dist/types"
  },
  "include": ["src/**/*", "global.d.ts"],
@@ -17,21 +17,23 @@ Please add the latest change on the top under the correct section.

 ### Breaking changes

- Theme changes initiated by the default UI are now delegated to `<Excalidraw onThemeChange={(theme) => ...} />` when supplied. If `onThemeChange` is not supplied, light/dark theme toggling still falls back to updating the internal editor state.
-
-  - `MainMenu.DefaultItems.ToggleTheme` no longer accepts the item-level `onSelect` callback. Host apps that need to control light/dark/system theme should pass `onThemeChange` to `<Excalidraw />` instead.
-  - `MainMenu.DefaultItems.ToggleTheme` with system theme support now uses `allowSystemTheme` together with `theme={Theme | "system"}` only to render the selected value. For the regular light/dark item, pass `allowSystemTheme={false}`.
-  - `CommandPalette.defaultItems.toggleTheme` was removed. The default theme command is now rendered by the command palette itself when `UIOptions.canvasActions.toggleTheme` enables the action (see below).
-  - `UIOptions.canvasActions.toggleTheme` still controls default theme UI availability. When it is `null`, it defaults to `true` if `props.theme` is omitted or `props.onThemeChange` is supplied, and otherwise defaults to disabled.
-
 - Renamed the `excalidrawAPI` prop to `onExcalidrawAPI`.
-  - `onExcalidrawAPI` is now called on mount (instead of during constructor), and later on unmount (with `null` value). The API may be removed altogether in the future (you can use `onMount` & `onUmount` to manage the `ExcalidrawAPI` object (e.g. to cache it to a global state), already).

 ### Features

- Added `ExcalidrawAPI.isDestroyed` flag. Set to `true` once the editor unmounts. Calling any `get*` method, `onStateChange`, or `onEvent` on a destroyed API instance will throw in development and `console.error` in production. The `ExcalidrawAPI` will be reset to `null` on umount, but to be extra safe, you should check `ExcalidrawAPI.isDestroyed` before calling these methods to guard against subtle race conditions in your code.
+- Added `onMount` and `onInitialize` props. `onMount` receives `{ excalidrawAPI, container }` once the editor root is mounted, and `onInitialize` fires once the initial scene has loaded.

- Added `onMount`, `onInitialize`, and `onUnmount` props. `onMount` receives `{ excalidrawAPI, container }` once the editor root is mounted. `onInitialize` fires once the initial scene has loaded. `onUnmount` fires just before unmounting.
+  ```tsx
+  <Excalidraw
+    onMount={({ excalidrawAPI, container }) => {
+      console.log(container);
+      excalidrawAPI.scrollToContent();
+    }}
+    onInitialize={(api) => {
+      api.refresh();
+    }}
+  />
+  ```

 - Same events are also accessible imperatively through `api.onEvent(...)`.

@@ -39,6 +41,7 @@ Please add the latest change on the top under the correct section.
  <Excalidraw
    onExcalidrawAPI={(api) => {
      api.onEvent("editor:mount", ({ excalidrawAPI, container }) => {
+        excalidrawAPI.scrollToContent();
        console.log(container);
      });

@@ -51,9 +54,7 @@ Please add the latest change on the top under the correct section.

  Note that in future releases, most, if not all, `excalidrawAPI.on*` subscriptions will be removed in favor of `excalidrawAPI.onEvent(name)`.

- Also added `"editor:unmount"` lifecycle event, only accessible via `api.onEvent("editor:unmount")`.
-
- Exported `<ExcalidrawAPIProvider/>`, `useExcalidrawAPI()`, `useAppStateValue(prop | props | selectorFunction)`, and `useOnExcalidrawStateChange(prop | props | selectorFunction, callback)` from the package. The imperative API also now exposes `onStateChange(prop | props | selectorFunction, callback?)`, and `onEvent(name, callback)`.
+- Exported `ExcalidrawAPIProvider`, `useExcalidrawAPI`, and `useAppStateValue` from the package entrypoint. The imperative API also now exposes `onStateChange`.

  ```tsx
  <ExcalidrawAPIProvider>
@@ -62,9 +63,6 @@ Please add the latest change on the top under the correct section.
  </ExcalidrawAPIProvider>;

  function Logger() {
-    // initially null before the ExcalidrawAPIProvider initializes ater
-    // <Excalidraw/> renders
-    // When <Excalidraw/> unmounts, is reset back to null
    const api = useExcalidrawAPI();

    useAppStateValue("viewModeEnabled", (viewModeEnabled) => {
@@ -1,10 +1,10 @@
 # Excalidraw

-**Excalidraw** is exported as a React component that you can embed directly in your app.
+**Excalidraw** is exported as a component to be directly embedded in your project.

 ## Installation

-Install the package together with its React peer dependencies.
+Use `npm` or `yarn` to install the package.

 ```bash
 npm install react react-dom @excalidraw/excalidraw
@@ -12,131 +12,34 @@ npm install react react-dom @excalidraw/excalidraw
 yarn add react react-dom @excalidraw/excalidraw
 ```

-> **Note**: If you want to try unreleased changes, use `@excalidraw/excalidraw@next`.
+> **Note**: If you don't want to wait for the next stable release and try out the unreleased changes, use `@excalidraw/excalidraw@next`.

-## Quick start
+#### Self-hosting fonts

-The minimum working setup has two easy-to-miss requirements:
+By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod).

-1. Import the package CSS:
+For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:

-```ts
-import "@excalidraw/excalidraw/index.css";
+```js
+<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>
 ```

-2. Render Excalidraw inside a container with a non-zero height.
+### Dimensions of Excalidraw

-```tsx
-import { Excalidraw } from "@excalidraw/excalidraw";
-import "@excalidraw/excalidraw/index.css";
-
-export default function App() {
-  return (
-    <div style={{ height: "100vh" }}>
-      <Excalidraw />
-    </div>
-  );
-}
-```
-
-Excalidraw fills `100%` of the width and height of its parent. If the parent has no height, the canvas will not be visible.
-
-## Next.js / SSR frameworks
-
-Excalidraw should be rendered on the client. In SSR frameworks such as Next.js, use a client component and load it dynamically with SSR disabled.
-
-```tsx
-// app/components/ExcalidrawClient.tsx
-"use client";
-
-import { Excalidraw } from "@excalidraw/excalidraw";
-import "@excalidraw/excalidraw/index.css";
-
-export default function ExcalidrawClient() {
-  return (
-    <div style={{ height: "100vh" }}>
-      <Excalidraw />
-    </div>
-  );
-}
-```
-
-```tsx
-// app/page.tsx
-import dynamic from "next/dynamic";
-
-const ExcalidrawClient = dynamic(
-  () => import("./components/ExcalidrawClient"),
-  { ssr: false },
-);
-
-export default function Page() {
-  return <ExcalidrawClient />;
-}
-```
-
-See the local examples for complete setups:
-
- [examples/with-nextjs](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs)
- [examples/with-script-in-browser](https://github.com/excalidraw/excalidraw/tree/master/examples/with-script-in-browser)
-
-## LLM / agent tips
-
-If an LLM or coding agent is setting up Excalidraw, these shortcuts usually save more time than re-prompting:
-
- Start with a plain `<Excalidraw />` in a `100vh` container. Add refs, `initialData`, persistence, or custom UI only after the base embed works.
- If the canvas is blank, check the CSS import and parent height first. Those are the two most common integration failures.
- In Next.js or other SSR frameworks, assume client-only rendering first. Use `"use client"` and `dynamic(..., { ssr: false })` before debugging hydration or `window is not defined` errors.
- If imports or entrypoints are unclear, inspect `node_modules/@excalidraw/excalidraw/package.json`. The installed package exports are the source of truth.
- Do not set `window.EXCALIDRAW_ASSET_PATH` unless you are intentionally self-hosting fonts/assets.
- When docs and generated code drift, copy the nearest working example from this repo, especially `examples/with-nextjs` or `examples/with-script-in-browser`.
-
-## Migrating to `@excalidraw/excalidraw@0.18.x`
-
-Version `0.18.x` removes the old `types/`-prefixed deep import paths. If you were importing types from `@excalidraw/excalidraw/types/...`, switch to the new type-only subpaths below.
-
-| Old path | New path |
-| --- | --- |
-| `@excalidraw/excalidraw/types/data/transform.js` | `@excalidraw/excalidraw/element/transform` |
-| `@excalidraw/excalidraw/types/data/types.js` | `@excalidraw/excalidraw/data/types` |
-| `@excalidraw/excalidraw/types/element/types.js` | `@excalidraw/excalidraw/element/types` |
-| `@excalidraw/excalidraw/types/utility-types.js` | `@excalidraw/excalidraw/common/utility-types` |
-| `@excalidraw/excalidraw/types/types.js` | `@excalidraw/excalidraw/types` |
-
-Drop the `.js` extension. The new package `exports` map resolves these paths without it.
-
-These deep subpaths are for `import type` only. Runtime imports should come from the package root, plus `@excalidraw/excalidraw/index.css` for styles.
-
-For example:
-
-```ts
-import { exportToSvg } from "@excalidraw/excalidraw";
-```
-
-## Self-hosting fonts
-
-By default, Excalidraw downloads the fonts it needs from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod).
-
-For self-hosting, copy the contents of `node_modules/@excalidraw/excalidraw/dist/prod/fonts` into the path where your app serves static assets, for example `public/`. Then set `window.EXCALIDRAW_ASSET_PATH` to that same path:
-
-```html
-<script>
-  window.EXCALIDRAW_ASSET_PATH = "/";
-</script>
-```
+Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.

 ## Demo

-Try the [CodeSandbox example](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser).
+Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.

 ## Integration

-Read the [integration docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration).
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration).

 ## API

-Read the [API docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api).
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api).

 ## Contributing

-Read the [contributing docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing).
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing).
@@ -5,7 +5,6 @@ import {
  VERTICAL_ALIGN,
  arrayToMap,
  getFontString,
-  getStrokeWidthByKey,
 } from "@excalidraw/common";
 import {
  getOriginalContainerHeightFromCache,
@@ -250,10 +249,7 @@ export const actionWrapTextInContainer = register({
          fillStyle: appState.currentItemFillStyle,
          strokeColor: appState.currentItemStrokeColor,
          roughness: appState.currentItemRoughness,
-          strokeWidth: getStrokeWidthByKey(
-            "rectangle",
-            appState.currentItemStrokeWidthKey,
-          ),
+          strokeWidth: appState.currentItemStrokeWidth,
          strokeStyle: appState.currentItemStrokeStyle,
          roundness:
            appState.currentItemRoundness === "round"
@@ -477,28 +477,17 @@ export const actionToggleTheme = register<AppState["theme"]>({
    appState.theme === THEME.LIGHT ? MoonIcon : SunIcon,
  viewMode: true,
  trackEvent: { category: "canvas" },
-  perform: (_, appState, value, app) => {
-    const nextTheme =
-      value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT);
-
-    if (app.props.onThemeChange) {
-      app.props.onThemeChange(nextTheme);
-      return false;
-    }
-
+  perform: (_, appState, value) => {
    return {
      appState: {
        ...appState,
-        theme: nextTheme,
+        theme:
+          value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT),
      },
      captureUpdate: CaptureUpdateAction.EVENTUALLY,
    };
  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] &&
-    event.altKey &&
-    event.shiftKey &&
-    event.code === CODES.D,
+  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
  predicate: (elements, appState, props, app) => {
    return !!app.props.UIOptions.canvasActions.toggleTheme;
  },
@@ -1,147 +0,0 @@
-import {
-  getElementsInGroup,
-  isSomeElementSelected,
-  makeNextSelectedElementIds,
-  selectGroupsForSelectedElements,
-} from "@excalidraw/element";
-import { CaptureUpdateAction } from "@excalidraw/element";
-import { KEYS, isWritableElement, updateActiveTool } from "@excalidraw/common";
-
-import type { GroupId } from "@excalidraw/element/types";
-
-import { register } from "./register";
-
-import type { AppClassProperties, AppState } from "../types";
-
-const getNextActiveTool = (
-  appState: Readonly<AppState>,
-  app: AppClassProperties,
-) => {
-  if (appState.activeTool.type === "eraser") {
-    return updateActiveTool(appState, {
-      ...(appState.activeTool.lastActiveTool || {
-        type: app.state.preferredSelectionTool.type,
-      }),
-      lastActiveToolBeforeEraser: null,
-    });
-  }
-
-  return updateActiveTool(appState, {
-    type: app.state.preferredSelectionTool.type,
-  });
-};
-
-const getParentEditingGroupId = (
-  appState: Readonly<AppState>,
-  app: AppClassProperties,
-  selectedElementIds: AppState["selectedElementIds"],
-): GroupId | null => {
-  if (!appState.editingGroupId) {
-    return null;
-  }
-
-  const nonDeletedElements = app.scene.getNonDeletedElements();
-  const selectedElements = app.scene.getSelectedElements({
-    selectedElementIds,
-    elements: nonDeletedElements,
-  });
-  const candidateElements = selectedElements.length
-    ? selectedElements
-    : getElementsInGroup(nonDeletedElements, appState.editingGroupId);
-
-  for (const element of candidateElements) {
-    const editingGroupIndex = element.groupIds.indexOf(appState.editingGroupId);
-    if (editingGroupIndex !== -1 && element.groupIds[editingGroupIndex + 1]) {
-      return element.groupIds[editingGroupIndex + 1] as GroupId;
-    }
-  }
-
-  return null;
-};
-
-export const actionDeselect = register({
-  name: "deselect",
-  label: "",
-  trackEvent: false,
-  perform: (_elements, appState, _, app) => {
-    const activeTool = getNextActiveTool(appState, app);
-
-    if (appState.editingGroupId) {
-      const nonDeletedElements = app.scene.getNonDeletedElements();
-      const selectedElementIds =
-        Object.keys(appState.selectedElementIds).length > 0
-          ? appState.selectedElementIds
-          : getElementsInGroup(
-              nonDeletedElements,
-              appState.editingGroupId,
-            ).reduce((acc, element) => {
-              acc[element.id] = true;
-              return acc;
-            }, {} as Record<string, true>);
-
-      return {
-        appState: {
-          ...appState,
-          ...selectGroupsForSelectedElements(
-            {
-              editingGroupId: getParentEditingGroupId(
-                appState,
-                app,
-                selectedElementIds,
-              ),
-              selectedElementIds,
-            },
-            nonDeletedElements,
-            appState,
-            app,
-          ),
-          activeEmbeddable: null,
-          activeTool,
-          selectedLinearElement: null,
-          selectionElement: null,
-          showHyperlinkPopup: false,
-          suggestedBinding: null,
-          frameToHighlight: null,
-        },
-        captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-      };
-    }
-
-    return {
-      appState: {
-        ...appState,
-        activeEmbeddable: null,
-        activeTool,
-        editingGroupId: null,
-        selectedElementIds: makeNextSelectedElementIds({}, appState),
-        selectedGroupIds: {},
-        selectedLinearElement: null,
-        selectionElement: null,
-        showHyperlinkPopup: false,
-        suggestedBinding: null,
-        frameToHighlight: null,
-      },
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-    };
-  },
-  keyTest: (event, appState, _, app) => {
-    if (event.key !== KEYS.ESCAPE) {
-      return false;
-    }
-
-    if (isWritableElement(event.target)) {
-      return false;
-    }
-
-    return (
-      !appState.newElement &&
-      appState.multiElement === null &&
-      !appState.selectedLinearElement?.isEditing &&
-      (appState.activeEmbeddable !== null ||
-        appState.activeTool.type !== app.state.preferredSelectionTool.type ||
-        !!appState.editingGroupId ||
-        !!appState.selectedLinearElement ||
-        isSomeElementSelected(app.scene.getNonDeletedElements(), appState))
-    );
-  },
-});
@@ -399,7 +399,7 @@ export const actionSaveFileToDisk = register({
        appState: {
          openDialog: null,
          fileHandle: savedFileHandle,
-          toast: { message: t("toast.fileSaved"), duration: 3000 },
+          toast: { message: t("toast.fileSaved") },
        },
      };
    } catch (error: any) {
@@ -54,7 +54,6 @@ export const actionFinalize = register<FormData>({
  label: "",
  trackEvent: false,
  perform: (elements, appState, data, app) => {
-    let shouldCommit = true;
    let newElements = elements;
    const { interactiveCanvas, focusContainer, scene } = app;
    const elementsMap = scene.getNonDeletedElementsMap();
@@ -223,44 +222,9 @@ export const actionFinalize = register<FormData>({
          !lastCommittedPoint ||
          points[points.length - 1] !== lastCommittedPoint
        ) {
-          shouldCommit = false;
          scene.mutateElement(element, {
            points: element.points.slice(0, -1),
          });
-          if (
-            isBindingElement(element) &&
-            element.endBinding &&
-            // after slicing the trailing point a <2-point arrow may be left
-            element.points.length > 1
-          ) {
-            const newArrow = !!appState.newElement;
-            const draggedPoints: PointsPositionUpdates = new Map([
-              [
-                element.points.length - 1,
-                {
-                  point: element.points[element.points.length - 1],
-                  isDragging: false,
-                },
-              ],
-            ]);
-            const globalPoint =
-              LinearElementEditor.getPointAtIndexGlobalCoordinates(
-                element,
-                -1,
-                elementsMap,
-              );
-            bindOrUnbindBindingElement(
-              element,
-              draggedPoints,
-              globalPoint[0],
-              globalPoint[1],
-              scene,
-              appState,
-              {
-                newArrow,
-              },
-            );
-          }
        }
      }

@@ -365,8 +329,8 @@ export const actionFinalize = register<FormData>({
        selectionElement: null,
        multiElement: null,
        editingTextElement: null,
+        startBoundElement: null,
        suggestedBinding: null,
-        frameToHighlight: null,
        selectedElementIds:
          element &&
          !appState.activeTool.locked &&
@@ -380,13 +344,13 @@ export const actionFinalize = register<FormData>({
        selectedLinearElement,
      },
      // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
-      captureUpdate: shouldCommit
-        ? CaptureUpdateAction.IMMEDIATELY
-        : CaptureUpdateAction.NEVER,
+      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
  keyTest: (event, appState) =>
-    (event.key === KEYS.ESCAPE && appState.selectedLinearElement?.isEditing) ||
+    (event.key === KEYS.ESCAPE &&
+      (appState.selectedLinearElement?.isEditing ||
+        (!appState.newElement && appState.multiElement === null))) ||
    ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
      appState.multiElement !== null),
  PanelComponent: ({ appState, updateData, data }) => (
@@ -205,6 +205,7 @@ export const actionWrapSelectionInFrame = register({
      [...app.scene.getElementsIncludingDeleted(), frame],
      selectedElements,
      frame,
+      appState,
    );

    return {
@@ -277,6 +277,7 @@ export const actionUngroup = register({
            elementsMap,
          ),
          frame,
+          app,
        );
      }
    });
@@ -1,4 +1,5 @@
 import {
+  isWindows,
  KEYS,
  matchKey,
  arrayToMap,
@@ -113,7 +114,7 @@ export const createRedoAction: ActionCreator = (history) => ({
    ),
  keyTest: (event) =>
    (event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
-    (event[KEYS.CTRL_OR_CMD] && !event.shiftKey && matchKey(event, KEYS.Y)),
+    (isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
  PanelComponent: ({ appState, updateData, data, app }) => {
    const { isRedoStackEmpty } = useEmitter(
      history.onHistoryChangedEmitter,
@@ -1,9 +1,8 @@
-import { fireEvent, queryByTestId } from "@testing-library/react";
+import { queryByTestId } from "@testing-library/react";

 import {
  COLOR_PALETTE,
  DEFAULT_ELEMENT_BACKGROUND_PICKS,
-  FREEDRAW_STROKE_WIDTH,
  FONT_FAMILY,
  STROKE_WIDTH,
 } from "@excalidraw/common";
@@ -129,62 +128,6 @@ describe("element locking", () => {
      expect(thinStrokeWidthButton).toBeChecked();
    });

-    it("should highlight common stroke width key across freedraw and non-freedraw elements", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.medium,
-      });
-      const freedraw = API.createElement({
-        type: "freedraw",
-        strokeWidth: FREEDRAW_STROKE_WIDTH.medium,
-      });
-      API.setElements([rect, freedraw]);
-      API.setSelectedElements([rect, freedraw]);
-
-      expect(queryByTestId(document.body, `strokeWidth-medium`)).toBeChecked();
-    });
-
-    it("should apply stroke width by element type", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      const freedraw = API.createElement({
-        type: "freedraw",
-        strokeWidth: FREEDRAW_STROKE_WIDTH.thin,
-      });
-      API.setElements([rect, freedraw]);
-      API.setSelectedElements([rect, freedraw]);
-
-      const boldStrokeWidthButton = queryByTestId(
-        document.body,
-        `strokeWidth-bold`,
-      );
-      expect(boldStrokeWidthButton).not.toBe(null);
-      fireEvent.click(boldStrokeWidthButton!);
-
-      const selectedElements = API.getSelectedElements();
-      const selectedRect = selectedElements.find(
-        (element) => element.type === "rectangle",
-      );
-      const selectedFreedraw = selectedElements.find(
-        (element) => element.type === "freedraw",
-      );
-
-      expect(selectedRect?.strokeWidth).toBe(STROKE_WIDTH.bold);
-      expect(selectedFreedraw?.strokeWidth).toBe(FREEDRAW_STROKE_WIDTH.bold);
-    });
-
-    it("should create new elements with stroke width by element type", () => {
-      API.setAppState({ currentItemStrokeWidthKey: "bold" });
-
-      const rect = API.createElement({ type: "rectangle" });
-      const freedraw = API.createElement({ type: "freedraw" });
-
-      expect(rect.strokeWidth).toBe(STROKE_WIDTH.bold);
-      expect(freedraw.strokeWidth).toBe(FREEDRAW_STROKE_WIDTH.bold);
-    });
-
    it("should not highlight any stroke width button if no common style", () => {
      const rect1 = API.createElement({
        type: "rectangle",
@@ -192,7 +135,7 @@ describe("element locking", () => {
      });
      const rect2 = API.createElement({
        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.medium,
+        strokeWidth: STROKE_WIDTH.bold,
      });
      API.setElements([rect1, rect2]);
      API.setSelectedElements([rect1, rect2]);
@@ -202,17 +145,17 @@ describe("element locking", () => {
        queryByTestId(document.body, `strokeWidth-thin`),
      ).not.toBeChecked();
      expect(
-        queryByTestId(document.body, `strokeWidth-medium`),
+        queryByTestId(document.body, `strokeWidth-bold`),
      ).not.toBeChecked();
      expect(
-        queryByTestId(document.body, `strokeWidth-bold`),
+        queryByTestId(document.body, `strokeWidth-extraBold`),
      ).not.toBeChecked();
    });

    it("should show properties of different element types when selected", () => {
      const rect = API.createElement({
        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.medium,
+        strokeWidth: STROKE_WIDTH.bold,
      });
      const text = API.createElement({
        type: "text",
@@ -221,7 +164,7 @@ describe("element locking", () => {
      API.setElements([rect, text]);
      API.setSelectedElements([rect, text]);

-      expect(queryByTestId(document.body, `strokeWidth-medium`)).toBeChecked();
+      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
      expect(queryByTestId(document.body, `font-family-code`)).toHaveClass(
        "active",
      );
@@ -12,7 +12,7 @@ import {
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
  ROUNDNESS,
-  STROKE_WIDTH_KEYS,
+  STROKE_WIDTH,
  VERTICAL_ALIGN,
  KEYS,
  randomInteger,
@@ -20,11 +20,9 @@ import {
  getFontFamilyString,
  getLineHeight,
  isTransparent,
-  getStrokeWidthByKey,
  reduceToCommonValue,
  invariant,
  FONT_SIZES,
-  type StrokeWidthKey,
 } from "@excalidraw/common";

 import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
@@ -38,7 +36,6 @@ import {
 import { LinearElementEditor } from "@excalidraw/element";

 import { newElementWith } from "@excalidraw/element";
-import { getArrowheadForPicker } from "@excalidraw/element";

 import {
  getBoundTextElement,
@@ -72,11 +69,9 @@ import type {
  ElementsMap,
  ExcalidrawBindableElement,
  ExcalidrawElement,
-  ExcalidrawFreeDrawElement,
  ExcalidrawLinearElement,
  ExcalidrawTextElement,
  FontFamilyValues,
-  StrokeVariability,
  TextAlign,
  VerticalAlign,
 } from "@excalidraw/element/types";
@@ -87,7 +82,6 @@ import type { CaptureUpdateActionType } from "@excalidraw/element";

 import { trackEvent } from "../analytics";
 import { RadioSelection } from "../components/RadioSelection";
-import { ToolButton } from "../components/ToolButton";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { FontPicker } from "../components/FontPicker/FontPicker";
 import { IconPicker } from "../components/IconPicker";
@@ -130,14 +124,9 @@ import {
  sharpArrowIcon,
  roundArrowIcon,
  elbowArrowIcon,
-  ArrowheadCardinalityExactlyOneIcon,
-  ArrowheadCardinalityManyIcon,
-  ArrowheadCardinalityOneIcon,
-  ArrowheadCardinalityOneOrManyIcon,
-  ArrowheadCardinalityZeroOrManyIcon,
-  ArrowheadCardinalityZeroOrOneIcon,
-  strokeVariabilityConstantIcon,
-  strokeVariabilityVariableIcon,
+  ArrowheadCrowfootIcon,
+  ArrowheadCrowfootOneIcon,
+  ArrowheadCrowfootOneOrManyIcon,
 } from "../components/icons";

 import { Fonts } from "../fonts";
@@ -197,12 +186,8 @@ export const changeProperty = (
 export const getFormValue = function <T extends Primitive>(
  elements: readonly ExcalidrawElement[],
  app: AppClassProperties,
-  /**
-   * input value (usually the element attribute value,
-   * but depends on what the action's PanelComponent input expects)
-   */
-  getValue: (element: ExcalidrawElement) => T,
-  elementPredicate: true | ((element: ExcalidrawElement) => boolean),
+  getAttribute: (element: ExcalidrawElement) => T,
+  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
  const editingTextElement = app.state.editingTextElement;
@@ -211,7 +196,7 @@ export const getFormValue = function <T extends Primitive>(
  let ret: T | null = null;

  if (editingTextElement) {
-    ret = getValue(editingTextElement);
+    ret = getAttribute(editingTextElement);
  }

  if (!ret) {
@@ -220,12 +205,12 @@ export const getFormValue = function <T extends Primitive>(
    if (hasSelection) {
      const selectedElements = app.scene.getSelectedElements(app.state);
      const targetElements =
-        elementPredicate === true
+        isRelevantElement === true
          ? selectedElements
-          : selectedElements.filter((el) => elementPredicate(el));
+          : selectedElements.filter((el) => isRelevantElement(el));

      ret =
-        reduceToCommonValue(targetElements, getValue) ??
+        reduceToCommonValue(targetElements, getAttribute) ??
        (typeof defaultValue === "function"
          ? defaultValue(true)
          : defaultValue);
@@ -555,37 +540,20 @@ export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
  },
 });

-const getStrokeWidthKeyForElement = (
-  element: ExcalidrawElement,
-): StrokeWidthKey | null => {
-  return (
-    STROKE_WIDTH_KEYS.find(
-      (key) => getStrokeWidthByKey(element.type, key) === element.strokeWidth,
-    ) ?? null
-  );
-};
-
-const getStrokeWidthForElement = (
-  element: ExcalidrawElement,
-  strokeWidthKey: StrokeWidthKey,
-): ExcalidrawElement["strokeWidth"] => {
-  return getStrokeWidthByKey(element.type, strokeWidthKey);
-};
-
-export const actionChangeStrokeWidth = register<StrokeWidthKey>({
+export const actionChangeStrokeWidth = register<
+  ExcalidrawElement["strokeWidth"]
+>({
  name: "changeStrokeWidth",
  label: "labels.strokeWidth",
  trackEvent: false,
  perform: (elements, appState, value) => {
-    invariant(value, "actionChangeStrokeWidth: value must be defined");
-
    return {
      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
-          strokeWidth: getStrokeWidthForElement(el, value),
+          strokeWidth: value,
        }),
      ),
-      appState: { ...appState, currentItemStrokeWidthKey: value },
+      appState: { ...appState, currentItemStrokeWidth: value },
      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
@@ -593,35 +561,35 @@ export const actionChangeStrokeWidth = register<StrokeWidthKey>({
    <fieldset>
      <legend>{t("labels.strokeWidth")}</legend>
      <div className="buttonList">
-        <RadioSelection<StrokeWidthKey>
+        <RadioSelection
          group="stroke-width"
          options={[
            {
-              value: "thin",
+              value: STROKE_WIDTH.thin,
              text: t("labels.thin"),
              icon: StrokeWidthBaseIcon,
              testId: "strokeWidth-thin",
            },
            {
-              value: "medium",
-              text: t("labels.medium"),
+              value: STROKE_WIDTH.bold,
+              text: t("labels.bold"),
              icon: StrokeWidthBoldIcon,
-              testId: "strokeWidth-medium",
+              testId: "strokeWidth-bold",
            },
            {
-              value: "bold",
-              text: t("labels.bold"),
+              value: STROKE_WIDTH.extraBold,
+              text: t("labels.extraBold"),
              icon: StrokeWidthExtraBoldIcon,
-              testId: "strokeWidth-bold",
+              testId: "strokeWidth-extraBold",
            },
          ]}
          value={getFormValue(
            elements,
            app,
-            getStrokeWidthKeyForElement,
+            (element) => element.strokeWidth,
            (element) => element.hasOwnProperty("strokeWidth"),
            (hasSelection) =>
-              hasSelection ? null : appState.currentItemStrokeWidthKey,
+              hasSelection ? null : appState.currentItemStrokeWidth,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -684,87 +652,6 @@ export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
  ),
 });

-export const actionChangeFreedrawMode = register<StrokeVariability>({
-  name: "changeFreedrawMode",
-  label: "labels.pressure",
-  trackEvent: false,
-  perform: (elements, appState, value) => {
-    const variability = value || "constant";
-
-    return {
-      elements: changeProperty(elements, appState, (el) => {
-        if (el.type !== "freedraw") {
-          return el;
-        }
-        return newElementWith(el, {
-          strokeOptions: {
-            ...el.strokeOptions,
-            variability,
-          },
-        }) as ExcalidrawElement;
-      }),
-      appState: { ...appState, currentItemStrokeVariability: variability },
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
-    };
-  },
-  PanelComponent: ({ elements, appState, updateData, app, data }) => {
-    const strokeVariability =
-      getFormValue(
-        elements,
-        app,
-        (element) =>
-          (element as ExcalidrawFreeDrawElement).strokeOptions?.variability,
-        (element) => element.type === "freedraw",
-        (hasSelection) =>
-          hasSelection ? null : appState.currentItemStrokeVariability,
-      ) ?? appState.currentItemStrokeVariability;
-
-    // in the compact UI the pressure setting is rendered as a single button
-    // that cycles between the two variability modes on click
-    if (data?.cycle) {
-      const isVariable = strokeVariability === "variable";
-      return (
-        <ToolButton
-          type="button"
-          icon={
-            isVariable
-              ? strokeVariabilityVariableIcon
-              : strokeVariabilityConstantIcon
-          }
-          title={t("labels.pressure")}
-          aria-label={t("labels.pressure")}
-          onClick={() => updateData(isVariable ? "constant" : "variable")}
-        />
-      );
-    }
-
-    return (
-      <fieldset>
-        <legend>{t("labels.pressure")}</legend>
-        <div className="buttonList">
-          <RadioSelection<StrokeVariability>
-            group="strokeOptions.variability"
-            options={[
-              {
-                value: "constant",
-                text: t("labels.pressure_constant"),
-                icon: strokeVariabilityConstantIcon,
-              },
-              {
-                value: "variable",
-                text: t("labels.pressure_variable"),
-                icon: strokeVariabilityVariableIcon,
-              },
-            ]}
-            value={strokeVariability}
-            onChange={(value) => updateData(value)}
-          />
-        </div>
-      </fieldset>
-    );
-  },
-});
-
 export const actionChangeStrokeStyle = register<
  ExcalidrawElement["strokeStyle"]
 >({
@@ -839,28 +726,9 @@ export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
-  PanelComponent: ({ elements, appState, app, updateData }) => {
-    const opacity = getFormValue(
-      elements,
-      app,
-      (element) => element.opacity,
-      true,
-      (hasSelection) => (hasSelection ? null : appState.currentItemOpacity),
-    );
-
-    return (
-      <Range
-        label={t("labels.opacity")}
-        value={opacity ?? appState.currentItemOpacity}
-        hasCommonValue={opacity !== null}
-        onChange={updateData}
-        min={0}
-        max={100}
-        step={10}
-        testId="opacity"
-      />
-    );
-  },
+  PanelComponent: ({ app, updateData }) => (
+    <Range updateData={updateData} app={app} testId="opacity" />
+  ),
 });

 export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
@@ -1682,117 +1550,80 @@ export const actionChangeRoundness = register<"sharp" | "round">({
 });

 const getArrowheadOptions = (flip: boolean) => {
-  return {
-    visibleSections: [
-      {
-        name: "default",
-        options: [
-          {
-            value: null,
-            text: t("labels.arrowhead_none"),
-            keyBinding: "q",
-            icon: <ArrowheadNoneIcon flip={flip} />,
-          },
-          {
-            value: "arrow",
-            text: t("labels.arrowhead_arrow"),
-            keyBinding: "w",
-            icon: <ArrowheadArrowIcon flip={flip} />,
-          },
-          {
-            value: "triangle",
-            text: t("labels.arrowhead_triangle"),
-            icon: <ArrowheadTriangleIcon flip={flip} />,
-            keyBinding: "e",
-          },
-          {
-            value: "triangle_outline",
-            text: t("labels.arrowhead_triangle_outline"),
-            icon: <ArrowheadTriangleOutlineIcon flip={flip} />,
-            keyBinding: "r",
-          },
-        ],
-      },
-    ],
-    hiddenSections: [
-      {
-        name: "default",
-        options: [
-          {
-            value: "circle",
-            text: t("labels.arrowhead_circle"),
-            keyBinding: "a",
-            icon: <ArrowheadCircleIcon flip={flip} />,
-          },
-          {
-            value: "circle_outline",
-            text: t("labels.arrowhead_circle_outline"),
-            keyBinding: "s",
-            icon: <ArrowheadCircleOutlineIcon flip={flip} />,
-          },
-          {
-            value: "diamond",
-            text: t("labels.arrowhead_diamond"),
-            icon: <ArrowheadDiamondIcon flip={flip} />,
-            keyBinding: "d",
-          },
-          {
-            value: "diamond_outline",
-            text: t("labels.arrowhead_diamond_outline"),
-            icon: <ArrowheadDiamondOutlineIcon flip={flip} />,
-            keyBinding: "f",
-          },
-          {
-            value: "bar",
-            text: t("labels.arrowhead_bar"),
-            keyBinding: "z",
-            icon: <ArrowheadBarIcon flip={flip} />,
-          },
-        ],
-      },
-      {
-        name: t("labels.cardinality"),
-        options: [
-          {
-            value: "cardinality_one",
-            text: t("labels.arrowhead_cardinality_one"),
-            icon: <ArrowheadCardinalityOneIcon flip={flip} />,
-            keyBinding: "x",
-          },
-          {
-            value: "cardinality_many",
-            text: t("labels.arrowhead_cardinality_many"),
-            icon: <ArrowheadCardinalityManyIcon flip={flip} />,
-            keyBinding: "c",
-          },
-          {
-            value: "cardinality_one_or_many",
-            text: t("labels.arrowhead_cardinality_one_or_many"),
-            icon: <ArrowheadCardinalityOneOrManyIcon flip={flip} />,
-            keyBinding: "v",
-          },
-          {
-            value: "cardinality_exactly_one",
-            text: t("labels.arrowhead_cardinality_exactly_one"),
-            icon: <ArrowheadCardinalityExactlyOneIcon flip={flip} />,
-            keyBinding: null,
-          },
-          {
-            value: "cardinality_zero_or_one",
-            text: t("labels.arrowhead_cardinality_zero_or_one"),
-            icon: <ArrowheadCardinalityZeroOrOneIcon flip={flip} />,
-            keyBinding: null,
-          },
-          {
-            value: "cardinality_zero_or_many",
-            text: t("labels.arrowhead_cardinality_zero_or_many"),
-            icon: <ArrowheadCardinalityZeroOrManyIcon flip={flip} />,
-            keyBinding: null,
-          },
-        ],
-      },
-    ],
-  } as const;
+  return [
+    {
+      value: null,
+      text: t("labels.arrowhead_none"),
+      keyBinding: "q",
+      icon: <ArrowheadNoneIcon flip={flip} />,
+    },
+    {
+      value: "arrow",
+      text: t("labels.arrowhead_arrow"),
+      keyBinding: "w",
+      icon: <ArrowheadArrowIcon flip={flip} />,
+    },
+    {
+      value: "triangle",
+      text: t("labels.arrowhead_triangle"),
+      icon: <ArrowheadTriangleIcon flip={flip} />,
+      keyBinding: "e",
+    },
+    {
+      value: "triangle_outline",
+      text: t("labels.arrowhead_triangle_outline"),
+      icon: <ArrowheadTriangleOutlineIcon flip={flip} />,
+      keyBinding: "r",
+    },
+    {
+      value: "circle",
+      text: t("labels.arrowhead_circle"),
+      keyBinding: "a",
+      icon: <ArrowheadCircleIcon flip={flip} />,
+    },
+    {
+      value: "circle_outline",
+      text: t("labels.arrowhead_circle_outline"),
+      keyBinding: "s",
+      icon: <ArrowheadCircleOutlineIcon flip={flip} />,
+    },
+    {
+      value: "diamond",
+      text: t("labels.arrowhead_diamond"),
+      icon: <ArrowheadDiamondIcon flip={flip} />,
+      keyBinding: "d",
+    },
+    {
+      value: "diamond_outline",
+      text: t("labels.arrowhead_diamond_outline"),
+      icon: <ArrowheadDiamondOutlineIcon flip={flip} />,
+      keyBinding: "f",
+    },
+    {
+      value: "bar",
+      text: t("labels.arrowhead_bar"),
+      keyBinding: "z",
+      icon: <ArrowheadBarIcon flip={flip} />,
+    },
+    {
+      value: "crowfoot_one",
+      text: t("labels.arrowhead_crowfoot_one"),
+      icon: <ArrowheadCrowfootOneIcon flip={flip} />,
+      keyBinding: "x",
+    },
+    {
+      value: "crowfoot_many",
+      text: t("labels.arrowhead_crowfoot_many"),
+      icon: <ArrowheadCrowfootIcon flip={flip} />,
+      keyBinding: "c",
+    },
+    {
+      value: "crowfoot_one_or_many",
+      text: t("labels.arrowhead_crowfoot_one_or_many"),
+      icon: <ArrowheadCrowfootOneOrManyIcon flip={flip} />,
+      keyBinding: "v",
+    },
+  ] as const;
 };

 export const actionChangeArrowhead = register<{
@@ -1836,52 +1667,45 @@ export const actionChangeArrowhead = register<{
  },
  PanelComponent: ({ elements, appState, updateData, app }) => {
    const isRTL = getLanguage().rtl;
-    const startArrowheadOptions = useMemo(
-      () => getArrowheadOptions(!isRTL),
-      [isRTL],
-    );
-    const endArrowheadOptions = useMemo(
-      () => getArrowheadOptions(!!isRTL),
-      [isRTL],
-    );

    return (
      <fieldset>
        <legend>{t("labels.arrowheads")}</legend>
        <div className="iconSelectList buttonList">
          <IconPicker
-            visibleSections={startArrowheadOptions.visibleSections}
-            hiddenSections={startArrowheadOptions.hiddenSections}
            label="arrowhead_start"
+            options={getArrowheadOptions(!isRTL)}
            value={getFormValue<Arrowhead | null>(
              elements,
              app,
              (element) =>
                isLinearElement(element) && canHaveArrowheads(element.type)
-                  ? getArrowheadForPicker(element.startArrowhead)
+                  ? element.startArrowhead
                  : appState.currentItemStartArrowhead,
              true,
              (hasSelection) =>
                hasSelection ? null : appState.currentItemStartArrowhead,
            )}
            onChange={(value) => updateData({ position: "start", type: value })}
+            numberOfOptionsToAlwaysShow={4}
          />
          <IconPicker
-            visibleSections={endArrowheadOptions.visibleSections}
-            hiddenSections={endArrowheadOptions.hiddenSections}
            label="arrowhead_end"
+            group="arrowheads"
+            options={getArrowheadOptions(!!isRTL)}
            value={getFormValue<Arrowhead | null>(
              elements,
              app,
              (element) =>
                isLinearElement(element) && canHaveArrowheads(element.type)
-                  ? getArrowheadForPicker(element.endArrowhead)
+                  ? element.endArrowhead
                  : appState.currentItemEndArrowhead,
              true,
              (hasSelection) =>
                hasSelection ? null : appState.currentItemEndArrowhead,
            )}
            onChange={(value) => updateData({ position: "end", type: value })}
+            numberOfOptionsToAlwaysShow={4}
          />
        </div>
      </fieldset>
@@ -1,24 +1,24 @@
 import { getFontString } from "@excalidraw/common";

-import { isExcalidrawElement, newElementWith } from "@excalidraw/element";
+import { newElementWith } from "@excalidraw/element";
 import { measureText } from "@excalidraw/element";

 import { isTextElement } from "@excalidraw/element";

 import { CaptureUpdateAction } from "@excalidraw/element";

-import type { ExcalidrawElement } from "@excalidraw/element/types";
-
 import { getSelectedElements } from "../scene";

 import { register } from "./register";

+import type { AppClassProperties } from "../types";
+
 export const actionTextAutoResize = register({
  name: "autoResize",
  label: "labels.autoResize",
  icon: null,
  trackEvent: { category: "element" },
-  predicate: (elements, appState, _: unknown) => {
+  predicate: (elements, appState, _: unknown, app: AppClassProperties) => {
    const selectedElements = getSelectedElements(elements, appState);
    return (
      selectedElements.length === 1 &&
@@ -26,18 +26,13 @@ export const actionTextAutoResize = register({
      !selectedElements[0].autoResize
    );
  },
-  perform: (elements, appState, targetElement) => {
+  perform: (elements, appState, _, app) => {
    const selectedElements = getSelectedElements(elements, appState);

-    const targetTextElement =
-      isExcalidrawElement(targetElement) && isTextElement(targetElement)
-        ? targetElement
-        : (selectedElements[0] as ExcalidrawElement | undefined);
-
    return {
      appState,
      elements: elements.map((element) => {
-        if (element.id === targetTextElement?.id && isTextElement(element)) {
+        if (element.id === selectedElements[0].id && isTextElement(element)) {
          const metrics = measureText(
            element.originalText,
            getFontString(element),
@@ -13,7 +13,6 @@ export {
  actionChangeStrokeWidth,
  actionChangeFillStyle,
  actionChangeSloppiness,
-  actionChangeFreedrawMode,
  actionChangeOpacity,
  actionChangeFontSize,
  actionChangeFontFamily,
@@ -35,7 +34,6 @@ export {
 export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";

 export { actionFinalize } from "./actionFinalize";
-export { actionDeselect } from "./actionDeselect";

 export {
  actionChangeProjectName,
@@ -68,7 +68,6 @@ export type ActionName =
  | "changeStrokeWidth"
  | "changeStrokeShape"
  | "changeSloppiness"
-  | "changeFreedrawMode"
  | "changeStrokeStyle"
  | "changeArrowhead"
  | "changeArrowType"
@@ -115,7 +114,6 @@ export type ActionName =
  | "distributeVertically"
  | "flipHorizontal"
  | "flipVertical"
-  | "deselect"
  | "viewMode"
  | "exportWithDarkMode"
  | "toggleTheme"
@@ -1,4 +1,5 @@
 import { LaserPointer } from "@excalidraw/laser-pointer";
+
 import {
  SVG_NS,
  getSvgPathFromStroke,
@@ -7,8 +8,7 @@ import {

 import type { LaserPointerOptions } from "@excalidraw/laser-pointer";

-import { AnimationController } from "./renderer/animation";
-
+import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 import type { AppState } from "./types";

@@ -34,16 +34,15 @@ export class AnimatedTrail implements Trail {
  private container?: SVGSVGElement;
  private trailElement: SVGPathElement;
  private trailAnimation?: SVGAnimateElement;
-  private key: string;
-
-  private static counter = 0;

  constructor(
+    private animationFrameHandler: AnimationFrameHandler,
    protected app: App,
    private options: Partial<LaserPointerOptions> &
      Partial<AnimatedTrailOptions>,
  ) {
-    this.key = `animated-trail-${AnimatedTrail.counter++}`;
+    this.animationFrameHandler.register(this, this.onFrame.bind(this));
+
    this.trailElement = document.createElementNS(SVG_NS, "path");
    if (this.options.animateTrail) {
      this.trailAnimation = document.createElementNS(SVG_NS, "animate");
@@ -74,15 +73,6 @@ export class AnimatedTrail implements Trail {
    return false;
  }

-  private cleanup() {
-    this.pastTrails = [];
-    this.currentTrail = undefined;
-
-    if (this.trailElement.parentNode === this.container) {
-      this.container?.removeChild(this.trailElement);
-    }
-  }
-
  start(container?: SVGSVGElement) {
    if (container) {
      this.container = container;
@@ -92,23 +82,15 @@ export class AnimatedTrail implements Trail {
      this.container.appendChild(this.trailElement);
    }

-    if (!AnimationController.running(this.key)) {
-      AnimationController.start(this.key, () => {
-        const needsNext = this.onFrame();
-        if (needsNext) {
-          return { keep: true };
-        }
-
-        this.cleanup();
-
-        return null;
-      });
-    }
+    this.animationFrameHandler.start(this);
  }

  stop() {
-    AnimationController.cancel(this.key);
-    this.cleanup();
+    this.animationFrameHandler.stop(this);
+
+    if (this.trailElement.parentNode === this.container) {
+      this.container?.removeChild(this.trailElement);
+    }
  }

  startPath(x: number, y: number) {
@@ -163,25 +145,21 @@ export class AnimatedTrail implements Trail {

    if (this.currentTrail) {
      const currentPath = this.drawTrail(this.currentTrail, this.app.state);
+
      paths.push(currentPath);
    }

-    this.pastTrails = this.pastTrails.filter(
-      (t) =>
-        t.getStrokeOutline(t.options.size / this.app.state.zoom.value)
-          .length !== 0,
-    );
+    this.pastTrails = this.pastTrails.filter((trail) => {
+      return trail.getStrokeOutline().length !== 0;
+    });

    if (paths.length === 0) {
-      // Clean up the SVG path if there are no trails to render
-      this.trailElement.setAttribute("d", "");
-
-      return false;
+      this.stop();
    }

    const svgPaths = paths.join(" ").trim();
-    this.trailElement.setAttribute("d", svgPaths);

+    this.trailElement.setAttribute("d", svgPaths);
    if (this.trailAnimation) {
      this.trailElement.setAttribute(
        "fill",
@@ -197,8 +175,6 @@ export class AnimatedTrail implements Trail {
        (this.options.fill ?? (() => "black"))(this),
      );
    }
-
-    return true;
  }

  private drawTrail(trail: LaserPointer, state: AppState): string {
@@ -0,0 +1,79 @@
+export type AnimationCallback = (timestamp: number) => void | boolean;
+
+export type AnimationTarget = {
+  callback: AnimationCallback;
+  stopped: boolean;
+};
+
+export class AnimationFrameHandler {
+  private targets = new WeakMap<object, AnimationTarget>();
+  private rafIds = new WeakMap<object, number>();
+
+  register(key: object, callback: AnimationCallback) {
+    this.targets.set(key, { callback, stopped: true });
+  }
+
+  start(key: object) {
+    const target = this.targets.get(key);
+
+    if (!target) {
+      return;
+    }
+
+    if (this.rafIds.has(key)) {
+      return;
+    }
+
+    this.targets.set(key, { ...target, stopped: false });
+    this.scheduleFrame(key);
+  }
+
+  stop(key: object) {
+    const target = this.targets.get(key);
+    if (target && !target.stopped) {
+      this.targets.set(key, { ...target, stopped: true });
+    }
+
+    this.cancelFrame(key);
+  }
+
+  private constructFrame(key: object): FrameRequestCallback {
+    return (timestamp: number) => {
+      const target = this.targets.get(key);
+
+      if (!target) {
+        return;
+      }
+
+      const shouldAbort = this.onFrame(target, timestamp);
+
+      if (!target.stopped && !shouldAbort) {
+        this.scheduleFrame(key);
+      } else {
+        this.cancelFrame(key);
+      }
+    };
+  }
+
+  private scheduleFrame(key: object) {
+    const rafId = requestAnimationFrame(this.constructFrame(key));
+
+    this.rafIds.set(key, rafId);
+  }
+
+  private cancelFrame(key: object) {
+    if (this.rafIds.has(key)) {
+      const rafId = this.rafIds.get(key)!;
+
+      cancelAnimationFrame(rafId);
+    }
+
+    this.rafIds.delete(key);
+  }
+
+  private onFrame(target: AnimationTarget, timestamp: number): boolean {
+    const shouldAbort = target.callback(timestamp);
+
+    return shouldAbort ?? false;
+  }
+}
@@ -4,7 +4,6 @@ import {
  DEFAULT_ELEMENT_PROPS,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
-  DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
  DEFAULT_TEXT_ALIGN,
  DEFAULT_GRID_SIZE,
  EXPORT_SCALES,
@@ -35,13 +34,12 @@ export const getDefaultAppState = (): Omit<
    currentItemFontSize: DEFAULT_FONT_SIZE,
    currentItemOpacity: DEFAULT_ELEMENT_PROPS.opacity,
    currentItemRoughness: DEFAULT_ELEMENT_PROPS.roughness,
-    currentItemStrokeVariability: "constant",
    currentItemStartArrowhead: null,
    currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
    currentItemRoundness: isTestEnv() ? "sharp" : "round",
    currentItemArrowType: ARROW_TYPE.round,
    currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
-    currentItemStrokeWidthKey: DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
+    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
    currentItemTextAlign: DEFAULT_TEXT_ALIGN,
    currentHoveredFontFamily: null,
    cursorButton: "up",
@@ -101,6 +99,7 @@ export const getDefaultAppState = (): Omit<
      open: false,
      panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
    },
+    startBoundElement: null,
    suggestedBinding: null,
    frameRendering: { enabled: true, clip: true, name: true, outline: true },
    frameToHighlight: null,
@@ -129,7 +128,6 @@ export const getDefaultAppState = (): Omit<
    lockedMultiSelections: {},
    activeLockedId: null,
    bindMode: "orbit",
-    boxSelectionMode: "contain",
  };
 };

@@ -169,15 +167,10 @@ const APP_STATE_STORAGE_CONF = (<
  },
  currentItemOpacity: { browser: true, export: false, server: false },
  currentItemRoughness: { browser: true, export: false, server: false },
-  currentItemStrokeVariability: {
-    browser: true,
-    export: false,
-    server: false,
-  },
  currentItemStartArrowhead: { browser: true, export: false, server: false },
  currentItemStrokeColor: { browser: true, export: false, server: false },
  currentItemStrokeStyle: { browser: true, export: false, server: false },
-  currentItemStrokeWidthKey: { browser: true, export: false, server: false },
+  currentItemStrokeWidth: { browser: true, export: false, server: false },
  currentItemTextAlign: { browser: true, export: false, server: false },
  currentHoveredFontFamily: { browser: false, export: false, server: false },
  cursorButton: { browser: true, export: false, server: false },
@@ -200,7 +193,6 @@ const APP_STATE_STORAGE_CONF = (<
  gridModeEnabled: { browser: true, export: true, server: true },
  height: { browser: false, export: false, server: false },
  isBindingEnabled: { browser: true, export: false, server: false },
-  boxSelectionMode: { browser: true, export: false, server: false },
  bindingPreference: { browser: true, export: false, server: false },
  isMidpointSnappingEnabled: { browser: true, export: false, server: false },
  defaultSidebarDockedPreference: {
@@ -237,6 +229,7 @@ const APP_STATE_STORAGE_CONF = (<
  selectionElement: { browser: false, export: false, server: false },
  shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
  stats: { browser: true, export: false, server: false },
+  startBoundElement: { browser: false, export: false, server: false },
  suggestedBinding: { browser: false, export: false, server: false },
  frameRendering: { browser: false, export: false, server: false },
  frameToHighlight: { browser: false, export: false, server: false },
@@ -41,7 +41,6 @@ import {
  canHaveArrowheads,
  getTargetElements,
  hasBackground,
-  hasFreedrawMode,
  hasStrokeStyle,
  hasStrokeWidth,
 } from "../scene";
@@ -202,9 +201,9 @@ export const SelectedShapeActions = ({
        targetElements.some((element) => hasStrokeWidth(element.type))) &&
        renderAction("changeStrokeWidth")}

-      {(hasFreedrawMode(appState.activeTool.type) ||
-        targetElements.some((element) => hasFreedrawMode(element.type))) &&
-        renderAction("changeFreedrawMode")}
+      {(appState.activeTool.type === "freedraw" ||
+        targetElements.some((element) => element.type === "freedraw")) &&
+        renderAction("changeStrokeShape")}

      {(hasStrokeStyle(appState.activeTool.type) ||
        targetElements.some((element) => hasStrokeStyle(element.type))) && (
@@ -395,17 +394,6 @@ const CombinedShapeProperties = ({
                  hasStrokeWidth(element.type),
                )) &&
                renderAction("changeStrokeWidth")}
-              {
-                /* in compact UI the freedraw pressure setting is rendered as a
-                  standalone cycle button in the compact actions list; we render
-                  it in the combined properties popup as well for clarity
-                */
-                (hasFreedrawMode(appState.activeTool.type) ||
-                  targetElements.some((element) =>
-                    hasFreedrawMode(element.type),
-                  )) &&
-                  renderAction("changeFreedrawMode")
-              }
              {(hasStrokeStyle(appState.activeTool.type) ||
                targetElements.some((element) =>
                  hasStrokeStyle(element.type),
@@ -838,14 +826,6 @@ export const CompactShapeActions = ({
        </div>
      )}

-      {/* Freedraw pressure: standalone button cycling the variability mode */}
-      {(hasFreedrawMode(appState.activeTool.type) ||
-        targetElements.some((element) => hasFreedrawMode(element.type))) && (
-        <div className="compact-action-item">
-          {renderAction("changeFreedrawMode", { cycle: true })}
-        </div>
-      )}
-
      <CombinedShapeProperties
        appState={appState}
        renderAction={renderAction}
@@ -1074,11 +1054,6 @@ export const ShapesSwitcher = ({
  const isFullStylesPanel = stylesPanelMode === "full";
  const isCompactStylesPanel = stylesPanelMode === "compact";

-  // a pen detected on a tool button's pointer-down, to be applied (enabling
-  // pen mode) only after the tap's `change` has committed — see the tool
-  // button handlers below
-  const pendingPenDetectionRef = useRef(false);
-
  const SELECTION_TOOLS = [
    {
      type: "selection",
@@ -1177,13 +1152,8 @@ export const ShapesSwitcher = ({
              aria-keyshortcuts={shortcut}
              data-testid={`toolbar-${value}`}
              onPointerDown={({ pointerType }) => {
-                // Detect the pen here (pointerType is reliable on pointer-down)
-                // but DON'T enable pen mode yet: calling setState mid-gesture
-                // re-renders the controlled radio and, on iOS/iPadOS, aborts
-                // the ensuing click so the tool isn't selected on the first pen
-                // tap. Defer it until the tap's `change` has committed (below).
                if (!app.state.penDetected && pointerType === "pen") {
-                  pendingPenDetectionRef.current = true;
+                  app.togglePenMode(true);
                }

                if (value === "selection") {
@@ -1194,21 +1164,16 @@ export const ShapesSwitcher = ({
                  }
                }
              }}
-              onChange={() => {
+              onChange={({ pointerType }) => {
                if (app.state.activeTool.type !== value) {
                  trackEvent("toolbar", value, "ui");
                }
-                app.setActiveTool({ type: value });
-
-                // Apply the pen detection captured on pointer-down now that the
-                // tool is selected. rAF keeps the resulting re-render out of the
-                // `change` event itself. We rely on the pointer-down detection
-                // rather than this handler's pointerType because the latter is
-                // unreliable on iOS (its backing ref is cleared before the
-                // delayed click fires).
-                if (pendingPenDetectionRef.current) {
-                  pendingPenDetectionRef.current = false;
-                  requestAnimationFrame(() => app.togglePenMode(true));
+                if (value === "image") {
+                  app.setActiveTool({
+                    type: value,
+                  });
+                } else {
+                  app.setActiveTool({ type: value });
                }
              }}
            />
@@ -19,7 +19,6 @@ import {
  actionClearCanvas,
  actionLink,
  actionToggleSearchMenu,
-  actionToggleTheme,
 } from "../../actions";
 import {
  actionCopyElementLink,
@@ -425,7 +424,6 @@ function CommandPaletteInner({
      ];

      const additionalCommands: CommandPaletteItem[] = [
-        actionToCommand(actionToggleTheme, DEFAULT_CATEGORIES.app),
        {
          label: t("toolBar.library"),
          category: DEFAULT_CATEGORIES.app,
@@ -1 +1,12 @@
-export {};
+import { actionToggleTheme } from "../../actions";
+
+import type { CommandPaletteItem } from "./types";
+
+export const toggleTheme: CommandPaletteItem = {
+  ...actionToggleTheme,
+  category: "App",
+  label: "Toggle theme",
+  perform: ({ actionManager }) => {
+    actionManager.executeAction(actionToggleTheme, "commandPalette");
+  },
+};
@@ -831,13 +831,14 @@ const convertElementType = <
      newElement({
        ...element,
        type: targetType,
-        roundness: element.roundness
-          ? {
-              type: isUsingAdaptiveRadius(targetType)
-                ? ROUNDNESS.ADAPTIVE_RADIUS
-                : ROUNDNESS.PROPORTIONAL_RADIUS,
-            }
-          : element.roundness,
+        roundness:
+          targetType === "diamond" && element.roundness
+            ? {
+                type: isUsingAdaptiveRadius(targetType)
+                  ? ROUNDNESS.ADAPTIVE_RADIUS
+                  : ROUNDNESS.PROPORTIONAL_RADIUS,
+              }
+            : element.roundness,
      }),
    ) as typeof element;

@@ -46,7 +46,6 @@ import {
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";

 import type { JSX } from "react";
-import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";

 export interface FontDescriptor {
  value: number;
@@ -87,15 +86,6 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
  }
 };

-const getFontFamilyLabel = (
-  fontFamily: FontFamilyValues,
-  fontFaces: ExcalidrawFontFace[],
-) =>
-  // prefer our config as the browser resolved names may be wrapped in quotes and such
-  Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
-  fontFaces[0]?.fontFace?.family ??
-  "Unknown";
-
 export const FontPickerList = React.memo(
  ({
    selectedFontFamily,
@@ -124,7 +114,7 @@ export const FontPickerList = React.memo(
            const fontDescriptor = {
              value: familyId,
              icon: getFontFamilyIcon(familyId),
-              text: getFontFamilyLabel(familyId, fontFaces),
+              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
            };

            if (metadata.deprecated) {
@@ -4,13 +4,11 @@ import { isDarwin, isFirefox, isWindows } from "@excalidraw/common";

 import { KEYS } from "@excalidraw/common";

-import { actionToggleTheme } from "../actions";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { t } from "../i18n";
 import { getShortcutKey } from "../shortcut";

-import { useExcalidrawActionManager } from "./App";
 import { Dialog } from "./Dialog";
 import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";

@@ -126,7 +124,6 @@ const ShortcutKey = (props: { children: React.ReactNode }) => (
 );

 export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
-  const actionManager = useExcalidrawActionManager();
  const handleClose = React.useCallback(() => {
    if (onClose) {
      onClose();
@@ -305,12 +302,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("labels.viewMode")}
              shortcuts={[getShortcutKey("Alt+R")]}
            />
-            {actionManager.isActionEnabled(actionToggleTheme) && (
-              <Shortcut
-                label={t("labels.toggleTheme")}
-                shortcuts={[getShortcutKey("Alt+Shift+D")]}
-              />
-            )}
+            <Shortcut
+              label={t("labels.toggleTheme")}
+              shortcuts={[getShortcutKey("Alt+Shift+D")]}
+            />
            <Shortcut
              label={t("stats.fullTitle")}
              shortcuts={[getShortcutKey("Alt+/")]}
@@ -6,20 +6,14 @@
    padding: 0.5rem;
    background: var(--popup-bg-color);
    border: 0 solid color.adjust(#fff, $alpha: -0.75);
-    box-shadow: var(--shadow-island-stronger);
+    box-shadow: var(--shadow-island);
    border-radius: 4px;
+    position: absolute;
    :root[dir="rtl"] & {
      padding: 0.4rem;
    }
  }

-  .picker-sections,
-  .picker-section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
  .picker-container button,
  .picker button {
    position: relative;
@@ -68,13 +62,7 @@

  .picker-collapsible {
    font-size: 0.75rem;
-    padding: 0;
-    color: var(--text-primary-color);
-  }
-
-  .picker-section-label {
-    font-size: 0.75rem;
-    color: var(--text-primary-color);
+    padding: 0.5rem 0;
  }

  .picker-keybinding {
@@ -1,6 +1,6 @@
 import { Popover } from "radix-ui";
 import clsx from "clsx";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";

 import { isArrowKey, KEYS } from "@excalidraw/common";

@@ -8,15 +8,13 @@ import { atom, useAtom } from "../editor-jotai";
 import { getLanguage, t } from "../i18n";

 import Collapsible from "./Stats/Collapsible";
-import { useExcalidrawContainer } from "./App";
+import { useEditorInterface, useExcalidrawContainer } from "./App";

 import "./IconPicker.scss";

 import type { JSX } from "react";

 const moreOptionsAtom = atom(false);
-const PICKER_COLUMNS = 4;
-const DEFAULT_SECTION_NAME = "default";

 type Option<T> = {
  value: T;
@@ -25,73 +23,28 @@ type Option<T> = {
  keyBinding: string | null;
 };

-type PickerSection<T> = {
-  name: string;
-  options: readonly Option<T>[];
-};
-
-const flattenOptions = <T,>(sections: readonly PickerSection<T>[]) =>
-  sections.flatMap((section) => section.options);
-
-const findOption = <T,>(
-  sections: readonly PickerSection<T>[],
-  predicate: (option: Option<T>) => boolean,
-) => {
-  for (const section of sections) {
-    const option = section.options.find(predicate);
-    if (option) {
-      return option;
-    }
-  }
-
-  return null;
-};
-
-const hasOption = <T,>(
-  sections: readonly PickerSection<T>[],
-  predicate: (option: Option<T>) => boolean,
-) => sections.some((section) => section.options.some(predicate));
-
-const getNavigationRows = <T,>(sections: readonly PickerSection<T>[]) =>
-  sections.flatMap((section) =>
-    Array.from(
-      { length: Math.ceil(section.options.length / PICKER_COLUMNS) },
-      (_, index) =>
-        section.options.slice(
-          index * PICKER_COLUMNS,
-          index * PICKER_COLUMNS + PICKER_COLUMNS,
-        ),
-    ),
-  );
-
 function Picker<T>({
-  visibleSections,
-  hiddenSections = [],
+  options,
  value,
  label,
  onChange,
  onClose,
+  numberOfOptionsToAlwaysShow = options.length,
 }: {
  label: string;
  value: T;
-  visibleSections: readonly PickerSection<T>[];
-  hiddenSections?: readonly PickerSection<T>[];
+  options: readonly Option<T>[];
  onChange: (value: T) => void;
  onClose: () => void;
+  numberOfOptionsToAlwaysShow?: number;
 }) {
+  const editorInterface = useEditorInterface();
  const { container } = useExcalidrawContainer();
-  const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
-  const allSections = [...visibleSections, ...hiddenSections];
-  const allOptions = flattenOptions(allSections);
-  const navigationRows = getNavigationRows([
-    ...visibleSections,
-    ...(showMoreOptions ? hiddenSections : []),
-  ]);

  const handleKeyDown = (event: React.KeyboardEvent) => {
-    const pressedOption = allOptions.find(
+    const pressedOption = options.find(
      (option) => option.keyBinding === event.key.toLowerCase(),
-    );
+    )!;

    if (!(event.metaKey || event.altKey || event.ctrlKey) && pressedOption) {
      // Keybinding navigation
@@ -99,17 +52,17 @@ function Picker<T>({

      event.preventDefault();
    } else if (event.key === KEYS.TAB) {
-      const index = allOptions.findIndex((option) => option.value === value);
+      const index = options.findIndex((option) => option.value === value);
      const nextIndex = event.shiftKey
-        ? (allOptions.length + index - 1) % allOptions.length
-        : (index + 1) % allOptions.length;
-      onChange(allOptions[nextIndex].value);
+        ? (options.length + index - 1) % options.length
+        : (index + 1) % options.length;
+      onChange(options[nextIndex].value);
    } else if (isArrowKey(event.key)) {
      // Arrow navigation
      const isRTL = getLanguage().rtl;
-      const index = allOptions.findIndex((option) => option.value === value);
+      const index = options.findIndex((option) => option.value === value);
      if (index !== -1) {
-        const length = allOptions.length;
+        const length = options.length;
        let nextIndex = index;

        switch (event.key) {
@@ -123,60 +76,18 @@ function Picker<T>({
            break;
          // Go the next row
          case KEYS.ARROW_DOWN: {
-            const currentRowIndex = navigationRows.findIndex((row) =>
-              row.some((option) => option.value === value),
-            );
-            const currentRow = navigationRows[currentRowIndex];
-
-            if (currentRowIndex !== -1 && currentRow) {
-              const column = currentRow.findIndex(
-                (option) => option.value === value,
-              );
-              const nextRow =
-                navigationRows[(currentRowIndex + 1) % navigationRows.length];
-              const nextOption =
-                nextRow[Math.min(column, nextRow.length - 1)] ??
-                allOptions[index];
-
-              onChange(nextOption.value);
-              event.preventDefault();
-              event.nativeEvent.stopImmediatePropagation();
-              event.stopPropagation();
-              return;
-            }
+            nextIndex = (index + (numberOfOptionsToAlwaysShow ?? 1)) % length;
            break;
          }
          // Go the previous row
          case KEYS.ARROW_UP: {
-            const currentRowIndex = navigationRows.findIndex((row) =>
-              row.some((option) => option.value === value),
-            );
-            const currentRow = navigationRows[currentRowIndex];
-
-            if (currentRowIndex !== -1 && currentRow) {
-              const column = currentRow.findIndex(
-                (option) => option.value === value,
-              );
-              const previousRow =
-                navigationRows[
-                  (navigationRows.length + currentRowIndex - 1) %
-                    navigationRows.length
-                ];
-              const previousOption =
-                previousRow[Math.min(column, previousRow.length - 1)] ??
-                allOptions[index];
-
-              onChange(previousOption.value);
-              event.preventDefault();
-              event.nativeEvent.stopImmediatePropagation();
-              event.stopPropagation();
-              return;
-            }
+            nextIndex =
+              (length + index - (numberOfOptionsToAlwaysShow ?? 1)) % length;
            break;
          }
        }

-        onChange(allOptions[nextIndex].value);
+        onChange(options[nextIndex].value);
      }
      event.preventDefault();
    } else if (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) {
@@ -188,29 +99,38 @@ function Picker<T>({
    event.stopPropagation();
  };

+  const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
+
+  const alwaysVisibleOptions = React.useMemo(
+    () => options.slice(0, numberOfOptionsToAlwaysShow),
+    [options, numberOfOptionsToAlwaysShow],
+  );
+  const moreOptions = React.useMemo(
+    () => options.slice(numberOfOptionsToAlwaysShow),
+    [options, numberOfOptionsToAlwaysShow],
+  );
+
  useEffect(() => {
-    if (hasOption(hiddenSections, (option) => option.value === value)) {
+    if (!alwaysVisibleOptions.some((option) => option.value === value)) {
      setShowMoreOptions(true);
    }
-  }, [value, hiddenSections, setShowMoreOptions]);
+  }, [value, alwaysVisibleOptions, setShowMoreOptions]);

-  const renderOptions = (options: readonly Option<T>[]) => {
+  const renderOptions = (options: Option<T>[]) => {
    return (
      <div className="picker-content">
-        {options.map((option) => (
+        {options.map((option, i) => (
          <button
            type="button"
            className={clsx("picker-option", {
              active: value === option.value,
            })}
-            onClick={() => {
+            onClick={(event) => {
              onChange(option.value);
            }}
-            title={
-              option.keyBinding
-                ? `${option.text} — ${option.keyBinding.toUpperCase()}`
-                : option.text
-            }
+            title={`${option.text} ${
+              option.keyBinding && `— ${option.keyBinding.toUpperCase()}`
+            }`}
            aria-label={option.text || "none"}
            aria-keyshortcuts={option.keyBinding || undefined}
            key={option.text}
@@ -233,38 +153,26 @@ function Picker<T>({
    );
  };

-  const renderSections = (sections: readonly PickerSection<T>[]) =>
-    sections.map((section, index) =>
-      section.name === DEFAULT_SECTION_NAME ? (
-        <React.Fragment key={`${section.name}-${index}`}>
-          {renderOptions(section.options)}
-        </React.Fragment>
-      ) : (
-        <div className="picker-section" key={`${section.name}-${index}`}>
-          <div className="picker-section-label">{section.name}</div>
-          {renderOptions(section.options)}
-        </div>
-      ),
-    );
+  const isMobile = editorInterface.formFactor === "phone";

  return (
    <Popover.Content
-      className="picker"
-      role="dialog"
-      aria-modal="true"
-      aria-label={label}
-      side={"bottom"}
+      side={isMobile ? "right" : "bottom"}
      align="start"
-      sideOffset={12}
-      alignOffset={12}
+      sideOffset={isMobile ? 8 : 12}
      style={{ zIndex: "var(--zIndex-ui-styles-popup)" }}
      onKeyDown={handleKeyDown}
      collisionBoundary={container ?? undefined}
    >
-      <div className="picker-sections">
-        {renderSections(visibleSections)}
+      <div
+        className={`picker`}
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+      >
+        {renderOptions(alwaysVisibleOptions)}

-        {hiddenSections.length > 0 && (
+        {moreOptions.length > 0 && (
          <Collapsible
            label={t("labels.more_options")}
            open={showMoreOptions}
@@ -273,9 +181,7 @@ function Picker<T>({
            }}
            className="picker-collapsible"
          >
-            <div className="picker-sections">
-              {renderSections(hiddenSections)}
-            </div>
+            {renderOptions(moreOptions)}
          </Collapsible>
        )}
      </div>
@@ -286,45 +192,49 @@ function Picker<T>({
 export function IconPicker<T>({
  value,
  label,
-  visibleSections,
-  hiddenSections,
+  options,
  onChange,
+  group = "",
+  numberOfOptionsToAlwaysShow,
 }: {
  label: string;
  value: T;
-  visibleSections: readonly PickerSection<T>[];
-  hiddenSections?: readonly PickerSection<T>[];
+  options: readonly {
+    value: T;
+    text: string;
+    icon: JSX.Element;
+    keyBinding: string | null;
+  }[];
  onChange: (value: T) => void;
+  numberOfOptionsToAlwaysShow?: number;
+  group?: string;
 }) {
  const [isActive, setActive] = React.useState(false);
-  const selectedOption = useMemo(
-    () =>
-      findOption(visibleSections, (option) => option.value === value) ??
-      findOption(hiddenSections ?? [], (option) => option.value === value),
-    [visibleSections, hiddenSections, value],
-  );
+  const rPickerButton = React.useRef<any>(null);

  return (
    <div>
      <Popover.Root open={isActive} onOpenChange={(open) => setActive(open)}>
        <Popover.Trigger
+          name={group}
          type="button"
          aria-label={label}
          onClick={() => setActive(!isActive)}
+          ref={rPickerButton}
          className={isActive ? "active" : ""}
        >
-          {selectedOption?.icon}
+          {options.find((option) => option.value === value)?.icon}
        </Popover.Trigger>
        {isActive && (
          <Picker
-            visibleSections={visibleSections}
-            hiddenSections={hiddenSections}
+            options={options}
            value={value}
            label={label}
            onChange={onChange}
            onClose={() => {
              setActive(false);
            }}
+            numberOfOptionsToAlwaysShow={numberOfOptionsToAlwaysShow}
          />
        )}
      </Popover.Root>
@@ -7,6 +7,7 @@
    border-radius: var(--border-radius-lg);
    padding: calc(var(--padding) * var(--space-factor));
    position: relative;
+    transition: box-shadow 0.5s ease-in-out;

    &.zen-mode {
      box-shadow: none;
@@ -120,24 +120,6 @@
    }
  }

-  // on tablet, the pen mode button is rendered as a separate floating button
-  // below the compact actions menu (see LayerUI.tsx)
-  .App-menu_top__left > .ToolIcon__penMode {
-    justify-self: center;
-
-    .ToolIcon__icon {
-      width: var(--lg-button-size);
-      height: var(--lg-button-size);
-      background-color: var(--island-bg-color);
-      box-shadow: var(--shadow-island);
-    }
-
-    // no shadow while pen mode is active (the active fill is enough)
-    .ToolIcon_type_checkbox:checked + .ToolIcon__icon {
-      box-shadow: none;
-    }
-  }
-
  .disable-view-mode {
    display: flex;
    justify-content: center;
@@ -122,7 +122,7 @@ const DefaultMainMenu: React.FC<{
        <MainMenu.DefaultItems.Socials />
      </MainMenu.Group>
      <MainMenu.Separator />
-      <MainMenu.DefaultItems.ToggleTheme allowSystemTheme={false} />
+      <MainMenu.DefaultItems.ToggleTheme />
      <MainMenu.DefaultItems.ChangeCanvasBackground />
    </MainMenu>
  );
@@ -235,6 +235,8 @@ const LayerUI = ({
  );

  const renderSelectedShapeActions = () => {
+    const isCompactMode = isCompactStylesPanel;
+
    return (
      <Section
        heading="selectedShapeActions"
@@ -242,7 +244,7 @@ const LayerUI = ({
          "transition-left": appState.zenModeEnabled,
        })}
      >
-        {isCompactStylesPanel ? (
+        {isCompactMode ? (
          <Island
            className={clsx("compact-shape-actions-island")}
            padding={0}
@@ -310,23 +312,6 @@ const LayerUI = ({
            >
              {shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
            </div>
-            {/* in compact UI the pen mode button lives outside the toolbar, as
-                a separate floating button below the compact actions menu
-                (same as we render it on mobile); shown alongside the compact
-                actions island, i.e. when a drawing tool or elements are
-                selected */}
-            {isCompactStylesPanel &&
-              !appState.viewModeEnabled &&
-              shouldRenderSelectedShapeActions && (
-                <PenModeButton
-                  zenModeEnabled={appState.zenModeEnabled}
-                  checked={appState.penMode}
-                  onChange={() => onPenModeToggle(null)}
-                  title={t("toolBar.penMode")}
-                  isMobile
-                  penDetected={appState.penDetected}
-                />
-              )}
          </Stack.Col>
          {!appState.viewModeEnabled &&
            appState.openDialog?.name !== "elementLinkSelector" && (
@@ -358,18 +343,13 @@ const LayerUI = ({
                          />
                          {heading}
                          <Stack.Row gap={spacing.toolbarInnerRowGap}>
-                            {/* in compact UI the pen mode button is rendered
-                                as a separate floating button below the compact
-                                actions menu */}
-                            {!isCompactStylesPanel && (
-                              <PenModeButton
-                                zenModeEnabled={appState.zenModeEnabled}
-                                checked={appState.penMode}
-                                onChange={() => onPenModeToggle(null)}
-                                title={t("toolBar.penMode")}
-                                penDetected={appState.penDetected}
-                              />
-                            )}
+                            <PenModeButton
+                              zenModeEnabled={appState.zenModeEnabled}
+                              checked={appState.penMode}
+                              onChange={() => onPenModeToggle(null)}
+                              title={t("toolBar.penMode")}
+                              penDetected={appState.penDetected}
+                            />
                            <LockButton
                              checked={appState.activeTool.locked}
                              onChange={onLockToggle}
@@ -670,7 +650,8 @@ const LayerUI = ({
 };

 const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
-  const { cursorButton, scrollX, scrollY, ...ret } = appState;
+  const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
+    appState;
  return ret;
 };

@@ -199,7 +199,6 @@ export default function LibraryMenuItems({
            type: "everything",
            elements: item.elements,
            randomizeSeed: true,
-            preserveFrameChildrenOrder: true,
          }).duplicatedElements,
        };
      });
@@ -26,17 +26,13 @@
    background: var(--RadioGroup-background);
    border: 1px solid var(--RadioGroup-border);

-    gap: 2px;
-
    &__choice {
-      box-sizing: content-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
-      min-width: 20px;
+      width: 32px;
      height: 24px;
-      padding: 0 0.375rem;

      color: var(--RadioGroup-choice-color-off);
      background: var(--RadioGroup-choice-background-off);
@@ -51,11 +47,13 @@
      user-select: none;
      letter-spacing: 0.4px;

+      transition: all 75ms ease-out;
+
      &:hover {
        color: var(--RadioGroup-choice-color-off-hover);
      }

-      &:not(.active):active {
+      &:active {
        background: var(--RadioGroup-choice-background-off-active);
      }

@@ -1,78 +1,74 @@
 import React, { useEffect } from "react";

+import { t } from "../i18n";
+
 import "./Range.scss";

+import type { AppClassProperties } from "../types";
+
 export type RangeProps = {
-  label: React.ReactNode;
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  minLabel?: React.ReactNode;
-  hasCommonValue?: boolean;
+  updateData: (value: number) => void;
+  app: AppClassProperties;
  testId?: string;
 };

-export const Range = ({
-  label,
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 10,
-  minLabel = min,
-  hasCommonValue = true,
-  testId,
-}: RangeProps) => {
+export const Range = ({ updateData, app, testId }: RangeProps) => {
  const rangeRef = React.useRef<HTMLInputElement>(null);
  const valueRef = React.useRef<HTMLDivElement>(null);
+  const selectedElements = app.scene.getSelectedElements(app.state);
+  let hasCommonOpacity = true;
+  const firstElement = selectedElements.at(0);
+  const leastCommonOpacity = selectedElements.reduce((acc, element) => {
+    if (acc != null && acc !== element.opacity) {
+      hasCommonOpacity = false;
+    }
+    if (acc == null || acc > element.opacity) {
+      return element.opacity;
+    }
+    return acc;
+  }, firstElement?.opacity ?? null);
+
+  const value = leastCommonOpacity ?? app.state.currentItemOpacity;

  useEffect(() => {
    if (rangeRef.current && valueRef.current) {
      const rangeElement = rangeRef.current;
      const valueElement = valueRef.current;
      const inputWidth = rangeElement.offsetWidth;
-      const thumbWidth =
-        parseFloat(
-          getComputedStyle(rangeElement).getPropertyValue(
-            "--slider-thumb-size",
-          ),
-        ) || 16;
-      const progress = ((value - min) / (max - min || 1)) * 100;
+      const thumbWidth = 15; // 15 is the width of the thumb
      const position =
-        (progress / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
+        (value / 100) * (inputWidth - thumbWidth) + thumbWidth / 2;
      valueElement.style.left = `${position}px`;
-      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${progress}%, var(--button-bg) ${progress}%, var(--button-bg) 100%)`;
+      rangeElement.style.background = `linear-gradient(to right, var(--color-slider-track) 0%, var(--color-slider-track) ${value}%, var(--button-bg) ${value}%, var(--button-bg) 100%)`;
    }
-  }, [max, min, value]);
+  }, [value]);

  return (
    <label className="control-label">
-      {label}
+      {t("labels.opacity")}
      <div className="range-wrapper">
        <input
          style={{
-            ["--color-slider-track" as string]: hasCommonValue
+            ["--color-slider-track" as string]: hasCommonOpacity
              ? undefined
              : "var(--button-bg)",
          }}
          ref={rangeRef}
          type="range"
-          min={min}
-          max={max}
-          step={step}
+          min="0"
+          max="100"
+          step="10"
          onChange={(event) => {
-            onChange(+event.target.value);
+            updateData(+event.target.value);
          }}
          value={value}
          className="range-input"
          data-testid={testId}
        />
        <div className="value-bubble" ref={valueRef}>
-          {value !== min ? value : null}
+          {value !== 0 ? value : null}
        </div>
-        <div className="zero-label">{minLabel}</div>
+        <div className="zero-label">0</div>
      </div>
    </label>
  );
@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";

 import "./SVGLayer.scss";

-import type { Trail } from "../animatedTrail";
+import type { Trail } from "../animated-trail";

 type SVGLayerProps = {
  trails: Trail[];
@@ -206,6 +206,7 @@ const handleDimensionChange: DragInputCallbackType<
          scene.getElementsIncludingDeleted(),
          nextElementsInFrame,
          latestElement,
+          app,
        );

        scene.replaceAllElements(updatedElements);
@@ -301,6 +302,7 @@ const handleDragFinished: DragFinishedCallbackType = ({
      app.scene.getElementsIncludingDeleted(),
      nextElementsInFrame,
      latestElement,
+      app,
    );

    app.scene.replaceAllElements(updatedElements);
@@ -261,6 +261,7 @@ const handleDimensionChange: DragInputCallbackType<
              scene.getElementsIncludingDeleted(),
              nextElementsInFrame,
              latestElement,
+              app,
            );

            scene.replaceAllElements(updatedElements);
@@ -415,6 +416,7 @@ const handleDragFinished: DragFinishedCallbackType = ({
      app.scene.getElementsIncludingDeleted(),
      nextElementsInFrame,
      latestElement,
+      app,
    );

    app.scene.replaceAllElements(updatedElements);
--- a/Show More
+++ b/Show More