canvu-react 0.4.32 → 0.4.34

package/dist/native.d.cts

@@ -2,6 +2,7 @@ import { C as Camera2D, S as StrokeStyle } from './shape-builders-CKEMjivV.cjs';
 export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-CKEMjivV.cjs';
 import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { R as RemotePresencePeer } from './types-BQUbxMgz.cjs';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import * as react from 'react';
 import { ReactNode } from 'react';
@@ -58,8 +59,9 @@ type NativeInteractionOverlayProps = {
     readonly laserTrail?: readonly TimedTrailPoint[];
     readonly eraserPreviewItems?: readonly VectorSceneItem[];
     readonly previewStrokeStyle?: StrokeStyle;
+    readonly remotePresence?: readonly RemotePresencePeer[];
 };
-declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, remotePresence, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 type NativeSceneRendererProps = {
     readonly items: readonly VectorSceneItem[];
@@ -214,6 +216,7 @@ type NativeWorldPointerDownDetail = {
 type NativeVectorViewportProps = {
     readonly items: readonly VectorSceneItem[];
     readonly selectedIds?: readonly string[];
+    readonly remotePresence?: readonly RemotePresencePeer[];
     readonly toolId?: string;
     readonly toolLocked?: boolean;
     readonly interactive?: boolean;
@@ -221,6 +224,12 @@ type NativeVectorViewportProps = {
     readonly onItemsChange?: (items: VectorSceneItem[]) => void;
     readonly onToolChangeRequest?: (toolId: string) => void;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
+    readonly onWorldPointerMove?: (world: {
+        readonly x: number;
+        readonly y: number;
+    }) => void;
+    readonly onWorldPointerLeave?: () => void;
+    readonly onPlacementPreviewChange?: (preview: PlacementPreview | null) => void;
     readonly onCameraChange?: () => void;
     readonly customPlacement?: NativeCustomShapePlacementOptions;
     readonly customPlacements?: readonly NativeCustomShapePlacementOptions[];

package/dist/native.d.ts

@@ -2,6 +2,7 @@ import { C as Camera2D, S as StrokeStyle } from './shape-builders-Cyh8zvDG.js';
 export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-Cyh8zvDG.js';
 import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { R as RemotePresencePeer } from './types-B82WiQQh.js';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
 import * as react from 'react';
 import { ReactNode } from 'react';
@@ -58,8 +59,9 @@ type NativeInteractionOverlayProps = {
     readonly laserTrail?: readonly TimedTrailPoint[];
     readonly eraserPreviewItems?: readonly VectorSceneItem[];
     readonly previewStrokeStyle?: StrokeStyle;
+    readonly remotePresence?: readonly RemotePresencePeer[];
 };
-declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, remotePresence, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 type NativeSceneRendererProps = {
     readonly items: readonly VectorSceneItem[];
@@ -214,6 +216,7 @@ type NativeWorldPointerDownDetail = {
 type NativeVectorViewportProps = {
     readonly items: readonly VectorSceneItem[];
     readonly selectedIds?: readonly string[];
+    readonly remotePresence?: readonly RemotePresencePeer[];
     readonly toolId?: string;
     readonly toolLocked?: boolean;
     readonly interactive?: boolean;
@@ -221,6 +224,12 @@ type NativeVectorViewportProps = {
     readonly onItemsChange?: (items: VectorSceneItem[]) => void;
     readonly onToolChangeRequest?: (toolId: string) => void;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
+    readonly onWorldPointerMove?: (world: {
+        readonly x: number;
+        readonly y: number;
+    }) => void;
+    readonly onWorldPointerLeave?: () => void;
+    readonly onPlacementPreviewChange?: (preview: PlacementPreview | null) => void;
     readonly onCameraChange?: () => void;
     readonly customPlacement?: NativeCustomShapePlacementOptions;
     readonly customPlacements?: readonly NativeCustomShapePlacementOptions[];

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 { 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';
 
@@ -34,7 +34,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)";
@@ -47,7 +47,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 {
@@ -72,7 +71,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) {
@@ -95,16 +93,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; }
@@ -119,13 +114,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 })}
@@ -1363,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;
@@ -2281,6 +2283,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);
@@ -2301,7 +2323,8 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle
+  previewStrokeStyle,
+  remotePresence = []
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2695,6 +2718,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,
@@ -2712,6 +2865,7 @@ function NativeInteractionOverlay({
         laserTrailElements,
         eraserTrailElements,
         eraserPreviewElements,
+        remotePresenceElements,
         selectionElements
       ] })
     }
@@ -4214,6 +4368,7 @@ function fitCameraToWorldRect(camera, viewportW, viewportH, worldRect, padding)
 var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   items,
   selectedIds = [],
+  remotePresence = [],
   toolId = "hand",
   toolLocked = false,
   interactive = false,
@@ -4221,6 +4376,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onWorldPointerDown,
+  onWorldPointerMove,
+  onWorldPointerLeave,
+  onPlacementPreviewChange,
   onCameraChange,
   customPlacement,
   customPlacements = [],
@@ -4238,6 +4396,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);
@@ -4253,8 +4417,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([]);
@@ -4348,6 +4517,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?.();
@@ -4387,6 +4566,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;
@@ -4472,7 +4652,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 }
           });
