@tldraw/editor 4.3.0-canary.ef37ae623ce8 → 4.3.0-canary.ef709265bb13

package/dist-esm/lib/editor/shapes/group/DashedOutlineBox.mjs

@@ -4,7 +4,7 @@ import { useEditor } from "../../../hooks/useEditor.mjs";
 import { getPerfectDashProps } from "../shared/getPerfectDashProps.mjs";
 function DashedOutlineBox({ bounds, className }) {
   const editor = useEditor();
-  const zoomLevel = useValue("zoom level", () => editor.getZoomLevel(), [editor]);
+  const zoomLevel = useValue("zoom level", () => editor.getEfficientZoomLevel(), [editor]);
   return /* @__PURE__ */ jsx("g", { className, pointerEvents: "none", strokeLinecap: "round", strokeLinejoin: "round", children: bounds.sides.map((side, i) => {
     const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
       side[0].dist(side[1]),

package/dist-esm/lib/editor/shapes/group/DashedOutlineBox.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/editor/shapes/group/DashedOutlineBox.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useEditor } from '../../../hooks/useEditor'\nimport { Box } from '../../../primitives/Box'\nimport { getPerfectDashProps } from '../shared/getPerfectDashProps'\n\nexport function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {\n\tconst editor = useEditor()\n\n\tconst zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor])\n\n\treturn (\n\t\t<g className={className} pointerEvents=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n\t\t\t{bounds.sides.map((side, i) => {\n\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\tside[0].dist(side[1]),\n\t\t\t\t\t1 / zoomLevel,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyle: 'dashed',\n\t\t\t\t\t\tlengthRatio: 4,\n\t\t\t\t\t}\n\t\t\t\t)\n\n\t\t\t\treturn (\n\t\t\t\t\t<line\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tx1={side[0].x}\n\t\t\t\t\t\ty1={side[0].y}\n\t\t\t\t\t\tx2={side[1].x}\n\t\t\t\t\t\ty2={side[1].y}\n\t\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\t\tstrokeDashoffset={strokeDashoffset}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</g>\n\t)\n}\n"],
-  "mappings": "AAuBK;AAvBL,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AAE7B,SAAS,iBAAiB,EAAE,QAAQ,UAAU,GAAuC;AAC3F,QAAM,SAAS,UAAU;AAEzB,QAAM,YAAY,SAAS,cAAc,MAAM,OAAO,aAAa,GAAG,CAAC,MAAM,CAAC;AAE9E,SACC,oBAAC,OAAE,WAAsB,eAAc,QAAO,eAAc,SAAQ,gBAAe,SACjF,iBAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC9B,UAAM,EAAE,iBAAiB,iBAAiB,IAAI;AAAA,MAC7C,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAAA,MACpB,IAAI;AAAA,MACJ;AAAA,QACC,OAAO;AAAA,QACP,aAAa;AAAA,MACd;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ;AAAA,QACA;AAAA;AAAA,MANK;AAAA,IAON;AAAA,EAEF,CAAC,GACF;AAEF;",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useEditor } from '../../../hooks/useEditor'\nimport { Box } from '../../../primitives/Box'\nimport { getPerfectDashProps } from '../shared/getPerfectDashProps'\n\nexport function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {\n\tconst editor = useEditor()\n\n\tconst zoomLevel = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])\n\n\treturn (\n\t\t<g className={className} pointerEvents=\"none\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n\t\t\t{bounds.sides.map((side, i) => {\n\t\t\t\tconst { strokeDasharray, strokeDashoffset } = getPerfectDashProps(\n\t\t\t\t\tside[0].dist(side[1]),\n\t\t\t\t\t1 / zoomLevel,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyle: 'dashed',\n\t\t\t\t\t\tlengthRatio: 4,\n\t\t\t\t\t}\n\t\t\t\t)\n\n\t\t\t\treturn (\n\t\t\t\t\t<line\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\tx1={side[0].x}\n\t\t\t\t\t\ty1={side[0].y}\n\t\t\t\t\t\tx2={side[1].x}\n\t\t\t\t\t\ty2={side[1].y}\n\t\t\t\t\t\tstrokeDasharray={strokeDasharray}\n\t\t\t\t\t\tstrokeDashoffset={strokeDashoffset}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t})}\n\t\t</g>\n\t)\n}\n"],
+  "mappings": "AAuBK;AAvBL,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AAE7B,SAAS,iBAAiB,EAAE,QAAQ,UAAU,GAAuC;AAC3F,QAAM,SAAS,UAAU;AAEzB,QAAM,YAAY,SAAS,cAAc,MAAM,OAAO,sBAAsB,GAAG,CAAC,MAAM,CAAC;AAEvF,SACC,oBAAC,OAAE,WAAsB,eAAc,QAAO,eAAc,SAAQ,gBAAe,SACjF,iBAAO,MAAM,IAAI,CAAC,MAAM,MAAM;AAC9B,UAAM,EAAE,iBAAiB,iBAAiB,IAAI;AAAA,MAC7C,KAAK,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAAA,MACpB,IAAI;AAAA,MACJ;AAAA,QACC,OAAO;AAAA,QACP,aAAa;AAAA,MACd;AAAA,IACD;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ,IAAI,KAAK,CAAC,EAAE;AAAA,QACZ;AAAA,QACA;AAAA;AAAA,MANK;AAAA,IAON;AAAA,EAEF,CAAC,GACF;AAEF;",
   "names": []
 }

package/dist-esm/lib/globals/environment.mjs

@@ -1,3 +1,4 @@
+import { atom } from "@tldraw/state";
 const tlenv = {
   isSafari: false,
   isIos: false,
@@ -8,16 +9,51 @@ const tlenv = {
   isDarwin: false,
   hasCanvasSupport: false
 };
-if (typeof window !== "undefined" && "navigator" in window) {
-  tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-  tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i);
-  tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent);
-  tlenv.isFirefox = /firefox/i.test(navigator.userAgent);
-  tlenv.isAndroid = /android/i.test(navigator.userAgent);
-  tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf("mac") > -1;
-  tlenv.hasCanvasSupport = typeof window !== "undefined" && "Promise" in window && "HTMLCanvasElement" in window;
+let isForcedFinePointer = false;
+if (typeof window !== "undefined") {
+  if ("navigator" in window) {
+    tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i);
+    tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent);
+    tlenv.isFirefox = /firefox/i.test(navigator.userAgent);
+    tlenv.isAndroid = /android/i.test(navigator.userAgent);
+    tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf("mac") > -1;
+  }
+  tlenv.hasCanvasSupport = "Promise" in window && "HTMLCanvasElement" in window;
+  isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos;
+}
+const tlenvReactive = atom("tlenvReactive", {
+  // Whether the user's device has a coarse pointer. This is dynamic on many systems, especially
+  // on touch-screen laptops, which will become "coarse" if the user touches the screen.
+  // See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
+  isCoarsePointer: false
+});
+if (typeof window !== "undefined" && !isForcedFinePointer) {
+  const mql = window.matchMedia && window.matchMedia("(any-pointer: coarse)");
+  const isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer;
+  if (mql) {
+    const updateIsCoarsePointer = () => {
+      const isCoarsePointer = mql.matches;
+      if (isCoarsePointer !== isCurrentCoarsePointer()) {
+        tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer }));
+      }
+    };
+    updateIsCoarsePointer();
+    mql.addEventListener("change", updateIsCoarsePointer);
+  }
+  window.addEventListener(
+    "pointerdown",
+    (e) => {
+      const isCoarseEvent = e.pointerType !== "mouse";
+      if (isCoarseEvent !== isCurrentCoarsePointer()) {
+        tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarseEvent }));
+      }
+    },
+    { capture: true }
+  );
 }
 export {
-  tlenv
+  tlenv,
+  tlenvReactive
 };
 //# sourceMappingURL=environment.mjs.map

