@tldraw/editor 4.3.0 → 4.4.0-canary.0791272556f5

package/dist-esm/lib/editor/tools/RootState.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/tools/RootState.ts"],
-  "sourcesContent": ["import { TLKeyboardEventInfo } from '../types/event-types'\nimport { StateNode } from './StateNode'\n\nexport class RootState extends StateNode {\n\tstatic override id = 'root'\n\tstatic override initial = ''\n\tstatic override children() {\n\t\treturn []\n\t}\n\n\toverride onKeyDown(info: TLKeyboardEventInfo) {\n\t\t// todo: move this logic up to the tldraw library, as the \"zoom\" tool only exists there\n\t\tswitch (info.code) {\n\t\t\tcase 'KeyZ': {\n\t\t\t\tif (!(info.shiftKey || info.ctrlKey)) {\n\t\t\t\t\tconst currentTool = this.getCurrent()\n\t\t\t\t\tif (currentTool && currentTool.getCurrent()?.id === 'idle' && this.children!['zoom']) {\n\t\t\t\t\t\tthis.editor.setCurrentTool('zoom', { ...info, onInteractionEnd: currentTool.id })\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t}\n\t}\n}\n"],
-  "mappings": "AACA,SAAS,iBAAiB;AAEnB,MAAM,kBAAkB,UAAU;AAAA,EACxC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW;AAC1B,WAAO,CAAC;AAAA,EACT;AAAA,EAES,UAAU,MAA2B;AAE7C,YAAQ,KAAK,MAAM;AAAA,MAClB,KAAK,QAAQ;AACZ,YAAI,EAAE,KAAK,YAAY,KAAK,UAAU;AACrC,gBAAM,cAAc,KAAK,WAAW;AACpC,cAAI,eAAe,YAAY,WAAW,GAAG,OAAO,UAAU,KAAK,SAAU,MAAM,GAAG;AACrF,iBAAK,OAAO,eAAe,QAAQ,EAAE,GAAG,MAAM,kBAAkB,YAAY,GAAG,CAAC;AAAA,UACjF;AAAA,QACD;AACA;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["import { StateNode } from './StateNode'\n\nexport class RootState extends StateNode {\n\tstatic override id = 'root'\n\tstatic override initial = ''\n\tstatic override children() {\n\t\treturn []\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAEnB,MAAM,kBAAkB,UAAU;AAAA,EACxC,OAAgB,KAAK;AAAA,EACrB,OAAgB,UAAU;AAAA,EAC1B,OAAgB,WAAW;AAC1B,WAAO,CAAC;AAAA,EACT;AACD;",
   "names": []
 }

package/dist-esm/lib/hooks/usePeerIds.mjs

@@ -1,4 +1,10 @@
-import { useComputed, useValue } from "@tldraw/state-react";
+import { useAtom, useComputed, useValue } from "@tldraw/state-react";
+import { isEqual } from "@tldraw/utils";
+import { useEffect } from "react";
+import {
+  getCollaboratorStateFromElapsedTime,
+  shouldShowCollaborator
+} from "../utils/collaboratorState.mjs";
 import { uniq } from "../utils/uniq.mjs";
 import { useEditor } from "./useEditor.mjs";
 function usePeerIds() {
@@ -11,7 +17,33 @@ function usePeerIds() {
   );
   return useValue($userIds);
 }
+function useActivePeerIds$() {
+  const $time = useAtom("peerIdsTime", Date.now());
+  const editor = useEditor();
+  useEffect(() => {
+    const interval = editor.timers.setInterval(() => {
+      $time.set(Date.now());
+    }, editor.options.collaboratorCheckIntervalMs);
+    return () => clearInterval(interval);
+  }, [editor, $time]);
+  return useComputed(
+    "activePeerIds",
+    () => {
+      const now = $time.get();
+      return new Set(
+        editor.getCollaborators().filter((p) => {
+          const elapsed = Math.max(0, now - (p.lastActivityTimestamp ?? Infinity));
+          const state = getCollaboratorStateFromElapsedTime(editor, elapsed);
+          return shouldShowCollaborator(editor, p, state);
+        }).map((p) => p.userId)
+      );
+    },
+    { isEqual },
+    [editor]
+  );
+}
 export {
+  useActivePeerIds$,
   usePeerIds
 };
 //# sourceMappingURL=usePeerIds.mjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePeerIds.ts"],
-  "sourcesContent": ["import { useComputed, useValue } from '@tldraw/state-react'\nimport { uniq } from '../utils/uniq'\nimport { useEditor } from './useEditor'\n\n// TODO: maybe move this to a computed property on the App class?\n/**\n * @returns The list of peer UserIDs\n * @public\n */\nexport function usePeerIds() {\n\tconst editor = useEditor()\n\n\tconst $userIds = useComputed(\n\t\t'userIds',\n\t\t() => uniq(editor.getCollaborators().map((p) => p.userId)).sort(),\n\t\t{ isEqual: (a, b) => a.join(',') === b.join?.(',') },\n\t\t[editor]\n\t)\n\n\treturn useValue($userIds)\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,gBAAgB;AACtC,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAOnB,SAAS,aAAa;AAC5B,QAAM,SAAS,UAAU;AAEzB,QAAM,WAAW;AAAA,IAChB;AAAA,IACA,MAAM,KAAK,OAAO,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK;AAAA,IAChE,EAAE,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,EAAE;AAAA,IACnD,CAAC,MAAM;AAAA,EACR;AAEA,SAAO,SAAS,QAAQ;AACzB;",
+  "sourcesContent": ["import { useAtom, useComputed, useValue } from '@tldraw/state-react'\nimport { isEqual } from '@tldraw/utils'\nimport { useEffect } from 'react'\nimport {\n\tgetCollaboratorStateFromElapsedTime,\n\tshouldShowCollaborator,\n} from '../utils/collaboratorState'\nimport { uniq } from '../utils/uniq'\nimport { useEditor } from './useEditor'\n\n// TODO: maybe move this to a computed property on the App class?\n/**\n * @returns The list of peer UserIDs\n * @public\n */\nexport function usePeerIds() {\n\tconst editor = useEditor()\n\n\tconst $userIds = useComputed(\n\t\t'userIds',\n\t\t() => uniq(editor.getCollaborators().map((p) => p.userId)).sort(),\n\t\t{ isEqual: (a, b) => a.join(',') === b.join?.(',') },\n\t\t[editor]\n\t)\n\n\treturn useValue($userIds)\n}\n\n/**\n * Returns a computed signal of active peer user IDs that should be shown.\n * Automatically re-evaluates on an interval to handle time-based state transitions\n * (active -> idle -> inactive).\n *\n * @returns A computed signal containing a Set of active peer user IDs\n * @internal\n */\nexport function useActivePeerIds$() {\n\tconst $time = useAtom('peerIdsTime', Date.now())\n\tconst editor = useEditor()\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\t$time.set(Date.now())\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor, $time])\n\n\treturn useComputed(\n\t\t'activePeerIds',\n\t\t() => {\n\t\t\tconst now = $time.get()\n\t\t\treturn new Set(\n\t\t\t\teditor\n\t\t\t\t\t.getCollaborators()\n\t\t\t\t\t.filter((p) => {\n\t\t\t\t\t\tconst elapsed = Math.max(0, now - (p.lastActivityTimestamp ?? Infinity))\n\t\t\t\t\t\tconst state = getCollaboratorStateFromElapsedTime(editor, elapsed)\n\t\t\t\t\t\treturn shouldShowCollaborator(editor, p, state)\n\t\t\t\t\t})\n\t\t\t\t\t.map((p) => p.userId)\n\t\t\t)\n\t\t},\n\t\t{ isEqual },\n\t\t[editor]\n\t)\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,aAAa,gBAAgB;AAC/C,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAOnB,SAAS,aAAa;AAC5B,QAAM,SAAS,UAAU;AAEzB,QAAM,WAAW;AAAA,IAChB;AAAA,IACA,MAAM,KAAK,OAAO,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK;AAAA,IAChE,EAAE,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,EAAE;AAAA,IACnD,CAAC,MAAM;AAAA,EACR;AAEA,SAAO,SAAS,QAAQ;AACzB;AAUO,SAAS,oBAAoB;AACnC,QAAM,QAAQ,QAAQ,eAAe,KAAK,IAAI,CAAC;AAC/C,QAAM,SAAS,UAAU;AACzB,YAAU,MAAM;AACf,UAAM,WAAW,OAAO,OAAO,YAAY,MAAM;AAChD,YAAM,IAAI,KAAK,IAAI,CAAC;AAAA,IACrB,GAAG,OAAO,QAAQ,2BAA2B;AAE7C,WAAO,MAAM,cAAc,QAAQ;AAAA,EACpC,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AAAA,IACN;AAAA,IACA,MAAM;AACL,YAAM,MAAM,MAAM,IAAI;AACtB,aAAO,IAAI;AAAA,QACV,OACE,iBAAiB,EACjB,OAAO,CAAC,MAAM;AACd,gBAAM,UAAU,KAAK,IAAI,GAAG,OAAO,EAAE,yBAAyB,SAAS;AACvE,gBAAM,QAAQ,oCAAoC,QAAQ,OAAO;AACjE,iBAAO,uBAAuB,QAAQ,GAAG,KAAK;AAAA,QAC/C,CAAC,EACA,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,MACtB;AAAA,IACD;AAAA,IACA,EAAE,QAAQ;AAAA,IACV,CAAC,MAAM;AAAA,EACR;AACD;",
   "names": []
 }

package/dist-esm/lib/options.mjs

@@ -43,6 +43,7 @@ const defaultTldrawOptions = {
   flattenImageBoundsExpand: 64,
   flattenImageBoundsPadding: 16,
   laserDelayMs: 1200,
+  laserFadeoutMs: 500,
   maxExportDelayMs: 5e3,
   tooltipDelayMs: 700,
   temporaryAssetPreviewLifetimeMs: 18e4,

package/dist-esm/lib/options.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/lib/options.ts"],
-  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n\t/**\n\t * Whether to use debounced zoom level for certain rendering optimizations. When true,\n\t * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,\n\t * reducing re-renders. When false, it always returns the current zoom level.\n\t */\n\treadonly debouncedZoom: boolean\n\t/**\n\t * The number of shapes that must be on the page for the debounced zoom level to be used.\n\t * Defaults to 300 shapes.\n\t */\n\treadonly debouncedZoomThreshold: number\n\t/**\n\t * Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down.\n\t * When false, the spacebar will not pan the camera.\n\t */\n\treadonly spacebarPanning: boolean\n\t/**\n\t * The default padding (in pixels) used when zooming to fit content in the viewport.\n\t * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.\n\t * The actual padding used is the minimum of this value and 28% of the viewport width.\n\t * Defaults to 128 pixels.\n\t */\n\treadonly zoomToFitPadding: number\n\t/**\n\t * The distance (in screen pixels) at which shapes snap to guides and other shapes.\n\t */\n\treadonly snapThreshold: number\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n\tdebouncedZoom: true,\n\tdebouncedZoomThreshold: 500,\n\tspacebarPanning: true,\n\tzoomToFitPadding: 128,\n\tsnapThreshold: 8,\n} as const satisfies TldrawOptions\n"],
-  "mappings": "AAAA,SAAwB,gBAAgB;AAuHjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AAAA,EACP,eAAe;AAAA,EACf,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,eAAe;AAChB;",
+  "sourcesContent": ["import { ComponentType, Fragment } from 'react'\n\n/**\n * Options for configuring tldraw. For defaults, see {@link defaultTldrawOptions}.\n *\n * @example\n * ```tsx\n * const options: Partial<TldrawOptions> = {\n *     maxPages: 3,\n *     maxShapesPerPage: 1000,\n * }\n *\n * function MyTldrawComponent() {\n *     return <Tldraw options={options} />\n * }\n * ```\n *\n * @public\n */\nexport interface TldrawOptions {\n\treadonly maxShapesPerPage: number\n\treadonly maxFilesAtOnce: number\n\treadonly maxPages: number\n\treadonly animationMediumMs: number\n\treadonly followChaseViewportSnap: number\n\treadonly doubleClickDurationMs: number\n\treadonly multiClickDurationMs: number\n\treadonly coarseDragDistanceSquared: number\n\treadonly dragDistanceSquared: number\n\treadonly uiDragDistanceSquared: number\n\treadonly uiCoarseDragDistanceSquared: number\n\treadonly defaultSvgPadding: number\n\treadonly cameraSlideFriction: number\n\treadonly gridSteps: readonly {\n\t\treadonly min: number\n\t\treadonly mid: number\n\t\treadonly step: number\n\t}[]\n\treadonly collaboratorInactiveTimeoutMs: number\n\treadonly collaboratorIdleTimeoutMs: number\n\treadonly collaboratorCheckIntervalMs: number\n\treadonly cameraMovingTimeoutMs: number\n\treadonly hitTestMargin: number\n\treadonly edgeScrollDelay: number\n\treadonly edgeScrollEaseDuration: number\n\treadonly edgeScrollSpeed: number\n\treadonly edgeScrollDistance: number\n\treadonly coarsePointerWidth: number\n\treadonly coarseHandleRadius: number\n\treadonly handleRadius: number\n\treadonly longPressDurationMs: number\n\treadonly textShadowLod: number\n\treadonly adjacentShapeMargin: number\n\treadonly flattenImageBoundsExpand: number\n\treadonly flattenImageBoundsPadding: number\n\treadonly laserDelayMs: number\n\t/**\n\t * How long (in milliseconds) to fade all laser scribbles after the session ends.\n\t * The total points across all scribbles will be removed proportionally over this duration.\n\t * Defaults to 500ms (0.5 seconds).\n\t */\n\treadonly laserFadeoutMs: number\n\treadonly maxExportDelayMs: number\n\treadonly tooltipDelayMs: number\n\t/**\n\t * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before\n\t * they expire? Defaults to 3 minutes.\n\t */\n\treadonly temporaryAssetPreviewLifetimeMs: number\n\treadonly actionShortcutsLocation: 'menu' | 'toolbar' | 'swap'\n\treadonly createTextOnCanvasDoubleClick: boolean\n\t/**\n\t * The react provider to use when exporting an image. This is useful if your shapes depend on\n\t * external context providers. By default, this is `React.Fragment`.\n\t */\n\treadonly exportProvider: ComponentType<{ children: React.ReactNode }>\n\t/**\n\t * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.\n\t */\n\treadonly enableToolbarKeyboardShortcuts: boolean\n\t/**\n\t * The maximum number of fonts that will be loaded while blocking the main rendering of the\n\t * canvas. If there are more than this number of fonts needed, we'll just show the canvas right\n\t * away and let the fonts load in in the background.\n\t */\n\treadonly maxFontsToLoadBeforeRender: number\n\t/**\n\t * If you have a CSP policy that blocks inline styles, you can use this prop to provide a\n\t * nonce to use in the editor's styles.\n\t */\n\treadonly nonce: string | undefined\n\t/**\n\t * Branding name of the app, currently only used for adding aria-label for the application.\n\t */\n\treadonly branding?: string\n\t/**\n\t * Whether to use debounced zoom level for certain rendering optimizations. When true,\n\t * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,\n\t * reducing re-renders. When false, it always returns the current zoom level.\n\t */\n\treadonly debouncedZoom: boolean\n\t/**\n\t * The number of shapes that must be on the page for the debounced zoom level to be used.\n\t * Defaults to 300 shapes.\n\t */\n\treadonly debouncedZoomThreshold: number\n\t/**\n\t * Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down.\n\t * When false, the spacebar will not pan the camera.\n\t */\n\treadonly spacebarPanning: boolean\n\t/**\n\t * The default padding (in pixels) used when zooming to fit content in the viewport.\n\t * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.\n\t * The actual padding used is the minimum of this value and 28% of the viewport width.\n\t * Defaults to 128 pixels.\n\t */\n\treadonly zoomToFitPadding: number\n\t/**\n\t * The distance (in screen pixels) at which shapes snap to guides and other shapes.\n\t */\n\treadonly snapThreshold: number\n}\n\n/** @public */\nexport const defaultTldrawOptions = {\n\tmaxShapesPerPage: 4000,\n\tmaxFilesAtOnce: 100,\n\tmaxPages: 40,\n\tanimationMediumMs: 320,\n\tfollowChaseViewportSnap: 2,\n\tdoubleClickDurationMs: 450,\n\tmultiClickDurationMs: 200,\n\tcoarseDragDistanceSquared: 36, // 6 squared\n\tdragDistanceSquared: 16, // 4 squared\n\tuiDragDistanceSquared: 16, // 4 squared\n\t// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger\n\t// threshold than usual here to try and prevent accidental drags.\n\tuiCoarseDragDistanceSquared: 625, // 25 squared\n\tdefaultSvgPadding: 32,\n\tcameraSlideFriction: 0.09,\n\tgridSteps: [\n\t\t{ min: -1, mid: 0.15, step: 64 },\n\t\t{ min: 0.05, mid: 0.375, step: 16 },\n\t\t{ min: 0.15, mid: 1, step: 4 },\n\t\t{ min: 0.7, mid: 2.5, step: 1 },\n\t],\n\tcollaboratorInactiveTimeoutMs: 60000,\n\tcollaboratorIdleTimeoutMs: 3000,\n\tcollaboratorCheckIntervalMs: 1200,\n\tcameraMovingTimeoutMs: 64,\n\thitTestMargin: 8,\n\tedgeScrollDelay: 200,\n\tedgeScrollEaseDuration: 200,\n\tedgeScrollSpeed: 25,\n\tedgeScrollDistance: 8,\n\tcoarsePointerWidth: 12,\n\tcoarseHandleRadius: 20,\n\thandleRadius: 12,\n\tlongPressDurationMs: 500,\n\ttextShadowLod: 0.35,\n\tadjacentShapeMargin: 10,\n\tflattenImageBoundsExpand: 64,\n\tflattenImageBoundsPadding: 16,\n\tlaserDelayMs: 1200,\n\tlaserFadeoutMs: 500,\n\tmaxExportDelayMs: 5000,\n\ttooltipDelayMs: 700,\n\ttemporaryAssetPreviewLifetimeMs: 180000,\n\tactionShortcutsLocation: 'swap',\n\tcreateTextOnCanvasDoubleClick: true,\n\texportProvider: Fragment,\n\tenableToolbarKeyboardShortcuts: true,\n\tmaxFontsToLoadBeforeRender: Infinity,\n\tnonce: undefined,\n\tdebouncedZoom: true,\n\tdebouncedZoomThreshold: 500,\n\tspacebarPanning: true,\n\tzoomToFitPadding: 128,\n\tsnapThreshold: 8,\n} as const satisfies TldrawOptions\n"],
+  "mappings": "AAAA,SAAwB,gBAAgB;AA6HjC,MAAM,uBAAuB;AAAA,EACnC,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,2BAA2B;AAAA;AAAA,EAC3B,qBAAqB;AAAA;AAAA,EACrB,uBAAuB;AAAA;AAAA;AAAA;AAAA,EAGvB,6BAA6B;AAAA;AAAA,EAC7B,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,IACV,EAAE,KAAK,IAAI,KAAK,MAAM,MAAM,GAAG;AAAA,IAC/B,EAAE,KAAK,MAAM,KAAK,OAAO,MAAM,GAAG;AAAA,IAClC,EAAE,KAAK,MAAM,KAAK,GAAG,MAAM,EAAE;AAAA,IAC7B,EAAE,KAAK,KAAK,KAAK,KAAK,MAAM,EAAE;AAAA,EAC/B;AAAA,EACA,+BAA+B;AAAA,EAC/B,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,0BAA0B;AAAA,EAC1B,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,iCAAiC;AAAA,EACjC,yBAAyB;AAAA,EACzB,+BAA+B;AAAA,EAC/B,gBAAgB;AAAA,EAChB,gCAAgC;AAAA,EAChC,4BAA4B;AAAA,EAC5B,OAAO;AAAA,EACP,eAAe;AAAA,EACf,wBAAwB;AAAA,EACxB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,eAAe;AAChB;",
   "names": []
 }

package/dist-esm/lib/utils/collaboratorState.mjs

@@ -0,0 +1,22 @@
+function getCollaboratorStateFromElapsedTime(editor, elapsed) {
+  return elapsed > editor.options.collaboratorInactiveTimeoutMs ? "inactive" : elapsed > editor.options.collaboratorIdleTimeoutMs ? "idle" : "active";
+}
+function shouldShowCollaborator(editor, presence, state) {
+  const { followingUserId, highlightedUserIds } = editor.getInstanceState();
+  switch (state) {
+    case "inactive":
+      return followingUserId === presence.userId || highlightedUserIds.includes(presence.userId);
+    case "idle":
+      if (presence.followingUserId === editor.user.getId()) {
+        return !!(presence.chatMessage || highlightedUserIds.includes(presence.userId));
+      }
+      return true;
+    case "active":
+      return true;
+  }
+}
+export {
+  getCollaboratorStateFromElapsedTime,
+  shouldShowCollaborator
+};
+//# sourceMappingURL=collaboratorState.mjs.map

package/dist-esm/lib/utils/collaboratorState.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/utils/collaboratorState.ts"],
+  "sourcesContent": ["import { TLInstancePresence } from '@tldraw/tlschema'\nimport { Editor } from '../editor/Editor'\n\n/** The activity state of a collaborator */\nexport type CollaboratorState = 'active' | 'idle' | 'inactive'\n\n/**\n * Get the activity state of a collaborator based on elapsed time since their last activity.\n *\n * @param editor - The editor instance\n * @param elapsed - Time in milliseconds since the collaborator's last activity\n * @returns The collaborator's activity state\n */\nexport function getCollaboratorStateFromElapsedTime(\n\teditor: Editor,\n\telapsed: number\n): CollaboratorState {\n\treturn elapsed > editor.options.collaboratorInactiveTimeoutMs\n\t\t? 'inactive'\n\t\t: elapsed > editor.options.collaboratorIdleTimeoutMs\n\t\t\t? 'idle'\n\t\t\t: 'active'\n}\n\n/**\n * Determine whether a collaborator should be shown based on their activity state\n * and the current instance state (following, highlighted users, etc.).\n *\n * @param editor - The editor instance\n * @param presence - The collaborator's presence data\n * @param state - The collaborator's activity state\n * @returns Whether the collaborator should be shown\n */\nexport function shouldShowCollaborator(\n\teditor: Editor,\n\tpresence: TLInstancePresence,\n\tstate: CollaboratorState\n): boolean {\n\tconst { followingUserId, highlightedUserIds } = editor.getInstanceState()\n\n\tswitch (state) {\n\t\tcase 'inactive':\n\t\t\t// If they're inactive, only show if we're following them or they're highlighted\n\t\t\treturn followingUserId === presence.userId || highlightedUserIds.includes(presence.userId)\n\t\tcase 'idle':\n\t\t\t// If they're idle and following us, hide them unless they have a chat message or are highlighted\n\t\t\tif (presence.followingUserId === editor.user.getId()) {\n\t\t\t\treturn !!(presence.chatMessage || highlightedUserIds.includes(presence.userId))\n\t\t\t}\n\t\t\treturn true\n\t\tcase 'active':\n\t\t\treturn true\n\t}\n}\n"],
+  "mappings": "AAaO,SAAS,oCACf,QACA,SACoB;AACpB,SAAO,UAAU,OAAO,QAAQ,gCAC7B,aACA,UAAU,OAAO,QAAQ,4BACxB,SACA;AACL;AAWO,SAAS,uBACf,QACA,UACA,OACU;AACV,QAAM,EAAE,iBAAiB,mBAAmB,IAAI,OAAO,iBAAiB;AAExE,UAAQ,OAAO;AAAA,IACd,KAAK;AAEJ,aAAO,oBAAoB,SAAS,UAAU,mBAAmB,SAAS,SAAS,MAAM;AAAA,IAC1F,KAAK;AAEJ,UAAI,SAAS,oBAAoB,OAAO,KAAK,MAAM,GAAG;AACrD,eAAO,CAAC,EAAE,SAAS,eAAe,mBAAmB,SAAS,SAAS,MAAM;AAAA,MAC9E;AACA,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AACD;",
+  "names": []
+}

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.3.0";
+const version = "4.4.0-canary.0791272556f5";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-01-21T11:56:39.106Z",
-  patch: "2026-01-21T11:56:39.106Z"
+  minor: "2026-02-04T23:05:53.998Z",
+  patch: "2026-02-04T23:05:53.998Z"
 };
 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.3.0'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-01-21T11:56:39.106Z',\n\tpatch: '2026-01-21T11:56:39.106Z',\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.4.0-canary.0791272556f5'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-02-04T23:05:53.998Z',\n\tpatch: '2026-02-04T23:05:53.998Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -60,6 +60,7 @@
 
 	/* Misc */
 	--tl-zoom: 1;
