tldraw 3.16.0-internal.a478398270c6 → 3.16.0-next.15f085081fd5

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

@@ -19,6 +19,7 @@ import {
 	compact,
 	frameShapeMigrations,
 	frameShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	lerp,
 	resizeBox,
@@ -99,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' }
 	}
@@ -219,29 +224,30 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 			[shape.id]
 		)
 
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const zoomLevel = useValue('zoom level', () => this.editor.getZoomLevel(), [this.editor])
-
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingStroke')
+			: theme.background
+		const frameHeadingFill = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingFill')
+			: theme.background
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>
 				<SVGContainer>
 					<rect
 						className={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}
-						width={shape.props.w + 1 / zoomLevel}
-						height={shape.props.h + 1 / zoomLevel}
 						fill={frameFill}
 						stroke={frameStroke}
-						y={-0.5 / zoomLevel}
-						x={-0.5 / zoomLevel}
+						style={{
+							width: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,
+							height: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,
+							transform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`,
+						}}
 					/>
 				</SVGContainer>
 				{isCreating ? null : (
@@ -279,13 +285,16 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		const text = createTextJsxFromSpans(this.editor, spans, opts)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingStroke')
+			: theme.background
+		const frameHeadingFill = showFrameColors
+			? getColorValue(theme, colorToUse, 'frameHeadingFill')
+			: theme.background
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>

package/src/lib/shapes/frame/components/FrameHeading.tsx

@@ -64,7 +64,7 @@ export const FrameHeading = memo(function FrameHeading({
 				overflow: isEditing ? 'visible' : 'hidden',
 				maxWidth: `calc(var(--tl-zoom) * ${
 					side === 0 || side === 2 ? Math.ceil(width) : Math.ceil(height)
-				}px + ${showColors ? '0px' : 'var(--frame-offset-width)'})`,
+				}px + ${showColors ? '0px' : 'var(--tl-frame-offset-width)'})`,
 				bottom: '100%',
 				transform: `${translation} scale(var(--tl-scale)) translateX(${offsetX}px)`,
 			}}

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -18,6 +18,7 @@ import {
 	exhaustiveSwitchError,
 	geoShapeMigrations,
 	geoShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -220,7 +221,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isOnlySelected}
-							labelColor={theme[props.labelColor].solid}
+							labelColor={getColorValue(theme, props.labelColor, 'solid')}
 							wrap
 						/>
 					</HTMLContainer>
@@ -278,7 +279,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					align={props.align}
 					verticalAlign={props.verticalAlign}
 					richText={props.richText}
-					labelColor={theme[props.labelColor].solid}
+					labelColor={getColorValue(theme, props.labelColor, 'solid')}
 					bounds={bounds}
 					padding={LABEL_PADDING}
 				/>

package/src/lib/shapes/geo/components/GeoShapeBody.tsx

@@ -1,4 +1,4 @@
-import { TLGeoShape } from '@tldraw/editor'
+import { getColorValue, TLGeoShape } from '@tldraw/editor'
 import { ShapeFill } from '../../shared/ShapeFill'
 import { STROKE_SIZES } from '../../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../../shared/useDefaultColorTheme'
@@ -33,7 +33,7 @@ export function GeoShapeBody({
 				strokeWidth,
 				forceSolid,
 				randomSeed: shape.id,
-				props: { fill: 'none', stroke: theme[color].solid },
+				props: { fill: 'none', stroke: getColorValue(theme, color, 'solid') },
 			})}
 		</>
 	)

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -10,6 +10,7 @@ import {
 	TLHighlightShapeProps,
 	TLResizeInfo,
 	VecLike,
+	getColorValue,
 	highlightShapeMigrations,
 	highlightShapeProps,
 	last,
@@ -51,9 +52,6 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 		overlayOpacity: 0.35,
 	}
 
-	override canTabTo() {
-		return false
-	}
 	override hideResizeHandles(shape: TLHighlightShape) {
 		return getIsDot(shape)
 	}
@@ -292,7 +290,12 @@ function HighlightRenderer({
 			: getShapeDot(shape.props.segments[0].points[0])
 
 	const colorSpace = useColorSpace()
-	const color = theme[shape.props.color].highlight[colorSpace]
+
+	const color = getColorValue(
+		theme,
+		shape.props.color,
+		colorSpace === 'p3' ? 'highlightP3' : 'highlightSrgb'
+	)
 
 	return (
 		<path

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 {
@@ -314,9 +317,9 @@ const ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape })
 					overflow: 'hidden',
 					width: shape.props.w,
 					height: shape.props.h,
-					color: 'var(--color-text-3)',
-					backgroundColor: 'var(--color-low)',
-					border: '1px solid var(--color-low-border)',
+					color: 'var(--tl-color-text-3)',
+					backgroundColor: 'var(--tl-color-low)',
+					border: '1px solid var(--tl-color-low-border)',
 				}}
 			>
 				<div

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -7,6 +7,7 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TL } from '../../../test/test-jsx'
 
