tldraw 3.16.0-next.fe14f1b4181f → 4.0.0

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

@@ -0,0 +1,436 @@
+import {
+	atom,
+	BaseBoxShapeUtil,
+	Circle2d,
+	createShapeId,
+	Geometry2d,
+	RecordProps,
+	resizeBox,
+	StateNode,
+	T,
+	TLBaseShape,
+	TLEventHandlers,
+	TLGeoShape,
+	TLResizeInfo,
+	TLShape,
+	TLTextShape,
+	toRichText,
+	Vec,
+} from '@tldraw/editor'
+import { TestEditor } from './TestEditor'
+
+// Custom Circle Clip Shape Definition
+export type CircleClipShape = TLBaseShape<
+	'circle-clip',
+	{
+		w: number
+		h: number
+	}
+>
+
+export const isClippingEnabled$ = atom('isClippingEnabled', true)
+
+export class CircleClipShapeUtil extends BaseBoxShapeUtil<CircleClipShape> {
+	static override type = 'circle-clip' as const
+	static override props: RecordProps<CircleClipShape> = {
+		w: T.number,
+		h: T.number,
+	}
+
+	override canBind() {
+		return false
+	}
+
+	override canReceiveNewChildrenOfType(shape: TLShape) {
+		return !shape.isLocked
+	}
+
+	override getDefaultProps(): CircleClipShape['props'] {
+		return {
+			w: 200,
+			h: 200,
+		}
+	}
+
+	override getGeometry(shape: CircleClipShape): Geometry2d {
+		const radius = Math.min(shape.props.w, shape.props.h) / 2
+		return new Circle2d({
+			radius,
+			x: shape.props.w / 2 - radius,
+			y: shape.props.h / 2 - radius,
+			isFilled: true,
+		})
+	}
+
+	override getClipPath(shape: CircleClipShape): Vec[] | undefined {
+		// Generate a polygon approximation of the circle
+		const centerX = shape.props.w / 2
+		const centerY = shape.props.h / 2
+		const radius = Math.min(shape.props.w, shape.props.h) / 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
+			points.push(new Vec(x, y))
+		}
+
+		return points
+	}
+
+	override shouldClipChild(_child: TLShape): boolean {
+		// For now, clip all children - we removed the onlyClipText feature for simplicity
+		return isClippingEnabled$.get()
+	}
+
+	override component(_shape: CircleClipShape) {
+		// For testing purposes, we'll just return null
+		// In a real implementation, this would return JSX
+		return null as any
+	}
+
+	override indicator(_shape: CircleClipShape) {
+		// For testing purposes, we'll just return null
+		// In a real implementation, this would return JSX
+		return null as any
+	}
+
+	override onResize(shape: CircleClipShape, info: TLResizeInfo<CircleClipShape>) {
+		return resizeBox(shape, info)
+	}
+}
+
+export class CircleClipShapeTool extends StateNode {
+	static override id = 'circle-clip'
+
+	override onEnter(): void {
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
+	}
+
+	override onPointerDown(info: Parameters<TLEventHandlers['onPointerDown']>[0]) {
+		if (info.target === 'canvas') {
+			const { originPagePoint } = this.editor.inputs
+
+			this.editor.createShape<CircleClipShape>({
+				type: 'circle-clip',
+				x: originPagePoint.x - 100,
+				y: originPagePoint.y - 100,
+				props: {
+					w: 200,
+					h: 200,
+				},
+			})
+		}
+	}
+}
+
+let editor: TestEditor
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+const ids = {
+	circleClip1: createShapeId('circleClip1'),
+	circleClip2: createShapeId('circleClip2'),
+	text1: createShapeId('text1'),
+	geo1: createShapeId('geo1'),
+	geo2: createShapeId('geo2'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor({
+		shapeUtils: [CircleClipShapeUtil],
+		tools: [CircleClipShapeTool],
+	})
+
+	// Reset clipping state
+	isClippingEnabled$.set(true)
+})
+
+describe('CircleClipShapeUtil', () => {
+	describe('shape creation and properties', () => {
+		it('should create a circle clip shape with default properties', () => {
+			editor.createShape<CircleClipShape>({
+				id: ids.circleClip1,
+				type: 'circle-clip',
+				x: 100,
+				y: 100,
+				props: {
+					w: 200,
+					h: 200,
+				},
+			})
+
+			const shape = editor.getShape<CircleClipShape>(ids.circleClip1)
+			expect(shape).toBeDefined()
+			expect(shape!.type).toBe('circle-clip')
+			expect(shape!.props.w).toBe(200)
+			expect(shape!.props.h).toBe(200)
+		})
+
+		it('should use default props when not specified', () => {
+			editor.createShape<CircleClipShape>({
+				id: ids.circleClip1,
+				type: 'circle-clip',
+				x: 100,
+				y: 100,
+				props: {},
+			})
+
+			const shape = editor.getShape<CircleClipShape>(ids.circleClip1)
+			expect(shape!.props.w).toBe(200) // default from getDefaultProps
+			expect(shape!.props.h).toBe(200) // default from getDefaultProps
+		})
+	})
+
+	describe('geometry and clipping', () => {
+		it('should generate correct circle geometry', () => {
+			editor.createShape<CircleClipShape>({
+				id: ids.circleClip1,
+				type: 'circle-clip',
+				x: 100,
+				y: 100,
+				props: {
+					w: 200,
+					h: 200,
+				},
+			})
+
+			const shape = editor.getShape<CircleClipShape>(ids.circleClip1)
+			const util = editor.getShapeUtil<CircleClipShape>('circle-clip')
+			const geometry = util.getGeometry(shape!)
+
+			expect(geometry).toBeDefined()
+			expect(geometry.bounds).toBeDefined()
+			expect(geometry.bounds.width).toBe(200)
+			expect(geometry.bounds.height).toBe(200)
+		})
+
+		it('should generate clip path for circle', () => {
+			editor.createShape<CircleClipShape>({
+				id: ids.circleClip1,
+				type: 'circle-clip',
+				x: 100,
+				y: 100,
+				props: {
+					w: 200,
+					h: 200,
+				},
+			})
+
+			const shape = editor.getShape<CircleClipShape>(ids.circleClip1)
+			const util = editor.getShapeUtil<CircleClipShape>('circle-clip')
+			const clipPath = util.getClipPath?.(shape!)
+			if (!clipPath) throw new Error('Clip path is undefined')
+
+			expect(clipPath).toBeDefined()
+			expect(Array.isArray(clipPath)).toBe(true)
+			expect(clipPath.length).toBeGreaterThan(0)
+
+			// 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
+
+			clipPath.forEach((point) => {
+				const distance = Math.sqrt(Math.pow(point.x - centerX, 2) + Math.pow(point.y - centerY, 2))
+				expect(distance).toBeCloseTo(radius, 0)
+			})
+		})
+	})
+
+	describe('child clipping behavior', () => {
+		it('should clip children when clipping is enabled', () => {
+			editor.createShape<CircleClipShape>({
+				id: ids.circleClip1,
+				type: 'circle-clip',
+				x: 100,
+				y: 100,
+				props: {
+					w: 200,
+					h: 200,
+				},
+			})
+
+			editor.createShape<TLTextShape>({
+				id: ids.text1,
+				type: 'text',
+				x: 0,
+				y: 0,
+				parentId: ids.circleClip1,
+				props: {
+					richText: toRichText('Test text'),
+				},
+			})
+
+			const util = editor.getShapeUtil<CircleClipShape>('circle-clip')
+			const textShape = editor.getShape<TLTextShape>(ids.text1)
+
+			// Clipping should be enabled by default
+			expect(isClippingEnabled$.get()).toBe(true)
+			expect(util.shouldClipChild?.(textShape!)).toBe(true)
+			expect(editor.getShapeClipPath(ids.text1)).toBeDefined()
+		})
+
+		it('should not clip children when clipping is disabled', () => {
+			isClippingEnabled$.set(false)
+
+			editor.createShape<CircleClipShape>({
+				id: ids.circleClip1,
+				type: 'circle-clip',
+				x: 100,
+				y: 100,
+				props: {
+					w: 200,
+					h: 200,
+				},
+			})
+
+			editor.createShape<TLTextShape>({
+				id: ids.text1,
+				type: 'text',
+				x: 0,
+				y: 0,
+				parentId: ids.circleClip1,
+				props: {
+					richText: toRichText('Test text'),
+				},
+			})
+
+			const util = editor.getShapeUtil<CircleClipShape>('circle-clip')
+			const textShape = editor.getShape<TLTextShape>(ids.text1)
+
+			expect(isClippingEnabled$.get()).toBe(false)
+			expect(util.shouldClipChild?.(textShape!)).toBe(false)
+			expect(editor.getShapeClipPath(ids.text1)).toBeUndefined()
+		})
+	})
+})
+
+describe('Integration tests', () => {
+	it('should create and manage circle clip shapes with children', () => {
+		// Create circle clip shape
+		editor.createShape<CircleClipShape>({
+			id: ids.circleClip1,
+			type: 'circle-clip',
+			x: 100,
+			y: 100,
+			props: {
+				w: 200,
+				h: 200,
+			},
+		})
+
+		// Add text child
+		editor.createShape<TLTextShape>({
+			id: ids.text1,
+			type: 'text',
+			x: 50,
+			y: 50,
+			parentId: ids.circleClip1,
+			props: {
+				richText: toRichText('Clipped text'),
+			},
+		})
+
+		// Add geo child
+		editor.createShape<TLGeoShape>({
+			id: ids.geo1,
+			type: 'geo',
+			x: 150,
+			y: 150,
+			parentId: ids.circleClip1,
+			props: {
+				w: 50,
+				h: 50,
+			},
+		})
+
+		const circleClipShape = editor.getShape<CircleClipShape>(ids.circleClip1)
+		const textShape = editor.getShape<TLTextShape>(ids.text1)
+		const geoShape = editor.getShape<TLGeoShape>(ids.geo1)
+
+		expect(circleClipShape).toBeDefined()
+		expect(textShape!.parentId).toBe(ids.circleClip1)
+		expect(geoShape!.parentId).toBe(ids.circleClip1)
+
+		// Verify clipping behavior
+		const util = editor.getShapeUtil<CircleClipShape>('circle-clip')
+		expect(util.shouldClipChild?.(textShape!)).toBe(true)
+		expect(util.shouldClipChild?.(geoShape!)).toBe(true)
+		expect(editor.getShapeClipPath(ids.text1)).toBeDefined()
+		expect(editor.getShapeClipPath(ids.geo1)).toBeDefined()
+
+		// Test clipping toggle
+		isClippingEnabled$.set(false)
+		expect(util.shouldClipChild?.(textShape!)).toBe(false)
+		expect(util.shouldClipChild?.(geoShape!)).toBe(false)
+		expect(editor.getShapeClipPath(ids.text1)).toBeUndefined()
+		expect(editor.getShapeClipPath(ids.geo1)).toBeUndefined()
+	})
+
+	it('should handle multiple circle clip shapes independently', () => {
+		// Create two circle clip shapes
+		editor.createShape<CircleClipShape>({
+			id: ids.circleClip1,
+			type: 'circle-clip',
+			x: 100,
+			y: 100,
+			props: {
+				w: 200,
+				h: 200,
+			},
+		})
+
+		editor.createShape<CircleClipShape>({
+			id: ids.circleClip2,
+			type: 'circle-clip',
+			x: 400,
+			y: 100,
+			props: {
+				w: 150,
+				h: 150,
+			},
+		})
+
+		// Add children to both
+		editor.createShape<TLTextShape>({
+			id: ids.text1,
+			type: 'text',
+			x: 0,
+			y: 0,
+			parentId: ids.circleClip1,
+			props: {
+				richText: toRichText('First clip'),
+			},
+		})
+
+		editor.createShape<TLTextShape>({
+			id: ids.geo1,
+			type: 'text',
+			x: 0,
+			y: 0,
+			parentId: ids.circleClip2,
+			props: {
+				richText: toRichText('Second clip'),
+			},
+		})
+
+		const util = editor.getShapeUtil<CircleClipShape>('circle-clip')
+		const text1 = editor.getShape<TLTextShape>(ids.text1)
+		const text2 = editor.getShape<TLTextShape>(ids.geo1)
+
+		// Both should be clipped when enabled
+		expect(util.shouldClipChild?.(text1!)).toBe(true)
+		expect(util.shouldClipChild?.(text2!)).toBe(true)
+
+		// Both should not be clipped when disabled
+		isClippingEnabled$.set(false)
+		expect(util.shouldClipChild?.(text1!)).toBe(false)
+		expect(util.shouldClipChild?.(text2!)).toBe(false)
+	})
+})

