@tldraw/editor 5.3.0-next.4b4b4837d10b → 5.3.0-next.5cb71bb7e8fe

package/dist-cjs/index.js

@@ -389,7 +389,7 @@ var import_uniq = require("./lib/utils/uniq");
 var import_defaultThemes2 = require("./lib/editor/managers/ThemeManager/defaultThemes");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "5.3.0-next.4b4b4837d10b",
+  "5.3.0-next.5cb71bb7e8fe",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js

@@ -25,6 +25,7 @@ var import_react = require("react");
 var import_dom = require("../utils/dom");
 var import_useContainer = require("./useContainer");
 var import_useEditor = require("./useEditor");
+var import_useEvent = require("./useEvent");
 function isScrollableOverflow(overflow) {
   return overflow === "auto" || overflow === "scroll" || overflow === "overlay";
 }
@@ -53,27 +54,33 @@ function usePassThroughWheelEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = (0, import_useContainer.useContainer)();
   const editor = (0, import_useEditor.useMaybeEditor)();
-  (0, import_react.useEffect)(() => {
-    function onWheel(e) {
-      if (!editor?.getInstanceState().isFocused) return;
-      if (e.isSpecialRedispatchedEvent) return;
-      const elm2 = ref.current;
-      if (elm2 && hasScrollableElement(e.target, elm2)) {
-        return;
-      }
-      (0, import_dom.preventDefault)(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new WheelEvent("wheel", e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
+  const onWheel = (0, import_useEvent.useEvent)((e) => {
+    if (!editor?.getInstanceState().isFocused) return;
+    if (e.isSpecialRedispatchedEvent) return;
+    const elm = ref.current;
+    if (elm && hasScrollableElement(e.target, elm)) {
+      return;
     }
+    (0, import_dom.preventDefault)(e);
+    const cvs = container.querySelector(".tl-canvas");
+    if (!cvs) return;
+    const newEvent = new WheelEvent("wheel", e);
+    newEvent.isSpecialRedispatchedEvent = true;
+    cvs.dispatchEvent(newEvent);
+  });
+  const attached = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("wheel", onWheel, { passive: false });
+    if (elm === attached.current) return;
+    attached.current?.removeEventListener("wheel", onWheel);
+    attached.current = elm;
+    elm?.addEventListener("wheel", onWheel, { passive: false });
+  });
+  (0, import_react.useEffect)(() => {
     return () => {
-      elm.removeEventListener("wheel", onWheel);
+      attached.current?.removeEventListener("wheel", onWheel);
+      attached.current = null;
     };
-  }, [container, editor, ref]);
+  }, [onWheel]);
 }
 //# sourceMappingURL=usePassThroughWheelEvents.js.map

