tldraw 4.3.0-canary.e5f56251a468 → 4.3.0-canary.ea88b223b83a

package/src/test/custom-clipping.test.ts

@@ -31,6 +31,9 @@ export type CircleClipShape = TLShape<typeof CIRCLE_CLIP_TYPE>
 
 export const isClippingEnabled$ = atom('isClippingEnabled', true)
 
+// The stroke width used when rendering the circle
+const STROKE_WIDTH = 2
+
 export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
 	static override type = CIRCLE_CLIP_TYPE
 	static override props: RecordProps<CircleClipShape> = {
@@ -64,17 +67,20 @@ export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
 	}
 
 	override getClipPath(shape: CircleClipShape): Vec[] | undefined {
-		// Generate a polygon approximation of the circle
+		// Generate a polygon approximation of the circle.
+		// We inset the clip path by half the stroke width so that children are
+		// clipped to the inner edge of the stroke, not the center line.
 		const centerX = shape.props.w / 2
 		const centerY = shape.props.h / 2
-		const radius = Math.min(shape.props.w, shape.props.h) / 2
+		const outerRadius = Math.min(shape.props.w, shape.props.h) / 2
+		const clipRadius = outerRadius - STROKE_WIDTH / 2
 		const segments = 48 // More segments = smoother circle
 
 		const points: Vec[] = []
 		for (let i = 0; i < segments; i++) {
 			const angle = (i / segments) * Math.PI * 2
-			const x = centerX + Math.cos(angle) * radius
-			const y = centerY + Math.sin(angle) * radius
+			const x = centerX + Math.cos(angle) * clipRadius
+			const y = centerY + Math.sin(angle) * clipRadius
 			points.push(new Vec(x, y))
 		}
 
@@ -112,7 +118,7 @@ export class CircleClipShapeTool extends StateNode {
 
 	override onPointerDown(info: Parameters<TLEventHandlers['onPointerDown']>[0]) {
 		if (info.target === 'canvas') {
-			const { originPagePoint } = this.editor.inputs
+			const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 			this.editor.createShape({
 				type: CIRCLE_CLIP_TYPE,
@@ -233,13 +239,14 @@ describe('CircleClipShapeUtil', () => {
 
 			// Should be a polygon approximation of a circle
 			// Check that points are roughly in a circle pattern
-			const centerX = 100 // shape.x
-			const centerY = 100 // shape.y
-			const radius = 100 // min(w, h) / 2
+			// The clip path is inset by half the stroke width (STROKE_WIDTH / 2 = 1)
+			const centerX = 100 // shape.props.w / 2
+			const centerY = 100 // shape.props.h / 2
+			const clipRadius = 99 // min(w, h) / 2 - STROKE_WIDTH / 2 = 100 - 1
 
 			clipPath.forEach((point) => {
 				const distance = Math.sqrt(Math.pow(point.x - centerX, 2) + Math.pow(point.y - centerY, 2))
-				expect(distance).toBeCloseTo(radius, 0)
+				expect(distance).toBeCloseTo(clipRadius, 0)
 			})
 		})
 	})

package/src/test/drawing.test.ts

@@ -1,7 +1,8 @@
 import { TLDrawShape, TLHighlightShape, last } from '@tldraw/editor'
 import { vi } from 'vitest'
-import { TestEditor } from './TestEditor'
 import { TEST_DRAW_SHAPE_SCREEN_POINTS } from './drawing.data'
+import { base64ToPoints } from './test-jsx'
+import { TestEditor } from './TestEditor'
 
 vi.useFakeTimers()
 
@@ -77,7 +78,7 @@ for (const toolType of ['draw', 'highlight'] as const) {
 			const segment = shape.props.segments[0]
 			expect(segment.type).toBe('straight')
 
-			const points = segment.points
+			const points = base64ToPoints(segment.points)
 			expect(points.length).toBe(2)
 		})
 
@@ -176,8 +177,9 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment = shape.props.segments[0]
-			expect(segment.points[1].x).toBeCloseTo(snappedX)
-			expect(segment.points[1].y).toBeCloseTo(snappedY)
+			const points = base64ToPoints(segment.points)
+			expect(points[1].x).toBeCloseTo(snappedX)
+			expect(points[1].y).toBeCloseTo(snappedY)
 		})
 
 		it('Doesnt snap to 15 degree angle when cmd is held', () => {
@@ -190,8 +192,9 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment = shape.props.segments[0]
-			expect(segment.points[1].x).toBeCloseTo(x)
-			expect(segment.points[1].y).toBeCloseTo(y)
+			const points = base64ToPoints(segment.points)
+			expect(points[1].x).toBeCloseTo(x)
+			expect(points[1].y).toBeCloseTo(y)
 		})
 
 		it('Snaps to start or end of straight segments in self when shift + cmd is held', () => {
@@ -209,13 +212,15 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment1 = last(shape1.props.segments)!
-			const point1 = last(segment1.points)!
+			const points1 = base64ToPoints(segment1.points)
+			const point1 = last(points1)!
 			expect(point1.x).toBe(1)
 
 			editor.keyDown('Meta')
 			const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment2 = last(shape2.props.segments)!
-			const point2 = last(segment2.points)!
+			const points2 = base64ToPoints(segment2.points)
+			const point2 = last(points2)!
 			expect(point2.x).toBe(0)
 		})
 
@@ -234,13 +239,15 @@ for (const toolType of ['draw', 'highlight'] as const) {
 
 			const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment1 = last(shape1.props.segments)!
-			const point1 = last(segment1.points)!
+			const points1 = base64ToPoints(segment1.points)
+			const point1 = last(points1)!
 			expect(point1.x).toBe(1)
 
 			editor.keyDown('Meta')
 			const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape
 			const segment2 = last(shape2.props.segments)!
-			const point2 = last(segment2.points)!
+			const points2 = base64ToPoints(segment2.points)
+			const point2 = last(points2)!
 			expect(point2.x).toBe(0)
 		})
 

