tldraw 4.1.0-next.542f014c3fac → 4.1.0-next.58b63dd1ac80

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

@@ -28,7 +28,21 @@ export interface StylePanelDropdownPickerProps<T extends string> {
 	onValueChange?(style: StyleProp<T>, value: T): void
 }
 
-function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
+function StylePanelDropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {
+	const msg = useTranslation()
+	const toolbarLabel = props.label
+		? msg(props.label)
+		: msg(`style-panel.${props.stylePanelType}` as TLUiTranslationKey)
+	return (
+		<TldrawUiToolbar label={toolbarLabel}>
+			<StylePanelDropdownPickerInline {...props} />
+		</TldrawUiToolbar>
+	)
+}
+
+function StylePanelDropdownPickerInlineInner<T extends string>(
+	props: StylePanelDropdownPickerProps<T>
+) {
 	const ctx = useStylePanelContext()
 	const {
 		id,
@@ -60,60 +74,67 @@ function DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerPr
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiToolbar label={stylePanelName}>
-			<TldrawUiPopover
-				id={popoverId}
-				open={isOpen}
-				onOpenChange={setIsOpen}
-				className="tlui-style-panel__dropdown-picker"
-			>
-				<TldrawUiPopoverTrigger>
-					<TldrawUiToolbarButton
-						type={type}
-						data-testid={`style.${uiType}`}
-						data-direction="left"
-						title={titleStr}
-					>
-						{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
-						<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
-					</TldrawUiToolbarButton>
-				</TldrawUiPopoverTrigger>
-				<TldrawUiPopoverContent side="left" align="center">
-					<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
-						<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
-							{items.map((item) => {
-								return (
-									<TldrawUiToolbarButton
-										key={item.value}
-										type="icon"
-										data-testid={`style.${uiType}.${item.value}`}
-										title={
-											stylePanelName +
-											' — ' +
-											msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-										}
-										isActive={icon === item.icon}
-										onClick={() => {
-											ctx.onHistoryMark('select style dropdown item')
-											onValueChange(style, item.value)
-											tlmenus.deleteOpenMenu(popoverId, editor.contextId)
-											setIsOpen(false)
-										}}
-									>
-										<TldrawUiButtonIcon icon={item.icon} />
-									</TldrawUiToolbarButton>
-								)
-							})}
-						</TldrawUiMenuContextProvider>
-					</TldrawUiToolbar>
-				</TldrawUiPopoverContent>
-			</TldrawUiPopover>
-		</TldrawUiToolbar>
+		<TldrawUiPopover
+			id={popoverId}
+			open={isOpen}
+			onOpenChange={setIsOpen}
+			className="tlui-style-panel__dropdown-picker"
+		>
+			<TldrawUiPopoverTrigger>
+				<TldrawUiToolbarButton
+					type={type}
+					data-testid={`style.${uiType}`}
+					data-direction="left"
+					title={titleStr}
+				>
+					{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}
+					<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />
+				</TldrawUiToolbarButton>
+			</TldrawUiPopoverTrigger>
+			<TldrawUiPopoverContent side="left" align="center">
+				<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>
+					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
+						{items.map((item) => {
+							return (
+								<TldrawUiToolbarButton
+									key={item.value}
+									type="icon"
+									data-testid={`style.${uiType}.${item.value}`}
+									title={
+										stylePanelName +
+										' — ' +
+										msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+									}
+									isActive={icon === item.icon}
+									onClick={() => {
+										ctx.onHistoryMark('select style dropdown item')
+										onValueChange(style, item.value)
+										tlmenus.deleteOpenMenu(popoverId, editor.contextId)
+										setIsOpen(false)
+									}}
+								>
+									<TldrawUiButtonIcon icon={item.icon} />
+								</TldrawUiToolbarButton>
+							)
+						})}
+					</TldrawUiMenuContextProvider>
+				</TldrawUiToolbar>
+			</TldrawUiPopoverContent>
+		</TldrawUiPopover>
 	)
 }
 
 // need to export like this to get generics
 /** @public @react */
-export const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(
+export const StylePanelDropdownPicker = React.memo(StylePanelDropdownPickerInner) as <
+	T extends string,
+>(
+	props: StylePanelDropdownPickerProps<T>
+) => React.JSX.Element
+
+/** @public @react */
+export const StylePanelDropdownPickerInline = React.memo(StylePanelDropdownPickerInlineInner) as <
+	T extends string,
+>(
 	props: StylePanelDropdownPickerProps<T>
 ) => React.JSX.Element

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.1.0-next.542f014c3fac'
+export const version = '4.1.0-next.58b63dd1ac80'
 export const publishDates = {
-	major: '2025-09-19T10:02:40.633Z',
-	minor: '2025-09-19T10:02:40.633Z',
-	patch: '2025-09-19T10:02:40.633Z',
+	major: '2025-09-18T14:39:22.803Z',
+	minor: '2025-10-15T11:02:19.723Z',
+	patch: '2025-10-15T11:02:19.723Z',
 }

package/src/test/customSnapping.test.tsx

@@ -173,6 +173,7 @@ describe('custom handle snapping', () => {
 			handlePoints: VecModel[] | 'default'
 			selfSnapOutline: VecModel[] | 'default'
 			selfSnapPoints: VecModel[] | 'default'
+			handleSnapType?: 'point' | 'align'
 		}
 	>
 	class TestShapeUtil extends BaseBoxShapeUtil<TestShape> {
@@ -213,17 +214,23 @@ describe('custom handle snapping', () => {
 			}
 		}
 		override getHandles(shape: TestShape): TLHandle[] {
-			return [
-				{
-					id: 'handle',
-					label: 'handle',
-					type: 'vertex',
-					x: shape.props.ownHandle.x,
-					y: shape.props.ownHandle.y,
-					index: ZERO_INDEX_KEY,
-					canSnap: true,
-				},
-			]
+			const handle: TLHandle = {
+				id: 'handle',
+				label: 'handle',
+				type: 'vertex',
+				x: shape.props.ownHandle.x,
+				y: shape.props.ownHandle.y,
+				index: ZERO_INDEX_KEY,
+			}
+
+			if (shape.props.handleSnapType) {
+				handle.snapType = shape.props.handleSnapType
+			} else {
+				// eslint-disable-next-line @typescript-eslint/no-deprecated
+				handle.canSnap = true
+			}
+
+			return [handle]
 		}
 		override onHandleDrag(shape: TestShape, { handle }: TLHandleDragInfo<TestShape>) {
 			return { ...shape, props: { ...shape.props, ownHandle: { x: handle.x, y: handle.y } } }
@@ -495,5 +502,42 @@ describe('custom handle snapping', () => {
 				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 50 })
 			})
 		})
+
+		describe('with snapType set to align', () => {
+			beforeEach(() => {
+				editor.updateShape<TestShape>({
+					id: ids.test,
+					type: 'test',
+					props: {
+						selfSnapPoints: [
+							{ x: 20, y: 50 },
+							{ x: 60, y: 10 },
+						],
+						handleSnapType: 'align',
+					},
+				})
+			})
+
+			test('snaps to the y axis', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(18, 0, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(1)
+				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 0 })
+			})
+
+			test('snaps to the x axis', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(0, 48, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(1)
+				expect(ownHandlePosition()).toMatchObject({ x: 0, y: 50 })
+			})
+
+			test('snaps to both axes', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(18, 9, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(2)
+				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 10 })
+			})
+		})
 	})
 })

package/tldraw.css

@@ -1325,6 +1325,10 @@ input,
 	flex: 1;
 }
 
+.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {
+	justify-content: center;
+}
+
 .tl-bookmark__heading,
 .tl-bookmark__description,
 .tl-bookmark__link {
@@ -1357,7 +1361,7 @@ input,
 	line-clamp: 3;
 	text-overflow: ellipsis;
 	display: -webkit-box;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	margin: var(--tl-space-2) 0px;
 }
 
@@ -1369,11 +1373,12 @@ input,
 	font-size: 12px;
 	pointer-events: all;
 	display: flex;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	align-items: center;
 	cursor: var(--tl-cursor-pointer);
 	width: fit-content;
 	max-width: 100%;
+	text-decoration: none;
 }
 
 .tl-bookmark__link > span {