@tldraw/editor 4.6.0-next.d15997ff5a4b → 4.6.0-next.d8328a2dcc3d

package/dist-esm/lib/hooks/useGestureEvents.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useGestureEvents.ts"],
-  "sourcesContent": ["import type { AnyHandlerEventTypes, EventTypes, GestureKey, Handler } from '@use-gesture/core/types'\nimport { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'\nimport * as React from 'react'\nimport { TLWheelEventInfo } from '../editor/types/event-types'\nimport { Vec } from '../primitives/Vec'\nimport { preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { normalizeWheel } from '../utils/normalizeWheel'\nimport { useEditor } from './useEditor'\n\n/*\n\n# How does pinching work?\n\nThe pinching handler is fired under two circumstances: \n- when a user is on a MacBook trackpad and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is PANNING with two fingers\n\nZooming is much more expensive than panning (because it causes shapes to render), \nso we want to be sure that we don't zoom while two-finger panning. \n\nIn order to do this, we keep track of a \"pinchState\", which is either:\n- \"zooming\"\n- \"panning\"\n- \"not sure\"\n\nIf a user is on a trackpad, the pinchState will be set to \"zooming\". \n\nIf the user is on a touch screen, then we start in the \"not sure\" state and switch back and forth\nbetween \"zooming\", \"panning\", and \"not sure\" based on what the user is doing with their fingers.\n\nIn the \"not sure\" state, we examine whether the user has moved the center of the gesture far enough\nto suggest that they're panning; or else that they've moved their fingers further apart or closer\ntogether enough to suggest that they're zooming. \n\nIn the \"panning\" state, we check whether the user's fingers have moved far enough apart to suggest\nthat they're zooming. If they have, we switch to the \"zooming\" state.\n\nIn the \"zooming\" state, we just stay zooming\u2014it's not YET possible to switch back to panning.\n\ntodo: compare velocities of change in order to determine whether the user has switched back to panning\n*/\n\ntype check<T extends AnyHandlerEventTypes, Key extends GestureKey> = undefined extends T[Key]\n\t? EventTypes[Key]\n\t: T[Key]\ntype PinchHandler = Handler<'pinch', check<EventTypes, 'pinch'>>\n\nconst useGesture = createUseGesture([wheelAction, pinchAction])\n\n/**\n * GOTCHA\n *\n * UseGesture fires a wheel event 140ms after the gesture actually ends, with a momentum-adjusted\n * delta. This creates a messed up interaction where after you stop scrolling suddenly the dang page\n * jumps a tick. why do they do this? you are asking the wrong person. it seems intentional though.\n * anyway we want to ignore that last event, but there's no way to directly detect it so we need to\n * keep track of timestamps. Yes this is awful, I am sorry.\n */\nlet lastWheelTime = undefined as undefined | number\n\nconst isWheelEndEvent = (time: number) => {\n\tif (lastWheelTime === undefined) {\n\t\tlastWheelTime = time\n\t\treturn false\n\t}\n\n\tif (time - lastWheelTime > 120 && time - lastWheelTime < 160) {\n\t\tlastWheelTime = time\n\t\treturn true\n\t}\n\n\tlastWheelTime = time\n\treturn false\n}\n\nexport function useGestureEvents(ref: React.RefObject<HTMLDivElement | null>) {\n\tconst editor = useEditor()\n\n\tconst events = React.useMemo(() => {\n\t\tlet pinchState = 'not sure' as 'not sure' | 'zooming' | 'panning'\n\n\t\tconst onWheel: Handler<'wheel', WheelEvent> = ({ event }) => {\n\t\t\tif (!editor.getInstanceState().isFocused) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\tif (isWheelEndEvent(Date.now())) {\n\t\t\t\t// ignore wheelEnd events\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Awful tht we need to put this logic here, but basically\n\t\t\t// we don't want to handle the the wheel event (or call prevent\n\t\t\t// default on the evnet) if the user is wheeling over an a shape\n\t\t\t// that is scrollable which they're currently editing.\n\n\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\tif (editingShapeId) {\n\t\t\t\tconst shape = editor.getShape(editingShapeId)\n\t\t\t\tif (shape) {\n\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\tif (util.canScroll(shape)) {\n\t\t\t\t\t\tconst bounds = editor.getShapePageBounds(editingShapeId)\n\t\t\t\t\t\tif (bounds?.containsPoint(editor.inputs.getCurrentPagePoint())) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreventDefault(event)\n\t\t\tevent.stopPropagation()\n\t\t\tconst delta = normalizeWheel(event)\n\n\t\t\tif (delta.x === 0 && delta.y === 0) return\n\n\t\t\tconst info: TLWheelEventInfo = {\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta,\n\t\t\t\tpoint: new Vec(event.clientX, event.clientY),\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\tlet initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts\n\t\tlet initZoom = 1 // the browser's zoom level when the pinch starts\n\t\tlet currDistanceBetweenFingers = 0\n\t\tconst initPointBetweenFingers = new Vec()\n\t\tconst prevPointBetweenFingers = new Vec()\n\n\t\tconst onPinchStart: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tpinchState = 'not sure'\n\n\t\t\tconst { event, origin, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\t\t\tinitPointBetweenFingers.x = origin[0]\n\t\t\tinitPointBetweenFingers.y = origin[1]\n\t\t\tinitDistanceBetweenFingers = da[0]\n\t\t\tinitZoom = editor.getZoomLevel()\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pinch',\n\t\t\t\tname: 'pinch_start',\n\t\t\t\tpoint: { x: origin[0], y: origin[1], z: editor.getZoomLevel() },\n\t\t\t\tdelta: { x: 0, y: 0 },\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t})\n\t\t}\n\n\t\t// let timeout: any\n\t\tconst updatePinchState = (isSafariTrackpadPinch: boolean) => {\n\t\t\tif (isSafariTrackpadPinch) {\n\t\t\t\tpinchState = 'zooming'\n\t\t\t}\n\n\t\t\tif (pinchState === 'zooming') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Initial: [touch]-------origin-------[touch]\n\t\t\t// Current: [touch]-----------origin----------[touch]\n\t\t\t//                          |----|     |------------|\n\t\t\t//             originDistance ^           ^ touchDistance\n\n\t\t\t// How far have the two touch points moved towards or away from eachother?\n\t\t\tconst touchDistance = Math.abs(currDistanceBetweenFingers - initDistanceBetweenFingers)\n\t\t\t// How far has the point between the touches moved?\n\t\t\tconst originDistance = Vec.Dist(initPointBetweenFingers, prevPointBetweenFingers)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'not sure': {\n\t\t\t\t\tif (touchDistance > 24) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t} else if (originDistance > 16) {\n\t\t\t\t\t\tpinchState = 'panning'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\t// Slightly more touch distance needed to go from panning to zooming\n\t\t\t\t\tif (touchDistance > 64) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinch: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset, da } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\t// In (desktop) Safari, a two finger trackpad pinch will be a \"gesturechange\" event\n\t\t\t// and will have 0 touches; on iOS, a two-finger pinch will be a \"pointermove\" event\n\t\t\t// with two touches.\n\t\t\tconst isSafariTrackpadPinch =\n\t\t\t\tgesture.type === 'gesturechange' || gesture.type === 'gestureend'\n\n\t\t\t// The distance between the two touch points\n\t\t\tcurrDistanceBetweenFingers = da[0]\n\n\t\t\t// Only update the zoom if the pointers are far enough apart;\n\t\t\t// a very small touchDistance means that the user has probably\n\t\t\t// pinched out and their fingers are touching; this produces\n\t\t\t// very unstable zooming behavior.\n\n\t\t\tconst dx = origin[0] - prevPointBetweenFingers.x\n\t\t\tconst dy = origin[1] - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = origin[0]\n\t\t\tprevPointBetweenFingers.y = origin[1]\n\n\t\t\tupdatePinchState(isSafariTrackpadPinch)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'zooming': {\n\t\t\t\t\tconst currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: currZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\t\tname: 'pinch',\n\t\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: initZoom },\n\t\t\t\t\t\tdelta: { x: dx, y: dy },\n\t\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t\t})\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst onPinchEnd: PinchHandler = (gesture) => {\n\t\t\tconst elm = ref.current\n\t\t\tconst { event, origin, offset } = gesture\n\n\t\t\tif (event instanceof WheelEvent) return\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tconst scale = offset[0] ** editor.getCameraOptions().zoomSpeed\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\teditor.dispatch({\n\t\t\t\t\ttype: 'pinch',\n\t\t\t\t\tname: 'pinch_end',\n\t\t\t\t\tpoint: { x: origin[0], y: origin[1], z: scale },\n\t\t\t\t\tdelta: { x: origin[0], y: origin[1] },\n\t\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\t\taltKey: event.altKey,\n\t\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t\t})\n\t\t\t})\n\t\t}\n\n\t\treturn {\n\t\t\tonWheel,\n\t\t\tonPinchStart,\n\t\t\tonPinchEnd,\n\t\t\tonPinch,\n\t\t}\n\t}, [editor, ref])\n\n\tuseGesture(events, {\n\t\ttarget: ref,\n\t\teventOptions: { passive: false },\n\t\tpinch: {\n\t\t\tfrom: () => {\n\t\t\t\tconst { zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst level = editor.getZoomLevel() ** (1 / zoomSpeed)\n\t\t\t\treturn [level, 0]\n\t\t\t}, // Return the camera z to use when pinch starts\n\t\t\tscaleBounds: () => {\n\t\t\t\tconst baseZoom = editor.getBaseZoom()\n\t\t\t\tconst { zoomSteps, zoomSpeed } = editor.getCameraOptions()\n\t\t\t\tconst zoomMin = zoomSteps[0] * baseZoom\n\t\t\t\tconst zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom\n\n\t\t\t\treturn {\n\t\t\t\t\tmax: zoomMax ** (1 / zoomSpeed),\n\t\t\t\t\tmin: zoomMin ** (1 / zoomSpeed),\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t})\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react'\nimport { TLWheelEventInfo } from '../editor/types/event-types'\nimport { tlenv } from '../globals/environment'\nimport { Vec } from '../primitives/Vec'\nimport { preventDefault } from '../utils/dom'\nimport { isAccelKey } from '../utils/keyboard'\nimport { normalizeWheel } from '../utils/normalizeWheel'\nimport { useEditor } from './useEditor'\n\n/*\n\n# How does pinching work?\n\nThe pinching handler is fired under two circumstances:\n- when a user is on a MacBook trackpad and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is ZOOMING with a two-finger pinch\n- when a user is on a touch device and is PANNING with two fingers\n\nZooming is much more expensive than panning (because it causes shapes to render),\nso we want to be sure that we don't zoom while two-finger panning.\n\nIn order to do this, we keep track of a \"pinchState\", which is either:\n- \"zooming\"\n- \"panning\"\n- \"not sure\"\n\nIf a user is on a trackpad, the pinchState will be set to \"zooming\".\n\nIf the user is on a touch screen, then we start in the \"not sure\" state and switch back and forth\nbetween \"zooming\", \"panning\", and \"not sure\" based on what the user is doing with their fingers.\n\nIn the \"not sure\" state, we examine whether the user has moved the center of the gesture far enough\nto suggest that they're panning; or else that they've moved their fingers further apart or closer\ntogether enough to suggest that they're zooming.\n\nIn the \"panning\" state, we check whether the user's fingers have moved far enough apart to suggest\nthat they're zooming. If they have, we switch to the \"zooming\" state.\n\nIn the \"zooming\" state, we just stay zooming\u2014it's not YET possible to switch back to panning.\n\ntodo: compare velocities of change in order to determine whether the user has switched back to panning\n*/\n\n/** Safari's non-standard GestureEvent */\ninterface GestureEvent extends Event {\n\tscale: number\n\trotation: number\n\tclientX: number\n\tclientY: number\n\tshiftKey: boolean\n\taltKey: boolean\n\tmetaKey: boolean\n\tctrlKey: boolean\n}\n\nexport function useGestureEvents(ref: React.RefObject<HTMLDivElement | null>) {\n\tconst editor = useEditor()\n\n\tReact.useEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\tlet pinchState = 'not sure' as 'not sure' | 'zooming' | 'panning'\n\n\t\t// --- Wheel handling ---\n\n\t\tfunction onWheel(event: WheelEvent) {\n\t\t\tif (!editor.getInstanceState().isFocused) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpinchState = 'not sure'\n\n\t\t\t// Don't handle wheel events over a scrollable editing shape\n\t\t\tconst editingShapeId = editor.getEditingShapeId()\n\t\t\tif (editingShapeId) {\n\t\t\t\tconst shape = editor.getShape(editingShapeId)\n\t\t\t\tif (shape) {\n\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\tif (util.canScroll(shape)) {\n\t\t\t\t\t\tconst bounds = editor.getShapePageBounds(editingShapeId)\n\t\t\t\t\t\tif (bounds?.containsPoint(editor.inputs.getCurrentPagePoint())) {\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tpreventDefault(event)\n\t\t\tevent.stopPropagation()\n\t\t\tconst delta = normalizeWheel(event)\n\n\t\t\tif (delta.x === 0 && delta.y === 0) return\n\n\t\t\tconst info: TLWheelEventInfo = {\n\t\t\t\ttype: 'wheel',\n\t\t\t\tname: 'wheel',\n\t\t\t\tdelta,\n\t\t\t\tpoint: new Vec(event.clientX, event.clientY),\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t}\n\n\t\t\teditor.dispatch(info)\n\t\t}\n\n\t\t// --- Touch pinch handling ---\n\n\t\tlet initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts\n\t\tlet initZoom = 1 // the zoom level when the pinch starts\n\t\tlet currDistanceBetweenFingers = 0\n\t\tconst initPointBetweenFingers = new Vec()\n\t\tconst prevPointBetweenFingers = new Vec()\n\n\t\t// Track active touches\n\t\tlet activeTouches: Touch[] = []\n\n\t\tfunction getScaleBounds() {\n\t\t\tconst baseZoom = editor.getBaseZoom()\n\t\t\tconst { zoomSteps, zoomSpeed } = editor.getCameraOptions()\n\t\t\tconst zoomMin = zoomSteps[0] * baseZoom\n\t\t\tconst zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom\n\t\t\treturn {\n\t\t\t\tmin: zoomMin ** (1 / zoomSpeed),\n\t\t\t\tmax: zoomMax ** (1 / zoomSpeed),\n\t\t\t}\n\t\t}\n\n\t\tfunction getScaleFrom() {\n\t\t\tconst { zoomSpeed } = editor.getCameraOptions()\n\t\t\treturn editor.getZoomLevel() ** (1 / zoomSpeed)\n\t\t}\n\n\t\t// Accumulated scale offset, clamped to bounds \u2014 replaces @use-gesture's offset[0]\n\t\tlet scaleOffset = 1\n\t\tlet initScaleFrom = 1 // the scale-space zoom level when the pinch started\n\n\t\tfunction updatePinchState(isSafariTrackpadPinch: boolean) {\n\t\t\tif (isSafariTrackpadPinch) {\n\t\t\t\tpinchState = 'zooming'\n\t\t\t}\n\n\t\t\tif (pinchState === 'zooming') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Initial: [touch]-------origin-------[touch]\n\t\t\t// Current: [touch]-----------origin----------[touch]\n\t\t\t//                          |----|     |------------|\n\t\t\t//             originDistance ^           ^ touchDistance\n\n\t\t\t// How far have the two touch points moved towards or away from each other?\n\t\t\tconst touchDistance = Math.abs(currDistanceBetweenFingers - initDistanceBetweenFingers)\n\t\t\t// How far has the point between the touches moved?\n\t\t\tconst originDistance = Vec.Dist(initPointBetweenFingers, prevPointBetweenFingers)\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'not sure': {\n\t\t\t\t\tif (touchDistance > 24) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t} else if (originDistance > 16) {\n\t\t\t\t\t\tpinchState = 'panning'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\t// Slightly more touch distance needed to go from panning to zooming\n\t\t\t\t\tif (touchDistance > 64) {\n\t\t\t\t\t\tpinchState = 'zooming'\n\t\t\t\t\t}\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction dispatchPinchEvent(\n\t\t\tname: 'pinch_start' | 'pinch' | 'pinch_end',\n\t\t\torigin: { x: number; y: number },\n\t\t\tdelta: { x: number; y: number },\n\t\t\tzoom: number,\n\t\t\tevent: TouchEvent | GestureEvent\n\t\t) {\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pinch',\n\t\t\t\tname,\n\t\t\t\tpoint: { x: origin.x, y: origin.y, z: zoom },\n\t\t\t\tdelta,\n\t\t\t\tshiftKey: event.shiftKey,\n\t\t\t\taltKey: event.altKey,\n\t\t\t\tctrlKey: event.metaKey || event.ctrlKey,\n\t\t\t\tmetaKey: event.metaKey,\n\t\t\t\taccelKey: isAccelKey(event),\n\t\t\t})\n\t\t}\n\n\t\tfunction getOriginAndDistance(t0: Touch, t1: Touch) {\n\t\t\tconst origin = {\n\t\t\t\tx: (t0.clientX + t1.clientX) / 2,\n\t\t\t\ty: (t0.clientY + t1.clientY) / 2,\n\t\t\t}\n\t\t\tconst distance = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY)\n\t\t\treturn { origin, distance }\n\t\t}\n\n\t\tfunction onTouchStart(event: TouchEvent) {\n\t\t\tif (!(event.target === elm || elm?.contains(event.target as Node))) return\n\n\t\t\tactiveTouches = Array.from(event.touches)\n\n\t\t\tif (activeTouches.length === 2) {\n\t\t\t\t// Two fingers down \u2014 start pinch\n\t\t\t\tpinchState = 'not sure'\n\t\t\t\tconst { origin, distance } = getOriginAndDistance(activeTouches[0], activeTouches[1])\n\n\t\t\t\tprevPointBetweenFingers.x = origin.x\n\t\t\t\tprevPointBetweenFingers.y = origin.y\n\t\t\t\tinitPointBetweenFingers.x = origin.x\n\t\t\t\tinitPointBetweenFingers.y = origin.y\n\t\t\t\tinitDistanceBetweenFingers = Math.max(distance, 1)\n\t\t\t\tcurrDistanceBetweenFingers = distance\n\t\t\t\tinitZoom = editor.getZoomLevel()\n\t\t\t\tinitScaleFrom = getScaleFrom()\n\t\t\t\tscaleOffset = initScaleFrom\n\n\t\t\t\tdispatchPinchEvent('pinch_start', origin, { x: 0, y: 0 }, editor.getZoomLevel(), event)\n\t\t\t}\n\t\t}\n\n\t\tfunction onTouchMove(event: TouchEvent) {\n\t\t\tactiveTouches = Array.from(event.touches)\n\n\t\t\tif (activeTouches.length < 2) return\n\n\t\t\tconst { origin, distance } = getOriginAndDistance(activeTouches[0], activeTouches[1])\n\t\t\tcurrDistanceBetweenFingers = distance\n\n\t\t\tconst dx = origin.x - prevPointBetweenFingers.x\n\t\t\tconst dy = origin.y - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = origin.x\n\t\t\tprevPointBetweenFingers.y = origin.y\n\n\t\t\tupdatePinchState(false)\n\n\t\t\t// Only update the zoom if the pointers are far enough apart;\n\t\t\t// a very small touchDistance means that the user has probably\n\t\t\t// pinched out and their fingers are touching; this produces\n\t\t\t// very unstable zooming behavior.\n\t\t\tconst bounds = getScaleBounds()\n\t\t\tconst rawScale = initScaleFrom * (distance / initDistanceBetweenFingers)\n\t\t\tscaleOffset = Math.min(bounds.max, Math.max(bounds.min, rawScale))\n\n\t\t\tswitch (pinchState) {\n\t\t\t\tcase 'zooming': {\n\t\t\t\t\tconst currZoom = scaleOffset ** editor.getCameraOptions().zoomSpeed\n\t\t\t\t\tdispatchPinchEvent('pinch', origin, { x: dx, y: dy }, currZoom, event)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t\tcase 'panning': {\n\t\t\t\t\tdispatchPinchEvent('pinch', origin, { x: dx, y: dy }, initZoom, event)\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction onTouchEnd(event: TouchEvent) {\n\t\t\tconst wasPinching = activeTouches.length >= 2\n\t\t\tactiveTouches = Array.from(event.touches)\n\n\t\t\tif (wasPinching && activeTouches.length < 2) {\n\t\t\t\t// Pinch ended\n\t\t\t\tconst scale = scaleOffset ** editor.getCameraOptions().zoomSpeed\n\t\t\t\tconst origin = { ...prevPointBetweenFingers }\n\t\t\t\tpinchState = 'not sure'\n\n\t\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\t\tdispatchPinchEvent('pinch_end', origin, { x: origin.x, y: origin.y }, scale, event)\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\t// --- Safari trackpad pinch (GestureEvent) ---\n\n\t\tlet safariGestureInitialScale = 1\n\n\t\tfunction onGestureStart(event: Event) {\n\t\t\tconst e = event as GestureEvent\n\t\t\tif (!(e.target === elm || elm?.contains(e.target as Node))) return\n\n\t\t\tpreventDefault(e)\n\t\t\te.stopPropagation()\n\n\t\t\tpinchState = 'not sure'\n\t\t\tsafariGestureInitialScale = getScaleFrom()\n\t\t\tscaleOffset = safariGestureInitialScale\n\t\t\tinitZoom = editor.getZoomLevel()\n\n\t\t\tprevPointBetweenFingers.x = e.clientX\n\t\t\tprevPointBetweenFingers.y = e.clientY\n\t\t\tinitPointBetweenFingers.x = e.clientX\n\t\t\tinitPointBetweenFingers.y = e.clientY\n\t\t\tinitDistanceBetweenFingers = 1\n\t\t\tcurrDistanceBetweenFingers = 1\n\n\t\t\tdispatchPinchEvent(\n\t\t\t\t'pinch_start',\n\t\t\t\t{ x: e.clientX, y: e.clientY },\n\t\t\t\t{ x: 0, y: 0 },\n\t\t\t\teditor.getZoomLevel(),\n\t\t\t\te\n\t\t\t)\n\t\t}\n\n\t\tfunction onGestureChange(event: Event) {\n\t\t\tconst e = event as GestureEvent\n\t\t\tif (!(e.target === elm || elm?.contains(e.target as Node))) return\n\n\t\t\tpreventDefault(e)\n\t\t\te.stopPropagation()\n\n\t\t\tconst dx = e.clientX - prevPointBetweenFingers.x\n\t\t\tconst dy = e.clientY - prevPointBetweenFingers.y\n\n\t\t\tprevPointBetweenFingers.x = e.clientX\n\t\t\tprevPointBetweenFingers.y = e.clientY\n\n\t\t\t// Safari GestureEvent.scale is a multiplier relative to gesture start\n\t\t\tconst bounds = getScaleBounds()\n\t\t\tconst rawScale = safariGestureInitialScale * e.scale\n\t\t\tscaleOffset = Math.min(bounds.max, Math.max(bounds.min, rawScale))\n\n\t\t\t// Update distance tracking for pinch state (treat scale change as distance change)\n\t\t\tcurrDistanceBetweenFingers = e.scale * initDistanceBetweenFingers\n\n\t\t\tupdatePinchState(true)\n\n\t\t\tconst currZoom = scaleOffset ** editor.getCameraOptions().zoomSpeed\n\n\t\t\tdispatchPinchEvent('pinch', { x: e.clientX, y: e.clientY }, { x: dx, y: dy }, currZoom, e)\n\t\t}\n\n\t\tfunction onGestureEnd(event: Event) {\n\t\t\tconst e = event as GestureEvent\n\t\t\tif (!(e.target === elm || elm?.contains(e.target as Node))) return\n\n\t\t\tpreventDefault(e)\n\t\t\te.stopPropagation()\n\n\t\t\tconst scale = scaleOffset ** editor.getCameraOptions().zoomSpeed\n\t\t\tpinchState = 'not sure'\n\n\t\t\teditor.timers.requestAnimationFrame(() => {\n\t\t\t\tdispatchPinchEvent(\n\t\t\t\t\t'pinch_end',\n\t\t\t\t\t{ x: e.clientX, y: e.clientY },\n\t\t\t\t\t{ x: e.clientX, y: e.clientY },\n\t\t\t\t\tscale,\n\t\t\t\t\te\n\t\t\t\t)\n\t\t\t})\n\t\t}\n\n\t\t// --- Attach event listeners ---\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\n\t\t// On touch devices (iOS), use pointer events for pinch.\n\t\t// On non-touch Safari (macOS trackpad), use GestureEvent.\n\t\t// Never use both simultaneously \u2014 on iOS Safari, both event types fire\n\t\t// for the same pinch gesture, causing conflicting state updates.\n\t\tconst useGestureEvents = !tlenv.isIos && 'GestureEvent' in window\n\n\t\tif (useGestureEvents) {\n\t\t\telm.addEventListener('gesturestart', onGestureStart)\n\t\t\telm.addEventListener('gesturechange', onGestureChange)\n\t\t\telm.addEventListener('gestureend', onGestureEnd)\n\t\t} else {\n\t\t\telm.addEventListener('touchstart', onTouchStart)\n\t\t\telm.addEventListener('touchmove', onTouchMove)\n\t\t\telm.addEventListener('touchend', onTouchEnd)\n\t\t\telm.addEventListener('touchcancel', onTouchEnd)\n\t\t}\n\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t\tif (useGestureEvents) {\n\t\t\t\telm.removeEventListener('gesturestart', onGestureStart)\n\t\t\t\telm.removeEventListener('gesturechange', onGestureChange)\n\t\t\t\telm.removeEventListener('gestureend', onGestureEnd)\n\t\t\t} else {\n\t\t\t\telm.removeEventListener('touchstart', onTouchStart)\n\t\t\t\telm.removeEventListener('touchmove', onTouchMove)\n\t\t\t\telm.removeEventListener('touchend', onTouchEnd)\n\t\t\t\telm.removeEventListener('touchcancel', onTouchEnd)\n\t\t\t}\n\t\t}\n\t}, [editor, ref])\n}\n"],
+  "mappings": "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",
+  "names": ["useGestureEvents"]
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.6.0-next.d15997ff5a4b";
+const version = "4.6.0-next.d8328a2dcc3d";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-03-26T11:23:28.088Z",
-  patch: "2026-03-26T11:23:28.088Z"
+  minor: "2026-04-02T09:41:44.660Z",
+  patch: "2026-04-02T09:41:44.660Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.6.0-next.d15997ff5a4b'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-03-26T11:23:28.088Z',\n\tpatch: '2026-03-26T11:23:28.088Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.6.0-next.d8328a2dcc3d'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-04-02T09:41:44.660Z',\n\tpatch: '2026-04-02T09:41:44.660Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -1478,6 +1478,19 @@ input,
 	color: currentColor;
 }
 