package/src/test/flipShapes.test.ts

@@ -637,3 +637,36 @@ it('Updates the image shape flip properties when flipped', () => {
 	editor.flipShapes(editor.getSelectedShapeIds(), 'vertical')
 	expect(editor.getLastCreatedShape<TLImageShape>().props.flipY).toBe(true)
 })
+
+it('Restores flipped shape positions when shape is rotated', () => {
+	editor.selectAll().rotateSelection(PI / 2.5)
+	const before = editor.getSelectedShapes()
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	const after = editor.getSelectedShapes()
+	expect(after.length).toBe(before.length)
+	for (let i = 0; i < before.length; i++) {
+		expect(after[i]).toCloselyMatchObject(before[i])
+	}
+})
+
+it('Restores flipped shape positions with draw shapes when shape is rotated', () => {
+	editor
+		.cancel()
+		.setCurrentTool('draw')
+		.pointerDown(0, 0)
+		.pointerMove(-100, -100)
+		.pointerMove(0, -100)
+		.pointerMove(100, 100)
+		.pointerUp()
+
+	editor.selectAll().rotateSelection(PI / 2.5)
+	const before = editor.getSelectedShapes()
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+	const after = editor.getSelectedShapes()
+	expect(after.length).toBe(before.length)
+	for (let i = 0; i < before.length; i++) {
+		expect(after[i]).toCloselyMatchObject(before[i])
+	}
+})

package/src/test/frames.test.ts

@@ -10,6 +10,7 @@ import {
 } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
+import { FrameShapeUtil } from '../lib/shapes/frame/FrameShapeUtil'
 import { DEFAULT_FRAME_PADDING, fitFrameToContent, removeFrame } from '../lib/utils/frames/frames'
 import { TestEditor } from './TestEditor'
 
