tldraw 5.3.1 → 5.3.2

package/DOCS.md

@@ -1,6 +1,6 @@
 # tldraw Documentation
 
-Version: `5.3.1`
+Version: `5.3.2`
 
 This file is generated during package publishing from the tldraw docs content for this exact package version.
 

package/RELEASE_NOTES.md

@@ -1,23 +1,27 @@
 # Releases
 
-Version: `5.3.1`
+Version: `5.3.2`
 
 This file is generated during package publishing from the tldraw release notes content for this exact package version.
 
-## v5.3.1
+## v5.3.2
 
-This release adds a `center` operation to `Editor.alignShapes`, `iterateGraphemes` to `@tldraw/utils`, and two new reactive methods on `AtomMap`. It also deprecates `useViewportHeight` and fixes a batch of crashes and interaction bugs across dialogs, sync reconnection, undo, and keyboard shortcut tooltips.
+This release adds a `center` operation to `Editor.alignShapes`, `iterateGraphemes` to `@tldraw/utils`, and two new reactive methods on `AtomMap`. It also deprecates `useViewportHeight`, speeds up the signals and store layers, and fixes a batch of crashes and interaction bugs across dialogs, sync reconnection, undo, and keyboard shortcut tooltips.
 
 ### API changes
 
 - 🔜 **`useViewportHeight()`** is deprecated. Read `window.visualViewport` directly instead. The hook returns only the visible viewport's bottom edge, and keeping a panel clear of the software keyboard generally needs the whole visible rectangle. ([#9826](https://github.com/tldraw/tldraw/pull/9826))
 - Add `'center'` as an `Editor.alignShapes` operation. It applies the existing `'center-horizontal'` and `'center-vertical'` operations together, so shapes center on both axes in one command. ([#9074](https://github.com/tldraw/tldraw/pull/9074))
 - Add `getOrInsert(key, defaultValue)` and `getOrInsertComputed(key, callback)` to `AtomMap`, matching the `Map` methods added in newer JavaScript runtimes. Both are reactive, and the callback only runs when the key is absent. ([#9752](https://github.com/tldraw/tldraw/pull/9752))
+- Add `isPage(record)` to `@tldraw/tlschema`, a type guard that narrows an unknown record to `TLPage`. ([#9774](https://github.com/tldraw/tldraw/pull/9774))
 - Add `iterateGraphemes(str)` to `@tldraw/utils`. It iterates a string's grapheme clusters, using `Intl.Segmenter` when it's available and falling back to code-point iteration when it isn't. ([#9896](https://github.com/tldraw/tldraw/pull/9896))
+- Add `isPage(record)` to `@tldraw/tlschema`, a type guard for page records that matches the guards already exported for the other record types. ([#9774](https://github.com/tldraw/tldraw/pull/9774))
 
 ### Improvements
 
 - Reduce per-pointer-event allocations in `Group2d` and `Editor` hit-testing. ([#8600](https://github.com/tldraw/tldraw/pull/8600))
+- Speed up signal reads in `@tldraw/state`. Capturing a parent used to scan the capturing signal's parent set twice, once to check for the parent and again to add it. ([#9690](https://github.com/tldraw/tldraw/pull/9690))
+- Reduce the work and allocations in `@tldraw/store` history bookkeeping, so squashing record diffs and filtering query history no longer build intermediate copies on every tick. ([#9689](https://github.com/tldraw/tldraw/pull/9689), [#9869](https://github.com/tldraw/tldraw/pull/9869))
 
 ### Bug fixes
 
@@ -27,6 +31,7 @@ This release adds a `center` operation to `Editor.alignShapes`, `iterateGrapheme
 - Fix modifier keys (Shift, Alt, Ctrl, Cmd) briefly being treated as held at the start of a new click or drag right after being released, which could momentarily affect snapping and other modifier-dependent behavior. ([#9523](https://github.com/tldraw/tldraw/pull/9523))
 - Fix **Flatten to image** producing different groupings depending on selection order, and not merging clusters that were only connected through a bridging shape. ([#8661](https://github.com/tldraw/tldraw/pull/8661))
 - Fix pasted links showing a broken preview image when the linked page has no Open Graph image. ([#9909](https://github.com/tldraw/tldraw/pull/9909))
+- Fix video shapes showing a floating spinner with no bounding box while their asset uploads or loads. They now show the same loading plate as image shapes. ([#9994](https://github.com/tldraw/tldraw/pull/9994))
 - Fix closing a stacked dialog by touch also closing the dialog beneath it. ([#10002](https://github.com/tldraw/tldraw/pull/10002))
 - Fix wheel event normalization passing through non-finite delta values. ([#9586](https://github.com/tldraw/tldraw/pull/9586))
 - Fix the counterclockwise rotation tooltip not showing its comma key. ([#9772](https://github.com/tldraw/tldraw/pull/9772))
@@ -34,6 +39,7 @@ This release adds a `center` operation to `Editor.alignShapes`, `iterateGrapheme
 - Fix the people menu's collaborator rows not lining up with your own row above them: the follow icon sat too close to the right edge, and collaborator names sat slightly left of your own. ([#9900](https://github.com/tldraw/tldraw/pull/9900))
 - Fix the comment thread popover briefly rendering with a doubled shadow the first time a thread is opened. ([#9886](https://github.com/tldraw/tldraw/pull/9886))
 - Fix background tabs repeatedly dropping and re-establishing their sync connection when the browser throttles timers. ([#9964](https://github.com/tldraw/tldraw/pull/9964))
+- Fix video shapes showing a floating spinner with no bounding box while the video asset uploads or loads. They now show the same loading plate as image shapes. ([#9994](https://github.com/tldraw/tldraw/pull/9994))
 
 ## v5.3.0
 
@@ -125,6 +131,16 @@ See the [commenting docs](https://tldraw.dev/docs/commenting) for setup.
 - Fix a crash when a custom font failed to load after its editor had been disposed. ([#9494](https://github.com/tldraw/tldraw/pull/9494))
 - Fix license expiry being evaluated in local time, which could deactivate a license a calendar day early for users west of UTC; the expiry date is now treated as the last fully usable day in UTC. ([#9475](https://github.com/tldraw/tldraw/pull/9475))
 
+---
+
+### Patch releases
+
+#### v5.3.1
+
+- Fix touches in part of the canvas being ignored on iOS when the editor was inset from the edge of the page, such as beside a sidebar. ([#9989](https://github.com/tldraw/tldraw/pull/9989))
+
+[View release on GitHub](https://github.com/tldraw/tldraw/releases/tag/v5.3.1)
+
 ## v5.2.0
 
 [View on GitHub](https://github.com/tldraw/tldraw/releases/tag/v5.2.0)

package/dist-cjs/index.js

@@ -653,7 +653,7 @@ var import_buildFromV1Document = require("./lib/utils/tldr/buildFromV1Document")
 var import_file = require("./lib/utils/tldr/file");
 (0, import_editor.registerTldrawLibraryVersion)(
   "tldraw",
-  "5.3.1",
+  "5.3.2",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/lib/ui/hooks/useCommentingEnabled.js

@@ -23,6 +23,6 @@ __export(useCommentingEnabled_exports, {
 module.exports = __toCommonJS(useCommentingEnabled_exports);
 var import_editor = require("@tldraw/editor");
 function useCommentingEnabled() {
-  return (0, import_editor.useLicenseFeatureFlag)((0, import_editor.useLicenseContext)(), "commenting");
+  return (0, import_editor.useLicenseFeatureFlag)((0, import_editor.useMaybeLicenseManager)(), "commenting");
 }
 //# sourceMappingURL=useCommentingEnabled.js.map

package/dist-cjs/lib/ui/hooks/useCommentingEnabled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/hooks/useCommentingEnabled.ts"],
-  "sourcesContent": ["import { useLicenseContext, useLicenseFeatureFlag } from '@tldraw/editor'\n\n/**\n * Whether the commenting feature is licensed for this editor. The default comment quick action and\n * its keyboard shortcut are hidden/disabled unless this is true. Enabled in development; in\n * production it requires a license that includes the commenting feature (or the collaboration\n * umbrella that grants it). Reactive: re-reads when license validation resolves.\n *\n * @internal\n */\nexport function useCommentingEnabled(): boolean {\n\treturn useLicenseFeatureFlag(useLicenseContext(), 'commenting')\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAyD;AAUlD,SAAS,uBAAgC;AAC/C,aAAO,yCAAsB,iCAAkB,GAAG,YAAY;AAC/D;",
+  "sourcesContent": ["import { useLicenseFeatureFlag, useMaybeLicenseManager } from '@tldraw/editor'\n\n/**\n * Whether the commenting feature is licensed for this editor. The default comment quick action and\n * its keyboard shortcut are hidden/disabled unless this is true. Enabled in development; in\n * production it requires a license that includes the commenting feature (or the collaboration\n * umbrella that grants it). Reactive: re-reads when license validation resolves. Works outside\n * `<Tldraw />` too: UI mounted via `EditorProvider` resolves the license through the editor, and\n * with no editor at all this is `false`.\n *\n * @internal\n */\nexport function useCommentingEnabled(): boolean {\n\treturn useLicenseFeatureFlag(useMaybeLicenseManager(), 'commenting')\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA8D;AAYvD,SAAS,uBAAgC;AAC/C,aAAO,yCAAsB,sCAAuB,GAAG,YAAY;AACpE;",
   "names": []
 }

package/dist-cjs/lib/ui/version.js

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "5.3.1";
+const version = "5.3.2";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
   minor: "2026-08-05T11:39:54.978Z",
-  patch: "2026-08-14T10:46:20.010Z"
+  patch: "2026-08-18T09:59:40.172Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/lib/ui/version.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.1'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:39:54.978Z',\n\tpatch: '2026-08-14T10:46:20.010Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.2'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:39:54.978Z',\n\tpatch: '2026-08-18T09:59:40.172Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/index.mjs

@@ -637,7 +637,7 @@ import {
 } from "./lib/utils/tldr/file.mjs";
 registerTldrawLibraryVersion(
   "tldraw",
-  "5.3.1",
+  "5.3.2",
   "esm"
 );
 export {

package/dist-esm/lib/ui/hooks/useCommentingEnabled.mjs

@@ -1,6 +1,6 @@
-import { useLicenseContext, useLicenseFeatureFlag } from "@tldraw/editor";
+import { useLicenseFeatureFlag, useMaybeLicenseManager } from "@tldraw/editor";
 function useCommentingEnabled() {
-  return useLicenseFeatureFlag(useLicenseContext(), "commenting");
+  return useLicenseFeatureFlag(useMaybeLicenseManager(), "commenting");
 }
 export {
   useCommentingEnabled

package/dist-esm/lib/ui/hooks/useCommentingEnabled.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/hooks/useCommentingEnabled.ts"],
-  "sourcesContent": ["import { useLicenseContext, useLicenseFeatureFlag } from '@tldraw/editor'\n\n/**\n * Whether the commenting feature is licensed for this editor. The default comment quick action and\n * its keyboard shortcut are hidden/disabled unless this is true. Enabled in development; in\n * production it requires a license that includes the commenting feature (or the collaboration\n * umbrella that grants it). Reactive: re-reads when license validation resolves.\n *\n * @internal\n */\nexport function useCommentingEnabled(): boolean {\n\treturn useLicenseFeatureFlag(useLicenseContext(), 'commenting')\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB,6BAA6B;AAUlD,SAAS,uBAAgC;AAC/C,SAAO,sBAAsB,kBAAkB,GAAG,YAAY;AAC/D;",
+  "sourcesContent": ["import { useLicenseFeatureFlag, useMaybeLicenseManager } from '@tldraw/editor'\n\n/**\n * Whether the commenting feature is licensed for this editor. The default comment quick action and\n * its keyboard shortcut are hidden/disabled unless this is true. Enabled in development; in\n * production it requires a license that includes the commenting feature (or the collaboration\n * umbrella that grants it). Reactive: re-reads when license validation resolves. Works outside\n * `<Tldraw />` too: UI mounted via `EditorProvider` resolves the license through the editor, and\n * with no editor at all this is `false`.\n *\n * @internal\n */\nexport function useCommentingEnabled(): boolean {\n\treturn useLicenseFeatureFlag(useMaybeLicenseManager(), 'commenting')\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB,8BAA8B;AAYvD,SAAS,uBAAgC;AAC/C,SAAO,sBAAsB,uBAAuB,GAAG,YAAY;AACpE;",
   "names": []
 }

package/dist-esm/lib/ui/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.3.1";
+const version = "5.3.2";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
   minor: "2026-08-05T11:39:54.978Z",
-  patch: "2026-08-14T10:46:20.010Z"
+  patch: "2026-08-18T09:59:40.172Z"
 };
 export {
   publishDates,

package/dist-esm/lib/ui/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.1'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:39:54.978Z',\n\tpatch: '2026-08-14T10:46:20.010Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.2'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:39:54.978Z',\n\tpatch: '2026-08-18T09:59:40.172Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
   },
   "homepage": "https://tldraw.dev",
   "license": "SEE LICENSE IN LICENSE.md",
+  "tldraw_product": {
+    "stableId": "tldraw:sdk-core",
+    "name": "SDK",
+    "type": "product",
+    "premium": false
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/tldraw/tldraw"
@@ -63,11 +69,11 @@
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
     "@tiptap/starter-kit": "^3.12.1",
-    "@tldraw/driver": "5.3.1",
-    "@tldraw/editor": "5.3.1",
-    "@tldraw/state": "5.3.1",
-    "@tldraw/store": "5.3.1",
-    "@tldraw/tlschema": "5.3.1",
+    "@tldraw/driver": "5.3.2",
+    "@tldraw/editor": "5.3.2",
+    "@tldraw/state": "5.3.2",
+    "@tldraw/store": "5.3.2",
+    "@tldraw/tlschema": "5.3.2",
     "classnames": "^2.5.1",
     "idb": "^7.1.1",
     "lz-string": "^1.5.0",

package/src/lib/ui/hooks/useCommentingEnabled.ts

@@ -1,13 +1,15 @@
-import { useLicenseContext, useLicenseFeatureFlag } from '@tldraw/editor'
+import { useLicenseFeatureFlag, useMaybeLicenseManager } from '@tldraw/editor'
 
 /**
  * Whether the commenting feature is licensed for this editor. The default comment quick action and
  * its keyboard shortcut are hidden/disabled unless this is true. Enabled in development; in
  * production it requires a license that includes the commenting feature (or the collaboration
- * umbrella that grants it). Reactive: re-reads when license validation resolves.
+ * umbrella that grants it). Reactive: re-reads when license validation resolves. Works outside
+ * `<Tldraw />` too: UI mounted via `EditorProvider` resolves the license through the editor, and
+ * with no editor at all this is `false`.
  *
  * @internal
  */
 export function useCommentingEnabled(): boolean {
-	return useLicenseFeatureFlag(useLicenseContext(), 'commenting')
+	return useLicenseFeatureFlag(useMaybeLicenseManager(), 'commenting')
 }

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.3.1'
+export const version = '5.3.2'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
 	minor: '2026-08-05T11:39:54.978Z',
-	patch: '2026-08-14T10:46:20.010Z',
+	patch: '2026-08-18T09:59:40.172Z',
 }

package/src/test/ui-outside-editor.test.tsx

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react'
+import { ContainerProvider, EditorProvider, useLicenseContext } from '@tldraw/editor'
+import { vi } from 'vitest'
+import { Tldraw } from '../lib/Tldraw'
+import { DefaultToolbar } from '../lib/ui/components/Toolbar/DefaultToolbar'
+import { TldrawUiContextProvider } from '../lib/ui/context/TldrawUiContextProvider'
+import { useCommentingEnabled } from '../lib/ui/hooks/useCommentingEnabled'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+// Default UI components can be mounted beside <Tldraw /> rather than inside it, wrapped in the
+// providers the caller recreates (container, editor, ui context). The license provider is not
+// among them — it only exists inside <TldrawEditor />.
+describe('default UI mounted outside <Tldraw />', () => {
+	it('renders the default toolbar and resolves license feature flags through the editor', async () => {
+		const { editor } = await renderTldrawComponentWithEditor(
+			(onMount) => <Tldraw onMount={onMount} components={{ Toolbar: null }} />,
+			{ waitForPatterns: true }
+		)
+
+		expect(editor.licenseManager).toBeDefined()
+
+		let commentingEnabled: boolean | undefined
+		function CommentingProbe() {
+			commentingEnabled = useCommentingEnabled()
+			return null
+		}
+
+		const result = render(
+			<ContainerProvider container={editor.getContainer()}>
+				<EditorProvider editor={editor}>
+					<TldrawUiContextProvider>
+						<DefaultToolbar />
+						<CommentingProbe />
+					</TldrawUiContextProvider>
+				</EditorProvider>
+			</ContainerProvider>
+		)
+
+		expect(await result.findByTestId('tools.select')).toBeTruthy()
+		// In tests the environment counts as development, where every feature is licensed — so a
+		// `true` here proves the flag resolved via the editor's license manager, not the
+		// fail-closed `false` of having no license manager at all.
+		expect(commentingEnabled).toBe(true)
+	})
+
+	it('license feature flags fail closed with no editor and no license context', () => {
+		let commentingEnabled: boolean | undefined
+		function CommentingProbe() {
+			commentingEnabled = useCommentingEnabled()
+			return null
+		}
+
+		render(<CommentingProbe />)
+
+		expect(commentingEnabled).toBe(false)
+	})
+
+	it('useLicenseContext throws when there is no license provider and no editor', () => {
+		function LicenseProbe() {
+			useLicenseContext()
+			return null
+		}
+
+		// silence React's error boundary logging for the expected throw
+		const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+		try {
+			expect(() => render(<LicenseProbe />)).toThrow(
+				'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components'
+			)
+		} finally {
+			consoleError.mockRestore()
+		}
+	})
+})