@tldraw/editor 3.16.0-canary.f60032f16651 → 3.16.0-canary.fa03b5a9ad13

package/dist-cjs/lib/license/LicenseProvider.js

@@ -18,21 +18,59 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var LicenseProvider_exports = {};
 __export(LicenseProvider_exports, {
+  LICENSE_TIMEOUT: () => LICENSE_TIMEOUT,
   LicenseContext: () => LicenseContext,
   LicenseProvider: () => LicenseProvider,
   useLicenseContext: () => useLicenseContext
 });
 module.exports = __toCommonJS(LicenseProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_state_react = require("@tldraw/state-react");
 var import_react = require("react");
 var import_LicenseManager = require("./LicenseManager");
+const import_meta = {};
 const LicenseContext = (0, import_react.createContext)({});
 const useLicenseContext = () => (0, import_react.useContext)(LicenseContext);
+function shouldHideEditorAfterDelay(licenseState) {
+  return licenseState === "expired" || licenseState === "unlicensed-production";
+}
+const LICENSE_TIMEOUT = 5e3;
 function LicenseProvider({
-  licenseKey,
+  licenseKey = getLicenseKeyFromEnv() ?? void 0,
   children
 }) {
   const [licenseManager] = (0, import_react.useState)(() => new import_LicenseManager.LicenseManager(licenseKey));
+  const licenseState = (0, import_state_react.useValue)(licenseManager.state);
+  const [showEditor, setShowEditor] = (0, import_react.useState)(true);
+  (0, import_react.useEffect)(() => {
+    if (shouldHideEditorAfterDelay(licenseState) && showEditor) {
+      const timer = setTimeout(() => {
+        setShowEditor(false);
+      }, LICENSE_TIMEOUT);
+      return () => clearTimeout(timer);
+    }
+  }, [licenseState, showEditor]);
+  if (shouldHideEditorAfterDelay(licenseState) && !showEditor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LicenseGate, {});
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LicenseContext.Provider, { value: licenseManager, children });
 }
+function LicenseGate() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-testid": "tl-license-expired", style: { display: "none" } });
+}
+let envLicenseKey = void 0;
+function getLicenseKeyFromEnv() {
+  if (envLicenseKey !== void 0) {
+    return envLicenseKey;
+  }
+  envLicenseKey = getEnv(() => process.env.TLDRAW_LICENSE_KEY) || getEnv(() => process.env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) || getEnv(() => process.env.REACT_APP_TLDRAW_LICENSE_KEY) || getEnv(() => process.env.GATSBY_TLDRAW_LICENSE_KEY) || getEnv(() => process.env.VITE_TLDRAW_LICENSE_KEY) || getEnv(() => process.env.PUBLIC_TLDRAW_LICENSE_KEY) || getEnv(() => import_meta.env.TLDRAW_LICENSE_KEY) || getEnv(() => import_meta.env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) || getEnv(() => import_meta.env.REACT_APP_TLDRAW_LICENSE_KEY) || getEnv(() => import_meta.env.GATSBY_TLDRAW_LICENSE_KEY) || getEnv(() => import_meta.env.VITE_TLDRAW_LICENSE_KEY) || getEnv(() => import_meta.env.PUBLIC_TLDRAW_LICENSE_KEY) || null;
+  return envLicenseKey;
+}
+function getEnv(cb) {
+  try {
+    return cb();
+  } catch {
+    return void 0;
+  }
+}
 //# sourceMappingURL=LicenseProvider.js.map

