tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

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

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

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

@@ -11,7 +11,6 @@ import {
 	TLTextShape,
 	Vec,
 	createComputedCache,
-	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -136,7 +135,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				align={textAlign}
 				verticalAlign="middle"
 				richText={richText}
-				labelColor={getColorValue(theme, color, 'solid')}
+				labelColor={theme[color].solid}
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
@@ -172,7 +171,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				align={shape.props.textAlign}
 				verticalAlign="middle"
 				richText={shape.props.richText}
-				labelColor={getColorValue(theme, shape.props.color, 'solid')}
+				labelColor={theme[shape.props.color].solid}
 				bounds={exportBounds}
 				padding={0}
 			/>
@@ -304,26 +303,33 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 }
 
 function getTextSize(editor: Editor, props: TLTextShape['props']) {
-	const { font, richText, size, w } = props
+	const { font, richText, autoSize, size, w } = props
 
-	const minWidth = 16
+	const minWidth = autoSize ? 16 : Math.max(16, w)
 	const fontSize = FONT_SIZES[size]
 
-	const maybeFixedWidth = props.autoSize ? null : Math.max(minWidth, Math.floor(w))
+	const cw = autoSize
+		? null
+		: // `measureText` floors the number so we need to do the same here to avoid issues.
+			Math.floor(Math.max(minWidth, w))
 
 	const html = renderHtmlFromRichTextForMeasurement(editor, richText)
 	const result = editor.textMeasure.measureHtml(html, {
 		...TEXT_PROPS,
 		fontFamily: FONT_FAMILIES[font],
 		fontSize: fontSize,
-		maxWidth: maybeFixedWidth,
+		maxWidth: cw,
 	})
 
 	// If we're autosizing the measureText will essentially `Math.floor`
 	// the numbers so `19` rather than `19.3`, this means we must +1 to
 	// whatever we get to avoid wrapping.
+	if (autoSize) {
+		result.w += 1
+	}
+
 	return {
-		width: maybeFixedWidth ?? Math.max(minWidth, result.w + 1),
+		width: Math.max(minWidth, result.w),
 		height: Math.max(fontSize, result.h),
 	}
 }

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

@@ -142,9 +142,9 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape })
 			<HTMLContainer
 				id={shape.id}
 				style={{
-					color: 'var(--tl-color-text-3)',
-					backgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',
-					border: asset ? 'none' : '1px solid var(--tl-color-low-border)',
+					color: 'var(--color-text-3)',
+					backgroundColor: asset ? 'transparent' : 'var(--color-low)',
+					border: asset ? 'none' : '1px solid var(--color-low-border)',
 				}}
 			>
 				<div className="tl-counter-scaled">

package/src/lib/styles.tsx

@@ -1,9 +1,7 @@
-import { TLUiIconJsx } from './ui/components/primitives/TldrawUiIcon'
-
 /** @public */
 export type StyleValuesForUi<T> = readonly {
 	readonly value: T
-	readonly icon: string | TLUiIconJsx
+	readonly icon: string
 }[]
 
 // todo: default styles prop?

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -4,7 +4,6 @@ import {
 	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
-	isAccelKey,
 	pointInPolygon,
 } from '@tldraw/editor'
 
