tldraw 3.16.0-next.15f085081fd5 → 3.16.0-next.2f9d39693e4c

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/tldraw.css

@@ -2798,9 +2798,23 @@ 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;
@@ -2812,7 +2826,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .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": []
-}

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.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 { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\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 DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstylePanelType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\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\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\nexport const DropdownPicker = React.memo(DropdownPickerInner) as typeof DropdownPickerInner\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEI;AAjEJ,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAc5C,SAAS,oBAAsC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,uBAAO,yBAAyB,4BAA4B;AAC5D,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAGO,MAAM,iBAAiB,MAAM,KAAK,mBAAmB;",
-  "names": []
-}

package/dist-cjs/lib/ui/components/primitives/TldrawUiButtonPicker.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tTLDefaultColorTheme,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from './layout'\n\n/** @public */\nexport interface TLUiButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttheme: TLDefaultColorTheme\n\tonValueChange(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(\n\tprops: TLUiButtonPickerProps<T>\n) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\t// columns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t\tonHistoryMark,\n\t\ttheme,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<Wrapper asChild>\n\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\ttype=\"single\"\n\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst label = title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\tdata-isactive={value.type === 'shared' && value.value === item.value}\n\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t</Wrapper>\n\t)\n}) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement\n"],
-  "mappings": "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",
-  "names": ["TldrawUiButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
-}

package/dist-esm/lib/ui/components/StylePanel/DoubleDropdownPicker.mjs.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": "AAmEG,cAIC,YAJD;AAnEH,SAAiC,SAAS,iBAAiB;AAC3D,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAiB5C,SAAS,0BAA4C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAiC;AAChC,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAElD,QAAM,QAAQ,MAAM;AAAA,IACnB,MACC,OAAO,KAAK,CAAC,SAAS,OAAO,SAAS,YAAY,OAAO,UAAU,KAAK,KAAK,GAAG,QAChF;AAAA,IACD,CAAC,QAAQ,MAAM;AAAA,EAChB;AACA,QAAM,QAAQ,MAAM;AAAA,IACnB,MACC,OAAO,KAAK,CAAC,SAAS,OAAO,SAAS,YAAY,OAAO,UAAU,KAAK,KAAK,GAAG,QAChF;AAAA,IACD,CAAC,QAAQ,MAAM;AAAA,EAChB;AAEA,MAAI,WAAW,UAAa,WAAW,OAAW,QAAO;AAEzD,QAAM,MAAM,eAAe,OAAO;AAClC,QAAM,MAAM,eAAe,OAAO;AAClC,SACC,qBAAC,SAAI,WAAU,0CACd;AAAA,wBAAC,SAAI,OAAO,IAAI,KAAK,GAAG,WAAU,gDAChC,cAAI,KAAK,GACX;AAAA,IACA,qBAAC,mBAAgB,aAAY,cAAa,OAAO,IAAI,KAAK,GACzD;AAAA,2BAAC,mBAAgB,IAAI,KAAK,MAAM,SAAS,cAAc,YACtD;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,eAAa,SAAS,OAAO;AAAA,YAC7B,OACC,IAAI,MAAM,IACV,cACC,WAAW,QAAQ,OAAO,SAAS,UACjC,IAAI,mBAAmB,IACvB,IAAI,GAAG,OAAO,UAAU,OAAO,KAAK,EAAwB;AAAA,YAGhE,8BAAC,sBAAmB,MAAM,OAAO,OAAK,MAAC,YAAU,MAAC;AAAA;AAAA,QACnD,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UAAS,YAAY,IAAI,aAAa,GAC/E,8BAAC,mBAAgB,aAAY,QAAO,OAAO,IAAI,MAAM,GACpD,8BAAC,+BAA4B,MAAK,SAAQ,UAAS,eACjD,iBAAO,IAAI,CAAC,SAAS;AACrB,iBACC;AAAA,YAAC;AAAA;AAAA,cACA,eAAa,SAAS,OAAO,IAAI,KAAK,KAAK;AAAA,cAC3C,MAAK;AAAA,cAEL,SAAS,MAAM;AACd,8BAAc,QAAQ,KAAK,KAAK;AAChC,wBAAQ,eAAe,KAAK,OAAO,SAAS;AAC5C,2BAAW,KAAK;AAAA,cACjB;AAAA,cACA,OAAO,GAAG,IAAI,MAAM,CAAC,WAAM,IAAI,GAAG,OAAO,UAAU,KAAK,KAAK,EAAE,CAAC;AAAA,cAEhE,8BAAC,sBAAmB,MAAM,KAAK,MAAM,YAAU,MAAC;AAAA;AAAA,YAR3C,KAAK;AAAA,UASX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA,SACD;AAAA,MACA,qBAAC,mBAAgB,IAAI,KAAK,MAAM,SAAS,cAAc,YACtD;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,eAAa,SAAS,OAAO;AAAA,YAC7B,OACC,IAAI,MAAM,IACV,cACC,WAAW,QAAQ,OAAO,SAAS,UACjC,IAAI,mBAAmB,IACvB,IAAI,GAAG,OAAO,UAAU,OAAO,KAAK,EAAwB;AAAA,YAGhE,8BAAC,sBAAmB,MAAM,OAAO,OAAK,MAAC;AAAA;AAAA,QACxC,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UAAS,YAAY,KAAK,aAAa,GAChF,8BAAC,mBAAgB,aAAY,QAAO,OAAO,IAAI,MAAM,GACpD,8BAAC,+BAA4B,MAAK,SAAQ,UAAS,eACjD,iBAAO,IAAI,CAAC,SAAS;AACrB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,OAAO,GAAG,IAAI,MAAM,CAAC,WAAM,IAAI,GAAG,OAAO,UAAU,KAAK,KAAK,EAAwB,CAAC;AAAA,cACtF,eAAa,SAAS,OAAO,IAAI,KAAK,KAAK;AAAA,cAC3C,SAAS,MAAM;AACd,8BAAc,QAAQ,KAAK,KAAK;AAChC,wBAAQ,eAAe,KAAK,OAAO,SAAS;AAC5C,2BAAW,KAAK;AAAA,cACjB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAVhC,KAAK;AAAA,UAWX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA,SACD;AAAA,OACD;AAAA,KACD;AAEF;AAGO,MAAM,uBAAuB,MAAM;AAAA,EACzC;AACD;",
-  "names": []
-}

