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

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 : [8, 0],
+		margin: arrowKind === 'elbow' ? 8 : 0,
 		filter: (targetShape) => {
 			return (
 				!targetShape.isLocked &&
@@ -187,7 +187,6 @@ 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(--tl-color-background)"
+				stroke="var(--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(--tl-color-background)"
+				stroke="var(--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(--tl-color-background)"
+				stroke="var(--color-background)"
 				strokeWidth={2}
 				paintOrder="stroke"
 			>

package/src/lib/shapes/arrow/toolStates/Pointing.tsx

@@ -118,7 +118,6 @@ export class Pointing extends StateNode {
 		const change = util.onHandleDrag?.(shape, {
 			handle: { ...startHandle, x: 0, y: 0 },
 			isPrecise: true,
-			isCreatingShape: true,
 			initial: initial,
 		})
 
@@ -146,7 +145,6 @@ export class Pointing extends StateNode {
 			const change = util.onHandleDrag?.(shape, {
 				handle: { ...startHandle, x: 0, y: 0 },
 				isPrecise: this.isPrecise,
-				isCreatingShape: true,
 				initial: initial,
 			})
 
@@ -164,7 +162,6 @@ export class Pointing extends StateNode {
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },
 				isPrecise: false,
-				isCreatingShape: true,
 				initial: initial,
 			})
 

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

@@ -1,4 +1,5 @@
 import { TestEditor } from '../../../test/TestEditor'
+import { DrawShapeTool } from './DrawShapeTool'
 
 let editor: TestEditor
 
@@ -9,6 +10,10 @@ 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,7 +14,6 @@ import {
 	VecLike,
 	drawShapeMigrations,
 	drawShapeProps,
-	getColorValue,
 	last,
 	lerp,
 	rng,
@@ -52,6 +51,10 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 		maxPointsPerShape: 600,
 	}
 
+	override canTabTo() {
+		return false
+	}
+
 	override hideResizeHandles(shape: TLDrawShape) {
 		return getIsDot(shape)
 	}
@@ -290,7 +293,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 				<path
 					d={svgInk(allPointsFromSegments, options)}
 					strokeLinecap="round"
-					fill={getColorValue(theme, shape.props.color, 'solid')}
+					fill={theme[shape.props.color].solid}
 				/>
 			</>
 		)
@@ -314,8 +317,8 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 			<path
 				d={solidStrokePath}
 				strokeLinecap="round"
-				fill={isDot ? getColorValue(theme, shape.props.color, 'solid') : 'none'}
-				stroke={getColorValue(theme, shape.props.color, 'solid')}
+				fill={isDot ? theme[shape.props.color].solid : 'none'}
+				stroke={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(--tl-color-background)',
+							background: embedInfo?.definition.backgroundColor ?? 'var(--color-background)',
 							width: w,
 							height: h,
 						}}

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

@@ -19,7 +19,6 @@ import {
 	compact,
 	frameShapeMigrations,
 	frameShapeProps,
-	getColorValue,
 	getDefaultColorTheme,
 	lerp,
 	resizeBox,
@@ -220,30 +219,29 @@ 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 colorToUse = showFrameColors ? shape.props.color : 'black'
-		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
-		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
-		const frameHeadingStroke = showFrameColors
-			? getColorValue(theme, colorToUse, 'frameHeadingStroke')
-			: theme.background
-		const frameHeadingFill = showFrameColors
-			? getColorValue(theme, colorToUse, 'frameHeadingFill')
-			: theme.background
-		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
+
+		const color = theme[shape.props.color]
+		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
+		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
+		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
+		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
+		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
 
 		return (
 			<>
 				<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}
-						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)))`,
-						}}
+						y={-0.5 / zoomLevel}
+						x={-0.5 / zoomLevel}
 					/>
 				</SVGContainer>
 				{isCreating ? null : (
@@ -281,16 +279,13 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		const text = createTextJsxFromSpans(this.editor, spans, opts)
 
 		const showFrameColors = this.options.showColors
-		const colorToUse = showFrameColors ? shape.props.color : 'black'
-		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
-		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
-		const frameHeadingStroke = showFrameColors
-			? getColorValue(theme, colorToUse, 'frameHeadingStroke')
-			: theme.background
-		const frameHeadingFill = showFrameColors
-			? getColorValue(theme, colorToUse, 'frameHeadingFill')
-			: theme.background
-		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
+
+		const color = theme[shape.props.color]
+		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
+		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
+		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
+		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
+		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
 
 		return (
 			<>

package/src/lib/shapes/frame/components/FrameHeading.tsx

@@ -64,7 +64,7 @@ export const FrameHeading = memo(function FrameHeading({
 				overflow: isEditing ? 'visible' : 'hidden',
 				maxWidth: `calc(var(--tl-zoom) * ${
 					side === 0 || side === 2 ? Math.ceil(width) : Math.ceil(height)
-				}px + ${showColors ? '0px' : 'var(--tl-frame-offset-width)'})`,
+				}px + ${showColors ? '0px' : 'var(--frame-offset-width)'})`,
 				bottom: '100%',
 				transform: `${translation} scale(var(--tl-scale)) translateX(${offsetX}px)`,
 			}}

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -18,7 +18,6 @@ import {
 	exhaustiveSwitchError,
 	geoShapeMigrations,
 	geoShapeProps,
-	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -221,7 +220,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isOnlySelected}
-							labelColor={getColorValue(theme, props.labelColor, 'solid')}
+							labelColor={theme[props.labelColor].solid}
 							wrap
 						/>
 					</HTMLContainer>
