canvu-react 0.4.32 → 0.4.34

package/dist/native.cjs

@@ -40,7 +40,7 @@ var LINK_PLUGIN_KEY = "canvuLink";
 var DEFAULT_LINK_CARD_WIDTH = 320;
 var DEFAULT_LINK_CARD_HEIGHT = 70;
 var LINK_CARD_MIN_SCALE = 0.6;
-var LINK_CARD_MAX_SCALE = 2.5;
+var LINK_CARD_MAX_SCALE = 6;
 var LINK_CARD_ASPECT = DEFAULT_LINK_CARD_WIDTH / DEFAULT_LINK_CARD_HEIGHT;
 var LINK_CARD_BORDER = "oklch(0.918 0.008 255)";
 var LINK_CARD_BORDER_STRONG = "oklch(0.86 0.012 255)";
@@ -53,7 +53,6 @@ var formatNumber = (value) => {
   const rounded = Math.round(value * 100) / 100;
   return Object.is(rounded, -0) ? "0" : String(rounded);
 };
-var escapeXmlAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
 var escapeHtmlText = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 var getLinkHostname = (href) => {
   try {
@@ -78,7 +77,6 @@ var getLinkInitial = (hostname) => {
   const first = hostname.trim().charAt(0).toUpperCase();
   return first || "L";
 };
-var buildGoogleFaviconUrl = (hostname) => hostname ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(hostname)}&sz=64` : null;
 var getStableLinkIdSuffix = (value) => {
   let hash = 0;
   for (const char of value) {
@@ -101,16 +99,13 @@ function buildLinkCardSvg(width, _height, link) {
   const title = link.title?.trim() || hostname || "Link";
   const protocol = getLinkProtocol(link.href);
   const subtitle = hostname || link.href;
-  const favicon = link.favicon?.trim() || buildGoogleFaviconUrl(hostname);
   const idSuffix = getStableLinkIdSuffix(`${hostname}:${link.href}`);
-  const clipId = `canvu-link-favicon-${idSuffix}`;
   const gradientId = `canvu-link-favicon-gradient-${idSuffix}`;
   const buttonX = contentWidth - padding - buttonSize;
   const buttonY = (contentHeight - buttonSize) / 2;
   const isSecure = protocol === "https:";
   const subtitleX = isSecure ? textX + 13 : textX;
   const subtitleWidth = isSecure ? textWidth - 13 : textWidth;
-  const faviconImage = favicon ? `<image class="canvu-link-favicon-img" href="${escapeXmlAttribute(favicon)}" x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" preserveAspectRatio="xMidYMid slice" clip-path="url(#${clipId})" />` : "";
   return `
 		<style>
 			.canvu-link-card-root .canvu-link-card { transition: transform .18s ease, filter .18s ease, stroke .18s ease; }
@@ -125,13 +120,9 @@ function buildLinkCardSvg(width, _height, link) {
 					<stop stop-color="${LINK_CARD_ACCENT}" />
 					<stop offset="1" stop-color="${LINK_CARD_ACCENT_DEEP}" />
 				</linearGradient>
-				<clipPath id="${clipId}">
-					<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" />
-				</clipPath>
 			</defs>
 			<rect x="${formatNumber(padding)}" y="${formatNumber(padding)}" width="${formatNumber(badgeSize)}" height="${formatNumber(badgeSize)}" rx="11" fill="url(#${gradientId})" />
 			<text x="${formatNumber(padding + badgeSize / 2)}" y="${formatNumber(padding + badgeSize / 2 + 5)}" text-anchor="middle" font-family="system-ui,sans-serif" font-size="17" font-weight="700" fill="#ffffff">${escapeHtmlText(getLinkInitial(hostname))}</text>
-			${faviconImage}
 			${buildLinkTextBand({ x: textX, y: 16, width: textWidth, height: 19, text: title, fontSize: 14.5, color: LINK_CARD_TITLE_COLOR, fontWeight: 700 })}
 			${isSecure ? `<g transform="translate(${formatNumber(textX)},40)" stroke="${LINK_CARD_TEXT_COLOR}" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none"><rect x="1.5" y="4.5" width="7" height="6" rx="1" /><path d="M3 4.5 V3 a2 2 0 0 1 4 0 v1.5" /></g>` : ""}
 			${buildLinkTextBand({ x: subtitleX, y: 36, width: subtitleWidth, height: 17, text: subtitle, fontSize: 12.5, color: LINK_CARD_TEXT_COLOR })}
@@ -1369,6 +1360,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;
@@ -2287,6 +2289,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);
@@ -2307,7 +2329,8 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle
+  previewStrokeStyle,
+  remotePresence = []
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2701,6 +2724,136 @@ function NativeInteractionOverlay({
       )
     ] });
   }, [laserTrail, z]);
