canvu-react 0.4.33 → 0.4.34

package/dist/chatbot.d.cts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-BS-YG8Hx.cjs';
+import { C as CanvasPlugin } from './types-NBYvslB-.cjs';
 import 'react';
 import './types-BCCvY6ie.cjs';
 import './shape-builders-CKEMjivV.cjs';
 import './link-item-Dncuz2d_.cjs';
+import './types-BQUbxMgz.cjs';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/chatbot.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CanvasPlugin } from './types-UZYYwK-v.js';
+import { C as CanvasPlugin } from './types-DeDm865m.js';
 import 'react';
 import './types-BCCvY6ie.js';
 import './shape-builders-Cyh8zvDG.js';
 import './link-item-voRU0Up9.js';
+import './types-B82WiQQh.js';
 
 type ChatbotPluginPanelProps = {
     /**

package/dist/native.cjs

@@ -1360,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;
@@ -2278,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);
@@ -2298,7 +2329,8 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle
+  previewStrokeStyle,
+  remotePresence = []
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2692,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,
@@ -2709,6 +2871,7 @@ function NativeInteractionOverlay({
         laserTrailElements,
         eraserTrailElements,
         eraserPreviewElements,
+        remotePresenceElements,
         selectionElements
       ] })
     }
@@ -4211,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,
@@ -4218,6 +4382,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onItemsChange,
   onToolChangeRequest,
   onWorldPointerDown,
+  onWorldPointerMove,
+  onWorldPointerLeave,
+  onPlacementPreviewChange,
   onCameraChange,
   customPlacement,
   customPlacements = [],
@@ -4235,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);
@@ -4250,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([]);
@@ -4345,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?.();
@@ -4384,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;
@@ -4469,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 }
           });
@@ -4489,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 }],
@@ -4522,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 },
@@ -4547,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 }
         });
@@ -4576,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) => {
@@ -4584,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;
@@ -4616,7 +4812,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           }
           return;
         }
-        setPlacementPreview({
+        setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
           points: [...pts],
@@ -4678,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") {
@@ -4696,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
@@ -4705,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) => {
@@ -4722,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);
@@ -4760,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);
@@ -4791,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);
@@ -4848,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);
@@ -4923,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) => {
@@ -4939,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) => {
@@ -4960,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;
         }
@@ -4975,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) {
@@ -5006,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([]);
@@ -5019,7 +5229,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       beginDragAtScreenPoint,
       finishDragAtScreenPoint,
       requestRender,
-      hideToolCursor
+      hideToolCursor,
+      notifyWorldPointerLeave,
+      setRealtimePlacementPreview
     ]
   );
   react.useImperativeHandle(
@@ -5053,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(
@@ -5079,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(