@@ -639,9 +640,13 @@ describe('frame shapes', () => {
 
 		editor.setCurrentTool('select')
 
+		// Not with enter key
 		editor.keyDown('Enter')
 		editor.keyUp('Enter')
+		expect(editor.getCurrentPageState().editingShapeId).toBe(null)
 
+		// Just with header click (tests against header's geometry)
+		editor.click(105, 95)
 		expect(editor.getCurrentPageState().editingShapeId).toBe(frameId)
 	})
 
@@ -850,6 +855,93 @@ describe('frame shapes', () => {
 		expect(editor.getSortedChildIdsForParent(insideFrameId)).toStrictEqual([rectAId, rectBId])
 		expect(editor.getSortedChildIdsForParent(outsideFrameId)).toStrictEqual([insideFrameId])
 	})
+
+	describe('resizeChildren configuration option', () => {
+		it('has default canResizeChildren behavior as false', () => {
+			const frameUtil = editor.getShapeUtil<TLFrameShape>('frame') as FrameShapeUtil
+			expect(frameUtil.options.resizeChildren).toBe(false)
+			expect(frameUtil.canResizeChildren()).toBe(false)
+		})
+
+		it('can be configured to allow resizing children', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: true })
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
+			expect(configuredFrameUtil.canResizeChildren()).toBe(true)
+		})
+
+		it('can be configured to disallow resizing children', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: false })
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(false)
+			expect(configuredFrameUtil.canResizeChildren()).toBe(false)
+		})
+
+		it('maintains other options when configuring resizeChildren', () => {
+			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({
+				resizeChildren: true,
+				showColors: true,
+			})
+			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
+			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
+			expect(configuredFrameUtil.options.showColors).toBe(true)
+		})
+
+		it('resizes children when configured with resizeChildren: true', () => {
+			// Create a frame with a child shape using a configured frame util
+			editor.setCurrentTool('frame')
+			editor.pointerDown(100, 100).pointerMove(200, 200).pointerUp(200, 200)
+
+			const frameId = editor.getOnlySelectedShape()!.id
+
+			// Add a child shape
+			editor.setCurrentTool('geo')
+			editor.pointerDown(125, 125).pointerMove(175, 175).pointerUp(175, 175)
+
+			const childId = editor.getOnlySelectedShape()!.id
+
+			// Get initial bounds
+			const initialChildBounds = editor.getShapePageBounds(childId)!
+
+			// Create a new editor with configured frame util that allows resizing children
+			const configuredEditor = new TestEditor({
+				shapeUtils: [FrameShapeUtil.configure({ resizeChildren: true })],
+			})
+
+			// Create the same frame and child in the new editor
+			configuredEditor.createShapes([
+				{ id: frameId, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } },
+				{
+					id: childId,
+					type: 'geo',
+					parentId: frameId,
+					x: 125,
+					y: 125,
+					props: { w: 50, h: 50 },
+				},
+			])
+
+			// Resize the frame to half size
+			configuredEditor.select(frameId)
+			configuredEditor.resizeSelection({ scaleX: 0.5, scaleY: 0.5 }, 'bottom_right')
+
+			// Verify the frame was resized
+			const resizedFrameBounds = configuredEditor.getShapePageBounds(frameId)!
+			expect(resizedFrameBounds).toCloselyMatchObject({
+				x: 100,
+				y: 100,
+				w: 50,
+				h: 50,
+			})
+
+			// Verify the child was also resized
+			const resizedChildBounds = configuredEditor.getShapePageBounds(childId)!
+			expect(resizedChildBounds.w).toBeCloseTo(initialChildBounds.w * 0.5)
+			expect(resizedChildBounds.h).toBeCloseTo(initialChildBounds.h * 0.5)
+
+			configuredEditor.dispose()
+		})
+	})
 })
 
 test('arrows bound to a shape within a group within a frame are reparented if the group is moved outside of the frame', () => {

package/src/test/groups.test.tsx

@@ -1560,7 +1560,7 @@ describe('erasing', () => {
 		// move to group B
 		editor.pointerMove(65, 5)
 
-		expect(editor.getErasingShapeIds().length).toBe(2)
+		expect(editor.getErasingShapeIds().length).toBe(3)
 	})
 })
 