package/dist-esm/lib/globals/environment.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/globals/environment.ts"],
-  "sourcesContent": ["/**\n * An object that contains information about the current device and environment.\n *\n * @public\n */\nconst tlenv = {\n\tisSafari: false,\n\tisIos: false,\n\tisChromeForIos: false,\n\tisFirefox: false,\n\tisAndroid: false,\n\tisWebview: false,\n\tisDarwin: false,\n\thasCanvasSupport: false,\n}\n\nif (typeof window !== 'undefined' && 'navigator' in window) {\n\ttlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n\ttlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)\n\ttlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)\n\ttlenv.isFirefox = /firefox/i.test(navigator.userAgent)\n\ttlenv.isAndroid = /android/i.test(navigator.userAgent)\n\ttlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1\n\ttlenv.hasCanvasSupport =\n\t\ttypeof window !== 'undefined' && 'Promise' in window && 'HTMLCanvasElement' in window\n}\n\nexport { tlenv }\n"],
-  "mappings": "AAKA,MAAM,QAAQ;AAAA,EACb,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AACnB;AAEA,IAAI,OAAO,WAAW,eAAe,eAAe,QAAQ;AAC3D,QAAM,WAAW,iCAAiC,KAAK,UAAU,SAAS;AAC1E,QAAM,QAAQ,CAAC,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK,CAAC,CAAC,UAAU,UAAU,MAAM,SAAS;AAC3F,QAAM,iBAAiB,iBAAiB,KAAK,UAAU,SAAS;AAChE,QAAM,YAAY,WAAW,KAAK,UAAU,SAAS;AACrD,QAAM,YAAY,WAAW,KAAK,UAAU,SAAS;AACrD,QAAM,WAAW,OAAO,UAAU,UAAU,YAAY,EAAE,QAAQ,KAAK,IAAI;AAC3E,QAAM,mBACL,OAAO,WAAW,eAAe,aAAa,UAAU,uBAAuB;AACjF;",
+  "sourcesContent": ["import { atom } from '@tldraw/state'\n\n/**\n * An object that contains information about the current device and environment.\n * This object is not reactive and will not update automatically when the environment changes,\n * so only include values that are fixed, such as the user's browser and operating system.\n *\n * @public\n */\nconst tlenv = {\n\tisSafari: false,\n\tisIos: false,\n\tisChromeForIos: false,\n\tisFirefox: false,\n\tisAndroid: false,\n\tisWebview: false,\n\tisDarwin: false,\n\thasCanvasSupport: false,\n}\n\nlet isForcedFinePointer = false\n\nif (typeof window !== 'undefined') {\n\tif ('navigator' in window) {\n\t\ttlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n\t\ttlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)\n\t\ttlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)\n\t\ttlenv.isFirefox = /firefox/i.test(navigator.userAgent)\n\t\ttlenv.isAndroid = /android/i.test(navigator.userAgent)\n\t\ttlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1\n\t}\n\ttlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window\n\tisForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos\n}\n\n/**\n * An atom that contains information about the current device and environment.\n * This object is reactive and will update automatically when the environment changes.\n * Use it for values that may change over time, such as the pointer type.\n *\n * @public\n */\nconst tlenvReactive = atom('tlenvReactive', {\n\t// Whether the user's device has a coarse pointer. This is dynamic on many systems, especially\n\t// on touch-screen laptops, which will become \"coarse\" if the user touches the screen.\n\t// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse\n\tisCoarsePointer: false,\n})\n\nif (typeof window !== 'undefined' && !isForcedFinePointer) {\n\tconst mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')\n\n\tconst isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer\n\n\tif (mql) {\n\t\t// 1. Update the coarse pointer automatically when the media query changes\n\t\tconst updateIsCoarsePointer = () => {\n\t\t\tconst isCoarsePointer = mql.matches\n\t\t\tif (isCoarsePointer !== isCurrentCoarsePointer()) {\n\t\t\t\ttlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarsePointer }))\n\t\t\t}\n\t\t}\n\t\tupdateIsCoarsePointer()\n\t\tmql.addEventListener('change', updateIsCoarsePointer)\n\t}\n\n\t// 2. Also update the coarse pointer state when a pointer down event occurs. We need `capture: true`\n\t// here because the tldraw component itself stops propagation on pointer events it receives.\n\twindow.addEventListener(\n\t\t'pointerdown',\n\t\t(e: PointerEvent) => {\n\t\t\t// when the user interacts with a mouse, we assume they have a fine pointer.\n\t\t\t// otherwise, we assume they have a coarse pointer.\n\t\t\tconst isCoarseEvent = e.pointerType !== 'mouse'\n\t\t\tif (isCoarseEvent !== isCurrentCoarsePointer()) {\n\t\t\t\ttlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarseEvent }))\n\t\t\t}\n\t\t},\n\t\t{ capture: true }\n\t)\n}\n\nexport { tlenv, tlenvReactive }\n"],
+  "mappings": "AAAA,SAAS,YAAY;AASrB,MAAM,QAAQ;AAAA,EACb,UAAU;AAAA,EACV,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,kBAAkB;AACnB;AAEA,IAAI,sBAAsB;AAE1B,IAAI,OAAO,WAAW,aAAa;AAClC,MAAI,eAAe,QAAQ;AAC1B,UAAM,WAAW,iCAAiC,KAAK,UAAU,SAAS;AAC1E,UAAM,QAAQ,CAAC,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK,CAAC,CAAC,UAAU,UAAU,MAAM,SAAS;AAC3F,UAAM,iBAAiB,iBAAiB,KAAK,UAAU,SAAS;AAChE,UAAM,YAAY,WAAW,KAAK,UAAU,SAAS;AACrD,UAAM,YAAY,WAAW,KAAK,UAAU,SAAS;AACrD,UAAM,WAAW,OAAO,UAAU,UAAU,YAAY,EAAE,QAAQ,KAAK,IAAI;AAAA,EAC5E;AACA,QAAM,mBAAmB,aAAa,UAAU,uBAAuB;AACvE,wBAAsB,MAAM,aAAa,CAAC,MAAM,aAAa,CAAC,MAAM;AACrE;AASA,MAAM,gBAAgB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI3C,iBAAiB;AAClB,CAAC;AAED,IAAI,OAAO,WAAW,eAAe,CAAC,qBAAqB;AAC1D,QAAM,MAAM,OAAO,cAAc,OAAO,WAAW,uBAAuB;AAE1E,QAAM,yBAAyB,MAAM,cAAc,4BAA4B,EAAE;AAEjF,MAAI,KAAK;AAER,UAAM,wBAAwB,MAAM;AACnC,YAAM,kBAAkB,IAAI;AAC5B,UAAI,oBAAoB,uBAAuB,GAAG;AACjD,sBAAc,OAAO,CAAC,UAAU,EAAE,GAAG,MAAM,gBAAiC,EAAE;AAAA,MAC/E;AAAA,IACD;AACA,0BAAsB;AACtB,QAAI,iBAAiB,UAAU,qBAAqB;AAAA,EACrD;AAIA,SAAO;AAAA,IACN;AAAA,IACA,CAAC,MAAoB;AAGpB,YAAM,gBAAgB,EAAE,gBAAgB;AACxC,UAAI,kBAAkB,uBAAuB,GAAG;AAC/C,sBAAc,OAAO,CAAC,UAAU,EAAE,GAAG,MAAM,iBAAiB,cAAc,EAAE;AAAA,MAC7E;AAAA,IACD;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EACjB;AACD;",
   "names": []
 }

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

