tldraw 4.3.0-canary.35392ae6dc0d → 4.3.0-canary.37e6bf0fa8c6

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -43,6 +43,8 @@ const sizeCache = createComputedCache(
 export interface TextShapeOptions {
 	/** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
 	extraArrowHorizontalPadding: number
+	/** Whether to show the outline of the text shape (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
+	showTextOutline: boolean
 }
 
 /** @public */
@@ -53,6 +55,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 	override options: TextShapeOptions = {
 		extraArrowHorizontalPadding: 10,
+		showTextOutline: true,
 	}
 
 	getDefaultProps(): TLTextShape['props'] {
@@ -140,6 +143,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
+				showTextOutline={this.options.showTextOutline}
 				style={{
 					transform: `scale(${scale})`,
 					transformOrigin: 'top left',
@@ -175,6 +179,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				labelColor={getColorValue(theme, shape.props.color, 'solid')}
 				bounds={exportBounds}
 				padding={0}
+				showTextOutline={this.options.showTextOutline}
 			/>
 		)
 	}

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -95,7 +95,8 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 
 const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {
 	const editor = useEditor()
-	const showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110
+	const showControls =
+		editor.getShapeGeometry(shape).bounds.w * editor.getEfficientZoomLevel() >= 110
 	const isEditing = useIsEditing(shape.id)
 	const prefersReducedMotion = usePrefersReducedMotion()
 	const { Spinner } = useEditorComponents()

package/src/lib/tools/SelectTool/childStates/EditingShape.ts

@@ -18,13 +18,25 @@ interface EditingShapeInfo {
 export class EditingShape extends StateNode {
 	static override id = 'editing_shape'
 
-	hitShapeForPointerUp: TLShape | null = null
+	hitLabelOnShapeForPointerUp: TLShape | null = null
 	private info = {} as EditingShapeInfo
+	private didPointerDownOnEditingShape = false
+
+	private isTextInputFocused(): boolean {
+		const container = this.editor.getContainer()
+		return (
+			container.contains(document.activeElement) &&
+			(document.activeElement?.nodeName === 'INPUT' ||
+				document.activeElement?.nodeName === 'TEXTAREA' ||
+				(document.activeElement as HTMLElement)?.isContentEditable)
+		)
+	}
 
 	override onEnter(info: EditingShapeInfo) {
 		const editingShape = this.editor.getEditingShape()
 		if (!editingShape) throw Error('Entered editing state without an editing shape')
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
+		this.didPointerDownOnEditingShape = false
 
 		this.info = info
 
@@ -54,15 +66,34 @@ export class EditingShape extends StateNode {
 	override onPointerMove(info: TLPointerEventInfo) {
 		// In the case where on pointer down we hit a shape's label, we need to check if the user is dragging.
 		// and if they are, we need to transition to translating instead.
-		if (this.hitShapeForPointerUp && this.editor.inputs.isDragging) {
+		if (this.hitLabelOnShapeForPointerUp && this.editor.inputs.isDragging) {
 			if (this.editor.getIsReadonly()) return
-			if (this.hitShapeForPointerUp.isLocked) return
-			this.editor.select(this.hitShapeForPointerUp)
+			if (this.hitLabelOnShapeForPointerUp.isLocked) return
+
+			this.editor.select(this.hitLabelOnShapeForPointerUp)
 			this.parent.transition('translating', info)
-			this.hitShapeForPointerUp = null
+			this.hitLabelOnShapeForPointerUp = null
 			return
 		}
 
+		// Check if dragging from editing shape with blurred input
+		if (this.didPointerDownOnEditingShape && this.editor.inputs.isDragging) {
+			if (this.editor.getIsReadonly()) return
+
+			const editingShape = this.editor.getEditingShape()
+			if (!editingShape || editingShape.isLocked) return
+
+			if (!this.isTextInputFocused()) {
+				// Input blurred during drag - exit edit mode and start translating
+				this.editor.select(editingShape)
+				this.parent.transition('translating', info)
+				this.didPointerDownOnEditingShape = false
+				return
+			}
+			// Input still focused - user is selecting text, stay in edit mode
+			this.didPointerDownOnEditingShape = false
+		}
+
 		switch (info.target) {
 			case 'shape':
 			case 'canvas': {
@@ -73,7 +104,8 @@ export class EditingShape extends StateNode {
 	}
 
 	override onPointerDown(info: TLPointerEventInfo) {
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
+		this.didPointerDownOnEditingShape = false
 
 		switch (info.target) {
 			// N.B. This bit of logic has a bit of history to it.
@@ -120,10 +152,11 @@ export class EditingShape extends StateNode {
 					) {
 						// it's a hit to the label!
 						if (selectingShape.id === editingShape.id) {
-							// If we clicked on the editing geo / arrow shape's label, do nothing
+							// Track click on editing shape for drag detection
+							this.didPointerDownOnEditingShape = true
 							return
 						} else {
-							this.hitShapeForPointerUp = selectingShape
+							this.hitLabelOnShapeForPointerUp = selectingShape
 
 							this.editor.markHistoryStoppingPoint('editing on pointer up')
 							this.editor.select(selectingShape.id)
@@ -157,9 +190,9 @@ export class EditingShape extends StateNode {
 
 	override onPointerUp(info: TLPointerEventInfo) {
 		// If we're not dragging, and it's a hit to the label, begin editing the shape.
-		const hitShape = this.hitShapeForPointerUp
+		const hitShape = this.hitLabelOnShapeForPointerUp
 		if (!hitShape) return
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
 
 		// Stay in edit mode to maintain flow of editing.
 		const util = this.editor.getShapeUtil(hitShape)

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx

@@ -1,4 +1,3 @@
-import { useEditor, useValue } from '@tldraw/editor'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import {
@@ -9,6 +8,7 @@ import {
 	useThreeStackableItems,
 	useUnlockedSelectedShapesCount,
 } from '../../hooks/menu-hooks'
+import { ZoomTo100MenuItem } from '../menu-items'
 import { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'
 
 /** @public @react */
@@ -99,14 +99,6 @@ export function ZoomOrRotateMenuItem() {
 }
 /** @public @react */
 
-export function ZoomTo100MenuItem() {
-	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])
-
-	return <TldrawUiMenuActionItem actionId="zoom-to-100" disabled={isZoomedTo100} />
-}
-/** @public @react */
-
 export function RotateCCWMenuItem() {
 	const oneSelected = useUnlockedSelectedShapesCount(1)
 	const isInSelectState = useIsInSelectState()

package/src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx

@@ -48,7 +48,7 @@ export const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZ
 const ZoomTriggerButton = () => {
 	const editor = useEditor()
 	const breakpoint = useBreakpoint()
-	const zoom = useValue('zoom', () => editor.getZoomLevel(), [editor])
+	const zoom = useValue('zoom', () => editor.getEfficientZoomLevel(), [editor])
 	const msg = useTranslation()
 
 	const handleDoubleClick = useCallback(() => {

package/src/lib/ui/components/menu-items.tsx

@@ -182,7 +182,9 @@ export function UnlockAllMenuItem() {
 /** @public @react */
 export function ZoomTo100MenuItem() {
 	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])
+	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [
+		editor,
+	])
 
 	return <TldrawUiMenuActionItem actionId="zoom-to-100" noClose disabled={isZoomedTo100} />
 }

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -1,4 +1,12 @@
-import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
+import {
+	assert,
+	atom,
+	Editor,
+	tlenvReactive,
+	uniqueId,
+	useMaybeEditor,
+	useValue,
+} from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
 import React, {
 	createContext,
@@ -161,22 +169,9 @@ class TooltipManager {
 		}
 
 		if (!tooltip) return null
-		if (!this.supportsHover() && !tooltip.showOnMobile) return null
+		if (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null
 		return tooltip
 	}
-
-	private supportsHoverAtom: Atom<boolean> | null = null
-	supportsHover() {
-		if (!this.supportsHoverAtom) {
-			const mediaQuery = window.matchMedia('(hover: hover)')
-			const supportsHover = atom('has hover', mediaQuery.matches)
-			this.supportsHoverAtom = supportsHover
-			mediaQuery.addEventListener('change', (e) => {
-				supportsHover.set(e.matches)
-			})
-		}
-		return this.supportsHoverAtom.get()
-	}
 }
 
 const tooltipManager = TooltipManager.getInstance()

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 = '4.3.0-canary.35392ae6dc0d'
+export const version = '4.3.0-canary.37e6bf0fa8c6'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-12-05T09:46:38.266Z',
-	patch: '2025-12-05T09:46:38.266Z',
+	minor: '2025-12-09T10:38:11.018Z',
+	patch: '2025-12-09T10:38:11.018Z',
 }

package/src/lib/utils/text/richText.ts

@@ -6,10 +6,10 @@ import {
 	generateText,
 	JSONContent,
 } from '@tiptap/core'
-import Code from '@tiptap/extension-code'
-import Highlight from '@tiptap/extension-highlight'
+import { Code } from '@tiptap/extension-code'
+import { Highlight } from '@tiptap/extension-highlight'
 import { Node } from '@tiptap/pm/model'
-import StarterKit from '@tiptap/starter-kit'
+import { StarterKit } from '@tiptap/starter-kit'
 import {
 	Editor,
 	getOwnProperty,

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -83,7 +83,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
         stroke-width="3.5"
       />
       <foreignobject
-        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
         height="100"
         width="100"
         x="0"
@@ -223,7 +223,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
         stroke-width="3.5"
       />
       <foreignobject
-        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
         height="100"
         width="100"
         x="0"

package/src/test/commands/cameraState.test.ts

@@ -0,0 +1,299 @@
+import { Box } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+})
+
+describe('getCameraState', () => {
+	it('starts as idle', () => {
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('becomes moving when the camera changes via setCamera', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving when the camera changes via pan', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.pan({ x: 100, y: 100 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving when the camera changes via zoomIn', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('returns to idle after the timeout elapses', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// The default timeout is 64ms (options.cameraMovingTimeoutMs)
+		// Each tick is 16ms, so we need ~4 ticks to elapse
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('stays moving while camera continues to change', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Move again before timeout elapses
+		editor.forceTick(2)
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Move again
+		editor.forceTick(2)
+		editor.setCamera({ x: 300, y: 300, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Now let it settle
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('stays idle when camera position does not actually change', () => {
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Setting the same camera position should not trigger moving state
+		const currentCamera = editor.getCamera()
+		editor.setCamera({ x: currentCamera.x, y: currentCamera.y, z: currentCamera.z })
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('does not add multiple tick listeners when camera changes rapidly', () => {
+		// This test verifies the fix: we should not have redundant listeners
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Change camera multiple times rapidly
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		editor.setCamera({ x: 300, y: 300, z: 1 })
+
+		expect(editor.getCameraState()).toBe('moving')
+
+		// After timeout, should return to idle exactly once
+		// If there were multiple listeners, the state might behave unexpectedly
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('resets timeout when camera changes while already moving', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Wait almost until timeout
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Change camera again - should reset timeout
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Wait 3 more ticks - would have been idle if timeout wasn't reset
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Now let it fully settle
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+})
+
+describe('camera state with zoom', () => {
+	it('becomes moving on zoomOut', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomOut(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving on centerOnPoint', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.centerOnPoint({ x: 500, y: 500 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving on zoomToFit', () => {
+		// Create a shape so zoomToFit has something to fit
+		editor.createShape({ type: 'geo', x: 100, y: 100, props: { w: 200, h: 200 } })
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomToFit({ immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+})
+
+describe('getDebouncedZoomLevel', () => {
+	it('returns the current zoom level when camera is idle', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+
+		// Change zoom and let it settle
+		editor.zoomIn(undefined, { immediate: true })
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	it('captures zoom when camera starts moving', () => {
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Start zooming - the debounced zoom is captured when movement starts
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// The debounced zoom is captured at the moment movement starts (after first change)
+		const capturedZoom = editor.getDebouncedZoomLevel()
+		expect(capturedZoom).toBe(editor.getZoomLevel())
+	})
+
+	it('keeps captured zoom during continued camera movement', () => {
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		const capturedZoom = editor.getDebouncedZoomLevel()
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Zoom again while still moving - debounced value should stay the same
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+		expect(editor.getDebouncedZoomLevel()).toBe(capturedZoom)
+
+		// But current zoom should have changed
+		expect(editor.getZoomLevel()).not.toBe(capturedZoom)
+	})
+
+	it('updates debounced zoom when camera becomes idle again', () => {
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		const capturedZoom = editor.getDebouncedZoomLevel()
+
+		// Zoom again while moving to change the current zoom
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getDebouncedZoomLevel()).toBe(capturedZoom)
+
+		// Let camera settle
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Debounced zoom should now match current zoom
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	it('captures new zoom at the start of each new movement', () => {
+		// First zoom and settle
+		editor.zoomIn(undefined, { immediate: true })
+		const firstCapturedZoom = editor.getDebouncedZoomLevel()
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Second zoom - should capture new zoom level
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+		// The captured zoom should be different from the first capture
+		expect(editor.getDebouncedZoomLevel()).not.toBe(firstCapturedZoom)
+		// And it should match the current zoom (since we just started moving)
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	describe('with debouncedZoom option disabled', () => {
+		let editorWithoutDebouncedZoom: TestEditor
+
+		beforeEach(() => {
+			editorWithoutDebouncedZoom = new TestEditor({
+				options: { debouncedZoom: false },
+			})
+			editorWithoutDebouncedZoom.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+		})
+
+		it('always returns the current zoom level even when camera is moving', () => {
+			const initialZoom = editorWithoutDebouncedZoom.getZoomLevel()
+
+			editorWithoutDebouncedZoom.zoomIn(undefined, { immediate: true })
+			expect(editorWithoutDebouncedZoom.getCameraState()).toBe('moving')
+
+			// Should return the current zoom, not the captured one
+			expect(editorWithoutDebouncedZoom.getDebouncedZoomLevel()).toBe(
+				editorWithoutDebouncedZoom.getZoomLevel()
+			)
+			expect(editorWithoutDebouncedZoom.getDebouncedZoomLevel()).not.toBe(initialZoom)
+		})
+	})
+})
+
+describe('getEfficientZoomLevel', () => {
+	it('returns current zoom level when below shape threshold', () => {
+		// Default threshold is 500 shapes, we have 0
+		expect(editor.getZoomLevel()).toBe(editor.getEfficientZoomLevel())
+
+		// Add a few shapes - still below threshold
+		for (let i = 0; i < 10; i++) {
+			editor.createShape({ type: 'geo', x: i * 100, y: 0, props: { w: 50, h: 50 } })
+		}
+		expect(editor.getCurrentPageShapeIds().size).toBe(10)
+
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Should still return current zoom because we're below threshold
+		expect(editor.getEfficientZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	describe('with many shapes above threshold', () => {
+		let editorWithManyShapes: TestEditor
+
+		beforeEach(() => {
+			// Use a lower threshold for testing
+			editorWithManyShapes = new TestEditor({
+				options: { debouncedZoomThreshold: 5 },
+			})
+			editorWithManyShapes.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+
+			// Add shapes above the threshold
+			for (let i = 0; i < 10; i++) {
+				editorWithManyShapes.createShape({
+					type: 'geo',
+					x: i * 100,
+					y: 0,
+					props: { w: 50, h: 50 },
+				})
+			}
+		})
+
+		it('returns debounced zoom level when above shape threshold and camera is moving', () => {
+			// First zoom to capture a debounced value
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			const capturedZoom = editorWithManyShapes.getEfficientZoomLevel()
+			expect(editorWithManyShapes.getCameraState()).toBe('moving')
+
+			// Zoom again while still moving
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			expect(editorWithManyShapes.getCameraState()).toBe('moving')
+
+			// Should return the captured zoom, not the current zoom
+			expect(editorWithManyShapes.getEfficientZoomLevel()).toBe(capturedZoom)
+			expect(editorWithManyShapes.getEfficientZoomLevel()).not.toBe(
+				editorWithManyShapes.getZoomLevel()
+			)
+		})
+
+		it('returns current zoom level when above threshold but camera is idle', () => {
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			editorWithManyShapes.forceTick(5)
+			expect(editorWithManyShapes.getCameraState()).toBe('idle')
+
+			// Should return current zoom because camera is idle
+			expect(editorWithManyShapes.getEfficientZoomLevel()).toBe(editorWithManyShapes.getZoomLevel())
+		})
+	})
+})

package/tldraw.css

@@ -611,7 +611,6 @@ input,
 	pointer-events: all;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
-	text-shadow: var(--tl-text-outline);
 }
 
 .tl-text-wrapper[data-font='draw'] {
@@ -774,7 +773,6 @@ input,
 	justify-content: center;
 	align-items: center;
 	color: var(--tl-color-text);
-	text-shadow: var(--tl-text-outline);
 	line-height: inherit;
 	position: absolute;
 	inset: 0px;
@@ -974,6 +972,14 @@ input,
 	display: block;
 }
 
+.tl-text__outline {
+	text-shadow: var(--tl-text-outline);
+}
+
+.tl-text__no-outline {
+	text-shadow: none;
+}
+
 /* --------------------- Loading -------------------- */
 
 .tl-loading {
@@ -1221,7 +1227,6 @@ input,
 	align-items: center;
 	text-align: center;
 	color: var(--tl-color-text);
-	text-shadow: var(--tl-text-outline);
 }
 
 .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
@@ -1450,7 +1455,6 @@ input,
 }
 
 .tl-note__container > .tl-text-label {
-	text-shadow: none;
 	color: currentColor;
 }
 

package/dist-cjs/lib/shapes/shared/useForceSolid.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/shapes/shared/useForceSolid.ts"],
-  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\n\nexport function useForceSolid() {\n\tconst editor = useEditor()\n\treturn useValue('zoom', () => editor.getZoomLevel() < 0.35, [editor])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoC;AAE7B,SAAS,gBAAgB;AAC/B,QAAM,aAAS,yBAAU;AACzB,aAAO,wBAAS,QAAQ,MAAM,OAAO,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC;AACrE;",
-  "names": []
-}

package/dist-esm/lib/shapes/shared/useForceSolid.mjs

@@ -1,9 +0,0 @@
-import { useEditor, useValue } from "@tldraw/editor";
-function useForceSolid() {
-  const editor = useEditor();
-  return useValue("zoom", () => editor.getZoomLevel() < 0.35, [editor]);
-}
-export {
-  useForceSolid
-};
-//# sourceMappingURL=useForceSolid.mjs.map

package/dist-esm/lib/shapes/shared/useForceSolid.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/shapes/shared/useForceSolid.ts"],
-  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\n\nexport function useForceSolid() {\n\tconst editor = useEditor()\n\treturn useValue('zoom', () => editor.getZoomLevel() < 0.35, [editor])\n}\n"],
-  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AAE7B,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AACzB,SAAO,SAAS,QAAQ,MAAM,OAAO,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC;AACrE;",
-  "names": []
-}

package/src/lib/shapes/shared/useForceSolid.ts

@@ -1,6 +0,0 @@
-import { useEditor, useValue } from '@tldraw/editor'
-
-export function useForceSolid() {
-	const editor = useEditor()
-	return useValue('zoom', () => editor.getZoomLevel() < 0.35, [editor])
-}