@@ -16,15 +15,7 @@ export class Erasing extends StateNode {
 	private markId = ''
 	private excludedShapeIds = new Set<TLShapeId>()
 
-	_isHoldingAccelKey = false
-	_firstErasingShapeId: TLShapeId | null = null
-	_erasingShapeIds: TLShapeId[] = []
-
 	override onEnter(info: TLPointerEventInfo) {
-		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
-		this._firstErasingShapeId = this.editor.getErasingShapeIds()[0] // the first one should be the first one we hit... is it?
-		this._erasingShapeIds = this.editor.getErasingShapeIds()
-
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
@@ -85,16 +76,6 @@ export class Erasing extends StateNode {
 		this.complete()
 	}
 
-	override onKeyUp() {
-		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
-		this.update()
-	}
-
-	override onKeyDown() {
-		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
-		this.update()
-	}
-
 	update() {
 		const { editor, excludedShapeIds } = this
 		const erasingShapeIds = editor.getErasingShapeIds()
@@ -106,7 +87,6 @@ export class Erasing extends StateNode {
 
 		this.pushPointToScribble()
 
-		// Otherwise, erasing shapes are all the shapes that were hit before plus any new shapes that are hit
 		const erasing = new Set<TLShapeId>(erasingShapeIds)
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
@@ -141,31 +121,18 @@ export class Erasing extends StateNode {
 			if (geometry.hitTestLineSegment(A, B, minDist)) {
 				erasing.add(editor.getOutermostSelectableShape(shape).id)
 			}
-
-			this._erasingShapeIds = [...erasing]
-		}
-
-		// If the user is holding the meta / ctrl key, we should only erase the first shape we hit
-		if (this._isHoldingAccelKey && this._firstErasingShapeId) {
-			const erasingShapeId = this._firstErasingShapeId
-			if (erasingShapeId && this.editor.getShape(erasingShapeId)) {
-				editor.setErasingShapes([erasingShapeId])
-			}
-			return
 		}
 
 		// Remove the hit shapes, except if they're in the list of excluded shapes
 		// (these excluded shapes will be any frames or groups the pointer was inside of
 		// when the user started erasing)
-		this.editor.setErasingShapes(this._erasingShapeIds.filter((id) => !excludedShapeIds.has(id)))
+		this.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)))
 	}
 
 	complete() {
 		const { editor } = this
 		editor.deleteShapes(editor.getCurrentPageState().erasingShapeIds)
 		this.parent.transition('idle')
-		this._erasingShapeIds = []
-		this._firstErasingShapeId = null
 	}
 
 	cancel() {

package/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -1,5 +1,4 @@
 import {
-	isAccelKey,
 	StateNode,
 	TLFrameShape,
 	TLGroupShape,
@@ -10,11 +9,7 @@ import {
 export class Pointing extends StateNode {
 	static override id = 'pointing'
 
-	_isHoldingAccelKey = false
-
 	override onEnter() {
-		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
-
 		const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapesSorted = this.editor.getCurrentPageRenderingShapesSorted()
 		const {
@@ -50,25 +45,12 @@ export class Pointing extends StateNode {
 				}
 
 				erasing.add(hitShape.id)
-
-				// If the user is holding the meta / ctrl key, stop after the first shape
-				if (this._isHoldingAccelKey) {
-					break
-				}
 			}
 		}
 
 		this.editor.setErasingShapes([...erasing])
 	}
 
-	override onKeyUp() {
-		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
-	}
-
-	override onKeyDown() {
-		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
-	}
-
 	override onLongPress(info: TLPointerEventInfo) {
 		this.startErasing(info)
 	}
@@ -80,8 +62,6 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this._isHoldingAccelKey) return
-
 		if (this.editor.inputs.isDragging) {
 			this.startErasing(info)
 		}

package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts

@@ -9,18 +9,11 @@ export class PointingCrop extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
-			this.startDragging(info)
+			this.editor.setCurrentTool('select.crop.translating_crop', info)
 		}
 	}
-	override onLongPress(info: TLPointerEventInfo) {
-		this.startDragging(info)
-	}
 
 	override onPointerUp(info: TLPointerEventInfo) {
 		this.editor.setCurrentTool('select.crop.idle', info)
 	}
