@octaviaflow/core 3.1.0-beta.94 → 3.1.0-beta.96

package/dist/workflow.js

@@ -2736,6 +2736,120 @@ function transformOriginFor(side, align) {
   return align === "start" ? "left top" : align === "end" ? "left bottom" : "left center";
 }
 
+// src/workflow/components/PresenceCursors/PresenceCursors.tsx
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var IDENTITY_VIEWPORT = { x: 0, y: 0, zoom: 1 };
+function PresenceCursors({
+  members,
+  onCursorMove,
+  viewport,
+  showLabels = true,
+  className
+}) {
+  const layerRef = useRef6(null);
+  const liveViewport = useViewportOrNull();
+  const vp = viewport ?? liveViewport ?? IDENTITY_VIEWPORT;
+  const vpRef = useRef6(vp);
+  const reportRef = useRef6(onCursorMove);
+  useEffect3(() => {
+    vpRef.current = vp;
+    reportRef.current = onCursorMove;
+  });
+  const isReporting = Boolean(onCursorMove);
+  useEffect3(() => {
+    const layer = layerRef.current;
+    if (!layer || !isReporting) return;
+    let frameId = 0;
+    let scheduled = false;
+    let disposed = false;
+    let pendingClient = null;
+    const flush = () => {
+      scheduled = false;
+      if (disposed) return;
+      if (!pendingClient) {
+        reportRef.current?.(null);
+        return;
+      }
+      const rect = layer.getBoundingClientRect();
+      const inside = pendingClient.x >= rect.left && pendingClient.x <= rect.right && pendingClient.y >= rect.top && pendingClient.y <= rect.bottom;
+      reportRef.current?.(
+        inside ? screenToFlow(
+          { x: pendingClient.x - rect.left, y: pendingClient.y - rect.top },
+          vpRef.current
+        ) : null
+      );
+    };
+    const schedule = () => {
+      if (scheduled || disposed) return;
+      scheduled = true;
+      frameId = requestAnimationFrame(flush);
+    };
+    const onMove = (e) => {
+      pendingClient = { x: e.clientX, y: e.clientY };
+      schedule();
+    };
+    const onLeave = () => {
+      pendingClient = null;
+      schedule();
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") onLeave();
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerleave", onLeave);
+    window.addEventListener("blur", onLeave);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      disposed = true;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerleave", onLeave);
+      window.removeEventListener("blur", onLeave);
+      document.removeEventListener("visibilitychange", onVisibility);
+      if (frameId) cancelAnimationFrame(frameId);
+    };
+  }, [isReporting]);
+  return /* @__PURE__ */ jsx6("div", { ref: layerRef, className: cn("ods-presence-cursors", className), "aria-hidden": "true", children: members.map((m) => {
+    if (!m.cursor) return null;
+    const p = flowToScreen(m.cursor, vp);
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: "ods-presence-cursors__pointer",
+        style: {
+          transform: `translate3d(${p.x}px, ${p.y}px, 0)`,
+          color: m.colour
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            "svg",
+            {
+              className: "ods-presence-cursors__arrow",
+              width: "18",
+              height: "18",
+              viewBox: "0 0 18 18",
+              fill: "none",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx6(
+                "path",
+                {
+                  d: "M2 1.5 L2 14 L5.6 10.7 L8 15.8 L10.6 14.6 L8.2 9.6 L13 9.3 Z",
+                  fill: "currentColor",
+                  stroke: "var(--ods-surface-canvas)",
+                  strokeWidth: "1.2",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          showLabels && /* @__PURE__ */ jsx6("span", { className: "ods-presence-cursors__label", children: m.name })
+        ]
+      },
+      m.userId
+    );
+  }) });
+}
+
 // src/workflow/utils/collapse.ts
 function collapseFor(nodes, edges) {
   const collapsedAncestorOf = /* @__PURE__ */ new Map();
@@ -2835,6 +2949,7 @@ export {
   NodeToolbar,
   OutputNode,
   ParallelNode,
+  PresenceCursors,
   StickyNode,
   TriggerNode,
   WaitNode,