@tldraw/editor 5.3.0-canary.e857c8e412be → 5.3.0-canary.eb4ecbf40c4a

package/dist-cjs/index.js

@@ -379,7 +379,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-canary.e857c8e412be",
+  "5.3.0-canary.eb4ecbf40c4a",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

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

@@ -25,6 +25,30 @@ var import_react = require("react");
 var import_dom = require("../utils/dom");
 var import_useContainer = require("./useContainer");
 var import_useEditor = require("./useEditor");
+function isScrollableOverflow(overflow) {
+  return overflow === "auto" || overflow === "scroll" || overflow === "overlay";
+}
+function isScrollable(elm) {
+  const overflowsY = elm.scrollHeight > elm.clientHeight;
+  const overflowsX = elm.scrollWidth > elm.clientWidth;
+  if (!overflowsY && !overflowsX) return false;
+  const style = getComputedStyle(elm);
+  return overflowsY && isScrollableOverflow(style.overflowY) || overflowsX && isScrollableOverflow(style.overflowX);
+}
+function hasScrollableElement(target, root) {
+  if (!(target instanceof Node)) {
+    return isScrollable(root);
+  }
+  let elm = target instanceof Element ? target : target.parentElement;
+  while (elm) {
+    if (elm instanceof HTMLElement && isScrollable(elm)) {
+      return true;
+    }
+    if (elm === root) return false;
+    elm = elm.parentElement;
+  }
+  return false;
+}
 function usePassThroughWheelEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = (0, import_useContainer.useContainer)();
@@ -34,7 +58,7 @@ function usePassThroughWheelEvents(ref) {
       if (!editor?.getInstanceState().isFocused) return;
       if (e.isSpecialRedispatchedEvent) return;
       const elm2 = ref.current;
-      if (elm2 && elm2.scrollHeight > elm2.clientHeight) {
+      if (elm2 && hasScrollableElement(e.target, elm2)) {
         return;
       }
       (0, import_dom.preventDefault)(e);

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\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 element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\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;AAGxB,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,QAAOA,KAAI,eAAeA,KAAI,cAAc;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;",
+  "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"]
 }

package/dist-cjs/version.js

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "5.3.0-canary.e857c8e412be";
+const version = "5.3.0-canary.eb4ecbf40c4a";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-07-24T17:21:46.816Z",
-  patch: "2026-07-24T17:21:46.816Z"
+  minor: "2026-07-29T12:59:20.060Z",
+  patch: "2026-07-29T12:59:20.060Z"
 };
 //# 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-canary.e857c8e412be'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-24T17:21:46.816Z',\n\tpatch: '2026-07-24T17:21:46.816Z',\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-canary.eb4ecbf40c4a'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-29T12:59:20.060Z',\n\tpatch: '2026-07-29T12:59:20.060Z',\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

@@ -296,7 +296,7 @@ import { LocalIndexedDb, Table } from "./lib/utils/sync/LocalIndexedDb.mjs";
 import { uniq } from "./lib/utils/uniq.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/editor",
-  "5.3.0-canary.e857c8e412be",
+  "5.3.0-canary.eb4ecbf40c4a",
   "esm"
 );
 import { getColorValue } from "./lib/editor/managers/ThemeManager/defaultThemes.mjs";

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

@@ -2,6 +2,30 @@ import { useEffect } from "react";
 import { preventDefault } from "../utils/dom.mjs";
 import { useContainer } from "./useContainer.mjs";
 import { useMaybeEditor } from "./useEditor.mjs";
+function isScrollableOverflow(overflow) {
+  return overflow === "auto" || overflow === "scroll" || overflow === "overlay";
+}
+function isScrollable(elm) {
+  const overflowsY = elm.scrollHeight > elm.clientHeight;
+  const overflowsX = elm.scrollWidth > elm.clientWidth;
+  if (!overflowsY && !overflowsX) return false;
+  const style = getComputedStyle(elm);
+  return overflowsY && isScrollableOverflow(style.overflowY) || overflowsX && isScrollableOverflow(style.overflowX);
+}
+function hasScrollableElement(target, root) {
+  if (!(target instanceof Node)) {
+    return isScrollable(root);
+  }
+  let elm = target instanceof Element ? target : target.parentElement;
+  while (elm) {
+    if (elm instanceof HTMLElement && isScrollable(elm)) {
+      return true;
+    }
+    if (elm === root) return false;
+    elm = elm.parentElement;
+  }
+  return false;
+}
 function usePassThroughWheelEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = useContainer();