@@ -1,36 +1,21 @@
-import { useEffect } from "react";
-import { tlenv } from "../globals/environment.mjs";
+import { unsafe__withoutCapture } from "@tldraw/state";
+import { useReactor } from "@tldraw/state-react";
+import { tlenvReactive } from "../globals/environment.mjs";
 import { useEditor } from "./useEditor.mjs";
 function useCoarsePointer() {
   const editor = useEditor();
-  useEffect(() => {
-    let isCoarse = editor.getInstanceState().isCoarsePointer;
-    const handlePointerDown = (e) => {
-      const isCoarseEvent = e.pointerType !== "mouse";
-      if (isCoarse === isCoarseEvent) return;
-      isCoarse = isCoarseEvent;
-      editor.updateInstanceState({ isCoarsePointer: isCoarseEvent });
-    };
-    window.addEventListener("pointerdown", handlePointerDown, { capture: true });
-    const mql = window.matchMedia && window.matchMedia("(any-pointer: coarse)");
-    const isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos;
-    const handleMediaQueryChange = () => {
-      const next = isForcedFinePointer ? false : mql.matches;
-      if (isCoarse !== next) return;
-      isCoarse = next;
-      editor.updateInstanceState({ isCoarsePointer: next });
-    };
-    if (mql) {
-      mql.addEventListener("change", handleMediaQueryChange);
-      handleMediaQueryChange();
-    }
-    return () => {
-      window.removeEventListener("pointerdown", handlePointerDown, { capture: true });
-      if (mql) {
-        mql.removeEventListener("change", handleMediaQueryChange);
-      }
-    };
-  }, [editor]);
+  useReactor(
+    "coarse pointer change",
+    () => {
+      const isCoarsePointer = tlenvReactive.get().isCoarsePointer;
+      const isInstanceStateCoarsePointer = unsafe__withoutCapture(
+        () => editor.getInstanceState().isCoarsePointer
+      );
+      if (isCoarsePointer === isInstanceStateCoarsePointer) return;
+      editor.updateInstanceState({ isCoarsePointer });
+    },
+    [editor]
+  );
 }
 export {
   useCoarsePointer

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useCoarsePointer.ts"],
-  "sourcesContent": ["import { useEffect } from 'react'\nimport { tlenv } from '../globals/environment'\nimport { useEditor } from './useEditor'\n\n/** @internal */\nexport function useCoarsePointer() {\n\tconst editor = useEditor()\n\n\tuseEffect(() => {\n\t\t// We'll track our own state for the pointer type\n\t\tlet isCoarse = editor.getInstanceState().isCoarsePointer\n\n\t\t// 1.\n\t\t// We'll use pointer events to detect coarse pointer.\n\n\t\tconst handlePointerDown = (e: PointerEvent) => {\n\t\t\t// when the user interacts with a mouse, we assume they have a fine pointer.\n\t\t\t// otherwise, we assume they have a coarse pointer.\n\t\t\tconst isCoarseEvent = e.pointerType !== 'mouse'\n\t\t\tif (isCoarse === isCoarseEvent) return\n\t\t\tisCoarse = isCoarseEvent\n\t\t\teditor.updateInstanceState({ isCoarsePointer: isCoarseEvent })\n\t\t}\n\n\t\t// we need `capture: true` here because the tldraw component itself stops propagation on\n\t\t// pointer events it receives.\n\t\twindow.addEventListener('pointerdown', handlePointerDown, { capture: true })\n\n\t\t// 2.\n\t\t// We can also use the media query to detect / set the initial pointer type\n\t\t// and update the state if the pointer type changes.\n\n\t\t// We want the touch / mouse events to run even if the browser does not\n\t\t// support matchMedia. We'll have to handle the media query changes\n\t\t// conditionally in the code below.\n\t\tconst mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')\n\n\t\t// This is a workaround for a Firefox bug where we don't correctly\n\t\t// detect coarse VS fine pointer. For now, let's assume that you have a fine\n\t\t// pointer if you're on Firefox on desktop.\n\t\tconst isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos\n\n\t\tconst handleMediaQueryChange = () => {\n\t\t\tconst next = isForcedFinePointer ? false : mql.matches // get the value from the media query\n\t\t\tif (isCoarse !== next) return // bail if the value hasn't changed\n\t\t\tisCoarse = next // update the local value\n\t\t\teditor.updateInstanceState({ isCoarsePointer: next }) // update the value in state\n\t\t}\n\n\t\tif (mql) {\n\t\t\t// set up the listener\n\t\t\tmql.addEventListener('change', handleMediaQueryChange)\n\n\t\t\t// and run the handler once to set the initial value\n\t\t\thandleMediaQueryChange()\n\t\t}\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n\n\t\t\tif (mql) {\n\t\t\t\tmql.removeEventListener('change', handleMediaQueryChange)\n\t\t\t}\n\t\t}\n\t}, [editor])\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAGnB,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AAEzB,YAAU,MAAM;AAEf,QAAI,WAAW,OAAO,iBAAiB,EAAE;AAKzC,UAAM,oBAAoB,CAAC,MAAoB;AAG9C,YAAM,gBAAgB,EAAE,gBAAgB;AACxC,UAAI,aAAa,cAAe;AAChC,iBAAW;AACX,aAAO,oBAAoB,EAAE,iBAAiB,cAAc,CAAC;AAAA,IAC9D;AAIA,WAAO,iBAAiB,eAAe,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAS3E,UAAM,MAAM,OAAO,cAAc,OAAO,WAAW,uBAAuB;AAK1E,UAAM,sBAAsB,MAAM,aAAa,CAAC,MAAM,aAAa,CAAC,MAAM;AAE1E,UAAM,yBAAyB,MAAM;AACpC,YAAM,OAAO,sBAAsB,QAAQ,IAAI;AAC/C,UAAI,aAAa,KAAM;AACvB,iBAAW;AACX,aAAO,oBAAoB,EAAE,iBAAiB,KAAK,CAAC;AAAA,IACrD;AAEA,QAAI,KAAK;AAER,UAAI,iBAAiB,UAAU,sBAAsB;AAGrD,6BAAuB;AAAA,IACxB;AAEA,WAAO,MAAM;AACZ,aAAO,oBAAoB,eAAe,mBAAmB,EAAE,SAAS,KAAK,CAAC;AAE9E,UAAI,KAAK;AACR,YAAI,oBAAoB,UAAU,sBAAsB;AAAA,MACzD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AACZ;",
+  "sourcesContent": ["import { unsafe__withoutCapture } from '@tldraw/state'\nimport { useReactor } from '@tldraw/state-react'\nimport { tlenvReactive } from '../globals/environment'\nimport { useEditor } from './useEditor'\n\n/** @internal */\nexport function useCoarsePointer() {\n\tconst editor = useEditor()\n\n\t// When the coarse pointer state changes, update the instance state\n\tuseReactor(\n\t\t'coarse pointer change',\n\t\t() => {\n\t\t\tconst isCoarsePointer = tlenvReactive.get().isCoarsePointer\n\t\t\tconst isInstanceStateCoarsePointer = unsafe__withoutCapture(\n\t\t\t\t() => editor.getInstanceState().isCoarsePointer\n\t\t\t)\n\t\t\tif (isCoarsePointer === isInstanceStateCoarsePointer) return\n\t\t\teditor.updateInstanceState({ isCoarsePointer: isCoarsePointer })\n\t\t},\n\t\t[editor]\n\t)\n}\n"],
+  "mappings": "AAAA,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAGnB,SAAS,mBAAmB;AAClC,QAAM,SAAS,UAAU;AAGzB;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,kBAAkB,cAAc,IAAI,EAAE;AAC5C,YAAM,+BAA+B;AAAA,QACpC,MAAM,OAAO,iBAAiB,EAAE;AAAA,MACjC;AACA,UAAI,oBAAoB,6BAA8B;AACtD,aAAO,oBAAoB,EAAE,gBAAiC,CAAC;AAAA,IAChE;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AACD;",
   "names": []
 }

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

@@ -9,14 +9,10 @@ function useZoomCss() {
   React.useEffect(() => {
     const setScale = (s) => container.style.setProperty("--tl-zoom", s.toString());
     const setScaleDebounced = debounce(setScale, 100);
-    const scheduler = new EffectScheduler("useZoomCss", () => {
-      const numShapes = editor.getCurrentPageShapeIds().size;
-      if (numShapes < 300) {
-        setScale(editor.getZoomLevel());
-      } else {
-        setScaleDebounced(editor.getZoomLevel());
-      }
-    });
+    const scheduler = new EffectScheduler(
+      "useZoomCss",
+      () => setScale(editor.getEfficientZoomLevel())
+    );
     scheduler.attach();
     scheduler.execute();
     return () => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useZoomCss.ts"],
-  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { debounce } from '@tldraw/utils'\nimport * as React from 'react'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nexport function useZoomCss() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tReact.useEffect(() => {\n\t\tconst setScale = (s: number) => container.style.setProperty('--tl-zoom', s.toString())\n\t\tconst setScaleDebounced = debounce(setScale, 100)\n\n\t\tconst scheduler = new EffectScheduler('useZoomCss', () => {\n\t\t\tconst numShapes = editor.getCurrentPageShapeIds().size\n\t\t\tif (numShapes < 300) {\n\t\t\t\tsetScale(editor.getZoomLevel())\n\t\t\t} else {\n\t\t\t\tsetScaleDebounced(editor.getZoomLevel())\n\t\t\t}\n\t\t})\n\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tsetScaleDebounced.cancel()\n\t\t}\n\t}, [editor, container])\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAEnB,SAAS,aAAa;AAC5B,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAE/B,QAAM,UAAU,MAAM;AACrB,UAAM,WAAW,CAAC,MAAc,UAAU,MAAM,YAAY,aAAa,EAAE,SAAS,CAAC;AACrF,UAAM,oBAAoB,SAAS,UAAU,GAAG;AAEhD,UAAM,YAAY,IAAI,gBAAgB,cAAc,MAAM;AACzD,YAAM,YAAY,OAAO,uBAAuB,EAAE;AAClD,UAAI,YAAY,KAAK;AACpB,iBAAS,OAAO,aAAa,CAAC;AAAA,MAC/B,OAAO;AACN,0BAAkB,OAAO,aAAa,CAAC;AAAA,MACxC;AAAA,IACD,CAAC;AAED,cAAU,OAAO;AACjB,cAAU,QAAQ;AAElB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,wBAAkB,OAAO;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AACvB;",
+  "sourcesContent": ["import { EffectScheduler } from '@tldraw/state'\nimport { debounce } from '@tldraw/utils'\nimport * as React from 'react'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nexport function useZoomCss() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tReact.useEffect(() => {\n\t\tconst setScale = (s: number) => container.style.setProperty('--tl-zoom', s.toString())\n\t\tconst setScaleDebounced = debounce(setScale, 100)\n\n\t\tconst scheduler = new EffectScheduler('useZoomCss', () =>\n\t\t\tsetScale(editor.getEfficientZoomLevel())\n\t\t)\n\n\t\tscheduler.attach()\n\t\tscheduler.execute()\n\n\t\treturn () => {\n\t\t\tscheduler.detach()\n\t\t\tsetScaleDebounced.cancel()\n\t\t}\n\t}, [editor, container])\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAEnB,SAAS,aAAa;AAC5B,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAE/B,QAAM,UAAU,MAAM;AACrB,UAAM,WAAW,CAAC,MAAc,UAAU,MAAM,YAAY,aAAa,EAAE,SAAS,CAAC;AACrF,UAAM,oBAAoB,SAAS,UAAU,GAAG;AAEhD,UAAM,YAAY,IAAI;AAAA,MAAgB;AAAA,MAAc,MACnD,SAAS,OAAO,sBAAsB,CAAC;AAAA,IACxC;AAEA,cAAU,OAAO;AACjB,cAAU,QAAQ;AAElB,WAAO,MAAM;AACZ,gBAAU,OAAO;AACjB,wBAAkB,OAAO;AAAA,IAC1B;AAAA,EACD,GAAG,CAAC,QAAQ,SAAS,CAAC;AACvB;",
   "names": []
 }

package/dist-esm/lib/options.mjs

@@ -51,7 +51,9 @@ const defaultTldrawOptions = {
   exportProvider: Fragment,
   enableToolbarKeyboardShortcuts: true,
   maxFontsToLoadBeforeRender: Infinity,
-  nonce: void 0
+  nonce: void 0,
+  debouncedZoom: true,
+  debouncedZoomThreshold: 500
 };
 export {
   defaultTldrawOptions

package/dist-esm/lib/options.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/options.ts"],
-  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n} as const satisfies TldrawOptions\n"],
-  "mappings": "AAAA,SAAwB,gBAAgB;AA4FjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AACR;",
+  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n\t/**\n\t * Whether to use debounced zoom level for certain rendering optimizations. When true,\n\t * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,\n\t * reducing re-renders. When false, it always returns the current zoom level.\n\t */\n\treadonly debouncedZoom: boolean\n\t/**\n\t * The number of shapes that must be on the page for the debounced zoom level to be used.\n\t * Defaults to 300 shapes.\n\t */\n\treadonly debouncedZoomThreshold: number\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n\tdebouncedZoom: true,\n\tdebouncedZoomThreshold: 500,\n} as const satisfies TldrawOptions\n"],
+  "mappings": "AAAA,SAAwB,gBAAgB;AAuGjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AAAA,EACP,eAAe;AAAA,EACf,wBAAwB;AACzB;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.3.0-canary.ef37ae623ce8";
+const version = "4.3.0-canary.ef709265bb13";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2025-12-02T10:57:55.682Z",
-  patch: "2025-12-02T10:57:55.682Z"
+  minor: "2025-12-06T09:01:14.443Z",
+  patch: "2025-12-06T09:01:14.443Z"
 };
 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 = '4.3.0-canary.ef37ae623ce8'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-12-02T10:57:55.682Z',\n\tpatch: '2025-12-02T10:57:55.682Z',\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 = '4.3.0-canary.ef709265bb13'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-12-06T09:01:14.443Z',\n\tpatch: '2025-12-06T09:01:14.443Z',\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": "4.3.0-canary.ef37ae623ce8",
+  "version": "4.3.0-canary.ef709265bb13",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,12 +50,12 @@
     "@tiptap/core": "^3.6.2",
     "@tiptap/pm": "^3.6.2",
     "@tiptap/react": "^3.6.2",
-    "@tldraw/state": "4.3.0-canary.ef37ae623ce8",
-    "@tldraw/state-react": "4.3.0-canary.ef37ae623ce8",
-    "@tldraw/store": "4.3.0-canary.ef37ae623ce8",
-    "@tldraw/tlschema": "4.3.0-canary.ef37ae623ce8",
-    "@tldraw/utils": "4.3.0-canary.ef37ae623ce8",
-    "@tldraw/validate": "4.3.0-canary.ef37ae623ce8",
+    "@tldraw/state": "4.3.0-canary.ef709265bb13",
+    "@tldraw/state-react": "4.3.0-canary.ef709265bb13",
+    "@tldraw/store": "4.3.0-canary.ef709265bb13",
+    "@tldraw/tlschema": "4.3.0-canary.ef709265bb13",
+    "@tldraw/utils": "4.3.0-canary.ef709265bb13",
+    "@tldraw/validate": "4.3.0-canary.ef709265bb13",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -282,7 +282,7 @@ export {
 	type SvgExportDef,
 } from './lib/editor/types/SvgExportContext'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
-export { tlenv } from './lib/globals/environment'
+export { tlenv, tlenvReactive } from './lib/globals/environment'
 export { tlmenus } from './lib/globals/menus'
 export { tltime } from './lib/globals/time'
 export {

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -210,7 +210,7 @@ function GridWrapper() {
 function ScribbleWrapper() {
 	const editor = useEditor()
 	const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { Scribble } = useEditorComponents()
 
 	if (!(Scribble && scribbles.length)) return null
@@ -243,7 +243,7 @@ function ZoomBrushWrapper() {
 function SnapIndicatorWrapper() {
 	const editor = useEditor()
 	const lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { SnapIndicator } = useEditorComponents()
 
 	if (!(SnapIndicator && lines.length > 0)) return null
@@ -284,7 +284,7 @@ function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
 	const editor = useEditor()
 	const { Handles } = useEditorComponents()
 
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 
 	const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [
 		editor,

package/src/lib/editor/Editor.ts

@@ -2670,6 +2670,52 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getCamera().z
 	}
 
+	private _debouncedZoomLevel = atom('debounced zoom level', 1)
+
+	/**
+	 * Get the debounced zoom level. When the camera is moving, this returns the zoom level
+	 * from when the camera started moving rather than the current zoom level. This can be
+	 * used to avoid expensive re-renders during camera movements.
+	 *
+	 * This behavior is controlled by the `useDebouncedZoom` option. When `useDebouncedZoom`
+	 * is `false`, this method always returns the current zoom level.
+	 *
+	 * @public
+	 */
+	@computed getDebouncedZoomLevel() {
+		if (this.options.debouncedZoom) {
+			if (this.getCameraState() === 'idle') {
+				return this.getZoomLevel()
+			} else {
+				return this._debouncedZoomLevel.get()
+			}
+		}
+
+		return this.getZoomLevel()
+	}
+
+	@computed private _getAboveDebouncedZoomThreshold() {
+		return this.getCurrentPageShapeIds().size > this.options.debouncedZoomThreshold
+	}
+
+	/**
+	 * Get the efficient zoom level. This returns the current zoom level if there are less than 300 shapes on the page,
+	 * otherwise it returns the debounced zoom level. This can be used to avoid expensive re-renders during camera movements.
+	 *
+	 * @public
+	 * @example
+	 * ```ts
+	 * editor.getEfficientZoomLevel()
+	 * ```
+	 *
+	 * @public
+	 */
+	@computed getEfficientZoomLevel() {
+		return this._getAboveDebouncedZoomThreshold()
+			? this.getDebouncedZoomLevel()
+			: this.getZoomLevel()
+	}
+
 	/**
 	 * Get the camera's initial or reset zoom level.
 	 *
@@ -3649,8 +3695,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
-		this._tickCameraState()
-
 		return this
 	}
 
@@ -4056,18 +4100,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 	// box just for rendering, and we only update after the camera stops moving.
 	private _cameraState = atom('camera state', 'idle' as 'idle' | 'moving')
 	private _cameraStateTimeoutRemaining = 0
-	_decayCameraStateTimeout(elapsed: number) {
+	private _decayCameraStateTimeout(elapsed: number) {
 		this._cameraStateTimeoutRemaining -= elapsed
 		if (this._cameraStateTimeoutRemaining > 0) return
 		this.off('tick', this._decayCameraStateTimeout)
 		this._cameraState.set('idle')
 	}
-	_tickCameraState() {
+	private _tickCameraState() {
 		// always reset the timeout
 		this._cameraStateTimeoutRemaining = this.options.cameraMovingTimeoutMs
 		// If the state is idle, then start the tick
 		if (this._cameraState.__unsafe__getWithoutCapture() !== 'idle') return
 		this._cameraState.set('moving')
+		this._debouncedZoomLevel.set(unsafe__withoutCapture(() => this.getCamera().z))
 		this.on('tick', this._decayCameraStateTimeout)
 	}
 
@@ -9149,6 +9194,30 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		}
 
+		if (point) {
+			const shapesById = new Map<TLShapeId, TLShape>(shapes.map((shape) => [shape.id, shape]))
+			const rootShapesFromContent = compact(rootShapeIds.map((id) => shapesById.get(id)))
+			if (rootShapesFromContent.length > 0) {
+				const targetParent = this.getShapeAtPoint(point, {
+					hitInside: true,
+					hitFrameInside: true,
+					hitLocked: true,
+					filter: (shape) => {
+						const util = this.getShapeUtil(shape)
+						if (!util.canReceiveNewChildrenOfType) return false
+						return rootShapesFromContent.every((rootShape) =>
+							util.canReceiveNewChildrenOfType!(shape, rootShape.type)
+						)
+					},
+				})
+
+				// When pasting at a specific point (e.g. paste-at-cursor) prefer the
+				// parent under the pointer so that we don't keep using the original
+				// selection's parent (which can keep shapes clipped inside frames).
+				pasteParentId = targetParent ? targetParent.id : currentPageId
+			}
+		}
+
 		let isDuplicating = false
 
 		if (!isPageId(pasteParentId)) {
@@ -10255,8 +10324,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			}
 
-			this.emit('event', info)
 			this.root.handleEvent(info)
+			this.emit('event', info)
 			return
 		}
 

package/src/lib/editor/shapes/group/DashedOutlineBox.tsx

@@ -6,7 +6,7 @@ import { getPerfectDashProps } from '../shared/getPerfectDashProps'
 export function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {
 	const editor = useEditor()
 
-	const zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])
 
 	return (
 		<g className={className} pointerEvents="none" strokeLinecap="round" strokeLinejoin="round">

package/src/lib/globals/environment.ts

@@ -1,5 +1,9 @@
+import { atom } from '@tldraw/state'
+
 /**
  * An object that contains information about the current device and environment.
+ * This object is not reactive and will not update automatically when the environment changes,
+ * so only include values that are fixed, such as the user's browser and operating system.
  *
  * @public
  */
@@ -14,15 +18,66 @@ const tlenv = {
 	hasCanvasSupport: false,
 }
 
-if (typeof window !== 'undefined' && 'navigator' in window) {
-	tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-	tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
-	tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
-	tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
-	tlenv.isAndroid = /android/i.test(navigator.userAgent)
-	tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
-	tlenv.hasCanvasSupport =
-		typeof window !== 'undefined' && 'Promise' in window && 'HTMLCanvasElement' in window
+let isForcedFinePointer = false
+
+if (typeof window !== 'undefined') {
+	if ('navigator' in window) {
+		tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+		tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
+		tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
+		tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
+		tlenv.isAndroid = /android/i.test(navigator.userAgent)
+		tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+	}
+	tlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window
+	isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
+}
+
+/**
+ * An atom that contains information about the current device and environment.
+ * This object is reactive and will update automatically when the environment changes.
+ * Use it for values that may change over time, such as the pointer type.
+ *
+ * @public
+ */
+const tlenvReactive = atom('tlenvReactive', {
+	// Whether the user's device has a coarse pointer. This is dynamic on many systems, especially
+	// on touch-screen laptops, which will become "coarse" if the user touches the screen.
+	// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
+	isCoarsePointer: false,
+})
+
+if (typeof window !== 'undefined' && !isForcedFinePointer) {
+	const mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')
+
+	const isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer
+
+	if (mql) {
+		// 1. Update the coarse pointer automatically when the media query changes
+		const updateIsCoarsePointer = () => {
+			const isCoarsePointer = mql.matches
+			if (isCoarsePointer !== isCurrentCoarsePointer()) {
+				tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarsePointer }))
+			}
+		}
+		updateIsCoarsePointer()
+		mql.addEventListener('change', updateIsCoarsePointer)
+	}
+
+	// 2. Also update the coarse pointer state when a pointer down event occurs. We need `capture: true`
+	// here because the tldraw component itself stops propagation on pointer events it receives.
+	window.addEventListener(
+		'pointerdown',
+		(e: PointerEvent) => {
+			// when the user interacts with a mouse, we assume they have a fine pointer.
+			// otherwise, we assume they have a coarse pointer.
+			const isCoarseEvent = e.pointerType !== 'mouse'
+			if (isCoarseEvent !== isCurrentCoarsePointer()) {
+				tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarseEvent }))
+			}
+		},
+		{ capture: true }
+	)
 }
 
-export { tlenv }
+export { tlenv, tlenvReactive }