canvu-react 0.4.33 → 0.4.35

package/dist/native.js

@@ -1,6 +1,6 @@
 import getStroke from 'perfect-freehand';
-import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, useImage, Image } from '@shopify/react-native-skia';
-import { memo, forwardRef, useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
+import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, Image } from '@shopify/react-native-skia';
+import { memo, forwardRef, useState, useRef, useCallback, useEffect, useMemo, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { StyleSheet, PanResponder, View, Pressable, Text as Text$1, ScrollView } from 'react-native';
 
@@ -1354,6 +1354,17 @@ function computeResizeBoundsFixedAspect(bounds, handle, currentWorld, aspect) {
   }
 }
 
+// src/react/presence/peer-color.ts
+function defaultPresenceColorForId(id) {
+  let h = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    h ^= id.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  const hue = (h >>> 0) % 360;
+  return `hsl(${hue} 72% 42%)`;
+}
+
 // src/scene/freehand-path.ts
 function smoothFreehandPointsToPathD(points) {
   const n = points.length;
@@ -1387,6 +1398,141 @@ function smoothFreehandPointsToPathD(points) {
   d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
   return d;
 }
+var DEFAULT_NATIVE_IMAGE_CACHE_MAX_ENTRIES = 96;
+function disposeCachedImage(image) {
+  try {
+    image.dispose?.();
+  } catch {
+  }
+}
+function createNativeImageCache({
+  loadImage,
+  maxEntries = DEFAULT_NATIVE_IMAGE_CACHE_MAX_ENTRIES
+}) {
+  const safeMaxEntries = Math.max(1, Math.round(maxEntries));
+  const entries = /* @__PURE__ */ new Map();
+  let clock = 0;
+  const touchEntry = (entry) => {
+    clock += 1;
+    entry.lastUsed = clock;
+  };
+  const createEntry = () => {
+    clock += 1;
+    return {
+      lastUsed: clock,
+      retainCount: 0
+    };
+  };
+  const prune = () => {
+    const cachedEntries = [...entries.entries()].filter(
+      (entry) => entry[1].image != null && entry[1].retainCount === 0
+    );
+    if (cachedEntries.length <= safeMaxEntries) return;
+    const evictedEntries = cachedEntries.sort(
+      (leftEntry, rightEntry) => leftEntry[1].lastUsed - rightEntry[1].lastUsed
+    ).slice(0, cachedEntries.length - safeMaxEntries);
+    for (const [href, entry] of evictedEntries) {
+      entries.delete(href);
+      disposeCachedImage(entry.image);
+    }
+  };
+  const getCached = (href) => {
+    const entry = entries.get(href);
+    if (!entry?.image) return null;
+    touchEntry(entry);
+    return entry.image;
+  };
+  const load = async (href) => {
+    const cachedImage = getCached(href);
+    if (cachedImage) return cachedImage;
+    const existingEntry = entries.get(href);
+    if (existingEntry?.promise) return await existingEntry.promise;
+    const entry = existingEntry ?? createEntry();
+    const promise = loadImage(href).then((image) => {
+      if (!image) {
+        if (entry.retainCount === 0) entries.delete(href);
+        return null;
+      }
+      entry.image = image;
+      entry.promise = void 0;
+      touchEntry(entry);
+      prune();
+      return image;
+    }).catch((error) => {
+      entries.delete(href);
+      throw error;
+    });
+    entry.promise = promise;
+    entries.set(href, entry);
+    return await promise;
+  };
+  const retain = (href) => {
+    const entry = entries.get(href) ?? createEntry();
+    entry.retainCount += 1;
+    touchEntry(entry);
+    entries.set(href, entry);
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      entry.retainCount = Math.max(0, entry.retainCount - 1);
+      if (!entry.image && !entry.promise && entry.retainCount === 0) {
+        entries.delete(href);
+        return;
+      }
+      prune();
+    };
+  };
+  const clear = () => {
+    for (const entry of entries.values()) {
+      if (entry.image) disposeCachedImage(entry.image);
+    }
+    entries.clear();
+  };
+  const size = () => [...entries.values()].filter((entry) => entry.image != null).length;
+  return { getCached, load, retain, clear, size };
+}
+async function loadSkiaImageFromHref(href) {
+  const { Skia } = await import('@shopify/react-native-skia');
+  const data = await Skia.Data.fromURI(href);
+  return Skia.Image.MakeImageFromEncoded(data);
+}
+var nativeSkiaImageCache = createNativeImageCache({
+  loadImage: loadSkiaImageFromHref
+});
+function useCachedSkiaImage(href) {
+  const [loadedImage, setLoadedImage] = useState(
+    () => href ? { href, image: nativeSkiaImageCache.getCached(href) } : null
+  );
+  useEffect(() => {
+    if (!href) {
+      setLoadedImage(null);
+      return;
+    }
+    const releaseImage = nativeSkiaImageCache.retain(href);
+    const cachedImage = nativeSkiaImageCache.getCached(href);
+    if (cachedImage) {
+      setLoadedImage({ href, image: cachedImage });
+      return releaseImage;
+    }
+    let active = true;
+    setLoadedImage({ href, image: null });
+    void nativeSkiaImageCache.load(href).then(
+      (loadedImage2) => {
+        if (active) setLoadedImage({ href, image: loadedImage2 });
+      },
+      () => {
+        if (active) setLoadedImage({ href, image: null });
+      }
+    );
+    return () => {
+      active = false;
+      releaseImage();
+    };
+  }, [href]);
+  if (!href || loadedImage?.href !== href) return null;
+  return loadedImage.image;
+}
 
 // src/native/skia-transform.ts
 function parseNum(s) {
@@ -1651,7 +1797,7 @@ function SvgNodeItem({ node }) {
 function SvgImageNodeItem({
   node
 }) {
-  const image = useImage(node.href);
+  const image = useCachedSkiaImage(node.href);
   if (!image) return null;
   return /* @__PURE__ */ jsx(
     Image,
@@ -2272,6 +2418,26 @@ var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var ERASER_PREVIEW_OPACITY = 0.3;
 var OVERLAY_STROKE_PX = 1.25;
 var MARQUEE_DASH_PX = 4;
+var REMOTE_CURSOR_SCREEN_PX = 22;
+var REMOTE_LABEL_SCREEN_PX = 12;
+function remoteStrokePaint(tool, fallback) {
+  if (tool === "laser") {
+    return { stroke: LASER_TINT, strokeOpacity: 0.92, widthWorld: 4 };
+  }
+  if (tool === "marker") {
+    return { stroke: fallback, strokeOpacity: 0.45, widthWorld: 14 };
+  }
+  if (tool === "brush") {
+    return { stroke: fallback, strokeOpacity: 0.85, widthWorld: 5 };
+  }
+  if (tool === "pencil") {
+    return { stroke: fallback, strokeOpacity: 0.9, widthWorld: 2.5 };
+  }
+  return { stroke: fallback, strokeOpacity: 0.95, widthWorld: 3.5 };
+}
+function isRemoteFreehandTool(tool) {
+  return tool === "draw" || tool === "marker" || tool === "pencil" || tool === "brush";
+}
 function pointsToSmoothPathD(points) {
   if (points.length < 2) return null;
   const d = smoothFreehandPointsToPathD(points);
@@ -2292,7 +2458,8 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle
+  previewStrokeStyle,
+  remotePresence = []
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2686,6 +2853,136 @@ function NativeInteractionOverlay({
       )
     ] });
   }, [laserTrail, z]);
+  const remotePresenceElements = useMemo(() => {
+    if (remotePresence.length === 0) return null;
+    const labelFont = matchFont({ fontSize: REMOTE_LABEL_SCREEN_PX / z });
+    const cursorSize = REMOTE_CURSOR_SCREEN_PX / z;
+    const labelOffsetX = 14 / z;
+    const labelOffsetY = 18 / z;
+    return /* @__PURE__ */ jsx(Fragment, { children: remotePresence.map((peer) => {
+      const color = peer.color ?? defaultPresenceColorForId(peer.id);
+      const markup = peer.markupStroke;
+      const cursor = peer.cursor;
+      const camera2 = peer.camera;
+      let strokeElement = null;
+      if (markup && markup.points.length > 0) {
+        const fallbackPaint = remoteStrokePaint(markup.tool, color);
+        const paint = {
+          stroke: markup.stroke ?? fallbackPaint.stroke,
+          strokeOpacity: markup.strokeOpacity ?? fallbackPaint.strokeOpacity,
+          widthWorld: markup.strokeWidth ?? fallbackPaint.widthWorld
+        };
+        if (markup.tool === "laser") {
+          const d = markup.points.length >= 2 ? smoothFreehandPointsToPathD([...markup.points]) : null;
+          if (d) {
+            strokeElement = /* @__PURE__ */ jsx(
+              Path,
+              {
+                path: d,
+                color: colorWithOpacity(paint.stroke, paint.strokeOpacity),
+                style: "stroke",
+                strokeWidth: Math.max(paint.widthWorld, OVERLAY_STROKE_PX) / z,
+                strokeCap: "round",
+                strokeJoin: "round",
+                antiAlias: true
+              }
+            );
+          }
+        }
+        if (!strokeElement && isRemoteFreehandTool(markup.tool)) {
+          const payload = computeFreehandSvgPayload(
+            markup.points.map((point) => ({ x: point.x, y: point.y })),
+            {
+              stroke: paint.stroke,
+              strokeWidth: paint.widthWorld,
+              strokeOpacity: paint.strokeOpacity
+            },
+            markup.tool,
+            markup.points.length === 2
+          );
+          if (payload?.kind === "circle") {
+            strokeElement = /* @__PURE__ */ jsx(
+              Circle,
+              {
+                cx: payload.cx,
+                cy: payload.cy,
+                r: payload.r,
+                color: colorWithOpacity(payload.fill, payload.fillOpacity),
+                style: "fill",
+                antiAlias: true
+              }
+            );
+          }
+          if (payload?.kind === "fillPath") {
+            strokeElement = /* @__PURE__ */ jsx(
+              Path,
+              {
+                path: payload.d,
+                color: colorWithOpacity(payload.fill, payload.fillOpacity),
+                style: "fill",
+                fillType: "winding",
+                antiAlias: true
+              }
+            );
+          }
+          if (payload?.kind === "strokePath") {
+            strokeElement = /* @__PURE__ */ jsx(
+              Path,
+              {
+                path: payload.d,
+                color: colorWithOpacity(payload.stroke, payload.strokeOpacity),
+                style: "stroke",
+                strokeWidth: payload.strokeWidth,
+                strokeCap: "round",
+                strokeJoin: "round",
+                antiAlias: true
+              }
+            );
+          }
+        }
+      }
+      const cameraElement = camera2 ? /* @__PURE__ */ jsx(
+        Rect,
+        {
+          x: -camera2.x / camera2.zoom,
+          y: -camera2.y / camera2.zoom,
+          width: camera2.viewportWidth / camera2.zoom,
+          height: camera2.viewportHeight / camera2.zoom,
+          color,
+          style: "stroke",
+          strokeWidth: overlayStrokeWorld,
+          antiAlias: true,
+          children: /* @__PURE__ */ jsx(DashPathEffect, { intervals: [marqueeDashWorld, marqueeDashWorld] })
+        }
+      ) : null;
+      const cursorElement = cursor ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            path: `M ${cursor.x} ${cursor.y} L ${cursor.x + cursorSize} ${cursor.y + cursorSize * 0.34} L ${cursor.x + cursorSize * 0.42} ${cursor.y + cursorSize * 0.44} L ${cursor.x + cursorSize * 0.58} ${cursor.y + cursorSize} Z`,
+            color,
+            style: "fill",
+            antiAlias: true
+          }
+        ),
+        peer.displayName ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            x: cursor.x + labelOffsetX,
+            y: cursor.y + labelOffsetY,
+            text: peer.displayName,
+            color,
+            font: labelFont
+          }
+        ) : null
+      ] }) : null;
+      return /* @__PURE__ */ jsxs(Group, { children: [
+        cameraElement,
+        strokeElement,
+        cursorElement
+      ] }, peer.clientId ?? peer.id);
+    }) });
+  }, [remotePresence, z, overlayStrokeWorld, marqueeDashWorld]);
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsx(
     Canvas,
@@ -2703,6 +3000,7 @@ function NativeInteractionOverlay({
         laserTrailElements,
         eraserTrailElements,
         eraserPreviewElements,
+        remotePresenceElements,
         selectionElements
       ] })
     }
