@tldraw/editor 3.13.0-canary.ea6e50365559 → 3.13.0-canary.faba5d60dae3

package/src/lib/components/Shape.tsx

@@ -27,6 +27,7 @@ export const Shape = memo(function Shape({
 	index,
 	backgroundIndex,
 	opacity,
+	dprMultiple,
 }: {
 	id: TLShapeId
 	shape: TLShape
@@ -34,6 +35,7 @@ export const Shape = memo(function Shape({
 	index: number
 	backgroundIndex: number
 	opacity: number
+	dprMultiple: number
 }) {
 	const editor = useEditor()
 
@@ -88,14 +90,18 @@ export const Shape = memo(function Shape({
 			}
 
 			// Width / Height
-			const width = Math.max(bounds.width, 1)
-			const height = Math.max(bounds.height, 1)
+			// We round the shape width and height up to the nearest multiple of dprMultiple
+			// to avoid the browser making miscalculations when applying the transform.
+			const widthRemainder = bounds.w % dprMultiple
+			const heightRemainder = bounds.h % dprMultiple
+			const width = widthRemainder === 0 ? bounds.w : bounds.w + (dprMultiple - widthRemainder)
+			const height = heightRemainder === 0 ? bounds.h : bounds.h + (dprMultiple - heightRemainder)
 
 			if (width !== prev.width || height !== prev.height) {
-				setStyleProperty(containerRef.current, 'width', width + 'px')
-				setStyleProperty(containerRef.current, 'height', height + 'px')
-				setStyleProperty(bgContainerRef.current, 'width', width + 'px')
-				setStyleProperty(bgContainerRef.current, 'height', height + 'px')
+				setStyleProperty(containerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
+				setStyleProperty(containerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
+				setStyleProperty(bgContainerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
+				setStyleProperty(bgContainerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
 				prev.width = width
 				prev.height = height
 			}

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -22,6 +22,7 @@ import { Vec } from '../../primitives/Vec'
 import { toDomPrecision } from '../../primitives/utils'
 import { debugFlags } from '../../utils/debug-flags'
 import { setStyleProperty } from '../../utils/dom'
+import { nearestMultiple } from '../../utils/nearestMultiple'
 import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
@@ -168,6 +169,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<SnapIndicatorWrapper />
 						<SelectionForegroundWrapper />
 						<HandlesWrapper />
+						<OverlaysWrapper />
 						<LiveCollaborators />
 					</div>
 				</div>
@@ -372,14 +374,33 @@ function HandleWrapper({
 	)
 }
 
+function OverlaysWrapper() {
+	const { Overlays } = useEditorComponents()
+	if (!Overlays) return null
+	return (
+		<div className="tl-custom-overlays tl-overlays__item">
+			<Overlays />
+		</div>
+	)
+}
+
 function ShapesWithSVGs() {
 	const editor = useEditor()
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
+	const dprMultiple = useValue(
+		'dpr multiple',
+		() =>
+			// dprMultiple is the smallest number we can multiply dpr by to get an integer
+			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
+			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
+		[editor]
+	)
+
 	return renderingShapes.map((result) => (
 		<Fragment key={result.id + '_fragment'}>
-			<Shape {...result} />
+			<Shape {...result} dprMultiple={dprMultiple} />
 			<DebugSvgCopy id={result.id} mode="iframe" />
 		</Fragment>
 	))
@@ -414,10 +435,19 @@ function ShapesToDisplay() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
+	const dprMultiple = useValue(
+		'dpr multiple',
+		() =>
+			// dprMultiple is the smallest number we can multiply dpr by to get an integer
+			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
+			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
+		[editor]
+	)
+
 	return (
 		<>
 			{renderingShapes.map((result) => (
-				<Shape key={result.id + '_shape'} {...result} />
+				<Shape key={result.id + '_shape'} {...result} dprMultiple={dprMultiple} />
 			))}
 			{tlenv.isSafari && <ReflowIfNeeded />}
 		</>

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -157,8 +157,10 @@ My browser: ${navigator.userAgent}`
 						<h2>Are you sure?</h2>
 						<p>Resetting your data will delete your drawing and cannot be undone.</p>
 						<div className="tl-error-boundary__content__actions">
-							<button onClick={() => setShouldShowResetConfirmation(false)}>Cancel</button>
-							<button className="tl-error-boundary__reset" onClick={resetLocalState}>
+							<button className="tlui-button" onClick={() => setShouldShowResetConfirmation(false)}>
+								Cancel
+							</button>
+							<button className="tlui-button tl-error-boundary__reset" onClick={resetLocalState}>
 								Reset data
 							</button>
 						</div>
@@ -166,16 +168,23 @@ My browser: ${navigator.userAgent}`
 				) : (
 					<>
 						<h2>Something went wrong</h2>
-						<p>Please refresh the page to continue.</p>
+						<p>Please refresh your browser.</p>
+						<p>
+							If the issue continues after refreshing, you may need to reset the tldraw data stored
+							on your device.
+						</p>
 						<p>
-							If you keep seeing this screen, you can create a{' '}
-							<a href={url.toString()}>GitHub issue</a> or ask for help on{' '}
-							<a href="https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen">
-								Discord
-							</a>
-							. If you are still stuck, you can reset the tldraw data on your machine. This may
-							erase the project you were working on, so try to get help first.
+							<strong>Note:</strong> Resetting will erase your current project and any unsaved work.
 						</p>
+						{process.env.NODE_ENV !== 'production' && (
+							<p>
+								If you&apos;re developing with the SDK and need help, join us on{' '}
+								<a href="https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen">
+									Discord
+								</a>
+								.
+							</p>
+						)}
 						{shouldShowError && (
 							<>
 								Message:
@@ -187,22 +196,24 @@ My browser: ${navigator.userAgent}`
 									<pre>
 										<code>{errorStack ?? errorMessage}</code>
 									</pre>
-									<button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>
+									<button className="tlui-button" onClick={copyError}>
+										{didCopy ? 'Copied!' : 'Copy'}
+									</button>
 								</div>
 							</>
 						)}
 						<div className="tl-error-boundary__content__actions">
-							<button onClick={() => setShouldShowError(!shouldShowError)}>
+							<button className="tlui-button" onClick={() => setShouldShowError(!shouldShowError)}>
 								{shouldShowError ? 'Hide details' : 'Show details'}
 							</button>
 							<div className="tl-error-boundary__content__actions__group">
 								<button
-									className="tl-error-boundary__reset"
+									className="tlui-button tl-error-boundary__reset"
 									onClick={() => setShouldShowResetConfirmation(true)}
 								>
 									Reset data
 								</button>
-								<button className="tl-error-boundary__refresh" onClick={refresh}>
+								<button className="tlui-button tl-error-boundary__refresh" onClick={refresh}>
 									Refresh Page
 								</button>
 							</div>

package/src/lib/components/default-components/DefaultSpinner.tsx

@@ -1,7 +1,7 @@
 /** @public @react */
 export function DefaultSpinner() {
 	return (
-		<svg width={16} height={16} viewBox="0 0 16 16">
+		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
 			<g strokeWidth={2} fill="none" fillRule="evenodd">
 				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
 				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -19,6 +19,7 @@ import { TLFontFace } from '../managers/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
+import { TLClickEventInfo } from '../types/event-types'
 import { TLResizeHandle } from '../types/selection-types'
 
 /** @public */
@@ -671,10 +672,21 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * A callback called when a shape's edge is double clicked.
 	 *
 	 * @param shape - The shape.
+	 * @param info - Info about the edge.
 	 * @returns A change to apply to the shape, or void.
 	 * @public
 	 */
-	onDoubleClickEdge?(shape: Shape): TLShapePartial<Shape> | void
+	onDoubleClickEdge?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void
+
+	/**
+	 * A callback called when a shape's corner is double clicked.
+	 *
+	 * @param shape - The shape.
+	 * @param info - Info about the corner.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onDoubleClickCorner?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void
 
 	/**
 	 * A callback called when a shape is double clicked.

package/src/lib/hooks/useDocumentEvents.ts

@@ -11,6 +11,7 @@ export function useDocumentEvents() {
 	const editor = useEditor()
 	const container = useContainer()
 
+	const isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])
 	const isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])
 
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
@@ -125,7 +126,11 @@ export function useDocumentEvents() {
 					if (areShortcutsDisabled(editor)) {
 						return
 					}
-					if (hasSelectedShapes) {
+					// isEditing here sounds like it's about text editing
+					// but more specifically, this is so you can tab into an
+					// embed that's being 'edited'. In our world,
+					// editing an embed, means it's interactive.
+					if (hasSelectedShapes && !isEditing) {
 						// This is used in tandem with shape navigation.
 						preventDefault(e)
 					}
@@ -289,7 +294,7 @@ export function useDocumentEvents() {
 			container.removeEventListener('keydown', handleKeyDown)
 			container.removeEventListener('keyup', handleKeyUp)
 		}
-	}, [editor, container, isAppFocused])
+	}, [editor, container, isAppFocused, isEditing])
 }
 
 function areShortcutsDisabled(editor: Editor) {

package/src/lib/hooks/useEditorComponents.tsx

@@ -51,29 +51,30 @@ import { useShallowObjectIdentity } from './useIdentity'
 /** @public */
 export interface TLEditorComponents {
 	Background?: ComponentType | null
-	SvgDefs?: ComponentType | null
 	Brush?: ComponentType<TLBrushProps> | null
-	ZoomBrush?: ComponentType<TLBrushProps> | null
-	ShapeIndicators?: ComponentType | null
-	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	Cursor?: ComponentType<TLCursorProps> | null
 	Canvas?: ComponentType<TLCanvasComponentProps> | null
 	CollaboratorBrush?: ComponentType<TLBrushProps> | null
 	CollaboratorCursor?: ComponentType<TLCursorProps> | null
 	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
+	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
 	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	Cursor?: ComponentType<TLCursorProps> | null
 	Grid?: ComponentType<TLGridProps> | null
-	Scribble?: ComponentType<TLScribbleProps> | null
-	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
-	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Handles?: ComponentType<TLHandlesProps> | null
 	Handle?: ComponentType<TLHandleProps> | null
-	Spinner?: ComponentType | null
-	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
-	OnTheCanvas?: ComponentType | null
+	Handles?: ComponentType<TLHandlesProps> | null
 	InFrontOfTheCanvas?: ComponentType | null
 	LoadingScreen?: ComponentType | null
+	OnTheCanvas?: ComponentType | null
+	Overlays?: ComponentType | null
+	Scribble?: ComponentType<TLScribbleProps> | null
+	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
+	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
+	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	ShapeIndicators?: ComponentType | null
+	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
+	Spinner?: ComponentType | null
+	SvgDefs?: ComponentType | null
+	ZoomBrush?: ComponentType<TLBrushProps> | null
 
 	// These will always have defaults
 	ErrorFallback?: TLErrorFallbackComponent
@@ -96,32 +97,35 @@ export function EditorComponentsProvider({
 	const value = useMemo(
 		(): Required<TLEditorComponents> => ({
 			Background: DefaultBackground,
-			SvgDefs: DefaultSvgDefs,
 			Brush: DefaultBrush,
-			ZoomBrush: DefaultBrush,
+			Canvas: DefaultCanvas,
 			CollaboratorBrush: DefaultBrush,
-			Cursor: DefaultCursor,
 			CollaboratorCursor: DefaultCursor,
 			CollaboratorHint: DefaultCollaboratorHint,
+			CollaboratorScribble: DefaultScribble,
 			CollaboratorShapeIndicator: DefaultShapeIndicator,
+			Cursor: DefaultCursor,
 			Grid: DefaultGrid,
+			Handle: DefaultHandle,
+			Handles: DefaultHandles,
+			InFrontOfTheCanvas: null,
+			LoadingScreen: DefaultLoadingScreen,
+			OnTheCanvas: null,
+			Overlays: null,
 			Scribble: DefaultScribble,
+			SelectionBackground: DefaultSelectionBackground,
+			SelectionForeground: DefaultSelectionForeground,
+			ShapeIndicator: DefaultShapeIndicator,
+			ShapeIndicators: DefaultShapeIndicators,
 			SnapIndicator: DefaultSnapIndicator,
-			Handles: DefaultHandles,
-			Handle: DefaultHandle,
-			CollaboratorScribble: DefaultScribble,
+			Spinner: DefaultSpinner,
+			SvgDefs: DefaultSvgDefs,
+			ZoomBrush: DefaultBrush,
+
 			ErrorFallback: DefaultErrorFallback,
 			ShapeErrorFallback: DefaultShapeErrorFallback,
 			ShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,
-			Spinner: DefaultSpinner,
-			SelectionBackground: DefaultSelectionBackground,
-			SelectionForeground: DefaultSelectionForeground,
-			ShapeIndicators: DefaultShapeIndicators,
-			ShapeIndicator: DefaultShapeIndicator,
-			OnTheCanvas: null,
-			InFrontOfTheCanvas: null,
-			Canvas: DefaultCanvas,
-			LoadingScreen: DefaultLoadingScreen,
+
 			..._overrides,
 		}),
 		[_overrides]

package/src/lib/license/LicenseManager.test.ts

@@ -317,6 +317,46 @@ describe('LicenseManager', () => {
 		expect(result.isDomainValid).toBe(false)
 	})
 
+	it('Succeeds if it is a vscode extension', async () => {
+		// @ts-ignore
+		delete window.location
+		// @ts-ignore
+		window.location = new URL(
+			'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+		)
+
+		const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+		permissiveHostsInfo[PROPERTIES.HOSTS] = ['tldraw-org.tldraw-vscode']
+		const permissiveLicenseKey = await generateLicenseKey(
+			JSON.stringify(permissiveHostsInfo),
+			keyPair
+		)
+		const result = (await licenseManager.getLicenseFromKey(
+			permissiveLicenseKey
+		)) as ValidLicenseKeyResult
+		expect(result.isDomainValid).toBe(true)
+	})
+
+	it('Fails if it is a vscode extension with the wrong id', async () => {
+		// @ts-ignore
+		delete window.location
+		// @ts-ignore
+		window.location = new URL(
+			'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+		)
+
+		const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+		permissiveHostsInfo[PROPERTIES.HOSTS] = ['blah-org.blah-vscode']
+		const permissiveLicenseKey = await generateLicenseKey(
+			JSON.stringify(permissiveHostsInfo),
+			keyPair
+		)
+		const result = (await licenseManager.getLicenseFromKey(
+			permissiveLicenseKey
+		)) as ValidLicenseKeyResult
+		expect(result.isDomainValid).toBe(false)
+	})
+
 	it('Checks for internal license', async () => {
 		const internalLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
 		internalLicenseInfo[PROPERTIES.FLAGS] = FLAGS.INTERNAL_LICENSE

package/src/lib/license/LicenseManager.ts

@@ -111,7 +111,10 @@ export class LicenseManager {
 		if (testEnvironment === 'production') return false
 
 		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
-		return window.location.protocol !== 'https:' || window.location.hostname === 'localhost'
+		return (
+			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
+			window.location.hostname === 'localhost'
+		)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {
@@ -250,6 +253,15 @@ export class LicenseManager {
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 
+			// VSCode support
+			if (window.location.protocol === 'vscode-webview:') {
+				const currentUrl = new URL(window.location.href)
+				const extensionId = currentUrl.searchParams.get('extensionId')
+				if (normalizedHost === extensionId) {
+					return true
+				}
+			}
+
 			return false
 		})
 	}

package/src/lib/options.ts

@@ -80,6 +80,10 @@ export interface TldrawOptions {
 	 * nonce to use in the editor's styles.
 	 */
 	readonly nonce: string | undefined
+	/**
+	 * Branding name of the app, currently only used for adding aria-label for the application.
+	 */
+	readonly branding?: string
 }
 
 /** @public */

package/src/lib/utils/dom.ts

@@ -91,14 +91,14 @@ export const setStyleProperty = (
 	elm.style.setProperty(property, value as string)
 }
 
-const INPUTS = ['input', 'select', 'button', 'textarea']
-
 /** @internal */
-export function activeElementShouldCaptureKeys() {
+export function activeElementShouldCaptureKeys(allowButtons = false) {
 	const { activeElement } = document
+	const elements = allowButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']
 	return !!(
 		activeElement &&
 		((activeElement as HTMLElement).isContentEditable ||
-			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
+			elements.indexOf(activeElement.tagName.toLowerCase()) > -1 ||
+			activeElement.classList.contains('tlui-slider__thumb'))
 	)
 }

package/src/lib/utils/nearestMultiple.ts

@@ -0,0 +1,13 @@
+// Euclidean algorithm to find the GCD
+function gcd(a: number, b: number): number {
+	return b === 0 ? a : gcd(b, a % b)
+}
+
+// Returns the lowest value that the given number can be multiplied by to reach an integer
+export function nearestMultiple(float: number) {
+	const decimal = float.toString().split('.')[1]
+	if (!decimal) return 1
+	const denominator = Math.pow(10, decimal.length)
+	const numerator = parseInt(decimal, 10)
+	return denominator / gcd(numerator, denominator)
+}

package/src/lib/utils/rotation.ts

@@ -26,11 +26,13 @@ export function getRotationSnapshot({
 		return null
 	}
 
-	const pageCenter = rotatedPageBounds.center.clone().rotWith(rotatedPageBounds.point, rotation)
+	const initialPageCenter = rotatedPageBounds.center
+		.clone()
+		.rotWith(rotatedPageBounds.point, rotation)
 
 	return {
-		pageCenter,
-		initialCursorAngle: pageCenter.angle(editor.inputs.originPagePoint),
+		initialPageCenter,
+		initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
 		initialShapesRotation: rotation,
 		shapeSnapshots: shapes.map((shape) => ({
 			shape,
@@ -43,7 +45,7 @@ export function getRotationSnapshot({
  * @internal
  **/
 export interface TLRotationSnapshot {
-	pageCenter: Vec
+	initialPageCenter: Vec
 	initialCursorAngle: number
 	initialShapesRotation: number
 	shapeSnapshots: {
@@ -66,7 +68,7 @@ export function applyRotationToSnapshotShapes({
 	stage: 'start' | 'update' | 'end' | 'one-off'
 	centerOverride?: VecLike
 }) {
-	const { pageCenter, shapeSnapshots } = snapshot
+	const { initialPageCenter, shapeSnapshots } = snapshot
 
 	editor.updateShapes(
 		shapeSnapshots.map(({ shape, initialPagePoint }) => {
@@ -77,7 +79,7 @@ export function applyRotationToSnapshotShapes({
 				? editor.getShapePageTransform(shape.parentId)!
 				: Mat.Identity()
 
-			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? pageCenter, delta)
+			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)
 
 			const newLocalPoint = Mat.applyToPoint(
 				// use the current parent transform in case it has moved/resized since the start

package/src/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 = '3.13.0-canary.ea6e50365559'
+export const version = '3.13.0-canary.faba5d60dae3'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-17T16:32:36.739Z',
-	patch: '2025-04-17T16:32:36.739Z',
+	minor: '2025-05-01T15:09:57.860Z',
+	patch: '2025-05-01T15:09:57.860Z',
 }