package/src/test/modifiers.test.ts

@@ -13,25 +13,25 @@ it('Shift Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { shiftKey: true })
 	editor.pointerMove(100, 100, { shiftKey: false })
-	expect(editor.inputs.shiftKey).toBe(true)
+	expect(editor.inputs.getShiftKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.shiftKey).toBe(false)
+	expect(editor.inputs.getShiftKey()).toBe(false)
 })
 
 it('Alt Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { altKey: true })
 	editor.pointerMove(100, 100, { altKey: false })
-	expect(editor.inputs.altKey).toBe(true)
+	expect(editor.inputs.getAltKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.altKey).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
 })
 
 it('Ctrl Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { ctrlKey: true })
 	editor.pointerMove(100, 100, { ctrlKey: false })
-	expect(editor.inputs.ctrlKey).toBe(true)
+	expect(editor.inputs.getCtrlKey()).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.ctrlKey).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
 })

package/src/test/resizing.test.ts

@@ -20,6 +20,7 @@ import { NoteShapeUtil } from '../lib/shapes/note/NoteShapeUtil'
 import { TestEditor } from './TestEditor'
 import { getSnapLines } from './getSnapLines'
 import { roundedBox } from './roundedBox'
+import { createDrawSegments } from './test-jsx'
 
 vi.useFakeTimers()
 
@@ -904,15 +905,12 @@ describe('When resizing a shape with children', () => {
 					x: 100,
 					y: 100,
 					props: {
-						segments: [
-							{
-								type: 'free',
-								points: [
-									{ x: 0, y: 0, z: 0.5 },
-									{ x: 100, y: 100, z: 0.5 },
-								],
-							},
-						],
+						segments: createDrawSegments([
+							[
+								{ x: 0, y: 0, z: 0.5 },
+								{ x: 100, y: 100, z: 0.5 },
+							],
+						]),
 					},
 				},
 			])

package/src/test/selection-omnibus.test.ts

