tldraw 3.16.0-canary.b802b60e813f → 3.16.0-canary.bcde131f3274

package/dist-esm/lib/ui/kbd-utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/kbd-utils.ts"],
-  "sourcesContent": ["import { tlenv } from '@tldraw/editor'\n\n// N.B. We rework these Windows placeholders down below.\nconst cmdKey = tlenv.isDarwin ? '\u2318' : '__CTRL__'\nconst ctrlKey = tlenv.isDarwin ? '\u2303' : '__CTRL__'\nconst altKey = tlenv.isDarwin ? '\u2325' : '__ALT__'\n\n/** @public */\nexport function kbd(str: string) {\n\tif (str === ',') return [',']\n\n\treturn (\n\t\tstr\n\t\t\t.split(',')[0]\n\t\t\t// If the string contains [[Tab]], we don't split these up\n\t\t\t// as they're meant to be atomic.\n\t\t\t.split(/(\\[\\[[^\\]]+\\]\\])/g)\n\t\t\t.map((s) =>\n\t\t\t\ts.startsWith('[[')\n\t\t\t\t\t? s.replace(/[[\\]]/g, '')\n\t\t\t\t\t: s\n\t\t\t\t\t\t\t.replace(/cmd\\+/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/ctrl\\+/g, ctrlKey)\n\t\t\t\t\t\t\t.replace(/alt\\+/g, altKey)\n\t\t\t\t\t\t\t.replace(/shift\\+/g, '\u21E7')\n\t\t\t\t\t\t\t// Backwards compatibility with the old system.\n\t\t\t\t\t\t\t.replace(/\\$/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/\\?/g, altKey)\n\t\t\t\t\t\t\t.replace(/!/g, '\u21E7')\n\t\t\t\t\t\t\t.match(/__CTRL__|__ALT__|./g) || []\n\t\t\t)\n\t\t\t.flat()\n\t\t\t.map((sub, index) => {\n\t\t\t\tif (sub === '__CTRL__') return 'Ctrl'\n\t\t\t\tif (sub === '__ALT__') return 'Alt'\n\t\t\t\tconst modifiedKey = sub[0].toUpperCase() + sub.slice(1)\n\t\t\t\treturn tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]\n\t\t\t})\n\t\t\t.flat()\n\t)\n}\n\n/** @public */\nexport function kbdStr(str: string) {\n\treturn '\u2014 ' + kbd(str).join('\u2009')\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAGtB,MAAM,SAAS,MAAM,WAAW,WAAM;AACtC,MAAM,UAAU,MAAM,WAAW,WAAM;AACvC,MAAM,SAAS,MAAM,WAAW,WAAM;AAG/B,SAAS,IAAI,KAAa;AAChC,MAAI,QAAQ,IAAK,QAAO,CAAC,GAAG;AAE5B,SACC,IACE,MAAM,GAAG,EAAE,CAAC,EAGZ,MAAM,mBAAmB,EACzB;AAAA,IAAI,CAAC,MACL,EAAE,WAAW,IAAI,IACd,EAAE,QAAQ,UAAU,EAAE,IACtB,EACC,QAAQ,UAAU,MAAM,EACxB,QAAQ,WAAW,OAAO,EAC1B,QAAQ,UAAU,MAAM,EACxB,QAAQ,YAAY,QAAG,EAEvB,QAAQ,OAAO,MAAM,EACrB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,QAAG,EACjB,MAAM,qBAAqB,KAAK,CAAC;AAAA,EACtC,EACC,KAAK,EACL,IAAI,CAAC,KAAK,UAAU;AACpB,QAAI,QAAQ,WAAY,QAAO;AAC/B,QAAI,QAAQ,UAAW,QAAO;AAC9B,UAAM,cAAc,IAAI,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AACtD,WAAO,MAAM,YAAY,CAAC,QAAQ,cAAc,CAAC,KAAK,WAAW;AAAA,EAClE,CAAC,EACA,KAAK;AAET;AAGO,SAAS,OAAO,KAAa;AACnC,SAAO,YAAO,IAAI,GAAG,EAAE,KAAK,QAAG;AAChC;",
+  "sourcesContent": ["import { tlenv } from '@tldraw/editor'\n\n// N.B. We rework these Windows placeholders down below.\nconst cmdKey = tlenv.isDarwin ? '\u2318' : '__CTRL__'\nconst ctrlKey = tlenv.isDarwin ? '\u2303' : '__CTRL__'\nconst altKey = tlenv.isDarwin ? '\u2325' : '__ALT__'\n\n/** @public */\nexport function kbd(str: string) {\n\tif (str === ',') return [',']\n\n\treturn (\n\t\tstr\n\t\t\t.split(',')[0]\n\t\t\t// If the string contains [[Tab]], we don't split these up\n\t\t\t// as they're meant to be atomic.\n\t\t\t.split(/(\\[\\[[^\\]]+\\]\\])/g)\n\t\t\t.map((s) =>\n\t\t\t\ts.startsWith('[[')\n\t\t\t\t\t? s.replace(/[[\\]]/g, '')\n\t\t\t\t\t: s\n\t\t\t\t\t\t\t.replace(/cmd\\+/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/ctrl\\+/g, ctrlKey)\n\t\t\t\t\t\t\t.replace(/alt\\+/g, altKey)\n\t\t\t\t\t\t\t.replace(/shift\\+/g, '\u21E7')\n\t\t\t\t\t\t\t// Backwards compatibility with the old system.\n\t\t\t\t\t\t\t.replace(/\\$/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/\\?/g, altKey)\n\t\t\t\t\t\t\t.replace(/!/g, '\u21E7')\n\t\t\t\t\t\t\t.match(/__CTRL__|__ALT__|./g) || []\n\t\t\t)\n\t\t\t.flat()\n\t\t\t.map((sub, index) => {\n\t\t\t\tif (sub[0] === '+') return []\n\n\t\t\t\tlet modifiedKey\n\t\t\t\tif (sub === '__CTRL__') {\n\t\t\t\t\tmodifiedKey = 'Ctrl'\n\t\t\t\t} else if (sub === '__ALT__') {\n\t\t\t\t\tmodifiedKey = 'Alt'\n\t\t\t\t} else {\n\t\t\t\t\tmodifiedKey = sub[0].toUpperCase() + sub.slice(1)\n\t\t\t\t}\n\t\t\t\treturn tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]\n\t\t\t})\n\t\t\t.flat()\n\t)\n}\n\n/** @public */\nexport function kbdStr(str: string) {\n\treturn '\u2014 ' + kbd(str).join('\u2009')\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAGtB,MAAM,SAAS,MAAM,WAAW,WAAM;AACtC,MAAM,UAAU,MAAM,WAAW,WAAM;AACvC,MAAM,SAAS,MAAM,WAAW,WAAM;AAG/B,SAAS,IAAI,KAAa;AAChC,MAAI,QAAQ,IAAK,QAAO,CAAC,GAAG;AAE5B,SACC,IACE,MAAM,GAAG,EAAE,CAAC,EAGZ,MAAM,mBAAmB,EACzB;AAAA,IAAI,CAAC,MACL,EAAE,WAAW,IAAI,IACd,EAAE,QAAQ,UAAU,EAAE,IACtB,EACC,QAAQ,UAAU,MAAM,EACxB,QAAQ,WAAW,OAAO,EAC1B,QAAQ,UAAU,MAAM,EACxB,QAAQ,YAAY,QAAG,EAEvB,QAAQ,OAAO,MAAM,EACrB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,QAAG,EACjB,MAAM,qBAAqB,KAAK,CAAC;AAAA,EACtC,EACC,KAAK,EACL,IAAI,CAAC,KAAK,UAAU;AACpB,QAAI,IAAI,CAAC,MAAM,IAAK,QAAO,CAAC;AAE5B,QAAI;AACJ,QAAI,QAAQ,YAAY;AACvB,oBAAc;AAAA,IACf,WAAW,QAAQ,WAAW;AAC7B,oBAAc;AAAA,IACf,OAAO;AACN,oBAAc,IAAI,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAAA,IACjD;AACA,WAAO,MAAM,YAAY,CAAC,QAAQ,cAAc,CAAC,KAAK,WAAW;AAAA,EAClE,CAAC,EACA,KAAK;AAET;AAGO,SAAS,OAAO,KAAa;AACnC,SAAO,YAAO,IAAI,GAAG,EAAE,KAAK,QAAG;AAChC;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
-const version = "3.16.0-canary.b802b60e813f";
+const version = "3.16.0-canary.bcde131f3274";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-08-21T14:37:37.229Z",
-  patch: "2025-08-21T14:37:37.229Z"
+  minor: "2025-08-27T13:34:10.657Z",
+  patch: "2025-08-27T13:34:10.657Z"
 };
 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 = '3.16.0-canary.b802b60e813f'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-08-21T14:37:37.229Z',\n\tpatch: '2025-08-21T14:37:37.229Z',\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 = '3.16.0-canary.bcde131f3274'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-08-27T13:34:10.657Z',\n\tpatch: '2025-08-27T13:34:10.657Z',\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",
   "description": "A tiny little drawing editor.",
-  "version": "3.16.0-canary.b802b60e813f",
+  "version": "3.16.0-canary.bcde131f3274",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -55,8 +55,8 @@
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
-    "@tldraw/editor": "3.16.0-canary.b802b60e813f",
-    "@tldraw/store": "3.16.0-canary.b802b60e813f",
+    "@tldraw/editor": "3.16.0-canary.bcde131f3274",
+    "@tldraw/store": "3.16.0-canary.bcde131f3274",
     "classnames": "^2.5.1",
     "hotkeys-js": "^3.13.9",
     "idb": "^7.1.1",

package/src/index.ts

@@ -24,6 +24,7 @@ export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMo
 export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
 export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
+export { DefaultFollowingIndicator } from './lib/ui/components/DefaultFollowingIndicator'
 export { DefaultDialogs } from './lib/ui/components/Dialogs'
 export {
 	TldrawUiColumn,
@@ -629,7 +630,7 @@ export {
 } from './lib/ui/hooks/useTranslation/useTranslation'
 export { type TLUiIconType } from './lib/ui/icon-types'
 export { useDefaultHelpers, type TLUiOverrideHelpers, type TLUiOverrides } from './lib/ui/overrides'
-export { TldrawUi, type TldrawUiProps } from './lib/ui/TldrawUi'
+export { TldrawUi, TldrawUiInFrontOfTheCanvas, type TldrawUiProps } from './lib/ui/TldrawUi'
 export { containBoxSize, downsizeImage, type BoxWidthHeight } from './lib/utils/assets/assets'
 export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
 export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'

package/src/lib/Tldraw.tsx

@@ -33,7 +33,7 @@ import { registerDefaultSideEffects } from './defaultSideEffects'
 import { defaultTools } from './defaultTools'
 import { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'
 import { allDefaultFontFaces } from './shapes/shared/defaultFonts'
-import { TldrawUi, TldrawUiProps } from './ui/TldrawUi'
+import { TldrawUi, TldrawUiInFrontOfTheCanvas, TldrawUiProps } from './ui/TldrawUi'
 import { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'
 import { LoadingScreen } from './ui/components/LoadingScreen'
 import { Spinner } from './ui/components/Spinner'
@@ -118,6 +118,18 @@ export function Tldraw(props: TldrawProps) {
 
 	const _components = useShallowObjectIdentity(components)
 
+	const CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas
+	const InFrontOfTheCanvas = useMemo(() => {
+		if (rest.hideUi) return CustomInFrontOfTheCanvas ?? null
+		if (!CustomInFrontOfTheCanvas) return TldrawUiInFrontOfTheCanvas
+
+		return () => (
+			<>
+				<TldrawUiInFrontOfTheCanvas />
+				<CustomInFrontOfTheCanvas />
+			</>
+		)
+	}, [rest.hideUi, CustomInFrontOfTheCanvas])
 	const componentsWithDefault = useMemo(
 		() => ({
 			Scribble: TldrawScribble,
@@ -129,8 +141,9 @@ export function Tldraw(props: TldrawProps) {
 			Spinner,
 			LoadingScreen,
 			..._components,
+			InFrontOfTheCanvas,
 		}),
-		[_components]
+		[_components, InFrontOfTheCanvas]
 	)
 
 	const _shapeUtils = useShallowArrayIdentity(shapeUtils)

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -100,6 +100,10 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		return false
 	}
 
+	override isExportBoundsContainer(): boolean {
+		return true
+	}
+
 	override getDefaultProps(): TLFrameShape['props'] {
 		return { w: 160 * 2, h: 90 * 2, name: '', color: 'black' }
 	}

package/src/lib/shapes/image/ImageShapeUtil.tsx

@@ -57,6 +57,9 @@ export class ImageShapeUtil extends BaseBoxShapeUtil<TLImageShape> {
 	override canCrop() {
 		return true
 	}
+	override isExportBoundsContainer(): boolean {
+		return true
+	}
 
 	override getDefaultProps(): TLImageShape['props'] {
 		return {

package/src/lib/ui/TldrawUi.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames'
 import React, { ReactNode, useMemo, useRef, useState } from 'react'
 import { TLUiAssetUrlOverrides } from './assetUrls'
 import { SkipToMainContent } from './components/A11y'
-import { FollowingIndicator } from './components/FollowingIndicator'
 import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'
 import { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'
@@ -108,10 +107,6 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 		NavigationPanel,
 		HelperButtons,
 		DebugPanel,
-		CursorChatBubble,
-		RichTextToolbar,
-		ImageToolbar,
-		VideoToolbar,
 		Toasts,
 		Dialogs,
 		A11y,
@@ -223,13 +218,24 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 					</div>
 				</>
 			)}
-			{RichTextToolbar && <RichTextToolbar />}
-			{ImageToolbar && <ImageToolbar />}
-			{VideoToolbar && <VideoToolbar />}
 			{Toasts && <Toasts />}
 			{Dialogs && <Dialogs />}
-			<FollowingIndicator />
-			{CursorChatBubble && <CursorChatBubble />}
 		</div>
 	)
 })
+
+/** @public @react */
+export function TldrawUiInFrontOfTheCanvas() {
+	const { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } =
+		useTldrawUiComponents()
+
+	return (
+		<>
+			{RichTextToolbar && <RichTextToolbar />}
+			{ImageToolbar && <ImageToolbar />}
+			{VideoToolbar && <VideoToolbar />}
+			{FollowingIndicator && <FollowingIndicator />}
+			{CursorChatBubble && <CursorChatBubble />}
+		</>
+	)
+}

package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx}

@@ -1,6 +1,7 @@
 import { useEditor, usePresence, useValue } from '@tldraw/editor'
 
-export function FollowingIndicator() {
+/** @public @react */
+export function DefaultFollowingIndicator() {
 	const editor = useEditor()
 	const followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [
 		editor,

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -157,7 +157,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-direction"
 					label="a11y.select-shape-direction"
-					kbd="cmd+↑→↓←"
+					kbd="cmd+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -165,7 +165,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-container"
 					label="a11y.enter-leave-container"
-					kbd="cmd+shift+↑→"
+					kbd="cmd+shift+[[↑→]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -173,7 +173,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-pan-camera"
 					label="a11y.pan-camera"
-					kbd="[[Space]]+↑→↓←"
+					kbd="[[Space]]+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -197,7 +197,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape"
 					label="a11y.move-shape"
-					kbd="↑→↓←"
+					kbd="[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -205,7 +205,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape-faster"
 					label="a11y.move-shape-faster"
-					kbd="shift+↑→↓←"
+					kbd="shift+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

package/src/lib/ui/context/components.tsx

@@ -12,6 +12,7 @@ import {
 import { CursorChatBubble } from '../components/CursorChatBubble'
 import { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'
 import { DefaultDebugPanel } from '../components/DefaultDebugPanel'
+import { DefaultFollowingIndicator } from '../components/DefaultFollowingIndicator'
 import { DefaultMenuPanel } from '../components/DefaultMenuPanel'
 import { DefaultDialogs } from '../components/Dialogs'
 import { TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'
@@ -72,6 +73,7 @@ export interface TLUiComponents {
 	Dialogs?: ComponentType | null
 	Toasts?: ComponentType | null
 	A11y?: ComponentType | null
+	FollowingIndicator?: ComponentType | null
 }
 
 const TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)
@@ -119,6 +121,7 @@ export function TldrawUiComponentsProvider({
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,
+					FollowingIndicator: DefaultFollowingIndicator,
 					..._overrides,
 				}),
 				[_overrides, showCollaborationUi]

package/src/lib/ui/context/events.tsx

@@ -123,7 +123,7 @@ export interface TLUiEventMap {
 	'shrink-shapes': null
 	'flatten-to-image': null
 	'a11y-repeat-shape-announce': null
-	'open-url': { url: string }
+	'open-url': { destinationUrl: string }
 	'open-context-menu': null
 	'adjust-shape-styles': null
 	'copy-link': null

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -186,6 +186,7 @@ export type TLUiTranslationKey =
 	| 'geo-style.pentagon'
 	| 'geo-style.rectangle'
 	| 'geo-style.rhombus'
+	| 'geo-style.rhombus-2'
 	| 'geo-style.star'
 	| 'geo-style.trapezoid'
 	| 'geo-style.triangle'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -187,6 +187,7 @@ export const DEFAULT_TRANSLATION = {
 	'geo-style.pentagon': 'Pentagon',
 	'geo-style.rectangle': 'Rectangle',
 	'geo-style.rhombus': 'Rhombus',
+	'geo-style.rhombus-2': 'Rhombus left',
 	'geo-style.star': 'Star',
 	'geo-style.trapezoid': 'Trapezoid',
 	'geo-style.triangle': 'Triangle',

package/src/lib/ui/kbd-utils.ts

@@ -31,9 +31,16 @@ export function kbd(str: string) {
 			)
 			.flat()
 			.map((sub, index) => {
-				if (sub === '__CTRL__') return 'Ctrl'
-				if (sub === '__ALT__') return 'Alt'
-				const modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				if (sub[0] === '+') return []
+
+				let modifiedKey
+				if (sub === '__CTRL__') {
+					modifiedKey = 'Ctrl'
+				} else if (sub === '__ALT__') {
+					modifiedKey = 'Alt'
+				} else {
+					modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				}
 				return tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]
 			})
 			.flat()

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 = '3.16.0-canary.b802b60e813f'
+export const version = '3.16.0-canary.bcde131f3274'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-21T14:37:37.229Z',
-	patch: '2025-08-21T14:37:37.229Z',
+	minor: '2025-08-27T13:34:10.657Z',
+	patch: '2025-08-27T13:34:10.657Z',
 }

package/tldraw.css

@@ -33,6 +33,7 @@
 	--tl-layer-watermark: 200;
 	--tl-layer-canvas-shapes: 300;
 	--tl-layer-canvas-overlays: 500;
+	--tl-layer-canvas-in-front: 600;
 	--tl-layer-canvas-blocker: 10000;
 
 	/* Canvas overlays z-index */
@@ -301,6 +302,13 @@ input,
 	contain: strict;
 }
 
+.tl-canvas__in-front {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	z-index: var(--tl-layer-canvas-in-front);
+}
+
 .tl-shapes {
 	position: relative;
 	z-index: var(--tl-layer-canvas-shapes);

package/dist-cjs/lib/ui/components/FollowingIndicator.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/ui/components/FollowingIndicator.tsx"],
-  "sourcesContent": ["import { useEditor, usePresence, useValue } from '@tldraw/editor'\n\nexport function FollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQQ;AARR,oBAAiD;AAE1C,SAAS,qBAAqB;AACpC,QAAM,aAAS,yBAAU;AACzB,QAAM,sBAAkB,wBAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,SAAO,4CAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,eAAW,2BAAY,MAAM;AACnC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,4CAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
-  "names": []
-}

package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/ui/components/FollowingIndicator.tsx"],
-  "sourcesContent": ["import { useEditor, usePresence, useValue } from '@tldraw/editor'\n\nexport function FollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
-  "mappings": "AAQQ;AARR,SAAS,WAAW,aAAa,gBAAgB;AAE1C,SAAS,qBAAqB;AACpC,QAAM,SAAS,UAAU;AACzB,QAAM,kBAAkB,SAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,SAAO,oBAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,WAAW,YAAY,MAAM;AACnC,MAAI,CAAC,SAAU,QAAO;AACtB,SAAO,oBAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
-  "names": []
-}