+	--tl-tab-size: 2;
 
 	/* Cursor SVGs */
 	--tl-cursor-none: none;
@@ -895,6 +896,10 @@ input,
 	/* white-space: break-spaces; */
 }
 
+.tl-rich-text {
+	tab-size: var(--tl-tab-size, 2);
+}
+
 .tl-rich-text p {
 	margin: 0;
 	/* Depending on the extensions, <p> tags can be empty, without a <br />. */
@@ -1162,6 +1167,12 @@ input,
 	contain: size layout;
 }
 
+.tl-canvas-indicators {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
 /* ---------------------- Shape --------------------- */
 
 .tl-shape {
@@ -1536,15 +1547,6 @@ input,
 	cursor: var(--tl-cursor-text);
 }
 
-/* If mobile use 16px as font size */
-/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
-/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
-@media (max-width: 600px) {
-	.tl-frame-heading {
-		font-size: 16px;
-	}
-}
-
 /* ------------------- Embed Shape ------------------ */
 
 .tl-embed {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.3.0",
+  "version": "4.4.0-canary.0791272556f5",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,19 +50,18 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "4.3.0",
-    "@tldraw/state-react": "4.3.0",
-    "@tldraw/store": "4.3.0",
-    "@tldraw/tlschema": "4.3.0",
-    "@tldraw/utils": "4.3.0",
-    "@tldraw/validate": "4.3.0",
-    "@types/core-js": "^2.5.8",
+    "@tldraw/state": "4.4.0-canary.0791272556f5",
+    "@tldraw/state-react": "4.4.0-canary.0791272556f5",
+    "@tldraw/store": "4.4.0-canary.0791272556f5",
+    "@tldraw/tlschema": "4.4.0-canary.0791272556f5",
+    "@tldraw/utils": "4.4.0-canary.0791272556f5",
+    "@tldraw/validate": "4.4.0-canary.0791272556f5",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
-    "core-js": "^3.40.0",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
-    "is-plain-object": "^5.0.0"
+    "is-plain-object": "^5.0.0",
+    "rbush": "^4.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",
@@ -73,6 +72,7 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/benchmark": "^2.1.5",
+    "@types/rbush": "^4.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/wicg-file-system-access": "^2020.9.8",

package/src/index.ts

@@ -1,9 +1,4 @@
 import { registerTldrawLibraryVersion } from '@tldraw/utils'
-import 'core-js/stable/array/at.js'
-import 'core-js/stable/array/flat-map.js'
-import 'core-js/stable/array/flat.js'
-import 'core-js/stable/string/at.js'
-import 'core-js/stable/string/replace-all.js'
 
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/state'
@@ -150,6 +145,7 @@ export { InputsManager } from './lib/editor/managers/InputsManager/InputsManager
 export {
 	ScribbleManager,
 	type ScribbleItem,
+	type ScribbleSessionOptions,
 } from './lib/editor/managers/ScribbleManager/ScribbleManager'
 export {
 	BoundsSnaps,
@@ -164,6 +160,7 @@ export {
 	type SnapData,
 	type SnapIndicator,
 } from './lib/editor/managers/SnapManager/SnapManager'
+export { SpatialIndexManager } from './lib/editor/managers/SpatialIndexManager/SpatialIndexManager'
 export {
 	TextManager,
 	type TLMeasureTextOpts,
@@ -183,6 +180,7 @@ export {
 	type TLEditStartInfo,
 	type TLGeometryOpts,
 	type TLHandleDragInfo,
+	type TLIndicatorPath,
 	type TLResizeInfo,
 	type TLResizeMode,
 	type TLShapeUtilCanBeLaidOutOpts,

package/src/lib/TldrawEditor.tsx

@@ -191,7 +191,7 @@ export interface TldrawEditorBaseProps {
 	 * Provides a way to hide shapes.
 	 *
 	 * Hidden shapes will not render in the editor, and they will not be eligible for hit test via
-	 * {@link Editor#getShapeAtPoint} and {@link Editor#getShapesAtPoint}. But otherwise they will
+	 * {@link @tldraw/editor#Editor.getShapeAtPoint} and {@link @tldraw/editor#Editor.getShapesAtPoint}. But otherwise they will
 	 * remain in the store and participate in all other operations.
 	 *
 	 * @example

package/src/lib/components/LiveCollaborators.tsx

@@ -6,6 +6,11 @@ import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { usePeerIds } from '../hooks/usePeerIds'
 import { usePresence } from '../hooks/usePresence'
+import {
+	CollaboratorState,
+	getCollaboratorStateFromElapsedTime,
+	shouldShowCollaborator,
+} from '../utils/collaboratorState'
 
 export const LiveCollaborators = track(function Collaborators() {
 	const peerIds = usePeerIds()
@@ -26,30 +31,8 @@ const CollaboratorGuard = track(function CollaboratorGuard({
 		return null
 	}
 
-	switch (collaboratorState) {
-		case 'inactive': {
-			const { followingUserId, highlightedUserIds } = editor.getInstanceState()
-			// If they're inactive and unless we're following them or they're highlighted, hide them
-			if (!(followingUserId === presence.userId || highlightedUserIds.includes(presence.userId))) {
-				return null
-			}
-			break
-		}
-		case 'idle': {
-			const { highlightedUserIds } = editor.getInstanceState()
-			// If they're idle and following us and unless they have a chat message or are highlighted, hide them
-			if (
-				presence.followingUserId === editor.user.getId() &&
-				!(presence.chatMessage || highlightedUserIds.includes(presence.userId))
-			) {
-				return null
-			}
-			break
-		}
-		case 'active': {
-			// If they're active, show them
-			break
-		}
+	if (!shouldShowCollaborator(editor, presence, collaboratorState)) {
+		return null
 	}
 
 	return <Collaborator latestPresence={presence} />
@@ -137,7 +120,16 @@ const Collaborator = track(function Collaborator({
 			) : null}
 			{CollaboratorShapeIndicator &&
 				selectedShapeIds
-					.filter((id) => !editor.isShapeHidden(id))
+					.filter((id) => {
+						// Skip hidden shapes
+						if (editor.isShapeHidden(id)) return false
+						// Only render SVG indicators for shapes that use legacy indicators
+						// Canvas-based indicators are handled by CanvasShapeIndicators
+						const shape = editor.getShape(id)
+						if (!shape) return false
+						const util = editor.getShapeUtil(shape)
+						return util.useLegacyIndicator()
+					})
 					.map((shapeId) => (
 						<CollaboratorShapeIndicator
 							className="tl-collaborator__shape-indicator"
@@ -152,24 +144,21 @@ const Collaborator = track(function Collaborator({
 	)
 })
 
-function getStateFromElapsedTime(editor: Editor, elapsed: number) {
-	return elapsed > editor.options.collaboratorInactiveTimeoutMs
-		? 'inactive'
-		: elapsed > editor.options.collaboratorIdleTimeoutMs
-			? 'idle'
-			: 'active'
-}
-
-function useCollaboratorState(editor: Editor, latestPresence: TLInstancePresence | null) {
+function useCollaboratorState(
+	editor: Editor,
+	latestPresence: TLInstancePresence | null
+): CollaboratorState {
 	const rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)
 
-	const [state, setState] = useState<'active' | 'idle' | 'inactive'>(() =>
-		getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
+	const [state, setState] = useState<CollaboratorState>(() =>
+		getCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
 	)
 
 	useEffect(() => {
 		const interval = editor.timers.setInterval(() => {
-			setState(getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current))
+			setState(
+				getCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
+			)
 		}, editor.options.collaboratorCheckIntervalMs)
 
 		return () => clearInterval(interval)

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

@@ -0,0 +1,244 @@
+import { useComputed, useQuickReactor } from '@tldraw/state-react'
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { dedupe, isEqual } from '@tldraw/utils'
+import { memo, useEffect, useRef } from 'react'
+import { Editor } from '../../editor/Editor'
+import { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'
+import { useEditor } from '../../hooks/useEditor'
+import { useIsDarkMode } from '../../hooks/useIsDarkMode'
+import { useActivePeerIds$ } from '../../hooks/usePeerIds'
+
+interface CollaboratorIndicatorData {
+	color: string
+	shapeIds: TLShapeId[]
+}
+
+const indicatorPathCache = createComputedCache(
+	'indicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	}
+)
+
+const getIndicatorPath = (editor: Editor, shape: TLShape) => {
+	return indicatorPathCache.get(editor, shape.id)
+}
+
+function renderShapeIndicator(
+	ctx: CanvasRenderingContext2D,
+	editor: Editor,
+	shapeId: TLShapeId,
+	renderingShapeIds: Set<TLShapeId>
+): boolean {
+	if (!renderingShapeIds.has(shapeId)) return false
+
+	const shape = editor.getShape(shapeId)
+	if (!shape || shape.isLocked) return false
+
+	const pageTransform = editor.getShapePageTransform(shape)
+	if (!pageTransform) return false
+
+	const indicatorPath = getIndicatorPath(editor, shape)
+	if (!indicatorPath) return false
+
+	ctx.save()
+	ctx.transform(
+		pageTransform.a,
+		pageTransform.b,
+		pageTransform.c,
+		pageTransform.d,
+		pageTransform.e,
+		pageTransform.f
+	)
+	renderIndicatorPath(ctx, indicatorPath)
+	ctx.restore()
+
+	return true
+}
+
+function renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {
+	if (indicatorPath instanceof Path2D) {
+		ctx.stroke(indicatorPath)
+	} else {
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (clipPath) {
+			ctx.save()
+			ctx.clip(clipPath, 'evenodd')
+			ctx.stroke(path)
+			ctx.restore()
+		} else {
+			ctx.stroke(path)
+		}
+
+		if (additionalPaths) {
+			for (const additionalPath of additionalPaths) {
+				ctx.stroke(additionalPath)
+			}
+		}
+	}
+}
+
+/** @internal @react */
+export const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {
+	const editor = useEditor()
+	const canvasRef = useRef<HTMLCanvasElement>(null)
+
+	// Cache the selected color to avoid getComputedStyle on every render
+	const rSelectedColor = useRef<string | null>(null)
+	const isDarkMode = useIsDarkMode()
+
+	useEffect(() => {
+		const timer = editor.timers.setTimeout(() => {
+			rSelectedColor.current = null
+		}, 0)
+		return () => clearTimeout(timer)
+	}, [isDarkMode, editor])
+
+	// Get active peer IDs (already handles time-based state transitions)
+	const activePeerIds$ = useActivePeerIds$()
+
+	const $renderData = useComputed(
+		'indicator render data',
+		() => {
+			const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))
+
+			// Compute ids to display for selected/hovered shapes
+			const idsToDisplay = new Set<TLShapeId>()
+			const instanceState = editor.getInstanceState()
+			const isChangingStyle = instanceState.isChangingStyle
+			const isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')
+			const isInSelectState = editor.isInAny(
+				'select.brushing',
+				'select.scribble_brushing',
+				'select.pointing_shape',
+				'select.pointing_selection',
+				'select.pointing_handle'
+			)
+
+			if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
+				for (const id of editor.getSelectedShapeIds()) {
+					idsToDisplay.add(id)
+				}
+				if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
+					const hovered = editor.getHoveredShapeId()
+					if (hovered) idsToDisplay.add(hovered)
+				}
+			}
+
+			// Compute hinting shape ids
+			const hintingShapeIds = dedupe(editor.getHintingShapeIds())
+
+			// Compute collaborator indicators
+			const collaboratorIndicators: CollaboratorIndicatorData[] = []
+			const currentPageId = editor.getCurrentPageId()
+			const activePeerIds = activePeerIds$.get()
+
+			const collaborators = editor.getCollaborators()
+			for (const peerId of activePeerIds.values()) {
+				// Skip collaborators on different pages
+				const presence = collaborators.find((c) => c.userId === peerId)
+				if (!presence || presence.currentPageId !== currentPageId) continue
+
+				// Filter to shapes that are visible and on the current rendering set
+				const visibleShapeIds = presence.selectedShapeIds.filter(
+					(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)
+				)
+
+				if (visibleShapeIds.length > 0) {
+					collaboratorIndicators.push({
+						color: presence.color,
+						shapeIds: visibleShapeIds,
+					})
+				}
+			}
+
+			return {
+				idsToDisplay,
+				renderingShapeIds,
+				hintingShapeIds,
+				collaboratorIndicators,
+			}
+		},
+		{ isEqual: isEqual },
+		[editor, activePeerIds$]
+	)
+
+	useQuickReactor(
+		'canvas indicators render',
+		() => {
+			const canvas = canvasRef.current
+			if (!canvas) return
+
+			const ctx = canvas.getContext('2d')
+			if (!ctx) return
+
+			const { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =
+				$renderData.get()
+
+			const { w, h } = editor.getViewportScreenBounds()
+			const dpr = window.devicePixelRatio || 1
+			const { x: cx, y: cy, z: zoom } = editor.getCamera()
+
+			const canvasWidth = Math.ceil(w * dpr)
+			const canvasHeight = Math.ceil(h * dpr)
+
+			if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
+				canvas.width = canvasWidth
+				canvas.height = canvasHeight
+				canvas.style.width = `${w}px`
+				canvas.style.height = `${h}px`
+			}
+
+			ctx.resetTransform()
+			ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+			ctx.scale(dpr, dpr)
+			ctx.scale(zoom, zoom)
+			ctx.translate(cx, cy)
+
+			ctx.lineCap = 'round'
+			ctx.lineJoin = 'round'
+
+			// Draw collaborator indicators first (underneath local indicators)
+			// Use 0.5 opacity to match the original SVG-based collaborator indicators
+			ctx.lineWidth = 1.5 / zoom
+			for (const collaborator of collaboratorIndicators) {
+				ctx.strokeStyle = collaborator.color
+				ctx.globalAlpha = 0.7
+				for (const shapeId of collaborator.shapeIds) {
+					renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+				}
+			}
+
+			// Reset alpha for local indicators
+			ctx.globalAlpha = 1.0
+
+			// Use cached color, only call getComputedStyle when cache is empty
+			if (!rSelectedColor.current) {
+				rSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')
+			}
+
+			ctx.strokeStyle = rSelectedColor.current
+
+			// Draw selected/hovered indicators (1.5px stroke)
+			ctx.lineWidth = 1.5 / zoom
+			for (const shapeId of idsToDisplay) {
+				renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+			}
+
+			// Draw hinted indicators with a thicker stroke (2.5px)
+			if (hintingShapeIds.length > 0) {
+				ctx.lineWidth = 2.5 / zoom
+				for (const shapeId of hintingShapeIds) {
+					renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+				}
+			}
+		},
+		[editor, $renderData]
+	)
+
+	return <canvas ref={canvasRef} className="tl-canvas-indicators" />
+})