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

package/src/lib/editor/managers/SnapManager/HandleSnaps.ts

@@ -3,8 +3,8 @@ import { TLHandle, TLShape, TLShapeId, VecModel } from '@tldraw/tlschema'
 import { assertExists, uniqueId } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
 import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
-import { Editor } from '../../Editor'
-import { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
+import type { Editor } from '../../Editor'
+import type { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
 
 /**
  * When dragging a handle, users can snap the handle to key geometry on other nearby shapes.

package/src/lib/editor/managers/TextManager/TextManager.ts

@@ -1,6 +1,6 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
 import { objectMapKeys } from '@tldraw/utils'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
 

package/src/lib/editor/managers/TickManager/TickManager.ts

@@ -1,5 +1,5 @@
 import { throttleToNextFrame as _throttleToNextFrame, bind } from '@tldraw/utils'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 const throttleToNextFrame =
 	typeof process !== 'undefined' && process.env.NODE_ENV === 'test'

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -35,17 +35,31 @@ export interface TLShapeUtilConstructor<T extends TLShape, U extends ShapeUtil<T
 
 /**
  * Options passed to {@link ShapeUtil.canBind}. A binding that could be made. At least one of
- * `fromShapeType` or `toShapeType` will belong to this shape util.
+ * `fromShape` or `toShape` will belong to this shape util.
+ *
+ * The shapes may be full {@link @tldraw/tlschema#TLShape} objects when available, or just
+ * `{ type }` stubs when the shape hasn't been created yet (e.g. during arrow creation). Use
+ * `'id' in shape` to check whether the full shape is available.
  *
  * @public
  */
 export interface TLShapeUtilCanBindOpts<Shape extends TLShape = TLShape> {
-	/** The type of shape referenced by the `fromId` of the binding. */
-	fromShapeType: TLShape['type']
-	/** The type of shape referenced by the `toId` of the binding. */
-	toShapeType: TLShape['type']
+	/** The shape referenced by the `fromId` of the binding, or a `{ type }` stub if unavailable. */
+	fromShape: TLShape | { type: TLShape['type'] }
+	/** The shape referenced by the `toId` of the binding, or a `{ type }` stub if unavailable. */
+	toShape: TLShape | { type: TLShape['type'] }
 	/** The type of binding. */
 	bindingType: string
+	/**
+	 * The type of shape referenced by the `fromId` of the binding.
+	 * @deprecated Use `fromShape.type` instead.
+	 */
+	fromShapeType: TLShape['type']
+	/**
+	 * The type of shape referenced by the `toId` of the binding.
+	 * @deprecated Use `toShape.type` instead.
+	 */
+	toShapeType: TLShape['type']
 }
 
 /**

package/src/lib/editor/shapes/shared/resizeBox.ts

@@ -2,7 +2,7 @@ import { VecModel } from '@tldraw/tlschema'
 import { Box } from '../../../primitives/Box'
 import { Vec } from '../../../primitives/Vec'
 import { TLResizeHandle } from '../../types/selection-types'
-import { TLBaseBoxShape } from '../BaseBoxShapeUtil'
+import type { TLBaseBoxShape } from '../BaseBoxShapeUtil'
 import { TLResizeMode } from '../ShapeUtil'
 
 /** @public */

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -1,11 +1,11 @@
 import { TLShape, createShapeId } from '@tldraw/tlschema'
 import { structuredClone } from '@tldraw/utils'
 import { Vec } from '../../../../primitives/Vec'
-import { Editor } from '../../../Editor'
+import type { Editor } from '../../../Editor'
 import { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'
 import { TLPointerEventInfo } from '../../../types/event-types'
 import { StateNode } from '../../StateNode'
-import { BaseBoxShapeTool } from '../BaseBoxShapeTool'
+import type { BaseBoxShapeTool } from '../BaseBoxShapeTool'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'

package/src/lib/editor/types/SvgExportContext.tsx

@@ -4,7 +4,7 @@ import { ReactElement, ReactNode, createContext, useContext, useEffect, useState
 import { ContainerProvider } from '../../hooks/useContainer'
 import { EditorProvider } from '../../hooks/useEditor'
 import { useEvent } from '../../hooks/useEvent'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 /** @public */
 export interface SvgExportDef {

package/src/lib/exports/exportToSvg.tsx

@@ -2,7 +2,7 @@ import { TLShapeId } from '@tldraw/tlschema'
 import { assert } from '@tldraw/utils'
 import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
 import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { StyleEmbedder } from './StyleEmbedder'

package/src/lib/exports/getSvgJsx.tsx

@@ -20,7 +20,7 @@ import {
 import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
-import { Editor, TLRenderingShape } from '../editor/Editor'
+import type { Editor, TLRenderingShape } from '../editor/Editor'
 import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import {

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -0,0 +1,63 @@
+import { ComponentType, RefAttributes, createContext, useContext } from 'react'
+import type { TLBrushProps } from '../components/default-components/DefaultBrush'
+import type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'
+import type { TLCollaboratorHintProps } from '../components/default-components/DefaultCollaboratorHint'
+import type { TLCursorProps } from '../components/default-components/DefaultCursor'
+import type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'
+import type { TLGridProps } from '../components/default-components/DefaultGrid'
+import type { TLHandleProps } from '../components/default-components/DefaultHandle'
+import type { TLHandlesProps } from '../components/default-components/DefaultHandles'
+import type { TLScribbleProps } from '../components/default-components/DefaultScribble'
+import type { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
+import type { TLSelectionForegroundProps } from '../components/default-components/DefaultSelectionForeground'
+import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
+import type { TLShapeIndicatorProps } from '../components/default-components/DefaultShapeIndicator'
+import type { TLShapeIndicatorErrorFallbackComponent } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
+import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
+import type { TLSnapIndicatorProps } from '../components/default-components/DefaultSnapIndictor'
+
+/** @public */
+export interface TLEditorComponents {
+	Background?: ComponentType | null
+	Brush?: ComponentType<TLBrushProps> | null
+	Canvas?: ComponentType<TLCanvasComponentProps> | null
+	CollaboratorBrush?: ComponentType<TLBrushProps> | null
+	CollaboratorCursor?: ComponentType<TLCursorProps> | null
+	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
+	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
+	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	Cursor?: ComponentType<TLCursorProps> | null
+	Grid?: ComponentType<TLGridProps> | null
+	Handle?: ComponentType<TLHandleProps> | null
+	Handles?: ComponentType<TLHandlesProps> | null
+	InFrontOfTheCanvas?: ComponentType | null
+	LoadingScreen?: ComponentType | null
+	OnTheCanvas?: ComponentType | null
+	Overlays?: ComponentType | null
+	Scribble?: ComponentType<TLScribbleProps> | null
+	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
+	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
+	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	ShapeIndicators?: ComponentType | null
+	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
+	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
+	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
+	SvgDefs?: ComponentType | null
+	ZoomBrush?: ComponentType<TLBrushProps> | null
+
+	// These will always have defaults
+	ErrorFallback?: TLErrorFallbackComponent
+	ShapeErrorFallback?: TLShapeErrorFallbackComponent
+	ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent
+}
+
+export const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)
+
+/** @public */
+export function useEditorComponents() {
+	const components = useContext(EditorComponentsContext)
+	if (!components) {
+		throw new Error('useEditorComponents must be used inside of <EditorComponentsProvider />')
+	}
+	return components
+}

package/src/lib/hooks/useCanvasEvents.ts

@@ -102,13 +102,24 @@ export function useCanvasEvents() {
 				preventDefault(e)
 				e.stopPropagation()
 
+				const pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY })
+
+				// Call the custom onDropOnCanvas callback if provided
+				if (editor.options.experimental__onDropOnCanvas) {
+					const handled = editor.options.experimental__onDropOnCanvas({
+						point: pagePoint,
+						event: e,
+					})
+					if (handled) return
+				}
+
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
 
 					await editor.putExternalContent({
 						type: 'files',
 						files,
-						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						point: pagePoint,
 					})
 					return
 				}
@@ -118,7 +129,7 @@ export function useCanvasEvents() {
 					await editor.putExternalContent({
 						type: 'url',
 						url,
-						point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
+						point: pagePoint,
 					})
 					return
 				}

package/src/lib/hooks/useEditor.tsx

@@ -1,5 +1,5 @@
 import React, { createContext } from 'react'
-import { Editor } from '../editor/Editor'
+import type { Editor } from '../editor/Editor'
 import { IdProvider } from './useSafeId'
 
 /** @public */

package/src/lib/hooks/useEditorComponents.tsx

@@ -1,90 +1,30 @@
-import { ComponentType, ReactNode, RefAttributes, createContext, useContext, useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { DefaultBackground } from '../components/default-components/DefaultBackground'
-import { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'
-import {
-	DefaultCanvas,
-	TLCanvasComponentProps,
-} from '../components/default-components/DefaultCanvas'
-import {
-	DefaultCollaboratorHint,
-	TLCollaboratorHintProps,
-} from '../components/default-components/DefaultCollaboratorHint'
-import { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'
-import {
-	DefaultErrorFallback,
-	TLErrorFallbackComponent,
-} from '../components/default-components/DefaultErrorFallback'
-import { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'
-import { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'
-import { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'
+import { DefaultBrush } from '../components/default-components/DefaultBrush'
+import { DefaultCanvas } from '../components/default-components/DefaultCanvas'
+import { DefaultCollaboratorHint } from '../components/default-components/DefaultCollaboratorHint'
+import { DefaultCursor } from '../components/default-components/DefaultCursor'
+import { DefaultErrorFallback } from '../components/default-components/DefaultErrorFallback'
+import { DefaultGrid } from '../components/default-components/DefaultGrid'
+import { DefaultHandle } from '../components/default-components/DefaultHandle'
+import { DefaultHandles } from '../components/default-components/DefaultHandles'
 import { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'
-import { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'
-import { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
-import {
-	DefaultSelectionForeground,
-	TLSelectionForegroundProps,
-} from '../components/default-components/DefaultSelectionForeground'
-import {
-	DefaultShapeErrorFallback,
-	TLShapeErrorFallbackComponent,
-} from '../components/default-components/DefaultShapeErrorFallback'
-import {
-	DefaultShapeIndicator,
-	TLShapeIndicatorProps,
-} from '../components/default-components/DefaultShapeIndicator'
-import {
-	DefaultShapeIndicatorErrorFallback,
-	TLShapeIndicatorErrorFallbackComponent,
-} from '../components/default-components/DefaultShapeIndicatorErrorFallback'
+import { DefaultScribble } from '../components/default-components/DefaultScribble'
+import { DefaultSelectionForeground } from '../components/default-components/DefaultSelectionForeground'
+import { DefaultShapeErrorFallback } from '../components/default-components/DefaultShapeErrorFallback'
+import { DefaultShapeIndicator } from '../components/default-components/DefaultShapeIndicator'
+import { DefaultShapeIndicatorErrorFallback } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
 import { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'
-import {
-	DefaultShapeWrapper,
-	TLShapeWrapperProps,
-} from '../components/default-components/DefaultShapeWrapper'
-import {
-	DefaultSnapIndicator,
-	TLSnapIndicatorProps,
-} from '../components/default-components/DefaultSnapIndictor'
+import { DefaultShapeWrapper } from '../components/default-components/DefaultShapeWrapper'
+import { DefaultSnapIndicator } from '../components/default-components/DefaultSnapIndictor'
 import { DefaultSpinner } from '../components/default-components/DefaultSpinner'
 import { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'
+import type { TLEditorComponents } from './EditorComponentsContext'
+import { EditorComponentsContext } from './EditorComponentsContext'
 import { useShallowObjectIdentity } from './useIdentity'
 
-/** @public */
-export interface TLEditorComponents {
-	Background?: ComponentType | null
-	Brush?: ComponentType<TLBrushProps> | null
-	Canvas?: ComponentType<TLCanvasComponentProps> | null
-	CollaboratorBrush?: ComponentType<TLBrushProps> | null
-	CollaboratorCursor?: ComponentType<TLCursorProps> | null
-	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
-	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
-	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	Cursor?: ComponentType<TLCursorProps> | null
-	Grid?: ComponentType<TLGridProps> | null
-	Handle?: ComponentType<TLHandleProps> | null
-	Handles?: ComponentType<TLHandlesProps> | null
-	InFrontOfTheCanvas?: ComponentType | null
-	LoadingScreen?: ComponentType | null
-	OnTheCanvas?: ComponentType | null
-	Overlays?: ComponentType | null
-	Scribble?: ComponentType<TLScribbleProps> | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
-	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
-	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	ShapeIndicators?: ComponentType | null
-	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
-	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
-	SvgDefs?: ComponentType | null
-	ZoomBrush?: ComponentType<TLBrushProps> | null
-
-	// These will always have defaults
-	ErrorFallback?: TLErrorFallbackComponent
-	ShapeErrorFallback?: TLShapeErrorFallbackComponent
-	ShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent
-}
-
-const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)
+export { useEditorComponents } from './EditorComponentsContext'
+export type { TLEditorComponents } from './EditorComponentsContext'
 
 interface ComponentsContextProviderProps {
 	overrides?: TLEditorComponents
@@ -138,12 +78,3 @@ export function EditorComponentsProvider({
 		<EditorComponentsContext.Provider value={value}>{children}</EditorComponentsContext.Provider>
 	)
 }
-
-/** @public */
-export function useEditorComponents() {
-	const components = useContext(EditorComponentsContext)
-	if (!components) {
-		throw new Error('useEditorComponents must be used inside of <EditorComponentsProvider />')
-	}
-	return components
-}

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

@@ -1,4 +1,9 @@
 import { ComponentType, Fragment } from 'react'
+import { DEFAULT_CAMERA_OPTIONS } from './constants'
+import { TLCameraOptions } from './editor/types/misc-types'
+import { VecLike } from './primitives/Vec'
+import { TLDeepLinkOptions } from './utils/deepLinks'
+import { TLTextOptions } from './utils/richText'
 
 /**
  * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.
@@ -95,13 +100,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 +125,46 @@ export interface TldrawOptions {
 	 * The distance (in screen pixels) at which shapes snap to guides and other shapes.
 	 */
 	readonly snapThreshold: number
+	/**
+	 * Options for the editor's camera. These are the initial camera options.
+	 * Use {@link Editor.setCameraOptions} to update camera options at runtime.
+	 */
+	readonly camera: Partial<TLCameraOptions>
+	/**
+	 * Options for the editor's text rendering. These include TipTap configuration and
+	 * font handling. These are the initial text options and cannot be changed at runtime.
+	 */
+	readonly text: TLTextOptions
+	/**
+	 * Options for syncing the editor's camera state with the URL. Set to `true` to enable
+	 * with default options, or pass an options object to customize behavior.
+	 *
+	 * @example
+	 * ```tsx
+	 * // Enable with defaults
+	 * <Tldraw options={{ deepLinks: true }} />
+	 *
+	 * // Enable with custom options
+	 * <Tldraw options={{ deepLinks: { param: 'd', debounceMs: 500 } }} />
+	 * ```
+	 */
+	readonly deepLinks: true | TLDeepLinkOptions | undefined
+	/**
+	 * 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
+	/**
+	 * Called when content is dropped on the canvas. Provides the page position
+	 * where the drop occurred and the underlying drag event object.
+	 * Return true to prevent default drop handling (files, URLs, etc.)
+	 */
+	experimental__onDropOnCanvas?(options: {
+		point: VecLike
+		event: React.DragEvent<Element>
+	}): boolean
 }
 
 /** @public */
@@ -178,4 +223,9 @@ export const defaultTldrawOptions = {
 	spacebarPanning: true,
 	zoomToFitPadding: 128,
 	snapThreshold: 8,
+	camera: DEFAULT_CAMERA_OPTIONS,
+	text: {},
+	deepLinks: undefined,
+	quickZoomPreservesScreenBounds: true,
+	experimental__onDropOnCanvas: undefined,
 } as const satisfies TldrawOptions

package/src/lib/primitives/Vec.ts

@@ -1,6 +1,12 @@
 import { VecModel } from '@tldraw/tlschema'
 import { EASINGS } from './easings'
-import { clamp, toFixed } from './utils'
+function clamp(n: number, min: number, max?: number): number {
+	return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
+}
+
+function toFixed(v: number) {
+	return Math.round(v * 1e2) / 1e2
+}
 
 /** @public */
 export type VecLike = Vec | VecModel

package/src/lib/utils/areShapesContentEqual.ts

@@ -1,4 +1,11 @@
 import { TLShape } from '@tldraw/tlschema'
 
-export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
-	a.props === b.props && a.meta === b.meta
+/**
+ * Checks if two shapes are equal by comparing their props and meta.
+ * @param a - The first shape.
+ * @param b - The second shape.
+ * @returns True if the shapes are equal, false otherwise.
+ */
+export function areShapesContentEqual(a: TLShape, b: TLShape) {
+	return a.props === b.props && a.meta === b.meta
+}