@@ -4492,7 +4672,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 }],
@@ -4525,7 +4705,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           startWorld: { x: worldX, y: worldY },
           startScreen: { x: sx, y: sy }
         };
-        setPlacementPreview(
+        setRealtimePlacementPreview(
           placementPreviewForTool(
             tool,
             { x: worldX, y: worldY },
@@ -4550,7 +4730,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 }
         });
@@ -4579,7 +4759,13 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       dragStateRef.current = { kind: "pan" };
     },
-    [interactive, requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+    [
+      interactive,
+      requestSelectToolAfterUse,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const applyDragMoveAtScreenPoint = useCallback(
     (point, pagePoint) => {
@@ -4587,6 +4773,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;
@@ -4619,7 +4806,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           }
           return;
         }
-        setPlacementPreview({
+        setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
           points: [...pts],
@@ -4681,7 +4868,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") {
@@ -4699,7 +4886,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         return;
       }
       if (st.kind === "place") {
-        setPlacementPreview(
+        setRealtimePlacementPreview(
           placementPreviewForTool(st.tool, st.startWorld, {
             x: worldX,
             y: worldY
@@ -4708,14 +4895,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) => {
@@ -4725,7 +4917,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);
@@ -4763,7 +4955,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);
@@ -4794,7 +4986,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);
@@ -4851,7 +5043,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);
@@ -4926,7 +5118,12 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
       dragStateRef.current = { kind: "idle" };
     },
-    [requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+    [
+      requestSelectToolAfterUse,
+      screenToWorld,
+      setRealtimePlacementPreview,
+      updateToolCursorPoint
+    ]
   );
   const handlePointerDown = useCallback(
     (event) => {
@@ -4942,9 +5139,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         applyDragMoveAtScreenPoint(point, point);
         return;
       }
+      notifyWorldPointerMove(point);
       updateToolCursorPoint(point);
     },
-    [applyDragMoveAtScreenPoint, updateToolCursorPoint]
+    [applyDragMoveAtScreenPoint, notifyWorldPointerMove, updateToolCursorPoint]
   );
   const handlePointerUp = useCallback(
     (event) => {
@@ -4963,6 +5161,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         const sy = evt.nativeEvent.locationY;
         if (touches && touches.length >= 2) {
           hideToolCursor();
+          notifyWorldPointerLeave();
           dragStateRef.current = { kind: "pan" };
           return;
         }
@@ -4978,6 +5177,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) {
@@ -5009,8 +5209,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([]);
@@ -5022,7 +5223,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       beginDragAtScreenPoint,
       finishDragAtScreenPoint,
       requestRender,
-      hideToolCursor
+      hideToolCursor,
+      notifyWorldPointerLeave,
+      setRealtimePlacementPreview
     ]
   );
   useImperativeHandle(
@@ -5056,7 +5259,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(
@@ -5082,7 +5288,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState
+            previewStrokeStyle: strokeStyleState,
+            remotePresence
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(