[pull] main from tldraw:main

.github/workflows/deploy-dotcom.yml

@@ -158,3 +158,4 @@ jobs:
           VITE_GA4_MEASUREMENT_ID: ${{ secrets.VITE_GA4_MEASUREMENT_ID }}
           WORKER_SENTRY_DSN: ${{ secrets.WORKER_SENTRY_DSN }}
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+          PIERRE_KEY: ${{ secrets.PIERRE_KEY }}

apps/dotcom/client/src/__snapshots__/routes.test.tsx.snap

@@ -26,6 +26,14 @@ exports[`the_routes 1`] = `
     "reactRouterPattern": "/f/:fileSlug/history/:timestamp",
     "vercelRouterPattern": "^/f/[^/]*/history/[^/]*/?$",
   },
+  {
+    "reactRouterPattern": "/f/:fileSlug/pierre-history",
+    "vercelRouterPattern": "^/f/[^/]*/pierre-history/?$",
+  },
+  {
+    "reactRouterPattern": "/f/:fileSlug/pierre-history/:commitHash",
+    "vercelRouterPattern": "^/f/[^/]*/pierre-history/[^/]*/?$",
+  },
   {
     "reactRouterPattern": "/lf",
     "vercelRouterPattern": "^/lf/?$",

apps/dotcom/client/src/components/BoardHistoryLog/BoardHistoryLog.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 // todo: remove tailwind
 
 interface BoardHistoryLogProps {
-	data: string[]
+	data: { timestamp: string; href?: string }[]
 	hasMore?: boolean
 	onLoadMore?(): void
 	isLoading?: boolean
@@ -18,16 +18,16 @@ function getMonthYear(timestamp: string): string {
 }
 
 function groupTimestampsByMonth(
-	timestamps: string[]
-): Array<{ month: string; timestamps: string[] }> {
-	const groups: { [key: string]: string[] } = {}
+	timestamps: { timestamp: string; href?: string }[]
+): Array<{ month: string; timestamps: { timestamp: string; href?: string }[] }> {
+	const groups: { [key: string]: { timestamp: string; href?: string }[] } = {}
 
-	timestamps.forEach((timestamp) => {
+	timestamps.forEach(({ timestamp, href }) => {
 		const monthKey = getMonthYear(timestamp)
 		if (!groups[monthKey]) {
 			groups[monthKey] = []
 		}
-		groups[monthKey].push(timestamp)
+		groups[monthKey].push({ timestamp, href })
 	})
 
 	return Object.entries(groups).map(([month, timestamps]) => ({
@@ -56,11 +56,10 @@ export function BoardHistoryLog({ data, hasMore, onLoadMore, isLoading }: BoardH
 					<div key={groupIndex} className="board-history__month-group">
 						<h3 className="board-history__month-header">{group.month}</h3>
 						<ol className="board-history__list">
-							{group.timestamps.map((v, i) => {
-								const timeStamp = v.split('/').pop()
+							{group.timestamps.map(({ timestamp, href }, i) => {
 								return (
 									<li key={i}>
-										<Link to={`./${timeStamp}`}>{formatDate(timeStamp!)}</Link>
+										<Link to={href || `./${timestamp}`}>{formatDate(timestamp)}</Link>
 									</li>
 								)
 							})}

apps/dotcom/client/src/fairy/Fairy.tsx

@@ -1,13 +1,16 @@
+import { FairyEntity } from '@tldraw/fairy-shared'
+import { ContextMenu as _ContextMenu } from 'radix-ui'
 import React, { useEffect, useRef } from 'react'
-import { Box, useEditor, useValue } from 'tldraw'
+import { Atom, Box, useEditor, useValue } from 'tldraw'
 import { FairyAgent } from './fairy-agent/agent/FairyAgent'
 import { $fairyAgentsAtom } from './fairy-agent/agent/fairyAgentsAtom'
 import { FairySpriteComponent } from './fairy-sprite/FairySprite'
+import { FairyContextMenuContent } from './FairyContextMenuContent'
 import { FairyThrowTool } from './FairyThrowTool'
 
-export const FAIRY_SIZE = 70
-const FAIRY_CLICKABLE_SIZE_DEFAULT = 60
-const FAIRY_CLICKABLE_SIZE_SELECTED = 70
+export const FAIRY_SIZE = 60
+const FAIRY_CLICKABLE_SIZE_DEFAULT = 50
+const FAIRY_CLICKABLE_SIZE_SELECTED = 60
 
 // We use the agent directly here because we need to access the isGenerating method
 // which is not exposed on the fairy atom
@@ -118,6 +121,8 @@ export default function Fairy({ agent }: { agent: FairyAgent }) {
 	// Handle fairy pointer down, we don't enter fairy throw tool until the user actually moves their mouse
 	const handleFairyPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
 		// Don't activate tool immediately - wait for drag to start
+		// Skip dragging behavior on right-click (context menu will handle it)
+		if (e.button === 2) return
 		if (!editor.isIn('select.idle')) return
 		if (editor.getCurrentTool().id === 'fairy-throw') return
 
@@ -126,9 +131,48 @@ export default function Fairy({ agent }: { agent: FairyAgent }) {
 		// when you press generate, so this is enough for now
 		if (agent.isGenerating()) return
 
+		// Determine which fairies to drag before updating selection
 		const fairyAgents = $fairyAgentsAtom.get(editor)
+		const clickedFairyEntity = fairy.get()
+		const wasClickedFairySelected = clickedFairyEntity?.isSelected ?? false
+
+		// Only drag multiple fairies if the clicked fairy was already selected
+		// and there are other selected fairies
+		let fairiesToDrag: Atom<FairyEntity>[]
+		if (wasClickedFairySelected) {
+			// Collect all currently selected fairies
+			const selectedFairies: Atom<FairyEntity>[] = []
+			fairyAgents.forEach((a) => {
+				const entity = a.$fairyEntity.get()
+				if (entity?.isSelected) {
+					selectedFairies.push(a.$fairyEntity)
+				}
+			})
+			fairiesToDrag = selectedFairies
+		} else {
+			// Only drag the clicked fairy
+			fairiesToDrag = [fairy]
+		}
+
+		// Update selection state
+		// If dragging multiple fairies, keep them all selected
+		// Otherwise, update selection as normal
+		const isDraggingMultiple = fairiesToDrag.length > 1
+		const fairiesToDragIds = new Set(
+			fairiesToDrag
+				.map((f) => {
+					// We need to get the agent ID for each fairy to match
+					const agentForFairy = fairyAgents.find((a) => a.$fairyEntity === f)
+					return agentForFairy?.id
+				})
+				.filter((id): id is string => id !== undefined)
+		)
+
 		fairyAgents.forEach((a) => {
-			if (a.id === agent.id) {
+			if (isDraggingMultiple && fairiesToDragIds.has(a.id)) {
+				// Keep all fairies that will be dragged selected
+				a.$fairyEntity.update((f) => (f ? { ...f, isSelected: true } : f))
+			} else if (a.id === agent.id) {
 				a.$fairyEntity.update((f) => (f ? { ...f, isSelected: true } : f))
 			} else if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
 				a.$fairyEntity.update((f) => (f ? { ...f, isSelected: false } : f))
@@ -154,10 +198,10 @@ export default function Fairy({ agent }: { agent: FairyAgent }) {
 				document.removeEventListener('pointermove', handlePointerMove)
 				document.removeEventListener('pointerup', handlePointerUp)
 
-				// Activate the tool
+				// Activate the tool with all fairies that were selected at pointer down
 				const tool = editor.getStateDescendant('fairy-throw')
-				if (tool && 'setFairy' in tool) {
-					;(tool as FairyThrowTool).setFairy(fairy)
+				if (tool && 'setFairies' in tool) {
+					;(tool as FairyThrowTool).setFairies(fairiesToDrag)
 				}
 				editor.setCurrentTool('fairy-throw')
 			}
@@ -178,42 +222,46 @@ export default function Fairy({ agent }: { agent: FairyAgent }) {
 
 	// Early return if fairy doesn't exist (after all hooks)
 	const fairyEntity = fairy.get()
-	if (!fairyEntity) return null
 
 	return (
-		<div
-			ref={fairyRef}
-			style={{
-				position: 'absolute',
-				left: position.x,
-				top: position.y,
-				width: `${FAIRY_SIZE}px`,
-				height: `${FAIRY_SIZE}px`,
-				transform: `translate(-75%, -25%) scale(var(--tl-scale)) ${flipX ? ' scaleX(-1)' : ''}`,
-				transformOrigin: '75% 25%',
-				transition: isGenerating ? 'left 0.1s ease-in-out, top 0.1s ease-in-out' : 'none',
-			}}
-			className={isSelected ? 'fairy-selected' : ''}
-		>
-			{/* Fairy clickable zone */}
-			<div
-				onPointerDown={handleFairyPointerDown}
-				style={{
-					position: 'absolute',
-					width: `${isSelected ? FAIRY_CLICKABLE_SIZE_SELECTED : FAIRY_CLICKABLE_SIZE_DEFAULT}px`,
-					height: `${isSelected ? FAIRY_CLICKABLE_SIZE_SELECTED : FAIRY_CLICKABLE_SIZE_DEFAULT}px`,
-					pointerEvents: isFairyGrabbable ? 'all' : 'none',
-					cursor: isFairyGrabbable ? 'grab' : 'default',
-				}}
-			/>
-			<FairySpriteComponent
-				entity={fairyEntity}
-				outfit={fairyOutfit}
-				animated={true}
-				onGestureEnd={() => {
-					fairy.update((f) => (f ? { ...f, gesture: null } : f))
-				}}
-			/>
-		</div>
+		<_ContextMenu.Root dir="ltr">
+			<_ContextMenu.Trigger asChild>
+				<div
+					ref={fairyRef}
+					style={{
+						position: 'absolute',
+						left: position.x,
+						top: position.y,
+						width: `${FAIRY_SIZE}px`,
+						height: `${FAIRY_SIZE}px`,
+						transform: `translate(-75%, -25%) scale(var(--tl-scale)) ${flipX ? ' scaleX(-1)' : ''}`,
+						transformOrigin: '75% 25%',
+						transition: isGenerating ? 'left 0.1s ease-in-out, top 0.1s ease-in-out' : 'none',
+					}}
+					className={isSelected ? 'fairy-selected' : ''}
+				>
+					{/* Fairy clickable zone */}
+					<div
+						onPointerDown={handleFairyPointerDown}
+						style={{
+							position: 'absolute',
+							width: `${isSelected ? FAIRY_CLICKABLE_SIZE_SELECTED : FAIRY_CLICKABLE_SIZE_DEFAULT}px`,
+							height: `${isSelected ? FAIRY_CLICKABLE_SIZE_SELECTED : FAIRY_CLICKABLE_SIZE_DEFAULT}px`,
+							pointerEvents: isFairyGrabbable ? 'all' : 'none',
+							cursor: isFairyGrabbable ? 'grab' : 'default',
+						}}
+					/>
+					<FairySpriteComponent
+						entity={fairyEntity}
+						outfit={fairyOutfit}
+						animated={true}
+						onGestureEnd={() => {
+							fairy.update((f) => (f ? { ...f, gesture: null } : f))
+						}}
+					/>
+				</div>
+			</_ContextMenu.Trigger>
+			<FairyContextMenuContent agent={agent} />
+		</_ContextMenu.Root>
 	)
 }