+  const remotePresenceElements = react.useMemo(() => {
+    if (remotePresence.length === 0) return null;
+    const labelFont = reactNativeSkia.matchFont({ fontSize: REMOTE_LABEL_SCREEN_PX / z });
+    const cursorSize = REMOTE_CURSOR_SCREEN_PX / z;
+    const labelOffsetX = 14 / z;
+    const labelOffsetY = 18 / z;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(
+              reactNativeSkia.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__ */ jsxRuntime.jsx(
+              reactNativeSkia.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__ */ jsxRuntime.jsx(
+              reactNativeSkia.Path,
+              {
+                path: payload.d,
+                color: colorWithOpacity(payload.fill, payload.fillOpacity),
+                style: "fill",
+                fillType: "winding",
+                antiAlias: true
+              }
+            );
+          }
+          if (payload?.kind === "strokePath") {
+            strokeElement = /* @__PURE__ */ jsxRuntime.jsx(
+              reactNativeSkia.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__ */ jsxRuntime.jsx(
+        reactNativeSkia.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__ */ jsxRuntime.jsx(reactNativeSkia.DashPathEffect, { intervals: [marqueeDashWorld, marqueeDashWorld] })
+        }
+      ) : null;
+      const cursorElement = cursor ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNativeSkia.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__ */ jsxRuntime.jsx(
+          reactNativeSkia.Text,
+          {
+            x: cursor.x + labelOffsetX,
+            y: cursor.y + labelOffsetY,
+            text: peer.displayName,
+            color,
+            font: labelFont
+          }
+        ) : null
+      ] }) : null;
+      return /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { children: [
+        cameraElement,
+        strokeElement,
+        cursorElement
+      ] }, peer.clientId ?? peer.id);
+    }) });
+  }, [remotePresence, z, overlayStrokeWorld, marqueeDashWorld]);
   if (width <= 0 || height <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNativeSkia.Canvas,
@@ -2718,6 +2871,7 @@ function NativeInteractionOverlay({
         laserTrailElements,
         eraserTrailElements,
         eraserPreviewElements,
+        remotePresenceElements,
         selectionElements
       ] })
     }
@@ -4220,6 +4374,7 @@ function fitCameraToWorldRect(camera, viewportW, viewportH, worldRect, padding)
 var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   items,
   selectedIds = [],
+  remotePresence = [],
   toolId = "hand",
   toolLocked = false,
   interactive = false,
@@ -4227,6 +4382,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onWorldPointerDown,
+  onWorldPointerMove,
+  onWorldPointerLeave,
+  onPlacementPreviewChange,
   onCameraChange,
   customPlacement,
   customPlacements = [],
@@ -4244,6 +4402,12 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onToolChangeRequestRef.current = onToolChangeRequest;
   const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
+  const onWorldPointerMoveRef = react.useRef(onWorldPointerMove);
+  onWorldPointerMoveRef.current = onWorldPointerMove;
+  const onWorldPointerLeaveRef = react.useRef(onWorldPointerLeave);
+  onWorldPointerLeaveRef.current = onWorldPointerLeave;
+  const onPlacementPreviewChangeRef = react.useRef(onPlacementPreviewChange);
+  onPlacementPreviewChangeRef.current = onPlacementPreviewChange;
   const onCameraChangeRef = react.useRef(onCameraChange);
   onCameraChangeRef.current = onCameraChange;
   const onItemsChangeRef = react.useRef(onItemsChange);
@@ -4259,8 +4423,13 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   const selectedIdsRef = react.useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
   const dragStateRef = react.useRef({ kind: "idle" });
-  const [placementPreview, setPlacementPreview] = react.useState(
-    null
+  const [placementPreview, setPlacementPreviewState] = react.useState(null);
+  const setRealtimePlacementPreview = react.useCallback(
+    (nextPreview) => {
+      setPlacementPreviewState(nextPreview);
+      onPlacementPreviewChangeRef.current?.(nextPreview);
+    },
+    []
   );
   const [eraserTrail, setEraserTrail] = react.useState([]);
   const [laserTrail, setLaserTrail] = react.useState([]);
@@ -4354,6 +4523,16 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     },
     []
   );