@@ -16,7 +17,7 @@ mockUniqueId(() => 'id' + nextId++)
 let editor: TestEditor
 const id = createShapeId('line1')
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -338,12 +339,12 @@ describe('Misc', () => {
 
 		expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
 
 		expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
 	})
 

package/src/lib/shapes/line/LineShapeUtil.tsx

@@ -12,6 +12,7 @@ import {
 	WeakCache,
 	ZERO_INDEX_KEY,
 	assert,
+	getColorValue,
 	getIndexAbove,
 	getIndexBetween,
 	getIndices,
@@ -35,9 +36,6 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	static override props = lineShapeProps
 	static override migrations = lineShapeMigrations
 
-	override canTabTo() {
-		return false
-	}
 	override hideResizeHandles() {
 		return true
 	}
@@ -148,8 +146,6 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	}
 
 	override onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>) {
-		// we should only ever be dragging vertex handles
-		if (handle.type !== 'vertex') return
 		const newPoint = maybeSnapToGrid(new Vec(handle.x, handle.y), this.editor)
 		return {
 			...shape,
@@ -163,6 +159,25 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 		}
 	}
 
+	override onHandleDragStart(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>) {
+		// For line shapes, if we're dragging a "create" handle, then
+		// create a new vertex handle at that point; and make this handle
+		// the handle that we're dragging.
+		if (handle.type === 'create') {
+			return {
+				...shape,
+				props: {
+					...shape.props,
+					points: {
+						...shape.props.points,
+						[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
+					},
+				},
+			}
+		}
+		return
+	}
+
 	component(shape: TLLineShape) {
 		return (
 			<SVGContainer style={{ minWidth: 50, minHeight: 50 }}>
@@ -332,6 +347,10 @@ function LineShapeSvg({
 		strokeWidth,
 		forceSolid,
 		randomSeed: shape.id,
-		props: { transform: `scale(${scale})`, stroke: theme[color].solid, fill: 'none' },
+		props: {
+			transform: `scale(${scale})`,
+			stroke: getColorValue(theme, color, 'solid'),
+			fill: 'none',
+		},
 	})
 }

package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Misc resizes: line shape after resize 1`] = `
+exports[`Misc > resizes > line shape after resize 1`] = `
 {
   "id": "shape:line1",
   "index": "a1",

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -17,6 +17,7 @@ import {
 	Vec,
 	WeakCache,
 	exhaustiveSwitchError,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -288,7 +289,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					style={{
 						width: nw,
 						height: nh,
-						backgroundColor: theme[color].note.fill,
+						backgroundColor: getColorValue(theme, color, 'noteFill'),
 						borderBottom: hideShadows
 							? isDarkMode
 								? `${2 * scale}px solid rgb(20, 20, 20)`
@@ -308,7 +309,11 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isSelected}
-							labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill}
+							labelColor={
+								labelColor === 'black'
+									? getColorValue(theme, color, 'noteText')
+									: getColorValue(theme, labelColor, 'fill')
+							}
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
@@ -343,9 +348,10 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 				align={shape.props.align}
 				verticalAlign={shape.props.verticalAlign}
 				richText={shape.props.richText}
-				labelColor={theme[shape.props.color].note.text}
+				labelColor={getColorValue(theme, shape.props.color, 'noteText')}
 				bounds={bounds}
 				padding={LABEL_PADDING}
+				showTextOutline={false}
 			/>
 		)
 
@@ -356,7 +362,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					rx={1}
 					width={NOTE_SIZE}
 					height={bounds.h}
-					fill={theme[shape.props.color].note.fill}
+					fill={getColorValue(theme, shape.props.color, 'noteFill')}
 				/>
 				{textLabel}
 			</>

package/src/lib/shapes/shared/PathBuilder.test.tsx

@@ -138,7 +138,7 @@ describe('PathBuilder', () => {
 				.toGeometry()
 
 			expect(geometry?.toSimpleSvgPath()).toMatchInlineSnapshot(
-				`"M0,0L100,100L100,0L91.23532468849007,-7.455843959357096L81.64709960511827,-13.25483368860933L71.44121219537817,-17.39696918901332L60.82354990476352,-19.882250461825734L50.000000178767834,-20.71067750830319L39.17645046288481,-19.882250329702327L28.558788202608024,-17.396968927279783L18.35290084343114,-13.254833302292194L8.764675830847777,-7.455843455996203L6.103515630684342e-7,6.103515559630068e-7L-7.4558434559962,8.764675830847771L-13.254833302292194,18.35290084343114L-17.396968927279772,28.55878820260801L-19.882250329702327,39.17645046288479L-20.710677508303192,50.00000017876782L-19.88225046182574,60.823549904763496L-17.39696918901333,71.44121219537817L-13.254833688609331,81.64709960511824L-7.455843959357106,91.23532468849007L-1.4210854715202004e-14,99.99999999999999L0,0Z"`
+				`"M0,0L100,100L100,0L84.92197106154207,-11.50593202657044L67.93757691512266,-18.409491194065584L50.000000178767834,-20.71067750830319L32.06242347050369,-18.409490975101022L15.078029408356239,-11.505931600276853L6.103515630684342e-7,6.103515559630068e-7L-11.505931600276849,15.078029408356231L-18.409490975101022,32.062423470503674L-20.710677508303192,50.00000017876782L-18.409491194065588,67.93757691512262L-11.50593202657045,84.92197106154204L-1.4210854715202004e-14,99.99999999999999L0,0Z"`
 			)
 		})
 	})

package/src/lib/shapes/shared/PathBuilder.tsx

@@ -10,6 +10,7 @@ import {
 	Geometry2dFilters,
 	Geometry2dOptions,
 	getPerfectDashProps,
+	getVerticesCountForArcLength,
 	Group2d,
 	modulate,
 	PerfectDashTerminal,
@@ -121,6 +122,7 @@ export interface CubicBezierToPathBuilderCommand extends PathBuilderCommandBase
 	type: 'cubic'
 	cp1: VecModel
 	cp2: VecModel
+	resolution?: number
 }
 
 /** @internal */
@@ -317,8 +319,17 @@ export class PathBuilder {
 		// Calculate the sweep angle
 		const sweepAngle = endAngle - startAngle
 
+		// Calculate the approximate arc length. General ellipse arc length is expensive - there's
+		// no closed form solution, so we have to do iterative numerical approximation. As we only
+		// use this to control the resolution of later approximations, let's cheat and just use the
+		// circular arc length with the largest radius:
+		const approximateArcLength = Math.max(rx1, ry1) * Math.abs(sweepAngle)
+
 		// Approximate the arc using cubic bezier curves
 		const numSegments = Math.min(4, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 2)))
+		const resolutionPerSegment = Math.ceil(
+			getVerticesCountForArcLength(approximateArcLength) / numSegments
+		)
 		const anglePerSegment = sweepAngle / numSegments
 
 		// Helper function to compute point on ellipse
@@ -364,7 +375,16 @@ export class PathBuilder {
 			const cp2y = end.y - handleScale * d2.y
 
 			const bezierOpts = i === 0 ? opts : { ...opts, mergeWithPrevious: true }
-			this.cubicBezierTo(end.x, end.y, cp1x, cp1y, cp2x, cp2y, bezierOpts)
+			this.cubicBezierToWithResolution(
+				end.x,
+				end.y,
+				cp1x,
+				cp1y,
+				cp2x,
+				cp2y,
+				bezierOpts,
+				resolutionPerSegment
+			)
 		}
 
 		return this
@@ -378,6 +398,18 @@ export class PathBuilder {
 		cp2X: number,
 		cp2Y: number,
 		opts?: PathBuilderCommandOpts
+	) {
+		return this.cubicBezierToWithResolution(x, y, cp1X, cp1Y, cp2X, cp2Y, opts)
+	}
+	private cubicBezierToWithResolution(
+		x: number,
+		y: number,
+		cp1X: number,
+		cp1Y: number,
+		cp2X: number,
+		cp2Y: number,
+		opts?: PathBuilderCommandOpts,
+		resolution?: number
 	) {
 		this.assertHasMoveTo()
 		this.commands.push({
@@ -388,6 +420,7 @@ export class PathBuilder {
 			cp2: { x: cp2X, y: cp2Y },
 			isClose: false,
 			opts,
+			resolution,
 		})
 		return this
 	}
@@ -972,6 +1005,7 @@ export class PathBuilderGeometry2d extends Geometry2d {
 							cp1: Vec.From(command.cp1),
 							cp2: Vec.From(command.cp2),
 							end: Vec.From(command),
+							resolution: command.resolution,
 						})
 					)
 					break

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -81,6 +81,7 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}
+			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -128,6 +128,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
+			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}
@@ -193,6 +194,7 @@ export interface RichTextSVGProps {
 	wrap?: boolean
 	labelColor: string
 	padding: number
+	showTextOutline?: boolean
 }
 
 /**
@@ -210,6 +212,7 @@ export function RichTextSVG({
 	wrap,
 	labelColor,
 	padding,
+	showTextOutline = true,
 }: RichTextSVGProps) {
 	const editor = useEditor()
 	const html = renderHtmlFromRichText(editor, richText)
@@ -245,6 +248,7 @@ export function RichTextSVG({
 		wordWrap: 'break-word' as const,
 		overflowWrap: 'break-word' as const,
 		whiteSpace: 'pre-wrap',
+		textShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',
 	}
 
 	return (

package/src/lib/shapes/shared/ShapeFill.tsx

@@ -1,4 +1,5 @@
 import {
+	getColorValue,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	TLDefaultFillStyle,
@@ -29,13 +30,13 @@ export const ShapeFill = React.memo(function ShapeFill({
 			return null
 		}
 		case 'solid': {
-			return <path fill={theme[color].semi} d={d} />
+			return <path fill={getColorValue(theme, color, 'semi')} d={d} />
 		}
 		case 'semi': {
 			return <path fill={theme.solid} d={d} />
 		}
 		case 'fill': {
-			return <path fill={theme[color].fill} d={d} />
+			return <path fill={getColorValue(theme, color, 'fill')} d={d} />
 		}
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
@@ -53,13 +54,13 @@ export function PatternFill({ d, color, theme }: ShapeFillProps) {
 
 	return (
 		<>
-			<path fill={theme[color].pattern} d={d} />
+			<path fill={getColorValue(theme, color, 'pattern')} d={d} />
 			<path
 				fill={
 					svgExport
 						? `url(#${getHashPatternZoomName(1, theme.id)})`
 						: teenyTiny
-							? theme[color].semi
+							? getColorValue(theme, color, 'semi')
 							: `url(#${getHashPatternZoomName(zoomLevel, theme.id)})`
 				}
 				d={d}

package/src/lib/shapes/shared/SvgTextLabel.tsx

@@ -21,6 +21,7 @@ export function SvgTextLabel({
 	bounds,
 	padding = 16,
 	stroke = true,
+	showTextOutline = true,
 }: {
 	fontSize: number
 	font: TLDefaultFontStyle
@@ -33,6 +34,7 @@ export function SvgTextLabel({
 	bounds: Box
 	padding?: number
 	stroke?: boolean
+	showTextOutline?: boolean
 }) {
 	const editor = useEditor()
 	const theme = useDefaultColorTheme()
@@ -68,10 +70,10 @@ export function SvgTextLabel({
 	const mainSpans = createTextJsxFromSpans(editor, spans, opts)
 
 	let outlineSpans = null
-	if (stroke) {
+	if (showTextOutline && stroke) {
 		opts.fill = theme.background
 		opts.stroke = theme.background
-		opts.strokeWidth = 2
+		opts.strokeWidth = 3
 		outlineSpans = createTextJsxFromSpans(editor, spans, opts)
 	}
 

package/src/lib/shapes/shared/freehand/svg.ts

@@ -6,6 +6,8 @@ import { StrokePoint } from './types'
  *
  * @param points - The stroke points returned from perfect-freehand
  * @param closed - Whether the shape is closed
+ *
+ * @public
  */
 export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
 	const len = points.length

package/src/lib/shapes/shared/usePrefersReducedMotion.tsx

@@ -1,10 +1,20 @@
+import { useMaybeEditor, useValue } from '@tldraw/editor'
 import { useEffect, useState } from 'react'
 
 /** @public */
 export function usePrefersReducedMotion() {
+	const editor = useMaybeEditor()
+	const animationSpeed = useValue('animationSpeed', () => editor?.user.getAnimationSpeed(), [
+		editor,
+	])
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
 
 	useEffect(() => {
+		if (animationSpeed !== undefined) {
+			setPrefersReducedMotion(animationSpeed === 0 ? true : false)
+			return
+		}
+
 		if (typeof window === 'undefined' || !('matchMedia' in window)) return
 		const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
 		const handler = () => {
@@ -13,7 +23,7 @@ export function usePrefersReducedMotion() {
 		handler()
 		mql.addEventListener('change', handler)
 		return () => mql.removeEventListener('change', handler)
-	}, [])
+	}, [animationSpeed])
 
 	return prefersReducedMotion
 }

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -1,9 +1,10 @@
 import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TextShapeTool } from './TextShapeTool'
 
 let editor: TestEditor
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -115,7 +116,7 @@ describe('When in the pointing state', () => {
 
 		// Go back to start and wait a little to satisfy the time requirement
 		editor.pointerMove(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		// y axis doesn't matter
 		editor.pointerMove(0, 100)
@@ -187,7 +188,7 @@ describe('When resizing', () => {
 	it('bails on escape while resizing and returns to text.idle', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.cancel()
@@ -198,7 +199,7 @@ describe('When resizing', () => {
 	it('does not bails on interrupt while resizing', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.interrupt()
@@ -210,7 +211,7 @@ describe('When resizing', () => {
 		const x = 0
 		const y = 0
 		editor.pointerDown(x, y)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(x + 100, y + 100)
 		expect(editor.getCurrentPageShapes()[0]).toMatchObject({
 			x,