tldraw 3.15.0-canary.d251cd98b4e1 → 3.15.0-canary.d48536dd9c3c

package/src/lib/TldrawImage.tsx

@@ -15,6 +15,7 @@ import { memo, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { defaultBindingUtils } from './defaultBindingUtils'
 import { defaultShapeUtils } from './defaultShapeUtils'
 import { TLUiAssetUrlOverrides } from './ui/assetUrls'
+import { useDefaultEditorAssetsWithOverrides } from './utils/static-assets/assetUrls'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from './utils/text/richText'
 
 /** @public */
@@ -111,6 +112,7 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		assetUrls,
 		textOptions = defaultTextOptions,
 	} = props
+	const assetUrlsWithOverrides = useDefaultEditorAssetsWithOverrides(assetUrls)
 
 	useLayoutEffect(() => {
 		if (!container) return
@@ -129,7 +131,7 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 			tools: [],
 			getContainer: () => tempElm,
 			licenseKey,
-			fontAssetUrls: assetUrls?.fonts,
+			fontAssetUrls: assetUrlsWithOverrides.fonts,
 			textOptions,
 		})
 
@@ -138,6 +140,8 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		const shapeIds = editor.getCurrentPageShapeIds()
 
 		async function setSvg() {
+			// We have to wait for the fonts to load so that we can correctly measure text sizes
+			await editor.fonts.loadRequiredFontsForCurrentPage(editor.options.maxFontsToLoadBeforeRender)
 			const imageResult = await editor.toImage([...shapeIds], {
 				bounds,
 				scale,
@@ -175,7 +179,7 @@ export const TldrawImage = memo(function TldrawImage(props: TldrawImageProps) {
 		preserveAspectRatio,
 		licenseKey,
 		pixelRatio,
-		assetUrls,
+		assetUrlsWithOverrides,
 		textOptions,
 	])
 

package/src/lib/canvas/TldrawCropHandles.tsx

@@ -20,7 +20,7 @@ export function TldrawCropHandles({
 	const msg = useTranslation()
 
 	return (
-		<svg className="tl-overlays__item">
+		<svg className="tl-overlays__item" aria-hidden="true">
 			{/* Top left */}
 			<polyline
 				className="tl-corner-crop-handle"

package/src/lib/canvas/TldrawHandles.tsx

@@ -23,5 +23,9 @@ export function TldrawHandles({ children }: TLHandlesProps) {
 
 	if (!shouldDisplayHandles) return null
 
-	return <svg className="tl-user-handles tl-overlays__item">{children}</svg>
+	return (
+		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
+			{children}
+		</svg>
+	)
 }

package/src/lib/canvas/TldrawOverlays.tsx

@@ -60,7 +60,7 @@ export function TldrawArrowHints() {
 			{ShapeIndicator && <ShapeIndicator shapeId={targetInfo.target.id} />}
 
 			{showEdgeHints && (
-				<svg className="tl-overlays__item">
+				<svg className="tl-overlays__item" aria-hidden="true">
 					<circle
 						cx={anchorInPageSpace.x}
 						cy={anchorInPageSpace.y}

package/src/lib/canvas/TldrawSelectionForeground.tsx

@@ -192,7 +192,11 @@ export const TldrawSelectionForeground = track(function TldrawSelectionForegroun
 		textHandleHeight * zoom >= 4
 
 	return (
-		<svg className="tl-overlays__item tl-selection__fg" data-testid="selection-foreground">
+		<svg
+			className="tl-overlays__item tl-selection__fg"
+			data-testid="selection-foreground"
+			aria-hidden="true"
+		>
 			<g ref={rSvg}>
 				{shouldDisplayBox && (
 					<rect

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

@@ -219,9 +219,6 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 			[shape.id]
 		)
 
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const zoomLevel = useValue('zoom level', () => this.editor.getZoomLevel(), [this.editor])
-
 		const showFrameColors = this.options.showColors
 
 		const color = theme[shape.props.color]
@@ -236,12 +233,13 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 				<SVGContainer>
 					<rect
 						className={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}
-						width={shape.props.w + 1 / zoomLevel}
-						height={shape.props.h + 1 / zoomLevel}
 						fill={frameFill}
 						stroke={frameStroke}
-						y={-0.5 / zoomLevel}
-						x={-0.5 / zoomLevel}
+						style={{
+							width: `calc(${shape.props.w}px + 1px / var(--tl-zoom))`,
+							height: `calc(${shape.props.h}px + 1px / var(--tl-zoom))`,
+							transform: `translate(calc(-0.5px / var(--tl-zoom)), calc(-0.5px / var(--tl-zoom)))`,
+						}}
 					/>
 				</SVGContainer>
 				{isCreating ? null : (

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

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

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

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

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

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

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

@@ -128,6 +128,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
+			aria-hidden="true"
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}

package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -45,7 +45,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}
 								onClick={() => actions['zoom-out'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon icon="minus" />
+								<TldrawUiButtonIcon small icon="minus" />
 							</TldrawUiToolbarButton>
 						)}
 						{ZoomMenu && <ZoomMenu key="zoom-menu" />}
@@ -56,7 +56,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}
 								onClick={() => actions['zoom-in'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon icon="plus" />
+								<TldrawUiButtonIcon small icon="plus" />
 							</TldrawUiToolbarButton>
 						)}
 						{Minimap && (
@@ -64,10 +64,9 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								type="icon"
 								data-testid="minimap.toggle-button"
 								title={msg('navigation-zone.toggle-minimap')}
-								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
 							>
-								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
+								<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />
 							</TldrawUiToolbarButton>
 						)}
 					</>

package/src/lib/ui/components/Spinner.tsx

@@ -1,3 +1,4 @@
+import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -5,28 +6,5 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return (
-		<svg
-			width={16}
-			height={16}
-			viewBox="0 0 16 16"
-			{...props}
-			aria-label={msg('app.loading')}
-			aria-hidden="false"
-		>
-			<g strokeWidth={2} fill="none" fillRule="evenodd">
-				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-		</svg>
-	)
+	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
 }

package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -451,6 +451,7 @@ export function OpacitySlider() {
 			steps={tldrawSupportedOpacities.length - 1}
 			title={msg('style-panel.opacity')}
 			onHistoryMark={onHistoryMark}
+			ariaValueModifier={25}
 		/>
 	)
 }

package/src/lib/ui/components/primitives/TldrawUiDialog.tsx

@@ -65,7 +65,7 @@ export interface TLUiDialogBodyProps {
 /** @public @react */
 export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {
 	return (
-		<div className={classNames('tlui-dialog__body', className)} style={style}>
+		<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>
 			{children}
 		</div>
 	)

package/src/lib/ui/components/primitives/TldrawUiSlider.tsx

@@ -13,6 +13,7 @@ export interface TLUiSliderProps {
 	onValueChange(value: number): void
 	onHistoryMark(id: string): void
 	'data-testid'?: string
+	ariaValueModifier?: number
 }
 
 /** @public @react */
@@ -26,6 +27,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 		label,
 		onValueChange,
 		['data-testid']: testId,
+		ariaValueModifier = 1,
 	}: TLUiSliderProps,
 	ref
 ) {
@@ -81,7 +83,9 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 				</_Slider.Track>
 				{value !== null && (
 					<_Slider.Thumb
-						aria-label={msg('style-panel.opacity')}
+						aria-valuemin={(min ?? 0) * ariaValueModifier}
+						aria-valuenow={value * ariaValueModifier}
+						aria-valuemax={steps * ariaValueModifier}
 						className="tlui-slider__thumb"
 						dir="ltr"
 						ref={ref}

package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx

@@ -76,6 +76,10 @@ export const TldrawUiToolbarToggleGroup = ({
 		<_Toolbar.ToggleGroup
 			type={type}
 			{...props}
+			// TODO: this fixes a bug in Radix until they fix it.
+			// https://github.com/radix-ui/primitives/issues/3188
+			// https://github.com/radix-ui/primitives/pull/3189
+			role="radiogroup"
 			className={classnames('tlui-toolbar-toggle-group', className)}
 		>
 			{children}

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -352,7 +352,7 @@ async function handleClipboardThings(editor: Editor, things: ClipboardThing[], p
 
 							if (tldrawHtmlComment) {
 								try {
-									// First try parsing as plain JSON (version 2 format)
+									// First try parsing as plain JSON (version 2/3 formats)
 									let json
 									try {
 										json = JSON.parse(tldrawHtmlComment)
@@ -380,19 +380,32 @@ async function handleClipboardThings(editor: Editor, things: ClipboardThing[], p
 									}
 
 									// Handle versioned clipboard format
-									if (json.version === 2) {
-										// Version 2: Assets are plain, decompress only other data
+									if (json.version === 3) {
+										// Version 3: Assets are plain, decompress only other data
 										try {
-											r({ type: 'tldraw', data: json.data })
+											const otherData = JSON.parse(
+												lz.decompressFromBase64(json.data.otherCompressed) || '{}'
+											)
+											const reconstructedData = {
+												assets: json.data.assets || [],
+												...otherData,
+											}
+
+											r({ type: 'tldraw', data: reconstructedData })
 											return
 										} catch (error) {
 											r({
 												type: 'error',
 												data: json,
-												reason: `failed to parse version 2 clipboard data: ${error}`,
+												reason: `failed to decompress version 2 clipboard data: ${error}`,
 											})
 											return
 										}
+									}
+									if (json.version === 2) {
+										// Version 2: Everything is plain, this had issues with encoding... :-/
+										// TODO: nix this support after some time.
+										r({ type: 'tldraw', data: json.data })
 									} else {
 										// Version 1 or no version: Legacy format
 										if (typeof json.data === 'string') {
@@ -584,13 +597,21 @@ const handleNativeOrMenuCopy = async (editor: Editor) => {
 		return
 	}
 
-	// Version 2: Don't compress anything.
-	const stringifiedClipboard = JSON.stringify({
+	// Use versioned clipboard format for better compression
+	// Version 3: Don't compress assets, only compress other data
+	const { assets, ...otherData } = content
+	const clipboardData = {
 		type: 'application/tldraw',
 		kind: 'content',
-		version: 2,
-		data: content,
-	})
+		version: 3,
+		data: {
+			assets: assets || [], // Plain JSON, no compression
+			otherCompressed: lz.compressToBase64(JSON.stringify(otherData)), // Only compress non-asset data
+		},
+	}
+
+	// Don't compress the final structure - just use plain JSON
+	const stringifiedClipboard = JSON.stringify(clipboardData)
 
 	if (typeof navigator === 'undefined') {
 		return

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.15.0-canary.d251cd98b4e1'
+export const version = '3.15.0-canary.d48536dd9c3c'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-09T14:00:46.148Z',
-	patch: '2025-07-09T14:00:46.148Z',
+	minor: '2025-07-16T14:24:26.375Z',
+	patch: '2025-07-16T14:24:26.375Z',
 }

package/src/lib/ui.css

@@ -964,7 +964,7 @@
 	justify-content: center;
 	border-radius: 99px;
 	opacity: 0;
-	animation: fade-in;
+	animation: tl-fade-in;
 	animation-duration: 0.12s;
 	animation-delay: 2s;
 	animation-fill-mode: forwards;
@@ -1108,20 +1108,6 @@
 	display: none;
 }
 
-.tlui-navigation-panel__toggle .tlui-icon {
-	opacity: 0.24;
-}
-
-.tlui-navigation-panel__toggle:active .tlui-icon {
-	opacity: 1;
-}
-
-@media (hover: hover) {
-	.tlui-navigation-panel__toggle:hover .tlui-icon {
-		opacity: 1;
-	}
-}
-
 /* Minimap */
 
 .tlui-minimap {
@@ -1379,11 +1365,11 @@
 
 @media (prefers-reduced-motion: no-preference) {
 	.tlui-toast__container[data-state='open'] {
-		animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
 	}
 
 	.tlui-toast__container[data-state='closed'] {
-		animation: hide 100ms ease-in;
+		animation: tlui-fade-out 100ms ease-in;
 	}
 
 	.tlui-toast__container[data-swipe='move'] {
@@ -1396,7 +1382,7 @@
 	}
 
 	.tlui-toast__container[data-swipe='end'] {
-		animation: swipe-out 100ms ease-out;
+		animation: tlui-slide-out 100ms ease-out;
 	}
 }
 
@@ -1411,7 +1397,7 @@
 	z-index: var(--layer-canvas-overlays);
 	background-color: var(--color-overlay);
 	pointer-events: all;
-	animation: fadeIn 0.12s ease-out;
+	animation: tl-fade-in 0.12s ease-out;
 	display: grid;
 	place-items: center;
 	overflow-y: auto;
@@ -1978,7 +1964,7 @@
 }
 
 /* ------------------- Animations ------------------- */
-@keyframes hide {
+@keyframes tlui-fade-out {
 	0% {
 		opacity: 1;
 	}
@@ -1987,7 +1973,7 @@
 	}
 }
 
-@keyframes slide-in {
+@keyframes tlui-slide-in {
 	from {
 		transform: translateX(calc(100% + var(--space-3)));
 	}
@@ -1996,7 +1982,7 @@
 	}
 }
 
-@keyframes swipe-out {
+@keyframes tlui-slide-out {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));
 	}