@@ -279,7 +278,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					align={props.align}
 					verticalAlign={props.verticalAlign}
 					richText={props.richText}
-					labelColor={getColorValue(theme, props.labelColor, 'solid')}
+					labelColor={theme[props.labelColor].solid}
 					bounds={bounds}
 					padding={LABEL_PADDING}
 				/>

package/src/lib/shapes/geo/components/GeoShapeBody.tsx

@@ -1,4 +1,4 @@
-import { getColorValue, TLGeoShape } from '@tldraw/editor'
+import { TLGeoShape } from '@tldraw/editor'
 import { ShapeFill } from '../../shared/ShapeFill'
 import { STROKE_SIZES } from '../../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../../shared/useDefaultColorTheme'
@@ -33,7 +33,7 @@ export function GeoShapeBody({
 				strokeWidth,
 				forceSolid,
 				randomSeed: shape.id,
-				props: { fill: 'none', stroke: getColorValue(theme, color, 'solid') },
+				props: { fill: 'none', stroke: theme[color].solid },
 			})}
 		</>
 	)

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -10,7 +10,6 @@ import {
 	TLHighlightShapeProps,
 	TLResizeInfo,
 	VecLike,
-	getColorValue,
 	highlightShapeMigrations,
 	highlightShapeProps,
 	last,
@@ -52,6 +51,9 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 		overlayOpacity: 0.35,
 	}
 
+	override canTabTo() {
+		return false
+	}
 	override hideResizeHandles(shape: TLHighlightShape) {
 		return getIsDot(shape)
 	}