package/dist-cjs/lib/license/LicenseProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/license/LicenseProvider.tsx"],
-  "sourcesContent": ["import { createContext, ReactNode, useContext, useState } from 'react'\nimport { LicenseManager } from './LicenseManager'\n\n/** @internal */\nexport const LicenseContext = createContext({} as LicenseManager)\n\n/** @internal */\nexport const useLicenseContext = () => useContext(LicenseContext)\n\n/** @internal */\nexport function LicenseProvider({\n\tlicenseKey,\n\tchildren,\n}: {\n\tlicenseKey?: string\n\tchildren: ReactNode\n}) {\n\tconst [licenseManager] = useState(() => new LicenseManager(licenseKey))\n\treturn <LicenseContext.Provider value={licenseManager}>{children}</LicenseContext.Provider>\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBQ;AAlBR,mBAA+D;AAC/D,4BAA+B;AAGxB,MAAM,qBAAiB,4BAAc,CAAC,CAAmB;AAGzD,MAAM,oBAAoB,UAAM,yBAAW,cAAc;AAGzD,SAAS,gBAAgB;AAAA,EAC/B;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,cAAc,QAAI,uBAAS,MAAM,IAAI,qCAAe,UAAU,CAAC;AACtE,SAAO,4CAAC,eAAe,UAAf,EAAwB,OAAO,gBAAiB,UAAS;AAClE;",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { createContext, ReactNode, useContext, useEffect, useState } from 'react'\nimport { LicenseManager } from './LicenseManager'\n\n/** @internal */\nexport const LicenseContext = createContext({} as LicenseManager)\n\n/** @internal */\nexport const useLicenseContext = () => useContext(LicenseContext)\n\nfunction shouldHideEditorAfterDelay(licenseState: string): boolean {\n\treturn licenseState === 'expired' || licenseState === 'unlicensed-production'\n}\n\n/** @internal */\nexport const LICENSE_TIMEOUT = 5000\n\n/** @internal */\nexport function LicenseProvider({\n\tlicenseKey = getLicenseKeyFromEnv() ?? undefined,\n\tchildren,\n}: {\n\tlicenseKey?: string\n\tchildren: ReactNode\n}) {\n\tconst [licenseManager] = useState(() => new LicenseManager(licenseKey))\n\tconst licenseState = useValue(licenseManager.state)\n\tconst [showEditor, setShowEditor] = useState(true)\n\n\t// When license expires or no license in production, show for 5 seconds then hide\n\tuseEffect(() => {\n\t\tif (shouldHideEditorAfterDelay(licenseState) && showEditor) {\n\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\tconst timer = setTimeout(() => {\n\t\t\t\tsetShowEditor(false)\n\t\t\t}, LICENSE_TIMEOUT)\n\n\t\t\treturn () => clearTimeout(timer)\n\t\t}\n\t}, [licenseState, showEditor])\n\n\t// If license is expired or no license in production and 5 seconds have passed, don't render anything (blank screen)\n\tif (shouldHideEditorAfterDelay(licenseState) && !showEditor) {\n\t\treturn <LicenseGate />\n\t}\n\n\treturn <LicenseContext.Provider value={licenseManager}>{children}</LicenseContext.Provider>\n}\n\n// Renders as a hidden div that can be detected by tests\nfunction LicenseGate() {\n\treturn <div data-testid=\"tl-license-expired\" style={{ display: 'none' }} />\n}\n\nlet envLicenseKey: string | undefined | null = undefined\nfunction getLicenseKeyFromEnv() {\n\tif (envLicenseKey !== undefined) {\n\t\treturn envLicenseKey\n\t}\n\t// it's important here that we write out the full process.env.WHATEVER expression instead of\n\t// doing something like process.env[someVariable]. This is because most bundlers do something\n\t// like a find-replace inject environment variables, and so won't pick up on dynamic ones. It\n\t// also means we can't do checks like `process.env && process.env.WHATEVER`, which is why we use\n\t// the `getEnv` try/catch approach.\n\n\t// framework-specific prefixes borrowed from the ones vercel uses, but trimmed down to just the\n\t// react-y ones: https://vercel.com/docs/environment-variables/framework-environment-variables\n\tenvLicenseKey =\n\t\tgetEnv(() => process.env.TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => process.env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => process.env.REACT_APP_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => process.env.GATSBY_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => process.env.VITE_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => process.env.PUBLIC_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => (import.meta as any).env.TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => (import.meta as any).env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => (import.meta as any).env.REACT_APP_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => (import.meta as any).env.GATSBY_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => (import.meta as any).env.VITE_TLDRAW_LICENSE_KEY) ||\n\t\tgetEnv(() => (import.meta as any).env.PUBLIC_TLDRAW_LICENSE_KEY) ||\n\t\tnull\n\n\treturn envLicenseKey\n}\n\nfunction getEnv(cb: () => string | undefined) {\n\ttry {\n\t\treturn cb()\n\t} catch {\n\t\treturn undefined\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CS;AA3CT,yBAAyB;AACzB,mBAA0E;AAC1E,4BAA+B;AAF/B;AAKO,MAAM,qBAAiB,4BAAc,CAAC,CAAmB;AAGzD,MAAM,oBAAoB,UAAM,yBAAW,cAAc;AAEhE,SAAS,2BAA2B,cAA+B;AAClE,SAAO,iBAAiB,aAAa,iBAAiB;AACvD;AAGO,MAAM,kBAAkB;AAGxB,SAAS,gBAAgB;AAAA,EAC/B,aAAa,qBAAqB,KAAK;AAAA,EACvC;AACD,GAGG;AACF,QAAM,CAAC,cAAc,QAAI,uBAAS,MAAM,IAAI,qCAAe,UAAU,CAAC;AACtE,QAAM,mBAAe,6BAAS,eAAe,KAAK;AAClD,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,IAAI;AAGjD,8BAAU,MAAM;AACf,QAAI,2BAA2B,YAAY,KAAK,YAAY;AAE3D,YAAM,QAAQ,WAAW,MAAM;AAC9B,sBAAc,KAAK;AAAA,MACpB,GAAG,eAAe;AAElB,aAAO,MAAM,aAAa,KAAK;AAAA,IAChC;AAAA,EACD,GAAG,CAAC,cAAc,UAAU,CAAC;AAG7B,MAAI,2BAA2B,YAAY,KAAK,CAAC,YAAY;AAC5D,WAAO,4CAAC,eAAY;AAAA,EACrB;AAEA,SAAO,4CAAC,eAAe,UAAf,EAAwB,OAAO,gBAAiB,UAAS;AAClE;AAGA,SAAS,cAAc;AACtB,SAAO,4CAAC,SAAI,eAAY,sBAAqB,OAAO,EAAE,SAAS,OAAO,GAAG;AAC1E;AAEA,IAAI,gBAA2C;AAC/C,SAAS,uBAAuB;AAC/B,MAAI,kBAAkB,QAAW;AAChC,WAAO;AAAA,EACR;AASA,kBACC,OAAO,MAAM,QAAQ,IAAI,kBAAkB,KAC3C,OAAO,MAAM,QAAQ,IAAI,8BAA8B,KACvD,OAAO,MAAM,QAAQ,IAAI,4BAA4B,KACrD,OAAO,MAAM,QAAQ,IAAI,yBAAyB,KAClD,OAAO,MAAM,QAAQ,IAAI,uBAAuB,KAChD,OAAO,MAAM,QAAQ,IAAI,yBAAyB,KAClD,OAAO,MAAO,YAAoB,IAAI,kBAAkB,KACxD,OAAO,MAAO,YAAoB,IAAI,8BAA8B,KACpE,OAAO,MAAO,YAAoB,IAAI,4BAA4B,KAClE,OAAO,MAAO,YAAoB,IAAI,yBAAyB,KAC/D,OAAO,MAAO,YAAoB,IAAI,uBAAuB,KAC7D,OAAO,MAAO,YAAoB,IAAI,yBAAyB,KAC/D;AAED,SAAO;AACR;AAEA,SAAS,OAAO,IAA8B;AAC7C,MAAI;AACH,WAAO,GAAG;AAAA,EACX,QAAQ;AACP,WAAO;AAAA,EACR;AACD;",
   "names": []
 }

package/dist-cjs/lib/license/Watermark.js

@@ -45,10 +45,56 @@ const Watermark = (0, import_react.memo)(function Watermark2() {
   if (!["licensed-with-watermark", "unlicensed"].includes(licenseManagerState)) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LicenseStyles, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WatermarkInner, { src: isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      WatermarkInner,
+      {
+        src: isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC,
+        isUnlicensed: licenseManagerState === "unlicensed"
+      }
+    )
   ] });
 });