package/src/test/frames.test.ts

@@ -1680,3 +1680,18 @@ it('drops into the top-most frame, if there is one', () => {
 
 	expect(editor.getShape(rect)?.parentId).toBe(editor.getCurrentPageId())
 })
+
+it('does not get drop children of nested frame if they are occluded from the outer frame', () => {
+	const frame1Id = dragCreateFrame({ down: [100, 100], move: [300, 300], up: [300, 300] })
+	const frame2Id = dragCreateFrame({ down: [150, 150], move: [290, 290], up: [290, 290] })
+
+	const rect1 = createRect({ pos: [280, 160], size: [10, 30] })
+
+	expect(editor.getShape(rect1)?.parentId).toBe(frame2Id)
+	expect(editor.getShape(frame2Id)?.parentId).toBe(frame1Id)
+
+	editor.select(frame2Id)
+	editor.translateSelection(30, 0)
+
+	expect(editor.getShape(rect1)?.parentId).toBe(frame2Id)
+})

package/src/test/getCulledShapes.test.tsx

@@ -1,12 +1,50 @@
-import { Box, TLShapeId, createShapeId } from '@tldraw/editor'
+import {
+	BaseBoxShapeUtil,
+	Box,
+	RecordProps,
+	T,
+	TLBaseShape,
+	TLShapeId,
+	createShapeId,
+} from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
+// Custom uncullable shape type for testing canCull override
+type UncullableShape = TLBaseShape<'uncullable', { w: number; h: number }>
+
+class UncullableShapeUtil extends BaseBoxShapeUtil<UncullableShape> {
+	static override type = 'uncullable' as const
+	static override props: RecordProps<UncullableShape> = {
+		w: T.number,
+		h: T.number,
+	}
+
+	override canCull() {
+		return false
+	}
+
+	override getDefaultProps(): UncullableShape['props'] {
+		return {
+			w: 100,
+			h: 100,
+		}
+	}
+
+	override component() {
+		return <div>Uncullable shape</div>
+	}
+
+	override indicator() {
+		return <div>Uncullable shape</div>
+	}
+}
+
 let editor: TestEditor
 
 beforeEach(() => {
-	editor = new TestEditor()
+	editor = new TestEditor({ shapeUtils: [UncullableShapeUtil] })
 	editor.setScreenBounds({ x: 0, y: 0, w: 1800, h: 900 })
 })
 
