@tldraw/editor 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
-  "description": "A tiny little drawing app (editor).",
-  "version": "3.16.0-internal.a478398270c6",
+  "description": "tldraw infinite canvas SDK (editor).",
+  "version": "3.16.0-internal.f8b97f0c414f",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -17,6 +17,7 @@
   },
   "keywords": [
     "tldraw",
+    "sdk",
     "drawing",
     "app",
     "development",
@@ -33,27 +34,28 @@
     "src"
   ],
   "scripts": {
-    "test-ci": "lazy inherit",
-    "test": "yarn run -T jest",
+    "test-ci": "yarn run -T vitest run --passWithNoTests",
+    "test": "yarn run -T vitest --passWithNoTests",
     "benchmark": "yarn run -T tsx ./internal/scripts/benchmark.ts",
-    "test-coverage": "lazy inherit",
+    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
     "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
     "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts",
+    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "dependencies": {
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.16.0-internal.a478398270c6",
-    "@tldraw/state-react": "3.16.0-internal.a478398270c6",
-    "@tldraw/store": "3.16.0-internal.a478398270c6",
-    "@tldraw/tlschema": "3.16.0-internal.a478398270c6",
-    "@tldraw/utils": "3.16.0-internal.a478398270c6",
-    "@tldraw/validate": "3.16.0-internal.a478398270c6",
+    "@tldraw/state": "3.16.0-internal.f8b97f0c414f",
+    "@tldraw/state-react": "3.16.0-internal.f8b97f0c414f",
+    "@tldraw/store": "3.16.0-internal.f8b97f0c414f",
+    "@tldraw/tlschema": "3.16.0-internal.f8b97f0c414f",
+    "@tldraw/utils": "3.16.0-internal.f8b97f0c414f",
+    "@tldraw/validate": "3.16.0-internal.f8b97f0c414f",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
@@ -68,41 +70,17 @@
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/benchmark": "^2.1.5",
     "@types/react": "^18.3.18",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.7.0",
     "lazyrepo": "0.0.0-alpha.27",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "resize-observer-polyfill": "^1.5.1"
-  },
-  "jest": {
-    "preset": "../../internal/config/jest/node/jest-preset.js",
-    "testEnvironment": "../../../packages/utils/patchedJestJsDom.js",
-    "fakeTimers": {
-      "enableGlobally": true
-    },
-    "testPathIgnorePatterns": [
-      "^.+\\.*.css$"
-    ],
-    "moduleNameMapper": {
-      "^~(.*)": "<rootDir>/src/$1",
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    },
-    "setupFiles": [
-      "raf/polyfill",
-      "jest-canvas-mock",
-      "<rootDir>/setupTests.js"
-    ],
-    "setupFilesAfterEnv": [
-      "../../internal/config/setupJest.ts"
-    ]
+    "resize-observer-polyfill": "^1.5.1",
+    "vitest": "^3.2.4"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/src/index.ts

@@ -67,6 +67,10 @@ export {
 	DefaultShapeIndicators,
 	type TLShapeIndicatorsProps,
 } from './lib/components/default-components/DefaultShapeIndicators'
+export {
+	DefaultShapeWrapper,
+	type TLShapeWrapperProps,
+} from './lib/components/default-components/DefaultShapeWrapper'
 export {
 	DefaultSnapIndicator,
 	type TLSnapIndicatorProps,
@@ -261,9 +265,10 @@ export {
 	type TLCameraMoveOptions,
 	type TLCameraOptions,
 	type TLExportType,
+	type TLGetShapeAtPointOptions,
 	type TLImageExportOptions,
 	type TLSvgExportOptions,
-	type TLSvgOptions,
+	type TLUpdatePointerOptions,
 } from './lib/editor/types/misc-types'
 export {
 	type TLAdjacentDirection,
@@ -287,7 +292,13 @@ export {
 	type ContainerProviderProps,
 } from './lib/hooks/useContainer'
 export { getCursor } from './lib/hooks/useCursor'
-export { EditorContext, useEditor, useMaybeEditor } from './lib/hooks/useEditor'
+export {
+	EditorContext,
+	EditorProvider,
+	useEditor,
+	useMaybeEditor,
+	type EditorProviderProps,
+} from './lib/hooks/useEditor'
 export { useEditorComponents } from './lib/hooks/useEditorComponents'
 export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
 export { useEvent, useReactiveEvent } from './lib/hooks/useEvent'
@@ -319,9 +330,11 @@ export {
 	type InvalidLicenseReason,
 	type LicenseFromKeyResult,
 	type LicenseInfo,
+	type LicenseState,
 	type TestEnvironment,
 	type ValidLicenseKeyResult,
 } from './lib/license/LicenseManager'
+export { LICENSE_TIMEOUT } from './lib/license/LicenseProvider'
 export { defaultTldrawOptions, type TldrawOptions } from './lib/options'
 export {
 	Box,
@@ -340,6 +353,7 @@ export { CubicBezier2d } from './lib/primitives/geometry/CubicBezier2d'
 export { CubicSpline2d } from './lib/primitives/geometry/CubicSpline2d'
 export { Edge2d } from './lib/primitives/geometry/Edge2d'
 export { Ellipse2d } from './lib/primitives/geometry/Ellipse2d'
+export { getVerticesCountForArcLength } from './lib/primitives/geometry/geometry-constants'
 export {
 	Geometry2d,
 	Geometry2dFilters,
@@ -433,11 +447,14 @@ export {
 export {
 	activeElementShouldCaptureKeys,
 	loopToHtmlElement,
+	markEventAsHandled,
 	preventDefault,
 	releasePointerCapture,
 	setPointerCapture,
 	stopEventPropagation,
+	wasEventAlreadyHandled,
 } from './lib/utils/dom'
+export { EditorAtom } from './lib/utils/EditorAtom'
 export { getIncrementedName } from './lib/utils/getIncrementedName'
 export { getPointerInfo } from './lib/utils/getPointerInfo'
 export { getSvgPathFromPoints } from './lib/utils/getSvgPathFromPoints'
@@ -471,14 +488,6 @@ export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
 export { uniq } from './lib/utils/uniq'
 export { openWindow } from './lib/utils/window-open'
 
-/**
- * @deprecated Licensing is now enabled in the tldraw SDK.
- * @public */
-export function debugEnableLicensing() {
-	// noop
-	return
-}
-
 registerTldrawLibraryVersion(
 	(globalThis as any).TLDRAW_LIBRARY_NAME,
 	(globalThis as any).TLDRAW_LIBRARY_VERSION,

package/src/lib/TldrawEditor.tsx

@@ -1,9 +1,10 @@
 import { MigrationSequence, Store } from '@tldraw/store'
 import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
-import { Required, annotateError } from '@tldraw/utils'
+import { annotateError, Required } from '@tldraw/utils'
+import classNames from 'classnames'
 import React, {
-	ReactNode,
 	memo,
+	ReactNode,
 	useCallback,
 	useEffect,
 	useLayoutEffect,
@@ -12,16 +13,14 @@ import React, {
 	useState,
 	useSyncExternalStore,
 } from 'react'
-
-import classNames from 'classnames'
 import { version } from '../version'
-import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
-import { TLEditorSnapshot } from './config/TLEditorSnapshot'
+import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { TLStoreBaseOptions } from './config/createTLStore'
-import { TLUser, createTLUser } from './config/createTLUser'
+import { createTLUser, TLUser } from './config/createTLUser'
 import { TLAnyBindingUtilConstructor } from './config/defaultBindings'
 import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
+import { TLEditorSnapshot } from './config/TLEditorSnapshot'
 import { Editor } from './editor/Editor'
 import { TLStateNodeConstructor } from './editor/tools/StateNode'
 import { TLCameraOptions } from './editor/types/misc-types'
@@ -39,12 +38,13 @@ import { useForceUpdate } from './hooks/useForceUpdate'
 import { useShallowObjectIdentity } from './hooks/useIdentity'
 import { useLocalStore } from './hooks/useLocalStore'
 import { useRefState } from './hooks/useRefState'
+import { useStateAttribute } from './hooks/useStateAttribute'
 import { useZoomCss } from './hooks/useZoomCss'
 import { LicenseProvider } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
 import { TLDeepLinkOptions } from './utils/deepLinks'
-import { stopEventPropagation } from './utils/dom'
+import { markEventAsHandled } from './utils/dom'
 import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
@@ -188,13 +188,6 @@ export interface TldrawEditorBaseProps {
 	 */
 	deepLinks?: true | TLDeepLinkOptions
 
-	/**
-	 * Predicate for whether or not a shape should be hidden.
-	 *
-	 * @deprecated Use {@link TldrawEditorBaseProps#getShapeVisibility} instead.
-	 */
-	isShapeHidden?(shape: TLShape, editor: Editor): boolean
-
 	/**
 	 * Provides a way to hide shapes.
 	 *
@@ -282,7 +275,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 			data-tldraw={version}
 			draggable={false}
 			className={classNames(`${TL_CONTAINER_CLASS} tl-theme__light`, className)}
-			onPointerDown={stopEventPropagation}
+			onPointerDown={markEventAsHandled}
 			tabIndex={-1}
 			role="application"
 			aria-label={_options?.branding ?? 'tldraw'}
@@ -411,8 +404,6 @@ function TldrawEditorWithReadyStore({
 	options,
 	licenseKey,
 	deepLinks: _deepLinks,
-	// eslint-disable-next-line @typescript-eslint/no-deprecated
-	isShapeHidden,
 	getShapeVisibility,
 	assetUrls,
 }: Required<
@@ -472,7 +463,6 @@ function TldrawEditorWithReadyStore({
 				textOptions,
 				options,
 				licenseKey,
-				isShapeHidden,
 				getShapeVisibility,
 				fontAssetUrls: assetUrls?.fonts,
 			})
@@ -508,7 +498,6 @@ function TldrawEditorWithReadyStore({
 			user,
 			setEditor,
 			licenseKey,
-			isShapeHidden,
 			getShapeVisibility,
 			textOptions,
 			assetUrls,
@@ -585,8 +574,13 @@ function TldrawEditorWithReadyStore({
 	if (editor !== fontLoadingState?.editor) {
 		fontLoadingState = null
 	}
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!editor) return
+		if (editor.options.maxFontsToLoadBeforeRender === 0) {
+			setFontLoadingState({ editor, isLoaded: true })
+			return
+		}
+
 		let isCancelled = false
 
 		setFontLoadingState({ editor, isLoaded: false })
@@ -646,6 +640,7 @@ function Layout({ children, onMount }: { children: ReactNode; onMount?: TLOnMoun
 	useCursor()
 	useDarkMode()
 	useForceUpdate()
+	useStateAttribute()
 	useOnMount((editor) => {
 		const teardownStore = editor.store.props.onMount(editor)
 		const teardownCallback = onMount?.(editor)

package/src/lib/components/MenuClickCapture.tsx

@@ -50,12 +50,6 @@ export function MenuClickCapture() {
 			// Do nothing unless we're pointing
 			if (!rPointerState.current.isDown) return
 
-			// If we're already dragging, pass on the event as it is
-			if (rPointerState.current.isDragging) {
-				canvasEvents.onPointerMove?.(e)
-				return
-			}
-
 			if (
 				// We're pointing, but are we dragging?
 				Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >
@@ -75,8 +69,6 @@ export function MenuClickCapture() {
 					clientY: y,
 					button: 0,
 				})
-				// call the pointer move with the current pointer position
-				canvasEvents.onPointerMove?.(e)
 			}
 		},
 		[canvasEvents, editor]

package/src/lib/components/SVGContainer.tsx

@@ -7,7 +7,7 @@ export type SVGContainerProps = React.ComponentProps<'svg'>
 /** @public @react */
 export function SVGContainer({ children, className = '', ...rest }: SVGContainerProps) {
 	return (
-		<svg {...rest} className={classNames('tl-svg-container', className)}>
+		<svg {...rest} className={classNames('tl-svg-container', className)} aria-hidden="true">
 			{children}
 		</svg>
 	)

package/src/lib/components/Shape.tsx

@@ -28,7 +28,6 @@ export const Shape = memo(function Shape({
 	index,
 	backgroundIndex,
 	opacity,
-	dprMultiple,
 }: {
 	id: TLShapeId
 	shape: TLShape
@@ -36,11 +35,10 @@ export const Shape = memo(function Shape({
 	index: number
 	backgroundIndex: number
 	opacity: number
-	dprMultiple: number
 }) {
 	const editor = useEditor()
 
-	const { ShapeErrorFallback } = useEditorComponents()
+	const { ShapeErrorFallback, ShapeWrapper } = useEditorComponents()
 
 	const containerRef = useRef<HTMLDivElement>(null)
 	const bgContainerRef = useRef<HTMLDivElement>(null)
@@ -91,18 +89,14 @@ export const Shape = memo(function Shape({
 			}
 
 			// Width / Height
-			// We round the shape width and height up to the nearest multiple of dprMultiple
-			// to avoid the browser making miscalculations when applying the transform.
-			const widthRemainder = bounds.w % dprMultiple
-			const heightRemainder = bounds.h % dprMultiple
-			const width = widthRemainder === 0 ? bounds.w : bounds.w + (dprMultiple - widthRemainder)
-			const height = heightRemainder === 0 ? bounds.h : bounds.h + (dprMultiple - heightRemainder)
+			const width = Math.max(bounds.width, 1)
+			const height = Math.max(bounds.height, 1)
 
 			if (width !== prev.width || height !== prev.height) {
-				setStyleProperty(containerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
-				setStyleProperty(containerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
-				setStyleProperty(bgContainerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
-				setStyleProperty(bgContainerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
+				setStyleProperty(containerRef.current, 'width', width + 'px')
+				setStyleProperty(containerRef.current, 'height', height + 'px')
+				setStyleProperty(bgContainerRef.current, 'width', width + 'px')
+				setStyleProperty(bgContainerRef.current, 'height', height + 'px')
 				prev.width = width
 				prev.height = height
 			}
@@ -145,37 +139,22 @@ export const Shape = memo(function Shape({
 		[editor]
 	)
 
-	if (!shape) return null
-
-	const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
+	if (!shape || !ShapeWrapper) return null
 
 	return (
 		<>
 			{util.backgroundComponent && (
-				<div
-					ref={bgContainerRef}
-					className="tl-shape tl-shape-background"
-					data-shape-type={shape.type}
-					data-shape-id={shape.id}
-					draggable={false}
-				>
+				<ShapeWrapper ref={bgContainerRef} shape={shape} isBackground={true}>
 					<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>
 						<InnerShapeBackground shape={shape} util={util} />
 					</OptionalErrorBoundary>
-				</div>
+				</ShapeWrapper>
 			)}
-			<div
-				ref={containerRef}
-				className="tl-shape"
-				data-shape-type={shape.type}
-				data-shape-is-filled={isFilledShape}
-				data-shape-id={shape.id}
-				draggable={false}
-			>
+			<ShapeWrapper ref={containerRef} shape={shape} isBackground={false}>
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>
-			</div>
+			</ShapeWrapper>
 		</>
 	)
 })

package/src/lib/components/default-components/DefaultBrush.tsx

@@ -21,7 +21,7 @@ export const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps)
 	const h = toDomPrecision(Math.max(1, brush.h))
 
 	return (
-		<svg className="tl-overlays__item" ref={rSvg}>
+		<svg className="tl-overlays__item" ref={rSvg} aria-hidden="true">
 			{color ? (
 				<g className="tl-brush" opacity={opacity}>
 					<rect width={w} height={h} fill={color} opacity={0.75} />

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -21,8 +21,7 @@ import { Mat } from '../../primitives/Mat'
 import { Vec } from '../../primitives/Vec'
 import { toDomPrecision } from '../../primitives/utils'
 import { debugFlags } from '../../utils/debug-flags'
-import { setStyleProperty } from '../../utils/dom'
-import { nearestMultiple } from '../../utils/nearestMultiple'
+import { markEventAsHandled, setStyleProperty } from '../../utils/dom'
 import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
@@ -139,7 +138,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				data-testid="canvas"
 				{...events}
 			>
-				<svg className="tl-svg-context">
+				<svg className="tl-svg-context" aria-hidden="true">
 					<defs>
 						{shapeSvgDefs}
 						<CursorDef />
@@ -173,10 +172,18 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<LiveCollaborators />
 					</div>
 				</div>
+				<div
+					className="tl-canvas__in-front"
+					onPointerDown={markEventAsHandled}
+					onPointerUp={markEventAsHandled}
+					onTouchStart={markEventAsHandled}
+					onTouchEnd={markEventAsHandled}
+				>
+					<InFrontOfTheCanvasWrapper />
+				</div>
 				<MovingCameraHitTestBlocker />
 			</div>
 			<MenuClickCapture />
-			<InFrontOfTheCanvasWrapper />
 		</>
 	)
 }
@@ -390,18 +397,9 @@ function ShapesWithSVGs() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
-	const dprMultiple = useValue(
-		'dpr multiple',
-		() =>
-			// dprMultiple is the smallest number we can multiply dpr by to get an integer
-			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
-		[editor]
-	)
-
 	return renderingShapes.map((result) => (
 		<Fragment key={result.id + '_fragment'}>
-			<Shape {...result} dprMultiple={dprMultiple} />
+			<Shape {...result} />
 			<DebugSvgCopy id={result.id} mode="iframe" />
 		</Fragment>
 	))
@@ -436,19 +434,10 @@ function ShapesToDisplay() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
-	const dprMultiple = useValue(
-		'dpr multiple',
-		() =>
-			// dprMultiple is the smallest number we can multiply dpr by to get an integer
-			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
-		[editor]
-	)
-
 	return (
 		<>
 			{renderingShapes.map((result) => (
-				<Shape key={result.id + '_shape'} {...result} dprMultiple={dprMultiple} />
+				<Shape key={result.id + '_shape'} {...result} />
 			))}
 			{tlenv.isSafari && <ReflowIfNeeded />}
 		</>

package/src/lib/components/default-components/DefaultCollaboratorHint.tsx

@@ -39,12 +39,12 @@ export function DefaultCollaboratorHint({
 	const cursorHintId = useSharedSafeId('cursor_hint')
 
 	return (
-		<svg ref={rSvg} className={classNames('tl-overlays__item', className)}>
+		<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			<use
 				href={`#${cursorHintId}`}
 				color={color}
 				strokeWidth={3}
-				stroke="var(--color-background)"
+				stroke="var(--tl-color-background)"
 			/>
 			<use href={`#${cursorHintId}`} color={color} opacity={opacity} />
 		</svg>

package/src/lib/components/default-components/DefaultCursor.tsx

@@ -33,7 +33,7 @@ export const DefaultCursor = memo(function DefaultCursor({
 
 	return (
 		<div ref={rCursor} className={classNames('tl-overlays__item', className)}>
-			<svg className="tl-cursor">
+			<svg className="tl-cursor" aria-hidden="true">
 				<use href={`#${cursorId}`} color={color} />
 			</svg>
 			{chatMessage ? (

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -75,7 +75,7 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
 
 		// if we can't find a theme class from the app or from a parent, we have
 		// to fall back on using a media query:
-		if (typeof window !== 'undefined' && 'matchMedia' in window) {
+		if (typeof window !== 'undefined' && window.matchMedia) {
 			setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
 		}
 	}, [isDarkModeFromApp])

package/src/lib/components/default-components/DefaultGrid.tsx

@@ -16,7 +16,7 @@ export function DefaultGrid({ x, y, z, size }: TLGridProps) {
 	const editor = useEditor()
 	const { gridSteps } = editor.options
 	return (
-		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg">
+		<svg className="tl-grid" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 			<defs>
 				{gridSteps.map(({ min, mid, step }, i) => {
 					const s = step * size * z

package/src/lib/components/default-components/DefaultHandles.tsx

@@ -7,5 +7,9 @@ export interface TLHandlesProps {
 
 /** @public @react */
 export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+	return (
+		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
+			{children}
+		</svg>
+	)
 }

package/src/lib/components/default-components/DefaultScribble.tsx

@@ -21,7 +21,7 @@ export function DefaultScribble({ scribble, zoom, color, opacity, className }: T
 			<path
 				className="tl-scribble"
 				d={getSvgPathFromPoints(scribble.points, false)}
-				stroke={color ?? `var(--color-${scribble.color})`}
+				stroke={color ?? `var(--tl-color-${scribble.color})`}
 				fill="none"
 				strokeWidth={8 / zoom}
 				opacity={opacity ?? scribble.opacity}

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -86,8 +86,12 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	}, [hidden])
 
 	return (
-		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)}>
-			<g className="tl-shape-indicator" stroke={color ?? 'var(--color-selected)'} opacity={opacity}>
+		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
+			<g
+				className="tl-shape-indicator"
+				stroke={color ?? 'var(--tl-color-selected)'}
+				opacity={opacity}
+			>
 				<InnerIndicator editor={editor} id={shapeId} />
 			</g>
 		</svg>

package/src/lib/components/default-components/DefaultShapeWrapper.tsx

@@ -0,0 +1,35 @@
+import { TLShape } from '@tldraw/tlschema'
+import classNames from 'classnames'
+import { forwardRef, ReactNode } from 'react'
+
+/** @public */
+export interface TLShapeWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+	/** The shape being rendered. */
+	shape: TLShape
+	/** Whether this is the shapes regular, or background component. */
+	isBackground: boolean
+	/** The shape's rendered component. */
+	children: ReactNode
+}
+
+/** @public @react */
+export const DefaultShapeWrapper = forwardRef(function DefaultShapeWrapper(
+	{ children, shape, isBackground, ...props }: TLShapeWrapperProps,
+	ref: React.Ref<HTMLDivElement>
+) {
+	const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none'
+
+	return (
+		<div
+			ref={ref}
+			data-shape-type={shape.type}
+			data-shape-is-filled={isBackground ? undefined : isFilledShape}
+			data-shape-id={shape.id}
+			draggable={false}
+			{...props}
+			className={classNames('tl-shape', isBackground && 'tl-shape-background', props.className)}
+		>
+			{children}
+		</div>
+	)
+})

package/src/lib/components/default-components/DefaultSnapIndictor.tsx

@@ -163,7 +163,7 @@ export interface TLSnapIndicatorProps {
 /** @public @react */
 export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
 	return (
-		<svg className={classNames('tl-overlays__item', className)}>
+		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
 			{line.type === 'points' ? (
 				<PointsSnapIndicator {...line} zoom={zoom} />
 			) : line.type === 'gaps' ? (