@@ -4205,6 +4503,7 @@ function fitCameraToWorldRect(camera, viewportW, viewportH, worldRect, padding)
 var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   items,
   selectedIds = [],
+  remotePresence = [],
   toolId = "hand",
   toolLocked = false,
   interactive = false,
@@ -4212,6 +4511,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onWorldPointerDown,
+  onWorldPointerMove,
+  onWorldPointerLeave,
+  onPlacementPreviewChange,
   onCameraChange,
   customPlacement,
   customPlacements = [],
@@ -4229,6 +4531,12 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onToolChangeRequestRef.current = onToolChangeRequest;
   const onWorldPointerDownRef = useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
+  const onWorldPointerMoveRef = useRef(onWorldPointerMove);
+  onWorldPointerMoveRef.current = onWorldPointerMove;
+  const onWorldPointerLeaveRef = useRef(onWorldPointerLeave);
+  onWorldPointerLeaveRef.current = onWorldPointerLeave;
+  const onPlacementPreviewChangeRef = useRef(onPlacementPreviewChange);
+  onPlacementPreviewChangeRef.current = onPlacementPreviewChange;
   const onCameraChangeRef = useRef(onCameraChange);
   onCameraChangeRef.current = onCameraChange;
   const onItemsChangeRef = useRef(onItemsChange);