-const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src }) {
+const UnlicensedWatermark = (0, import_react.memo)(function UnlicensedWatermark2({
+  isDebugMode,
+  isMobile
+}) {
+  const editor = (0, import_useEditor.useEditor)();
+  const events = (0, import_useCanvasEvents.useCanvasEvents)();
+  const ref = (0, import_react.useRef)(null);
+  (0, import_usePassThroughWheelEvents.usePassThroughWheelEvents)(ref);
+  const url = "https://tldraw.dev/pricing?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      className: import_LicenseManager.LicenseManager.className,
+      "data-debug": isDebugMode,
+      "data-mobile": isMobile,
+      "data-unlicensed": true,
+      "data-testid": "tl-watermark-unlicensed",
+      draggable: false,
+      ...events,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          draggable: false,
+          role: "button",
+          onPointerDown: (e) => {
+            editor.markEventAsHandled(e);
+            (0, import_dom.preventDefault)(e);
+          },
+          title: "The tldraw SDK requires a license key to work in production. You can get a free 100-day trial license at tldraw.dev/pricing.",
+          onClick: () => import_runtime.runtime.openWindow(url, "_blank"),
+          children: "Get a license for production"
+        }
+      )
+    }
+  );
+});
+const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({
+  src,
+  isUnlicensed
+}) {
   const editor = (0, import_useEditor.useEditor)();
   const isDebugMode = (0, import_state_react.useValue)("debug mode", () => editor.getInstanceState().isDebugMode, [editor]);
   const isMobile = (0, import_state_react.useValue)("is mobile", () => editor.getViewportScreenBounds().width < 700, [
@@ -59,6 +105,9 @@ const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src })
   (0, import_usePassThroughWheelEvents.usePassThroughWheelEvents)(ref);
   const maskCss = `url('${src}') center 100% / 100% no-repeat`;
   const url = "https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark";
+  if (isUnlicensed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnlicensedWatermark, { isDebugMode, isMobile });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
@@ -66,6 +115,7 @@ const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src })
       className: import_LicenseManager.LicenseManager.className,
       "data-debug": isDebugMode,
       "data-mobile": isMobile,