package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.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 { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\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 DropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>({\n\tid,\n\tlabel,\n\tuiType,\n\tstylePanelType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\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\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\nexport const DropdownPicker = React.memo(DropdownPickerInner) as typeof DropdownPickerInner\n"],
-  "mappings": "AAiEI,SAMc,KANd;AAjEJ,SAAiC,SAAS,iBAAiB;AAC3D,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAc5C,SAAS,oBAAsC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,UAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,oBAAC,uBAAqB,oBAAS;AAAA,cAC5C,oBAAC,sBAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UACzC,8BAAC,mBAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,8BAAC,+BAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,uBAAO,yBAAyB,4BAA4B;AAC5D,8BAAc,OAAO,KAAK,KAAK;AAC/B,wBAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAGO,MAAM,iBAAiB,MAAM,KAAK,mBAAmB;",
-  "names": []
-}

package/dist-esm/lib/ui/components/primitives/TldrawUiButtonPicker.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx"],
-  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tgetColorValue,\n\tSharedStyle,\n\tStyleProp,\n\tTLDefaultColorStyle,\n\tTLDefaultColorTheme,\n\tuseEditor,\n} from '@tldraw/editor'\nimport { memo, ReactElement, useMemo, useRef } from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'\nimport { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'\nimport { TldrawUiGrid, TldrawUiRow } from './layout'\n\n/** @public */\nexport interface TLUiButtonPickerProps<T extends string> {\n\ttitle: string\n\tuiType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttheme: TLDefaultColorTheme\n\tonValueChange(style: StyleProp<T>, value: T): void\n\tonHistoryMark?(id: string): void\n}\n\n/** @public */\nexport const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends string>(\n\tprops: TLUiButtonPickerProps<T>\n) {\n\tconst {\n\t\tuiType,\n\t\titems,\n\t\ttitle,\n\t\tstyle,\n\t\tvalue,\n\t\t// columns = clamp(items.length, 2, 4),\n\t\tonValueChange,\n\t\tonHistoryMark,\n\t\ttheme,\n\t} = props\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst rPointing = useRef(false)\n\tconst rPointingOriginalActiveElement = useRef<HTMLElement | null>(null)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\n\t\t\t// This is fun little micro-optimization to make sure that the focus\n\t\t\t// is retained on a text label. That way, you can continue typing\n\t\t\t// after selecting a style.\n\t\t\tconst origActiveEl = rPointingOriginalActiveElement.current\n\t\t\tif (\n\t\t\t\torigActiveEl &&\n\t\t\t\t(['TEXTAREA', 'INPUT'].includes(origActiveEl.nodeName) || origActiveEl.isContentEditable)\n\t\t\t) {\n\t\t\t\torigActiveEl.focus()\n\t\t\t} else if (breakpoint >= PORTRAIT_BREAKPOINT.TABLET_SM) {\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t\trPointingOriginalActiveElement.current = null\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\n\t\t\tonHistoryMark?.('point picker item')\n\t\t\tonValueChange(style, id as T)\n\n\t\t\trPointing.current = true\n\t\t\trPointingOriginalActiveElement.current = document.activeElement as HTMLElement\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (value.type === 'shared' && value.value === id) return\n\n\t\t\tonValueChange(style, id as T)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])\n\n\tconst Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow\n\n\treturn (\n\t\t<Wrapper asChild>\n\t\t\t<TldrawUiToolbarToggleGroup\n\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\ttype=\"single\"\n\t\t\t\tvalue={value.type === 'shared' ? value.value : undefined}\n\t\t\t>\n\t\t\t\t{items.map((item) => {\n\t\t\t\t\tconst label = title + ' \u2014 ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TldrawUiToolbarToggleItem\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\tdata-id={item.value}\n\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\tvalue={item.value}\n\t\t\t\t\t\t\tdata-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}\n\t\t\t\t\t\t\tdata-isactive={value.type === 'shared' && value.value === item.value}\n\t\t\t\t\t\t\ttitle={label}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tstyle === (DefaultColorStyle as StyleProp<unknown>)\n\t\t\t\t\t\t\t\t\t? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t</TldrawUiToolbarToggleItem>\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t</TldrawUiToolbarToggleGroup>\n\t\t</Wrapper>\n\t)\n}) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement\n"],
-  "mappings": "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",
-  "names": ["TldrawUiButtonPicker", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
-}