@@ -4244,8 +4552,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   const selectedIdsRef = useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
   const dragStateRef = useRef({ kind: "idle" });
-  const [placementPreview, setPlacementPreview] = useState(
-    null
+  const [placementPreview, setPlacementPreviewState] = useState(null);
+  const setRealtimePlacementPreview = useCallback(
+    (nextPreview) => {
+      setPlacementPreviewState(nextPreview);
+      onPlacementPreviewChangeRef.current?.(nextPreview);
+    },
+    []
   );
   const [eraserTrail, setEraserTrail] = useState([]);
   const [laserTrail, setLaserTrail] = useState([]);
@@ -4339,6 +4652,16 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     },
     []
   );
+  const notifyWorldPointerMove = useCallback(
+    (point) => {
+      const { worldX, worldY } = screenToWorld(point.x, point.y);
+      onWorldPointerMoveRef.current?.({ x: worldX, y: worldY });
+    },
+    [screenToWorld]
+  );
+  const notifyWorldPointerLeave = useCallback(() => {
+    onWorldPointerLeaveRef.current?.();
+  }, []);
   const requestRender = useCallback(() => {
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
@@ -4378,6 +4701,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       const cam = cameraRef.current;
       if (!cam) return;
       const { worldX, worldY } = screenToWorld(sx, sy);
+      onWorldPointerMoveRef.current?.({ x: worldX, y: worldY });
       if (tool === "hand") {
         dragStateRef.current = { kind: "pan" };
         return;
@@ -4463,7 +4787,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             kind: "marquee",
             startWorld: { x: worldX, y: worldY }
           };
-          setPlacementPreview({
+          setRealtimePlacementPreview({
             kind: "marquee",
             rect: { x: worldX, y: worldY, width: 0, height: 0 }
           });
@@ -4483,7 +4807,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           }
           setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
         } else {
-          setPlacementPreview({
+          setRealtimePlacementPreview({
             kind: "stroke",
             tool,
             points: [{ x: worldX, y: worldY }],
@@ -4516,7 +4840,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           startWorld: { x: worldX, y: worldY },
           startScreen: { x: sx, y: sy }
         };
-        setPlacementPreview(
+        setRealtimePlacementPreview(
           placementPreviewForTool(
             tool,
             { x: worldX, y: worldY },
@@ -4541,7 +4865,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           startWorld: { x: worldX, y: worldY },
           startScreen: { x: sx, y: sy }
         };
-        setPlacementPreview({
+        setRealtimePlacementPreview({
           kind: "rect",
           rect: { x: worldX, y: worldY, width: 0, height: 0 }
         });
@@ -4570,7 +4894,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       dragStateRef.current = { kind: "pan" };
     },
-    [interactive, requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+    [
+      interactive,
+      requestSelectToolAfterUse,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const applyDragMoveAtScreenPoint = useCallback(
     (point, pagePoint) => {
@@ -4578,6 +4908,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       if (!cam) return;
       updateToolCursorPoint(point);
       const { worldX, worldY } = screenToWorld(point.x, point.y);
+      onWorldPointerMoveRef.current?.({ x: worldX, y: worldY });
       const st = dragStateRef.current;
       if (st.kind === "pan") {
         const current = pagePoint ?? point;
@@ -4610,7 +4941,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           }
           return;
         }
-        setPlacementPreview({
+        setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
           points: [...pts],
@@ -4672,7 +5003,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           width: Math.abs(b.x - a.x),
           height: Math.abs(b.y - a.y)
         };
-        setPlacementPreview({ kind: "marquee", rect });
+        setRealtimePlacementPreview({ kind: "marquee", rect });
         return;
       }
       if (st.kind === "erase") {
@@ -4690,7 +5021,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         return;
       }
       if (st.kind === "place") {
-        setPlacementPreview(
+        setRealtimePlacementPreview(
           placementPreviewForTool(st.tool, st.startWorld, {
             x: worldX,
             y: worldY
@@ -4699,14 +5030,19 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         return;
       }
       if (st.kind === "custom-place") {
-        setPlacementPreview({
+        setRealtimePlacementPreview({
           kind: "rect",
           rect: rectFromCorners(st.startWorld, { x: worldX, y: worldY })
         });
         return;
       }
     },
-    [requestRender, screenToWorld, updateToolCursorPoint]
+    [
+      requestRender,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const finishDragAtScreenPoint = useCallback(
     (point) => {
@@ -4716,7 +5052,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       const st = dragStateRef.current;
       if (st.kind === "draw") {
         dragStateRef.current = { kind: "idle" };
-        setPlacementPreview(null);
+        setRealtimePlacementPreview(null);
         if (st.tool === "laser") {
           if (laserClearTimerRef.current) {
             clearTimeout(laserClearTimerRef.current);
@@ -4754,7 +5090,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       if (st.kind === "marquee") {
         dragStateRef.current = { kind: "idle" };
-        setPlacementPreview(null);
+        setRealtimePlacementPreview(null);
         const cam = cameraRef.current;
         if (!cam) return;
         const { worldX, worldY } = screenToWorld(point.x, point.y);
@@ -4785,7 +5121,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       if (st.kind === "place") {
         dragStateRef.current = { kind: "idle" };
-        setPlacementPreview(null);
+        setRealtimePlacementPreview(null);
         const change = onItemsChangeRef.current;
         if (!change) return;
         const { worldX, worldY } = screenToWorld(point.x, point.y);
@@ -4842,7 +5178,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       if (st.kind === "custom-place") {
         dragStateRef.current = { kind: "idle" };
-        setPlacementPreview(null);
+        setRealtimePlacementPreview(null);
         const change = onItemsChangeRef.current;
         if (!change) return;
         const { worldX, worldY } = screenToWorld(point.x, point.y);
@@ -4917,7 +5253,12 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       dragStateRef.current = { kind: "idle" };
     },
-    [requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+    [
+      requestSelectToolAfterUse,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const handlePointerDown = useCallback(
     (event) => {
@@ -4933,9 +5274,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         applyDragMoveAtScreenPoint(point, point);
         return;
       }
+      notifyWorldPointerMove(point);
       updateToolCursorPoint(point);
     },
-    [applyDragMoveAtScreenPoint, updateToolCursorPoint]
+    [applyDragMoveAtScreenPoint, notifyWorldPointerMove, updateToolCursorPoint]
   );
   const handlePointerUp = useCallback(
     (event) => {
@@ -4954,6 +5296,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const sy = evt.nativeEvent.locationY;
         if (touches && touches.length >= 2) {
           hideToolCursor();
+          notifyWorldPointerLeave();
           dragStateRef.current = { kind: "pan" };
           return;
         }
@@ -4969,6 +5312,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const pageY = evt.nativeEvent.pageY;
         if (touches && touches.length >= 2) {
           hideToolCursor();
+          notifyWorldPointerLeave();
           const t0 = touches[0];
           const t1 = touches[1];
           if (t0 && t1) {
@@ -5000,8 +5344,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         lastPinchDist.current = null;
         lastPanPoint.current = null;
         hideToolCursor();
+        notifyWorldPointerLeave();
         dragStateRef.current = { kind: "idle" };
-        setPlacementPreview(null);
+        setRealtimePlacementPreview(null);
         setLaserTrail([]);
         setEraserTrail([]);
         setEraserPreviewIds([]);
@@ -5013,7 +5358,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       beginDragAtScreenPoint,
       finishDragAtScreenPoint,
       requestRender,
-      hideToolCursor
+      hideToolCursor,
+      notifyWorldPointerLeave,
+      setRealtimePlacementPreview
     ]
   );
   useImperativeHandle(
@@ -5047,7 +5394,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
       onPointerEnter: handlePointerMove,
-      onPointerLeave: hideToolCursor,
+      onPointerLeave: () => {
+        hideToolCursor();
+        notifyWorldPointerLeave();
+      },
       ...panResponder.panHandlers,
       children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -5073,7 +5423,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState
+            previewStrokeStyle: strokeStyleState,
+            remotePresence
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(