@@ -290,12 +292,7 @@ function HighlightRenderer({
 			: getShapeDot(shape.props.segments[0].points[0])
 
 	const colorSpace = useColorSpace()
-
-	const color = getColorValue(
-		theme,
-		shape.props.color,
-		colorSpace === 'p3' ? 'highlightP3' : 'highlightSrgb'
-	)
+	const color = theme[shape.props.color].highlight[colorSpace]
 
 	return (
 		<path

package/src/lib/shapes/image/ImageShapeUtil.tsx

@@ -314,9 +314,9 @@ const ImageShape = memo(function ImageShape({ shape }: { shape: TLImageShape })
 					overflow: 'hidden',
 					width: shape.props.w,
 					height: shape.props.h,
-					color: 'var(--tl-color-text-3)',
-					backgroundColor: 'var(--tl-color-low)',
-					border: '1px solid var(--tl-color-low-border)',
+					color: 'var(--color-text-3)',
+					backgroundColor: 'var(--color-low)',
+					border: '1px solid var(--color-low-border)',
 				}}
 			>
 				<div

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -7,7 +7,6 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TL } from '../../../test/test-jsx'
 
@@ -17,7 +16,7 @@ mockUniqueId(() => 'id' + nextId++)
 let editor: TestEditor
 const id = createShapeId('line1')
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -339,12 +338,12 @@ describe('Misc', () => {
 
 		expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
 
 		expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
 	})
 

package/src/lib/shapes/line/LineShapeUtil.tsx

@@ -12,7 +12,6 @@ import {
 	WeakCache,
 	ZERO_INDEX_KEY,
 	assert,
-	getColorValue,
 	getIndexAbove,
 	getIndexBetween,
 	getIndices,
@@ -36,6 +35,9 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	static override props = lineShapeProps
 	static override migrations = lineShapeMigrations
 
+	override canTabTo() {
+		return false
+	}
 	override hideResizeHandles() {
 		return true
 	}
@@ -146,6 +148,8 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	}
 
 	override onHandleDrag(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>) {
+		// we should only ever be dragging vertex handles
+		if (handle.type !== 'vertex') return
 		const newPoint = maybeSnapToGrid(new Vec(handle.x, handle.y), this.editor)
 		return {
 			...shape,
@@ -159,25 +163,6 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 		}
 	}
 
-	override onHandleDragStart(shape: TLLineShape, { handle }: TLHandleDragInfo<TLLineShape>) {
-		// 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 (handle.type === 'create') {
-			return {
-				...shape,
-				props: {
-					...shape.props,
-					points: {
-						...shape.props.points,
-						[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
-					},
-				},
-			}
-		}
-		return
-	}
-
 	component(shape: TLLineShape) {
 		return (
 			<SVGContainer style={{ minWidth: 50, minHeight: 50 }}>
@@ -347,10 +332,6 @@ function LineShapeSvg({
 		strokeWidth,
 		forceSolid,
 		randomSeed: shape.id,
-		props: {
-			transform: `scale(${scale})`,
-			stroke: getColorValue(theme, color, 'solid'),
-			fill: 'none',
-		},
+		props: { transform: `scale(${scale})`, stroke: theme[color].solid, fill: 'none' },
 	})
 }

package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Misc > resizes > line shape after resize 1`] = `
+exports[`Misc resizes: line shape after resize 1`] = `
 {
   "id": "shape:line1",
   "index": "a1",

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -17,7 +17,6 @@ import {
 	Vec,
 	WeakCache,
 	exhaustiveSwitchError,
-	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -289,7 +288,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					style={{
 						width: nw,
 						height: nh,
-						backgroundColor: getColorValue(theme, color, 'noteFill'),
+						backgroundColor: theme[color].note.fill,
 						borderBottom: hideShadows
 							? isDarkMode
 								? `${2 * scale}px solid rgb(20, 20, 20)`
@@ -309,11 +308,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isSelected}
-							labelColor={
-								labelColor === 'black'
-									? getColorValue(theme, color, 'noteText')
-									: getColorValue(theme, labelColor, 'fill')
-							}
+							labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill}
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
@@ -348,10 +343,9 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 				align={shape.props.align}
 				verticalAlign={shape.props.verticalAlign}
 				richText={shape.props.richText}
-				labelColor={getColorValue(theme, shape.props.color, 'noteText')}
+				labelColor={theme[shape.props.color].note.text}
 				bounds={bounds}
 				padding={LABEL_PADDING}
-				showTextOutline={false}
 			/>
 		)
 
@@ -362,7 +356,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					rx={1}
 					width={NOTE_SIZE}
 					height={bounds.h}
-					fill={getColorValue(theme, shape.props.color, 'noteFill')}
+					fill={theme[shape.props.color].note.fill}
 				/>
 				{textLabel}
 			</>

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

@@ -138,7 +138,7 @@ describe('PathBuilder', () => {
 				.toGeometry()
 
 			expect(geometry?.toSimpleSvgPath()).toMatchInlineSnapshot(
-				`"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"`
+				`"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"`
 			)
 		})
 	})

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

@@ -10,7 +10,6 @@ import {
 	Geometry2dFilters,
 	Geometry2dOptions,
 	getPerfectDashProps,
-	getVerticesCountForArcLength,
 	Group2d,
 	modulate,
 	PerfectDashTerminal,
@@ -122,7 +121,6 @@ export interface CubicBezierToPathBuilderCommand extends PathBuilderCommandBase
 	type: 'cubic'
 	cp1: VecModel
 	cp2: VecModel
-	resolution?: number
 }
 
 /** @internal */
@@ -319,17 +317,8 @@ 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
@@ -375,16 +364,7 @@ export class PathBuilder {
 			const cp2y = end.y - handleScale * d2.y
 
 			const bezierOpts = i === 0 ? opts : { ...opts, mergeWithPrevious: true }
-			this.cubicBezierToWithResolution(
-				end.x,
-				end.y,
-				cp1x,
-				cp1y,
-				cp2x,
-				cp2y,
-				bezierOpts,
-				resolutionPerSegment
-			)
+			this.cubicBezierTo(end.x, end.y, cp1x, cp1y, cp2x, cp2y, bezierOpts)
 		}
 
 		return this
@@ -398,18 +378,6 @@ 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({
@@ -420,7 +388,6 @@ export class PathBuilder {
 			cp2: { x: cp2X, y: cp2Y },
 			isClose: false,
 			opts,
-			resolution,
 		})
 		return this
 	}
@@ -1005,7 +972,6 @@ 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,7 +81,6 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}
-			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}

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

@@ -128,7 +128,6 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
-			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}
@@ -194,7 +193,6 @@ export interface RichTextSVGProps {
 	wrap?: boolean
 	labelColor: string
 	padding: number
-	showTextOutline?: boolean
 }
 
 /**
@@ -212,7 +210,6 @@ export function RichTextSVG({
 	wrap,
 	labelColor,
 	padding,
-	showTextOutline = true,
 }: RichTextSVGProps) {
 	const editor = useEditor()
 	const html = renderHtmlFromRichText(editor, richText)
@@ -248,7 +245,6 @@ export function RichTextSVG({
 		wordWrap: 'break-word' as const,
 		overflowWrap: 'break-word' as const,
 		whiteSpace: 'pre-wrap',
-		textShadow: showTextOutline ? 'var(--tl-text-outline)' : 'none',
 	}
 
 	return (

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

@@ -1,5 +1,4 @@
 import {
-	getColorValue,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	TLDefaultFillStyle,
@@ -30,13 +29,13 @@ export const ShapeFill = React.memo(function ShapeFill({
 			return null
 		}
 		case 'solid': {
-			return <path fill={getColorValue(theme, color, 'semi')} d={d} />
+			return <path fill={theme[color].semi} d={d} />
 		}
 		case 'semi': {
 			return <path fill={theme.solid} d={d} />
 		}
 		case 'fill': {
-			return <path fill={getColorValue(theme, color, 'fill')} d={d} />
+			return <path fill={theme[color].fill} d={d} />
 		}
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
@@ -54,13 +53,13 @@ export function PatternFill({ d, color, theme }: ShapeFillProps) {
 
 	return (
 		<>
-			<path fill={getColorValue(theme, color, 'pattern')} d={d} />
+			<path fill={theme[color].pattern} d={d} />
 			<path
 				fill={
 					svgExport
 						? `url(#${getHashPatternZoomName(1, theme.id)})`
 						: teenyTiny
-							? getColorValue(theme, color, 'semi')
+							? theme[color].semi
 							: `url(#${getHashPatternZoomName(zoomLevel, theme.id)})`
 				}
 				d={d}

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

@@ -21,7 +21,6 @@ export function SvgTextLabel({
 	bounds,
 	padding = 16,
 	stroke = true,
-	showTextOutline = true,
 }: {
 	fontSize: number
 	font: TLDefaultFontStyle
@@ -34,7 +33,6 @@ export function SvgTextLabel({
 	bounds: Box
 	padding?: number
 	stroke?: boolean
-	showTextOutline?: boolean
 }) {
 	const editor = useEditor()
 	const theme = useDefaultColorTheme()
@@ -70,10 +68,10 @@ export function SvgTextLabel({
 	const mainSpans = createTextJsxFromSpans(editor, spans, opts)
 
 	let outlineSpans = null
-	if (showTextOutline && stroke) {
+	if (stroke) {
 		opts.fill = theme.background
 		opts.stroke = theme.background
-		opts.strokeWidth = 3
+		opts.strokeWidth = 2
 		outlineSpans = createTextJsxFromSpans(editor, spans, opts)
 	}