@@ -203,3 +241,34 @@ it('works for shapes that are outside of the viewport, but are then moved inside
 	// Arrow should also not be culled
 	expect(editor.getCulledShapes()).toEqual(new Set())
 })
+
+it('respects canCull override - shapes that cannot be culled are never culled', () => {
+	const cullableShapeId = createShapeId()
+	const uncullableShapeId = createShapeId()
+
+	// Create both shapes outside the viewport
+	editor.createShapes([
+		{
+			id: cullableShapeId,
+			type: 'geo',
+			x: -2000, // Way outside viewport
+			y: -2000,
+			props: { w: 100, h: 100 },
+		},
+		{
+			id: uncullableShapeId,
+			type: 'uncullable',
+			x: -2000, // Way outside viewport
+			y: -2000,
+			props: { w: 100, h: 100 },
+		},
+	])
+
+	const culledShapes = editor.getCulledShapes()
+
+	// The regular geo shape should be culled since it's outside the viewport
+	expect(culledShapes).toContain(cullableShapeId)
+
+	// The uncullable shape should NOT be culled even though it's outside the viewport
+	expect(culledShapes).not.toContain(uncullableShapeId)
+})

package/tldraw.css

@@ -693,11 +693,17 @@ input,
 }
 
 .tl-text-measure {
-	position: absolute;
 	z-index: var(--tl-layer-canvas-hidden);
+	opacity: 0;
+	visibility: hidden;
+
+	/* pointer-events: all; */
+	/* opacity: 1; */
+	/* z-index: 99999;  */
+
+	position: absolute;
 	top: 0px;
 	left: 0px;
-	opacity: 0;
 	width: max-content;
 	box-sizing: border-box;
 	pointer-events: none;
@@ -708,7 +714,6 @@ input,
 	border: none;
 	user-select: none;
 	contain: style paint;
-	visibility: hidden;
 	/* 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;
@@ -1959,7 +1964,7 @@ it from receiving any pointer events or affecting the cursor. */
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin: -4px 0px;
+	margin-top: -4px;
 }
 
 .tlui-button__menu::after {
@@ -2285,6 +2290,10 @@ it from receiving any pointer events or affecting the cursor. */
 	-webkit-user-select: auto !important;
 }
 