@@ -2194,7 +2194,7 @@ describe('long press', () => {
 	it('works correctly with screenbounds offset', () => {
 		editor.updateViewportScreenBounds(new Box(100, 100, 800, 600))
 		editor.pointerDown(201, 202)
-		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
+		expect(editor.inputs.getCurrentScreenPoint()).toMatchObject({ x: 101, y: 102 })
 	})
 
 	it('works correctly with screenbounds offset', () => {
@@ -2202,7 +2202,7 @@ describe('long press', () => {
 		editor.pointerDown(201, 202)
 		vi.advanceTimersByTime(1000)
 		// without the fix added in this PR, it would have been 1, 2
-		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
+		expect(editor.inputs.getCurrentScreenPoint()).toMatchObject({ x: 101, y: 102 })
 	})
 })
 

package/src/test/spacebarPanning.test.ts

@@ -16,16 +16,16 @@ beforeEach(() => {
 
 it('Sets cursor and state correctly', () => {
 	expect(editor.getInstanceState().cursor.type).toBe('default')
-	expect(editor.inputs.isPanning).toBe(false)
+	expect(editor.inputs.getIsPanning()).toBe(false)
 	editor.keyDown(' ')
-	expect(editor.inputs.isPanning).toBe(true)
+	expect(editor.inputs.getIsPanning()).toBe(true)
 	expect(editor.getInstanceState().cursor.type).toBe('grab')
 	editor.pointerDown(0, 0)
 	expect(editor.getInstanceState().cursor.type).toBe('grabbing')
 	editor.pointerUp(0, 0)
 	expect(editor.getInstanceState().cursor.type).toBe('grab')
 	editor.keyUp(' ')
-	expect(editor.inputs.isPanning).toBe(false)
+	expect(editor.inputs.getIsPanning()).toBe(false)
 	expect(editor.getInstanceState().cursor.type).toBe('default')
 })
 
@@ -37,16 +37,34 @@ it('When holding spacebar and clicking and dragging, it pans the camera', () =>
 	editor.keyUp(' ')
 })
 
-it('When holding spacebar, it updates cursor and does not send events to the state or change statecharts current active state', () => {
-	editor.pointerDown(150, 150, { target: 'canvas' })
-	editor.pointerMove(100, 100)
-	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
+it('When spacebar is held during pointer interaction, it activates panning', () => {
+	// This test verifies that holding spacebar prevents pointer events from
+	// being sent to the state chart, and instead activates panning mode.
+	editor.select(ids.box1)
+
+	// Start with pointer down on the shape
+	editor.pointerDown(150, 150, ids.box1)
 
+	// Hold spacebar before moving - should activate panning
 	editor.keyDown(' ')
-	editor.pointerMove(200, 200)
-	editor.expectCameraToBe(100, 100, 1)
-	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
+	expect(editor.inputs.getIsPanning()).toBe(true)
+	expect(editor.getInstanceState().cursor.type).toBe('grabbing') // 'grabbing' because pointer is down
+
+	// Moving the pointer should pan the camera, not translate the shape
+	const initialCamera = editor.getCamera()
+	editor.pointerMove(100, 100)
+
+	// Camera should have moved (panning)
+	const newCamera = editor.getCamera()
+	expect(newCamera.x).not.toBe(initialCamera.x)
+	expect(newCamera.y).not.toBe(initialCamera.y)
+
+	// Shape should not have moved (not translating)
+	editor.expectShapeToMatch({ id: ids.box1, x: 100, y: 100 })
+
+	editor.pointerUp()
 	editor.keyUp(' ')
+	expect(editor.inputs.getIsPanning()).toBe(false)
 })
 
 it('When holding spacebar, pressing the arrow keys moves over by one viewport', () => {

package/src/test/test-jsx.tsx

@@ -19,6 +19,9 @@ 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')

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

package/dist-cjs/lib/tools/selection-logic/getShouldEnterCropModeOnPointerDown.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/tools/selection-logic/getShouldEnterCropModeOnPointerDown.ts"],
-  "sourcesContent": ["import { Editor } from '@tldraw/editor'\n\nexport function getShouldEnterCropMode(editor: Editor): boolean {\n\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\treturn !!(\n\t\tonlySelectedShape &&\n\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape) &&\n\t\teditor.getShapeUtil(onlySelectedShape).canCrop(onlySelectedShape)\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,uBAAuB,QAAyB;AAC/D,QAAM,oBAAoB,OAAO,qBAAqB;AACtD,SAAO,CAAC,EACP,qBACA,CAAC,OAAO,wBAAwB,iBAAiB,KACjD,OAAO,aAAa,iBAAiB,EAAE,QAAQ,iBAAiB;AAElE;",
-  "names": []
-}

package/dist-cjs/lib/ui/components/TopPanel/DefaultTopPanel.js

@@ -1,32 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DefaultTopPanel_exports = {};
-__export(DefaultTopPanel_exports, {
-  DefaultTopPanel: () => DefaultTopPanel
-});
-module.exports = __toCommonJS(DefaultTopPanel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_useCollaborationStatus = require("../../hooks/useCollaborationStatus");
-var import_OfflineIndicator = require("../OfflineIndicator/OfflineIndicator");
-var import_CenteredTopPanelContainer = require("./CenteredTopPanelContainer");
-function DefaultTopPanel() {
-  const isOffline = (0, import_useCollaborationStatus.useCollaborationStatus)() === "offline";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CenteredTopPanelContainer.CenteredTopPanelContainer, { children: isOffline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OfflineIndicator.OfflineIndicator, {}) });
-}
-//# sourceMappingURL=DefaultTopPanel.js.map