+.tl-note__attribution {
+	position: absolute;
+	bottom: calc(4px * var(--note-attribution-scale, 1));
+	right: calc(8px * var(--note-attribution-scale, 1));
+	font-family: var(--tl-font-sans);
+	pointer-events: auto;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 60%;
+	z-index: 1;
+}
+
 /* ------------------- Frame shape ------------------- */
 
 .tl-frame__body {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.6.0-next.d15997ff5a4b",
+  "version": "4.6.0-next.d8328a2dcc3d",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -43,19 +43,18 @@
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "cd ../.. && yarn run -T oxlint packages/editor"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "dependencies": {
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "4.6.0-next.d15997ff5a4b",
-    "@tldraw/state-react": "4.6.0-next.d15997ff5a4b",
-    "@tldraw/store": "4.6.0-next.d15997ff5a4b",
-    "@tldraw/tlschema": "4.6.0-next.d15997ff5a4b",
-    "@tldraw/utils": "4.6.0-next.d15997ff5a4b",
-    "@tldraw/validate": "4.6.0-next.d15997ff5a4b",
-    "@use-gesture/react": "^10.3.1",
+    "@tldraw/state": "4.6.0-next.d8328a2dcc3d",
+    "@tldraw/state-react": "4.6.0-next.d8328a2dcc3d",
+    "@tldraw/store": "4.6.0-next.d8328a2dcc3d",
+    "@tldraw/tlschema": "4.6.0-next.d8328a2dcc3d",
+    "@tldraw/utils": "4.6.0-next.d8328a2dcc3d",
+    "@tldraw/validate": "4.6.0-next.d8328a2dcc3d",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/index.ts

@@ -80,16 +80,21 @@ export {
 export { HTMLContainer, type HTMLContainerProps } from './lib/components/HTMLContainer'
 export { MenuClickCapture } from './lib/components/MenuClickCapture'
 export { SVGContainer, type SVGContainerProps } from './lib/components/SVGContainer'
+export {
+	createTLCurrentUser,
+	useTldrawCurrentUser,
+	type TLCurrentUser,
+} from './lib/config/createTLCurrentUser'
 export {
 	createTLSchemaFromUtils,
 	createTLStore,
+	defaultUserStore,
 	inlineBase64AssetStore,
 	type TLStoreBaseOptions,
 	type TLStoreEventInfo,
 	type TLStoreOptions,
 	type TLStoreSchemaOptions,
 } from './lib/config/createTLStore'
-export { createTLUser, useTldrawUser, type TLUser } from './lib/config/createTLUser'
 export { type TLAnyBindingUtilConstructor } from './lib/config/defaultBindings'
 export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
 export {

package/src/lib/TldrawEditor.tsx

@@ -16,8 +16,8 @@ import React, {
 import { version } from '../version'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
+import { createTLCurrentUser, TLCurrentUser } from './config/createTLCurrentUser'
 import { TLStoreBaseOptions } from './config/createTLStore'
-import { createTLUser, TLUser } from './config/createTLUser'
 import { TLAnyBindingUtilConstructor } from './config/defaultBindings'
 import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
 import { TLEditorSnapshot } from './config/TLEditorSnapshot'
@@ -154,7 +154,7 @@ export interface TldrawEditorBaseProps {
 	/**
 	 * The user interacting with the editor.
 	 */
-	user?: TLUser
+	user?: TLCurrentUser
 
 	/**
 	 * Whether to infer dark mode from the user's OS. Defaults to false.
@@ -260,7 +260,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 	...rest
 }: TldrawEditorProps) {
 	const [container, setContainer] = useState<HTMLElement | null>(null)
-	const user = useMemo(() => _user ?? createTLUser(), [_user])
+	const user = useMemo(() => _user ?? createTLCurrentUser(), [_user])
 
 	const ErrorFallback =
 		components?.ErrorFallback === undefined ? DefaultErrorFallback : components?.ErrorFallback
@@ -331,7 +331,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 
 function TldrawEditorWithOwnStore(
 	props: Required<
-		TldrawEditorProps & { store: undefined; user: TLUser },
+		TldrawEditorProps & { store: undefined; user: TLCurrentUser },
 		'shapeUtils' | 'bindingUtils' | 'tools'
 	>
 ) {
@@ -345,6 +345,7 @@ function TldrawEditorWithOwnStore(
 		sessionId,
 		user,
 		assets,
+		users,
 		migrations,
 	} = props
 
@@ -357,6 +358,7 @@ function TldrawEditorWithOwnStore(
 		defaultName,
 		snapshot,
 		assets,
+		users,
 		migrations,
 	})
 
@@ -368,7 +370,7 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
 	user,
 	...rest
 }: Required<
-	TldrawEditorProps & { store: TLStoreWithStatus; user: TLUser },
+	TldrawEditorProps & { store: TLStoreWithStatus; user: TLCurrentUser },
 	'shapeUtils' | 'bindingUtils' | 'tools'
 >) {
 	const container = useContainer()
@@ -428,7 +430,7 @@ function TldrawEditorWithReadyStore({
 }: Required<
 	TldrawEditorProps & {
 		store: TLStore
-		user: TLUser
+		user: TLCurrentUser
 	},
 	'shapeUtils' | 'bindingUtils' | 'tools'
 >) {

package/src/lib/config/{createTLUser.ts → createTLCurrentUser.ts}

@@ -5,7 +5,7 @@ import { useShallowObjectIdentity } from '../hooks/useIdentity'
 import { TLUserPreferences, getUserPreferences, setUserPreferences } from './TLUserPreferences'
 
 /** @public */
-export interface TLUser {
+export interface TLCurrentUser {
 	readonly userPreferences: Signal<TLUserPreferences>
 	// eslint-disable-next-line tldraw/method-signature-style
 	readonly setUserPreferences: (userPreferences: TLUserPreferences) => void
@@ -16,13 +16,13 @@ const defaultLocalStorageUserPrefs = computed('defaultLocalStorageUserPrefs', ()
 )
 
 /** @public */
-export function createTLUser(
+export function createTLCurrentUser(
 	opts = {} as {
 		userPreferences?: Signal<TLUserPreferences>
 		// eslint-disable-next-line tldraw/method-signature-style
 		setUserPreferences?: (userPreferences: TLUserPreferences) => void
 	}
-): TLUser {
+): TLCurrentUser {
 	return {
 		userPreferences: opts.userPreferences ?? defaultLocalStorageUserPrefs,
 		setUserPreferences: opts.setUserPreferences ?? setUserPreferences,
@@ -32,11 +32,11 @@ export function createTLUser(
 /**
  * @public
  */
-export function useTldrawUser(opts: {
+export function useTldrawCurrentUser(opts: {
 	userPreferences?: Signal<TLUserPreferences> | TLUserPreferences
 	// eslint-disable-next-line tldraw/method-signature-style
 	setUserPreferences?: (userPreferences: TLUserPreferences) => void
-}): TLUser {
+}): TLCurrentUser {
 	const prefs = useShallowObjectIdentity(opts.userPreferences ?? defaultLocalStorageUserPrefs)
 	const userAtom = useAtom<TLUserPreferences | Signal<TLUserPreferences>>('userAtom', prefs)
 	useEffect(() => {
@@ -45,7 +45,7 @@ export function useTldrawUser(opts: {
 
 	return useMemo(
 		() =>
-			createTLUser({
+			createTLCurrentUser({
 				userPreferences: computed('userPreferences', () => {
 					const userStuff = userAtom.get()
 					return isSignal(userStuff) ? userStuff.get() : userStuff

package/src/lib/config/createTLStore.ts

@@ -1,4 +1,4 @@
-import { Signal } from '@tldraw/state'
+import { Signal, computed } from '@tldraw/state'
 import { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'
 import {
 	CustomRecordInfo,
@@ -8,13 +8,19 @@ import {
 	TLStore,
 	TLStoreProps,
 	TLStoreSnapshot,
+	TLUser,
+	TLUserStore,
+	UserRecordType,
+	createCachedUserResolve,
 	createTLSchema,
+	createUserId,
 } from '@tldraw/tlschema'
 import { FileHelpers, assert } from '@tldraw/utils'
 import { Editor } from '../editor/Editor'
 import { TLAnyBindingUtilConstructor, checkBindings } from './defaultBindings'
 import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'
 import { TLEditorSnapshot, loadSnapshot } from './TLEditorSnapshot'
+import { defaultUserPreferences, getUserPreferences } from './TLUserPreferences'
 
 /** @public */
 export interface TLStoreBaseOptions {
@@ -30,6 +36,9 @@ export interface TLStoreBaseOptions {
 	/** How should this store upload & resolve assets? */
 	assets?: TLAssetStore
 
+	/** How should this store resolve users for attribution? */
+	users?: TLUserStore
+
 	/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
 	onMount?(editor: Editor): void | (() => void)
 }
@@ -61,6 +70,21 @@ export type TLStoreEventInfo = HistoryEntry<TLRecord>
 
 const defaultAssetResolve: NonNullable<TLAssetStore['resolve']> = (asset) => asset.props.src
 
+const _defaultCurrentUser: Signal<TLUser | null> = computed('defaultCurrentUser', () => {
+	const prefs = getUserPreferences()
+	if (!prefs.id) return null
+	return UserRecordType.create({
+		id: createUserId(prefs.id),
+		name: prefs.name ?? '',
+		color: prefs.color ?? defaultUserPreferences.color,
+	})
+})
+
+/** @public */
+export const defaultUserStore: TLUserStore = {
+	currentUser: _defaultCurrentUser,
+}
+
 /** @public */
 export const inlineBase64AssetStore: TLAssetStore = {
 	upload: async (_, file) => {
@@ -107,6 +131,7 @@ export function createTLStore({
 	defaultName = '',
 	id,
 	assets = inlineBase64AssetStore,
+	users = defaultUserStore,
 	onMount,
 	collaboration,
 	...rest
@@ -124,6 +149,15 @@ export function createTLStore({
 				resolve: assets.resolve ?? defaultAssetResolve,
 				remove: assets.remove ?? (() => Promise.resolve()),
 			},
+			users: {
+				currentUser: users.currentUser,
+				resolve:
+					users.resolve ??
+					createCachedUserResolve((userId) => {
+						const current = users.currentUser.get()
+						return current && current.id === createUserId(userId) ? current : null
+					}),
+			},
 			onMount: (editor) => {
 				assert(editor instanceof Editor)
 				onMount?.(editor)

package/src/lib/editor/Editor.ts

@@ -50,9 +50,13 @@ import {
 	TLShapePartial,
 	TLStore,
 	TLStoreSnapshot,
+	TLUser,
+	TLUserId,
 	TLVideoAsset,
+	UserRecordType,
 	createBindingId,
 	createShapeId,
+	createUserId,
 	getShapePropKeysByStyle,
 	isPageId,
 	isShapeId,
@@ -90,7 +94,7 @@ import {
 	uniqueId,
 } from '@tldraw/utils'
 import EventEmitter from 'eventemitter3'
-import { TLUser, createTLUser } from '../config/createTLUser'
+import { TLCurrentUser, createTLCurrentUser } from '../config/createTLCurrentUser'
 import { TLAnyBindingUtilConstructor, checkBindings } from '../config/defaultBindings'
 import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from '../config/defaultShapes'
 import {
@@ -221,7 +225,7 @@ export interface TLEditorOptions {
 	/**
 	 * A user defined externally to replace the default user.
 	 */
-	user?: TLUser
+	user?: TLCurrentUser
 	/**
 	 * The editor's initial active tool (or other state node id).
 	 */
@@ -346,7 +350,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this._textOptions = atom('text options', options?.text ?? null)
 
-		this.user = new UserPreferencesManager(user ?? createTLUser(), inferDarkMode ?? false)
+		this.user = new UserPreferencesManager(user ?? createTLCurrentUser(), inferDarkMode ?? false)
 		this.disposables.add(() => this.user.dispose())
 
 		this.getContainer = getContainer
@@ -357,6 +361,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.fonts = new FontManager(this, fontAssetUrls)
 
 		this._tickManager = new TickManager(this)
+		this.disposables.add(() => {
+			// Reset camera state to 'idle' so the store isn't left stuck at 'moving'
+			// when tick events stop (e.g. React strict mode disposes while camera is moving)
+			this.off('tick', this._decayCameraStateTimeout)
+			this._setCameraState('idle')
+		})
 
 		this.inputs = new InputsManager(this)
 
@@ -820,6 +830,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 				})
 			)
 		}
+
+		this.disposables.add(
+			react('sync current user record', () => {
+				const user = this.store.props.users.currentUser.get()
+				if (user) {
+					this._ensureUserRecord(user)
+				}
+			})
+		)
 	}
 
 	private readonly _getShapeVisibility?: TLEditorOptions['getShapeVisibility']
@@ -3972,6 +3991,94 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getCollaborators().filter((c) => c.currentPageId === currentPageId)
 	}
 
+	// Attribution
+
+	/**
+	 * Get the current user's ID for attribution purposes.
+	 * Also ensures a `user:` record exists in the store for the current user.
+	 * Returns `null` when the user store has no current user.
+	 *
+	 * @public
+	 */
+	getAttributionUserId(): string | null {
+		const user = this.store.props.users.currentUser.get()
+		if (!user) return null
+		this._ensureUserRecord(user)
+		return UserRecordType.parseId(user.id)
+	}
+
+	/**
+	 * Ensure a user record exists in the store for the given user,
+	 * updating it if the data has changed.
+	 *
+	 * @internal
+	 */
+	_ensureUserRecord(user: TLUser): void {
+		const existing = this.store.get(user.id)
+		if (
+			existing &&
+			existing.name === user.name &&
+			existing.color === user.color &&
+			existing.imageUrl === user.imageUrl &&
+			existing.meta === user.meta
+		) {
+			return
+		}
+		this.run(
+			() => {
+				this.store.put([user])
+			},
+			{ history: 'ignore' }
+		)
+	}
+
+	/**
+	 * Resolve a display name for a user ID. Asks the
+	 * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
+	 * falling back to the `user:` record in the store.
+	 *
+	 * @public
+	 */
+	getAttributionDisplayName(userId: string | null): string | null {
+		if (!userId) return null
+		return (
+			this.store.props.users.resolve(userId).get()?.name ??
+			this.store.get(createUserId(userId))?.name ??
+			null
+		)
+	}
+
+	/**
+	 * Resolve a user record by ID. Asks the
+	 * {@link @tldraw/tlschema#TLUserStore} first (the app's source of truth),
+	 * falling back to the `user:` record in the store.
+	 *
+	 * @public
+	 */
+	getAttributionUser(userId: string | null): TLUser | null {
+		if (!userId) return null
+		return (
+			this.store.props.users.resolve(userId).get() ?? this.store.get(createUserId(userId)) ?? null
+		)
+	}
+
+	/**
+	 * Collect user IDs referenced by a set of shapes via shape-specific props
+	 * (e.g. `textFirstEditedBy` on notes).
+	 *
+	 * @internal
+	 */
+	_getReferencedUserIds(shapes: TLShape[]): Set<string> {
+		const userIds = new Set<string>()
+		for (const shape of shapes) {
+			const util = this.getShapeUtil(shape)
+			for (const id of util.getReferencedUserIds(shape)) {
+				userIds.add(id)
+			}
+		}
+		return userIds
+	}
+
 	// Following
 
 	// When we are 'locked on' to a user, our camera is derived from their camera.
@@ -9157,12 +9264,23 @@ export class Editor extends EventEmitter<TLEventMap> {
 				assets.push(asset)
 			}
 
+			const users: TLUser[] = []
+			const seenUserIds = new Set<TLUserId>()
+			for (const userId of this._getReferencedUserIds(shapes)) {
+				const recordId = createUserId(userId)
+				if (seenUserIds.has(recordId)) continue
+				seenUserIds.add(recordId)
+				const user = this.store.get(recordId)
+				if (user) users.push(user)
+			}
+
 			return {
 				schema: this.store.schema.serialize(),
 				shapes,
 				rootShapeIds,
 				bindings,
 				assets,
+				users,
 			}
 		})
 	}
@@ -9238,6 +9356,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const assets: TLAsset[] = []
 		const shapes: TLShape[] = []
 		const bindings: TLBinding[] = []
+		const users: TLUser[] = []
 
 		// Let's treat the content as a store, and then migrate that store.
 		const store: StoreSnapshot<TLRecord> = {
@@ -9247,6 +9366,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				...Object.fromEntries(
 					content.bindings?.map((bindings) => [bindings.id, bindings] as const) ?? []
 				),
+				...Object.fromEntries(content.users?.map((user) => [user.id, user] as const) ?? []),
 			},
 			schema: content.schema,
 		}
@@ -9268,6 +9388,23 @@ export class Editor extends EventEmitter<TLEventMap> {
 					bindings.push(record)
 					break
 				}
+				case 'user': {
+					users.push(record)
+					break
+				}
+			}
+		}
+
+		if (users.length > 0) {
+			const existingUserIds = new Set(
+				this.store
+					.allRecords()
+					.filter((r): r is TLUser => r.typeName === 'user')
+					.map((r) => r.id)
+			)
+			const usersToCreate = users.filter((u) => !existingUserIds.has(u.id))
+			if (usersToCreate.length > 0) {
+				this.store.put(usersToCreate)
 			}
 		}
 

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts

@@ -1,6 +1,6 @@
 import { atom } from '@tldraw/state'
 import { Mocked, vi } from 'vitest'
-import { TLUser } from '../../../config/createTLUser'
+import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { UserPreferencesManager } from './UserPreferencesManager'
 
@@ -9,7 +9,7 @@ const mockMatchMedia = vi.fn()
 window.matchMedia = mockMatchMedia
 
 describe('UserPreferencesManager', () => {
-	let mockUser: Mocked<TLUser>
+	let mockUser: Mocked<TLCurrentUser>
 	let mockUserPreferences: TLUserPreferences
 	let userPreferencesAtom: any
 	let userPreferencesManager: UserPreferencesManager