@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0

package/src/lib/hooks/usePeerIds.ts

@@ -1,22 +1,12 @@
-import { useAtom, useComputed, useValue } from '@tldraw/state-react'
-import { useEffect } from 'react'
-import {
-	getCollaboratorStateFromElapsedTime,
-	shouldShowCollaborator,
-} from '../utils/collaboratorState'
+import { useComputed, useValue } from '@tldraw/state-react'
 import { uniq } from '../utils/uniq'
 import { useEditor } from './useEditor'
 
-function setsEqual<T>(a: Set<T>, b: Set<T>): boolean {
-	if (a.size !== b.size) return false
-	for (const item of a) {
-		if (!b.has(item)) return false
-	}
-	return true
-}
-
-// TODO: maybe move this to a computed property on the App class?
 /**
+ * Reactive list of peer user IDs for collaborators currently shown in the UI.
+ * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
+ * transition to idle/inactive, without requiring a manual re-render.
+ *
  * @returns The list of peer UserIDs
  * @public
  */
@@ -25,49 +15,10 @@ export function usePeerIds() {
 
 	const $userIds = useComputed(
 		'userIds',
-		() => uniq(editor.getCollaborators().map((p) => p.userId)).sort(),
+		() => uniq(editor.getVisibleCollaborators().map((p) => p.userId)).sort(),
 		{ isEqual: (a, b) => a.join(',') === b.join?.(',') },
 		[editor]
 	)
 
 	return useValue($userIds)
 }
-
-/**
- * Returns a computed signal of active peer user IDs that should be shown.
- * Automatically re-evaluates on an interval to handle time-based state transitions
- * (active -> idle -> inactive).
- *
- * @returns A computed signal containing a Set of active peer user IDs
- * @internal
- */
-export 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: setsEqual },
-		[editor]
-	)
-}

package/src/lib/hooks/useShapeCulling.tsx