+.tlui-input::placeholder {
+	color: var(--tl-color-text-3);
+}
+
 .tlui-input__wrapper {
 	width: 100%;
 	height: 44px;
@@ -2369,6 +2378,12 @@ it from receiving any pointer events or affecting the cursor. */
 	box-shadow: var(--tl-shadow-3);
 }
 
+@media (max-height: 600px) {
+	.tlui-menu {
+		max-height: 70vh;
+	}
+}
+
 .tlui-menu::-webkit-scrollbar {
 	display: none;
 }
@@ -2778,7 +2793,7 @@ it from receiving any pointer events or affecting the cursor. */
 	max-width: 148px;
 }
 
-.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+.tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {
 	border-radius: 10px;
 	outline: 2px solid var(--tl-color-text);
 	outline-offset: -5px;
@@ -2798,21 +2813,48 @@ it from receiving any pointer events or affecting the cursor. */
 	flex-direction: column;
 }
 
-.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
+/*
+add a border to the bottom of all but the last section. we have to handle empty sections too, which
+are hidden and shouldn't be counted
+*/
+.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
 	border-bottom: 1px solid var(--tl-color-divider);
 }
+/*
+if a section ends with a slider and we're adding a border, we need some extra space for visual
+balance. we need to handle empty sections as above. is this the most complex css selector in all of
+tldraw? probably.
+*/
+.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
+		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
+	) {
+	margin-bottom: 7px;
+}
 
 .tlui-style-panel__section:empty {
 	display: none;
 }
 