package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughWheelEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\t// Only pass through wheel events if the editor is focused\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAE/B,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,8BAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAE/B,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAO,qBAAqB,EAAE,QAAQA,IAAG,GAAG;AAC/C;AAAA,MACD;AAEA,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
-  "names": ["elm"]
+  "sourcesContent": ["import { RefObject, useEffect, useRef } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\nimport { useEvent } from './useEvent'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tconst onWheel = useEvent((e: WheelEvent) => {\n\t\t// Only pass through wheel events if the editor is focused\n\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\tconst elm = ref.current\n\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\treturn\n\t\t}\n\n\t\tpreventDefault(e)\n\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\tif (!cvs) return\n\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\tcvs.dispatchEvent(newEvent)\n\t})\n\n\t// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`\n\t// gives no notification when its element changes.\n\tconst attached = useRef<HTMLElement | null>(null)\n\n\t// Deliberately no dependency array \u2014 this re-checks the ref after every render of the component\n\t// that owns it, and re-attaches when the element has been swapped. A component that keeps the\n\t// hook mounted while unmounting and remounting the element it points at (a comment pin culled\n\t// while its anchor is off screen, say) would otherwise leave the listener on the discarded node\n\t// and silently lose pass-through once the element comes back.\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (elm === attached.current) return\n\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\tattached.current = elm\n\t\telm?.addEventListener('wheel', onWheel, { passive: false })\n\t})\n\n\t// Teardown is its own effect so the re-attach check above can skip returning a cleanup that\n\t// would tear the listener down and rebuild it on every render.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\t\tattached.current = null\n\t\t}\n\t}, [onWheel])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAC7C,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAC/B,sBAAyB;AAEzB,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,QAAM,cAAU,0BAAS,CAAC,MAAkB;AAE3C,QAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,QAAK,EAAU,2BAA4B;AAG3C,UAAM,MAAM,IAAI;AAChB,QAAI,OAAO,qBAAqB,EAAE,QAAQ,GAAG,GAAG;AAC/C;AAAA,IACD;AAEA,mCAAe,CAAC;AAChB,UAAM,MAAM,UAAU,cAAc,YAAY;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,IAAC,SAAiB,6BAA6B;AAChD,QAAI,cAAc,QAAQ;AAAA,EAC3B,CAAC;AAID,QAAM,eAAW,qBAA2B,IAAI;AAOhD,8BAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAChB,QAAI,QAAQ,SAAS,QAAS;AAC9B,aAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,aAAS,UAAU;AACnB,SAAK,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3D,CAAC;AAID,8BAAU,MAAM;AACf,WAAO,MAAM;AACZ,eAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,eAAS,UAAU;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AACb;",
+  "names": []
 }

package/dist-cjs/version.js

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "5.3.0-next.4b4b4837d10b";
+const version = "5.3.0-next.5cb71bb7e8fe";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-08-05T11:09:11.802Z",
-  patch: "2026-08-05T11:09:11.802Z"
+  minor: "2026-08-05T11:22:14.621Z",
+  patch: "2026-08-05T11:22:14.621Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/version.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-next.4b4b4837d10b'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:09:11.802Z',\n\tpatch: '2026-08-05T11:09:11.802Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-next.5cb71bb7e8fe'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:22:14.621Z',\n\tpatch: '2026-08-05T11:22:14.621Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/index.mjs

@@ -305,7 +305,7 @@ import { LocalIndexedDb, Table } from "./lib/utils/sync/LocalIndexedDb.mjs";
 import { uniq } from "./lib/utils/uniq.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/editor",
-  "5.3.0-next.4b4b4837d10b",
+  "5.3.0-next.5cb71bb7e8fe",
   "esm"
 );
 import { getColorValue } from "./lib/editor/managers/ThemeManager/defaultThemes.mjs";

package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs

@@ -1,7 +1,8 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { preventDefault } from "../utils/dom.mjs";
 import { useContainer } from "./useContainer.mjs";
 import { useMaybeEditor } from "./useEditor.mjs";
+import { useEvent } from "./useEvent.mjs";
 function isScrollableOverflow(overflow) {
   return overflow === "auto" || overflow === "scroll" || overflow === "overlay";
 }
@@ -30,28 +31,34 @@ function usePassThroughWheelEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = useContainer();
   const editor = useMaybeEditor();
