tldraw 3.16.0-canary.ed8bd30c0f28 → 3.16.0-canary.f20b7a478e22

package/src/index.ts

@@ -22,8 +22,20 @@ export {
 } from './lib/shapes/shared/PathBuilder'
 export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMotion'
 export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/components/A11y'
+export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
+export { DefaultFollowingIndicator } from './lib/ui/components/DefaultFollowingIndicator'
 export { DefaultDialogs } from './lib/ui/components/Dialogs'
+export {
+	TldrawUiColumn,
+	TldrawUiGrid,
+	TldrawUiOrientationProvider,
+	TldrawUiRow,
+	useTldrawUiOrientation,
+	type TldrawUiOrientationContext,
+	type TldrawUiOrientationProviderProps,
+	type TLUiLayoutProps,
+} from './lib/ui/components/primitives/layout'
 export {
 	TldrawUiMenuActionCheckboxItem,
 	type TLUiMenuActionCheckboxItemProps,
@@ -74,6 +86,7 @@ export {
 	defaultHandleExternalUrlContent,
 	getAssetInfo,
 	getMediaAssetInfoPartial,
+	notifyIfFileNotAllowed,
 	registerDefaultExternalContentHandlers,
 	type TLDefaultExternalContentHandlerOpts,
 	type TLExternalContentProps,
@@ -155,11 +168,10 @@ export {
 	type TLDefaultFont,
 	type TLDefaultFonts,
 } from './lib/shapes/shared/defaultFonts'
-export {
-	PlainTextLabel,
-	TextLabel,
-	type PlainTextLabelProps,
-} from './lib/shapes/shared/PlainTextLabel'
+export { getStrokePoints } from './lib/shapes/shared/freehand/getStrokePoints'
+export { getSvgPathFromStrokePoints } from './lib/shapes/shared/freehand/svg'
+export { type StrokeOptions, type StrokePoint } from './lib/shapes/shared/freehand/types'
+export { PlainTextLabel, type PlainTextLabelProps } from './lib/shapes/shared/PlainTextLabel'
 export {
 	RichTextLabel,
 	RichTextSVG,
@@ -167,10 +179,9 @@ export {
 	type RichTextSVGProps,
 } from './lib/shapes/shared/RichTextLabel'
 export { useDefaultColorTheme } from './lib/shapes/shared/useDefaultColorTheme'
-export { useEditablePlainText, useEditableText } from './lib/shapes/shared/useEditablePlainText'
+export { useEditablePlainText } from './lib/shapes/shared/useEditablePlainText'
 export { useEditableRichText } from './lib/shapes/shared/useEditableRichText'
 export {
-	useAsset,
 	useImageOrVideoAsset,
 	type UseImageOrVideoAssetOptions,
 } from './lib/shapes/shared/useImageOrVideoAsset'
@@ -294,6 +305,7 @@ export {
 	ToggleSnapModeItem,
 	ToggleToolLockItem,
 	ToggleTransparentBgMenuItem,
+	ToggleUiLabelsItem,
 	ToggleWrapModeItem,
 	UngroupMenuItem,
 	UnlockAllMenuItem,
@@ -348,10 +360,6 @@ export {
 	TldrawUiMenuSubmenu,
 	type TLUiMenuSubmenuProps,
 } from './lib/ui/components/primitives/menus/TldrawUiMenuSubmenu'
-export {
-	TldrawUiButtonPicker,
-	type TLUiButtonPickerProps,
-} from './lib/ui/components/primitives/TldrawUiButtonPicker'
 export {
 	TldrawUiContextualToolbar,
 	type TLUiContextualToolbarProps,
@@ -412,6 +420,12 @@ export {
 	type TLUiToolbarToggleGroupProps,
 	type TLUiToolbarToggleItemProps,
 } from './lib/ui/components/primitives/TldrawUiToolbar'
+export {
+	TldrawUiTooltip,
+	TldrawUiTooltipProvider,
+	type TldrawUiTooltipProps,
+	type TldrawUiTooltipProviderProps,
+} from './lib/ui/components/primitives/TldrawUiTooltip'
 export {
 	DefaultQuickActions,
 	type TLUiQuickActionsProps,
@@ -425,17 +439,44 @@ export {
 	type TLUiStylePanelProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanel'
 export {
-	ArrowheadStylePickerSet,
-	CommonStylePickerSet,
 	DefaultStylePanelContent,
-	GeoStylePickerSet,
-	OpacitySlider,
-	SplineStylePickerSet,
-	TextStylePickerSet,
-	type StylePickerSetProps,
-	type ThemeStylePickerSetProps,
-	type TLUiStylePanelContentProps,
+	StylePanelArrowheadPicker,
+	StylePanelArrowKindPicker,
+	StylePanelColorPicker,
+	StylePanelDashPicker,
+	StylePanelFillPicker,
+	StylePanelFontPicker,
+	StylePanelGeoShapePicker,
+	StylePanelLabelAlignPicker,
+	StylePanelOpacityPicker,
+	StylePanelSection,
+	StylePanelSizePicker,
+	StylePanelSplinePicker,
+	StylePanelTextAlignPicker,
+	type StylePanelSectionProps,
 } from './lib/ui/components/StylePanel/DefaultStylePanelContent'
+export {
+	StylePanelButtonPicker,
+	type StylePanelButtonPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelButtonPicker'
+export {
+	StylePanelContextProvider,
+	useStylePanelContext,
+	type StylePanelContext,
+	type StylePanelContextProviderProps,
+} from './lib/ui/components/StylePanel/StylePanelContext'
+export {
+	StylePanelDoubleDropdownPicker,
+	type StylePanelDoubleDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDoubleDropdownPicker'
+export {
+	StylePanelDropdownPicker,
+	type StylePanelDropdownPickerProps,
+} from './lib/ui/components/StylePanel/StylePanelDropdownPicker'
+export {
+	StylePanelSubheading,
+	type StylePanelSubheadingProps,
+} from './lib/ui/components/StylePanel/StylePanelSubheading'
 export {
 	DefaultImageToolbar,
 	type TLUiImageToolbarProps,
@@ -590,7 +631,9 @@ export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
 export { useReadonly } from './lib/ui/hooks/useReadonly'
 export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
 export {
+	onDragFromToolbarToCreateShape,
 	useTools,
+	type OnDragFromToolbarToCreateShapesOpts,
 	type TLUiToolItem,
 	type TLUiToolsContextType,
 	type TLUiToolsProviderProps,
@@ -605,13 +648,12 @@ export {
 } from './lib/ui/hooks/useTranslation/useTranslation'
 export { type TLUiIconType } from './lib/ui/icon-types'
 export { useDefaultHelpers, type TLUiOverrideHelpers, type TLUiOverrides } from './lib/ui/overrides'
-export { TldrawUi, type TldrawUiProps } from './lib/ui/TldrawUi'
+export { TldrawUi, TldrawUiInFrontOfTheCanvas, type TldrawUiProps } from './lib/ui/TldrawUi'
 export { containBoxSize, downsizeImage, type BoxWidthHeight } from './lib/utils/assets/assets'
 export { preloadFont, type TLTypeFace } from './lib/utils/assets/preload-font'
 export { getEmbedInfo, type TLEmbedResult } from './lib/utils/embeds/embeds'
 export { putExcalidrawContent } from './lib/utils/excalidraw/putExcalidrawContent'
 export { copyAs, type CopyAsOptions, type TLCopyType } from './lib/utils/export/copyAs'
-export { exportToBlob } from './lib/utils/export/export'
 export { downloadFile, exportAs, type ExportAsOptions } from './lib/utils/export/exportAs'
 export { fitFrameToContent, removeFrame } from './lib/utils/frames/frames'
 export {

package/src/lib/Tldraw.tsx

@@ -33,7 +33,7 @@ import { registerDefaultSideEffects } from './defaultSideEffects'
 import { defaultTools } from './defaultTools'
 import { EmbedShapeUtil } from './shapes/embed/EmbedShapeUtil'
 import { allDefaultFontFaces } from './shapes/shared/defaultFonts'
-import { TldrawUi, TldrawUiProps } from './ui/TldrawUi'
+import { TldrawUi, TldrawUiInFrontOfTheCanvas, TldrawUiProps } from './ui/TldrawUi'
 import { TLUiAssetUrlOverrides, useDefaultUiAssetUrlsWithOverrides } from './ui/assetUrls'
 import { LoadingScreen } from './ui/components/LoadingScreen'
 import { Spinner } from './ui/components/Spinner'
@@ -118,6 +118,18 @@ export function Tldraw(props: TldrawProps) {
 
 	const _components = useShallowObjectIdentity(components)
 
+	const CustomInFrontOfTheCanvas = components?.InFrontOfTheCanvas
+	const InFrontOfTheCanvas = useMemo(() => {
+		if (rest.hideUi) return CustomInFrontOfTheCanvas ?? null
+		if (!CustomInFrontOfTheCanvas) return TldrawUiInFrontOfTheCanvas
+
+		return () => (
+			<>
+				<TldrawUiInFrontOfTheCanvas />
+				<CustomInFrontOfTheCanvas />
+			</>
+		)
+	}, [rest.hideUi, CustomInFrontOfTheCanvas])
 	const componentsWithDefault = useMemo(
 		() => ({
 			Scribble: TldrawScribble,
@@ -129,8 +141,9 @@ export function Tldraw(props: TldrawProps) {
 			Spinner,
 			LoadingScreen,
 			..._components,
+			InFrontOfTheCanvas,
 		}),
-		[_components]
+		[_components, InFrontOfTheCanvas]
 	)
 
 	const _shapeUtils = useShallowArrayIdentity(shapeUtils)

package/src/lib/canvas/TldrawScribble.tsx

@@ -31,7 +31,7 @@ export function TldrawScribble({ scribble, zoom, color, opacity, className }: TL
 			<path
 				className="tl-scribble"
 				d={d}
-				fill={color ?? `var(--color-${scribble.color})`}
+				fill={color ?? `var(--tl-color-${scribble.color})`}
 				opacity={opacity ?? scribble.opacity}
 			/>
 		</svg>

package/src/lib/defaultExternalContentHandlers.ts

@@ -144,7 +144,7 @@ export async function defaultHandleExternalFileAsset(
 	{ file, assetId }: TLFileExternalAsset,
 	options: TLDefaultExternalContentHandlerOpts
 ) {
-	const isSuccess = runFileChecks(file, options)
+	const isSuccess = notifyIfFileNotAllowed(file, options)
 	if (!isSuccess) assert(false, 'File checks failed')
 
 	const assetInfo = await getAssetInfo(file, options, assetId)
@@ -161,7 +161,7 @@ export async function defaultHandleExternalFileReplaceContent(
 	{ file, shapeId, isImage }: TLFileReplaceExternalContent,
 	options: TLDefaultExternalContentHandlerOpts
 ) {
-	const isSuccess = runFileChecks(file, options)
+	const isSuccess = notifyIfFileNotAllowed(file, options)
 	if (!isSuccess) assert(false, 'File checks failed')
 
 	const shape = editor.getShape(shapeId)
@@ -399,7 +399,7 @@ export async function defaultHandleExternalFileContent(
 		file: File
 	}[] = []
 	for (const file of files) {
-		const isSuccess = runFileChecks(file, options)
+		const isSuccess = notifyIfFileNotAllowed(file, options)
 		if (!isSuccess) continue
 
 		const assetInfo = await getAssetInfo(file, options)
@@ -873,7 +873,15 @@ export function createEmptyBookmarkShape(
 	return editor.getShape(partial.id) as TLBookmarkShape
 }
 
-function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts) {
+/**
+ * Checks if a file is allowed to be uploaded. If it is not, it will show a toast explaining why to the user.
+ *
+ * @param file - The file to check
+ * @param options - The options for the external content handler
+ * @returns True if the file is allowed, false otherwise
+ * @public
+ */
+export function notifyIfFileNotAllowed(file: File, options: TLDefaultExternalContentHandlerOpts) {
 	const {
 		acceptedImageMimeTypes = DEFAULT_SUPPORTED_IMAGE_TYPES,
 		acceptedVideoMimeTypes = DEFAULT_SUPPORT_VIDEO_TYPES,
@@ -893,8 +901,22 @@ function runFileChecks(file: File, options: TLDefaultExternalContentHandlerOpts)
 	}
 
 	if (file.size > maxAssetSize) {
+		const formatBytes = (bytes: number): string => {
+			if (bytes === 0) return '0 bytes'
+
+			const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']
+			const base = 1024
+			const unitIndex = Math.floor(Math.log(bytes) / Math.log(base))
+
+			const value = bytes / Math.pow(base, unitIndex)
+			const formatted = value % 1 === 0 ? value.toString() : value.toFixed(1)
+
+			return `${formatted} ${units[unitIndex]}`
+		}
+
 		toasts.addToast({
 			title: msg('assets.files.size-too-big'),
+			description: msg('assets.files.maximum-size').replace('{size}', formatBytes(maxAssetSize)),
 			severity: 'error',
 		})
 		return false

package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts

@@ -1,4 +1,5 @@
 import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { ArrowShapeUtil } from './ArrowShapeUtil'
 import { updateArrowTargetState } from './arrowTargetState'
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -1,4 +1,5 @@
 import { IndexKey, TLArrowShape, TLShapeId, Vec, createShapeId } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { getArrowTargetState } from './arrowTargetState'
 import { getArrowBindings } from './shared'
@@ -13,7 +14,7 @@ global.cancelAnimationFrame = function cancelAnimationFrame(id) {
 	clearTimeout(id)
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ids = {
 	box1: createShapeId('box1'),
@@ -242,7 +243,7 @@ describe('When pointing an end shape', () => {
 			},
 		})
 
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -306,7 +307,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Give time for the velocity to die down
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
 
@@ -568,12 +569,12 @@ describe('reparenting issue', () => {
 		const arrow1BoundIndex = editor.getShape(arrow1Id)!.index
 		const arrow2BoundIndex = editor.getShape(arrow2Id)!.index
 		expect(arrow1BoundIndex).toBe('a1V')
-		expect(arrow2BoundIndex).toBe('a1F')
+		expect(arrow2BoundIndex).toBe('a1G')
 
 		// nudge everything around and make sure we all stay in the right order
 		editor.selectAll().nudgeShapes(editor.getSelectedShapeIds(), { x: -1, y: 0 })
 		expect(editor.getShape(arrow1Id)!.index).toBe('a1V')
-		expect(editor.getShape(arrow2Id)!.index).toBe('a1F')
+		expect(editor.getShape(arrow2Id)!.index).toBe('a1G')
 	})
 })
 

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -1,4 +1,5 @@
 import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
 
@@ -12,7 +13,7 @@ const ids = {
 	arrow1: createShapeId('arrow1'),
 }
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 window.requestAnimationFrame = function requestAnimationFrame(cb) {
 	return setTimeout(cb, 1000 / 60)
@@ -217,7 +218,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -227,7 +228,7 @@ describe('Other cases when arrow are moved', () => {
 		// maintains bindings if they would still be over the same shape (but makes them precise), but unbinds others
 		editor.select(ids.arrow1, ids.box3)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'top')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: true } },
@@ -244,7 +245,7 @@ describe('Other cases when arrow are moved', () => {
 		// When box one is not selected, unbinds box1 and keeps binding to box2
 		editor.select(ids.arrow1, ids.box2, ids.box3)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: { toId: ids.box1, props: { isPrecise: false } },
@@ -254,7 +255,7 @@ describe('Other cases when arrow are moved', () => {
 		// unbinds when only the arrow is selected (not its bound shapes) if the arrow itself has moved
 		editor.select(ids.arrow1, ids.box3, ids.box4)
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		// The arrow didn't actually move
 		expect(bindings()).toMatchObject({
@@ -265,7 +266,7 @@ describe('Other cases when arrow are moved', () => {
 		// The arrow will not move because it is still bound to another shape
 		editor.updateShapes([{ id: ids.box4, type: 'geo', y: -600 }])
 		editor.distributeShapes(editor.getSelectedShapeIds(), 'vertical')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		expect(bindings()).toMatchObject({
 			start: undefined,
@@ -578,3 +579,44 @@ describe("an arrow's parents", () => {
 		})
 	})
 })
+
+describe('Arrow export bounds', () => {
+	it('excludes labels from shape bounds for export', () => {
+		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
+
+		// Create shapes for the arrow to bind to
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 100, y: 100, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 300, y: 100, props: { w: 100, h: 100 } },
+		])
+
+		// Create an arrow with a label
+		editor.createShapes([
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 0,
+				y: 0,
+				props: {
+					start: { x: 0, y: 0 },
+					end: { x: 0, y: 100 },
+					richText: toRichText('Test Label'),
+				},
+			},
+		])
+
+		// Get the page bounds (should exclude labels due to excludeFromShapeBounds flag)
+		const pageBounds = editor.getShapePageBounds(ids.arrow1)
+		expect(pageBounds).toBeDefined()
+
+		// The bounds should be smaller than if labels were included
+		// Since the arrow has a label that's excluded, the bounds should be minimal
+		expect(pageBounds!.width).toBeLessThan(200) // Should not include label width
+		expect(pageBounds!.height).toBeLessThan(200) // Should not include label height
+
+		// Verify that the arrow has a label (which should be excluded from shape bounds)
+		const arrow = editor.getShape(ids.arrow1) as TLArrowShape
+		expect(arrow.props.richText).toBeDefined()
+		expect(arrow.props.richText).not.toBeNull()
+	})
+})

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -31,6 +31,7 @@ import {
 	clamp,
 	debugFlags,
 	exhaustiveSwitchError,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	invLerp,
@@ -785,8 +786,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						lineHeight={TEXT_PROPS.lineHeight}
 						align="middle"
 						verticalAlign="middle"
+						labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
 						richText={shape.props.richText}
-						labelColor={theme[shape.props.labelColor].solid}
 						textWidth={labelPosition.box.w - ARROW_LABEL_PADDING * 2 * shape.props.scale}
 						isSelected={isSelected}
 						padding={0}
@@ -934,8 +935,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 					font={shape.props.font}
 					align="middle"
 					verticalAlign="middle"
+					labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
 					richText={shape.props.richText}
-					labelColor={theme[shape.props.labelColor].solid}
 					bounds={getArrowLabelPosition(this.editor, shape)
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
@@ -1077,7 +1078,7 @@ const ArrowSvg = track(function ArrowSvg({
 			</defs>
 			<g
 				fill="none"
-				stroke={theme[shape.props.color].solid}
+				stroke={getColorValue(theme, shape.props.color, 'solid')}
 				strokeWidth={strokeWidth}
 				strokeLinejoin="round"
 				strokeLinecap="round"

package/src/lib/shapes/arrow/arrowLabel.ts

@@ -227,6 +227,14 @@ interface ArrowheadInfo {
 	hasEndArrowhead: boolean
 }
 export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
+	const isEditing = editor.getEditingShapeId() === shape.id
+	if (!isEditing && isEmptyRichText(shape.props.richText)) {
+		// Short-circuit for empty labels.
+		const bodyGeom = getArrowBodyGeometry(editor, shape)
+		const labelCenter = bodyGeom.interpolateAlongEdge(0.5)
+		return { box: Box.FromCenter(labelCenter, new Vec(0, 0)), debugGeom: [] }
+	}
+
 	const debugGeom: Geometry2d[] = []
 	const info = getArrowInfo(editor, shape)!
 

package/src/lib/shapes/arrow/arrowTargetState.ts

@@ -94,7 +94,7 @@ export function updateArrowTargetState({
 	const target = editor.getShapeAtPoint(pointInPageSpace, {
 		hitInside: true,
 		hitFrameInside: true,
-		margin: arrowKind === 'elbow' ? 8 : 0,
+		margin: arrowKind === 'elbow' ? 8 : [8, 0],
 		filter: (targetShape) => {
 			return (
 				!targetShape.isLocked &&
@@ -187,6 +187,7 @@ export function updateArrowTargetState({
 	}
 
 	const shouldSnapCenter = !isExact && precise && targetGeometryInTargetSpace.isClosed
+	// const shouldSnapEdges = !isExact && (precise || !targetGeometryInTargetSpace.isClosed)
 	const shouldSnapEdges =
 		!isExact && ((precise && arrowKind === 'elbow') || !targetGeometryInTargetSpace.isClosed)
 	const shouldSnapEdgePoints =

package/src/lib/shapes/arrow/elbow/ElbowArrowDebug.tsx

@@ -98,7 +98,7 @@ export function ElbowArrowDebug({ arrow }: { arrow: TLArrowShape }) {
 				y={fullBox.minY - 3}
 				fontSize={10}
 				fill="black"
-				stroke="var(--color-background)"
+				stroke="var(--tl-color-background)"
 				strokeWidth={2}
 				paintOrder="stroke"
 			>
@@ -109,7 +109,7 @@ export function ElbowArrowDebug({ arrow }: { arrow: TLArrowShape }) {
 				y={info.A.expanded.y}
 				fontSize={10}
 				fill="black"
-				stroke="var(--color-background)"
+				stroke="var(--tl-color-background)"
 				strokeWidth={2}
 				paintOrder="stroke"
 			>
@@ -121,7 +121,7 @@ export function ElbowArrowDebug({ arrow }: { arrow: TLArrowShape }) {
 				y={info.B.expanded.y}
 				fontSize={10}
 				fill="black"
-				stroke="var(--color-background)"
+				stroke="var(--tl-color-background)"
 				strokeWidth={2}
 				paintOrder="stroke"
 			>

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -13,7 +13,7 @@ import {
 	debounce,
 	getHashForString,
 	lerp,
-	stopEventPropagation,
+	markEventAsHandled,
 	tlenv,
 	toDomPrecision,
 	useEditor,
@@ -132,9 +132,9 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 	const [isFaviconValid, setIsFaviconValid] = useState(true)
 	const onFaviconError = () => setIsFaviconValid(false)
 
-	const useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(
+	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) stopEventPropagation(e)
+			if (!editor.inputs.shiftKey) markEventAsHandled(e)
 		},
 		[editor]
 	)
@@ -182,8 +182,8 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 						target="_blank"
 						rel="noopener noreferrer"
 						draggable={false}
-						onPointerDown={useStopPropagationOnShiftKey}
-						onPointerUp={useStopPropagationOnShiftKey}
+						onPointerDown={markAsHandledOnShiftKey}
+						onPointerUp={markAsHandledOnShiftKey}
 					>
 						{isFaviconValid && asset?.props.favicon ? (
 							<img

package/src/lib/shapes/draw/DrawShapeTool.test.ts

@@ -1,5 +1,4 @@
 import { TestEditor } from '../../../test/TestEditor'
-import { DrawShapeTool } from './DrawShapeTool'
 
 let editor: TestEditor
 
@@ -10,10 +9,6 @@ afterEach(() => {
 	editor?.dispose()
 })
 
-describe(DrawShapeTool, () => {
-	return
-})
-
 describe('When in the idle state', () => {
 	it('Returns to select on cancel', () => {
 		editor.setCurrentTool('draw')

package/src/lib/shapes/draw/DrawShapeUtil.tsx

@@ -14,6 +14,7 @@ import {
 	VecLike,
 	drawShapeMigrations,
 	drawShapeProps,
+	getColorValue,
 	last,
 	lerp,
 	rng,
@@ -289,7 +290,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 				<path
 					d={svgInk(allPointsFromSegments, options)}
 					strokeLinecap="round"
-					fill={theme[shape.props.color].solid}
+					fill={getColorValue(theme, shape.props.color, 'solid')}
 				/>
 			</>
 		)
@@ -313,8 +314,8 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 			<path
 				d={solidStrokePath}
 				strokeLinecap="round"
-				fill={isDot ? theme[shape.props.color].solid : 'none'}
-				stroke={theme[shape.props.color].solid}
+				fill={isDot ? getColorValue(theme, shape.props.color, 'solid') : 'none'}
+				stroke={getColorValue(theme, shape.props.color, 'solid')}
 				strokeWidth={sw}
 				strokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}
 				strokeDashoffset="0"

package/src/lib/shapes/embed/EmbedShapeUtil.tsx

@@ -144,7 +144,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 							border: 0,
 							boxShadow: getRotatedBoxShadow(pageRotation),
 							borderRadius: embedInfo?.definition.overrideOutlineRadius ?? 8,
-							background: embedInfo?.definition.backgroundColor ?? 'var(--color-background)',
+							background: embedInfo?.definition.backgroundColor ?? 'var(--tl-color-background)',
 							width: w,
 							height: h,
 						}}