+      "data-testid": "tl-watermark-licensed",
       draggable: false,
       ...events,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -74,10 +124,10 @@ const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src })
           draggable: false,
           role: "button",
           onPointerDown: (e) => {
-            (0, import_dom.stopEventPropagation)(e);
+            editor.markEventAsHandled(e);
             (0, import_dom.preventDefault)(e);
           },
-          title: "made with tldraw",
+          title: "Build infinite canvas applications with the tldraw SDK. Learn more at https://tldraw.dev.",
           onClick: () => import_runtime.runtime.openWindow(url, "_blank"),
           style: { mask: maskCss, WebkitMask: maskCss }
         }
@@ -88,7 +138,8 @@ const WatermarkInner = (0, import_react.memo)(function WatermarkInner2({ src })
 const LicenseStyles = (0, import_react.memo)(function LicenseStyles2() {
   const editor = (0, import_useEditor.useEditor)();
   const className = import_LicenseManager.LicenseManager.className;
-  const CSS = `/* ------------------- SEE LICENSE -------------------
+  const CSS = `
+/* ------------------- SEE LICENSE -------------------
 The tldraw watermark is part of tldraw's license. It is shown for unlicensed
 or "licensed-with-watermark" users. By using this library, you agree to
 preserve the watermark's behavior, keeping it visible, unobscured, and
@@ -97,87 +148,105 @@ available to user-interaction.
 To remove the watermark, please purchase a license at tldraw.dev.
 */
 
-	.${className} {
-		position: absolute;
-		bottom: var(--space-2);
-		right: var(--space-2);
-		width: 96px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: var(--layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--color-background) 62%, transparent);
-		opacity: 1;
-		border-radius: 5px;
-		pointer-events: all;
-		padding: 2px;
-		box-sizing: content-box;
-	}
+.${className} {
+	position: absolute;
+	bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
+	right: max(var(--tl-space-2), env(safe-area-inset-right));
+	width: 96px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: var(--tl-layer-watermark) !important;
+	background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
+	opacity: 1;
+	border-radius: 5px;
+	pointer-events: all;
+	padding: 2px;
+	box-sizing: content-box;
+}
 
-	.${className} > button {
-		position: absolute;
-		width: 96px;
-		height: 32px;
-		pointer-events: all;
-		cursor: inherit;
-		color: var(--color-text);
-		opacity: .38;
-		border: 0;
-		padding: 0;
-		background-color: currentColor;
-	}
+.${className} > button {
+	position: absolute;
+	width: 96px;
+	height: 32px;
+	pointer-events: all;
+	cursor: inherit;
+	color: var(--tl-color-text);
+	opacity: .38;
+	border: 0;
+	padding: 0;
+	background-color: currentColor;
+}
 
-	.${className}[data-debug='true'] {
-		bottom: 46px;
-	}
+.${className}[data-debug='true'] {
+	bottom: max(46px, env(safe-area-inset-bottom));
+}
 
-	.${className}[data-mobile='true'] {
-		border-radius: 4px 0px 0px 4px;
-		right: -2px;
-		width: 8px;
-		height: 48px;
-	}
+.${className}[data-mobile='true'] {
+	border-radius: 4px 0px 0px 4px;
+	right: max(-2px, calc(env(safe-area-inset-right) - 2px));
+	width: 8px;
+	height: 48px;
+}
 
-	.${className}[data-mobile='true'] > button {
-		width: 8px;
-		height: 32px;
-	}
+.${className}[data-mobile='true'] > button {
+	width: 8px;
+	height: 32px;
+}
+
+.${className}[data-unlicensed='true'] > button {
+	font-size: 100px;
+	position: absolute;
+	pointer-events: all;
+	cursor: pointer;
+	color: var(--tl-color-text);
+	opacity: 0.8;
+	border: 0;
+	padding: 0;
+	background-color: transparent;
+	font-size: 11px;
+	font-weight: 600;
+	text-align: center;
+}
 
-	@media (hover: hover) {
-		.${className} > button {
-			pointer-events: none;
-		}
+.${className}[data-mobile='true'][data-unlicensed='true'] > button {
+	display: none;
+}
 
-		.${className}:hover {
-			background-color: var(--color-background);
-			transition: background-color 0.2s ease-in-out;
-			transition-delay: 0.32s;
-		}
+@media (hover: hover) {
+	.${className}[data-licensed='false'] > button {
+		pointer-events: none;
+	}
 
-		.${className}:hover > button {
-			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
-			animation-delay: 0.32s;
-		}
+	.${className}[data-licensed='false']:hover {
+		background-color: var(--tl-color-background);
+		transition: background-color 0.2s ease-in-out;
+		transition-delay: 0.32s;
+	}
 
-		.${className} > button:focus-visible {
-			opacity: 1;
-		}
+	.${className}[data-licensed='false']:hover > button {
+		animation: ${className}_delayed_link 0.2s forwards ease-in-out;
+		animation-delay: 0.32s;
 	}
 
+	.${className}[data-licensed='false'] > button:focus-visible {
+		opacity: 1;
+	}
+}
 
-	@keyframes ${className}_delayed_link {
-		0% {
-			cursor: inherit;
-			opacity: .38;
-			pointer-events: none;
-		}
-		100% {
-			cursor: pointer;
-			opacity: 1;
-			pointer-events: all;
-		}
-	}`;
+@keyframes ${className}_delayed_link {
+	0% {
+		cursor: inherit;
+		opacity: .38;
+		pointer-events: none;
+	}
+	100% {
+		cursor: pointer;
+		opacity: 1;
+		pointer-events: all;
+	}
+}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { nonce: editor.options.nonce, children: CSS });
 });
 //# sourceMappingURL=Watermark.js.map

package/dist-cjs/lib/license/Watermark.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/license/Watermark.tsx"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: ${className}_delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes ${className}_delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BE;AA5BF,yBAAyB;AACzB,mBAA6B;AAC7B,6BAAgC;AAChC,uBAA0B;AAC1B,uCAA0C;AAC1C,iBAAqD;AACrD,qBAAwB;AACxB,wBAAwD;AACxD,4BAA+B;AAC/B,6BAAkC;AAClC,oCAAuC;AAEvC,MAAM,8BAA8B,2BAA2B,mBAAmB,qCAAmB,CAAC;AACtG,MAAM,6BAA6B,2BAA2B,mBAAmB,oCAAkB,CAAC;AAG7F,MAAM,gBAAY,mBAAK,SAASA,aAAY;AAClD,QAAM,qBAAiB,0CAAkB;AACzC,QAAM,aAAS,4BAAU;AACzB,QAAM,eAAW,6BAAS,aAAa,MAAM,OAAO,wBAAwB,EAAE,QAAQ,KAAK;AAAA,IAC1F;AAAA,EACD,CAAC;AAED,QAAM,0BAAsB,sDAAuB,cAAc;AAEjE,MAAI,CAAC,CAAC,2BAA2B,YAAY,EAAE,SAAS,mBAAmB,EAAG,QAAO;AAErF,SACC,4EACC;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,kBAAe,KAAK,WAAW,6BAA6B,6BAA6B;AAAA,KAC3F;AAEF,CAAC;AAED,MAAM,qBAAiB,mBAAK,SAASC,gBAAe,EAAE,IAAI,GAAoB;AAC7E,QAAM,aAAS,4BAAU;AACzB,QAAM,kBAAc,6BAAS,cAAc,MAAM,OAAO,iBAAiB,EAAE,aAAa,CAAC,MAAM,CAAC;AAChG,QAAM,eAAW,6BAAS,aAAa,MAAM,OAAO,wBAAwB,EAAE,QAAQ,KAAK;AAAA,IAC1F;AAAA,EACD,CAAC;AACD,QAAM,aAAS,wCAAgB;AAE/B,QAAM,UAAM,qBAAuB,IAAI;AACvC,kEAA0B,GAAG;AAE7B,QAAM,UAAU,QAAQ,GAAG;AAC3B,QAAM,MAAM;AAEZ,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAW,qCAAe;AAAA,MAC1B,cAAY;AAAA,MACZ,eAAa;AAAA,MACb,WAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACA,WAAW;AAAA,UACX,MAAK;AAAA,UACL,eAAe,CAAC,MAAM;AACrB,iDAAqB,CAAC;AACtB,2CAAe,CAAC;AAAA,UACjB;AAAA,UACA,OAAM;AAAA,UACN,SAAS,MAAM,uBAAQ,WAAW,KAAK,QAAQ;AAAA,UAC/C,OAAO,EAAE,MAAM,SAAS,YAAY,QAAQ;AAAA;AAAA,MAC7C;AAAA;AAAA,EACD;AAEF,CAAC;AAED,MAAM,oBAAgB,mBAAK,SAASC,iBAAgB;AACnD,QAAM,aAAS,4BAAU;AACzB,QAAM,YAAY,qCAAe;AAEjC,QAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAST,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAkBT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaT,SAAS;AAAA;AAAA;AAAA;AAAA,IAIT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMR,SAAS;AAAA;AAAA;AAAA;AAAA,KAIT,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMT,SAAS;AAAA,gBACE,SAAS;AAAA;AAAA;AAAA;AAAA,KAIpB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatB,SAAO,4CAAC,WAAM,OAAO,OAAO,QAAQ,OAAQ,eAAI;AACjD,CAAC;",
-  "names": ["Watermark", "WatermarkInner", "LicenseStyles"]
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner\n\t\t\t\tsrc={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC}\n\t\t\t\tisUnlicensed={licenseManagerState === 'unlicensed'}\n\t\t\t/>\n\t\t</>\n\t)\n})\n\nconst UnlicensedWatermark = memo(function UnlicensedWatermark({\n\tisDebugMode,\n\tisMobile,\n}: {\n\tisDebugMode: boolean\n\tisMobile: boolean\n}) {\n\tconst editor = useEditor()\n\tconst events = useCanvasEvents()\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst url =\n\t\t'https://tldraw.dev/pricing?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdata-unlicensed={true}\n\t\t\tdata-testid=\"tl-watermark-unlicensed\"\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"The tldraw SDK requires a license key to work in production. You can get a free 100-day trial license at tldraw.dev/pricing.\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t>\n\t\t\t\tGet a license for production\n\t\t\t</button>\n\t\t</div>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({\n\tsrc,\n\tisUnlicensed,\n}: {\n\tsrc: string\n\tisUnlicensed: boolean\n}) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\tif (isUnlicensed) {\n\t\treturn <UnlicensedWatermark isDebugMode={isDebugMode} isMobile={isMobile} />\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdata-testid=\"tl-watermark-licensed\"\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\teditor.markEventAsHandled(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"Build infinite canvas applications with the tldraw SDK. Learn more at https://tldraw.dev.\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `\n/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n.${className} {\n\tposition: absolute;\n\tbottom: max(var(--tl-space-2), env(safe-area-inset-bottom));\n\tright: max(var(--tl-space-2), env(safe-area-inset-right));\n\twidth: 96px;\n\theight: 32px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: var(--tl-layer-watermark) !important;\n\tbackground-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);\n\topacity: 1;\n\tborder-radius: 5px;\n\tpointer-events: all;\n\tpadding: 2px;\n\tbox-sizing: content-box;\n}\n\n.${className} > button {\n\tposition: absolute;\n\twidth: 96px;\n\theight: 32px;\n\tpointer-events: all;\n\tcursor: inherit;\n\tcolor: var(--tl-color-text);\n\topacity: .38;\n\tborder: 0;\n\tpadding: 0;\n\tbackground-color: currentColor;\n}\n\n.${className}[data-debug='true'] {\n\tbottom: max(46px, env(safe-area-inset-bottom));\n}\n\n.${className}[data-mobile='true'] {\n\tborder-radius: 4px 0px 0px 4px;\n\tright: max(-2px, calc(env(safe-area-inset-right) - 2px));\n\twidth: 8px;\n\theight: 48px;\n}\n\n.${className}[data-mobile='true'] > button {\n\twidth: 8px;\n\theight: 32px;\n}\n\n.${className}[data-unlicensed='true'] > button {\n\tfont-size: 100px;\n\tposition: absolute;\n\tpointer-events: all;\n\tcursor: pointer;\n\tcolor: var(--tl-color-text);\n\topacity: 0.8;\n\tborder: 0;\n\tpadding: 0;\n\tbackground-color: transparent;\n\tfont-size: 11px;\n\tfont-weight: 600;\n\ttext-align: center;\n}\n\n.${className}[data-mobile='true'][data-unlicensed='true'] > button {\n\tdisplay: none;\n}\n\n@media (hover: hover) {\n\t.${className}[data-licensed='false'] > button {\n\t\tpointer-events: none;\n\t}\n\n\t.${className}[data-licensed='false']:hover {\n\t\tbackground-color: var(--tl-color-background);\n\t\ttransition: background-color 0.2s ease-in-out;\n\t\ttransition-delay: 0.32s;\n\t}\n\n\t.${className}[data-licensed='false']:hover > button {\n\t\tanimation: ${className}_delayed_link 0.2s forwards ease-in-out;\n\t\tanimation-delay: 0.32s;\n\t}\n\n\t.${className}[data-licensed='false'] > button:focus-visible {\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ${className}_delayed_link {\n\t0% {\n\t\tcursor: inherit;\n\t\topacity: .38;\n\t\tpointer-events: none;\n\t}\n\t100% {\n\t\tcursor: pointer;\n\t\topacity: 1;\n\t\tpointer-events: all;\n\t}\n}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
+  "mappings": "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",
+  "names": ["Watermark", "UnlicensedWatermark", "WatermarkInner", "LicenseStyles"]
 }

package/dist-cjs/lib/license/useLicenseManagerState.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/license/useLicenseManagerState.ts"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { LicenseManager } from './LicenseManager'\n\n/** @internal */\nexport function useLicenseManagerState(licenseManager: LicenseManager) {\n\treturn useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAyB;AAIlB,SAAS,uBAAuB,gBAAgC;AACtE,aAAO,6BAAS,kBAAkB,MAAM,eAAe,MAAM,IAAI,GAAG,CAAC,cAAc,CAAC;AACrF;",
+  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { LicenseManager, LicenseState } from './LicenseManager'\n\n/** @internal */\nexport function useLicenseManagerState(licenseManager: LicenseManager): LicenseState {\n\treturn useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAyB;AAIlB,SAAS,uBAAuB,gBAA8C;AACpF,aAAO,6BAAS,kBAAkB,MAAM,eAAe,MAAM,IAAI,GAAG,CAAC,cAAc,CAAC;AACrF;",
   "names": []
 }

package/dist-cjs/lib/options.js

@@ -34,6 +34,12 @@ const defaultTldrawOptions = {
   // 6 squared
   dragDistanceSquared: 16,
   // 4 squared
+  uiDragDistanceSquared: 16,
+  // 4 squared
+  // it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger
+  // threshold than usual here to try and prevent accidental drags.
+  uiCoarseDragDistanceSquared: 625,
+  // 25 squared
   defaultSvgPadding: 32,
   cameraSlideFriction: 0.09,
   gridSteps: [
@@ -61,6 +67,7 @@ const defaultTldrawOptions = {
   flattenImageBoundsPadding: 16,
   laserDelayMs: 1200,
   maxExportDelayMs: 5e3,
+  tooltipDelayMs: 700,
   temporaryAssetPreviewLifetimeMs: 18e4,
   actionShortcutsLocation: "swap",
   createTextOnCanvasDoubleClick: true,

package/dist-cjs/lib/options.js.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 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\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\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\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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwC;AAyFjC,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,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,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}\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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwC;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;",
   "names": []
 }

package/dist-cjs/lib/primitives/Box.js

@@ -357,6 +357,9 @@ class Box {
   static Contains(A, B) {
     return A.minX < B.minX && A.minY < B.minY && A.maxY > B.maxY && A.maxX > B.maxX;
   }
+  static ContainsApproximately(A, B, precision) {
+    return (0, import_utils.approximatelyLte)(A.minX, B.minX, precision) && (0, import_utils.approximatelyLte)(A.minY, B.minY, precision) && (0, import_utils.approximatelyLte)(B.maxX, A.maxX, precision) && (0, import_utils.approximatelyLte)(B.maxY, A.maxY, precision);
+  }
   static Includes(A, B) {
     return Box.Collides(A, B) || Box.Contains(A, B);
   }