@@ -61,8 +61,10 @@ export function ShapeCullingProvider({ children }: ShapeCullingProviderProps) {
 	}, [])
 
 	const updateCulling = useCallback((culledShapes: Set<TLShapeId>) => {
+		let shouldBeCulled: boolean
+
 		for (const [id, entry] of containersRef.current) {
-			const shouldBeCulled = culledShapes.has(id)
+			shouldBeCulled = culledShapes.has(id)
 			if (shouldBeCulled !== entry.isCulled) {
 				const display = shouldBeCulled ? 'none' : 'block'
 				setStyleProperty(entry.container, 'display', display)

package/src/lib/options.ts

@@ -202,12 +202,6 @@ export interface TldrawOptions {
 	 * viewport's page dimensions regardless of overview zoom changes.
 	 */
 	readonly quickZoomPreservesScreenBounds: boolean
-	/**
-	 * Whether to use 2D canvas rendering for shape indicators. When true (default),
-	 * shapes that support it will render indicators on a 2D canvas for better
-	 * performance. When false, all indicators use legacy SVG rendering.
-	 */
-	readonly useCanvasIndicators: boolean
 	/**
 	 * Called before content is written to the clipboard during a copy or cut operation.
 	 * Receives the serialized content (shapes, bindings, assets) and can filter or transform
@@ -344,7 +338,6 @@ export const defaultTldrawOptions = {
 	camera: DEFAULT_CAMERA_OPTIONS,
 	text: {},
 	deepLinks: undefined,
-	useCanvasIndicators: true,
 	quickZoomPreservesScreenBounds: true,
 	onBeforeCopyToClipboard: undefined,
 	onBeforePasteFromClipboard: undefined,

package/src/lib/utils/reparenting.ts

@@ -42,10 +42,17 @@ export function kickoutOccludedShapes(
 		} else {
 			const overlappingChildren = getOverlappingShapes(editor, parent.id, childIds)
 			if (overlappingChildren.length < childIds.length) {
-				parentsToLostChildren.set(
-					parent,
-					childIds.filter((id) => !overlappingChildren.includes(id))
-				)
+				const parentUtil = editor.getShapeUtil(parent)
+				const lostChildIds = childIds.filter((id) => {
+					if (overlappingChildren.includes(id)) return false
+					const child = editor.getShape(id)
+					if (!child) return false
+					// Respect the parent's removal gate: if it pins this child type, don't kick it out.
+					return parentUtil.canRemoveChildrenOfType(parent, child.type)
+				})
+				if (lostChildIds.length > 0) {
+					parentsToLostChildren.set(parent, lostChildIds)
+				}
 			}
 		}
 	}
@@ -238,11 +245,17 @@ export function getDroppedShapesToNewParents(
 	const potentialParentShapes = editor
 		.getCurrentPageShapesSorted()
 		// filter out any shapes that aren't frames or that are included among the provided shapes
-		.filter(
-			(s) =>
-				editor.getShapeUtil(s).canReceiveNewChildrenOfType?.(s, s.type) &&
-				!remainingShapesToReparent.has(s)
-		)
+		.filter((parentShape) => {
+			if (remainingShapesToReparent.has(parentShape)) return false
+
+			const parentUtil = editor.getShapeUtil(parentShape)
+			for (const childShape of remainingShapesToReparent) {
+				if (parentUtil.canReceiveNewChildrenOfType(parentShape, childShape.type)) {
+					return true
+				}
+			}
+			return false
+		})
 
 	parentCheck: for (let i = potentialParentShapes.length - 1; i >= 0; i--) {
 		const parentShape = potentialParentShapes[i]

package/src/lib/utils/sync/TLLocalSyncClient.ts

@@ -262,6 +262,9 @@ export class TLLocalSyncClient {
 		this.debug('closing')
 		this.didDispose = true
 		this.disposables.forEach((d) => d())
+		if (typeof window !== 'undefined' && (window as any).tlsync === this) {
+			delete (window as any).tlsync
+		}
 	}
 
 	private isPersisting = false

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 = '4.6.0-next.fe1474dc57d8'
+export const version = '5.0.0'
 export const publishDates = {
-	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-04-28T08:00:30.359Z',
-	patch: '2026-04-28T08:00:30.359Z',
+	major: '2026-05-06T16:21:11.305Z',
+	minor: '2026-05-06T16:21:11.305Z',
+	patch: '2026-05-06T16:21:11.305Z',
 }

package/dist-cjs/lib/components/GeometryDebuggingView.js

@@ -1,115 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var GeometryDebuggingView_exports = {};
-__export(GeometryDebuggingView_exports, {
-  GeometryDebuggingView: () => GeometryDebuggingView
-});
-module.exports = __toCommonJS(GeometryDebuggingView_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_state_react = require("@tldraw/state-react");
-var import_utils = require("@tldraw/utils");
-var import_useEditor = require("../hooks/useEditor");
-var import_Group2d = require("../primitives/geometry/Group2d");
-const GeometryDebuggingView = (0, import_state_react.track)(function GeometryDebuggingView2({
-  showStroke = true,
-  showVertices = true,
-  showClosestPointOnOutline = true
-}) {
-  const editor = (0, import_useEditor.useEditor)();
-  const zoomLevel = editor.getZoomLevel();
-  const renderingShapes = editor.getRenderingShapes();
-  const currentPagePoint = editor.inputs.getCurrentPagePoint();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "svg",
-    {
-      style: {
-        position: "absolute",
-        pointerEvents: "none",
-        zIndex: 999999999,
-        top: 0,
-        left: 0,
-        overflow: "visible"
-      },
-      children: renderingShapes.map((result) => {
-        const shape = editor.getShape(result.id);
-        if (shape.type === "group") return null;
-        const geometry = editor.getShapeGeometry(shape);
-        const pageTransform = editor.getShapePageTransform(shape);
-        const pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint);
-        const nearestPointOnShape = geometry.nearestPoint(pointInShapeSpace);
-        const distanceToPoint = geometry.distanceToPoint(pointInShapeSpace, true);
-        const dist = Math.abs(distanceToPoint) * zoomLevel;
-        const hitInside = distanceToPoint < 0;
-        const { vertices } = geometry;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "g",
-          {
-            transform: pageTransform.toCssString(),
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: [
-              showStroke && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "g",
-                {
-                  stroke: geometry.debugColor ?? "red",
-                  opacity: "1",
-                  strokeWidth: 2 / zoomLevel,
-                  fill: "none",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GeometryStroke, { geometry })
-                }
-              ),
-              showVertices && vertices.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "circle",
-                {
-                  cx: v.x,
-                  cy: v.y,
-                  r: 2 / zoomLevel,
-                  fill: `hsl(${(0, import_utils.modulate)(i, [0, vertices.length - 1], [120, 200])}, 100%, 50%)`,
-                  stroke: "black",
-                  strokeWidth: 1 / zoomLevel
-                },
-                `v${i}`
-              )),
-              showClosestPointOnOutline && dist < 150 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "line",
-                {
-                  x1: nearestPointOnShape.x,
-                  y1: nearestPointOnShape.y,
-                  x2: pointInShapeSpace.x,
-                  y2: pointInShapeSpace.y,
-                  opacity: 1 - dist / 150,
-                  stroke: hitInside ? "goldenrod" : "dodgerblue",
-                  strokeWidth: 2 / zoomLevel
-                }
-              )
-            ]
-          },
-          result.id + "_outline"
-        );
-      })
-    }
-  );
-});
-function GeometryStroke({ geometry }) {
-  if (geometry instanceof import_Group2d.Group2d) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { stroke: geometry.debugColor, children: [...geometry.children, ...geometry.ignoredChildren].map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GeometryStroke, { geometry: child }, i)) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: geometry.toSimpleSvgPath(), stroke: geometry.debugColor });
-}
-//# sourceMappingURL=GeometryDebuggingView.js.map

package/dist-cjs/lib/components/GeometryDebuggingView.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/components/GeometryDebuggingView.tsx"],
-  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { modulate } from '@tldraw/utils'\nimport { useEditor } from '../hooks/useEditor'\nimport { Geometry2d } from '../primitives/geometry/Geometry2d'\nimport { Group2d } from '../primitives/geometry/Group2d'\n\nexport const GeometryDebuggingView = track(function GeometryDebuggingView({\n\tshowStroke = true,\n\tshowVertices = true,\n\tshowClosestPointOnOutline = true,\n}: {\n\tshowStroke?: boolean\n\tshowVertices?: boolean\n\tshowClosestPointOnOutline?: boolean\n}) {\n\tconst editor = useEditor()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst renderingShapes = editor.getRenderingShapes()\n\tconst currentPagePoint = editor.inputs.getCurrentPagePoint()\n\n\treturn (\n\t\t<svg\n\t\t\tstyle={{\n\t\t\t\tposition: 'absolute',\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\tzIndex: 999999999,\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\toverflow: 'visible',\n\t\t\t}}\n\t\t>\n\t\t\t{renderingShapes.map((result) => {\n\t\t\t\tconst shape = editor.getShape(result.id)!\n\n\t\t\t\tif (shape.type === 'group') return null\n\n\t\t\t\tconst geometry = editor.getShapeGeometry(shape)\n\t\t\t\tconst pageTransform = editor.getShapePageTransform(shape)!\n\n\t\t\t\tconst pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint)\n\t\t\t\tconst nearestPointOnShape = geometry.nearestPoint(pointInShapeSpace)\n\t\t\t\tconst distanceToPoint = geometry.distanceToPoint(pointInShapeSpace, true)\n\t\t\t\tconst dist = Math.abs(distanceToPoint) * zoomLevel\n\t\t\t\tconst hitInside = distanceToPoint < 0\n\n\t\t\t\tconst { vertices } = geometry\n\n\t\t\t\treturn (\n\t\t\t\t\t<g\n\t\t\t\t\t\tkey={result.id + '_outline'}\n\t\t\t\t\t\ttransform={pageTransform.toCssString()}\n\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{showStroke && (\n\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\tstroke={geometry.debugColor ?? 'red'}\n\t\t\t\t\t\t\t\topacity=\"1\"\n\t\t\t\t\t\t\t\tstrokeWidth={2 / zoomLevel}\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<GeometryStroke geometry={geometry} />\n\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{showVertices &&\n\t\t\t\t\t\t\tvertices.map((v, i) => (\n\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\tkey={`v${i}`}\n\t\t\t\t\t\t\t\t\tcx={v.x}\n\t\t\t\t\t\t\t\t\tcy={v.y}\n\t\t\t\t\t\t\t\t\tr={2 / zoomLevel}\n\t\t\t\t\t\t\t\t\tfill={`hsl(${modulate(i, [0, vertices.length - 1], [120, 200])}, 100%, 50%)`}\n\t\t\t\t\t\t\t\t\tstroke=\"black\"\n\t\t\t\t\t\t\t\t\tstrokeWidth={1 / zoomLevel}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t{showClosestPointOnOutline && dist < 150 && (\n\t\t\t\t\t\t\t<line\n\t\t\t\t\t\t\t\tx1={nearestPointOnShape.x}\n\t\t\t\t\t\t\t\ty1={nearestPointOnShape.y}\n\t\t\t\t\t\t\t\tx2={pointInShapeSpace.x}\n\t\t\t\t\t\t\t\ty2={pointInShapeSpace.y}\n\t\t\t\t\t\t\t\topacity={1 - dist / 150}\n\t\t\t\t\t\t\t\tstroke={hitInside ? 'goldenrod' : 'dodgerblue'}\n\t\t\t\t\t\t\t\tstrokeWidth={2 / zoomLevel}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</g>\n\t\t\t\t)\n\t\t\t})}\n\t\t</svg>\n\t)\n})\n\nfunction GeometryStroke({ geometry }: { geometry: Geometry2d }) {\n\tif (geometry instanceof Group2d) {\n\t\treturn (\n\t\t\t<g stroke={geometry.debugColor}>\n\t\t\t\t{[...geometry.children, ...geometry.ignoredChildren].map((child, i) => (\n\t\t\t\t\t<GeometryStroke geometry={child} key={i} />\n\t\t\t\t))}\n\t\t\t</g>\n\t\t)\n\t}\n\n\treturn <path d={geometry.toSimpleSvgPath()} stroke={geometry.debugColor} />\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDK;AAjDL,yBAAsB;AACtB,mBAAyB;AACzB,uBAA0B;AAE1B,qBAAwB;AAEjB,MAAM,4BAAwB,0BAAM,SAASA,uBAAsB;AAAA,EACzE,aAAa;AAAA,EACb,eAAe;AAAA,EACf,4BAA4B;AAC7B,GAIG;AACF,QAAM,aAAS,4BAAU;AAEzB,QAAM,YAAY,OAAO,aAAa;AACtC,QAAM,kBAAkB,OAAO,mBAAmB;AAClD,QAAM,mBAAmB,OAAO,OAAO,oBAAoB;AAE3D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,QACN,UAAU;AAAA,QACV,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,MACX;AAAA,MAEC,0BAAgB,IAAI,CAAC,WAAW;AAChC,cAAM,QAAQ,OAAO,SAAS,OAAO,EAAE;AAEvC,YAAI,MAAM,SAAS,QAAS,QAAO;AAEnC,cAAM,WAAW,OAAO,iBAAiB,KAAK;AAC9C,cAAM,gBAAgB,OAAO,sBAAsB,KAAK;AAExD,cAAM,oBAAoB,OAAO,qBAAqB,OAAO,gBAAgB;AAC7E,cAAM,sBAAsB,SAAS,aAAa,iBAAiB;AACnE,cAAM,kBAAkB,SAAS,gBAAgB,mBAAmB,IAAI;AACxE,cAAM,OAAO,KAAK,IAAI,eAAe,IAAI;AACzC,cAAM,YAAY,kBAAkB;AAEpC,cAAM,EAAE,SAAS,IAAI;AAErB,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,WAAW,cAAc,YAAY;AAAA,YACrC,eAAc;AAAA,YACd,gBAAe;AAAA,YAEd;AAAA,4BACA;AAAA,gBAAC;AAAA;AAAA,kBACA,QAAQ,SAAS,cAAc;AAAA,kBAC/B,SAAQ;AAAA,kBACR,aAAa,IAAI;AAAA,kBACjB,MAAK;AAAA,kBAEL,sDAAC,kBAAe,UAAoB;AAAA;AAAA,cACrC;AAAA,cAEA,gBACA,SAAS,IAAI,CAAC,GAAG,MAChB;AAAA,gBAAC;AAAA;AAAA,kBAEA,IAAI,EAAE;AAAA,kBACN,IAAI,EAAE;AAAA,kBACN,GAAG,IAAI;AAAA,kBACP,MAAM,WAAO,uBAAS,GAAG,CAAC,GAAG,SAAS,SAAS,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC;AAAA,kBAC9D,QAAO;AAAA,kBACP,aAAa,IAAI;AAAA;AAAA,gBANZ,IAAI,CAAC;AAAA,cAOX,CACA;AAAA,cACD,6BAA6B,OAAO,OACpC;AAAA,gBAAC;AAAA;AAAA,kBACA,IAAI,oBAAoB;AAAA,kBACxB,IAAI,oBAAoB;AAAA,kBACxB,IAAI,kBAAkB;AAAA,kBACtB,IAAI,kBAAkB;AAAA,kBACtB,SAAS,IAAI,OAAO;AAAA,kBACpB,QAAQ,YAAY,cAAc;AAAA,kBAClC,aAAa,IAAI;AAAA;AAAA,cAClB;AAAA;AAAA;AAAA,UApCI,OAAO,KAAK;AAAA,QAsClB;AAAA,MAEF,CAAC;AAAA;AAAA,EACF;AAEF,CAAC;AAED,SAAS,eAAe,EAAE,SAAS,GAA6B;AAC/D,MAAI,oBAAoB,wBAAS;AAChC,WACC,4CAAC,OAAE,QAAQ,SAAS,YAClB,WAAC,GAAG,SAAS,UAAU,GAAG,SAAS,eAAe,EAAE,IAAI,CAAC,OAAO,MAChE,4CAAC,kBAAe,UAAU,SAAY,CAAG,CACzC,GACF;AAAA,EAEF;AAEA,SAAO,4CAAC,UAAK,GAAG,SAAS,gBAAgB,GAAG,QAAQ,SAAS,YAAY;AAC1E;",
-  "names": ["GeometryDebuggingView"]
-}

package/dist-cjs/lib/components/LiveCollaborators.js

@@ -1,152 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var LiveCollaborators_exports = {};
-__export(LiveCollaborators_exports, {
-  LiveCollaborators: () => LiveCollaborators
-});
-module.exports = __toCommonJS(LiveCollaborators_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_state_react = require("@tldraw/state-react");
-var import_react = require("react");
-var import_EditorComponentsContext = require("../hooks/EditorComponentsContext");
-var import_useEditor = require("../hooks/useEditor");
-var import_usePeerIds = require("../hooks/usePeerIds");
-var import_usePresence = require("../hooks/usePresence");
-var import_collaboratorState = require("../utils/collaboratorState");
-const LiveCollaborators = (0, import_state_react.track)(function Collaborators() {
-  const peerIds = (0, import_usePeerIds.usePeerIds)();
-  return peerIds.map((id) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollaboratorGuard, { collaboratorId: id }, id));
-});
-const CollaboratorGuard = (0, import_state_react.track)(function CollaboratorGuard2({
-  collaboratorId
-}) {
-  const editor = (0, import_useEditor.useEditor)();
-  const presence = (0, import_usePresence.usePresence)(collaboratorId);
-  const collaboratorState = useCollaboratorState(editor, presence);
-  if (!(presence && presence.currentPageId === editor.getCurrentPageId())) {
-    return null;
-  }
-  if (!(0, import_collaboratorState.shouldShowCollaborator)(editor, presence, collaboratorState)) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collaborator, { latestPresence: presence });
-});
-const Collaborator = (0, import_state_react.track)(function Collaborator2({
-  latestPresence
-}) {
-  const editor = (0, import_useEditor.useEditor)();
-  const {
-    CollaboratorBrush,
-    CollaboratorScribble,
-    CollaboratorCursor,
-    CollaboratorHint,
-    CollaboratorShapeIndicator
-  } = (0, import_EditorComponentsContext.useEditorComponents)();
-  const zoomLevel = editor.getZoomLevel();
-  const viewportPageBounds = editor.getViewportPageBounds();
-  const { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } = latestPresence;
-  if (!cursor) return null;
-  const isCursorInViewport = !(cursor.x < viewportPageBounds.minX - 12 / zoomLevel || cursor.y < viewportPageBounds.minY - 16 / zoomLevel || cursor.x > viewportPageBounds.maxX - 12 / zoomLevel || cursor.y > viewportPageBounds.maxY - 16 / zoomLevel);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    brush && CollaboratorBrush ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CollaboratorBrush,
-      {
-        className: "tl-collaborator__brush",
-        userId,
-        brush,
-        color,
-        opacity: 0.1
-      },
-      userId + "_brush"
-    ) : null,
-    isCursorInViewport && CollaboratorCursor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CollaboratorCursor,
-      {
-        className: "tl-collaborator__cursor",
-        userId,
-        point: cursor,
-        color,
-        zoom: zoomLevel,
-        name: userName !== "New User" ? userName : null,
-        chatMessage: chatMessage ?? ""
-      },
-      userId + "_cursor"
-    ) : CollaboratorHint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CollaboratorHint,
-      {
-        className: "tl-collaborator__cursor-hint",
-        userId,
-        point: cursor,
-        color,
-        zoom: zoomLevel,
-        viewport: viewportPageBounds
-      },
-      userId + "_cursor_hint"
-    ) : null,
-    CollaboratorScribble && scribbles.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: scribbles.map((scribble) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CollaboratorScribble,
-      {
-        className: "tl-collaborator__scribble",
-        userId,
-        scribble,
-        color,
-        zoom: zoomLevel,
-        opacity: scribble.color === "laser" ? 0.5 : 0.1
-      },
-      userId + "_scribble_" + scribble.id
-    )) }) : null,
-    CollaboratorShapeIndicator && selectedShapeIds.filter((id) => {
-      if (editor.isShapeHidden(id)) return false;
-      if (!editor.options.useCanvasIndicators) return true;
-      const shape = editor.getShape(id);
-      if (!shape) return false;
-      const util = editor.getShapeUtil(shape);
-      return util.useLegacyIndicator();
-    }).map((shapeId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      CollaboratorShapeIndicator,
-      {
-        className: "tl-collaborator__shape-indicator",
-        userId,
-        shapeId,
-        color,
-        opacity: 0.5
-      },
-      userId + "_" + shapeId
-    ))
-  ] });
-});
-function useCollaboratorState(editor, latestPresence) {
-  const rLastActivityTimestamp = (0, import_react.useRef)(latestPresence?.lastActivityTimestamp ?? -1);
-  const [state, setState] = (0, import_react.useState)(
-    () => (0, import_collaboratorState.getCollaboratorStateFromElapsedTime)(editor, Date.now() - rLastActivityTimestamp.current)
-  );
-  (0, import_react.useEffect)(() => {
-    const interval = editor.timers.setInterval(() => {
-      setState(
-        (0, import_collaboratorState.getCollaboratorStateFromElapsedTime)(editor, Date.now() - rLastActivityTimestamp.current)
-      );
-    }, editor.options.collaboratorCheckIntervalMs);
-    return () => clearInterval(interval);
-  }, [editor]);
-  if (latestPresence) {
-    rLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity;
-  }
-  return state;
-}
-//# sourceMappingURL=LiveCollaborators.js.map

package/dist-cjs/lib/components/LiveCollaborators.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/components/LiveCollaborators.tsx"],
-  "sourcesContent": ["import { track } from '@tldraw/state-react'\nimport { TLInstancePresence } from '@tldraw/tlschema'\nimport { useEffect, useRef, useState } from 'react'\nimport { Editor } from '../editor/Editor'\nimport { useEditorComponents } from '../hooks/EditorComponentsContext'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePeerIds } from '../hooks/usePeerIds'\nimport { usePresence } from '../hooks/usePresence'\nimport {\n\tCollaboratorState,\n\tgetCollaboratorStateFromElapsedTime,\n\tshouldShowCollaborator,\n} from '../utils/collaboratorState'\n\nexport const LiveCollaborators = track(function Collaborators() {\n\tconst peerIds = usePeerIds()\n\treturn peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)\n})\n\nconst CollaboratorGuard = track(function CollaboratorGuard({\n\tcollaboratorId,\n}: {\n\tcollaboratorId: string\n}) {\n\tconst editor = useEditor()\n\tconst presence = usePresence(collaboratorId)\n\tconst collaboratorState = useCollaboratorState(editor, presence)\n\n\tif (!(presence && presence.currentPageId === editor.getCurrentPageId())) {\n\t\t// No need to render if we don't have a presence or if they're on a different page\n\t\treturn null\n\t}\n\n\tif (!shouldShowCollaborator(editor, presence, collaboratorState)) {\n\t\treturn null\n\t}\n\n\treturn <Collaborator latestPresence={presence} />\n})\n\nconst Collaborator = track(function Collaborator({\n\tlatestPresence,\n}: {\n\tlatestPresence: TLInstancePresence\n}) {\n\tconst editor = useEditor()\n\n\tconst {\n\t\tCollaboratorBrush,\n\t\tCollaboratorScribble,\n\t\tCollaboratorCursor,\n\t\tCollaboratorHint,\n\t\tCollaboratorShapeIndicator,\n\t} = useEditorComponents()\n\n\tconst zoomLevel = editor.getZoomLevel()\n\tconst viewportPageBounds = editor.getViewportPageBounds()\n\tconst { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =\n\t\tlatestPresence\n\n\tif (!cursor) return null\n\n\t// Add a little padding to the top-left of the viewport\n\t// so that the cursor doesn't get cut off\n\tconst isCursorInViewport = !(\n\t\tcursor.x < viewportPageBounds.minX - 12 / zoomLevel ||\n\t\tcursor.y < viewportPageBounds.minY - 16 / zoomLevel ||\n\t\tcursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||\n\t\tcursor.y > viewportPageBounds.maxY - 16 / zoomLevel\n\t)\n\n\treturn (\n\t\t<>\n\t\t\t{brush && CollaboratorBrush ? (\n\t\t\t\t<CollaboratorBrush\n\t\t\t\t\tclassName=\"tl-collaborator__brush\"\n\t\t\t\t\tkey={userId + '_brush'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tbrush={brush}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\topacity={0.1}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{isCursorInViewport && CollaboratorCursor ? (\n\t\t\t\t<CollaboratorCursor\n\t\t\t\t\tclassName=\"tl-collaborator__cursor\"\n\t\t\t\t\tkey={userId + '_cursor'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tname={userName !== 'New User' ? userName : null}\n\t\t\t\t\tchatMessage={chatMessage ?? ''}\n\t\t\t\t/>\n\t\t\t) : CollaboratorHint ? (\n\t\t\t\t<CollaboratorHint\n\t\t\t\t\tclassName=\"tl-collaborator__cursor-hint\"\n\t\t\t\t\tkey={userId + '_cursor_hint'}\n\t\t\t\t\tuserId={userId}\n\t\t\t\t\tpoint={cursor}\n\t\t\t\t\tcolor={color}\n\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\tviewport={viewportPageBounds}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{CollaboratorScribble && scribbles.length ? (\n\t\t\t\t<>\n\t\t\t\t\t{scribbles.map((scribble) => (\n\t\t\t\t\t\t<CollaboratorScribble\n\t\t\t\t\t\t\tkey={userId + '_scribble_' + scribble.id}\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__scribble\"\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tscribble={scribble}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\tzoom={zoomLevel}\n\t\t\t\t\t\t\topacity={scribble.color === 'laser' ? 0.5 : 0.1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</>\n\t\t\t) : null}\n\t\t\t{CollaboratorShapeIndicator &&\n\t\t\t\tselectedShapeIds\n\t\t\t\t\t.filter((id) => {\n\t\t\t\t\t\t// Skip hidden shapes\n\t\t\t\t\t\tif (editor.isShapeHidden(id)) return false\n\t\t\t\t\t\t// When canvas indicators are disabled, render SVG indicators for\n\t\t\t\t\t\t// every selected shape. Otherwise shapes that opt into the canvas\n\t\t\t\t\t\t// path via useLegacyIndicator() === false would never get a\n\t\t\t\t\t\t// collaborator indicator drawn.\n\t\t\t\t\t\tif (!editor.options.useCanvasIndicators) return true\n\t\t\t\t\t\t// Otherwise, only render SVG indicators for shapes that opt in to\n\t\t\t\t\t\t// the legacy path \u2014 canvas-based indicators are handled by\n\t\t\t\t\t\t// CanvasShapeIndicators.\n\t\t\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\t\t\tif (!shape) return false\n\t\t\t\t\t\tconst util = editor.getShapeUtil(shape)\n\t\t\t\t\t\treturn util.useLegacyIndicator()\n\t\t\t\t\t})\n\t\t\t\t\t.map((shapeId) => (\n\t\t\t\t\t\t<CollaboratorShapeIndicator\n\t\t\t\t\t\t\tclassName=\"tl-collaborator__shape-indicator\"\n\t\t\t\t\t\t\tkey={userId + '_' + shapeId}\n\t\t\t\t\t\t\tuserId={userId}\n\t\t\t\t\t\t\tshapeId={shapeId}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\topacity={0.5}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t</>\n\t)\n})\n\nfunction useCollaboratorState(\n\teditor: Editor,\n\tlatestPresence: TLInstancePresence | null\n): CollaboratorState {\n\tconst rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)\n\n\tconst [state, setState] = useState<CollaboratorState>(() =>\n\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t)\n\n\tuseEffect(() => {\n\t\tconst interval = editor.timers.setInterval(() => {\n\t\t\tsetState(\n\t\t\t\tgetCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)\n\t\t\t)\n\t\t}, editor.options.collaboratorCheckIntervalMs)\n\n\t\treturn () => clearInterval(interval)\n\t}, [editor])\n\n\tif (latestPresence) {\n\t\t// We can do this on every render, it's free and cheaper than an effect\n\t\t// remember, there can be lots and lots of cursors moving around all the time\n\t\trLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity\n\t}\n\n\treturn state\n}\n"],
-  "mappings": "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",
-  "names": ["CollaboratorGuard", "Collaborator"]
-}