+/*
+ * This is used in a couple places, like Align and Vertical Align.
+ * It's because we have a toolbar with a Toggle Group but then an adjacent button
+ * next to it that opens a popup.
+ */
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
+	flex-wrap: wrap;
+}
+
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
+	margin-left: -2px;
+}
+
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);
 }
 
 .tlui-style-panel__dropdown-picker:only-child {
-	width: 100%;
+	flex: 1;
 }
 
 .tlui-style-panel__double-select-picker {

package/dist-cjs/lib/ui/components/StylePanel/DoubleDropdownPicker.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx"],
-  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\ninterface DoubleDropdownPickerProps<T extends string> {\n\tuiTypeA: string\n\tuiTypeB: string\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tlabelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\titemsA: StyleValuesForUi<T>\n\titemsB: StyleValuesForUi<T>\n\tstyleA: StyleProp<T>\n\tstyleB: StyleProp<T>\n\tvalueA: SharedStyle<T>\n\tvalueB: SharedStyle<T>\n\tonValueChange(style: StyleProp<T>, value: T): void\n}\n\nfunction DoubleDropdownPickerInner<T extends string>({\n\tlabel,\n\tuiTypeA,\n\tuiTypeB,\n\tlabelA,\n\tlabelB,\n\titemsA,\n\titemsB,\n\tstyleA,\n\tstyleB,\n\tvalueA,\n\tvalueB,\n\tonValueChange,\n}: DoubleDropdownPickerProps<T>) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst [isOpenA, setIsOpenA] = React.useState(false)\n\tconst [isOpenB, setIsOpenB] = React.useState(false)\n\n\tconst iconA = React.useMemo(\n\t\t() =>\n\t\t\titemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsA, valueA]\n\t)\n\tconst iconB = React.useMemo(\n\t\t() =>\n\t\t\titemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??\n\t\t\t'mixed',\n\t\t[itemsB, valueB]\n\t)\n\n\tif (valueA === undefined && valueB === undefined) return null\n\n\tconst idA = `style panel ${uiTypeA} A`\n\tconst idB = `style panel ${uiTypeB} B`\n\treturn (\n\t\t<div className=\"tlui-style-panel__double-select-picker\">\n\t\t\t<div title={msg(label)} className=\"tlui-style-panel__double-select-picker-label\">\n\t\t\t\t{msg(label)}\n\t\t\t</div>\n\t\t\t<TldrawUiToolbar orientation=\"horizontal\" label={msg(label)}>\n\t\t\t\t<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelA) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueA === null || valueA.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconA} small invertIcon />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={80} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelA)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsA.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeA}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleA, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idA, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenA(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelA)} \u2014 ${msg(`${uiTypeA}-style.${item.value}`)}`}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} invertIcon />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t\t<TldrawUiPopover id={idB} open={isOpenB} onOpenChange={setIsOpenB}>\n\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}`}\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\tmsg(labelB) +\n\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t(valueB === null || valueB.type === 'mixed'\n\t\t\t\t\t\t\t\t\t? msg('style-panel.mixed')\n\t\t\t\t\t\t\t\t\t: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={iconB} small />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\" sideOffset={116} alignOffset={0}>\n\t\t\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={msg(labelB)}>\n\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t\t{itemsB.map((item) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\ttitle={`${msg(labelB)} \u2014 ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiTypeB}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange(styleB, item.value)\n\t\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(idB, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpenB(false)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t</TldrawUiPopover>\n\t\t\t</TldrawUiToolbar>\n\t\t</div>\n\t)\n}\n\n// need to memo like this to get generics\nexport const DoubleDropdownPicker = React.memo(\n\tDoubleDropdownPickerInner\n) as typeof DoubleDropdownPickerInner\n"],
-  "mappings": "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",
-  "names": []
-}