tldraw 4.3.0-canary.d8da2a99f394 → 4.3.0-canary.da3162650c27

package/src/test/test-jsx.tsx

@@ -5,8 +5,7 @@ import {
 	TLBinding,
 	TLBindingCreate,
 	TLBindingId,
-	TLDefaultBinding,
-	TLDefaultShape,
+	TLShape,
 	TLShapeId,
 	TLShapePartial,
 	ZERO_INDEX_KEY,
@@ -20,9 +19,13 @@ import {
 } from '@tldraw/editor'
 import React, { Fragment } from 'react'
 
+// Re-export test helpers from their new location
+export { base64ToPoints, createDrawSegments, pointsToBase64 } from '../lib/utils/test-helpers'
+
 const shapeTypeSymbol = Symbol('shapeJsx')
 const assetTypeSymbol = Symbol('assetJsx')
 const bindingTypeSymbol = Symbol('bindingJsx')
+
 interface CommonShapeProps {
 	x?: number
 	y?: number
@@ -34,7 +37,6 @@ interface CommonShapeProps {
 	opacity?: number
 }
 
-type ShapeByType<Type extends TLDefaultShape['type']> = Extract<TLDefaultShape, { type: Type }>
 type FormatShapeProps<Props extends object> = {
 	[K in keyof Props]?: Props[K] extends TLAssetId
 		? TLAssetId | React.JSX.Element
@@ -42,24 +44,39 @@ type FormatShapeProps<Props extends object> = {
 			? TLAssetId | React.JSX.Element | null
 			: Props[K]
 }
-type PropsForShape<Type extends string> = Type extends TLDefaultShape['type']
-	? CommonShapeProps & FormatShapeProps<ShapeByType<Type>['props']>
-	: CommonShapeProps & Record<string, unknown>
+type PropsForShape<Type extends TLShape['type']> = CommonShapeProps &
+	FormatShapeProps<TLShape<Type>['props']>
 
 type AssetByType<Type extends TLAsset['type']> = Extract<TLAsset, { type: Type }>
 type PropsForAsset<Type extends string> = Type extends TLAsset['type']
 	? Partial<AssetByType<Type>['props']>
 	: Record<string, unknown>
 
-interface CommonBindingProps {
+interface BindingReactConnections {
 	from?: string | TLShapeId
 	to: string | TLShapeId
 }
 
-type BindingByType<Type extends TLBinding['type']> = Extract<TLBinding, { type: Type }>
-type PropsForBinding<Type extends string> = Type extends TLBinding['type']
-	? CommonBindingProps & Partial<BindingByType<Type>['props']>
-	: CommonBindingProps & Record<string, unknown>
+interface CommonBindingReactProps extends BindingReactConnections {
+	ref?: string
+	id?: TLBindingId
+}
+
+type ReactPropsForBinding<Type extends TLBinding['type']> = CommonBindingReactProps &
+	Partial<TLBinding<Type>['props']>
+
+type BindingToCreate = TLBinding extends infer E
+	? E extends TLBinding
+		? {
+				type: E['type']
+				props: Partial<TLBinding<E['type']>['props']>
+				id: TLBindingId | undefined
+				parentId: TLShapeId | undefined
+				ref: string | undefined
+				connections: BindingReactConnections
+			}
+		: never
+	: never
 
 const createElement = (
 	type: typeof shapeTypeSymbol | typeof assetTypeSymbol | typeof bindingTypeSymbol,
@@ -90,10 +107,9 @@ const tlBinding = new Proxy(
 			return createElement(bindingTypeSymbol, key as string)
 		},
 	}
-) as { [K in TLDefaultBinding['type']]: (props: PropsForBinding<K>) => null } & Record<
-	string,
-	(props: PropsForBinding<string>) => null
->
+) as {
+	[K in TLBinding['type']]: (props: ReactPropsForBinding<K>) => null
+}
 
 /**
  * TL - jsx helpers for creating tldraw shapes in test cases
@@ -112,8 +128,8 @@ export const TL = new Proxy(
 		},
 	}
 ) as { asset: typeof tlAsset; binding: typeof tlBinding } & {
-	[K in TLDefaultShape['type']]: (props: PropsForShape<K>) => null
-} & Record<string, (props: PropsForShape<string>) => null>
+	[K in TLShape['type']]: (props: PropsForShape<K>) => null
+}
 
 export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Element>, idPrefix = '') {
 	const ids = { bindings: {} } as Record<string, TLShapeId> & {
@@ -122,12 +138,7 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 	const currentPageShapes: Array<TLShapePartial> = []
 	const assets: Array<TLAsset> = []
 
-	const bindingsToCreate: Array<{
-		type: string
-		props: Record<string, unknown>
-		parentId: TLShapeId | undefined
-		ref: string | undefined
-	}> = []
+	const bindingsToCreate: Array<BindingToCreate> = []
 
 	function addChildren(
 		children: React.JSX.Element | Array<React.JSX.Element>,
@@ -152,10 +163,21 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 			}
 
 			if (el.type[bindingTypeSymbol]) {
-				const bindingType = (el.type as any)[bindingTypeSymbol] as string
-				const ref = ((el as any).ref || el.props.ref) as string | undefined
-				assert(ref === undefined || typeof ref === 'string', 'ref must be string or undefined')
-				bindingsToCreate.push({ type: bindingType, props: el.props, parentId, ref })
+				const bindingType = (el.type as any)[bindingTypeSymbol] as TLBinding['type']
+				const { id, from, to, ref, ...props } = el.props
+				const bindingRef: unknown = (el as any).ref || ref
+				assert(
+					bindingRef === undefined || typeof bindingRef === 'string',
+					'ref must be string or undefined'
+				)
+				bindingsToCreate.push({
+					type: bindingType,
+					props,
+					id,
+					parentId,
+					ref: bindingRef,
+					connections: { from, to },
+				})
 			} else {
 				const shapeType = (el.type as any)[shapeTypeSymbol] as string
 				if (!shapeType) {
@@ -239,55 +261,48 @@ export function shapesFromJsx(shapes: React.JSX.Element | Array<React.JSX.Elemen
 	addChildren(shapes)
 
 	const bindings: TLBindingCreate[] = []
-	for (const binding of bindingsToCreate) {
+	for (const { id, parentId, ref, connections, ...binding } of bindingsToCreate) {
 		let fromId: TLShapeId, toId: TLShapeId
-		if (binding.props.from) {
-			assert(typeof binding.props.from === 'string', 'from must be a ref string or a shape id')
-			if (isShapeId(binding.props.from)) {
-				fromId = binding.props.from
+		if (connections.from) {
+			assert(typeof connections.from === 'string', 'from must be a ref string or a shape id')
+			if (isShapeId(connections.from)) {
+				fromId = connections.from
 			} else {
-				assert(ids[binding.props.from], `Ref not found: ${binding.props.from}`)
-				fromId = ids[binding.props.from]
+				assert(ids[connections.from], `Ref not found: ${connections.from}`)
+				fromId = ids[connections.from]
 			}
-		} else if (binding.parentId) {
-			fromId = binding.parentId
+		} else if (parentId) {
+			fromId = parentId
 		} else {
 			throw new Error('from must be specified, or binding must be a child of a shape')
 		}
 
-		assert(binding.props.to, 'to must be specified')
-		assert(typeof binding.props.to === 'string', 'to must be a ref string or a shape id')
-		if (isShapeId(binding.props.to)) {
-			toId = binding.props.to
+		assert(connections.to, 'to must be specified')
+		assert(typeof connections.to === 'string', 'to must be a ref string or a shape id')
+		if (isShapeId(connections.to)) {
+			toId = connections.to
 		} else {
-			assert(ids[binding.props.to], `Ref not found: ${binding.props.to}`)
-			toId = ids[binding.props.to]
+			assert(ids[connections.to], `Ref not found: ${connections.to}`)
+			toId = ids[connections.to]
 		}
 
-		let bindingId: TLBindingId = binding.props.id as TLBindingId
-		if (binding.ref) {
-			assert(typeof binding.ref === 'string', 'binding ref must be string')
-			assert(!ids.bindings[binding.ref], `Duplicate ref: ${binding.ref}`)
-			assert(!bindingId, `Cannot use both ref and id on binding: ${binding.ref}`)
-			bindingId = createBindingId(`${idPrefix}${binding.ref}`)
-			ids.bindings[binding.ref] = bindingId
+		let bindingId = id
+		if (ref) {
+			assert(typeof ref === 'string', 'binding ref must be string')
+			assert(!ids.bindings[ref], `Duplicate ref: ${ref}`)
+			assert(!bindingId, `Cannot use both ref and id on binding: ${ref}`)
+			bindingId = createBindingId(`${idPrefix}${ref}`)
+			ids.bindings[ref] = bindingId
 		}
 		if (!bindingId) {
 			bindingId = createBindingId()
 		}
 
-		const props = { ...binding.props }
-		delete props.ref
-		delete props.id
-		delete props.from
-		delete props.to
-
 		bindings.push({
+			...binding,
 			id: bindingId,
-			type: binding.type,
 			fromId,
 			toId,
-			props,
 		})
 	}
 

package/src/test/text.test.ts

@@ -1,4 +1,4 @@
-import { TLTextShape, createShapeId, toRichText } from '@tldraw/editor'
+import { createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -13,7 +13,7 @@ afterEach(() => {
 describe('When editing text', () => {
 	it('preserves the top center when center aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -27,7 +27,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -47,7 +47,7 @@ describe('When editing text', () => {
 
 	it('preserved the right center when center aligned and rotated 90deg', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -63,9 +63,7 @@ describe('When editing text', () => {
 		])
 
 		const boundsA = editor.getShapePageBounds(id)!
-		editor.updateShapes<TLTextShape>([
-			{ id, type: 'text', props: { richText: toRichText('Hello, world!') } },
-		])
+		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello, world!') } }])
 		const boundsB = editor.getShapePageBounds(id)!
 		expect(boundsA.x).toBeCloseTo(boundsB.x)
 		expect(boundsA.y).not.toBeCloseTo(boundsB.y)
@@ -75,7 +73,7 @@ describe('When editing text', () => {
 
 	it('preserves the top left corner when start aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -89,7 +87,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -109,7 +107,7 @@ describe('When editing text', () => {
 
 	it('preserves the top right edge when end aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -123,7 +121,7 @@ describe('When editing text', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -145,7 +143,7 @@ describe('When editing text', () => {
 describe('When changing text size', () => {
 	it('preserves the center when center aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -160,7 +158,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -180,7 +178,7 @@ describe('When changing text size', () => {
 
 	it('preserves the center left point when start aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -195,7 +193,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',
@@ -215,7 +213,7 @@ describe('When changing text size', () => {
 
 	it('preserves the top right edge when end aligned', () => {
 		const id = createShapeId()
-		editor.createShapes<TLTextShape>([
+		editor.createShapes([
 			{
 				id,
 				type: 'text',
@@ -230,7 +228,7 @@ describe('When changing text size', () => {
 			},
 		])
 		const boundsA = editor.getShapePageBounds(id)
-		editor.updateShapes<TLTextShape>([
+		editor.updateShapes([
 			{
 				id,
 				type: 'text',

package/src/test/translating.test.ts

@@ -1749,9 +1749,7 @@ describe('translating a shape with a bound shape', () => {
 
 		const newArrow = editor
 			.getCurrentPageShapes()
-			.find(
-				(s) => editor.isShapeOfType<TLArrowShape>(s, 'arrow') && s.id !== arrow1
-			)! as TLArrowShape
+			.find((s) => editor.isShapeOfType(s, 'arrow') && s.id !== arrow1)! as TLArrowShape
 		expect(getArrowBindings(editor, newArrow)).toMatchObject({
 			start: { type: 'arrow' },
 			end: undefined,
@@ -2061,7 +2059,7 @@ describe('Note shape grid helper positions / pits', () => {
 		editor
 			.createShape({ type: 'note' })
 			.createShape({ type: 'note', x: 500, y: 500 })
-			.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
+			.updateShape({ ...editor.getLastCreatedShape<TLNoteShape>(), props: { growY: 100 } })
 			.pointerMove(600, 600)
 			// start translating
 			.pointerDown()
@@ -2080,7 +2078,7 @@ describe('Note shape grid helper positions / pits', () => {
 	it('Snaps correctly to the bottom when the not-translating shape has growY', () => {
 		editor
 			.createShape({ type: 'note' })
-			.updateShape({ ...editor.getLastCreatedShape(), props: { growY: 100 } })
+			.updateShape({ ...editor.getLastCreatedShape<TLNoteShape>(), props: { growY: 100 } })
 			.createShape({ type: 'note', x: 500, y: 500 })
 			.pointerMove(600, 600)
 			// start translating
@@ -2183,7 +2181,7 @@ describe('Note shape grid helper positions / pits', () => {
 
 describe('cancelling a translate operation', () => {
 	it('undoes any changes since the start of the translate operation', () => {
-		editor.createShape<TLGeoShape>({
+		editor.createShape({
 			type: 'geo',
 			x: 0,
 			y: 0,
@@ -2220,7 +2218,7 @@ describe('cancelling a translate operation', () => {
 		const shapeId = createShapeId()
 
 		editor
-			.createShape<TLGeoShape>({
+			.createShape({
 				id: shapeId,
 				type: 'geo',
 				x: 0,
@@ -2268,7 +2266,7 @@ describe('cancelling a translate operation', () => {
 		const shapeId = createShapeId()
 
 		editor
-			.createShape<TLGeoShape>({
+			.createShape({
 				id: shapeId,
 				type: 'geo',
 				x: 0,

package/src/test/ui/BackToContent.test.tsx

@@ -0,0 +1,111 @@
+import { act, screen, waitFor } from '@testing-library/react'
+import { Box, Editor, Vec } from '@tldraw/editor'
+import { Tldraw } from '../../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+let editor: Editor
+
+beforeEach(async () => {
+	const result = await renderTldrawComponentWithEditor((onMount) => <Tldraw onMount={onMount} />, {
+		waitForPatterns: false,
+	})
+	editor = result.editor
+
+	// Set up a proper viewport so shapes can be on/off screen
+	act(() => {
+		editor.updateViewportScreenBounds(new Box(0, 0, 1000, 800))
+	})
+})
+
+function createShapeInViewport() {
+	act(() => {
+		editor.createShape({
+			type: 'geo',
+			x: 100,
+			y: 100,
+			props: { w: 100, h: 100 },
+		})
+	})
+}
+
+function panAllShapesOffScreen() {
+	// Move camera so all shapes are off-screen
+	act(() => {
+		const camera = editor.getCamera()
+		editor.setCamera(new Vec(camera.x - 2000, camera.y - 2000, camera.z), { immediate: true })
+	})
+}
+
+describe('BackToContent button', () => {
+	it('shows when all shapes are off-screen', async () => {
+		createShapeInViewport()
+
+		// Initially, button should not be visible (shapes are on screen)
+		await waitFor(() => {
+			expect(screen.queryByTestId('helper-buttons.back-to-content')).toBeNull()
+		})
+
+		panAllShapesOffScreen()
+
+		// Now the button should appear
+		await waitFor(() => {
+			expect(screen.queryByTestId('helper-buttons.back-to-content')).not.toBeNull()
+		})
+	})
+
+	it('shows when selected shapes are off-screen', async () => {
+		createShapeInViewport()
+
+		await waitFor(() => {
+			expect(editor.getCurrentPageShapeIds().size).toBe(1)
+		})
+
+		const shapeId = editor.getCurrentPageShapeIds().values().next().value!
+
+		// Select the shape
+		act(() => {
+			editor.select(shapeId)
+		})
+
+		// Initially, button should not be visible
+		await waitFor(() => {
+			expect(screen.queryByTestId('helper-buttons.back-to-content')).toBeNull()
+		})
+
+		panAllShapesOffScreen()
+
+		// Button should still appear even though selected shapes aren't culled
+		await waitFor(() => {
+			expect(screen.queryByTestId('helper-buttons.back-to-content')).not.toBeNull()
+		})
+	})
+
+	it('does not show when some shapes are still on-screen', async () => {
+		// Create two shapes
+		act(() => {
+			editor.createShape({
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: { w: 100, h: 100 },
+			})
+			editor.createShape({
+				type: 'geo',
+				x: 500,
+				y: 500,
+				props: { w: 100, h: 100 },
+			})
+		})
+
+		// Pan so only the first shape is off-screen
+		act(() => {
+			const camera = editor.getCamera()
+			editor.setCamera(new Vec(camera.x - 300, camera.y - 300, camera.z), { immediate: true })
+		})
+
+		// Button should not appear since one shape is still visible
+		await waitFor(() => {
+			expect(screen.queryByTestId('helper-buttons.back-to-content')).toBeNull()
+		})
+	})
+})

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'] {
@@ -713,7 +712,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
-	contain: style paint;
+	contain: layout style paint;
 	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
 	unicode-bidi: plaintext;
 	-webkit-user-select: none;
@@ -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 {
@@ -1138,14 +1144,12 @@ input,
 	fill: none;
 }
 
-@media (pointer: coarse) {
-	.tl-handle__bg:active {
-		fill: var(--tl-color-selection-fill);
-	}
+.tl-container[data-coarse='true'] .tl-handle__bg:active {
+	fill: var(--tl-color-selection-fill);
+}
 
-	.tl-handle__create {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tl-handle__create {
+	opacity: 1;
 }
 
 .tl-rotate-corner:not(:hover),
@@ -1221,7 +1225,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 +1453,6 @@ input,
 }
 
 .tl-note__container > .tl-text-label {
-	text-shadow: none;
 	color: currentColor;
 }
 
@@ -2410,25 +2412,31 @@ it from receiving any pointer events or affecting the cursor. */
 
 /* Submenu triggers */
 
-.tlui-menu__submenu__trigger[data-state='open']::after {
-	opacity: 1;
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+.tlui-menu__submenu__trigger {
+	--gradient-angle: 90deg;
+}
+
+.tlui-menu__submenu__trigger[data-direction='left'] {
+	--gradient-angle: 270deg;
 }
 
-.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
+.tlui-menu__submenu__trigger[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(
+		var(--gradient-angle),
+		rgba(144, 144, 144, 0) 0%,
+		var(--tl-color-muted-2) 100%
+	);
 }
 
 @media (hover: hover) {
-	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
+	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
 		opacity: 1;
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
-	}
-
-	.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
-		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+		background: linear-gradient(
+			var(--gradient-angle),
+			rgba(144, 144, 144, 0) 0%,
+			var(--tl-color-muted-2) 100%
+		);
 	}
 }
 
@@ -2707,10 +2715,8 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@media (any-pointer: coarse) {
-	.tlui-page_menu__item__submenu > .tlui-button {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
+	opacity: 1;
 }
 
 .tlui-button__icon {
@@ -2749,16 +2755,15 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-offline-indicator {
 	display: flex;
-	flex-direction: row;
-	gap: var(--tl-space-3);
-	color: var(--tl-color-text);
-	background-color: var(--tl-color-low);
-	border: 3px solid var(--tl-color-background);
-	padding: 0px var(--tl-space-5);
-	height: 42px;
+	color: var(--tl-color-background);
+	background-color: var(--tl-color-text);
+	border: none;
+	width: 32px;
+	height: 32px;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
+	cursor: default;
 	opacity: 0;
 	animation: tl-fade-in;
 	animation-duration: 0.12s;
@@ -3076,6 +3081,7 @@ tldraw? probably.
 	position: relative;
 	background: var(--tl-color-panel);
 	box-shadow: var(--tl-shadow-2);
+	contain: layout style paint;
 }
 
 .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {

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": []
-}