+  const notifyWorldPointerMove = react.useCallback(
+    (point) => {
+      const { worldX, worldY } = screenToWorld(point.x, point.y);
+      onWorldPointerMoveRef.current?.({ x: worldX, y: worldY });
+    },
+    [screenToWorld]
+  );
+  const notifyWorldPointerLeave = react.useCallback(() => {
+    onWorldPointerLeaveRef.current?.();
+  }, []);
   const requestRender = react.useCallback(() => {
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
@@ -4393,6 +4572,7 @@ var NativeVectorViewport = react.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;
@@ -4478,7 +4658,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             kind: "marquee",
             startWorld: { x: worldX, y: worldY }
           };
-          setPlacementPreview({
+          setRealtimePlacementPreview({
             kind: "marquee",
             rect: { x: worldX, y: worldY, width: 0, height: 0 }
           });
@@ -4498,7 +4678,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           }
           setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
         } else {
-          setPlacementPreview({
+          setRealtimePlacementPreview({
             kind: "stroke",
             tool,
             points: [{ x: worldX, y: worldY }],
@@ -4531,7 +4711,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           startWorld: { x: worldX, y: worldY },
           startScreen: { x: sx, y: sy }
         };
-        setPlacementPreview(
+        setRealtimePlacementPreview(
           placementPreviewForTool(
             tool,
             { x: worldX, y: worldY },
@@ -4556,7 +4736,7 @@ var NativeVectorViewport = react.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 }
         });
@@ -4585,7 +4765,13 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       }
       dragStateRef.current = { kind: "pan" };
     },
-    [interactive, requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+    [
+      interactive,
+      requestSelectToolAfterUse,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const applyDragMoveAtScreenPoint = react.useCallback(
     (point, pagePoint) => {
@@ -4593,6 +4779,7 @@ var NativeVectorViewport = react.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;
@@ -4625,7 +4812,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           }
           return;
         }
-        setPlacementPreview({
+        setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
           points: [...pts],
@@ -4687,7 +4874,7 @@ var NativeVectorViewport = react.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") {
@@ -4705,7 +4892,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         return;
       }
       if (st.kind === "place") {
-        setPlacementPreview(
+        setRealtimePlacementPreview(
           placementPreviewForTool(st.tool, st.startWorld, {
             x: worldX,
             y: worldY
@@ -4714,14 +4901,19 @@ var NativeVectorViewport = react.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 = react.useCallback(
     (point) => {
@@ -4731,7 +4923,7 @@ var NativeVectorViewport = react.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);
@@ -4769,7 +4961,7 @@ var NativeVectorViewport = react.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);
@@ -4800,7 +4992,7 @@ var NativeVectorViewport = react.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);
@@ -4857,7 +5049,7 @@ var NativeVectorViewport = react.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);
@@ -4932,7 +5124,12 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       }
       dragStateRef.current = { kind: "idle" };
     },
-    [requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+    [
+      requestSelectToolAfterUse,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const handlePointerDown = react.useCallback(
     (event) => {
@@ -4948,9 +5145,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         applyDragMoveAtScreenPoint(point, point);
         return;
       }
+      notifyWorldPointerMove(point);
       updateToolCursorPoint(point);
     },
-    [applyDragMoveAtScreenPoint, updateToolCursorPoint]
+    [applyDragMoveAtScreenPoint, notifyWorldPointerMove, updateToolCursorPoint]
   );
   const handlePointerUp = react.useCallback(
     (event) => {
@@ -4969,6 +5167,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         const sy = evt.nativeEvent.locationY;
         if (touches && touches.length >= 2) {
           hideToolCursor();
+          notifyWorldPointerLeave();
           dragStateRef.current = { kind: "pan" };
           return;
         }
@@ -4984,6 +5183,7 @@ var NativeVectorViewport = react.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) {
@@ -5015,8 +5215,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         lastPinchDist.current = null;
         lastPanPoint.current = null;
         hideToolCursor();
+        notifyWorldPointerLeave();
         dragStateRef.current = { kind: "idle" };
-        setPlacementPreview(null);
+        setRealtimePlacementPreview(null);
         setLaserTrail([]);
         setEraserTrail([]);
         setEraserPreviewIds([]);
@@ -5028,7 +5229,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       beginDragAtScreenPoint,
       finishDragAtScreenPoint,
       requestRender,
-      hideToolCursor
+      hideToolCursor,
+      notifyWorldPointerLeave,
+      setRealtimePlacementPreview
     ]
   );
   react.useImperativeHandle(
@@ -5062,7 +5265,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
       onPointerEnter: handlePointerMove,
-      onPointerLeave: hideToolCursor,
+      onPointerLeave: () => {
+        hideToolCursor();
+        notifyWorldPointerLeave();
+      },
       ...panResponder.panHandlers,
       children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5088,7 +5294,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState
+            previewStrokeStyle: strokeStyleState,
+            remotePresence
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsxRuntime.jsx(