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

* fix(editor): align constant freedraw stroke width more with generic shapes * reduce streamline for non-mouse * do not change `currentItemStrokeVariability` unintentionally * render penMode button under compact styles panel on tablets * show stroke variability as standalone button in compact actions menu * improve toolbar clicking UX with pen * change streamline defaults * change to `variable` stroke if toggling penMode for the first time
fix(editor): Modern TS require imports from rootDir (#11552 )
2026-06-24 16:59:10 +02:00 · 2026-06-24 10:52:56 +00:00 · 2026-06-24 09:16:22 +02:00 · 2026-06-22 18:22:26 +02:00 · 2026-06-15 18:19:20 +02:00 · 2026-06-15 18:19:08 +02:00
98 changed files with 3552 additions and 3023 deletions
@@ -0,0 +1,7 @@
 # VITE_DEBUG_DOM
 #   When "true", testing-library failures (waitFor / getBy*) include the full
 #   serialized DOM in the error message. It's off by default because it's noisy.
 #
 #   Flip it to "true" (or use `VITE_DEBUG_DOM=true yarn test`) when you need to
 #   inspect the DOM of a failing test.
 VITE_DEBUG_DOM=false
@@ -22,7 +22,6 @@ import Trans from "@excalidraw/excalidraw/components/Trans";
 import {
  APP_NAME,
  EVENT,
  THEME,
  VERSION_TIMEOUT,
  debounce,
  getVersion,
@@ -136,7 +135,6 @@ import { useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
 import DebugCanvas, {
  ConsoleLogger,
  debugRenderer,
  isVisualDebuggerEnabled,
  loadSavedDebugState,
@@ -953,6 +951,7 @@ const ExcalidrawWrapper = () => {
        handleKeyboardGlobally={true}
        autoFocus={true}
        theme={editorTheme}
        onThemeChange={setAppTheme}
        renderTopRightUI={(isMobile) => {
          if (isMobile || !collabAPI || isCollabDisabled) {
            return null;
@@ -989,7 +988,6 @@ const ExcalidrawWrapper = () => {
          isCollaborating={isCollaborating}
          isCollabEnabled={!isCollabDisabled}
          theme={appTheme}
          setTheme={(theme) => setAppTheme(theme)}
          refresh={() => forceRefresh((prev) => !prev)}
        />
        <AppWelcomeScreen
@@ -1230,14 +1228,6 @@ const ExcalidrawWrapper = () => {
                }
              },
            },
            {
              ...CommandPalette.defaultItems.toggleTheme,
              perform: () => {
                setAppTheme(
                  editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK,
                );
              },
            },
            {
              label: t("labels.installPWA"),
              category: DEFAULT_CATEGORIES.app,
@@ -1262,7 +1252,6 @@ const ExcalidrawWrapper = () => {
            ref={debugCanvasRef}
          />
        )}
        {isVisualDebuggerEnabled() && <ConsoleLogger />}
      </Excalidraw>
    </div>
  );
@@ -42,7 +42,6 @@ export const STORAGE_KEYS = {
  LOCAL_STORAGE_COLLAB: "excalidraw-collab",
  LOCAL_STORAGE_THEME: "excalidraw-theme",
  LOCAL_STORAGE_DEBUG: "excalidraw-debug",
  LOCAL_STORAGE_DEBUG_CONSOLE: "excalidraw-debug-console",
  VERSION_DATA_STATE: "version-dataState",
  VERSION_FILES: "version-files",
@@ -355,8 +355,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
  };
  stopCollaboration = (keepRemoteState = true) => {
    this.broadcastElements.flush();
    this.broadcastElements.cancel();
    this.queueBroadcastAllElements.cancel();
    this.queueSaveToFirebase.cancel();
    this.loadImageFiles.cancel();
@@ -943,9 +941,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
    this.portal.broadcastIdleChange(userState);
  };
-  private _broadcastElements = (
+  broadcastElements = (elements: readonly OrderedExcalidrawElement[]) => {
    elements: readonly OrderedExcalidrawElement[],
  ) => {
    if (
      getSceneVersion(elements) >
      this.getLastBroadcastedOrReceivedSceneVersion()
@@ -956,13 +952,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
    }
  };
  broadcastElements = throttle(
    (elements: readonly OrderedExcalidrawElement[]) =>
      this._broadcastElements(elements),
    10,
    { leading: true, trailing: true },
  );
  syncElements = (elements: readonly OrderedExcalidrawElement[]) => {
    this.broadcastElements(elements);
    this.queueSaveToFirebase();
@@ -4,8 +4,7 @@ import {
  eyeIcon,
 } from "@excalidraw/excalidraw/components/icons";
 import { MainMenu } from "@excalidraw/excalidraw/index";
-import DropdownMenuItemCheckbox from "@excalidraw/excalidraw/components/dropdownMenu/DropdownMenuItemCheckbox";
+import React from "react";
 import React, { useState } from "react";
 import { isDevEnv } from "@excalidraw/common";
@@ -14,36 +13,13 @@ import type { Theme } from "@excalidraw/element/types";
 import { LanguageList } from "../app-language/LanguageList";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import {
+import { saveDebugState } from "./DebugCanvas";
  isVisualDebuggerEnabled,
  loadConsoleLoggerState,
  saveDebugState,
  setConsoleLoggerEnabled,
 } from "./DebugCanvas";
 const ConsoleLoggerToggle = () => {
  const [checked, setChecked] = useState(() => loadConsoleLoggerState());
  return (
    <DropdownMenuItemCheckbox
      checked={checked}
      onSelect={(event) => {
        const next = !checked;
        setChecked(next);
        setConsoleLoggerEnabled(next);
        event.preventDefault();
      }}
    >
      Show console log overlay
    </DropdownMenuItemCheckbox>
  );
 };
 export const AppMainMenu: React.FC<{
  onCollabDialogOpen: () => any;
  isCollaborating: boolean;
  isCollabEnabled: boolean;
  theme: Theme | "system";
  setTheme: (theme: Theme | "system") => void;
  refresh: () => void;
 }> = React.memo((props) => {
  return (
@@ -100,18 +76,8 @@ export const AppMainMenu: React.FC<{
        </MainMenu.Item>
      )}
      <MainMenu.Separator />
-      <MainMenu.DefaultItems.Preferences
+      <MainMenu.DefaultItems.Preferences />
-        additionalItems={
+      <MainMenu.DefaultItems.ToggleTheme allowSystemTheme theme={props.theme} />
          isDevEnv() && isVisualDebuggerEnabled() ? (
            <ConsoleLoggerToggle />
          ) : null
        }
      />
      <MainMenu.DefaultItems.ToggleTheme
        allowSystemTheme
        theme={props.theme}
        onSelect={props.setTheme}
      />
      <MainMenu.ItemCustom>
        <LanguageList style={{ width: "100%" }} />
      </MainMenu.ItemCustom>
@@ -9,7 +9,7 @@ import {
 } from "@excalidraw/excalidraw/renderer/helpers";
 import { type AppState } from "@excalidraw/excalidraw/types";
 import { arrayToMap, throttleRAF } from "@excalidraw/common";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback } from "react";
 import {
  getGlobalFixedPointForBindableElement,
@@ -435,34 +435,6 @@ export const loadSavedDebugState = () => {
 export const isVisualDebuggerEnabled = () =>
  Array.isArray(window.visualDebug?.data);
 export const loadConsoleLoggerState = (): boolean => {
  try {
    const raw = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_DEBUG_CONSOLE);
    if (raw !== null) {
      return JSON.parse(raw) === true;
    }
  } catch {}
  return false;
 };
 export const saveConsoleLoggerState = (enabled: boolean) => {
  try {
    localStorage.setItem(
      STORAGE_KEYS.LOCAL_STORAGE_DEBUG_CONSOLE,
      JSON.stringify(enabled),
    );
  } catch {}
 };
 const CONSOLE_LOGGER_TOGGLE_EVENT = "excalidraw-debug-console-toggle";
 export const setConsoleLoggerEnabled = (enabled: boolean) => {
  saveConsoleLoggerState(enabled);
  window.dispatchEvent(
    new CustomEvent<boolean>(CONSOLE_LOGGER_TOGGLE_EVENT, { detail: enabled }),
  );
 };
 export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
  const moveForward = useCallback(() => {
    if (
@@ -487,7 +459,6 @@ export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
  }, [onChange]);
  const reset = useCallback(() => {
    window.visualDebug!.currentFrame = undefined;
    _clearLogsCallback?.();
    onChange();
  }, [onChange]);
  const trashFrames = useCallback(() => {
@@ -495,7 +466,6 @@ export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
      window.visualDebug.currentFrame = undefined;
      window.visualDebug.data = [];
    }
    _clearLogsCallback?.();
    onChange();
  }, [onChange]);
@@ -593,181 +563,4 @@ const DebugCanvas = React.forwardRef<HTMLCanvasElement, DebugCanvasProps>(
  },
 );
 type LogLevel = "log" | "info" | "warn" | "error";
 interface LogEntry {
  id: number;
  level: LogLevel;
  message: string;
  timestamp: number;
 }
 const LOG_COLORS: Record<LogLevel, string> = {
  log: "rgba(220,220,220,0.9)",
  info: "rgba(100,180,255,0.9)",
  warn: "rgba(255,200,60,0.9)",
  error: "rgba(255,90,90,0.9)",
 };
 const MAX_LOGS = 500;
 let logIdCounter = 0;
 let _clearLogsCallback: (() => void) | null = null;
 export const ConsoleLogger = () => {
  const [enabled, setEnabled] = useState(() => loadConsoleLoggerState());
  const [logs, setLogs] = useState<LogEntry[]>([]);
  const logsRef = useRef<LogEntry[]>([]);
  const scrollRef = useRef<HTMLDivElement>(null);
  const dragState = useRef<{ startY: number; startScrollTop: number } | null>(
    null,
  );
  const isDragging = useRef(false);
  useEffect(() => {
    const handler = (e: Event) => {
      setEnabled((e as CustomEvent<boolean>).detail);
    };
    window.addEventListener(CONSOLE_LOGGER_TOGGLE_EVENT, handler);
    return () => {
      window.removeEventListener(CONSOLE_LOGGER_TOGGLE_EVENT, handler);
    };
  }, []);
  useEffect(() => {
    _clearLogsCallback = () => {
      logsRef.current = [];
      setLogs([]);
    };
    return () => {
      _clearLogsCallback = null;
    };
  }, []);
  useEffect(() => {
    const originals: Record<LogLevel, (...args: unknown[]) => void> = {
      // eslint-disable-next-line no-console
      log: console.log.bind(console),
      info: console.info.bind(console),
      warn: console.warn.bind(console),
      error: console.error.bind(console),
    };
    const patch = (level: LogLevel) => {
      // eslint-disable-next-line no-console
      console[level] = (...args: unknown[]) => {
        originals[level](...args);
        const message = args
          .map((a) =>
            typeof a === "object" ? JSON.stringify(a, null, 0) : String(a),
          )
          .join(" ");
        const entry: LogEntry = {
          id: ++logIdCounter,
          level,
          message,
          timestamp: Date.now(),
        };
        logsRef.current = [...logsRef.current, entry].slice(-MAX_LOGS);
        setLogs([...logsRef.current]);
        if (!isDragging.current && scrollRef.current) {
          scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
        }
      };
    };
    (["log", "info", "warn", "error"] as LogLevel[]).forEach(patch);
    return () => {
      (["log", "info", "warn", "error"] as LogLevel[]).forEach((level) => {
        // eslint-disable-next-line no-console
        console[level] = originals[level];
      });
    };
  }, []);
  const onPointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
    if (!scrollRef.current) {
      return;
    }
    dragState.current = {
      startY: e.clientY,
      startScrollTop: scrollRef.current.scrollTop,
    };
    scrollRef.current.setPointerCapture(e.pointerId);
    isDragging.current = true;
    e.preventDefault();
  }, []);
  const onPointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
    if (!dragState.current || !scrollRef.current) {
      return;
    }
    const delta = dragState.current.startY - e.clientY;
    scrollRef.current.scrollTop = dragState.current.startScrollTop + delta;
    e.preventDefault();
  }, []);
  const onPointerUp = useCallback(() => {
    dragState.current = null;
    isDragging.current = false;
  }, []);
  if (!enabled || logs.length === 0) {
    return null;
  }
  return (
    <div
      ref={scrollRef}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerCancel={onPointerUp}
      style={{
        position: "fixed",
        top: 8,
        right: 8,
        zIndex: 9999,
        maxWidth: 420,
        maxHeight: "60vh",
        overflowY: "auto",
        display: "flex",
        flexDirection: "column",
        gap: 2,
        pointerEvents: "all",
        cursor: "grab",
        userSelect: "none",
        scrollbarWidth: "none",
      }}
    >
      {logs.map((entry) => (
        <div
          key={entry.id}
          style={{
            background: "rgba(18,18,20,0.55)",
            backdropFilter: "blur(8px) saturate(1.4)",
            WebkitBackdropFilter: "blur(8px) saturate(1.4)",
            borderLeft: `3px solid ${LOG_COLORS[entry.level]}`,
            borderRadius: 4,
            padding: "2px 8px",
            fontFamily: "monospace",
            fontSize: 11,
            lineHeight: 1.5,
            color: LOG_COLORS[entry.level],
            wordBreak: "break-all",
            whiteSpace: "pre-wrap",
            opacity: 0.95,
            boxShadow: "0 1px 4px rgba(0,0,0,0.35)",
          }}
        >
          <span style={{ opacity: 0.5, marginRight: 6 }}>
            {entry.level.toUpperCase()}
          </span>
          {entry.message}
        </div>
      ))}
    </div>
  );
 };
 export default DebugCanvas;
@@ -1,5 +1,4 @@
 import { THEME } from "@excalidraw/excalidraw";
 import { EVENT, CODES, KEYS } from "@excalidraw/common";
 import { useEffect, useLayoutEffect, useState } from "react";
 import type { Theme } from "@excalidraw/element/types";
@@ -31,28 +30,10 @@ export const useHandleAppTheme = () => {
      mediaQuery?.addEventListener("change", handleChange);
    }
    const handleKeydown = (event: KeyboardEvent) => {
      if (
        !event[KEYS.CTRL_OR_CMD] &&
        event.altKey &&
        event.shiftKey &&
        event.code === CODES.D
      ) {
        event.preventDefault();
        event.stopImmediatePropagation();
        setAppTheme(editorTheme === THEME.DARK ? THEME.LIGHT : THEME.DARK);
      }
    };
    document.addEventListener(EVENT.KEYDOWN, handleKeydown, { capture: true });
    return () => {
      mediaQuery?.removeEventListener("change", handleChange);
      document.removeEventListener(EVENT.KEYDOWN, handleKeydown, {
        capture: true,
      });
    };
-  }, [appTheme, editorTheme, setAppTheme]);
+  }, [appTheme]);
  useLayoutEffect(() => {
    localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, appTheme);
@@ -82,6 +82,13 @@ export default defineConfig(({ mode }) => {
            "../packages/fractional-indexing/src/index.ts",
          ),
        },
        {
          find: /^@excalidraw\/laser-pointer$/,
          replacement: path.resolve(
            __dirname,
            "../packages/laser-pointer/src/index.ts",
          ),
        },
      ],
    },
    build: {
@@ -57,7 +57,8 @@
    "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:packages": "yarn build:common && yarn build:fractional-indexing && yarn build:math && yarn build:element && yarn build:excalidraw",
+    "build:laser-pointer": "yarn --cwd ./packages/laser-pointer build:esm",
    "build:packages": "yarn build:common && yarn build:fractional-indexing && yarn build:laser-pointer && yarn build:math && yarn build:element && yarn build:excalidraw",
    "build:version": "yarn --cwd ./excalidraw-app build:version",
    "build": "yarn --cwd ./excalidraw-app build",
    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
@@ -404,11 +404,47 @@ export const ROUGHNESS = {
  cartoonist: 2,
 } as const;
-export const STROKE_WIDTH = {
+export type StrokeWidthKey = "thin" | "medium" | "bold";
 export const STROKE_WIDTH_KEYS: readonly StrokeWidthKey[] = [
  "thin",
  "medium",
  "bold",
 ];
 export const STROKE_WIDTH: Readonly<
  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
 > = {
  thin: 1,
  medium: 2,
  bold: 4,
  extraBold: 8, // unused (may be introduced in the future)
 };
 // freedraw schema 2.0 uses thinner stroke, but to maintain backwards and
 // forwards compatibility, instead of changing the shape renderer, we scale
 // the stroke width by 1/2 (previous, thin was 1, medium 2 etc.)
 //
 // note that in the UI, STROKE_WIDTH.thin == FREEDRAW_STROKE_WIDTH.thin still
 export const FREEDRAW_STROKE_WIDTH: Readonly<
  Record<StrokeWidthKey | "extraBold", ExcalidrawElement["strokeWidth"]>
 > = {
  thin: 0.5,
  medium: 1,
  bold: 2,
-  extraBold: 4,
+  extraBold: 4, // legacy (may be used again in the future)
-} as const;
+};
 export const getStrokeWidthByKey = (
  elementType: ExcalidrawElement["type"],
  strokeWidthKey: StrokeWidthKey,
 ): ExcalidrawElement["strokeWidth"] => {
  return elementType === "freedraw"
    ? FREEDRAW_STROKE_WIDTH[strokeWidthKey]
    : STROKE_WIDTH[strokeWidthKey];
 };
 export const DEFAULT_ELEMENT_STROKE_WIDTH_KEY: StrokeWidthKey = "medium";
 export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: ExcalidrawElement["strokeColor"];
@@ -423,7 +459,7 @@ export const DEFAULT_ELEMENT_PROPS: {
  strokeColor: COLOR_PALETTE.black,
  backgroundColor: COLOR_PALETTE.transparent,
  fillStyle: "solid",
-  strokeWidth: 2,
+  strokeWidth: STROKE_WIDTH[DEFAULT_ELEMENT_STROKE_WIDTH_KEY],
  strokeStyle: "solid",
  roughness: ROUGHNESS.artist,
  opacity: 100,
@@ -514,3 +550,6 @@ export const BIND_MODE_TIMEOUT = 700; // ms
 export const MOBILE_ACTION_BUTTON_BG = {
  background: "var(--mobile-action-button-bg)",
 } as const;
 export const DEFAULT_STROKE_STREAMLINE = 0.5;
 export const DEFAULT_STROKE_STREAMLINE_PRECISE = 0.2;
@@ -0,0 +1,109 @@
 import { BinaryHeap } from "../src/binary-heap";
 describe("BinaryHeap", () => {
  const numberHeap = () => new BinaryHeap<number>((n) => n);
  const drain = (heap: BinaryHeap<number>) => {
    const out: number[] = [];
    while (heap.size() > 0) {
      out.push(heap.pop()!);
    }
    return out;
  };
  describe("empty heap", () => {
    it("has size 0", () => {
      expect(numberHeap().size()).toBe(0);
    });
    it("pop() returns null", () => {
      expect(numberHeap().pop()).toBe(null);
    });
    it("remove() is a no-op and does not throw", () => {
      const heap = numberHeap();
      expect(() => heap.remove(1)).not.toThrow();
      expect(heap.size()).toBe(0);
    });
  });
  describe("push / pop", () => {
    it("tracks size as items are added and removed", () => {
      const heap = numberHeap();
      [3, 1, 2].forEach((n) => heap.push(n));
      expect(heap.size()).toBe(3);
      heap.pop();
      expect(heap.size()).toBe(2);
    });
    it("pops a single pushed element back out", () => {
      const heap = numberHeap();
      heap.push(42);
      expect(heap.pop()).toBe(42);
      expect(heap.pop()).toBe(null);
    });
    it("always pops the smallest score first", () => {
      const heap = numberHeap();
      [5, 3, 8, 1, 9, 2, 7].forEach((n) => heap.push(n));
      expect(drain(heap)).toEqual([1, 2, 3, 5, 7, 8, 9]);
    });
    it("handles duplicate scores", () => {
      const heap = numberHeap();
      [4, 1, 4, 1, 2].forEach((n) => heap.push(n));
      expect(drain(heap)).toEqual([1, 1, 2, 4, 4]);
    });
    it("maintains the heap invariant for a large adversarial (reverse-sorted) input", () => {
      const heap = numberHeap();
      // pushing in descending order forces a sift-up on every insert
      const input = Array.from({ length: 1000 }, (_, i) => 1000 - i);
      input.forEach((n) => heap.push(n));
      expect(drain(heap)).toEqual([...input].sort((a, b) => a - b));
    });
  });
  describe("remove", () => {
    it("removes an interior element and keeps the rest ordered", () => {
      const heap = numberHeap();
      [5, 3, 8, 1, 9].forEach((n) => heap.push(n));
      heap.remove(8);
      expect(heap.size()).toBe(4);
      expect(drain(heap)).toEqual([1, 3, 5, 9]);
    });
    it("can remove the current minimum", () => {
      const heap = numberHeap();
      [5, 3, 8, 1, 9].forEach((n) => heap.push(n));
      heap.remove(1);
      expect(heap.size()).toBe(4);
      expect(heap.pop()).toBe(3);
    });
  });
  describe("rescoreElement", () => {
    type Node = { id: string; f: number };
    it("re-sorts a node after its score is lowered", () => {
      const heap = new BinaryHeap<Node>((node) => node.f);
      const a = { id: "a", f: 10 };
      const b = { id: "b", f: 20 };
      const c = { id: "c", f: 30 };
      [a, b, c].forEach((node) => heap.push(node));
      c.f = 5;
      heap.rescoreElement(c);
      expect(heap.pop()).toBe(c);
      expect(heap.pop()).toBe(a);
      expect(heap.pop()).toBe(b);
    });
  });
 });
@@ -1,7 +1,8 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
-    "outDir": "./dist/types"
+    "outDir": "./dist/types",
    "rootDir": "../"
  },
  "include": ["src/**/*", "global.d.ts"],
  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
@@ -643,10 +643,13 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
  let start: BindingStrategy = { mode: undefined };
  let end: BindingStrategy = { mode: undefined };
-  invariant(
+  if (arrow.points.length < 2) {
-    arrow.points.length > 1,
+    console.error(
-    "Do not attempt to bind linear elements with a single point",
+      "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 } };
  }
  // If none of the ends are dragged, we don't change anything
  if (!startDragged && !endDragged) {
@@ -890,10 +893,13 @@ const getBindingStrategyForDraggingBindingElementEndpoints_complex = (
  let start: BindingStrategy = { mode: undefined };
  let end: BindingStrategy = { mode: undefined };
-  invariant(
+  if (arrow.points.length < 2) {
-    arrow.points.length > 1,
+    console.error(
-    "Do not attempt to bind linear elements with a single point",
+      "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 } };
  }
  // If none of the ends are dragged, we don't change anything
  if (!startDragged && !endDragged) {
@@ -1,5 +1,4 @@
 import rough from "roughjs/bin/rough";
 import {
  arrayToMap,
  type Bounds,
@@ -7,7 +6,6 @@ import {
  rescalePoints,
  sizeOf,
 } from "@excalidraw/common";
 import {
  degreesToRadians,
  lineSegment,
@@ -16,9 +14,7 @@ import {
  pointFromArray,
  pointRotateRads,
 } from "@excalidraw/math";
 import { getCurvePathOps } from "@excalidraw/utils/shape";
 import { pointsOnBezierCurves } from "points-on-curve";
 import type {
@@ -29,9 +25,7 @@ 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";
@@ -41,18 +35,20 @@ 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";
@@ -67,6 +63,7 @@ import type {
  ExcalidrawRectanguloidElement,
  ExcalidrawTextElementWithContainer,
  NonDeleted,
  NonDeletedExcalidrawElement,
 } from "./types";
 export type RectangleBox = {
@@ -1295,6 +1292,295 @@ export const boundsContainBounds = (outerBounds: Bounds, innerBounds: Bounds) =>
    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,
@@ -38,6 +38,8 @@ 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" ||
@@ -1,6 +1,9 @@
 import { arrayToMap } from "@excalidraw/common";
-import { isPointWithinBounds, pointFrom } from "@excalidraw/math";
+import {
-import { doLineSegmentsIntersect } from "@excalidraw/utils/bbox";
+  isPointWithinBounds,
  pointFrom,
  segmentsIntersectAt,
 } from "@excalidraw/math";
 import type {
  AppClassProperties,
@@ -78,7 +81,7 @@ export function isElementIntersectingFrame(
  const intersecting = frameLineSegments.some((frameLineSegment) =>
    elementLineSegments.some((elementLineSegment) =>
-      doLineSegmentsIntersect(frameLineSegment, elementLineSegment),
+      segmentsIntersectAt(frameLineSegment, elementLineSegment),
    ),
  );
@@ -566,10 +569,6 @@ export const addElementsToFrame = <T extends ElementsMapOrArray>(
      continue;
    }
    if (element.frameId && element.frameId !== frame.id) {
      continue;
    }
    finalElementsToAdd.add(element);
    const boundTextElement = getBoundTextElement(element, elementsMap);
@@ -81,7 +81,6 @@ export * from "./mutateElement";
 export * from "./newElement";
 export * from "./positionElementsOnGrid";
 export * from "./renderElement";
 export { invalidateFreeDrawIncrementalCanvas } from "./renderFreedraw";
 export * from "./resizeElements";
 export * from "./resizeTest";
 export * from "./Scene";
@@ -4,6 +4,7 @@ import {
  DEFAULT_FONT_SIZE,
  DEFAULT_TEXT_ALIGN,
  DEFAULT_VERTICAL_ALIGN,
  DEFAULT_STROKE_STREAMLINE,
  VERTICAL_ALIGN,
  randomInteger,
  randomId,
@@ -444,6 +445,7 @@ export const newFreeDrawElement = (
    type: "freedraw";
    points?: ExcalidrawFreeDrawElement["points"];
    simulatePressure: boolean;
    strokeOptions?: ExcalidrawFreeDrawElement["strokeOptions"];
    pressures?: ExcalidrawFreeDrawElement["pressures"];
  } & ElementConstructorOpts,
 ): NonDeleted<ExcalidrawFreeDrawElement> => {
@@ -452,6 +454,10 @@ export const newFreeDrawElement = (
    points: opts.points || [],
    pressures: opts.pressures || [],
    simulatePressure: opts.simulatePressure,
    strokeOptions: opts.strokeOptions ?? {
      variability: "variable",
      streamline: DEFAULT_STROKE_STREAMLINE,
    },
  };
 };
@@ -65,12 +65,8 @@ import {
 } from "./typeChecks";
 import { getContainingFrame } from "./frame";
 import { getCornerRadius } from "./utils";
 import { ShapeCache } from "./shape";
 import {
  drawFreeDrawSegments,
  generateOrUpdateFreeDrawIncrementalCanvas,
  getFreedrawCanvasPadding,
 } from "./renderFreedraw";
 import type {
  ExcalidrawElement,
@@ -96,7 +92,7 @@ const isPendingImageElement = (
 const getCanvasPadding = (element: ExcalidrawElement) => {
  switch (element.type) {
    case "freedraw":
-      return getFreedrawCanvasPadding(element);
+      return element.strokeWidth * 12;
    case "text":
      return element.fontSize / 2;
    case "arrow":
@@ -148,15 +144,6 @@ export interface ExcalidrawElementWithCanvas {
  imageCrop: ExcalidrawImageElement["crop"] | null;
  containingFrameOpacity: number;
  boundTextCanvas: HTMLCanvasElement;
  canvasOriginSceneX?: number;
  canvasOriginSceneY?: number;
  /**
   * Tip canvas for incremental freedraw rendering.  Contains only the last
   * unfinalised segment (whose Catmull-Rom right-hand tangent changes with
   * each new point) and is cleared + redrawn every frame.  Composited on top
   * of `canvas` (the committed accumulation canvas) in drawElementFromCanvas.
   */
  tipCanvas?: HTMLCanvasElement;
 }
 const cappedElementCanvasSize = (
@@ -266,7 +253,7 @@ const generateElementCanvas = (
  const rc = rough.canvas(canvas);
-  drawElementOnCanvas(element, rc, context, renderConfig, scale);
+  drawElementOnCanvas(element, rc, context, renderConfig);
  context.restore();
@@ -402,7 +389,6 @@ const drawElementOnCanvas = (
  rc: RoughCanvas,
  context: CanvasRenderingContext2D,
  renderConfig: StaticCanvasRenderConfig,
  scale = 1,
 ) => {
  switch (element.type) {
    case "rectangle":
@@ -429,8 +415,23 @@ const drawElementOnCanvas = (
      break;
    }
    case "freedraw": {
      // Draw directly to canvas
      context.save();
-      drawFreeDrawSegments(element, context, renderConfig, 0, undefined, scale);
+
      const shapes = ShapeCache.generateElementShape(element, renderConfig);
      for (const shape of shapes) {
        if (typeof shape === "string") {
          context.fillStyle = applyDarkModeFilter(
            element.strokeColor,
            renderConfig.theme === THEME.DARK,
          );
          context.fill(new Path2D(shape));
        } else {
          rc.draw(shape);
        }
      }
      context.restore();
      break;
    }
@@ -615,24 +616,6 @@ const generateElementWithCanvas = (
    : {
        value: 1 as NormalizedZoomValue,
      };
  // Incremental rendering path for freedraw elements being actively drawn.
  // ShapeCache.delete() clears elementWithCanvasCache on every added point, so
  // we bypass that cache entirely and use freedrawIncrementalCache instead.
  if (
    isFreeDrawElement(element) &&
    "newElement" in appState &&
    appState.newElement?.id === element.id
  ) {
    return generateOrUpdateFreeDrawIncrementalCanvas(
      element as ExcalidrawFreeDrawElement,
      elementsMap,
      zoom,
      renderConfig,
      appState,
    );
  }
  const prevElementWithCanvas = elementWithCanvasCache.get(element);
  const shouldRegenerateBecauseZoom =
    prevElementWithCanvas &&
@@ -735,39 +718,16 @@ const drawElementFromCanvas = (
    // revert afterwards we don't have account for it during drawing
    context.translate(-cx, -cy);
    // For the incremental freedraw path, the canvas origin is stored explicitly
    // because the canvas is over-allocated beyond the tight element bounds.
    const destX =
      elementWithCanvas.canvasOriginSceneX !== undefined
        ? (elementWithCanvas.canvasOriginSceneX + appState.scrollX) *
          window.devicePixelRatio
        : (x1 + appState.scrollX) * window.devicePixelRatio - padding;
    const destY =
      elementWithCanvas.canvasOriginSceneY !== undefined
        ? (elementWithCanvas.canvasOriginSceneY + appState.scrollY) *
          window.devicePixelRatio
        : (y1 + appState.scrollY) * window.devicePixelRatio - padding;
    context.drawImage(
      elementWithCanvas.canvas!,
-      destX,
+      (x1 + appState.scrollX) * window.devicePixelRatio -
-      destY,
+        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
      (y1 + appState.scrollY) * window.devicePixelRatio -
        (padding * elementWithCanvas.scale) / elementWithCanvas.scale,
      elementWithCanvas.canvas!.width / elementWithCanvas.scale,
      elementWithCanvas.canvas!.height / elementWithCanvas.scale,
    );
    // Composite the tip canvas (incremental freedraw path) on top.  It is
    // the same size and at the same scene origin as the committed canvas, so
    // it uses identical destX / destY / dimensions.
    if (elementWithCanvas.tipCanvas) {
      context.drawImage(
        elementWithCanvas.tipCanvas,
        destX,
        destY,
        elementWithCanvas.tipCanvas.width / elementWithCanvas.scale,
        elementWithCanvas.tipCanvas.height / elementWithCanvas.scale,
      );
    }
    if (
      import.meta.env.VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX ===
        "true" &&
@@ -907,14 +867,6 @@ export const renderElement = (
          return;
        }
        const currentImageSmoothingStatus = context.imageSmoothingEnabled;
        if (
          !appState?.shouldCacheIgnoreZoom &&
          (!element.angle || isRightAngleRads(element.angle))
        ) {
          context.imageSmoothingEnabled = false;
        }
        drawElementFromCanvas(
          elementWithCanvas,
          context,
@@ -922,8 +874,6 @@ export const renderElement = (
          appState,
          allElementsMap,
        );
        context.imageSmoothingEnabled = currentImageSmoothingStatus;
      }
      break;
@@ -939,8 +889,10 @@ export const renderElement = (
    case "embeddable": {
      if (renderConfig.isExporting) {
        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
-        const cx = (x1 + x2) / 2 + appState.scrollX;
+        const centerX = (x1 + x2) / 2;
-        const cy = (y1 + y2) / 2 + appState.scrollY;
+        const centerY = (y1 + y2) / 2;
        const cx = centerX + appState.scrollX;
        const cy = centerY + appState.scrollY;
        let shiftX = (x2 - x1) / 2 - (element.x - x1);
        let shiftY = (y2 - y1) / 2 - (element.y - y1);
        if (isTextElement(element)) {
@@ -962,64 +914,49 @@ export const renderElement = (
        const boundTextElement = getBoundTextElement(element, elementsMap);
        if (isArrowElement(element) && boundTextElement) {
-          const tempCanvas = document.createElement("canvas");
+          // Draw arrow directly as vector and clear label hole separately.
-
+          // This avoids temp-canvas bitmap blit which introduces resampling blur.
          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);
-          tempCanvasContext.rotate(element.angle);
+          context.save();
-          const tempRc = rough.canvas(tempCanvas);
+          context.rotate(element.angle);
          context.translate(-shiftX, -shiftY);
          drawElementOnCanvas(element, rc, context, renderConfig);
          context.restore();
          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 boundTextShiftX = (x1 + x2) / 2 - boundTextCx;
+          const holeX =
-          const boundTextShiftY = (y1 + y2) / 2 - boundTextCy;
+            boundTextCx -
-          tempCanvasContext.translate(-boundTextShiftX, -boundTextShiftY);
+            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;
-          // Clear the bound text area
+          const isTransparentHole =
-          tempCanvasContext.clearRect(
+            "viewBackgroundColor" in appState &&
-            -boundTextElement.width / 2,
+            (appState.viewBackgroundColor === "transparent" ||
-            -boundTextElement.height / 2,
+              !appState.viewBackgroundColor);
-            boundTextElement.width,
+          if (!isTransparentHole) {
-            boundTextElement.height,
+            context.save();
-          );
+            context.fillStyle = applyDarkModeFilter(
-          context.scale(1 / appState.exportScale, 1 / appState.exportScale);
+              renderConfig.canvasBackgroundColor,
-          context.drawImage(
+              renderConfig.theme === THEME.DARK,
-            tempCanvas,
+            );
-            -tempCanvas.width / 2,
+            context.fillRect(holeX, holeY, holeWidth, holeHeight);
-            -tempCanvas.height / 2,
+            context.restore();
-            tempCanvas.width,
+          } else {
-            tempCanvas.height,
+            context.clearRect(holeX, holeY, holeWidth, holeHeight);
-          );
+          }
        } else {
          context.rotate(element.angle);
@@ -1033,7 +970,7 @@ export const renderElement = (
        }
        context.restore();
-        // not exporting -> optimized rendering (cache & render from element
+        // not exporting → optimized rendering (cache & render from element
        // canvases)
      } else {
        const elementWithCanvas = generateElementWithCanvas(
@@ -1,549 +0,0 @@
 import { applyDarkModeFilter, THEME } from "@excalidraw/common";
 import type { StaticCanvasRenderConfig } from "@excalidraw/excalidraw/scene/types";
 import type {
  AppState,
  InteractiveCanvasAppState,
  StaticCanvasAppState,
  Zoom,
 } from "@excalidraw/excalidraw/types";
 import { getElementAbsoluteCoords } from "./bounds";
 import { getContainingFrame } from "./frame";
 import type { ExcalidrawElementWithCanvas } from "./renderElement";
 import type {
  ExcalidrawFreeDrawElement,
  NonDeletedSceneElementsMap,
 } from "./types";
 const DEFAULT_FREEDRAW_PRESSURE = 0.5;
 /**
 * Half-width (in samples) of the triangular smoothing kernel applied to raw
 * pressure values before computing stroke radii.  A radius of R means each
 * pressure sample is averaged with R neighbours on each side, weighted
 * linearly so the centre sample has weight R+1 and the outermost weight 1.
 * Larger values produce a smoother, more uniform stroke width.
 */
 const PRESSURE_SMOOTHING_RADIUS = 6;
 /**
 * Draws a single stroke segment primitive for the triplet (pPrev, pCur, pNext).
 *
 * The primitive is a closed quadrilateral with curved top and bottom edges:
 *   A        = midpoint(pPrev, pCur)  — left junction, shared with the previous primitive
 *   B        = midpoint(pCur, pNext)  — right junction, shared with the next primitive
 *   M'1/M'2  at A:    ±rA perpendicular to the pPrev→pCur direction
 *   M1/M2    at pCur: ±rCur along the bisector normal of the two edge directions
 *   M''1/M''2 at B:   ±rB perpendicular to the pCur→pNext direction
 *
 * Shape boundary (clockwise):
 *   M'1 →[quadratic Bezier through M1]→ M''1 →[line]→ M''2
 *       →[quadratic Bezier through M2]→  M'2  →[line]→  M'1
 *
 * Adjacent primitives share their junction points so the stroke outline is
 * geometrically continuous with no gaps or overlaps.
 */
 const drawStrokeSegment = (
  context: CanvasRenderingContext2D,
  pPrevX: number,
  pPrevY: number,
  rPrev: number,
  pCurX: number,
  pCurY: number,
  rCur: number,
  pNextX: number,
  pNextY: number,
  rNext: number,
 ) => {
  // A = midpoint(pPrev, pCur), B = midpoint(pCur, pNext)
  const ax = (pPrevX + pCurX) * 0.5;
  const ay = (pPrevY + pCurY) * 0.5;
  const rA = (rPrev + rCur) * 0.5;
  const bx = (pCurX + pNextX) * 0.5;
  const by = (pCurY + pNextY) * 0.5;
  const rB = (rCur + rNext) * 0.5;
  // Perpendicular unit vector at A (normal to pPrev→pCur)
  const daX = pCurX - pPrevX;
  const daY = pCurY - pPrevY;
  const daLenInv = 1 / (Math.sqrt(daX * daX + daY * daY) || 1e-10);
  const nAX = -daY * daLenInv;
  const nAY = daX * daLenInv;
  // Perpendicular unit vector at B (normal to pCur→pNext)
  const dbX = pNextX - pCurX;
  const dbY = pNextY - pCurY;
  const dbLenInv = 1 / (Math.sqrt(dbX * dbX + dbY * dbY) || 1e-10);
  const nBX = -dbY * dbLenInv;
  const nBY = dbX * dbLenInv;
  // Bisector normal at pCur: normalised average of nA and nB
  const bisRawX = nAX + nBX;
  const bisRawY = nAY + nBY;
  const bisLen = Math.sqrt(bisRawX * bisRawX + bisRawY * bisRawY);
  const bisNX = bisLen > 1e-10 ? bisRawX / bisLen : nAX;
  const bisNY = bisLen > 1e-10 ? bisRawY / bisLen : nAY;
  // M'1, M'2 at A
  const mp1x = ax + nAX * rA;
  const mp1y = ay + nAY * rA;
  const mp2x = ax - nAX * rA;
  const mp2y = ay - nAY * rA;
  // M1, M2 at pCur — used directly as the quadratic Bézier control points.
  // The junction points (M'1, M''1, etc.) are midpoints between consecutive
  // control points, which is the classic midpoint quadratic B-spline scheme.
  // This guarantees C1 continuity: the shared junction is always the midpoint
  // of the two flanking CPs, so the tangent is continuous across segments.
  const m1x = pCurX + bisNX * rCur;
  const m1y = pCurY + bisNY * rCur;
  const m2x = pCurX - bisNX * rCur;
  const m2y = pCurY - bisNY * rCur;
  // M''1, M''2 at B
  const mpp1x = bx + nBX * rB;
  const mpp1y = by + nBY * rB;
  const mpp2x = bx - nBX * rB;
  const mpp2y = by - nBY * rB;
  context.beginPath();
  context.moveTo(mp1x, mp1y);
  // Top edge: M'1 → M''1, control point = M1 (bisector offset at pCur)
  context.quadraticCurveTo(m1x, m1y, mpp1x, mpp1y);
  // Right cap: M''1 → M''2
  context.lineTo(mpp2x, mpp2y);
  // Bottom edge: M''2 → M'2, control point = M2
  context.quadraticCurveTo(m2x, m2y, mp2x, mp2y);
  // Left cap: M'2 → M'1
  context.closePath();
  context.fill();
  // Filled circles at the junction midpoints seal any sub-pixel anti-aliasing
  // gap where adjacent segment fills share a boundary edge.
  context.beginPath();
  context.arc(ax, ay, rA, 0, Math.PI * 2);
  context.fill();
  context.beginPath();
  context.arc(bx, by, rB, 0, Math.PI * 2);
  context.fill();
 };
 /**
 * Draws freedraw points as pressure-aware curved stroke segment primitives.
 * For each consecutive triplet of points (i-1, i, i+1) a curved quadrilateral
 * is drawn whose side edges sit at the midpoints of the consecutive point pairs
 * and whose top/bottom edges are quadratic Bezier curves passing through the
 * stroke-width offset at the centre point.  Adjacent primitives share their
 * side-edge positions, so the rendered outline is continuous with no gaps.
 *
 * @param fromIndex   Draw segments starting from this point index (inclusive).
 *                    Pass 0 to draw from the beginning.
 * @param upToIndex   Draw segments only up to (but not including) this point
 *                    index.  Omit or pass `undefined` to draw all remaining
 *                    points.  Used by the incremental canvas to stop short of
 *                    the last segment so the committed canvas only contains
 *                    segments whose geometry is fully determined by immutable
 *                    points.
 */
 export const drawFreeDrawSegments = (
  element: ExcalidrawFreeDrawElement,
  context: CanvasRenderingContext2D,
  renderConfig: StaticCanvasRenderConfig,
  fromIndex: number,
  upToIndex?: number,
  scale = 1,
 ) => {
  const { points, pressures } = element;
  const N = points.length;
  const strokeColor =
    renderConfig.theme === THEME.DARK
      ? applyDarkModeFilter(element.strokeColor)
      : element.strokeColor;
  context.fillStyle = applyDarkModeFilter(
    strokeColor,
    renderConfig.theme === THEME.DARK,
  );
  const baseRadius = (element.strokeWidth * 1.25) / 2;
  // Causal (one-sided) triangular-kernel weighted average of past pressure
  // samples.  Only looks backward [i-R .. i], so a newly-arrived point never
  // retroactively changes the smoothed pressure of any previously rendered
  // segment.  This ensures live and final renders are identical at all points.
  // When simulatePressure is true, constant pressure is used for all points.
  const getSmoothedPressure = (i: number): number => {
    if (element.simulatePressure || pressures.length === 0) {
      return DEFAULT_FREEDRAW_PRESSURE;
    }
    let sum = 0;
    let totalWeight = 0;
    for (let k = -PRESSURE_SMOOTHING_RADIUS; k <= 0; k++) {
      const idx = i + k;
      if (idx < 0) {
        continue;
      }
      const p =
        idx < pressures.length ? pressures[idx] : DEFAULT_FREEDRAW_PRESSURE;
      const w = PRESSURE_SMOOTHING_RADIUS + 1 + k; // 1 at i-R, R+1 at i
      sum += p * w;
      totalWeight += w;
    }
    return totalWeight > 0 ? sum / totalWeight : DEFAULT_FREEDRAW_PRESSURE;
  };
  if (
    fromIndex === 0 &&
    N === 1 &&
    (upToIndex === undefined || upToIndex >= 1)
  ) {
    // Single-point stroke -> filled circle (dot)
    const r = baseRadius * getSmoothedPressure(0) * 2;
    context.beginPath();
    context.arc(points[0][0], points[0][1], r, 0, Math.PI * 2);
    context.fill();
    return;
  }
  const end = upToIndex !== undefined ? Math.min(upToIndex, N) : N;
  const start = Math.max(fromIndex, 1);
  for (let i = start; i < end; i++) {
    const p0 = points[i - 1];
    const p1 = points[i];
    const r0 = baseRadius * getSmoothedPressure(i - 1) * 2;
    const r1 = baseRadius * getSmoothedPressure(i) * 2;
    // Triplet: need i+1; if at the last point, mirror i-1 around i (degenerate tip).
    let p2x: number;
    let p2y: number;
    let r2: number;
    if (i < N - 1) {
      p2x = points[i + 1][0];
      p2y = points[i + 1][1];
      r2 = baseRadius * getSmoothedPressure(i + 1) * 2;
    } else {
      p2x = 2 * p1[0] - p0[0];
      p2y = 2 * p1[1] - p0[1];
      r2 = r0;
    }
    drawStrokeSegment(
      context,
      p0[0],
      p0[1],
      r0,
      p1[0],
      p1[1],
      r1,
      p2x,
      p2y,
      r2,
    );
  }
 };
 // ─── Incremental freedraw canvas cache ───────────────────────────────────────
 // A separate WeakMap that survives ShapeCache.delete() calls so that the raster
 // accumulates new capsule segments without full regeneration on every added
 // point.
 // screen pixels - minimum extra lookahead space on each side
 // (divided by scale at use)
 const FREEDRAW_CANVAS_OVERSHOOT_MIN = 200;
 // allocate current_dimension * factor extra on each side
 const FREEDRAW_CANVAS_OVERSHOOT_FACTOR = 0.5;
 interface FreeDrawIncrementalCanvas {
  /**
   * Accumulation canvas - contains all segments whose Catmull-Rom tangents are
   * fully finalised (right-hand neighbour is known).  With N points the last
   * finalised segment ends at index `committedPointCount - 1`, meaning segment
   * `[committedPointCount-2 -> committedPointCount-1]` has been drawn with the
   * correct tangent at `committedPointCount-1` (since point
   * `committedPointCount` existed when it was drawn).  Never cleared; only
   * appended to (or copied when bounds grow).
   */
  committedCanvas: HTMLCanvasElement;
  /**
   * Tip canvas - same pixel dimensions and scene origin as `committedCanvas`.
   * Cleared and redrawn every frame to contain only the last segment
   * `[committedPointCount-1 -> N-1]` whose tangent at `N-1` is still
   * provisional (no right-hand neighbour yet).  Composited on top of
   * `committedCanvas` at display time.
   */
  tipCanvas: HTMLCanvasElement;
  /**
   * Number of points that have been permanently drawn on `committedCanvas`.
   * The committed canvas contains segments through point index
   * `committedPointCount - 1` with final tangents.  Always lags the current
   * point count by 1 (the tip holds the last unfinalisable segment).
   */
  committedPointCount: number;
  canvasOriginSceneX: number;
  canvasOriginSceneY: number;
  canvasAllocX1: number;
  canvasAllocY1: number;
  canvasAllocX2: number;
  canvasAllocY2: number;
  scale: number;
  theme: AppState["theme"];
 }
 const freedrawIncrementalCache = new WeakMap<
  ExcalidrawFreeDrawElement,
  FreeDrawIncrementalCanvas
 >();
 export const getFreedrawCanvasPadding = (element: ExcalidrawFreeDrawElement) =>
  element.strokeWidth * 12;
 /**
 * Generates or incrementally updates the two-canvas (committed + tip) raster
 * for a freedraw element being actively drawn.
 *
 * ## Two-canvas split
 *
 * A Catmull-Rom tangent at point `i` depends on `points[i+1]`.  Until
 * `points[i+1]` arrives, the tangent at `i` uses a mirrored fallback and is
 * therefore provisional.  The segment ending at the current tip `[N-2 -> N-1]`
 * is the only one with a provisional tangent.
 *
 * - **`committedCanvas`** - contains all segments whose tangents are final.
 *   With N points: segments `[0->1, ..., N-3->N-2]` (`committedPointCount =
 *   N-1`).  This canvas is append-only; its pixels are never invalidated.
 *   When a new point `N` arrives, the segment `[N-2 -> N-1]` is now
 *   finalised (tangent at `N-1` uses `N` as the right-hand neighbour) and is
 *   drawn onto the committed canvas.  `committedPointCount` advances to `N`.
 *
 * - **`tipCanvas`** - cleared and redrawn every frame to contain only the
 *   last provisional segment `[committedPointCount-1 -> N-1]`.  Composited on
 *   top of `committedCanvas` at display time.
 */
 export const generateOrUpdateFreeDrawIncrementalCanvas = (
  element: ExcalidrawFreeDrawElement,
  elementsMap: NonDeletedSceneElementsMap,
  zoom: Zoom,
  renderConfig: StaticCanvasRenderConfig,
  appState: StaticCanvasAppState | InteractiveCanvasAppState,
 ): ExcalidrawElementWithCanvas | null => {
  const scale = zoom.value;
  const dpr = window.devicePixelRatio;
  const padding = getFreedrawCanvasPadding(element);
  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
  const containingFrameOpacity =
    getContainingFrame(element, elementsMap)?.opacity || 100;
  const N = element.points.length;
  const prevInc = freedrawIncrementalCache.get(element);
  const boundsExceeded =
    prevInc !== undefined &&
    (x1 < prevInc.canvasAllocX1 ||
      y1 < prevInc.canvasAllocY1 ||
      x2 > prevInc.canvasAllocX2 ||
      y2 > prevInc.canvasAllocY2);
  const needsAlloc =
    prevInc === undefined ||
    boundsExceeded ||
    prevInc.scale !== scale ||
    prevInc.theme !== appState.theme;
  // ── Canvas allocation / reallocation ──────────────────────────────────────
  let committedCanvas: HTMLCanvasElement;
  let tipCanvas: HTMLCanvasElement;
  let canvasOriginSceneX: number;
  let canvasOriginSceneY: number;
  let canvasScale: number;
  // How many points to start the committed-canvas update from.  On a full
  // regen this is 0; on a bounds-exceeded realloc it is the existing committed
  // count so we only append the new segments.
  let committedFromIndex: number;
  if (needsAlloc) {
    // Over-allocate proportionally to the current bounding box so fast large
    // strokes trigger far fewer reallocations.
    const overshootX = Math.max(
      FREEDRAW_CANVAS_OVERSHOOT_MIN / scale,
      (x2 - x1) * FREEDRAW_CANVAS_OVERSHOOT_FACTOR,
    );
    const overshootY = Math.max(
      FREEDRAW_CANVAS_OVERSHOOT_MIN / scale,
      (y2 - y1) * FREEDRAW_CANVAS_OVERSHOOT_FACTOR,
    );
    const allocX1 = x1 - overshootX;
    const allocY1 = y1 - overshootY;
    const allocX2 = x2 + overshootX;
    const allocY2 = y2 + overshootY;
    canvasOriginSceneX = allocX1 - padding / dpr;
    canvasOriginSceneY = allocY1 - padding / dpr;
    const rawW = (allocX2 - allocX1) * dpr + padding * 2;
    const rawH = (allocY2 - allocY1) * dpr + padding * 2;
    // Respect browser canvas size limits.
    const AREA_LIMIT = 16777216;
    const WIDTH_HEIGHT_LIMIT = 32767;
    canvasScale = scale;
    if (
      rawW * canvasScale > WIDTH_HEIGHT_LIMIT ||
      rawH * canvasScale > WIDTH_HEIGHT_LIMIT
    ) {
      canvasScale = Math.min(
        WIDTH_HEIGHT_LIMIT / rawW,
        WIDTH_HEIGHT_LIMIT / rawH,
      );
    }
    if (rawW * rawH * canvasScale * canvasScale > AREA_LIMIT) {
      canvasScale = Math.sqrt(AREA_LIMIT / (rawW * rawH));
    }
    const canvasWidth = Math.floor(rawW * canvasScale);
    const canvasHeight = Math.floor(rawH * canvasScale);
    if (!canvasWidth || !canvasHeight) {
      return null;
    }
    committedCanvas = document.createElement("canvas");
    committedCanvas.width = canvasWidth;
    committedCanvas.height = canvasHeight;
    tipCanvas = document.createElement("canvas");
    tipCanvas.width = canvasWidth;
    tipCanvas.height = canvasHeight;
    if (
      prevInc !== undefined &&
      boundsExceeded &&
      prevInc.scale === canvasScale &&
      prevInc.theme === appState.theme
    ) {
      // Bounds grew: copy committed raster to new canvas at the correct offset
      // and keep accumulating.  Tip will be redrawn below.
      const copyX =
        (prevInc.canvasOriginSceneX - canvasOriginSceneX) * dpr * canvasScale;
      const copyY =
        (prevInc.canvasOriginSceneY - canvasOriginSceneY) * dpr * canvasScale;
      committedCanvas
        .getContext("2d")!
        .drawImage(prevInc.committedCanvas, copyX, copyY);
      committedFromIndex = prevInc.committedPointCount;
    } else {
      // Full regeneration: zoom/theme change or first frame.
      committedFromIndex = 0;
    }
    freedrawIncrementalCache.set(element, {
      committedCanvas,
      tipCanvas,
      committedPointCount: committedFromIndex,
      canvasOriginSceneX,
      canvasOriginSceneY,
      canvasAllocX1: allocX1,
      canvasAllocY1: allocY1,
      canvasAllocX2: allocX2,
      canvasAllocY2: allocY2,
      scale: canvasScale,
      theme: appState.theme,
    });
  } else {
    committedCanvas = prevInc.committedCanvas;
    tipCanvas = prevInc.tipCanvas;
    canvasOriginSceneX = prevInc.canvasOriginSceneX;
    canvasOriginSceneY = prevInc.canvasOriginSceneY;
    canvasScale = prevInc.scale;
    committedFromIndex = prevInc.committedPointCount;
  }
  const inc = freedrawIncrementalCache.get(element)!;
  // ── Helper: draw onto a canvas with the element's scene->pixel transform ──
  const withElementContext = (
    target: HTMLCanvasElement,
    fn: (ctx: CanvasRenderingContext2D) => void,
  ) => {
    const ctx = target.getContext("2d")!;
    const offsetX = (element.x - canvasOriginSceneX) * dpr * canvasScale;
    const offsetY = (element.y - canvasOriginSceneY) * dpr * canvasScale;
    ctx.save();
    ctx.translate(offsetX, offsetY);
    ctx.scale(dpr * canvasScale, dpr * canvasScale);
    fn(ctx);
    ctx.restore();
  };
  // ── Update committed canvas ───────────────────────────────────────────────
  // With N points the last finalisable segment ends at N-2 (needs N-1 as
  // right-hand neighbour for the tangent at N-2, and N-1 is always present).
  // We draw from `committedFromIndex` up to (but not including) point N-1,
  // so the committed canvas contains segments [0->1, ..., N-3->N-2].
  const newCommittedCount = Math.max(1, N - 1);
  if (committedFromIndex < newCommittedCount) {
    withElementContext(committedCanvas, (ctx) => {
      drawFreeDrawSegments(
        element,
        ctx,
        renderConfig,
        committedFromIndex,
        newCommittedCount, // upToIndex - stop before the last provisional segment
        canvasScale,
      );
    });
    inc.committedPointCount = newCommittedCount;
  }
  // ── Redraw tip canvas ─────────────────────────────────────────────────────
  // Always cleared and redrawn: contains the single provisional segment
  // [committedPointCount-1 -> N-1] with a predicted-point ghost if available.
  withElementContext(tipCanvas, (ctx) => {
    ctx.clearRect(
      -(element.x - canvasOriginSceneX),
      -(element.y - canvasOriginSceneY),
      tipCanvas.width / (dpr * canvasScale),
      tipCanvas.height / (dpr * canvasScale),
    );
    drawFreeDrawSegments(
      element,
      ctx,
      renderConfig,
      inc.committedPointCount,
      undefined, // draw to natural end (the tip segment)
      canvasScale,
    );
  });
  return {
    element,
    canvas: committedCanvas,
    tipCanvas,
    theme: appState.theme,
    scale: canvasScale,
    angle: element.angle,
    zoomValue: zoom.value,
    canvasOffsetX: 0,
    canvasOffsetY: 0,
    boundTextElementVersion: null,
    imageCrop: null,
    containingFrameOpacity,
    boundTextCanvas: document.createElement("canvas"),
    canvasOriginSceneX: inc.canvasOriginSceneX,
    canvasOriginSceneY: inc.canvasOriginSceneY,
  };
 };
 /**
 * Removes the incremental freedraw canvas for the given element.
 * Call this when a freedraw stroke is finalised so the next render
 * produces a fresh tight-bounds canvas instead of the over-allocated one.
 */
 export const invalidateFreeDrawIncrementalCanvas = (
  element: ExcalidrawFreeDrawElement,
 ) => {
  freedrawIncrementalCache.delete(element);
 };
@@ -1,10 +1,4 @@
 import { arrayToMap, isShallowEqual, type Bounds } from "@excalidraw/common";
 import {
  lineSegment,
  pointFrom,
  pointRotateRads,
  type GlobalPoint,
 } from "@excalidraw/math";
 import type {
  AppState,
@@ -12,33 +6,18 @@ import type {
  InteractiveCanvasAppState,
 } from "@excalidraw/excalidraw/types";
-import {
+import { elementsOverlappingBBox, getElementAbsoluteCoords } from "./bounds";
  boundsContainBounds,
  doBoundsIntersect,
  elementCenterPoint,
  getElementAbsoluteCoords,
  getElementBounds,
  pointInsideBounds,
 } from "./bounds";
 import { intersectElementWithLineSegment } from "./collision";
 import { isElementInViewport } from "./sizeHelpers";
 import {
  isArrowElement,
  isBoundToContainer,
  isFrameLikeElement,
  isFreeDrawElement,
  isLinearElement,
  isTextElement,
 } from "./typeChecks";
-import {
+import { getFrameChildren } from "./frame";
  elementOverlapsWithFrame,
  getContainingFrame,
  getFrameChildren,
 } from "./frame";
 import { LinearElementEditor } from "./linearElementEditor";
 import { selectGroupsForSelectedElements } from "./groups";
 import { getBoundTextElement } from "./textElement";
 import type {
  ElementsMap,
@@ -107,263 +86,15 @@ export const getElementsWithinSelection = (
    selectionX2,
    selectionY2,
  ] as Bounds;
  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
+  return elementsOverlappingBBox({
-    ? new Set<NonDeletedExcalidrawElement["id"]>()
+    elements,
-    : null;
+    bounds: selectionBounds,
-  const groups: Record<string, NonDeletedExcalidrawElement[]> = {};
+    elementsMap,
-  const elementsInSelection: Set<NonDeletedExcalidrawElement> = new Set();
+    type: boxSelectionMode,
-
+    shouldIgnoreElementFromSelection,
-  for (const element of elements) {
+    excludeElementsInFrames,
-    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 (
      boxSelectionMode === "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 (
      boxSelectionMode === "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 (boxSelectionMode === "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 (boxSelectionMode === "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 getVisibleAndNonSelectedElements = (
@@ -1,4 +1,6 @@
 import { simplify } from "points-on-curve";
 import { getStroke } from "perfect-freehand";
 import { LaserPointer } from "@excalidraw/laser-pointer";
 import {
  type GeometricShape,
@@ -23,16 +25,11 @@ import {
  COLOR_PALETTE,
  LINE_POLYGON_POINT_MERGE_DISTANCE,
  applyDarkModeFilter,
  DEFAULT_STROKE_STREAMLINE,
 } from "@excalidraw/common";
 import { RoughGenerator } from "roughjs/bin/generator";
 import type {
  ElementShape,
  ElementShapes,
  SVGPathString,
 } from "@excalidraw/excalidraw/scene/types";
 import type { GlobalPoint } from "@excalidraw/math";
 import type { Mutable } from "@excalidraw/common/utility-types";
@@ -41,6 +38,11 @@ import type {
  AppState,
  EmbedsValidationStatus,
 } from "@excalidraw/excalidraw/types";
 import type {
  ElementShape,
  ElementShapes,
  SVGPathString,
 } from "@excalidraw/excalidraw/scene/types";
 import { elementWithCanvasCache } from "./renderElement";
@@ -974,7 +976,7 @@ const _generateElementShape = (
      }
      // (2) stroke
-      shapes.push(...getFreeDrawCapsulePaths(element));
+      shapes.push(getFreeDrawSvgPath(element));
      return shapes;
    }
@@ -1164,351 +1166,124 @@ export const toggleLinePolygonState = (
 //                         freedraw shape helper
 // -----------------------------------------------------------------------------
-const FREEDRAW_DEFAULT_PRESSURE = 0.5;
+// NOTE not cached (-> for SVG export)
-const FREEDRAW_BEZIER_SUBDIVIDE_TARGET_SPACING = 3;
+const getFreeDrawSvgPath = (element: ExcalidrawFreeDrawElement) => {
-const FREEDRAW_PRESSURE_SMOOTHING_RADIUS = 6;
+  return getSvgPathFromStroke(
-
+    getFreedrawOutlinePoints(element),
-// Round to 2 dp — sub-pixel accuracy at SVG 96 dpi
+  ) as SVGPathString;
 const r2 = (v: number) => Math.round(v * 100) / 100;
 /**
 * SVG path `d` string for a single tapered capsule. Uses clockwise arcs
 * (sweep=1) so the geometry matches the canvas 2D
 * `arc(..., anticlockwise=false)` calls.
 */
 const freedrawTaperedCapsulePath = (
  x0: number,
  y0: number,
  r0: number,
  x1: number,
  y1: number,
  r1: number,
 ): string => {
  const dx = x1 - x0;
  const dy = y1 - y0;
  const len = Math.sqrt(dx * dx + dy * dy);
  const r = Math.max(r0, r1);
  if (len < r / 2) {
    // Degenerate — full circle at midpoint via two clockwise 180° arcs.
    const cx = r2((x0 + x1) / 2);
    const cy = r2((y0 + y1) / 2);
    const rr = r2(r);
    return (
      `M ${(cx - rr).toFixed(2)} ${cy.toFixed(2)} ` +
      `A ${rr} ${rr} 0 1 1 ${(cx + rr).toFixed(2)} ${cy.toFixed(2)} ` +
      `A ${rr} ${rr} 0 1 1 ${(cx - rr).toFixed(2)} ${cy.toFixed(2)} Z`
    );
  }
  const px = -dy / len; // perpendicular unit x
  const py = dx / len; // perpendicular unit y
  // P0 +/- perp·r0  (start / back cap tangent points)
  const b0x = r2(x0 + px * r0);
  const b0y = r2(y0 + py * r0);
  const b1x = r2(x0 - px * r0);
  const b1y = r2(y0 - py * r0);
  // P1 +/- perp·r1  (end / front cap tangent points)
  const f0x = r2(x1 - px * r1);
  const f0y = r2(y1 - py * r1);
  const f1x = r2(x1 + px * r1);
  const f1y = r2(y1 + py * r1);
  const rr0 = r2(r0);
  const rr1 = r2(r1);
  // Back cap: clockwise 180° arc from (b0) to (b1) around P0.
  // Front cap: clockwise 180° arc from (f0) to (f1) around P1.
  return (
    `M ${b0x.toFixed(2)} ${b0y.toFixed(2)} ` +
    `A ${rr0.toFixed(2)} ${rr0.toFixed(2)} 0 1 1 ${b1x.toFixed(
      2,
    )} ${b1y.toFixed(2)} ` +
    `L ${f0x.toFixed(2)} ${f0y.toFixed(2)} ` +
    `A ${rr1.toFixed(2)} ${rr1.toFixed(2)} 0 1 1 ${f1x.toFixed(
      2,
    )} ${f1y.toFixed(2)} Z`
  );
 };
 /**
- * Catmull-Rom tangent at points[i].Identical math to `getCatmullRomTangent`
+ * Freedraw stroke geometry tuning constants.
- * in renderElement.ts (predictedPoint is not needed for finalised strokes).
+ *
 * 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 freedrawCatmullRomTangent = (
+const VARIABLE_WIDTH_FREEDRAW = {
-  points: readonly (readonly [number, number])[],
+  /** Stroke size relative to `strokeWidth` for pressure-sensitive strokes. */
-  i: number,
+  SIZE_FACTOR: 4.25,
-): [number, number] => {
+  THINNING: 0.6,
-  const N = points.length;
+  SMOOTHING: 0.5,
-  const cur = points[i];
+} as const;
-  let next: readonly [number, number];
+const CONSTANT_WIDTH_FREEDRAW = {
-  if (i < N - 1) {
+  /** Stroke size relative to `strokeWidth` for uniform (laser) strokes. */
-    next = points[i + 1];
+  SIZE_FACTOR: 1.4,
-  } else {
+} as const;
    const prev2 = i > 0 ? points[i - 1] : cur;
    next = [2 * cur[0] - prev2[0], 2 * cur[1] - prev2[1]];
  }
-  let tx: number;
+const getFreedrawStreamline = (element: ExcalidrawFreeDrawElement) =>
-  let ty: number;
+  element.strokeOptions?.streamline ?? DEFAULT_STROKE_STREAMLINE;
  if (i === 0) {
    tx = (next[0] - cur[0]) * 0.5;
    ty = (next[1] - cur[1]) * 0.5;
  } else {
    const prev = points[i - 1];
    tx = (next[0] - prev[0]) * 0.5;
    ty = (next[1] - prev[1]) * 0.5;
  }
  // Chord-length clamping (PCHIP-style).
  const magSq = tx * tx + ty * ty;
  if (magSq > 0) {
    const dNx = next[0] - cur[0];
    const dNy = next[1] - cur[1];
    const chordNext = Math.sqrt(dNx * dNx + dNy * dNy);
    let chordPrev = chordNext;
    if (i > 0) {
      const prev = points[i - 1];
      const dPx = cur[0] - prev[0];
      const dPy = cur[1] - prev[1];
      chordPrev = Math.sqrt(dPx * dPx + dPy * dPy);
    }
    const maxMag = 3 * Math.min(chordNext, chordPrev);
    const mag = Math.sqrt(magSq);
    if (mag > maxMag) {
      const s = maxMag / mag;
      tx *= s;
      ty *= s;
    }
  }
  return [tx, ty];
 };
 /**
- * Triangular-kernel causal weighted pressure average (backward-only window).
+ * Pressure-sensitive (variable width) freedraw outline, rendered with
- * When `simulatePressure` is true or pressures array is empty, returns the
+ * perfect-freehand. This is the original Excalidraw freedraw look.
 * default constant pressure so the geometry mirrors constant-pressure rendering.
 */
-const getFreeDrawSmoothedPressure = (
+const getVariableWidthFreedrawOutline = (
  element: ExcalidrawFreeDrawElement,
-  i: number,
+): [number, number][] => {
-): number => {
+  // If input points are empty (should they ever be?) return a dot
-  const { pressures } = element;
+  const inputPoints = element.simulatePressure
-  if (element.simulatePressure || pressures.length === 0) {
+    ? element.points
-    return FREEDRAW_DEFAULT_PRESSURE;
+    : element.points.length
-  }
+    ? element.points.map(
-  let sum = 0;
+        ([x, y], i) => [x, y, element.pressures[i]] as [number, number, number],
-  let totalWeight = 0;
+      )
-  for (let k = -FREEDRAW_PRESSURE_SMOOTHING_RADIUS; k <= 0; k++) {
+    : [[0, 0, 0.5]];
-    const idx = i + k;
+
-    if (idx < 0) {
+  return getStroke(inputPoints as number[][], {
-      continue;
+    simulatePressure: element.simulatePressure,
-    }
+    size: element.strokeWidth * VARIABLE_WIDTH_FREEDRAW.SIZE_FACTOR,
-    const p =
+    thinning: VARIABLE_WIDTH_FREEDRAW.THINNING,
-      idx < pressures.length ? pressures[idx] : FREEDRAW_DEFAULT_PRESSURE;
+    smoothing: VARIABLE_WIDTH_FREEDRAW.SMOOTHING,
-    const w = FREEDRAW_PRESSURE_SMOOTHING_RADIUS + 1 + k;
+    streamline: getFreedrawStreamline(element),
-    sum += p * w;
+    easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
-    totalWeight += w;
+    last: true,
-  }
+  }) as [number, number][];
  return totalWeight > 0 ? sum / totalWeight : FREEDRAW_DEFAULT_PRESSURE;
 };
 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),
  });
 /**
- * Returns one SVG path `d` string per tapered-capsule sub-segment for a
+ * Uniform (constant width) freedraw outline, rendered with the laser-pointer
- * freedraw element, using the same Catmull-Rom Bezier subdivision and pressure
+ * geometry. Pressure is pinned to 1 so the stroke keeps a constant width.
 * smoothing as the canvas renderer.
 */
-const getFreeDrawCapsulePaths = (
+const getConstantWidthFreedrawOutline = (
  element: ExcalidrawFreeDrawElement,
-): SVGPathString[] => {
+): [number, number][] => {
-  const { points } = element;
+  const laserPointer = createLaserPointer(element);
-  const N = points.length;
+  element.points.map(([x, y]) => laserPointer.addPoint([x, y, 1]));
  const baseRadius = (element.strokeWidth * 1.25) / 2;
-  const getSmoothedPressure = (i: number): number =>
+  return laserPointer
-    getFreeDrawSmoothedPressure(element, i);
+    .getStrokeOutline()
-
+    .map(([x, y]) => [x, y] as [number, number]);
  const paths: SVGPathString[] = [];
  if (N === 1) {
    // Single-point stroke — filled circle.
    const rr = r2(baseRadius * getSmoothedPressure(0) * 2);
    const cx = r2(points[0][0]);
    const cy = r2(points[0][1]);
    paths.push(
      `M ${(cx - rr).toFixed(2)} ${cy.toFixed(2)} A ${rr} ${rr} 0 1 1 ${(
        cx + rr
      ).toFixed(2)} ${cy.toFixed(2)} A ${rr} ${rr} 0 1 1 ${(cx - rr).toFixed(
        2,
      )} ${cy.toFixed(2)} Z` as SVGPathString,
    );
    return paths;
  }
  for (let i = 1; i < N; i++) {
    const p0 = points[i - 1];
    const p1 = points[i];
    const r0 = baseRadius * getSmoothedPressure(i - 1) * 2;
    const r1 = baseRadius * getSmoothedPressure(i) * 2;
    const t0 = freedrawCatmullRomTangent(points, i - 1);
    const t1 = freedrawCatmullRomTangent(points, i);
    // Bezier subdivision.
    const segLen = Math.sqrt((p1[0] - p0[0]) ** 2 + (p1[1] - p0[1]) ** 2);
    const nSubdiv = Math.max(
      1,
      Math.ceil(segLen / FREEDRAW_BEZIER_SUBDIVIDE_TARGET_SPACING),
    );
    const cp1x = p0[0] + t0[0] / 3;
    const cp1y = p0[1] + t0[1] / 3;
    const cp2x = p1[0] - t1[0] / 3;
    const cp2y = p1[1] - t1[1] / 3;
    let prevX = p0[0];
    let prevY = p0[1];
    let prevR = r0;
    for (let k = 1; k <= nSubdiv; k++) {
      const t = k / nSubdiv;
      const mt = 1 - t;
      const mt2 = mt * mt;
      const t2 = t * t;
      const mt3 = mt2 * mt;
      const t3 = t2 * t;
      const x =
        mt3 * p0[0] + 3 * mt2 * t * cp1x + 3 * mt * t2 * cp2x + t3 * p1[0];
      const y =
        mt3 * p0[1] + 3 * mt2 * t * cp1y + 3 * mt * t2 * cp2y + t3 * p1[1];
      const r = r0 + (r1 - r0) * t;
      paths.push(
        freedrawTaperedCapsulePath(
          prevX,
          prevY,
          prevR,
          x,
          y,
          r,
        ) as SVGPathString,
      );
      prevX = x;
      prevY = y;
      prevR = r;
    }
  }
  return paths;
 };
 /**
 * Generates an outline polygon for a freedraw element using the same
 * Catmull-Rom Bezier subdivision and pressure smoothing as the canvas renderer.
 * Returns `[x, y]` points in element-local coordinates that form a closed
 * polygon around the stroke (left side + right side reversed), suitable for
 * hit-testing and eraser intersection.
 */
 export const getFreedrawOutlinePoints = (
  element: ExcalidrawFreeDrawElement,
 ): [number, number][] => {
-  const { points } = element;
+  // Unknown/absent variability falls back to the original variable rendering.
-  const N = points.length;
+  return element.strokeOptions?.variability === "constant"
-  const baseRadius = (element.strokeWidth * 1.25) / 2;
+    ? getConstantWidthFreedrawOutline(element)
    : getVariableWidthFreedrawOutline(element);
 };
-  if (N === 0) {
+const med = (A: number[], B: number[]) => {
-    return [];
+  return [(A[0] + B[0]) / 2, (A[1] + B[1]) / 2];
 };
 // Trim SVG path data so number are each two decimal points. This
 // improves SVG exports, and prevents rendering errors on points
 // with long decimals.
 const TO_FIXED_PRECISION = /(\s?[A-Z]?,?-?[0-9]*\.[0-9]{0,2})(([0-9]|e|-)*)/g;
 const getSvgPathFromStroke = (points: number[][]): string => {
  if (!points.length) {
    return "";
  }
-  const radius0 = baseRadius * getFreeDrawSmoothedPressure(element, 0) * 2;
+  const max = points.length - 1;
-  if (N === 1) {
+  return points
-    // Single point case
+    .reduce(
-    const cx = points[0][0];
+      (acc, point, i, arr) => {
-    const cy = points[0][1];
+        if (i === max) {
-    const result: [number, number][] = [];
+          acc.push(point, med(point, arr[0]), "L", arr[0], "Z");
-    for (let i = 0; i < 8; i++) {
+        } else {
-      const angle = (i / 8) * Math.PI * 2;
+          acc.push(point, med(point, arr[i + 1]));
-      result.push([
+        }
-        cx + Math.cos(angle) * radius0,
+        return acc;
-        cy + Math.sin(angle) * radius0,
+      },
-      ]);
+      ["M", points[0], "Q"],
-    }
+    )
-    return result;
+    .join(" ")
-  }
+    .replace(TO_FIXED_PRECISION, "$1");
  const leftPoints: [number, number][] = [];
  const rightPoints: [number, number][] = [];
  for (let i = 1; i < N; i++) {
    const p0 = points[i - 1];
    const p1 = points[i];
    const r0 = baseRadius * getFreeDrawSmoothedPressure(element, i - 1) * 2;
    const r1 = baseRadius * getFreeDrawSmoothedPressure(element, i) * 2;
    const t0 = freedrawCatmullRomTangent(points, i - 1);
    const t1 = freedrawCatmullRomTangent(points, i);
    const segLen = Math.sqrt((p1[0] - p0[0]) ** 2 + (p1[1] - p0[1]) ** 2);
    const nSubdiv = Math.max(
      1,
      Math.ceil(segLen / FREEDRAW_BEZIER_SUBDIVIDE_TARGET_SPACING),
    );
    const cp1x = p0[0] + t0[0] / 3;
    const cp1y = p0[1] + t0[1] / 3;
    const cp2x = p1[0] - t1[0] / 3;
    const cp2y = p1[1] - t1[1] / 3;
    // Include the start point of the first segment.
    const kStart = i === 1 ? 0 : 1;
    for (let k = kStart; k <= nSubdiv; k++) {
      const tParam = k / nSubdiv;
      const mt = 1 - tParam;
      const mt2 = mt * mt;
      const t2 = tParam * tParam;
      const mt3 = mt2 * mt;
      const t3 = t2 * tParam;
      const x =
        mt3 * p0[0] + 3 * mt2 * tParam * cp1x + 3 * mt * t2 * cp2x + t3 * p1[0];
      const y =
        mt3 * p0[1] + 3 * mt2 * tParam * cp1y + 3 * mt * t2 * cp2y + t3 * p1[1];
      // Bezier first derivative for the tangent direction.
      const dtx =
        3 *
        (mt2 * (cp1x - p0[0]) +
          2 * mt * tParam * (cp2x - cp1x) +
          t2 * (p1[0] - cp2x));
      const dty =
        3 *
        (mt2 * (cp1y - p0[1]) +
          2 * mt * tParam * (cp2y - cp1y) +
          t2 * (p1[1] - cp2y));
      const len = Math.sqrt(dtx * dtx + dty * dty);
      if (len === 0) {
        continue;
      }
      // Perpendicular (left = +, right = −).
      const px = -dty / len;
      const py = dtx / len;
      const r = r0 + (r1 - r0) * tParam;
      leftPoints.push([x + px * r, y + py * r]);
      rightPoints.push([x - px * r, y - py * r]);
    }
  }
  // Closed polygon: left side (start -> end) + right side (end -> start).
  return [...leftPoints, ...rightPoints.reverse()];
 };
 // -----------------------------------------------------------------------------
@@ -384,12 +384,20 @@ 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" };
@@ -5,6 +5,7 @@ import {
  pointFrom,
  type GlobalPoint,
  type LocalPoint,
  type LineSegment,
 } from "@excalidraw/math";
 import { type Bounds, isBounds } from "@excalidraw/common";
 import {
@@ -17,7 +18,6 @@ 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,5 +1,7 @@
 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";
@@ -313,12 +315,46 @@ 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);
@@ -389,6 +425,10 @@ const shiftElementsByOne = (
          ];
  });
  if (!hasSameElementIds(originalElements, elements)) {
    return originalElements;
  }
  syncMovedIndices(elements, targetElementsMap);
  return elements;
@@ -402,11 +442,20 @@ 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;
+  let leadingIndex: number | undefined;
-  let trailingIndex: number;
+  let trailingIndex: number | undefined;
  if (direction === "left") {
    if (containingFrame) {
      leadingIndex = findIndex(elements, (el) =>
@@ -451,6 +500,19 @@ 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]);
@@ -475,6 +537,10 @@ const shiftElementsToEnd = (
          ...trailingElements,
        ];
  if (!hasSameElementIds(elements, nextElements)) {
    return elements;
  }
  syncMovedIndices(nextElements, targetElementsMap);
  return nextElements;
@@ -543,7 +609,7 @@ function shiftElementsAccountingForFrames(
  for (const [frameId, children] of frameChildrenSets) {
    nextElements = shiftFunction(
-      allElements,
+      nextElements,
      appState,
      direction,
      frameId,
@@ -178,6 +178,64 @@ 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();
@@ -403,6 +461,7 @@ 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);
@@ -447,6 +506,7 @@ 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,10 +1,14 @@
 import { pointFrom } from "@excalidraw/math";
-
+import { arrayToMap, type Bounds, ROUNDNESS } from "@excalidraw/common";
-import { arrayToMap, ROUNDNESS } from "@excalidraw/common";
+import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import type { LocalPoint } from "@excalidraw/math";
-import { getElementAbsoluteCoords, getElementBounds } from "../src/bounds";
+import {
  elementsOverlappingBBox,
  getElementAbsoluteCoords,
  getElementBounds,
 } from "../src/bounds";
 import type { ExcalidrawElement, ExcalidrawLinearElement } from "../src/types";
@@ -141,3 +145,65 @@ 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]);
  });
 });
@@ -692,6 +692,34 @@ describe("adding elements to frames", () => {
      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",
@@ -1509,4 +1509,190 @@ 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,6 +1,7 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "rootDir": "../",
    "outDir": "./dist/types"
  },
  "include": ["src/**/*", "global.d.ts"],
@@ -17,6 +17,13 @@ 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).
@@ -5,6 +5,7 @@ import {
  VERTICAL_ALIGN,
  arrayToMap,
  getFontString,
  getStrokeWidthByKey,
 } from "@excalidraw/common";
 import {
  getOriginalContainerHeightFromCache,
@@ -249,7 +250,10 @@ export const actionWrapTextInContainer = register({
          fillStyle: appState.currentItemFillStyle,
          strokeColor: appState.currentItemStrokeColor,
          roughness: appState.currentItemRoughness,
-          strokeWidth: appState.currentItemStrokeWidth,
+          strokeWidth: getStrokeWidthByKey(
            "rectangle",
            appState.currentItemStrokeWidthKey,
          ),
          strokeStyle: appState.currentItemStrokeStyle,
          roundness:
            appState.currentItemRoundness === "round"
@@ -477,17 +477,28 @@ export const actionToggleTheme = register<AppState["theme"]>({
    appState.theme === THEME.LIGHT ? MoonIcon : SunIcon,
  viewMode: true,
  trackEvent: { category: "canvas" },
-  perform: (_, appState, value) => {
+  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;
    }
    return {
      appState: {
        ...appState,
-        theme:
+        theme: nextTheme,
          value || (appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT),
      },
      captureUpdate: CaptureUpdateAction.EVENTUALLY,
    };
  },
-  keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
+  keyTest: (event) =>
    !event[KEYS.CTRL_OR_CMD] &&
    event.altKey &&
    event.shiftKey &&
    event.code === CODES.D,
  predicate: (elements, appState, props, app) => {
    return !!app.props.UIOptions.canvasActions.toggleTheme;
  },
@@ -14,8 +14,6 @@ import {
  isLineElement,
 } from "@excalidraw/element";
 import { invalidateFreeDrawIncrementalCanvas } from "@excalidraw/element";
 import {
  KEYS,
  arrayToMap,
@@ -56,6 +54,7 @@ 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();
@@ -224,9 +223,44 @@ 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,
              },
            );
          }
        }
      }
@@ -315,10 +349,6 @@ export const actionFinalize = register<FormData>({
        }
      : selectedLinearElement;
    if (element && isFreeDrawElement(element)) {
      invalidateFreeDrawIncrementalCanvas(element);
    }
    return {
      elements: newElements,
      appState: {
@@ -350,7 +380,9 @@ export const actionFinalize = register<FormData>({
        selectedLinearElement,
      },
      // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      captureUpdate: shouldCommit
        ? CaptureUpdateAction.IMMEDIATELY
        : CaptureUpdateAction.NEVER,
    };
  },
  keyTest: (event, appState) =>
@@ -1,8 +1,9 @@
-import { queryByTestId } from "@testing-library/react";
+import { fireEvent, queryByTestId } from "@testing-library/react";
 import {
  COLOR_PALETTE,
  DEFAULT_ELEMENT_BACKGROUND_PICKS,
  FREEDRAW_STROKE_WIDTH,
  FONT_FAMILY,
  STROKE_WIDTH,
 } from "@excalidraw/common";
@@ -128,6 +129,62 @@ 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",
@@ -135,7 +192,7 @@ describe("element locking", () => {
      });
      const rect2 = API.createElement({
        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.bold,
+        strokeWidth: STROKE_WIDTH.medium,
      });
      API.setElements([rect1, rect2]);
      API.setSelectedElements([rect1, rect2]);
@@ -145,17 +202,17 @@ describe("element locking", () => {
        queryByTestId(document.body, `strokeWidth-thin`),
      ).not.toBeChecked();
      expect(
-        queryByTestId(document.body, `strokeWidth-bold`),
+        queryByTestId(document.body, `strokeWidth-medium`),
      ).not.toBeChecked();
      expect(
-        queryByTestId(document.body, `strokeWidth-extraBold`),
+        queryByTestId(document.body, `strokeWidth-bold`),
      ).not.toBeChecked();
    });
    it("should show properties of different element types when selected", () => {
      const rect = API.createElement({
        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.bold,
+        strokeWidth: STROKE_WIDTH.medium,
      });
      const text = API.createElement({
        type: "text",
@@ -164,7 +221,7 @@ describe("element locking", () => {
      API.setElements([rect, text]);
      API.setSelectedElements([rect, text]);
-      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
+      expect(queryByTestId(document.body, `strokeWidth-medium`)).toBeChecked();
      expect(queryByTestId(document.body, `font-family-code`)).toHaveClass(
        "active",
      );
@@ -1,5 +1,3 @@
 import clsx from "clsx";
 import { pointFrom } from "@excalidraw/math";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -14,7 +12,7 @@ import {
  DEFAULT_FONT_SIZE,
  FONT_FAMILY,
  ROUNDNESS,
-  STROKE_WIDTH,
+  STROKE_WIDTH_KEYS,
  VERTICAL_ALIGN,
  KEYS,
  randomInteger,
@@ -22,9 +20,11 @@ import {
  getFontFamilyString,
  getLineHeight,
  isTransparent,
  getStrokeWidthByKey,
  reduceToCommonValue,
  invariant,
  FONT_SIZES,
  type StrokeWidthKey,
 } from "@excalidraw/common";
 import { canBecomePolygon, getNonDeletedElements } from "@excalidraw/element";
@@ -49,7 +49,6 @@ import {
  isArrowElement,
  isBoundToContainer,
  isElbowArrow,
  isFreeDrawElement,
  isLinearElement,
  isLineElement,
  isTextElement,
@@ -73,9 +72,11 @@ import type {
  ElementsMap,
  ExcalidrawBindableElement,
  ExcalidrawElement,
  ExcalidrawFreeDrawElement,
  ExcalidrawLinearElement,
  ExcalidrawTextElement,
  FontFamilyValues,
  StrokeVariability,
  TextAlign,
  VerticalAlign,
 } from "@excalidraw/element/types";
@@ -86,6 +87,7 @@ 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";
@@ -134,8 +136,8 @@ import {
  ArrowheadCardinalityOneOrManyIcon,
  ArrowheadCardinalityZeroOrManyIcon,
  ArrowheadCardinalityZeroOrOneIcon,
-  FreedrawPressureConstantIcon,
+  strokeVariabilityConstantIcon,
-  FreedrawPressureSensitiveIcon,
+  strokeVariabilityVariableIcon,
 } from "../components/icons";
 import { Fonts } from "../fonts";
@@ -195,7 +197,11 @@ export const changeProperty = (
 export const getFormValue = function <T extends Primitive>(
  elements: readonly ExcalidrawElement[],
  app: AppClassProperties,
-  getAttribute: (element: ExcalidrawElement) => T,
+  /**
   * 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),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
@@ -205,7 +211,7 @@ export const getFormValue = function <T extends Primitive>(
  let ret: T | null = null;
  if (editingTextElement) {
-    ret = getAttribute(editingTextElement);
+    ret = getValue(editingTextElement);
  }
  if (!ret) {
@@ -219,7 +225,7 @@ export const getFormValue = function <T extends Primitive>(
          : selectedElements.filter((el) => elementPredicate(el));
      ret =
-        reduceToCommonValue(targetElements, getAttribute) ??
+        reduceToCommonValue(targetElements, getValue) ??
        (typeof defaultValue === "function"
          ? defaultValue(true)
          : defaultValue);
@@ -549,20 +555,37 @@ export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
  },
 });
-export const actionChangeStrokeWidth = register<
+const getStrokeWidthKeyForElement = (
-  ExcalidrawElement["strokeWidth"]
+  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>({
  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: value,
+          strokeWidth: getStrokeWidthForElement(el, value),
        }),
      ),
-      appState: { ...appState, currentItemStrokeWidth: value },
+      appState: { ...appState, currentItemStrokeWidthKey: value },
      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
@@ -570,35 +593,35 @@ export const actionChangeStrokeWidth = register<
    <fieldset>
      <legend>{t("labels.strokeWidth")}</legend>
      <div className="buttonList">
-        <RadioSelection
+        <RadioSelection<StrokeWidthKey>
          group="stroke-width"
          options={[
            {
-              value: STROKE_WIDTH.thin,
+              value: "thin",
              text: t("labels.thin"),
              icon: StrokeWidthBaseIcon,
              testId: "strokeWidth-thin",
            },
            {
-              value: STROKE_WIDTH.bold,
+              value: "medium",
-              text: t("labels.bold"),
+              text: t("labels.medium"),
              icon: StrokeWidthBoldIcon,
-              testId: "strokeWidth-bold",
+              testId: "strokeWidth-medium",
            },
            {
-              value: STROKE_WIDTH.extraBold,
+              value: "bold",
-              text: t("labels.extraBold"),
+              text: t("labels.bold"),
              icon: StrokeWidthExtraBoldIcon,
-              testId: "strokeWidth-extraBold",
+              testId: "strokeWidth-bold",
            },
          ]}
          value={getFormValue(
            elements,
            app,
-            (element) => element.strokeWidth,
+            getStrokeWidthKeyForElement,
            (element) => element.hasOwnProperty("strokeWidth"),
            (hasSelection) =>
-              hasSelection ? null : appState.currentItemStrokeWidth,
+              hasSelection ? null : appState.currentItemStrokeWidthKey,
          )}
          onChange={(value) => updateData(value)}
        />
@@ -661,6 +684,87 @@ 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"]
 >({
@@ -2046,89 +2150,3 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
    );
  },
 });
 export const actionChangeStrokeShape = register<boolean>({
  name: "changeStrokeShape",
  label: "labels.strokeShape",
  trackEvent: false,
  perform: (elements, appState, value) => {
    return {
      elements: changeProperty(elements, appState, (el) => {
        if (isFreeDrawElement(el)) {
          return newElementWith(el, {
            simulatePressure: value,
          });
        }
        return el;
      }),
      appState: { ...appState, currentItemFreedrawConstantPressure: value },
      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
    };
  },
  PanelComponent: ({ elements, appState, updateData, app }) => {
    const { isCompact } = getStylesPanelInfo(app);
    const currentValue = getFormValue(
      elements,
      app,
      (element) => {
        if (isFreeDrawElement(element)) {
          return element.simulatePressure;
        }
        return null;
      },
      (element) => isFreeDrawElement(element),
      (hasSelection) =>
        hasSelection ? null : appState.currentItemFreedrawConstantPressure,
    );
    if (isCompact) {
      const isConstantPressure = currentValue !== false;
      return (
        <button
          type="button"
          className={clsx("compact-action-button", {
            active: !isConstantPressure,
          })}
          title={
            isConstantPressure
              ? t("labels.strokeShape_constant")
              : t("labels.strokeShape_pressure")
          }
          onClick={() => updateData(!isConstantPressure)}
        >
          {isConstantPressure
            ? FreedrawPressureConstantIcon
            : FreedrawPressureSensitiveIcon}
        </button>
      );
    }
    return (
      <fieldset>
        <legend>{t("labels.strokeShape")}</legend>
        <div className="buttonList">
          <RadioSelection
            group="stroke-shape"
            options={[
              {
                value: true,
                text: t("labels.strokeShape_constant"),
                icon: FreedrawPressureConstantIcon,
                testId: "strokeShape-constant",
              },
              {
                value: false,
                text: t("labels.strokeShape_pressure"),
                icon: FreedrawPressureSensitiveIcon,
                testId: "strokeShape-pressure",
              },
            ]}
            value={currentValue}
            onChange={(value) => updateData(value)}
          />
        </div>
      </fieldset>
    );
  },
 });
@@ -13,13 +13,13 @@ export {
  actionChangeStrokeWidth,
  actionChangeFillStyle,
  actionChangeSloppiness,
  actionChangeFreedrawMode,
  actionChangeOpacity,
  actionChangeFontSize,
  actionChangeFontFamily,
  actionChangeTextAlign,
  actionChangeVerticalAlign,
  actionChangeArrowProperties,
  actionChangeStrokeShape,
 } from "./actionProperties";
 export {
@@ -68,6 +68,7 @@ export type ActionName =
  | "changeStrokeWidth"
  | "changeStrokeShape"
  | "changeSloppiness"
  | "changeFreedrawMode"
  | "changeStrokeStyle"
  | "changeArrowhead"
  | "changeArrowType"
@@ -4,6 +4,7 @@ import {
  DEFAULT_ELEMENT_PROPS,
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
  DEFAULT_TEXT_ALIGN,
  DEFAULT_GRID_SIZE,
  EXPORT_SCALES,
@@ -34,13 +35,13 @@ 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,
-    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
+    currentItemStrokeWidthKey: DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
    currentItemFreedrawConstantPressure: true,
    currentItemTextAlign: DEFAULT_TEXT_ALIGN,
    currentHoveredFontFamily: null,
    cursorButton: "up",
@@ -168,15 +169,15 @@ const APP_STATE_STORAGE_CONF = (<
  },
  currentItemOpacity: { browser: true, export: false, server: false },
  currentItemRoughness: { browser: true, export: false, server: false },
-  currentItemStartArrowhead: { browser: true, export: false, server: false },
+  currentItemStrokeVariability: {
  currentItemStrokeColor: { browser: true, export: false, server: false },
  currentItemStrokeStyle: { browser: true, export: false, server: false },
  currentItemStrokeWidth: { browser: true, export: false, server: false },
  currentItemFreedrawConstantPressure: {
    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 },
  currentItemTextAlign: { browser: true, export: false, server: false },
  currentHoveredFontFamily: { browser: false, export: false, server: false },
  cursorButton: { browser: true, export: false, server: false },
@@ -41,6 +41,7 @@ import {
  canHaveArrowheads,
  getTargetElements,
  hasBackground,
  hasFreedrawMode,
  hasStrokeStyle,
  hasStrokeWidth,
 } from "../scene";
@@ -201,9 +202,9 @@ export const SelectedShapeActions = ({
        targetElements.some((element) => hasStrokeWidth(element.type))) &&
        renderAction("changeStrokeWidth")}
-      {(appState.activeTool.type === "freedraw" ||
+      {(hasFreedrawMode(appState.activeTool.type) ||
-        targetElements.some((element) => element.type === "freedraw")) &&
+        targetElements.some((element) => hasFreedrawMode(element.type))) &&
-        renderAction("changeStrokeShape")}
+        renderAction("changeFreedrawMode")}
      {(hasStrokeStyle(appState.activeTool.type) ||
        targetElements.some((element) => hasStrokeStyle(element.type))) && (
@@ -394,6 +395,17 @@ 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),
@@ -826,6 +838,14 @@ 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}
@@ -834,14 +854,6 @@ export const CompactShapeActions = ({
        container={container}
      />
      {/* Stroke Shape Toggle (freedraw only) */}
      {(appState.activeTool.type === "freedraw" ||
        targetElements.some((element) => element.type === "freedraw")) && (
        <div className="compact-action-item">
          {renderAction("changeStrokeShape")}
        </div>
      )}
      <CombinedArrowProperties
        appState={appState}
        renderAction={renderAction}
@@ -977,13 +989,6 @@ export const MobileShapeActions = ({
          targetElements={targetElements}
          container={container}
        />
        {/* Stroke Shape Toggle (freedraw only) */}
        {(appState.activeTool.type === "freedraw" ||
          targetElements.some((element) => element.type === "freedraw")) && (
          <div className="compact-action-item">
            {renderAction("changeStrokeShape")}
          </div>
        )}
        {/* Combined Arrow Properties */}
        <CombinedArrowProperties
          appState={appState}
@@ -1069,6 +1074,11 @@ 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",
@@ -1167,8 +1177,13 @@ 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") {
-                  app.togglePenMode(true);
+                  pendingPenDetectionRef.current = true;
                }
                if (value === "selection") {
@@ -1179,16 +1194,21 @@ export const ShapesSwitcher = ({
                  }
                }
              }}
-              onChange={({ pointerType }) => {
+              onChange={() => {
                if (app.state.activeTool.type !== value) {
                  trackEvent("toolbar", value, "ui");
                }
-                if (value === "image") {
+                app.setActiveTool({ type: value });
-                  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
-                } else {
+                // `change` event itself. We rely on the pointer-down detection
-                  app.setActiveTool({ type: value });
+                // 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));
                }
              }}
            />
@@ -27,6 +27,8 @@ import {
  KEYS,
  APP_NAME,
  CURSOR_TYPE,
  DEFAULT_STROKE_STREAMLINE,
  DEFAULT_STROKE_STREAMLINE_PRECISE,
  DEFAULT_TRANSFORM_HANDLE_SPACING,
  DEFAULT_VERTICAL_ALIGN,
  DRAGGING_THRESHOLD,
@@ -109,6 +111,7 @@ import {
  setDesktopUIMode,
  isSelectionLikeTool,
  oneOf,
  getStrokeWidthByKey,
 } from "@excalidraw/common";
 import {
@@ -260,6 +263,7 @@ import {
  getUncroppedWidthAndHeight,
  getActiveTextElement,
  isEligibleFrameChildType,
  getBindingStrategyForDraggingBindingElementEndpoints,
 } from "@excalidraw/element";
 import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
@@ -4133,7 +4137,7 @@ class App extends React.Component<AppProps, AppState> {
      strokeColor: this.state.currentItemStrokeColor,
      backgroundColor: this.state.currentItemBackgroundColor,
      fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth("text"),
      strokeStyle: this.state.currentItemStrokeStyle,
      roundness: null,
      roughness: this.state.currentItemRoughness,
@@ -4304,6 +4308,9 @@ class App extends React.Component<AppProps, AppState> {
      return {
        penMode: force ?? !prevState.penMode,
        penDetected: true,
        currentItemStrokeVariability: !prevState.penDetected
          ? "variable"
          : prevState.currentItemStrokeVariability,
      };
    });
  };
@@ -6303,7 +6310,7 @@ class App extends React.Component<AppProps, AppState> {
        strokeColor: this.state.currentItemStrokeColor,
        backgroundColor: this.state.currentItemBackgroundColor,
        fillStyle: this.state.currentItemFillStyle,
-        strokeWidth: this.state.currentItemStrokeWidth,
+        strokeWidth: this.getCurrentItemStrokeWidth("text"),
        strokeStyle: this.state.currentItemStrokeStyle,
        roughness: this.state.currentItemRoughness,
        opacity: this.state.currentItemOpacity,
@@ -7112,45 +7119,7 @@ class App extends React.Component<AppProps, AppState> {
      setCursorForShape(this.interactiveCanvas, this.state);
      if (lastPoint === lastCommittedPoint) {
-        const hoveredElement =
+        if (
          isArrowElement(this.state.newElement) &&
          isBindingEnabled(this.state) &&
          getHoveredElementForBinding(
            pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
            this.scene.getNonDeletedElements(),
            this.scene.getNonDeletedElementsMap(),
            maxBindingDistance_simple(this.state.zoom),
          );
        if (hoveredElement) {
          this.actionManager.executeAction(actionFinalize, "ui", {
            event: event.nativeEvent,
            sceneCoords: {
              x: scenePointerX,
              y: scenePointerY,
            },
          });
          this.setState({ suggestedBinding: null });
          if (!this.state.activeTool.locked) {
            resetCursor(this.interactiveCanvas);
            this.setState((prevState) => ({
              newElement: null,
              activeTool: updateActiveTool(this.state, {
                type: this.state.preferredSelectionTool.type,
              }),
              selectedElementIds: makeNextSelectedElementIds(
                {
                  ...prevState.selectedElementIds,
                  [multiElement.id]: true,
                },
                prevState,
              ),
              selectedLinearElement: new LinearElementEditor(
                multiElement,
                this.scene.getNonDeletedElementsMap(),
              ),
            }));
          }
        } else if (
          // if we haven't yet created a temp point and we're beyond commit-zone
          // threshold, add a point
          pointDistance(
@@ -7158,6 +7127,24 @@ class App extends React.Component<AppProps, AppState> {
            lastPoint,
          ) >= LINE_CONFIRM_THRESHOLD
        ) {
          this.store.scheduleCapture();
          flushSync(() => {
            invariant(
              this.state.selectedLinearElement?.initialState,
              "initialState must be set",
            );
            this.setState({
              selectedLinearElement: {
                ...this.state.selectedLinearElement,
                lastCommittedPoint: points[points.length - 1],
                selectedPointsIndices: [multiElement.points.length],
                initialState: {
                  ...this.state.selectedLinearElement.initialState,
                  lastClickedPoint: multiElement.points.length,
                },
              },
            });
          });
          this.scene.mutateElement(
            multiElement,
            {
@@ -7168,21 +7155,6 @@ class App extends React.Component<AppProps, AppState> {
            },
            { informMutation: false, isDragging: false },
          );
          invariant(
            this.state.selectedLinearElement?.initialState,
            "initialState must be set",
          );
          this.setState({
            selectedLinearElement: {
              ...this.state.selectedLinearElement,
              lastCommittedPoint: points[points.length - 1],
              selectedPointsIndices: [multiElement.points.length - 1],
              initialState: {
                ...this.state.selectedLinearElement.initialState,
                lastClickedPoint: multiElement.points.length - 1,
              },
            },
          });
        } else {
          setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
          // in this branch, we're inside the commit zone, and no uncommitted
@@ -7808,6 +7780,7 @@ class App extends React.Component<AppProps, AppState> {
        return {
          penMode: true,
          penDetected: true,
          currentItemStrokeVariability: "variable",
        };
      });
    }
@@ -9024,7 +8997,9 @@ class App extends React.Component<AppProps, AppState> {
      y: gridY,
    });
-    const simulatePressure = this.state.currentItemFreedrawConstantPressure;
+    const simulatePressure = event.pressure === 0.5;
    const strokeVariability = this.state.currentItemStrokeVariability;
    const element = newFreeDrawElement({
      type: elementType,
@@ -9033,16 +9008,25 @@ class App extends React.Component<AppProps, AppState> {
      strokeColor: this.state.currentItemStrokeColor,
      backgroundColor: this.state.currentItemBackgroundColor,
      fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth("freedraw"),
      strokeStyle: this.state.currentItemStrokeStyle,
      roughness: this.state.currentItemRoughness,
      opacity: this.state.currentItemOpacity,
      roundness: null,
      simulatePressure,
      strokeOptions: {
        variability: strokeVariability,
        streamline:
          event.pointerType !== "mouse"
            ? DEFAULT_STROKE_STREAMLINE_PRECISE
            : DEFAULT_STROKE_STREAMLINE,
      },
      locked: false,
      frameId: topLayerFrame ? topLayerFrame.id : null,
      points: [pointFrom<LocalPoint>(0, 0)],
-      pressures: [event.pressure],
+      // pressures are only consumed when rendering a real-pressure stroke, so
      // skip persisting them while pressure is being simulated
      pressures: simulatePressure ? [] : [event.pressure],
    });
    this.insertNewElement(element);
@@ -9092,7 +9076,7 @@ class App extends React.Component<AppProps, AppState> {
      strokeColor: "transparent",
      backgroundColor: "transparent",
      fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth("iframe"),
      strokeStyle: this.state.currentItemStrokeStyle,
      roughness: this.state.currentItemRoughness,
      roundness: this.getCurrentItemRoundness("iframe"),
@@ -9145,7 +9129,7 @@ class App extends React.Component<AppProps, AppState> {
      strokeColor: "transparent",
      backgroundColor: "transparent",
      fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth("embeddable"),
      strokeStyle: this.state.currentItemStrokeStyle,
      roughness: this.state.currentItemRoughness,
      roundness: this.getCurrentItemRoundness("embeddable"),
@@ -9192,7 +9176,7 @@ class App extends React.Component<AppProps, AppState> {
      strokeColor: this.state.currentItemStrokeColor,
      backgroundColor: this.state.currentItemBackgroundColor,
      fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth("image"),
      strokeStyle: this.state.currentItemStrokeStyle,
      roughness: this.state.currentItemRoughness,
      roundness: null,
@@ -9264,32 +9248,58 @@ class App extends React.Component<AppProps, AppState> {
      const { x: rx, y: ry } = multiElement;
      const { lastCommittedPoint } = selectedLinearElement;
      const sceneCoords = viewportCoordsToSceneCoords(event, this.state);
      const { start, end } =
        isBindingElement(multiElement) && isBindingEnabled(this.state)
          ? getBindingStrategyForDraggingBindingElementEndpoints(
              multiElement,
              new Map([
                [
                  multiElement.points.length - 1,
                  {
                    point: multiElement.points[multiElement.points.length - 1],
                    isDragging: false,
                  },
                ],
              ]),
              sceneCoords.x,
              sceneCoords.y,
              this.scene.getNonDeletedElementsMap(),
              this.scene.getNonDeletedElements(),
              this.state,
              {
                newArrow: Boolean(this.state.newElement),
                zoom: this.state.zoom,
              },
            )
          : { end: { mode: undefined } };
-      const hoveredElementForBinding =
+      const elementsMap = this.scene.getNonDeletedElementsMap();
-        isBindingEnabled(this.state) &&
+      // Auto-confirm when both ends bind to the SAME element and the end point
-        getHoveredElementForBinding(
+      // lands on the outline rather than inside it
-          pointFrom<GlobalPoint>(
+      const endOutsideSameElement =
-            this.lastPointerMoveCoords?.x ??
+        start?.mode != null &&
-              rx + multiElement.points[multiElement.points.length - 1][0],
+        end.mode != null &&
-            this.lastPointerMoveCoords?.y ??
+        start.element.id === end.element.id &&
-              ry + multiElement.points[multiElement.points.length - 1][1],
+        !isPointInElement(end.focusPoint, end.element, elementsMap);
      const boundOutsideFromElsewhere =
        end.mode === "orbit" &&
        multiElement.startBinding?.elementId !== end.element?.id;
      const lastCommittedPointIsInsideCommitZone =
        lastCommittedPoint &&
        pointDistance(
          pointFrom(
            pointerDownState.origin.x - rx,
            pointerDownState.origin.y - ry,
          ),
-          this.scene.getNonDeletedElements(),
+          lastCommittedPoint,
-          this.scene.getNonDeletedElementsMap(),
+        ) < LINE_CONFIRM_THRESHOLD;
        );
      // clicking inside commit zone → finalize arrow
      if (
-        (isBindingElement(multiElement) && hoveredElementForBinding) ||
+        boundOutsideFromElsewhere || // Outside -> orbit: Bind immediately
-        (multiElement.points.length > 1 &&
+        endOutsideSameElement || // End outside the start's element: Bind immediately
-          lastCommittedPoint &&
+        (multiElement.points.length > 1 && lastCommittedPointIsInsideCommitZone)
          pointDistance(
            pointFrom(
              pointerDownState.origin.x - rx,
              pointerDownState.origin.y - ry,
            ),
            lastCommittedPoint,
          ) < LINE_CONFIRM_THRESHOLD)
      ) {
        this.actionManager.executeAction(actionFinalize, "ui", {
          event: event.nativeEvent,
@@ -9344,7 +9354,7 @@ class App extends React.Component<AppProps, AppState> {
              strokeColor: this.state.currentItemStrokeColor,
              backgroundColor: this.state.currentItemBackgroundColor,
              fillStyle: this.state.currentItemFillStyle,
-              strokeWidth: this.state.currentItemStrokeWidth,
+              strokeWidth: this.getCurrentItemStrokeWidth(elementType),
              strokeStyle: this.state.currentItemStrokeStyle,
              roughness: this.state.currentItemRoughness,
              opacity: this.state.currentItemOpacity,
@@ -9371,7 +9381,7 @@ class App extends React.Component<AppProps, AppState> {
              strokeColor: this.state.currentItemStrokeColor,
              backgroundColor: this.state.currentItemBackgroundColor,
              fillStyle: this.state.currentItemFillStyle,
-              strokeWidth: this.state.currentItemStrokeWidth,
+              strokeWidth: this.getCurrentItemStrokeWidth(elementType),
              strokeStyle: this.state.currentItemStrokeStyle,
              roughness: this.state.currentItemRoughness,
              opacity: this.state.currentItemOpacity,
@@ -9508,6 +9518,13 @@ class App extends React.Component<AppProps, AppState> {
      : null;
  }
  private getCurrentItemStrokeWidth(elementType: ExcalidrawElement["type"]) {
    return getStrokeWidthByKey(
      elementType,
      this.state.currentItemStrokeWidthKey,
    );
  }
  private createGenericElementOnPointerDown = (
    elementType: ExcalidrawGenericElement["type"] | "embeddable",
    pointerDownState: PointerDownState,
@@ -9531,7 +9548,7 @@ class App extends React.Component<AppProps, AppState> {
      strokeColor: this.state.currentItemStrokeColor,
      backgroundColor: this.state.currentItemBackgroundColor,
      fillStyle: this.state.currentItemFillStyle,
-      strokeWidth: this.state.currentItemStrokeWidth,
+      strokeWidth: this.getCurrentItemStrokeWidth(elementType),
      strokeStyle: this.state.currentItemStrokeStyle,
      roughness: this.state.currentItemRoughness,
      opacity: this.state.currentItemOpacity,
@@ -9671,61 +9688,10 @@ class App extends React.Component<AppProps, AppState> {
    });
  }
  /**
   * Returns the timestamp of a pointer event, in milliseconds.
   * Extracted as a method so tests can spy on it and return a fixed value,
   * making the One Euro Filter in the freedraw handler deterministic.
   */
  protected getPointerEventTimestamp(
    ev: Pick<PointerEvent, "timeStamp">,
  ): number {
    return ev.timeStamp;
  }
  private onPointerMoveFromPointerDownHandler(
    pointerDownState: PointerDownState,
  ) {
-    // Per-stroke One Euro Filter state for mouse freedraw smoothing.
+    return withBatchedUpdatesThrottled((event: PointerEvent) => {
    // Reference: Casiez et al. 2012 "1€ Filter: A Simple Speed-based Low-pass
    // Filter for Noisy Input in Interactive Systems".
    //
    // The filter adapts its EMA alpha to the current speed of the pointer:
    //   slow movement  → low cutoff → heavy smoothing (removes jitter)
    //   fast movement  → high cutoff → near-raw tracking (minimal lag)
    //
    // State variables (reset at stroke start via null sentinel):
    let emaX: number | null = null; // smoothed position x
    let emaY: number | null = null; // smoothed position y
    let emaDx = 0; // smoothed derivative x
    let emaDy = 0; // smoothed derivative y
    let prevRawX: number | null = null; // previous raw x for derivative
    let prevRawY: number | null = null;
    let prevTs: number | null = null; // previous event timestamp (ms)
    // Pen pressure warmup: the first few samples from a pen digitizer are
    // unreliable (often spike to ~0.5).  We apply an EMA whose alpha ramps
    // from PEN_PRESSURE_INITIAL_ALPHA up to 1 over PEN_PRESSURE_WARMUP_SAMPLES
    // so the stroke gradually eases from heavy smoothing into raw pressure.
    let penPressureEma: number | null = null;
    let penPressureSampleCount = 0;
    const PEN_PRESSURE_WARMUP_SAMPLES = 20;
    const PEN_PRESSURE_INITIAL_ALPHA = 0.1;
    // Tuning constants:
    //   MIN_CUTOFF  – cutoff frequency (Hz) when speed ≈ 0; smaller = more smoothing
    //   BETA        – rate at which cutoff grows with speed; larger = quicker adaptation
    //   D_CUTOFF    – fixed cutoff for the derivative pre-filter
    const MIN_CUTOFF = 0.5;
    const BETA = 0.01;
    const D_CUTOFF = 2.0;
    /** Compute EMA alpha from cutoff frequency (Hz) and timestep (seconds). */
    const emaAlpha = (cutoff: number, dt: number): number => {
      const tau = 1 / (2 * Math.PI * cutoff);
      return 1 / (1 + tau / dt);
    };
    const handler = (event: PointerEvent) => {
      if (this.state.openDialog?.name === "elementLinkSelector") {
        return;
      }
@@ -10417,98 +10383,23 @@ class App extends React.Component<AppProps, AppState> {
        }
        if (newElement.type === "freedraw") {
-          const coalescedEvents: PointerEvent[] =
+          const points = newElement.points;
-            event.getCoalescedEvents?.() ?? [];
+          const dx = pointerCoords.x - newElement.x;
-          const allEvents =
+          const dy = pointerCoords.y - newElement.y;
            coalescedEvents.length > 0 ? coalescedEvents : [event];
          const newPoints: LocalPoint[] = [];
          const newPressures: number[] = [];
-          let lastPoint =
+          const lastPoint = points.length > 0 && points[points.length - 1];
-            newElement.points.length > 0
+          const discardPoint =
-              ? newElement.points[newElement.points.length - 1]
+            lastPoint && lastPoint[0] === dx && lastPoint[1] === dy;
              : null;
-          for (const ev of allEvents) {
+          if (!discardPoint) {
-            const coords = viewportCoordsToSceneCoords(ev, this.state);
+            const pressures = newElement.simulatePressure
-            const rawDx = coords.x - newElement.x;
+              ? newElement.pressures
-            const rawDy = coords.y - newElement.y;
+              : [...newElement.pressures, event.pressure];
            let dx = rawDx;
            let dy = rawDy;
            if (event.pointerType === "mouse") {
              // One Euro Filter: speed-adaptive low-pass for mouse events.
              const evTs = this.getPointerEventTimestamp(ev);
              const dt = Math.max(
                prevTs !== null ? (evTs - prevTs) / 1000 : 1 / 60,
                0.001,
              ); // seconds
              // 1. Smooth the derivative (fixed D_CUTOFF pre-filter).
              const alphaD = emaAlpha(D_CUTOFF, dt);
              const rawDxDt = prevRawX !== null ? (rawDx - prevRawX) / dt : 0;
              const rawDyDt = prevRawY !== null ? (rawDy - prevRawY) / dt : 0;
              emaDx = alphaD * rawDxDt + (1 - alphaD) * emaDx;
              emaDy = alphaD * rawDyDt + (1 - alphaD) * emaDy;
              // 2. Adaptive cutoff: higher speed → higher cutoff → less lag.
              // Normalize to screen-space pixels/sec so BETA behaves the same
              // regardless of zoom level (scene units are 1/zoom px at high zoom).
              const speed =
                Math.sqrt(emaDx * emaDx + emaDy * emaDy) *
                this.state.zoom.value;
              const cutoff = MIN_CUTOFF + BETA * speed;
              const alphaP = emaAlpha(cutoff, dt);
              // 3. Smooth position with adaptive alpha.
              emaX =
                emaX === null ? rawDx : alphaP * rawDx + (1 - alphaP) * emaX;
              emaY =
                emaY === null ? rawDy : alphaP * rawDy + (1 - alphaP) * emaY;
              prevRawX = rawDx;
              prevRawY = rawDy;
              prevTs = evTs;
              dx = emaX;
              dy = emaY;
            }
            if (!lastPoint || lastPoint[0] !== dx || lastPoint[1] !== dy) {
              const pt = pointFrom<LocalPoint>(dx, dy);
              newPoints.push(pt);
              let pressure = ev.pressure;
              if (event.pointerType === "pen") {
                // Gradually ease from aggressive smoothing into raw pressure to
                // suppress the unreliable spike at the start of a pen stroke.
                const progress = Math.min(
                  1,
                  penPressureSampleCount / PEN_PRESSURE_WARMUP_SAMPLES,
                );
                const alpha =
                  PEN_PRESSURE_INITIAL_ALPHA +
                  progress * (1 - PEN_PRESSURE_INITIAL_ALPHA);
                penPressureEma =
                  penPressureEma === null
                    ? pressure
                    : alpha * pressure + (1 - alpha) * penPressureEma;
                pressure = penPressureEma;
                penPressureSampleCount++;
              }
              newPressures.push(pressure);
              lastPoint = pt;
            }
          }
          if (newPoints.length > 0) {
            const pressures = [...newElement.pressures, ...newPressures];
            this.scene.mutateElement(
              newElement,
              {
-                points: [...newElement.points, ...newPoints],
+                points: [...points, pointFrom<LocalPoint>(dx, dy)],
                pressures,
              },
              {
@@ -10684,23 +10575,7 @@ class App extends React.Component<AppProps, AppState> {
          });
        }
      }
-    };
+    });
    // For freedraw, bypass RAF throttling so every pointer event is processed
    // synchronously. This preserves coalesced pointer events and eliminates
    // stroke lag on high-frequency stylus / pointer input.
    if (this.state.activeTool.type === "freedraw") {
      const immediate = withBatchedUpdates(handler);
      const result = immediate as typeof immediate & {
        flush(): void;
        cancel(): void;
      };
      result.flush = () => {};
      result.cancel = () => {};
      return result;
    }
    return withBatchedUpdatesThrottled(handler);
  }
  // Returns whether the pointer move happened over either scrollbar
@@ -10991,7 +10866,9 @@ class App extends React.Component<AppProps, AppState> {
          dx += 0.0001;
        }
-        const pressures = [...newElement.pressures, childEvent.pressure];
+        const pressures = newElement.simulatePressure
          ? []
          : [...newElement.pressures, childEvent.pressure];
        this.scene.mutateElement(newElement, {
          points: [...points, pointFrom<LocalPoint>(dx, dy)],
@@ -11004,13 +10881,6 @@ class App extends React.Component<AppProps, AppState> {
      }
      if (isLinearElement(newElement)) {
        if (
          newElement!.points.length > 1 &&
          newElement.points[1][0] !== 0 &&
          newElement.points[1][1] !== 0
        ) {
          this.store.scheduleCapture();
        }
        const pointerCoords = viewportCoordsToSceneCoords(
          childEvent,
          this.state,
@@ -11048,23 +10918,15 @@ class App extends React.Component<AppProps, AppState> {
            this.actionManager.executeAction(actionFinalize);
          } else {
-            const dx = pointerCoords.x - newElement.x;
+            // Movement out of commit area will create the point
            const dy = pointerCoords.y - newElement.y;
            this.scene.mutateElement(
              newElement,
              {
                points: [newElement.points[0], pointFrom<LocalPoint>(dx, dy)],
              },
              { informMutation: false, isDragging: false },
            );
            this.setState({
              multiElement: newElement,
              newElement,
            });
          }
        } else if (pointerDownState.drag.hasOccurred && !multiElement) {
          this.store.scheduleCapture();
          if (isLinearElement(newElement)) {
            this.actionManager.executeAction(actionFinalize, "ui", {
              event: childEvent,
@@ -19,6 +19,7 @@ import {
  actionClearCanvas,
  actionLink,
  actionToggleSearchMenu,
  actionToggleTheme,
 } from "../../actions";
 import {
  actionCopyElementLink,
@@ -424,6 +425,7 @@ function CommandPaletteInner({
      ];
      const additionalCommands: CommandPaletteItem[] = [
        actionToCommand(actionToggleTheme, DEFAULT_CATEGORIES.app),
        {
          label: t("toolBar.library"),
          category: DEFAULT_CATEGORIES.app,
@@ -1,12 +1 @@
-import { actionToggleTheme } from "../../actions";
+export {};
 import type { CommandPaletteItem } from "./types";
 export const toggleTheme: CommandPaletteItem = {
  ...actionToggleTheme,
  category: "App",
  label: "Toggle theme",
  perform: ({ actionManager }) => {
    actionManager.executeAction(actionToggleTheme, "commandPalette");
  },
 };
@@ -831,14 +831,13 @@ const convertElementType = <
      newElement({
        ...element,
        type: targetType,
-        roundness:
+        roundness: element.roundness
-          targetType === "diamond" && element.roundness
+          ? {
-            ? {
+              type: isUsingAdaptiveRadius(targetType)
-                type: isUsingAdaptiveRadius(targetType)
+                ? ROUNDNESS.ADAPTIVE_RADIUS
-                  ? ROUNDNESS.ADAPTIVE_RADIUS
+                : ROUNDNESS.PROPORTIONAL_RADIUS,
-                  : ROUNDNESS.PROPORTIONAL_RADIUS,
+            }
-              }
+          : element.roundness,
            : element.roundness,
      }),
    ) as typeof element;
@@ -4,11 +4,13 @@ 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";
@@ -124,6 +126,7 @@ const ShortcutKey = (props: { children: React.ReactNode }) => (
 );
 export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
  const actionManager = useExcalidrawActionManager();
  const handleClose = React.useCallback(() => {
    if (onClose) {
      onClose();
@@ -302,10 +305,12 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("labels.viewMode")}
              shortcuts={[getShortcutKey("Alt+R")]}
            />
-            <Shortcut
+            {actionManager.isActionEnabled(actionToggleTheme) && (
-              label={t("labels.toggleTheme")}
+              <Shortcut
-              shortcuts={[getShortcutKey("Alt+Shift+D")]}
+                label={t("labels.toggleTheme")}
-            />
+                shortcuts={[getShortcutKey("Alt+Shift+D")]}
              />
            )}
            <Shortcut
              label={t("stats.fullTitle")}
              shortcuts={[getShortcutKey("Alt+/")]}
@@ -7,7 +7,6 @@
    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,6 +120,24 @@
    }
  }
  // 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 />
+      <MainMenu.DefaultItems.ToggleTheme allowSystemTheme={false} />
      <MainMenu.DefaultItems.ChangeCanvasBackground />
    </MainMenu>
  );
@@ -235,8 +235,6 @@ const LayerUI = ({
  );
  const renderSelectedShapeActions = () => {
    const isCompactMode = isCompactStylesPanel;
    return (
      <Section
        heading="selectedShapeActions"
@@ -244,7 +242,7 @@ const LayerUI = ({
          "transition-left": appState.zenModeEnabled,
        })}
      >
-        {isCompactMode ? (
+        {isCompactStylesPanel ? (
          <Island
            className={clsx("compact-shape-actions-island")}
            padding={0}
@@ -312,6 +310,23 @@ 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" && (
@@ -343,13 +358,18 @@ const LayerUI = ({
                          />
                          {heading}
                          <Stack.Row gap={spacing.toolbarInnerRowGap}>
-                            <PenModeButton
+                            {/* in compact UI the pen mode button is rendered
-                              zenModeEnabled={appState.zenModeEnabled}
+                                as a separate floating button below the compact
-                              checked={appState.penMode}
+                                actions menu */}
-                              onChange={() => onPenModeToggle(null)}
+                            {!isCompactStylesPanel && (
-                              title={t("toolBar.penMode")}
+                              <PenModeButton
-                              penDetected={appState.penDetected}
+                                zenModeEnabled={appState.zenModeEnabled}
-                            />
+                                checked={appState.penMode}
                                onChange={() => onPenModeToggle(null)}
                                title={t("toolBar.penMode")}
                                penDetected={appState.penDetected}
                              />
                            )}
                            <LockButton
                              checked={appState.activeTool.locked}
                              onChange={onLockToggle}
@@ -29,6 +29,7 @@
    gap: 2px;
    &__choice {
      box-sizing: content-box;
      position: relative;
      display: flex;
      align-items: center;
@@ -50,13 +51,11 @@
      user-select: none;
      letter-spacing: 0.4px;
      transition: all 75ms ease-out;
      &:hover {
        color: var(--RadioGroup-choice-color-off-hover);
      }
-      &:active {
+      &:not(.active):active {
        background: var(--RadioGroup-choice-background-off-active);
      }
@@ -1186,26 +1186,6 @@ export const StrokeWidthExtraBoldIcon = createIcon(
  modifiedTablerIconProps,
 );
 export const FreedrawPressureConstantIcon = createIcon(
  <path
    d="M4 10h12"
    stroke="currentColor"
    strokeWidth="3"
    strokeLinecap="round"
    strokeLinejoin="round"
  />,
  modifiedTablerIconProps,
 );
 export const FreedrawPressureSensitiveIcon = createIcon(
  <path
    d="M4 10C6 9.5 10 8 16 7L16 13C10 12 6 10.5 4 10Z"
    fill="currentColor"
    stroke="none"
  />,
  modifiedTablerIconProps,
 );
 export const StrokeStyleSolidIcon = React.memo(({ theme }: { theme: Theme }) =>
  createIcon(
    <path
@@ -1269,6 +1249,74 @@ export const SloppinessCartoonistIcon = createIcon(
  modifiedTablerIconProps,
 );
 export const strokeVariabilityConstantIcon = createIcon(
  <g>
    <path
      d="M4 12 C 5 8, 6 8, 8 12"
      fill="none"
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8 12 C 9 16, 10 16, 12 12"
      fill="none"
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M12 12 C 14 8, 15 8, 16 12"
      fill="none"
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M16 12 C 17 16, 18 16, 19 12"
      fill="none"
      strokeWidth="1"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </g>,
  tablerIconProps,
 );
 export const strokeVariabilityVariableIcon = createIcon(
  <g>
    <path
      d="M4 12 C 5 8, 6 8, 8 12"
      fill="none"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8 12 C 9 16, 10 16, 12 12"
      fill="none"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M12 12 C 14 8, 15 8, 16 12"
      fill="none"
      strokeWidth="2.75"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M16 12 C 17 16, 18 16, 19 12"
      fill="none"
      strokeWidth="3.25"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </g>,
  tablerIconProps,
 );
 export const EdgeSharpIcon = createIcon(
  <svg strokeWidth="1.5">
    <path d="M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10" />
@@ -232,18 +232,22 @@ export const ToggleTheme = (
  props:
    | {
        allowSystemTheme: true;
        /**
         * Controls the theme of this UI component only.
         * You should subscribe to `props.onThemeChange` and control the theme
         * upstream.
         */
        theme: Theme | "system";
        onSelect: (theme: Theme | "system") => void;
      }
    | {
-        allowSystemTheme?: false;
+        allowSystemTheme: false;
        onSelect?: (theme: Theme) => void;
      },
 ) => {
  const { t } = useI18n();
  const appState = useUIAppState();
  const actionManager = useExcalidrawActionManager();
  const shortcut = getShortcutFromShortcutName("toggleTheme");
  const appProps = useAppProps();
  if (!actionManager.isActionEnabled(actionToggleTheme)) {
    return null;
@@ -254,7 +258,16 @@ export const ToggleTheme = (
      <DropdownMenuItemContentRadio
        name="theme"
        value={props.theme}
-        onChange={(value: Theme | "system") => props.onSelect(value)}
+        onChange={(value: Theme | "system") => {
          if (appProps.onThemeChange) {
            appProps.onThemeChange(value);
            return;
          }
          console.warn(
            "MainMenu.DefaultItems.ToggleTheme: `<Excalidraw/> props.onThemeChange` must be defined to use system theme selection.",
          );
        }}
        choices={[
          {
            value: THEME.LIGHT,
@@ -284,13 +297,7 @@ export const ToggleTheme = (
        // do not close the menu when changing theme
        event.preventDefault();
-        if (props?.onSelect) {
+        actionManager.executeAction(actionToggleTheme);
          props.onSelect(
            appState.theme === THEME.DARK ? THEME.LIGHT : THEME.DARK,
          );
        } else {
          return actionManager.executeAction(actionToggleTheme);
        }
      }}
      icon={appState.theme === THEME.DARK ? SunIcon : MoonIcon}
      data-testid="toggle-dark-mode"
@@ -3,6 +3,7 @@ import { isFiniteNumber, isValidPoint, pointFrom } from "@excalidraw/math";
 import {
  type CombineBrandsIfNeeded,
  DEFAULT_FONT_FAMILY,
  DEFAULT_STROKE_STREAMLINE,
  DEFAULT_TEXT_ALIGN,
  DEFAULT_VERTICAL_ALIGN,
  FONT_FAMILY,
@@ -18,6 +19,9 @@ import {
  getSizeFromPoints,
  normalizeLink,
  getLineHeight,
  STROKE_WIDTH,
  STROKE_WIDTH_KEYS,
  type StrokeWidthKey,
 } from "@excalidraw/common";
 import {
  calculateFixedPointForNonElbowArrowBinding,
@@ -70,6 +74,7 @@ import type {
  FontFamilyValues,
  NonDeletedSceneElementsMap,
  OrderedExcalidrawElement,
  StrokeVariability,
  StrokeRoundness,
 } from "@excalidraw/element/types";
@@ -188,6 +193,43 @@ export type RestoredDataState = {
  files: BinaryFiles;
 };
 const ALLOWED_STROKE_VARIABILITIES = new Set<StrokeVariability>([
  "constant",
  "variable",
 ]);
 const restoreStrokeVariability = (
  variability: unknown,
  defaultValue: StrokeVariability,
 ): StrokeVariability => {
  return typeof variability === "string" &&
    ALLOWED_STROKE_VARIABILITIES.has(variability as StrokeVariability)
    ? (variability as StrokeVariability)
    : defaultValue;
 };
 const getStrokeWidthKey = (strokeWidth: unknown): StrokeWidthKey | null => {
  return isFiniteNumber(strokeWidth)
    ? STROKE_WIDTH_KEYS.find((key) => STROKE_WIDTH[key] === strokeWidth) ?? null
    : null;
 };
 const restoreFreedrawStrokeOptions = (
  strokeOptions: unknown,
 ): { variability: StrokeVariability; streamline: number } => {
  const options =
    strokeOptions && typeof strokeOptions === "object"
      ? (strokeOptions as { variability?: unknown; streamline?: unknown })
      : null;
  return {
    variability: restoreStrokeVariability(options?.variability, "variable"),
    streamline: isFiniteNumber(options?.streamline)
      ? options?.streamline
      : DEFAULT_STROKE_STREAMLINE,
  };
 };
 const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
  if (Object.keys(FONT_FAMILY).includes(fontFamilyName)) {
    return FONT_FAMILY[
@@ -483,6 +525,7 @@ export const restoreElement = (
      return restoreElementWithProperties(element, {
        points,
        simulatePressure: element.simulatePressure,
        strokeOptions: restoreFreedrawStrokeOptions(element.strokeOptions),
        pressures,
      });
    }
@@ -1056,6 +1099,13 @@ export const restoreAppState = (
    nextAppState.boxSelectionMode = boxSelectionMode;
  }
  // legacy
  if ((appState as any).currentItemStrokeWidth !== undefined) {
    nextAppState.currentItemStrokeWidthKey =
      getStrokeWidthKey((appState as any).currentItemStrokeWidth) ??
      defaultAppState.currentItemStrokeWidthKey;
  }
  return {
    ...nextAppState,
    cursorButton: localAppState?.cursorButton || "up",
@@ -10,6 +10,7 @@ import {
  applyDarkModeFilter,
  DEFAULT_IMAGE_OPTIONS,
  DEFAULT_UI_OPTIONS,
  getStrokeWidthByKey,
  isShallowEqual,
 } from "@excalidraw/common";
@@ -67,6 +68,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
  const {
    onExport,
    onChange,
    onThemeChange,
    onIncrement,
    initialData,
    onExcalidrawAPI,
@@ -129,7 +131,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
  if (
    UIOptions.canvasActions.toggleTheme === null &&
-    typeof theme === "undefined"
+    (theme == null || onThemeChange)
  ) {
    UIOptions.canvasActions.toggleTheme = true;
  }
@@ -185,6 +187,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
        <App
          onExport={onExport}
          onChange={onChange}
          onThemeChange={onThemeChange}
          onIncrement={onIncrement}
          initialData={initialData}
          onExcalidrawAPI={handleExcalidrawAPI}
@@ -398,11 +401,7 @@ export {
  convertToExcalidrawElements,
 } from "@excalidraw/element";
-export {
+export { elementsOverlappingBBox } from "@excalidraw/element";
  elementsOverlappingBBox,
  isElementInsideBBox,
  elementPartiallyOverlapsWithOrContainsBBox,
 } from "@excalidraw/utils/withinBounds";
 export { DiagramToCodePlugin } from "./components/DiagramToCodePlugin/DiagramToCodePlugin";
 export { getDataURL } from "./data/blob";
@@ -452,4 +451,4 @@ export function useExcalidrawStateValue(
 export { _useOnAppStateChange as useOnExcalidrawStateChange };
-export { applyDarkModeFilter };
+export { applyDarkModeFilter, getStrokeWidthByKey };
@@ -30,14 +30,14 @@
    "changeBackground": "Change background color",
    "fill": "Fill",
    "strokeWidth": "Stroke width",
    "strokeShape": "Pressure",
    "strokeShape_constant": "Constant pressure",
    "strokeShape_pressure": "Pressure-sensitive",
    "strokeStyle": "Stroke style",
    "strokeStyle_solid": "Solid",
    "strokeStyle_dashed": "Dashed",
    "strokeStyle_dotted": "Dotted",
    "sloppiness": "Sloppiness",
    "pressure": "Pressure",
    "pressure_constant": "Constant",
    "pressure_variable": "Variable",
    "opacity": "Opacity",
    "textAlign": "Text align",
    "edges": "Edges",
@@ -103,6 +103,7 @@
    "lodash.throttle": "4.1.1",
    "nanoid": "3.3.3",
    "pako": "2.0.3",
    "perfect-freehand": "1.2.0",
    "pica": "7.1.1",
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
@@ -291,6 +291,14 @@ const renderElementToSvg = (
        );
        offsetX = offsetX || 0;
        offsetY = offsetY || 0;
        // Pin the mask to user space; the default maskUnits="objectBoundingBox"
        // collapses to zero area for axis-aligned arrows (zero-size bbox),
        // hiding the whole line from SVG exports (#11439).
        maskPath.setAttribute("maskUnits", "userSpaceOnUse");
        maskPath.setAttribute("x", "0");
        maskPath.setAttribute("y", "0");
        maskPath.setAttribute("width", `${element.width + 100 + offsetX}`);
        maskPath.setAttribute("height", `${element.height + 100 + offsetY}`);
        maskRectVisible.setAttribute("x", "0");
        maskRectVisible.setAttribute("y", "0");
        maskRectVisible.setAttribute("fill", "#fff");
@@ -377,20 +385,12 @@ const renderElementToSvg = (
    case "freedraw": {
      const wrapper = svgRoot.ownerDocument.createElementNS(SVG_NS, "g");
      // Set fill once on the group so all capsule paths inherit it
      // instead of repeating the attribute on every child element.
      wrapper.setAttribute(
        "fill",
        renderConfig.theme === THEME.DARK
          ? applyDarkModeFilter(element.strokeColor)
          : element.strokeColor,
      );
      const shapes = ShapeCache.generateElementShape(element, renderConfig);
      // always ordered as [background, stroke]
      for (const shape of shapes) {
        if (typeof shape === "string") {
-          // stroke (SVGPathString) — fill inherited from wrapper <g>
+          // stroke (SVGPathString)
          const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
          path.setAttribute(
            "fill",
@@ -9,6 +9,7 @@ export {
  hasBackground,
  hasStrokeWidth,
  hasStrokeStyle,
  hasFreedrawMode,
  canHaveArrowheads,
  canChangeRoundness,
 } from "@excalidraw/element";
@@ -898,14 +898,14 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1098,14 +1098,14 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1313,14 +1313,14 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1645,14 +1645,14 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1977,14 +1977,14 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2192,14 +2192,14 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2434,14 +2434,14 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2733,14 +2733,14 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3106,14 +3106,14 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "currentItemFillStyle": "cross-hatch",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 60,
  "currentItemRoughness": 2,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#e03131",
  "currentItemStrokeStyle": "dotted",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "bold",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3223,11 +3223,11 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "seed": 1278240551,
  "strokeColor": "#e03131",
  "strokeStyle": "dotted",
-  "strokeWidth": 2,
+  "strokeWidth": 4,
  "type": "rectangle",
  "updated": 1,
  "version": 4,
-  "versionNonce": 1402203177,
+  "versionNonce": 1349943049,
  "width": 20,
  "x": -10,
  "y": 0,
@@ -3252,14 +3252,14 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
  "opacity": 60,
  "roughness": 2,
  "roundness": null,
-  "seed": 1898319239,
+  "seed": 406373543,
  "strokeColor": "#e03131",
  "strokeStyle": "dotted",
-  "strokeWidth": 2,
+  "strokeWidth": 4,
  "type": "rectangle",
  "updated": 1,
-  "version": 9,
+  "version": 10,
-  "versionNonce": 941653321,
+  "versionNonce": 1402203177,
  "width": 20,
  "x": 20,
  "y": 30,
@@ -3268,7 +3268,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of elements 1`] = `2`;
-exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `16`;
+exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] number of renders 1`] = `17`;
 exports[`contextMenu element > selecting 'Paste styles' in context menu pastes styles > [end of test] redo stack 1`] = `[]`;
@@ -3468,11 +3468,11 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "updated": {
        "id3": {
          "deleted": {
-            "strokeStyle": "dotted",
+            "strokeWidth": 4,
            "version": 7,
          },
          "inserted": {
-            "strokeStyle": "solid",
+            "strokeWidth": 2,
            "version": 6,
          },
        },
@@ -3493,11 +3493,11 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "updated": {
        "id3": {
          "deleted": {
-            "roughness": 2,
+            "strokeStyle": "dotted",
            "version": 8,
          },
          "inserted": {
-            "roughness": 1,
+            "strokeStyle": "solid",
            "version": 7,
          },
        },
@@ -3518,11 +3518,11 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
      "updated": {
        "id3": {
          "deleted": {
-            "opacity": 60,
+            "roughness": 2,
            "version": 9,
          },
          "inserted": {
-            "opacity": 100,
+            "roughness": 1,
            "version": 8,
          },
        },
@@ -3530,6 +3530,31 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
    },
    "id": "id17",
  },
  {
    "appState": AppStateDelta {
      "delta": Delta {
        "deleted": {},
        "inserted": {},
      },
    },
    "elements": {
      "added": {},
      "removed": {},
      "updated": {
        "id3": {
          "deleted": {
            "opacity": 60,
            "version": 10,
          },
          "inserted": {
            "opacity": 100,
            "version": 9,
          },
        },
      },
    },
    "id": "id19",
  },
  {
    "appState": AppStateDelta {
      "delta": Delta {
@@ -3557,6 +3582,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
            "roughness": 2,
            "strokeColor": "#e03131",
            "strokeStyle": "dotted",
            "strokeWidth": 4,
            "version": 4,
          },
          "inserted": {
@@ -3566,12 +3592,13 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
            "roughness": 1,
            "strokeColor": "#1e1e1e",
            "strokeStyle": "solid",
            "strokeWidth": 2,
            "version": 3,
          },
        },
      },
    },
-    "id": "id19",
+    "id": "id21",
  },
 ]
 `;
@@ -3600,14 +3627,14 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3924,14 +3951,14 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -4248,14 +4275,14 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -5534,14 +5561,14 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -6752,14 +6779,14 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -7710,14 +7737,14 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -8711,14 +8738,14 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -9703,14 +9730,14 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -24,14 +24,14 @@ exports[`given element A and group of elements B and given both are selected whe
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -451,14 +451,14 @@ exports[`given element A and group of elements B and given both are selected whe
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -868,14 +868,14 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1435,14 +1435,14 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1643,14 +1643,14 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2028,14 +2028,14 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2274,14 +2274,14 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2455,14 +2455,14 @@ exports[`regression tests > can drag element that covers another element, while
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -2781,14 +2781,14 @@ exports[`regression tests > change the properties of a shape > [end of test] app
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1971c2",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3037,14 +3037,14 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3279,14 +3279,14 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3516,14 +3516,14 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -3775,14 +3775,14 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -4090,14 +4090,14 @@ exports[`regression tests > deleting last but one element in editing group shoul
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -4527,14 +4527,14 @@ exports[`regression tests > deselects group of selected elements on pointer down
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "down",
  "defaultSidebarDockedPreference": false,
@@ -4811,14 +4811,14 @@ exports[`regression tests > deselects group of selected elements on pointer up w
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -5088,14 +5088,14 @@ exports[`regression tests > deselects selected element on pointer down when poin
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "down",
  "defaultSidebarDockedPreference": false,
@@ -5297,14 +5297,14 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -5498,14 +5498,14 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -5892,14 +5892,14 @@ exports[`regression tests > drags selected elements from point inside common bou
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -6190,14 +6190,14 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -6933,10 +6933,14 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
            ],
            "roughness": 1,
            "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
            "strokeColor": "#1e1e1e",
            "strokeOptions": {
              "streamline": "0.50000",
              "variability": "constant",
            },
            "strokeStyle": "solid",
-            "strokeWidth": 2,
+            "strokeWidth": 1,
            "type": "freedraw",
            "version": 4,
            "width": 50,
@@ -6980,14 +6984,14 @@ exports[`regression tests > given a group of selected elements with an element t
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -7315,14 +7319,14 @@ exports[`regression tests > given a selected element A and a not selected elemen
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -7595,14 +7599,14 @@ exports[`regression tests > given selected element A with lower z-index than uns
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -7831,14 +7835,14 @@ exports[`regression tests > given selected element A with lower z-index than uns
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -8072,14 +8076,14 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -8253,14 +8257,14 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -8434,14 +8438,14 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -8615,14 +8619,14 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -8849,14 +8853,14 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -9081,14 +9085,14 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -9227,10 +9231,14 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] undo sta
            ],
            "roughness": 1,
            "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
            "strokeColor": "#1e1e1e",
            "strokeOptions": {
              "streamline": "0.50000",
              "variability": "constant",
            },
            "strokeStyle": "solid",
-            "strokeWidth": 2,
+            "strokeWidth": 1,
            "type": "freedraw",
            "version": 4,
            "width": 30,
@@ -9274,14 +9282,14 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -9508,14 +9516,14 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -9689,14 +9697,14 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -9921,14 +9929,14 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -10102,14 +10110,14 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -10248,10 +10256,14 @@ exports[`regression tests > key p selects freedraw tool > [end of test] undo sta
            ],
            "roughness": 1,
            "roundness": null,
-            "simulatePressure": true,
+            "simulatePressure": false,
            "strokeColor": "#1e1e1e",
            "strokeOptions": {
              "streamline": "0.50000",
              "variability": "constant",
            },
            "strokeStyle": "solid",
-            "strokeWidth": 2,
+            "strokeWidth": 1,
            "type": "freedraw",
            "version": 4,
            "width": 30,
@@ -10295,14 +10307,14 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -10476,14 +10488,14 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -11008,14 +11020,14 @@ exports[`regression tests > noop interaction after undo shouldn't create history
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -11289,14 +11301,14 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "down",
  "defaultSidebarDockedPreference": false,
@@ -11413,14 +11425,14 @@ exports[`regression tests > shift click on selected element should deselect it o
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -11614,14 +11626,14 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -11934,14 +11946,14 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -12364,14 +12376,14 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -13005,14 +13017,14 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -13132,14 +13144,14 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -13764,14 +13776,14 @@ exports[`regression tests > switches from group of selected elements to another
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "down",
  "defaultSidebarDockedPreference": false,
@@ -14104,14 +14116,14 @@ exports[`regression tests > switches selected element on pointer down > [end of
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "down",
  "defaultSidebarDockedPreference": false,
@@ -14369,14 +14381,14 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "down",
  "defaultSidebarDockedPreference": false,
@@ -14493,14 +14505,14 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -14859,14 +14871,14 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 8,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -14983,14 +14995,14 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1,6 +1,6 @@
 import React from "react";
-import { CODES } from "@excalidraw/common";
+import { CODES, STROKE_WIDTH } from "@excalidraw/common";
 import { copiedStyles } from "../actions/actionStyles";
 import { Excalidraw } from "../index";
@@ -78,7 +78,7 @@ describe("actionStyles", () => {
    expect(firstRect.strokeColor).toBe("#e03131");
    expect(firstRect.backgroundColor).toBe("#a5d8ff");
    expect(firstRect.fillStyle).toBe("cross-hatch");
-    expect(firstRect.strokeWidth).toBe(2); // Bold: 2
+    expect(firstRect.strokeWidth).toBe(STROKE_WIDTH.bold);
    expect(firstRect.strokeStyle).toBe("dotted");
    expect(firstRect.roughness).toBe(2); // Cartoonist: 2
    expect(firstRect.opacity).toBe(60);
@@ -1,7 +1,7 @@
 import React from "react";
 import { vi } from "vitest";
-import { KEYS, reseed } from "@excalidraw/common";
+import { KEYS, STROKE_WIDTH, reseed } from "@excalidraw/common";
 import { setDateTimeForTests } from "@excalidraw/common";
@@ -378,7 +378,7 @@ describe("contextMenu element", () => {
    expect(firstRect.strokeColor).toBe("#e03131");
    expect(firstRect.backgroundColor).toBe("#a5d8ff");
    expect(firstRect.fillStyle).toBe("cross-hatch");
-    expect(firstRect.strokeWidth).toBe(2); // Bold: 2
+    expect(firstRect.strokeWidth).toBe(STROKE_WIDTH.bold);
    expect(firstRect.strokeStyle).toBe("dotted");
    expect(firstRect.roughness).toBe(2); // Cartoonist: 2
    expect(firstRect.opacity).toBe(60);
@@ -0,0 +1,46 @@
 import { ROUNDNESS } from "@excalidraw/common";
 import { convertElementTypes } from "../components/ConvertElementTypePopup";
 import { Excalidraw } from "../index";
 import { API } from "./helpers/api";
 import { act, render } from "./test-utils";
 const { h } = window;
 describe("convert element type", () => {
  beforeEach(async () => {
    await render(<Excalidraw handleKeyboardGlobally={true} />);
  });
  // #9662
  it("recalculates roundness type when switching between generic shapes", () => {
    const rectangle = API.createElement({
      type: "rectangle",
      roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS }, // Dooesn't matter as long as it is set
    });
    API.setElements([rectangle]);
    API.setSelectedElements([rectangle]);
    act(() => {
      convertElementTypes(h.app, {
        conversionType: "generic",
        nextType: "diamond",
      });
    });
    expect(h.elements[0].type).toBe("diamond");
    expect(h.elements[0].roundness?.type).toBe(ROUNDNESS.PROPORTIONAL_RADIUS);
    act(() => {
      convertElementTypes(h.app, {
        conversionType: "generic",
        nextType: "rectangle",
      });
    });
    expect(h.elements[0].type).toBe("rectangle");
    expect(h.elements[0].roundness?.type).toBe(ROUNDNESS.ADAPTIVE_RADIUS);
  });
 });
@@ -154,7 +154,7 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
  "opacity": 10,
  "roughness": 2,
  "roundness": {
-    "type": 3,
+    "type": 2,
  },
  "seed": Any<Number>,
  "strokeColor": "red",
@@ -192,7 +192,7 @@ exports[`restoreElements > should restore correctly with rectangle, ellipse and
  "opacity": 10,
  "roughness": 2,
  "roundness": {
-    "type": 3,
+    "type": 2,
  },
  "seed": Any<Number>,
  "strokeColor": "red",
@@ -240,8 +240,12 @@ exports[`restoreElements > should restore freedraw element correctly 1`] = `
  "seed": Any<Number>,
  "simulatePressure": true,
  "strokeColor": "#1e1e1e",
  "strokeOptions": {
    "streamline": "0.50000",
    "variability": "variable",
  },
  "strokeStyle": "solid",
-  "strokeWidth": 2,
+  "strokeWidth": 1,
  "type": "freedraw",
  "updated": 1,
  "version": 2,
@@ -193,6 +193,53 @@ describe("restoreElements", () => {
    expect(restoredFreedraw.pressures).toEqual([0.1, 0.4]);
  });
  it("should restore freedraw stroke variability", () => {
    const freedrawElement = API.createElement({
      type: "freedraw",
      id: "id-freedraw-mode",
      points: [pointFrom(0, 0), pointFrom(10, 10)],
    });
    const [missing, bogusString, bogusNumber, valid, variable] =
      restore.restoreElements(
        [
          { ...freedrawElement, id: "missing", strokeOptions: undefined },
          {
            ...freedrawElement,
            id: "bogusString",
            strokeOptions: { variability: "scribble" },
          },
          {
            ...freedrawElement,
            id: "bogusNumber",
            strokeOptions: { variability: 42 },
          },
          {
            ...freedrawElement,
            id: "valid",
            strokeOptions: { variability: "constant", streamline: 0.8 },
          },
          {
            ...freedrawElement,
            id: "variable",
            strokeOptions: { variability: "variable", streamline: 0.8 },
          },
        ] as any,
        null,
      ) as ExcalidrawFreeDrawElement[];
    expect(missing.strokeOptions?.variability).toBe("variable");
    expect(bogusString.strokeOptions?.variability).toBe("variable");
    expect(bogusNumber.strokeOptions?.variability).toBe("variable");
    expect(valid.strokeOptions?.variability).toBe("constant");
    expect(variable.strokeOptions?.variability).toBe("variable");
    expect(missing.strokeOptions?.streamline).toBe(0.5);
    expect(bogusString.strokeOptions?.streamline).toBe(0.5);
    expect(bogusNumber.strokeOptions?.streamline).toBe(0.5);
    expect(valid.strokeOptions?.streamline).toBe(0.8);
    expect(variable.strokeOptions?.streamline).toBe(0.8);
  });
  it("should restore line and draw elements correctly", () => {
    const lineElement = API.createElement({ type: "line", id: "id-line01" });
@@ -640,6 +687,21 @@ describe("restoreElements", () => {
 });
 describe("restoreAppState", () => {
  it("should restore freedraw mode app state values", () => {
    expect(
      restore.restoreAppState(
        { currentItemStrokeVariability: "constant" } as any,
        null,
      ).currentItemStrokeVariability,
    ).toBe("constant");
    expect(
      restore.restoreAppState(
        { currentItemStrokeVariability: "variable" } as any,
        null,
      ).currentItemStrokeVariability,
    ).toBe("variable");
  });
  it("when appState is null it should return the local app state property", () => {
    const stubLocalAppState = getDefaultAppState();
    stubLocalAppState.cursorButton = "down";
@@ -688,6 +750,21 @@ describe("restoreAppState", () => {
    expect(restoredAppState.name).toBe(stubImportedAppState.name);
  });
  it("should migrate legacy current item stroke width to stroke width key", () => {
    const stubImportedAppState = {
      ...getDefaultAppState(),
      currentItemStrokeWidth: 4,
      currentItemStrokeWidthKey: undefined,
    } as any;
    const restoredAppState = restore.restoreAppState(
      stubImportedAppState,
      null,
    );
    expect(restoredAppState.currentItemStrokeWidthKey).toBe("bold");
  });
  it("should restore with current app state when imported data state is undefined", () => {
    const stubImportedAppState = {
      ...getDefaultAppState(),
@@ -1,5 +1,4 @@
 import { queryByText, queryByTestId } from "@testing-library/react";
 import React from "react";
 import { useMemo } from "react";
 import { THEME } from "@excalidraw/common";
@@ -433,7 +432,7 @@ describe("<Excalidraw/>", () => {
        const customMenu = useMemo(() => {
          return (
            <MainMenu>
-              <MainMenu.DefaultItems.ToggleTheme />
+              <MainMenu.DefaultItems.ToggleTheme allowSystemTheme={false} />
            </MainMenu>
          );
        }, []);
@@ -457,5 +456,32 @@ describe("<Excalidraw/>", () => {
        queryByTestId(container, "toggle-dark-mode")?.textContent,
      ).toContain(t("buttons.lightMode"));
    });
    it("should show theme toggle when the theme prop and onThemeChange are defined", async () => {
      const onThemeChange = vi.fn();
      const { container } = await render(
        <Excalidraw theme={THEME.DARK} onThemeChange={onThemeChange} />,
      );
      expect(h.state.theme).toBe(THEME.DARK);
      //open menu
      toggleMenu(container);
      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
      expect(darkModeToggle).toBeTruthy();
    });
    it("should call onThemeChange instead of mutating theme when defined", async () => {
      const onThemeChange = vi.fn();
      const { container } = await render(
        <Excalidraw theme={THEME.LIGHT} onThemeChange={onThemeChange} />,
      );
      //open menu
      toggleMenu(container);
      fireEvent.click(queryByTestId(container, "toggle-dark-mode")!);
      expect(onThemeChange).toHaveBeenCalledWith(THEME.DARK);
      expect(h.state.theme).toBe(THEME.LIGHT);
    });
  });
 });
@@ -0,0 +1,57 @@
 import type { ExcalidrawFreeDrawElement } from "@excalidraw/element/types";
 import { Excalidraw } from "../index";
 import { API } from "./helpers/api";
 import { UI } from "./helpers/ui";
 import { act, fireEvent, render, screen } from "./test-utils";
 const { h } = window;
 describe("freedraw mode action", () => {
  beforeEach(async () => {
    await render(<Excalidraw handleKeyboardGlobally={true} />);
  });
  afterEach(async () => {
    // https://github.com/floating-ui/floating-ui/issues/1908#issuecomment-1301553793
    await act(async () => {});
  });
  it("applies currentItemStrokeVariability to newly drawn freedraw elements", () => {
    // default app state draws constant-width strokes
    expect(h.state.currentItemStrokeVariability).toBe("constant");
    UI.createElement("freedraw", { x: 0, y: 0 });
    expect(
      (h.elements[0] as ExcalidrawFreeDrawElement).strokeOptions?.variability,
    ).toBe("constant");
    expect(
      (h.elements[0] as ExcalidrawFreeDrawElement).strokeOptions?.streamline,
    ).toBe(0.5);
  });
  it("toggling the radio updates both the selected element and the default", () => {
    const element = UI.createElement("freedraw", { x: 0, y: 0 });
    API.setSelectedElements([element.get()]);
    fireEvent.click(screen.getByTitle("Variable"));
    expect(
      (h.elements[0] as ExcalidrawFreeDrawElement).strokeOptions?.variability,
    ).toBe("variable");
    expect(
      (h.elements[0] as ExcalidrawFreeDrawElement).strokeOptions?.streamline,
    ).toBe(0.5);
    expect(h.state.currentItemStrokeVariability).toBe("variable");
    fireEvent.click(screen.getByTitle("Constant"));
    expect(
      (h.elements[0] as ExcalidrawFreeDrawElement).strokeOptions?.variability,
    ).toBe("constant");
    expect(
      (h.elements[0] as ExcalidrawFreeDrawElement).strokeOptions?.streamline,
    ).toBe(0.5);
    expect(h.state.currentItemStrokeVariability).toBe("constant");
  });
 });
@@ -4,7 +4,12 @@ import util from "util";
 import { pointFrom, type LocalPoint, type Radians } from "@excalidraw/math";
-import { DEFAULT_VERTICAL_ALIGN, ROUNDNESS, assertNever } from "@excalidraw/common";
+import {
  DEFAULT_VERTICAL_ALIGN,
  ROUNDNESS,
  assertNever,
  getStrokeWidthByKey,
 } from "@excalidraw/common";
 import {
  newArrowElement,
@@ -19,8 +24,7 @@ import {
  newTextElement,
 } from "@excalidraw/element";
-import { isLinearElementType } from "@excalidraw/element";
+import { isUsingAdaptiveRadius, getSelectedElements } from "@excalidraw/element";
 import { getSelectedElements } from "@excalidraw/element";
 import { selectGroupsForSelectedElements } from "@excalidraw/element";
 import { FONT_SIZES } from "@excalidraw/common";
@@ -201,6 +205,9 @@ export class API {
      ? ExcalidrawTextElement["containerId"]
      : never;
    points?: T extends "arrow" | "line" | "freedraw" ? readonly LocalPoint[] : never;
    strokeOptions?: T extends "freedraw"
      ? ExcalidrawFreeDrawElement["strokeOptions"]
      : never;
    locked?: boolean;
    fileId?: T extends "image" ? string : never;
    scale?: T extends "image" ? ExcalidrawImageElement["scale"] : never;
@@ -259,7 +266,9 @@ export class API {
      backgroundColor:
        rest.backgroundColor ?? appState.currentItemBackgroundColor,
      fillStyle: rest.fillStyle ?? appState.currentItemFillStyle,
-      strokeWidth: rest.strokeWidth ?? appState.currentItemStrokeWidth,
+      strokeWidth:
        rest.strokeWidth ??
        getStrokeWidthByKey(type, appState.currentItemStrokeWidthKey),
      strokeStyle: rest.strokeStyle ?? appState.currentItemStrokeStyle,
      roundness: (
        rest.roundness === undefined
@@ -267,9 +276,9 @@ export class API {
          : rest.roundness
      )
        ? {
-            type: isLinearElementType(type)
+            type: isUsingAdaptiveRadius(type)
-              ? ROUNDNESS.PROPORTIONAL_RADIUS
+                    ? ROUNDNESS.ADAPTIVE_RADIUS
-              : ROUNDNESS.ADAPTIVE_RADIUS,
+                    : ROUNDNESS.PROPORTIONAL_RADIUS,
          }
        : null,
      roughness: rest.roughness ?? appState.currentItemRoughness,
@@ -318,6 +327,7 @@ export class API {
          type: type as "freedraw",
          simulatePressure: true,
          points: rest.points,
          strokeOptions: rest.strokeOptions,
          ...base,
        });
        break;
@@ -2120,9 +2120,6 @@ describe("history", () => {
      await render(
        <Excalidraw handleKeyboardGlobally={true} isCollaborating={true} />,
      );
      // Pin the One Euro Filter clock to a fixed value so the smoothed
      // intermediate freedraw point is deterministic regardless of system load.
      vi.spyOn(h.app as any, "getPointerEventTimestamp").mockReturnValue(0);
    });
    it("should not override remote changes on different elements", async () => {
@@ -24,7 +24,7 @@ exports[`exportToSvg > with default arguments 1`] = `
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -6,12 +6,16 @@ import {
  FRAME_STYLE,
 } from "@excalidraw/common";
 import { pointFrom } from "@excalidraw/math";
 import type {
  ExcalidrawTextElement,
  FractionalIndex,
  NonDeletedExcalidrawElement,
 } from "@excalidraw/element/types";
 import type { LocalPoint } from "@excalidraw/math";
 import { prepareElementsForExport } from "../../data";
 import * as exportUtils from "../../scene/export";
 import {
@@ -192,6 +196,45 @@ describe("exportToSvg", () => {
    );
    expect(svgElement.innerHTML).toMatchSnapshot();
  });
  // #11439: a perfectly horizontal/vertical arrow has a zero-size bounding box.
  // The bound-text "gap" mask must use userSpaceOnUse units, otherwise its
  // objectBoundingBox region collapses to zero area and the whole arrow line
  // disappears from the SVG export (only the label remains).
  it("keeps a horizontal arrow with a bound label visible (#11439)", async () => {
    const arrow = API.createElement({
      type: "arrow",
      id: "arrow-11439",
      width: 200,
      height: 0,
      points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(200, 0)],
      boundElements: [{ type: "text", id: "label-11439" }],
    });
    const label = API.createElement({
      type: "text",
      id: "label-11439",
      text: "label",
      width: 50,
      height: 20,
      containerId: "arrow-11439",
    });
    const svgElement = await exportUtils.exportToSvg(
      [arrow, label] as NonDeletedExcalidrawElement[],
      DEFAULT_OPTIONS,
      null,
    );
    const mask = svgElement.querySelector("mask");
    expect(mask).not.toBeNull();
    expect(mask?.getAttribute("maskUnits")).toBe("userSpaceOnUse");
    // a degenerate (objectBoundingBox) region would be zero-area here
    expect(Number(mask?.getAttribute("width"))).toBeGreaterThan(0);
    expect(Number(mask?.getAttribute("height"))).toBeGreaterThan(0);
    // the masked arrow group still renders its line (not clipped away)
    expect(svgElement.querySelector("g[mask] path")).not.toBeNull();
  });
 });
 describe("exporting frames", () => {
@@ -1,6 +1,7 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "rootDir": "../",
    "outDir": "./dist/types"
  },
  "include": ["**/*"],
@@ -4,6 +4,7 @@ import type {
  throttleRAF,
  MIME_TYPES,
  EditorInterface,
  StrokeWidthKey,
 } from "@excalidraw/common";
 import type { LinearElementEditor } from "@excalidraw/element";
@@ -33,6 +34,7 @@ import type {
  ExcalidrawNonSelectionElement,
  BindMode,
  ExcalidrawTextElement,
  StrokeVariability,
 } from "@excalidraw/element/types";
 import type {
@@ -362,10 +364,10 @@ export interface AppState {
  currentItemStrokeColor: string;
  currentItemBackgroundColor: string;
  currentItemFillStyle: ExcalidrawElement["fillStyle"];
-  currentItemStrokeWidth: number;
+  currentItemStrokeWidthKey: StrokeWidthKey;
  currentItemFreedrawConstantPressure: boolean;
  currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
  currentItemRoughness: number;
  currentItemStrokeVariability: StrokeVariability;
  currentItemOpacity: number;
  currentItemFontFamily: FontFamilyValues;
  currentItemFontSize: number;
@@ -574,6 +576,7 @@ export interface ExcalidrawProps {
    appState: AppState,
    files: BinaryFiles,
  ) => void;
  onThemeChange?: (theme: Theme | "system") => void;
  /**
   * note: only subscribes if the props.onIncrement is defined on initial render
   */
@@ -751,6 +754,11 @@ export type CanvasActions = Partial<{
  export: false | ExportOpts;
  loadScene: boolean;
  saveToActiveFile: boolean;
  /**
   * defaults to true if `props.theme` is omitted or `props.onThemeChange`
   * is supplied (at which point the theme is considered as host-app controlled),
   * else default to false
   * */
  toggleTheme: boolean | null;
  saveAsImage: boolean;
 }>;
@@ -910,10 +918,7 @@ export type PointerDownState = Readonly<{
  // We need to have these in the state so that we can unsubscribe them
  eventListeners: {
    // It's defined on the initial pointer down event
-    onMove:
+    onMove: null | ReturnType<typeof throttleRAF>;
      | null
      | ReturnType<typeof throttleRAF>
      | (((event: PointerEvent) => void) & { flush(): void; cancel(): void });
    // It's defined on the initial pointer down event
    onUp: null | ((event: PointerEvent) => void);
    // It's defined on the initial pointer down event
@@ -1,7 +1,8 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
-    "outDir": "./dist/types"
+    "outDir": "./dist/types",
    "rootDir": "../"
  },
  "include": ["src/**/*", "global.d.ts"],
  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
@@ -0,0 +1,21 @@
 MIT License
 Copyright (c) 2023 Excalidraw
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
@@ -0,0 +1,23 @@
 # Laser Pointer
 ## Usage
    import { LaserPointer } from '@excalidraw/laser-pointer'
    const stroke = new LaserPointer(options)
    stroke.addPoint([100, 200, 1])
    stroke.close()
    const outline = stroke.getStrokeOutline()
 ## Options
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `size` | `number` | `2` | Radius of the stroke. |
 | `streamline` | `number` | `0.42` | Interpolate input points to reduce jitter. |
 | `simplify` | `number` | `0.1` | Reduce stroke size by sacrificing precision. |
 | `simplifyPhase` | `"input" \| "output" \| "tail" ` | `"output"` | Decides when the simplification algorithm should be applied. |
 | `sizeMapping` | `(details: SizeMappingDetails) => number` | `() => 1` | Maps each point to a value between `0.0` and `1.0`. |
 | `keepHead` | `boolean` | `false` | Whether size mapping should influence the head of the stroke. |
@@ -0,0 +1,34 @@
 {
  "name": "@excalidraw/laser-pointer",
  "version": "1.3.1",
  "description": "Generate outline for laser pointer tool",
  "type": "module",
  "types": "./dist/types/laser-pointer/src/index.d.ts",
  "main": "./dist/prod/index.js",
  "module": "./dist/prod/index.js",
  "exports": {
    ".": {
      "types": "./dist/types/laser-pointer/src/index.d.ts",
      "development": "./dist/dev/index.js",
      "production": "./dist/prod/index.js",
      "default": "./dist/prod/index.js"
    }
  },
  "files": [
    "dist/*"
  ],
  "keywords": [
    "excalidraw",
    "laserpointer"
  ],
  "bugs": "https://github.com/excalidraw/excalidraw/issues",
  "repository": "https://github.com/excalidraw/excalidraw",
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "gen:types": "rimraf types && tsc",
    "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
  }
 }
@@ -0,0 +1,2 @@
 export * from "./state";
 export type { Point } from "./math";
@@ -0,0 +1,105 @@
 export type Point = [x: number, y: number, r: number];
 export function add([ax, ay, ar]: Point, [bx, by, br]: Point): Point {
  return [ax + bx, ay + by, ar + br];
 }
 export function sub([ax, ay, ar]: Point, [bx, by, br]: Point): Point {
  return [ax - bx, ay - by, ar - br];
 }
 export function smul([x, y, r]: Point, s: number): Point {
  return [x * s, y * s, r * s];
 }
 export function norm([x, y, r]: Point): Point {
  return [x / Math.sqrt(x ** 2 + y ** 2), y / Math.sqrt(x ** 2 + y ** 2), r];
 }
 export function rot([x, y, r]: Point, rad: number): Point {
  return [
    Math.cos(rad) * x - Math.sin(rad) * y,
    Math.sin(rad) * x + Math.cos(rad) * y,
    r,
  ];
 }
 export function plerp(a: Point, b: Point, t: number): Point {
  return add(a, smul(sub(b, a), t));
 }
 export function lerp(a: number, b: number, t: number): number {
  return a + (b - a) * t;
 }
 export function angle(p: Point, p1: Point, p2: Point) {
  return (
    Math.atan2(p2[1] - p[1], p2[0] - p[0]) -
    Math.atan2(p1[1] - p[1], p1[0] - p[0])
  );
 }
 export function normAngle(a: number) {
  return Math.atan2(Math.sin(a), Math.cos(a));
 }
 export function mag([x, y]: Point) {
  return Math.sqrt(x ** 2 + y ** 2);
 }
 export function dist([ax, ay]: Point, [bx, by]: Point): number {
  return Math.sqrt((bx - ax) ** 2 + (by - ay) ** 2);
 }
 export function getCircleAndPerpendicularLineIntersectionsAtPoint(
  point: Point,
  direction: Point,
  radius: number,
 ): [Point, Point] {
  return [
    add(point, smul(norm(rot(direction, Math.PI / 2)), radius)),
    add(point, smul(norm(rot(direction, -Math.PI / 2)), radius)),
  ];
 }
 export function runLength(ps: Point[]): number {
  if (ps.length < 2) {
    return 0;
  }
  let len = 0;
  for (let i = 1; i <= ps.length - 1; i++) {
    len += dist(ps[i - 1], ps[i]);
  }
  len += dist(ps[ps.length - 2], ps[ps.length - 1]);
  return len;
 }
 export const clamp = (v: number, min: number, max: number) =>
  Math.max(min, Math.min(max, v));
 export function distancePointToSegment(p3: Point, p1: Point, p2: Point) {
  const sMag = dist(p1, p2);
  if (sMag === 0) {
    return dist(p3, p1);
  }
  const u = clamp(
    ((p3[0] - p1[0]) * (p2[0] - p1[0]) + (p3[1] - p1[1]) * (p2[1] - p1[1])) /
      sMag ** 2,
    0,
    1,
  );
  const pi: Point = [
    p1[0] + u * (p2[0] - p1[0]),
    p1[1] + u * (p2[1] - p1[1]),
    p3[2],
  ];
  return dist(pi, p3);
 }
@@ -0,0 +1,42 @@
 import { type Point, distancePointToSegment } from "./math";
 export function douglasPeucker(points: Point[], epsilon: number): Point[] {
  if (epsilon === 0) {
    return points;
  }
  if (points.length <= 2) {
    return points;
  }
  const first = points[0];
  const last = points[points.length - 1];
  const [maxDistance, maxIndex] = points.reduce(
    ([maxDistance, maxIndex], point, index) => {
      const distance = distancePointToSegment(point, first, last);
      return distance > maxDistance
        ? [distance, index]
        : [maxDistance, maxIndex];
    },
    [0, -1],
  );
  if (maxDistance >= epsilon) {
    const maxIndexPoint = points[maxIndex];
    return [
      ...douglasPeucker(
        [first, ...points.slice(1, maxIndex), maxIndexPoint],
        epsilon,
      ).slice(0, -1),
      maxIndexPoint,
      ...douglasPeucker(
        [maxIndexPoint, ...points.slice(maxIndex, -1), last],
        epsilon,
      ).slice(1),
    ];
  }
  return [first, last];
 }
@@ -0,0 +1,377 @@
 import * as m from "./math";
 import { douglasPeucker } from "./simplify";
 import type { Point } from "./math";
 export type SizeMappingDetails = {
  pressure: number;
  runningLength: number;
  currentIndex: number;
  totalLength: number;
 };
 export type LaserPointerOptions = {
  size: number;
  streamline: number;
  simplify: number;
  simplifyPhase: "tail" | "output" | "input";
  keepHead: boolean;
  sizeMapping: (details: SizeMappingDetails) => number;
 };
 export class LaserPointer {
  static defaults: LaserPointerOptions = {
    size: 2,
    streamline: 0.45,
    simplify: 0.1,
    simplifyPhase: "output",
    keepHead: false,
    sizeMapping: () => 1,
  };
  static constants = {
    cornerDetectionMaxAngle: 75,
    cornerDetectionVariance: (s: number) => (s > 35 ? 0.5 : 1),
    maxTailLength: 50,
  };
  options: LaserPointerOptions;
  constructor(options: Partial<LaserPointerOptions>) {
    this.options = Object.assign({}, LaserPointer.defaults, options);
  }
  originalPoints: Point[] = [];
  private stablePoints: Point[] = [];
  private tailPoints: Point[] = [];
  private isFresh = true;
  private get lastPoint(): Point {
    return (
      this.tailPoints[this.tailPoints.length - 1] ??
      this.stablePoints[this.stablePoints.length - 1]
    );
  }
  addPoint(point: Point) {
    const lastPoint = this.originalPoints[this.originalPoints.length - 1];
    if (lastPoint && lastPoint[0] === point[0] && lastPoint[1] === point[1]) {
      return;
    }
    this.originalPoints.push(point);
    if (this.isFresh) {
      this.isFresh = false;
      this.stablePoints.push(point);
      return;
    }
    if (this.options.streamline > 0) {
      point = m.plerp(this.lastPoint, point, 1 - this.options.streamline);
    }
    this.tailPoints.push(point);
    if (m.runLength(this.tailPoints) > LaserPointer.constants.maxTailLength) {
      this.stabilizeTail();
    }
  }
  close() {
    this.stabilizeTail();
  }
  stabilizeTail() {
    if (this.options.simplify > 0 && this.options.simplifyPhase === "tail") {
      throw new Error("Not implemented yet");
    } else {
      this.stablePoints.push(...this.tailPoints);
      this.tailPoints = [];
    }
  }
  private getSize(
    sizeOverride: number | undefined,
    pressure: number,
    index: number,
    totalLength: number,
    runningLength: number,
  ) {
    return (
      (sizeOverride ?? this.options.size) *
      this.options.sizeMapping({
        pressure,
        runningLength,
        currentIndex: index,
        totalLength,
      })
    );
  }
  getStrokeOutline(sizeOverride?: number | undefined): Point[] {
    if (this.isFresh) {
      return [];
    }
    let points = [...this.stablePoints, ...this.tailPoints];
    if (this.options.simplify > 0 && this.options.simplifyPhase === "input") {
      points = douglasPeucker(points, this.options.simplify);
    }
    const len = points.length;
    if (len === 0) {
      return [];
    }
    if (len === 1) {
      const c = points[0];
      const size = this.getSize(sizeOverride, c[2], 0, len, 0);
      if (size < 0.5) {
        return [];
      }
      const ps: Point[] = [];
      for (let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16) {
        ps.push(m.add(c, m.smul(m.rot([1, 0, 0] as Point, theta), size)));
      }
      ps.push(
        m.add(
          c,
          m.smul(
            [1, 0, 0] as Point,
            this.getSize(sizeOverride, c[2], 0, len, 0),
          ),
        ),
      );
      return ps;
    }
    if (len === 2) {
      const c = points[0];
      const n = points[1];
      const cSize = this.getSize(sizeOverride, c[2], 0, len, 0);
      const nSize = this.getSize(sizeOverride, n[2], 0, len, 0);
      if (cSize < 0.5 || nSize < 0.5) {
        return [];
      }
      const ps: Point[] = [];
      const pAngle = m.angle(c, [c[0], c[1] - 100, c[2]] as Point, n);
      for (
        let theta = pAngle;
        theta <= Math.PI + pAngle;
        theta += Math.PI / 16
      ) {
        ps.push(m.add(c, m.smul(m.rot([1, 0, 0] as Point, theta), cSize)));
      }
      for (
        let theta = Math.PI + pAngle;
        theta <= Math.PI * 2 + pAngle;
        theta += Math.PI / 16
      ) {
        ps.push(m.add(n, m.smul(m.rot([1, 0, 0] as Point, theta), nSize)));
      }
      ps.push(ps[0]);
      return ps;
    }
    const forwardPoints: Point[] = [];
    const backwardPoints: Point[] = [];
    let speed = 0;
    let prevSpeed = 0;
    let visibleStartIndex = 0;
    let runningLength = 0;
    for (let i = 1; i < len - 1; i++) {
      const p = points[i - 1];
      const c = points[i];
      const n = points[i + 1];
      const pressure = c[2];
      const d = m.dist(p, c);
      runningLength += d;
      speed = prevSpeed + (d - prevSpeed) * 0.2;
      const cSize = this.getSize(sizeOverride, pressure, i, len, runningLength);
      if (cSize === 0) {
        visibleStartIndex = i + 1;
        continue;
      }
      const dirPC = m.norm(m.sub(p, c));
      const dirNC = m.norm(m.sub(n, c));
      const p1dirPC = m.rot(dirPC, Math.PI / 2);
      const p2dirPC = m.rot(dirPC, -Math.PI / 2);
      const p1dirNC = m.rot(dirNC, Math.PI / 2);
      const p2dirNC = m.rot(dirNC, -Math.PI / 2);
      const p1PC = m.add(c, m.smul(p1dirPC, cSize));
      const p2PC = m.add(c, m.smul(p2dirPC, cSize));
      const p1NC = m.add(c, m.smul(p1dirNC, cSize));
      const p2NC = m.add(c, m.smul(p2dirNC, cSize));
      const ftdir = m.add(p1dirPC, p2dirNC);
      const btdir = m.add(p2dirPC, p1dirNC);
      const paPC = m.add(
        c,
        m.smul(m.mag(ftdir) === 0 ? dirPC : m.norm(ftdir), cSize),
      );
      const paNC = m.add(
        c,
        m.smul(m.mag(btdir) === 0 ? dirNC : m.norm(btdir), cSize),
      );
      const cAngle = m.normAngle(m.angle(c, p, n));
      const D_ANGLE =
        (LaserPointer.constants.cornerDetectionMaxAngle / 180) *
        Math.PI *
        LaserPointer.constants.cornerDetectionVariance(speed);
      if (Math.abs(cAngle) < D_ANGLE) {
        const tAngle = Math.abs(m.normAngle(Math.PI - cAngle)); // turn angle
        if (tAngle === 0) {
          continue;
        }
        if (cAngle < 0) {
          backwardPoints.push(p2PC, paNC);
          for (let theta = 0; theta <= tAngle; theta += tAngle / 4) {
            forwardPoints.push(m.add(c, m.rot(m.smul(p1dirPC, cSize), theta)));
          }
          for (let theta = tAngle; theta >= 0; theta -= tAngle / 4) {
            backwardPoints.push(m.add(c, m.rot(m.smul(p1dirPC, cSize), theta)));
          }
          backwardPoints.push(paNC, p1NC);
        } else {
          forwardPoints.push(p1PC, paPC);
          for (let theta = 0; theta <= tAngle; theta += tAngle / 4) {
            backwardPoints.push(
              m.add(c, m.rot(m.smul(p1dirPC, -cSize), -theta)),
            );
          }
          for (let theta = tAngle; theta >= 0; theta -= tAngle / 4) {
            forwardPoints.push(
              m.add(c, m.rot(m.smul(p1dirPC, -cSize), -theta)),
            );
          }
          forwardPoints.push(paPC, p2NC);
        }
      } else {
        forwardPoints.push(paPC);
        backwardPoints.push(paNC);
      }
      prevSpeed = speed;
    }
    if (visibleStartIndex >= len - 2) {
      if (this.options.keepHead) {
        const c = points[len - 1];
        const ps: Point[] = [];
        for (let theta = 0; theta <= Math.PI * 2; theta += Math.PI / 16) {
          ps.push(
            m.add(
              c,
              m.smul(m.rot([1, 0, 0] as Point, theta), this.options.size),
            ),
          );
        }
        ps.push(m.add(c, m.smul([1, 0, 0] as Point, this.options.size)));
        return ps;
      }
      return [];
    }
    const first = points[visibleStartIndex];
    const second = points[visibleStartIndex + 1];
    const penultimate = points[len - 2];
    const ultimate = points[len - 1];
    const dirFS = m.norm(m.sub(second, first));
    const dirPU = m.norm(m.sub(penultimate, ultimate));
    const ppdirFS = m.rot(dirFS, -Math.PI / 2);
    const ppdirPU = m.rot(dirPU, Math.PI / 2);
    const startCapSize = this.getSize(sizeOverride, first[2], 0, len, 0);
    const startCap: Point[] = [];
    const endCapSize = this.options.keepHead
      ? this.options.size
      : this.getSize(sizeOverride, penultimate[2], len - 2, len, runningLength);
    const endCap: Point[] = [];
    // Lowered threshold to 0.1,
    // ensuring virtually all strokes get proper rounded caps for visual consistency.
    if (startCapSize > 0.1) {
      for (let theta = 0; theta <= Math.PI; theta += Math.PI / 16) {
        startCap.unshift(
          m.add(first, m.rot(m.smul(ppdirFS, startCapSize), -theta)),
        );
      }
      startCap.unshift(m.add(first, m.smul(ppdirFS, -startCapSize)));
    } else {
      startCap.push(first);
    }
    for (let theta = 0; theta <= Math.PI * 3; theta += Math.PI / 16) {
      endCap.push(m.add(ultimate, m.rot(m.smul(ppdirPU, -endCapSize), -theta)));
    }
    const strokeOutline = [
      ...startCap,
      ...forwardPoints,
      ...endCap.reverse(),
      ...backwardPoints.reverse(),
    ];
    if (startCap.length > 0) {
      strokeOutline.push(startCap[0]);
    }
    if (this.options.simplify > 0 && this.options.simplifyPhase === "output") {
      return douglasPeucker(strokeOutline, this.options.simplify);
    }
    return strokeOutline;
  }
 }
@@ -0,0 +1,9 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./dist/types",
    "rootDir": "../"
  },
  "include": ["src/**/*", "global.d.ts"],
  "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]
 }
@@ -1,6 +1,7 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "rootDir": "../",
    "outDir": "./dist/types"
  },
  "include": ["src/**/*", "global.d.ts"],
@@ -6,7 +6,7 @@
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "emitDeclarationOnly": true,
@@ -17,6 +17,8 @@
      "@excalidraw/element/*": ["./element/src/*"],
      "@excalidraw/excalidraw": ["./excalidraw/index.tsx"],
      "@excalidraw/excalidraw/*": ["./excalidraw/*"],
      "@excalidraw/laser-pointer": ["./laser-pointer/src/index.ts"],
      "@excalidraw/laser-pointer/*": ["./laser-pointer/src/*"],
      "@excalidraw/math": ["./math/src/index.ts"],
      "@excalidraw/math/*": ["./math/src/*"],
      "@excalidraw/utils": ["./utils/src/index.ts"],
@@ -52,6 +52,7 @@
    "@excalidraw/laser-pointer": "1.3.1",
    "browser-fs-access": "0.38.0",
    "pako": "2.0.3",
    "perfect-freehand": "1.2.0",
    "png-chunk-text": "1.0.0",
    "png-chunks-encode": "1.0.0",
    "png-chunks-extract": "1.0.0",
@@ -1,73 +0,0 @@
 import {
  vectorCross,
  vectorFromPoint,
  type GlobalPoint,
  type LocalPoint,
 } from "@excalidraw/math";
 import type { Bounds } from "@excalidraw/common";
 export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
 export function getBBox<P extends LocalPoint | GlobalPoint>(
  line: LineSegment<P>,
 ): Bounds {
  return [
    Math.min(line[0][0], line[1][0]),
    Math.min(line[0][1], line[1][1]),
    Math.max(line[0][0], line[1][0]),
    Math.max(line[0][1], line[1][1]),
  ];
 }
 export function doBBoxesIntersect(a: Bounds, b: Bounds) {
  return a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
 }
 const EPSILON = 0.000001;
 export function isPointOnLine<P extends GlobalPoint | LocalPoint>(
  l: LineSegment<P>,
  p: P,
 ) {
  const p1 = vectorFromPoint(l[1], l[0]);
  const p2 = vectorFromPoint(p, l[0]);
  const r = vectorCross(p1, p2);
  return Math.abs(r) < EPSILON;
 }
 export function isPointRightOfLine<P extends GlobalPoint | LocalPoint>(
  l: LineSegment<P>,
  p: P,
 ) {
  const p1 = vectorFromPoint(l[1], l[0]);
  const p2 = vectorFromPoint(p, l[0]);
  return vectorCross(p1, p2) < 0;
 }
 export function isLineSegmentTouchingOrCrossingLine<
  P extends GlobalPoint | LocalPoint,
 >(a: LineSegment<P>, b: LineSegment<P>) {
  return (
    isPointOnLine(a, b[0]) ||
    isPointOnLine(a, b[1]) ||
    (isPointRightOfLine(a, b[0])
      ? !isPointRightOfLine(a, b[1])
      : isPointRightOfLine(a, b[1]))
  );
 }
 // https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
 export function doLineSegmentsIntersect<P extends GlobalPoint | LocalPoint>(
  a: LineSegment<P>,
  b: LineSegment<P>,
 ) {
  return (
    doBBoxesIntersect(getBBox(a), getBBox(b)) &&
    isLineSegmentTouchingOrCrossingLine(a, b) &&
    isLineSegmentTouchingOrCrossingLine(b, a)
  );
 }
@@ -1,4 +1,3 @@
 export * from "./export";
-export * from "./withinBounds";
+export { elementsOverlappingBBox } from "@excalidraw/element";
 export * from "./bbox";
 export { getCommonBounds } from "@excalidraw/element";
@@ -1,228 +0,0 @@
 import { arrayToMap, type Bounds } from "@excalidraw/common";
 import { getElementBounds } from "@excalidraw/element";
 import {
  isArrowElement,
  isExcalidrawElement,
  isFreeDrawElement,
  isLinearElement,
  isTextElement,
 } from "@excalidraw/element";
 import {
  rangeIncludesValue,
  pointFrom,
  pointRotateRads,
  rangeInclusive,
 } from "@excalidraw/math";
 import type {
  ExcalidrawElement,
  ExcalidrawFreeDrawElement,
  ExcalidrawLinearElement,
  NonDeletedExcalidrawElement,
 } from "@excalidraw/element/types";
 import type { LocalPoint } from "@excalidraw/math";
 type Element = NonDeletedExcalidrawElement;
 type Elements = readonly NonDeletedExcalidrawElement[];
 type Points = readonly LocalPoint[];
 /** @returns vertices relative to element's top-left [0,0] position  */
 const getNonLinearElementRelativePoints = (
  element: Exclude<
    Element,
    ExcalidrawLinearElement | ExcalidrawFreeDrawElement
  >,
 ): [
  TopLeft: LocalPoint,
  TopRight: LocalPoint,
  BottomRight: LocalPoint,
  BottomLeft: LocalPoint,
 ] => {
  if (element.type === "diamond") {
    return [
      pointFrom(element.width / 2, 0),
      pointFrom(element.width, element.height / 2),
      pointFrom(element.width / 2, element.height),
      pointFrom(0, element.height / 2),
    ];
  }
  return [
    pointFrom(0, 0),
    pointFrom(0 + element.width, 0),
    pointFrom(0 + element.width, element.height),
    pointFrom(0, element.height),
  ];
 };
 /** @returns vertices relative to element's top-left [0,0] position  */
 const getElementRelativePoints = (element: ExcalidrawElement): Points => {
  if (isLinearElement(element) || isFreeDrawElement(element)) {
    return element.points;
  }
  return getNonLinearElementRelativePoints(element);
 };
 const getMinMaxPoints = (points: Points) => {
  const ret = points.reduce(
    (limits, [x, y]) => {
      limits.minY = Math.min(limits.minY, y);
      limits.minX = Math.min(limits.minX, x);
      limits.maxX = Math.max(limits.maxX, x);
      limits.maxY = Math.max(limits.maxY, y);
      return limits;
    },
    {
      minX: Infinity,
      minY: Infinity,
      maxX: -Infinity,
      maxY: -Infinity,
      cx: 0,
      cy: 0,
    },
  );
  ret.cx = (ret.maxX + ret.minX) / 2;
  ret.cy = (ret.maxY + ret.minY) / 2;
  return ret;
 };
 const getRotatedBBox = (element: Element): Bounds => {
  const points = getElementRelativePoints(element);
  const { cx, cy } = getMinMaxPoints(points);
  const centerPoint = pointFrom<LocalPoint>(cx, cy);
  const rotatedPoints = points.map((p) =>
    pointRotateRads(p, centerPoint, element.angle),
  );
  const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
  return [
    minX + element.x,
    minY + element.y,
    maxX + element.x,
    maxY + element.y,
  ];
 };
 export const isElementInsideBBox = (
  element: Element,
  bbox: Bounds,
  eitherDirection = false,
 ): boolean => {
  const elementBBox = getRotatedBBox(element);
  const elementInsideBbox =
    bbox[0] <= elementBBox[0] &&
    bbox[2] >= elementBBox[2] &&
    bbox[1] <= elementBBox[1] &&
    bbox[3] >= elementBBox[3];
  if (!eitherDirection) {
    return elementInsideBbox;
  }
  if (elementInsideBbox) {
    return true;
  }
  return (
    elementBBox[0] <= bbox[0] &&
    elementBBox[2] >= bbox[2] &&
    elementBBox[1] <= bbox[1] &&
    elementBBox[3] >= bbox[3]
  );
 };
 export const elementPartiallyOverlapsWithOrContainsBBox = (
  element: Element,
  bbox: Bounds,
 ): boolean => {
  const elementBBox = getRotatedBBox(element);
  return (
    (rangeIncludesValue(elementBBox[0], rangeInclusive(bbox[0], bbox[2])) ||
      rangeIncludesValue(
        bbox[0],
        rangeInclusive(elementBBox[0], elementBBox[2]),
      )) &&
    (rangeIncludesValue(elementBBox[1], rangeInclusive(bbox[1], bbox[3])) ||
      rangeIncludesValue(
        bbox[1],
        rangeInclusive(elementBBox[1], elementBBox[3]),
      ))
  );
 };
 export const elementsOverlappingBBox = ({
  elements,
  bounds,
  type,
  errorMargin = 0,
 }: {
  elements: Elements;
  bounds: Bounds | ExcalidrawElement;
  /** safety offset. Defaults to 0. */
  errorMargin?: number;
  /**
   * - overlap: elements overlapping or inside bounds
   * - contain: elements inside bounds or bounds inside elements
   * - inside: elements inside bounds
   **/
  type: "overlap" | "contain" | "inside";
 }) => {
  if (isExcalidrawElement(bounds)) {
    bounds = getElementBounds(bounds, arrayToMap(elements));
  }
  const adjustedBBox: Bounds = [
    bounds[0] - errorMargin,
    bounds[1] - errorMargin,
    bounds[2] + errorMargin,
    bounds[3] + errorMargin,
  ];
  const includedElementSet = new Set<string>();
  for (const element of elements) {
    if (includedElementSet.has(element.id)) {
      continue;
    }
    const isOverlaping =
      type === "overlap"
        ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox)
        : type === "inside"
        ? isElementInsideBBox(element, adjustedBBox)
        : isElementInsideBBox(element, adjustedBBox, true);
    if (isOverlaping) {
      includedElementSet.add(element.id);
      if (element.boundElements) {
        for (const boundElement of element.boundElements) {
          includedElementSet.add(boundElement.id);
        }
      }
      if (isTextElement(element) && element.containerId) {
        includedElementSet.add(element.containerId);
      }
      if (isArrowElement(element)) {
        if (element.startBinding) {
          includedElementSet.add(element.startBinding.elementId);
        }
        if (element.endBinding) {
          includedElementSet.add(element.endBinding?.elementId);
        }
      }
    }
  }
  return elements.filter((element) => includedElementSet.has(element.id));
 };
@@ -24,14 +24,14 @@ exports[`exportToSvg > with default arguments 1`] = `
  "currentItemFillStyle": "solid",
  "currentItemFontFamily": 5,
  "currentItemFontSize": 20,
  "currentItemFreedrawConstantPressure": true,
  "currentItemOpacity": 100,
  "currentItemRoughness": 1,
  "currentItemRoundness": "sharp",
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeVariability": "constant",
  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -23,7 +23,7 @@ exports[`exportToSvg > with default arguments 1`] = `
  "currentItemStartArrowhead": null,
  "currentItemStrokeColor": "#1e1e1e",
  "currentItemStrokeStyle": "solid",
-  "currentItemStrokeWidth": 2,
+  "currentItemStrokeWidthKey": "medium",
  "currentItemTextAlign": "left",
  "cursorButton": "up",
  "defaultSidebarDockedPreference": false,
@@ -1,264 +0,0 @@
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 import type { Bounds } from "@excalidraw/common";
 import {
  elementPartiallyOverlapsWithOrContainsBBox,
  elementsOverlappingBBox,
  isElementInsideBBox,
 } from "../src/withinBounds";
 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("isElementInsideBBox()", () => {
  it("should return true if element is fully inside", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    // bbox contains element
    expect(isElementInsideBBox(makeElement(0, 0, 100, 100), bbox)).toBe(true);
    expect(isElementInsideBBox(makeElement(10, 10, 90, 90), bbox)).toBe(true);
  });
  it("should return false if element is only partially overlapping", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    // element contains bbox
    expect(isElementInsideBBox(makeElement(-10, -10, 110, 110), bbox)).toBe(
      false,
    );
    // element overlaps bbox from top-left
    expect(isElementInsideBBox(makeElement(-10, -10, 100, 100), bbox)).toBe(
      false,
    );
    // element overlaps bbox from top-right
    expect(isElementInsideBBox(makeElement(90, -10, 100, 100), bbox)).toBe(
      false,
    );
    // element overlaps bbox from bottom-left
    expect(isElementInsideBBox(makeElement(-10, 90, 100, 100), bbox)).toBe(
      false,
    );
    // element overlaps bbox from bottom-right
    expect(isElementInsideBBox(makeElement(90, 90, 100, 100), bbox)).toBe(
      false,
    );
  });
  it("should return false if element outside", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    // outside diagonally
    expect(isElementInsideBBox(makeElement(110, 110, 100, 100), bbox)).toBe(
      false,
    );
    // outside on the left
    expect(isElementInsideBBox(makeElement(-110, 10, 50, 50), bbox)).toBe(
      false,
    );
    // outside on the right
    expect(isElementInsideBBox(makeElement(110, 10, 50, 50), bbox)).toBe(false);
    // outside on the top
    expect(isElementInsideBBox(makeElement(10, -110, 50, 50), bbox)).toBe(
      false,
    );
    // outside on the bottom
    expect(isElementInsideBBox(makeElement(10, 110, 50, 50), bbox)).toBe(false);
  });
  it("should return true if bbox contains element and flag enabled", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    // element contains bbox
    expect(
      isElementInsideBBox(makeElement(-10, -10, 110, 110), bbox, true),
    ).toBe(true);
    // bbox contains element
    expect(isElementInsideBBox(makeElement(0, 0, 100, 100), bbox)).toBe(true);
    expect(isElementInsideBBox(makeElement(10, 10, 90, 90), bbox)).toBe(true);
  });
 });
 describe("elementPartiallyOverlapsWithOrContainsBBox()", () => {
  it("should return true if element overlaps, is inside, or contains", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    // bbox contains element
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(0, 0, 100, 100),
        bbox,
      ),
    ).toBe(true);
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(10, 10, 90, 90),
        bbox,
      ),
    ).toBe(true);
    // element contains bbox
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(-10, -10, 110, 110),
        bbox,
      ),
    ).toBe(true);
    // element overlaps bbox from top-left
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(-10, -10, 100, 100),
        bbox,
      ),
    ).toBe(true);
    // element overlaps bbox from top-right
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(90, -10, 100, 100),
        bbox,
      ),
    ).toBe(true);
    // element overlaps bbox from bottom-left
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(-10, 90, 100, 100),
        bbox,
      ),
    ).toBe(true);
    // element overlaps bbox from bottom-right
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(90, 90, 100, 100),
        bbox,
      ),
    ).toBe(true);
  });
  it("should return false if element does not overlap", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    // outside diagonally
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(110, 110, 100, 100),
        bbox,
      ),
    ).toBe(false);
    // outside on the left
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(-110, 10, 50, 50),
        bbox,
      ),
    ).toBe(false);
    // outside on the right
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(110, 10, 50, 50),
        bbox,
      ),
    ).toBe(false);
    // outside on the top
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(10, -110, 50, 50),
        bbox,
      ),
    ).toBe(false);
    // outside on the bottom
    expect(
      elementPartiallyOverlapsWithOrContainsBBox(
        makeElement(10, 110, 50, 50),
        bbox,
      ),
    ).toBe(false);
  });
 });
 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, 90, 90);
    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, rectContainingBBox, 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, 90, 90);
    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, rectContainingBBox]);
  });
  it("should return elements inside bbox", () => {
    const bbox = makeBBox(0, 0, 100, 100);
    const rectOutside = makeElement(110, 110, 100, 100);
    const rectInside = makeElement(10, 10, 90, 90);
    const rectContainingBBox = makeElement(-10, -10, 110, 110);
    const rectOverlappingTopLeft = makeElement(-10, -10, 50, 50);
    expect(
      elementsOverlappingBBox({
        bounds: bbox,
        type: "inside",
        elements: [
          rectOutside,
          rectInside,
          rectContainingBBox,
          rectOverlappingTopLeft,
        ],
      }),
    ).toEqual([rectInside]);
  });
  // TODO test linear, freedraw, and diamond element types (+rotated)
 });
@@ -1,6 +1,7 @@
 {
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "rootDir": "../",
    "outDir": "./dist/types"
  },
  "include": ["src/**/*", "global.d.ts"],
@@ -3,6 +3,7 @@ import fs from "fs";
 // vitest.setup.ts
 import "vitest-canvas-mock";
 import "@testing-library/jest-dom";
 import { configure } from "@testing-library/react";
 import { vi } from "vitest";
 import polyfill from "./packages/excalidraw/polyfill";
@@ -16,6 +17,21 @@ import {
 Object.assign(globalThis, testPolyfills);
 PolyfillLocalStorage();
 // By default testing-library dumps the entire serialized DOM into the error
 // message whenever a `waitFor`/`getBy*` fails, which floods the test output
 // (often hundreds of lines of HTML per failure). Strip it out unless
 // VITE_DEBUG_DOM is enabled (see .env.test), e.g. `VITE_DEBUG_DOM=true yarn test`.
 const debugDom = ["true", "1"].includes(process.env.VITE_DEBUG_DOM ?? "");
 if (!debugDom) {
  configure({
    getElementError: (message) => {
      const error = new Error(message ?? undefined);
      error.name = "TestingLibraryElementError";
      return error;
    },
  });
 }
 vi.mock("@excalidraw/common", async (importOriginal) => {
  const module = await importOriginal<typeof import("@excalidraw/common")>();
@@ -12,7 +12,7 @@
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
@@ -27,6 +27,8 @@
      "@excalidraw/element/*": ["./packages/element/src/*"],
      "@excalidraw/fractional-indexing": ["./packages/fractional-indexing/src/index.ts"],
      "@excalidraw/fractional-indexing/*": ["./packages/fractional-indexing/src/*"],
      "@excalidraw/laser-pointer": ["./packages/laser-pointer/src/index.ts"],
      "@excalidraw/laser-pointer/*": ["./packages/laser-pointer/src/*"],
      "@excalidraw/math": ["./packages/math/src/index.ts"],
      "@excalidraw/math/*": ["./packages/math/src/*"],
      "@excalidraw/utils": ["./packages/utils/src/index.ts"],
@@ -1,5 +1,4 @@
 {
  "public": true,
  "headers": [
    {
      "source": "/(.*)",
@@ -59,6 +59,17 @@ export default defineConfig({
          "./packages/fractional-indexing/src/$1",
        ),
      },
      {
        find: /^@excalidraw\/laser-pointer$/,
        replacement: path.resolve(
          __dirname,
          "./packages/laser-pointer/src/index.ts",
        ),
      },
      {
        find: /^@excalidraw\/laser-pointer\/(.*?)/,
        replacement: path.resolve(__dirname, "./packages/laser-pointer/src/$1"),
      },
    ],
  },
  //@ts-ignore
@@ -71,6 +82,8 @@ export default defineConfig({
    setupFiles: ["./setupTests.ts"],
    globals: true,
    environment: "jsdom",
    // don't list skipped tests in the failure tree — keeps output readable
    hideSkippedTests: true,
    coverage: {
      reporter: ["text", "json-summary", "json", "html", "lcovonly"],
      // Since v2, it ignores empty lines by default and we need to disable it as it affects the coverage
@@ -1521,11 +1521,6 @@
  resolved "https://registry.yarnpkg.com/@excalidraw/eslint-config/-/eslint-config-1.0.3.tgz#2122ef7413ae77874ae9848ce0f1c6b3f0d8bbbd"
  integrity sha512-GemHNF5Z6ga0BWBSX7GJaNBUchLu6RwTcAB84eX1MeckRNhNasAsPCdelDlFalz27iS4RuYEQh0bPE8SRxJgbQ==
 "@excalidraw/laser-pointer@1.3.1":
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/@excalidraw/laser-pointer/-/laser-pointer-1.3.1.tgz#7c40836598e8e6ad91f01057883ed8b88fb9266c"
  integrity sha512-psA1z1N2qeAfsORdXc9JmD2y4CmDwmuMRxnNdJHZexIcPwaNEyIpNcelw+QkL9rz9tosaN9krXuKaRqYpRAR6g==
 "@excalidraw/markdown-to-text@0.1.2":
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
@@ -8376,6 +8371,11 @@ pepjs@0.5.3:
  resolved "https://registry.yarnpkg.com/pepjs/-/pepjs-0.5.3.tgz#dc755f03d965c20e4b1bb65e42a03a97c382cfc7"
  integrity sha512-5yHVB9OHqKd9fr/OIsn8ss0NgThQ9buaqrEuwr9Or5YjPp6h+WTDKWZI+xZLaBGZCtODTnFtlSHNmhFsq67THg==
 perfect-freehand@1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/perfect-freehand/-/perfect-freehand-1.2.0.tgz#706a0f854544f6175772440c51d3b0563eb3988a"
  integrity sha512-h/0ikF1M3phW7CwpZ5MMvKnfpHficWoOEyr//KVNTxV4F6deRK1eYMtHyBKEAKFK0aXIEUK9oBvlF6PNXMDsAw==
 pica@7.1.1, pica@^7.1.0:
  version "7.1.1"
  resolved "https://registry.yarnpkg.com/pica/-/pica-7.1.1.tgz#c68b42f5cfa6cc26eaec5cfa10cc0a5299ef3b7a"
Author	SHA1	Message	Date
David LuzarandGitHub	2a82821ec5	fix(editor): tweak freedraw settings and tablet UI/UX (#11551 ) * fix(editor): align constant freedraw stroke width more with generic shapes * reduce streamline for non-mouse * do not change `currentItemStrokeVariability` unintentionally * render penMode button under compact styles panel on tablets * show stroke variability as standalone button in compact actions menu * improve toolbar clicking UX with pen * change streamline defaults * change to `variable` stroke if toggling penMode for the first time	2026-06-24 16:59:10 +02:00
Márk Tolmács GitHub dwelle	070df27e4d	fix(editor): Modern TS require imports from rootDir (#11552 ) --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-06-24 10:52:56 +00:00
Márk Tolmács GitHub dwelle	cd514d72d6	feat(editor): LaserPointer based freedraw (#11507 ) Introduces constant width freedraw mode, keeping the original variable mode as default. --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-06-24 09:16:22 +02:00
zsviczianandGitHub	0642e72cfa	fix(editor): Arrows with text are rendered blurry in PNG export with larger scale (#11492 )	2026-06-22 18:22:26 +02:00
David LuzarandGitHub	28a9b1711d	test(repo): less noisy test output (#11505 )	2026-06-15 18:19:20 +02:00
Márk Tolmács GitHub dwelle	1cb9fff569	fix(editor): Double history (#11445 ) --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>	2026-06-15 18:19:08 +02:00
David Luzar GitHub Diego Mateos	069982606d	fix(editor): update `element.frameId` on frame change (#11490 ) Co-authored-by: Diego Mateos <dimateos@ucm.es>	2026-06-13 22:39:04 +02:00
David LuzarandGitHub	b324a85ab1	fix(editor): elements duplicated when moving frame children (#11485 ) * fix(editor): elements duplicated when moving frame children * fix(editor): accumulate reorders across frames in bring-to-front/back * add invalid-order tests * fix: make sure moved indices are within range * add length/duplicate elements guards	2026-06-13 20:32:45 +02:00
Augusto Xavier GitHub Maruthan G Sivram Jai Kumar Dewani Mark Tolmacs	a83ac48853	fix(editor): recalculate roundness type when switching shape types (#11473 ) When converting between generic shapes, the roundness type was only recalculated when the target type was a diamond. Converting a diamond (which uses the proportional radius algorithm) back to a rectangle kept the proportional radius, so rectangles ended up rendering with overly round corners. --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: Maruthan G <maruthang4@gmail.com> Co-authored-by: Sivram <withsivram@gmail.com> Co-authored-by: Jai Kumar Dewani <jai.dewani.99@gmail.com> Co-authored-by: Mark Tolmacs <mark@lazycat.hu>	2026-06-11 19:17:15 +02:00
KrishhnaTandGitHub	0cf56b19c7	test(editor): add unit tests for BinaryHeap (#11419 )	2026-06-10 17:12:42 +02:00
KrishhnaTandGitHub	61fe15a51d	fix(editor): cardinal direction arrows with label are invisible in exported SVG (#11441 ) fix: arrows with bound text labels missing from SVG export Axis-aligned (horizontal/vertical) arrows with a bound label vanished from SVG exports. The label-gap mask defaulted to objectBoundingBox units, whose region collapses to zero area for a zero-size bounding box, masking out the whole line. Pin the mask to userSpaceOnUse with an explicit user-space region (the coords already used by the visible rect). Fixes #11439	2026-06-07 19:19:44 +02:00
David LuzarandGitHub	647a264a48	feat(packages/excalidraw): consolidate theme state handling (#11453 )	2026-06-06 18:18:06 +02:00
Márk TolmácsandGitHub	b6d80e4256	fix(packages/excalidraw): consolidate bounds checks (#11275 ) Signed-off-by: Mark Tolmacs <mark@lazycat.hu>	2026-06-04 19:27:25 +02:00
		`@@ -0,0 +1,2 @@`
							`export * from "./state";`
							`export type { Point } from "./math";`