@tldraw/editor 4.4.0-canary.afdcafe834b3 → 4.4.0-canary.b5c642789999

package/src/lib/hooks/usePeerIds.ts

@@ -1,5 +1,4 @@
 import { useAtom, useComputed, useValue } from '@tldraw/state-react'
-import { isEqual } from '@tldraw/utils'
 import { useEffect } from 'react'
 import {
 	getCollaboratorStateFromElapsedTime,
@@ -8,6 +7,14 @@ import {
 import { uniq } from '../utils/uniq'
 import { useEditor } from './useEditor'
 
+function setsEqual<T>(a: Set<T>, b: Set<T>): boolean {
+	if (a.size !== b.size) return false
+	for (const item of a) {
+		if (!b.has(item)) return false
+	}
+	return true
+}
+
 // TODO: maybe move this to a computed property on the App class?
 /**
  * @returns The list of peer UserIDs
@@ -60,7 +67,7 @@ export function useActivePeerIds$() {
 					.map((p) => p.userId)
 			)
 		},
-		{ isEqual },
+		{ isEqual: setsEqual },
 		[editor]
 	)
 }

package/src/lib/hooks/useShapeCulling.tsx

@@ -0,0 +1,98 @@
+import { TLShapeId } from '@tldraw/tlschema'
+import { createContext, useCallback, useContext, useMemo, useRef } from 'react'
+import { setStyleProperty } from '../utils/dom'
+
+interface ShapeContainerEntry {
+	container: HTMLDivElement
+	bgContainer: HTMLDivElement | null
+	isCulled: boolean
+}
+
+interface ShapeCullingContextValue {
+	register(
+		id: TLShapeId,
+		container: HTMLDivElement,
+		bgContainer: HTMLDivElement | null,
+		isCulled: boolean
+	): void
+	unregister(id: TLShapeId): void
+	updateCulling(culledShapes: Set<TLShapeId>): void
+}
+
+const ShapeCullingContext = createContext<ShapeCullingContextValue | null>(null)
+
+/** @internal */
+export interface ShapeCullingProviderProps {
+	children: React.ReactNode
+}
+
+/**
+ * Provides centralized culling management for shape containers.
+ * This allows a single reactor to update all shape display states
+ * instead of each shape having its own subscription.
+ *
+ * @internal
+ */
+export function ShapeCullingProvider({ children }: ShapeCullingProviderProps) {
+	const containersRef = useRef(new Map<TLShapeId, ShapeContainerEntry>())
+
+	const register = useCallback(
+		(
+			id: TLShapeId,
+			container: HTMLDivElement,
+			bgContainer: HTMLDivElement | null,
+			isCulled: boolean
+		) => {
+			const display = isCulled ? 'none' : 'block'
+			setStyleProperty(container, 'display', display)
+			setStyleProperty(bgContainer, 'display', display)
+
+			containersRef.current.set(id, {
+				container,
+				bgContainer,
+				isCulled,
+			})
+		},
+		[]
+	)
+
+	const unregister = useCallback((id: TLShapeId) => {
+		containersRef.current.delete(id)
+	}, [])
+
+	const updateCulling = useCallback((culledShapes: Set<TLShapeId>) => {
+		for (const [id, entry] of containersRef.current) {
+			const shouldBeCulled = culledShapes.has(id)
+			if (shouldBeCulled !== entry.isCulled) {
+				const display = shouldBeCulled ? 'none' : 'block'
+				setStyleProperty(entry.container, 'display', display)
+				setStyleProperty(entry.bgContainer, 'display', display)
+				entry.isCulled = shouldBeCulled
+			}
+		}
+	}, [])
+
+	const value = useMemo(
+		() => ({
+			register,
+			unregister,
+			updateCulling,
+		}),
+		[register, unregister, updateCulling]
+	)
+
+	return <ShapeCullingContext.Provider value={value}>{children}</ShapeCullingContext.Provider>
+}
+
+/**
+ * Hook to access the shape culling context for container registration.
+ *
+ * @internal
+ */
+export function useShapeCulling(): ShapeCullingContextValue {
+	const context = useContext(ShapeCullingContext)
+	if (!context) {
+		throw new Error('useShapeCulling must be used within ShapeCullingProvider')
+	}
+	return context
+}

package/src/lib/license/LicenseManager.ts

@@ -431,25 +431,25 @@ export class LicenseManager {
 	private outputMessages(messages: string[], type: 'warning' | 'error' = 'error') {
 		if (this.isTest) return
 		if (this.verbose) {
-			this.outputDelimiter()
+			this.outputDelimiter(type)
 			for (const message of messages) {
-				const color = type === 'warning' ? 'orange' : 'crimson'
 				const bgColor = type === 'warning' ? 'orange' : 'crimson'
 				// eslint-disable-next-line no-console
 				console.log(
 					`%c${message}`,
-					`color: ${color}; background: ${bgColor}; padding: 2px; border-radius: 3px;`
+					`color: white; background: ${bgColor}; padding: 2px; border-radius: 3px;`
 				)
 			}
-			this.outputDelimiter()
+			this.outputDelimiter(type)
 		}
 	}
 
-	private outputDelimiter() {
+	private outputDelimiter(type: 'warning' | 'error' = 'error') {
+		const bgColor = type === 'warning' ? 'orange' : 'crimson'
 		// eslint-disable-next-line no-console
 		console.log(
 			'%c-------------------------------------------------------------------',
-			`color: white; background: crimson; padding: 2px; border-radius: 3px;`
+			`color: white; background: ${bgColor}; padding: 2px; border-radius: 3px;`
 		)
 	}
 

package/src/lib/options.ts

@@ -95,13 +95,13 @@ export interface TldrawOptions {
 	readonly branding?: string
 	/**
 	 * Whether to use debounced zoom level for certain rendering optimizations. When true,
-	 * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,
+	 * `editor.getEfficientZoomLevel()` returns a cached zoom value while the camera is moving,
 	 * reducing re-renders. When false, it always returns the current zoom level.
 	 */
 	readonly debouncedZoom: boolean
 	/**
 	 * The number of shapes that must be on the page for the debounced zoom level to be used.
-	 * Defaults to 300 shapes.
+	 * Defaults to 500 shapes.
 	 */
 	readonly debouncedZoomThreshold: number
 	/**
@@ -120,6 +120,13 @@ export interface TldrawOptions {
 	 * The distance (in screen pixels) at which shapes snap to guides and other shapes.
 	 */
 	readonly snapThreshold: number
+	/**
+	 * Whether the quick-zoom brush preserves its screen-pixel size when the user
+	 * zooms the overview. When true, zooming in shrinks the target viewport (higher
+	 * return zoom); zooming out expands it. When false, the brush keeps the original
+	 * viewport's page dimensions regardless of overview zoom changes.
+	 */
+	readonly quickZoomPreservesScreenBounds: boolean
 }
 
 /** @public */
@@ -178,4 +185,5 @@ export const defaultTldrawOptions = {
 	spacebarPanning: true,
 	zoomToFitPadding: 128,
 	snapThreshold: 8,
+	quickZoomPreservesScreenBounds: true,
 } as const satisfies TldrawOptions

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.4.0-canary.afdcafe834b3'
+export const version = '4.4.0-canary.b5c642789999'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-02-04T08:49:09.694Z',
-	patch: '2026-02-04T08:49:09.694Z',
+	minor: '2026-02-11T11:56:14.353Z',
+	patch: '2026-02-11T11:56:14.353Z',
 }