-  useEffect(() => {
-    function onWheel(e) {
-      if (!editor?.getInstanceState().isFocused) return;
-      if (e.isSpecialRedispatchedEvent) return;
-      const elm2 = ref.current;
-      if (elm2 && hasScrollableElement(e.target, elm2)) {
-        return;
-      }
-      preventDefault(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new WheelEvent("wheel", e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
+  const onWheel = useEvent((e) => {
+    if (!editor?.getInstanceState().isFocused) return;
+    if (e.isSpecialRedispatchedEvent) return;
+    const elm = ref.current;
+    if (elm && hasScrollableElement(e.target, elm)) {
+      return;
     }
+    preventDefault(e);
+    const cvs = container.querySelector(".tl-canvas");
+    if (!cvs) return;
+    const newEvent = new WheelEvent("wheel", e);
+    newEvent.isSpecialRedispatchedEvent = true;
+    cvs.dispatchEvent(newEvent);
+  });
+  const attached = useRef(null);
+  useEffect(() => {
     const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("wheel", onWheel, { passive: false });
+    if (elm === attached.current) return;
+    attached.current?.removeEventListener("wheel", onWheel);
+    attached.current = elm;
+    elm?.addEventListener("wheel", onWheel, { passive: false });
+  });
+  useEffect(() => {
     return () => {
-      elm.removeEventListener("wheel", onWheel);
+      attached.current?.removeEventListener("wheel", onWheel);
+      attached.current = null;
     };
-  }, [container, editor, ref]);
+  }, [onWheel]);
 }
 export {
   usePassThroughWheelEvents

package/dist-esm/lib/hooks/usePassThroughWheelEvents.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughWheelEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\t// Only pass through wheel events if the editor is focused\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": "AAAA,SAAoB,iBAAiB;AACrC,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAE/B,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,YAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAE/B,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAO,qBAAqB,EAAE,QAAQA,IAAG,GAAG;AAC/C;AAAA,MACD;AAEA,qBAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
-  "names": ["elm"]
+  "sourcesContent": ["import { RefObject, useEffect, useRef } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\nimport { useEvent } from './useEvent'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tconst onWheel = useEvent((e: WheelEvent) => {\n\t\t// Only pass through wheel events if the editor is focused\n\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\tconst elm = ref.current\n\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\treturn\n\t\t}\n\n\t\tpreventDefault(e)\n\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\tif (!cvs) return\n\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\tcvs.dispatchEvent(newEvent)\n\t})\n\n\t// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`\n\t// gives no notification when its element changes.\n\tconst attached = useRef<HTMLElement | null>(null)\n\n\t// Deliberately no dependency array \u2014 this re-checks the ref after every render of the component\n\t// that owns it, and re-attaches when the element has been swapped. A component that keeps the\n\t// hook mounted while unmounting and remounting the element it points at (a comment pin culled\n\t// while its anchor is off screen, say) would otherwise leave the listener on the discarded node\n\t// and silently lose pass-through once the element comes back.\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (elm === attached.current) return\n\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\tattached.current = elm\n\t\telm?.addEventListener('wheel', onWheel, { passive: false })\n\t})\n\n\t// Teardown is its own effect so the re-attach check above can skip returning a cleanup that\n\t// would tear the listener down and rebuild it on every render.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\t\tattached.current = null\n\t\t}\n\t}, [onWheel])\n}\n"],
+  "mappings": "AAAA,SAAoB,WAAW,cAAc;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,YAAY,aAAa;AAC/B,QAAM,SAAS,eAAe;AAE9B,QAAM,UAAU,SAAS,CAAC,MAAkB;AAE3C,QAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,QAAK,EAAU,2BAA4B;AAG3C,UAAM,MAAM,IAAI;AAChB,QAAI,OAAO,qBAAqB,EAAE,QAAQ,GAAG,GAAG;AAC/C;AAAA,IACD;AAEA,mBAAe,CAAC;AAChB,UAAM,MAAM,UAAU,cAAc,YAAY;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,IAAC,SAAiB,6BAA6B;AAChD,QAAI,cAAc,QAAQ;AAAA,EAC3B,CAAC;AAID,QAAM,WAAW,OAA2B,IAAI;AAOhD,YAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAChB,QAAI,QAAQ,SAAS,QAAS;AAC9B,aAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,aAAS,UAAU;AACnB,SAAK,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3D,CAAC;AAID,YAAU,MAAM;AACf,WAAO,MAAM;AACZ,eAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,eAAS,UAAU;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AACb;",
+  "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.3.0-next.4b4b4837d10b";
+const version = "5.3.0-next.5cb71bb7e8fe";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-08-05T11:09:11.802Z",
-  patch: "2026-08-05T11:09:11.802Z"
+  minor: "2026-08-05T11:22:14.621Z",
+  patch: "2026-08-05T11:22:14.621Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-next.4b4b4837d10b'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:09:11.802Z',\n\tpatch: '2026-08-05T11:09:11.802Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0-next.5cb71bb7e8fe'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:22:14.621Z',\n\tpatch: '2026-08-05T11:22:14.621Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.3.0-next.4b4b4837d10b",
+  "version": "5.3.0-next.5cb71bb7e8fe",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.3.0-next.4b4b4837d10b",
-    "@tldraw/state-react": "5.3.0-next.4b4b4837d10b",
-    "@tldraw/store": "5.3.0-next.4b4b4837d10b",
-    "@tldraw/tlschema": "5.3.0-next.4b4b4837d10b",
-    "@tldraw/utils": "5.3.0-next.4b4b4837d10b",
-    "@tldraw/validate": "5.3.0-next.4b4b4837d10b",
+    "@tldraw/state": "5.3.0-next.5cb71bb7e8fe",
+    "@tldraw/state-react": "5.3.0-next.5cb71bb7e8fe",
+    "@tldraw/store": "5.3.0-next.5cb71bb7e8fe",
+    "@tldraw/tlschema": "5.3.0-next.5cb71bb7e8fe",
+    "@tldraw/utils": "5.3.0-next.5cb71bb7e8fe",
+    "@tldraw/validate": "5.3.0-next.5cb71bb7e8fe",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -1,7 +1,8 @@
-import { RefObject, useEffect } from 'react'
+import { RefObject, useEffect, useRef } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
 import { useMaybeEditor } from './useEditor'
+import { useEvent } from './useEvent'
 
 function isScrollableOverflow(overflow: string) {
 	return overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'
@@ -51,33 +52,49 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 	const container = useContainer()
 	const editor = useMaybeEditor()
 
-	useEffect(() => {
-		function onWheel(e: WheelEvent) {
-			// Only pass through wheel events if the editor is focused
-			if (!editor?.getInstanceState().isFocused) return
-
-			if ((e as any).isSpecialRedispatchedEvent) return
+	const onWheel = useEvent((e: WheelEvent) => {
+		// Only pass through wheel events if the editor is focused
+		if (!editor?.getInstanceState().isFocused) return
 
-			// If the wheel is over a scrollable element, let it scroll instead of redispatching.
-			const elm = ref.current
-			if (elm && hasScrollableElement(e.target, elm)) {
-				return
-			}
+		if ((e as any).isSpecialRedispatchedEvent) return
 
-			preventDefault(e)
-			const cvs = container.querySelector('.tl-canvas')
-			if (!cvs) return
-			const newEvent = new WheelEvent('wheel', e as any)
-			;(newEvent as any).isSpecialRedispatchedEvent = true
-			cvs.dispatchEvent(newEvent)
+		// If the wheel is over a scrollable element, let it scroll instead of redispatching.
+		const elm = ref.current
+		if (elm && hasScrollableElement(e.target, elm)) {
+			return
 		}
 
+		preventDefault(e)
+		const cvs = container.querySelector('.tl-canvas')
+		if (!cvs) return
+		const newEvent = new WheelEvent('wheel', e as any)
+		;(newEvent as any).isSpecialRedispatchedEvent = true
+		cvs.dispatchEvent(newEvent)
+	})
+
+	// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`
+	// gives no notification when its element changes.
+	const attached = useRef<HTMLElement | null>(null)
+
+	// Deliberately no dependency array — this re-checks the ref after every render of the component
+	// that owns it, and re-attaches when the element has been swapped. A component that keeps the
+	// hook mounted while unmounting and remounting the element it points at (a comment pin culled
+	// while its anchor is off screen, say) would otherwise leave the listener on the discarded node
+	// and silently lose pass-through once the element comes back.
+	useEffect(() => {
 		const elm = ref.current
-		if (!elm) return
+		if (elm === attached.current) return
+		attached.current?.removeEventListener('wheel', onWheel)
+		attached.current = elm
+		elm?.addEventListener('wheel', onWheel, { passive: false })
+	})
 
-		elm.addEventListener('wheel', onWheel, { passive: false })
+	// Teardown is its own effect so the re-attach check above can skip returning a cleanup that
+	// would tear the listener down and rebuild it on every render.
+	useEffect(() => {
 		return () => {
-			elm.removeEventListener('wheel', onWheel)
+			attached.current?.removeEventListener('wheel', onWheel)
+			attached.current = null
 		}
-	}, [container, editor, ref])
+	}, [onWheel])
 }

package/src/lib/test/usePassThroughWheelEvents.test.tsx

@@ -0,0 +1,77 @@
+import { act, cleanup, render } from '@testing-library/react'
+import { useRef, useState } from 'react'
+import { createTLStore } from '../config/createTLStore'
+import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+let setVisible: (visible: boolean) => void
+let rerender: () => void
+
+/**
+ * The shape a comment pin has: the hook's owner stays mounted while the element the ref points at
+ * is culled and later remounted (the pin returns null when its anchor leaves the viewport).
+ */
+function Culled() {
+	const ref = useRef<HTMLButtonElement>(null)
+	usePassThroughWheelEvents(ref)
+	const [visible, _setVisible] = useState(true)
+	const [, setTick] = useState(0)
+	setVisible = _setVisible
+	rerender = () => setTick((t) => t + 1)
+	if (!visible) return null
+	return <button ref={ref} data-testid="marker" />
+}
+
+describe('usePassThroughWheelEvents', () => {
+	async function renderEditor() {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas: Culled }} />)
+		})
+		return document.querySelector(`.${TL_CONTAINER_CLASS}`)!
+	}
+
+	function wheelOverMarker(container: Element) {
+		const canvas = container.querySelector('.tl-canvas')!
+		const received: Event[] = []
+		canvas.addEventListener('wheel', (e) => received.push(e))
+		const marker = container.querySelector('[data-testid="marker"]')!
+		marker.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 10 }))
+		return received
+	}
+
+	it('redispatches wheel events over the element to the canvas', async () => {
+		const container = await renderEditor()
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	// The regression: the owner stays mounted across the cull, so an effect keyed on its deps never
+	// re-runs and the listener is left on the discarded element.
+	it('still redispatches after the element unmounts and remounts', async () => {
+		const container = await renderEditor()
+		await act(async () => setVisible(false))
+		await act(async () => setVisible(true))
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	// The re-attach check runs on every render, so it has to be a no-op when the element hasn't
+	// changed — otherwise each render stacks another listener and one wheel redispatches many.
+	it('does not stack listeners across renders that leave the element in place', async () => {
+		const container = await renderEditor()
+		for (let i = 0; i < 3; i++) {
+			await act(async () => rerender())
+		}
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
+	it('stops redispatching once the owner unmounts', async () => {
+		const container = await renderEditor()
+		const marker = container.querySelector('[data-testid="marker"]')!
+		const canvas = container.querySelector('.tl-canvas')!
+		const received: Event[] = []
+		canvas.addEventListener('wheel', (e) => received.push(e))
+		await act(async () => cleanup())
+		marker.dispatchEvent(new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaY: 10 }))
+		expect(received).toHaveLength(0)
+	})
+})

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.3.0-next.4b4b4837d10b'
+export const version = '5.3.0-next.5cb71bb7e8fe'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-05T11:09:11.802Z',
-	patch: '2026-08-05T11:09:11.802Z',
+	minor: '2026-08-05T11:22:14.621Z',
+	patch: '2026-08-05T11:22:14.621Z',
 }