@@ -11,7 +35,7 @@ function usePassThroughWheelEvents(ref) {
       if (!editor?.getInstanceState().isFocused) return;
       if (e.isSpecialRedispatchedEvent) return;
       const elm2 = ref.current;
-      if (elm2 && elm2.scrollHeight > elm2.clientHeight) {
+      if (elm2 && hasScrollableElement(e.target, elm2)) {
         return;
       }
       preventDefault(e);

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\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 element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\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;AAGxB,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,QAAOA,KAAI,eAAeA,KAAI,cAAc;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;",
+  "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"]
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.3.0-canary.e857c8e412be";
+const version = "5.3.0-canary.eb4ecbf40c4a";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-07-24T17:21:46.816Z",
-  patch: "2026-07-24T17:21:46.816Z"
+  minor: "2026-07-29T12:59:20.060Z",
+  patch: "2026-07-29T12:59:20.060Z"
 };
 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-canary.e857c8e412be'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-24T17:21:46.816Z',\n\tpatch: '2026-07-24T17:21:46.816Z',\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-canary.eb4ecbf40c4a'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-29T12:59:20.060Z',\n\tpatch: '2026-07-29T12:59:20.060Z',\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-canary.e857c8e412be",
+  "version": "5.3.0-canary.eb4ecbf40c4a",
   "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-canary.e857c8e412be",
-    "@tldraw/state-react": "5.3.0-canary.e857c8e412be",
-    "@tldraw/store": "5.3.0-canary.e857c8e412be",
-    "@tldraw/tlschema": "5.3.0-canary.e857c8e412be",
-    "@tldraw/utils": "5.3.0-canary.e857c8e412be",
-    "@tldraw/validate": "5.3.0-canary.e857c8e412be",
+    "@tldraw/state": "5.3.0-canary.eb4ecbf40c4a",
+    "@tldraw/state-react": "5.3.0-canary.eb4ecbf40c4a",
+    "@tldraw/store": "5.3.0-canary.eb4ecbf40c4a",
+    "@tldraw/tlschema": "5.3.0-canary.eb4ecbf40c4a",
+    "@tldraw/utils": "5.3.0-canary.eb4ecbf40c4a",
+    "@tldraw/validate": "5.3.0-canary.eb4ecbf40c4a",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -3,6 +3,48 @@ import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
 import { useMaybeEditor } from './useEditor'
 
+function isScrollableOverflow(overflow: string) {
+	return overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'
+}
+
+// An element only consumes a wheel event when it's a real scroll container: its content overflows
+// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough —
+// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover
+// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must
+// still pass through to the canvas.
+function isScrollable(elm: HTMLElement) {
+	// Cheap first: if nothing overflows, it can't scroll — skip the getComputedStyle read. This runs
+	// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.
+	const overflowsY = elm.scrollHeight > elm.clientHeight
+	const overflowsX = elm.scrollWidth > elm.clientWidth
+	if (!overflowsY && !overflowsX) return false
+
+	const style = getComputedStyle(elm)
+	return (
+		(overflowsY && isScrollableOverflow(style.overflowY)) ||
+		(overflowsX && isScrollableOverflow(style.overflowX))
+	)
+}
+
+// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll
+// container. If one is found, the wheel belongs to it — don't redispatch it to the canvas.
+function hasScrollableElement(target: EventTarget | null, root: HTMLElement) {
+	if (!(target instanceof Node)) {
+		return isScrollable(root)
+	}
+
+	let elm: Element | null = target instanceof Element ? target : target.parentElement
+	while (elm) {
+		if (elm instanceof HTMLElement && isScrollable(elm)) {
+			return true
+		}
+		if (elm === root) return false
+		elm = elm.parentElement
+	}
+
+	return false
+}
+
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
@@ -16,9 +58,9 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 
 			if ((e as any).isSpecialRedispatchedEvent) return
 
-			// if the element is scrollable, don't redispatch the event
+			// If the wheel is over a scrollable element, let it scroll instead of redispatching.
 			const elm = ref.current
-			if (elm && elm.scrollHeight > elm.clientHeight) {
+			if (elm && hasScrollableElement(e.target, elm)) {
 				return
 			}
 

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-canary.e857c8e412be'
+export const version = '5.3.0-canary.eb4ecbf40c4a'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-24T17:21:46.816Z',
-	patch: '2026-07-24T17:21:46.816Z',
+	minor: '2026-07-29T12:59:20.060Z',
+	patch: '2026-07-29T12:59:20.060Z',
 }