-
-	startDragging(info: TLPointerEventInfo) {
-		this.editor.setCurrentTool('select.crop.translating_crop', info)
-	}
 }

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -1,5 +1,4 @@
 import {
-	Mat,
 	StateNode,
 	TLArrowShape,
 	TLHandle,
@@ -27,20 +26,20 @@ export type DraggingHandleInfo = TLPointerEventInfo & {
 export class DraggingHandle extends StateNode {
 	static override id = 'dragging_handle'
 
-	shapeId!: TLShapeId
-	initialHandle!: TLHandle
-	initialAdjacentHandle!: TLHandle | null
-	initialPagePoint!: Vec
+	shapeId = '' as TLShapeId
+	initialHandle = {} as TLHandle
+	initialAdjacentHandle = null as TLHandle | null
+	initialPagePoint = {} as Vec
 
-	markId!: string
-	initialPageTransform!: Mat
-	initialPageRotation!: number
+	markId = ''
+	initialPageTransform: any
+	initialPageRotation: any
 
-	info!: DraggingHandleInfo
+	info = {} as DraggingHandleInfo
 
 	isPrecise = false
-	isPreciseId: TLShapeId | null = null
-	pointingId: TLShapeId | null = null
+	isPreciseId = null as TLShapeId | null
+	pointingId = null as TLShapeId | null
 
 	override onEnter(info: DraggingHandleInfo) {
 		const { shape, isCreating, creatingMarkId, handle } = info
@@ -67,6 +66,26 @@ export class DraggingHandle extends StateNode {
 
 		this.initialHandle = structuredClone(handle)
 
+		if (this.editor.isShapeOfType<TLLineShape>(shape, 'line')) {
+			// 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 (this.initialHandle.type === 'create') {
+				this.editor.updateShape({
+					...shape,
+					props: {
+						points: {
+							...shape.props.points,
+							[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
+						},
+					},
+				})
+				const handlesAfter = this.editor.getShapeHandles(shape)!
+				const handleAfter = handlesAfter.find((h) => h.index === handle.index)!
+				this.initialHandle = structuredClone(handleAfter)
+			}
+		}
+
 		this.initialPageTransform = this.editor.getShapePageTransform(shape)!
 		this.initialPageRotation = this.initialPageTransform.rotation()
 		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
@@ -116,19 +135,6 @@ export class DraggingHandle extends StateNode {
 		}
 		// -->
 
-		// Call onHandleDragStart callback
-		const handleDragInfo = {
-			handle: this.initialHandle,
-			isPrecise: this.isPrecise,
-			isCreatingShape: !!this.info.isCreating,
-			initial: shape,
-		}
-		const util = this.editor.getShapeUtil(shape)
-		const startChanges = util.onHandleDragStart?.(shape, handleDragInfo)
-		if (startChanges) {
-			this.editor.updateShapes([{ ...startChanges, id: shape.id, type: shape.type }])
-		}
-
 		this.update()
 
 		this.editor.select(this.shapeId)
@@ -198,22 +204,6 @@ export class DraggingHandle extends StateNode {
 		this.editor.snaps.clearIndicators()
 		kickoutOccludedShapes(this.editor, [this.shapeId])
 
-		// Call onHandleDragEnd callback before state transitions
-		const shape = this.editor.getShape(this.shapeId)
-		if (shape) {
-			const util = this.editor.getShapeUtil(shape)
-			const handleDragInfo = {
-				handle: this.initialHandle,
-				isPrecise: this.isPrecise,
-				isCreatingShape: !!this.info.isCreating,
-				initial: this.info.shape,
-			}
-			const endChanges = util.onHandleDragEnd?.(shape, handleDragInfo)
-			if (endChanges) {
-				this.editor.updateShapes([{ ...endChanges, id: shape.id, type: shape.type }])
-			}
-		}
-
 		const { onInteractionEnd } = this.info
 		if (this.editor.getInstanceState().isToolLocked && onInteractionEnd) {
 			// Return to the tool that was active before this one,
@@ -226,19 +216,6 @@ export class DraggingHandle extends StateNode {
 	}
 
 	private cancel() {
-		// Call onHandleDragCancel callback before bailing to mark
-		const shape = this.editor.getShape(this.shapeId)
-		if (shape) {
-			const util = this.editor.getShapeUtil(shape)
-			const handleDragInfo = {
-				handle: this.initialHandle,
-				isPrecise: this.isPrecise,
-				isCreatingShape: !!this.info.isCreating,
-				initial: this.info.shape,
-			}
-			util.onHandleDragCancel?.(shape, handleDragInfo)
-		}
-
 		this.editor.bailToMark(this.markId)
 		this.editor.snaps.clearIndicators()
 
@@ -307,7 +284,6 @@ export class DraggingHandle extends StateNode {
 		const changes = util.onHandleDrag?.(shape, {
 			handle: nextHandle,
 			isPrecise: this.isPrecise || altKey,
-			isCreatingShape: !!this.info.isCreating,
 			initial: initial,
 		})
 

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

@@ -1,7 +1,9 @@
 import {
 	Editor,
+	Group2d,
 	StateNode,
 	TLAdjacentDirection,
+	TLArrowShape,
 	TLClickEventInfo,
 	TLGroupShape,
 	TLKeyboardEventInfo,
@@ -16,7 +18,6 @@ import {
 	pointInPolygon,
 	toRichText,
 } from '@tldraw/editor'
-import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
@@ -97,6 +98,12 @@ export class Idle extends StateNode {
 			case 'shape': {
 				const { shape } = info
 
+				if (this.isOverArrowLabelTest(shape)) {
+					// We're moving the label on a shape.
+					this.parent.transition('pointing_arrow_label', info)
+					break
+				}
+
 				if (this.editor.isShapeOrAncestorLocked(shape)) {
 					this.parent.transition('pointing_canvas', info)
 					break
@@ -588,7 +595,22 @@ export class Idle extends StateNode {
 	isOverArrowLabelTest(shape: TLShape | undefined) {
 		if (!shape) return false
 
-		return isOverArrowLabel(this.editor, shape)
+		// todo: Extract into general hit test for arrows
+		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
+			const pointInShapeSpace = this.editor.getPointInShapeSpace(
+				shape,
+				this.editor.inputs.currentPagePoint
+			)
+			// How should we handle multiple labels? Do shapes ever have multiple labels?
+			const labelGeometry = this.editor.getShapeGeometry<Group2d>(shape).children[1]
+			// Knowing what we know about arrows... if the shape has no text in its label,
+			// then the label geometry should not be there.
+			if (labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)) {
+				return true
+			}
+		}
+
+		return false
 	}
 
 	handleDoubleClickOnCanvas(info: TLClickEventInfo) {

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

@@ -1,5 +1,4 @@
 import { StateNode, TLPointerEventInfo, TLShape } from '@tldraw/editor'
-import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 
 export class PointingShape extends StateNode {
@@ -211,12 +210,6 @@ export class PointingShape extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
-			if (isOverArrowLabel(this.editor, this.hitShape)) {
-				// We're moving the label on a shape.
-				this.parent.transition('pointing_arrow_label', { ...info, shape: this.hitShape })
-				return
-			}
-
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {

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

@@ -122,19 +122,8 @@ export class Resizing extends StateNode {
 	}
 
 	private cancel() {
-		// Call onResizeCancel callback before resetting
-		const { shapeSnapshots } = this.snapshot
-
-		shapeSnapshots.forEach(({ shape }) => {
-			const current = this.editor.getShape(shape.id)
-			if (current) {
-				const util = this.editor.getShapeUtil(shape)
-				util.onResizeCancel?.(shape, current)
-			}
-		})
-
+		// Restore initial models
 		this.editor.bailToMark(this.markId)
-
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
 		} else {

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

@@ -109,17 +109,6 @@ export class Rotating extends StateNode {
 	}
 
 	private cancel() {
-		// Call onRotateCancel callback before bailing to mark
-		const { shapeSnapshots } = this.snapshot
-
-		shapeSnapshots.forEach(({ shape }) => {
-			const current = this.editor.getShape(shape.id)
-			if (current) {
-				const util = this.editor.getShapeUtil(shape)
-				util.onRotateCancel?.(shape, current)
-			}
-		})
-
 		this.editor.bailToMark(this.markId)
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)

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

@@ -28,6 +28,7 @@ export type TranslatingInfo = TLPointerEventInfo & {
 	isCreating?: boolean
 	creatingMarkId?: string
 	onCreate?(): void
+	didStartInPit?: boolean
 	onInteractionEnd?: string
 }
 
@@ -202,17 +203,6 @@ export class Translating extends StateNode {
 	}
 
 	private cancel() {
-		// Call onTranslateCancel callback before resetting
-		const { movingShapes } = this.snapshot
-
-		movingShapes.forEach((shape) => {
-			const current = this.editor.getShape(shape.id)
-			if (current) {
-				const util = this.editor.getShapeUtil(shape)
-				util.onTranslateCancel?.(shape, current)
-			}
-		})
-
 		this.reset()
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd)

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -1,6 +1,5 @@
 import { Editor, TLShape } from '@tldraw/editor'
 
-/** @public */
 export function getHitShapeOnCanvasPointerDown(
 	editor: Editor,
 	hitLabels = false

package/src/lib/ui/TldrawUi.tsx

@@ -1,12 +1,12 @@
 import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
-import React, { ReactNode, useMemo, useRef, useState } from 'react'
+import React, { ReactNode, useRef, useState } from 'react'
 import { TLUiAssetUrlOverrides } from './assetUrls'
 import { SkipToMainContent } from './components/A11y'
 import { FollowingIndicator } from './components/FollowingIndicator'
 import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'
-import { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'
+import { PORTRAIT_BREAKPOINT } from './constants'
 import {
 	TLUiContextProviderProps,
 	TldrawUiContextProvider,
@@ -160,19 +160,6 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 
 	const { 'toggle-focus-mode': toggleFocus } = useActions()
 
-	const { breakpointsAbove, breakpointsBelow } = useMemo(() => {
-		const breakpointsAbove = []
-		const breakpointsBelow = []
-		for (let bp = 0; bp < PORTRAIT_BREAKPOINTS.length; bp++) {
-			if (bp <= breakpoint) {
-				breakpointsAbove.push(bp)
-			} else {
-				breakpointsBelow.push(bp)
-			}
-		}
-		return { breakpointsAbove, breakpointsBelow }
-	}, [breakpoint])
-
 	return (
 		<div
 			className={classNames('tlui-layout', {
@@ -182,8 +169,6 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 			// But when the virtual keyboard is closing we want to wait a bit before showing it again.
 			data-iseditinganything={hideToolbarWhileEditing}
 			data-breakpoint={breakpoint}
-			data-breakpoints-above={breakpointsAbove.join(' ')}
-			data-breakpoints-below={breakpointsBelow.join(' ')}
 		>
 			<SkipToMainContent />
 			{isFocusMode ? (