@liveblocks/react-flow 3.16.0-flow1 → 3.16.0-flow2

package/README.md

@@ -4,3 +4,54 @@
 </p>
 
 # `@liveblocks/react-flow`
+
+<p>
+  <a href="https://npmjs.org/package/@liveblocks/react-flow"><img src="https://img.shields.io/npm/v/@liveblocks/react-flow?style=flat&label=npm&color=c33" alt="NPM" /></a>
+  <a href="https://bundlephobia.com/package/@liveblocks/react-flow"><img src="https://img.shields.io/bundlephobia/minzip/@liveblocks/react-flow?style=flat&label=size&color=09f" alt="Size" /></a>
+  <a href="https://github.com/liveblocks/liveblocks/blob/main/licenses/LICENSE-APACHE-2.0"><img src="https://img.shields.io/badge/license-Apache--2.0-green" alt="License" /></a>
+</p>
+
+`@liveblocks/react-flow` provides [React](https://reactjs.org/) APIs to
+integrate [React Flow](https://reactflow.dev/) diagrams with Liveblocks—a
+platform to build, host, and scale collaborative applications with zero
+configuration, no maintenance required.
+
+## Installation
+
+```
+npm install @liveblocks/client @liveblocks/react @liveblocks/react-ui @liveblocks/react-flow
+```
+
+## Documentation
+
+Read the
+[documentation](https://liveblocks.io/docs/api-reference/liveblocks-react-flow)
+for guides and API references.
+
+## Examples
+
+Explore our [collaborative examples](https://liveblocks.io/examples) to help you
+get started.
+
+> All examples are open-source and live in this repository, within
+> [`/examples`](../../examples).
+
+## Releases
+
+See the [latest changes](https://github.com/liveblocks/liveblocks/releases) or
+learn more about
+[upcoming releases](https://github.com/liveblocks/liveblocks/milestones).
+
+## Community
+
+- [Discord](https://liveblocks.io/discord) - To get involved with the Liveblocks
+  community, ask questions and share tips.
+- [X](https://x.com/liveblocks) - To receive updates, announcements, blog posts,
+  and general Liveblocks tips.
+
+## License
+
+Licensed under the Apache License 2.0, Copyright © 2021-present
+[Liveblocks](https://liveblocks.io).
+
+See [LICENSE](../../licenses/LICENSE-APACHE-2.0) for more information.

package/dist/constants.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+const DEFAULT_STORAGE_KEY = "flow";
+const NODE_BASE_CONFIG = {
+  // Local-only (not synced)
+  selected: false,
+  dragging: false,
+  measured: false,
+  resizing: false,
+  // Atomic (synced as plain Json)
+  position: "atomic",
+  sourcePosition: "atomic",
+  targetPosition: "atomic",
+  extent: "atomic",
+  origin: "atomic",
+  handles: "atomic"
+  // Note: the `data` key is intentionally left out of this base config, as it
+  // is expected to be provided by the end user
+};
+const EDGE_BASE_CONFIG = {
+  // Local-only (not synced)
+  selected: false,
+  // Atomic (synced as plain Json)
+  markerStart: "atomic",
+  markerEnd: "atomic"
+  // Note: the `data` key is intentionally left out of this base config, as it
+  // is expected to be provided by the end user
+};
+
+exports.DEFAULT_STORAGE_KEY = DEFAULT_STORAGE_KEY;
+exports.EDGE_BASE_CONFIG = EDGE_BASE_CONFIG;
+exports.NODE_BASE_CONFIG = NODE_BASE_CONFIG;
+//# sourceMappingURL=constants.cjs.map

package/dist/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs","sources":["../src/constants.ts"],"sourcesContent":["import type { SyncConfig } from \"@liveblocks/core\";\n\nexport const DEFAULT_STORAGE_KEY = \"flow\";\n\nexport const NODE_BASE_CONFIG = {\n  // Local-only (not synced)\n  selected: false,\n  dragging: false,\n  measured: false,\n  resizing: false,\n\n  // Atomic (synced as plain Json)\n  position: \"atomic\",\n  sourcePosition: \"atomic\",\n  targetPosition: \"atomic\",\n  extent: \"atomic\",\n  origin: \"atomic\",\n  handles: \"atomic\",\n\n  // Note: the `data` key is intentionally left out of this base config, as it\n  // is expected to be provided by the end user\n} as const satisfies SyncConfig;\n\nexport const EDGE_BASE_CONFIG = {\n  // Local-only (not synced)\n  selected: false,\n\n  // Atomic (synced as plain Json)\n  markerStart: \"atomic\",\n  markerEnd: \"atomic\",\n\n  // Note: the `data` key is intentionally left out of this base config, as it\n  // is expected to be provided by the end user\n} as const satisfies SyncConfig;\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAsB,GAAA,OAAA;AAE5B,MAAM,gBAAmB,GAAA;AAAA;AAAA,EAE9B,QAAU,EAAA,KAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA;AAAA,EAGV,QAAU,EAAA,QAAA;AAAA,EACV,cAAgB,EAAA,QAAA;AAAA,EAChB,cAAgB,EAAA,QAAA;AAAA,EAChB,MAAQ,EAAA,QAAA;AAAA,EACR,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,QAAA;AAAA;AAAA;AAIX,EAAA;AAEO,MAAM,gBAAmB,GAAA;AAAA;AAAA,EAE9B,QAAU,EAAA,KAAA;AAAA;AAAA,EAGV,WAAa,EAAA,QAAA;AAAA,EACb,SAAW,EAAA,QAAA;AAAA;AAAA;AAIb;;;;;;"}

package/dist/constants.js

@@ -0,0 +1,29 @@
+const DEFAULT_STORAGE_KEY = "flow";
+const NODE_BASE_CONFIG = {
+  // Local-only (not synced)
+  selected: false,
+  dragging: false,
+  measured: false,
+  resizing: false,
+  // Atomic (synced as plain Json)
+  position: "atomic",
+  sourcePosition: "atomic",
+  targetPosition: "atomic",
+  extent: "atomic",
+  origin: "atomic",
+  handles: "atomic"
+  // Note: the `data` key is intentionally left out of this base config, as it
+  // is expected to be provided by the end user
+};
+const EDGE_BASE_CONFIG = {
+  // Local-only (not synced)
+  selected: false,
+  // Atomic (synced as plain Json)
+  markerStart: "atomic",
+  markerEnd: "atomic"
+  // Note: the `data` key is intentionally left out of this base config, as it
+  // is expected to be provided by the end user
+};
+
+export { DEFAULT_STORAGE_KEY, EDGE_BASE_CONFIG, NODE_BASE_CONFIG };
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["import type { SyncConfig } from \"@liveblocks/core\";\n\nexport const DEFAULT_STORAGE_KEY = \"flow\";\n\nexport const NODE_BASE_CONFIG = {\n  // Local-only (not synced)\n  selected: false,\n  dragging: false,\n  measured: false,\n  resizing: false,\n\n  // Atomic (synced as plain Json)\n  position: \"atomic\",\n  sourcePosition: \"atomic\",\n  targetPosition: \"atomic\",\n  extent: \"atomic\",\n  origin: \"atomic\",\n  handles: \"atomic\",\n\n  // Note: the `data` key is intentionally left out of this base config, as it\n  // is expected to be provided by the end user\n} as const satisfies SyncConfig;\n\nexport const EDGE_BASE_CONFIG = {\n  // Local-only (not synced)\n  selected: false,\n\n  // Atomic (synced as plain Json)\n  markerStart: \"atomic\",\n  markerEnd: \"atomic\",\n\n  // Note: the `data` key is intentionally left out of this base config, as it\n  // is expected to be provided by the end user\n} as const satisfies SyncConfig;\n"],"names":[],"mappings":"AAEO,MAAM,mBAAsB,GAAA,OAAA;AAE5B,MAAM,gBAAmB,GAAA;AAAA;AAAA,EAE9B,QAAU,EAAA,KAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA,EACV,QAAU,EAAA,KAAA;AAAA;AAAA,EAGV,QAAU,EAAA,QAAA;AAAA,EACV,cAAgB,EAAA,QAAA;AAAA,EAChB,cAAgB,EAAA,QAAA;AAAA,EAChB,MAAQ,EAAA,QAAA;AAAA,EACR,MAAQ,EAAA,QAAA;AAAA,EACR,OAAS,EAAA,QAAA;AAAA;AAAA;AAIX,EAAA;AAEO,MAAM,gBAAmB,GAAA;AAAA;AAAA,EAE9B,QAAU,EAAA,KAAA;AAAA;AAAA,EAGV,WAAa,EAAA,QAAA;AAAA,EACb,SAAW,EAAA,QAAA;AAAA;AAAA;AAIb;;;;"}

package/dist/cursors.cjs

@@ -19,18 +19,24 @@ function $coordinates(value) {
   }
   return void 0;
 }
+function DefaultCursorWithUserInfo({ userId }) {
+  const { user, isLoading } = react.useUser(userId);
+  const color = $string(user?.color);
+  const name = $string(user?.name);
+  if (isLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactUi.Cursor, { color, label: name });
+}
 function PresenceCursor({
   connectionId,
-  presenceKey
+  presenceKey,
+  Cursor
 }) {
   const room = react.useRoom();
   const cursorRef = react$1.useRef(null);
   const reactFlowStoreApi = react$2.useStoreApi();
   const userId = react.useOther(connectionId, (other) => $string(other.id));
-  const { user, isLoading } = react.useUser(userId ?? "");
-  const hasUserInfo = userId !== void 0 && !isLoading;
-  const color = $string(user?.color);
-  const name = $string(user?.name);
   _private.useLayoutEffect(() => {
     const spring = _private$1.makeCursorSpring();
     function update() {
@@ -40,7 +46,7 @@ function PresenceCursor({
       if (!element) {
         return;
       }
-      if (!hasUserInfo || coordinates === null) {
+      if (coordinates === null) {
         element.style.transform = "translate3d(0, 0, 0)";
         element.style.display = "none";
         return;
@@ -68,19 +74,21 @@ function PresenceCursor({
       unsubscribeTransform();
       unsubscribeOther();
     };
-  }, [room, connectionId, presenceKey, hasUserInfo, reactFlowStoreApi]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactUi.Cursor,
-    {
-      color,
-      label: name,
-      ref: cursorRef,
-      style: { display: "none" }
-    }
-  );
+  }, [room, connectionId, presenceKey, reactFlowStoreApi]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: cursorRef, style: { display: "none" }, children: userId ? /* @__PURE__ */ jsxRuntime.jsx(Cursor, { userId, connectionId }) : /* @__PURE__ */ jsxRuntime.jsx(reactUi.Cursor, {}) });
 }
 const Cursors = react$1.forwardRef(
-  ({ className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props }, forwardedRef) => {
+  ({
+    className,
+    children,
+    presenceKey = DEFAULT_PRESENCE_KEY,
+    components,
+    ...props
+  }, forwardedRef) => {
+    const Cursor = _private$1.useStableComponent(
+      components?.Cursor,
+      DefaultCursorWithUserInfo
+    );
     const reactFlow = react$2.useReactFlow();
     const updateMyPresence = react.useUpdateMyPresence();
     const othersConnectionIds = react.useOthersConnectionIds();
@@ -133,7 +141,8 @@ const Cursors = react$1.forwardRef(
             PresenceCursor,
             {
               connectionId,
-              presenceKey
+              presenceKey,
+              Cursor
             },
             connectionId
           )),

package/dist/cursors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"cursors.cjs","sources":["../src/cursors.tsx"],"sourcesContent":["import { isPlainObject } from \"@liveblocks/core\";\nimport {\n  useOther,\n  useOthersConnectionIds,\n  useRoom,\n  useUpdateMyPresence,\n  useUser,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport { Cursor } from \"@liveblocks/react-ui\";\nimport { cn, makeCursorSpring } from \"@liveblocks/react-ui/_private\";\nimport { useReactFlow, useStore, useStoreApi } from \"@xyflow/react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useCallback, useEffect, useRef } from \"react\";\n\nconst DEFAULT_PRESENCE_KEY = \"cursor\";\n\nexport interface CursorsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The key used to store the cursors in users' Presence.\n   *\n   * Defaults to `\"cursor\"`.\n   */\n  presenceKey?: string;\n}\n\ntype Coordinates = {\n  x: number;\n  y: number;\n};\n\nfunction $string(value: unknown): string | undefined {\n  return typeof value === \"string\" ? value : undefined;\n}\n\nfunction $coordinates(value: unknown): Coordinates | undefined {\n  if (\n    isPlainObject(value) &&\n    typeof value.x === \"number\" &&\n    typeof value.y === \"number\"\n  ) {\n    return value as Coordinates;\n  }\n\n  return undefined;\n}\n\nfunction PresenceCursor({\n  connectionId,\n  presenceKey,\n}: {\n  connectionId: number;\n  presenceKey: string;\n}) {\n  const room = useRoom();\n  const cursorRef = useRef<HTMLDivElement>(null);\n  const reactFlowStoreApi = useStoreApi();\n  const userId = useOther(connectionId, (other) => $string(other.id));\n  const { user, isLoading } = useUser(userId ?? \"\");\n  const hasUserInfo = userId !== undefined && !isLoading;\n  const color = $string(user?.color);\n  const name = $string(user?.name);\n\n  useLayoutEffect(() => {\n    const spring = makeCursorSpring();\n\n    function update() {\n      const element = cursorRef.current;\n      const coordinates = spring.get();\n      const [panX, panY, zoom] = reactFlowStoreApi.getState().transform;\n\n      if (!element) {\n        return;\n      }\n\n      if (!hasUserInfo || coordinates === null) {\n        element.style.transform = \"translate3d(0, 0, 0)\";\n        element.style.display = \"none\";\n        return;\n      }\n\n      element.style.transform = `translate3d(${coordinates.x * zoom + panX}px, ${coordinates.y * zoom + panY}px, 0)`;\n      element.style.display = \"\";\n    }\n\n    update();\n\n    const unsubscribeSpring = spring.subscribe(update);\n    const unsubscribeTransform = reactFlowStoreApi.subscribe(\n      (state, previousState) => {\n        // Update positions whenever the canvas is panned or zoomed.\n        if (state.transform !== previousState.transform) {\n          update();\n        }\n      }\n    );\n    const unsubscribeOther = room.events.others.subscribe(({ others }) => {\n      const other = others.find((other) => other.connectionId === connectionId);\n      const cursor = $coordinates(other?.presence[presenceKey]);\n\n      spring.set(cursor ?? null);\n    });\n\n    return () => {\n      spring.dispose();\n      unsubscribeSpring();\n      unsubscribeTransform();\n      unsubscribeOther();\n    };\n  }, [room, connectionId, presenceKey, hasUserInfo, reactFlowStoreApi]);\n\n  return (\n    <Cursor\n      color={color}\n      label={name}\n      ref={cursorRef}\n      style={{ display: \"none\" }}\n    />\n  );\n}\n\n/**\n * Displays other users' cursors inside a React Flow canvas and stores the\n * current user's cursor in Presence as `{ cursor: { x, y } }`.\n *\n * Cursor coordinates are kept in React Flow canvas space, so panning moves\n * them correctly while zooming only affects their position, not their size.\n */\nexport const Cursors = forwardRef<HTMLDivElement, CursorsProps>(\n  (\n    { className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props },\n    forwardedRef\n  ) => {\n    const reactFlow = useReactFlow();\n    const updateMyPresence = useUpdateMyPresence();\n    const othersConnectionIds = useOthersConnectionIds();\n    const reactFlowDomNode = useStore((state) => state.domNode);\n    const reactFlowStoreApi = useStoreApi();\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent) => {\n        const isPanning = reactFlowStoreApi.getState().paneDragging;\n\n        if (isPanning) {\n          return;\n        }\n\n        updateMyPresence({\n          [presenceKey]: reactFlow.screenToFlowPosition({\n            x: event.clientX,\n            y: event.clientY,\n          }),\n        });\n      },\n      [updateMyPresence, presenceKey, reactFlow, reactFlowStoreApi]\n    );\n\n    const handlePointerLeave = useCallback(() => {\n      updateMyPresence({ [presenceKey]: null });\n    }, [updateMyPresence, presenceKey]);\n\n    useEffect(() => {\n      if (!reactFlowDomNode) {\n        return;\n      }\n\n      reactFlowDomNode.addEventListener(\"pointermove\", handlePointerMove);\n      reactFlowDomNode.addEventListener(\"pointerleave\", handlePointerLeave);\n      window.addEventListener(\"blur\", handlePointerLeave);\n\n      return () => {\n        reactFlowDomNode.removeEventListener(\"pointermove\", handlePointerMove);\n        reactFlowDomNode.removeEventListener(\n          \"pointerleave\",\n          handlePointerLeave\n        );\n        window.removeEventListener(\"blur\", handlePointerLeave);\n        handlePointerLeave();\n      };\n    }, [reactFlowDomNode, handlePointerMove, handlePointerLeave]);\n\n    return (\n      <div\n        aria-hidden\n        className={cn(\"lb-root lb-react-flow-cursors\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {othersConnectionIds.map((connectionId) => (\n          <PresenceCursor\n            key={connectionId}\n            connectionId={connectionId}\n            presenceKey={presenceKey}\n          />\n        ))}\n\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["isPlainObject","useRoom","useRef","useStoreApi","useOther","useUser","useLayoutEffect","makeCursorSpring","other","jsx","Cursor","forwardRef","useReactFlow","useUpdateMyPresence","useOthersConnectionIds","useStore","useCallback","useEffect","jsxs","cn"],"mappings":"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"}
+{"version":3,"file":"cursors.cjs","sources":["../src/cursors.tsx"],"sourcesContent":["import { isPlainObject } from \"@liveblocks/core\";\nimport {\n  useOther,\n  useOthersConnectionIds,\n  useRoom,\n  useUpdateMyPresence,\n  useUser,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport { Cursor as DefaultCursor } from \"@liveblocks/react-ui\";\nimport {\n  cn,\n  makeCursorSpring,\n  useStableComponent,\n} from \"@liveblocks/react-ui/_private\";\nimport { useReactFlow, useStore, useStoreApi } from \"@xyflow/react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport { forwardRef, useCallback, useEffect, useRef } from \"react\";\n\nconst DEFAULT_PRESENCE_KEY = \"cursor\";\n\nexport interface CursorsCursorProps {\n  /**\n   * The user ID for this cursor.\n   */\n  userId: string;\n\n  /**\n   * The connection ID for this cursor.\n   */\n  connectionId: number;\n}\n\ninterface CursorsComponents {\n  /**\n   * The component used to display each cursor.\n   */\n  Cursor: ComponentType<CursorsCursorProps>;\n}\n\nexport interface CursorsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The key used to store the cursors in users' Presence.\n   *\n   * Defaults to `\"cursor\"`.\n   */\n  presenceKey?: string;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<CursorsComponents>;\n}\n\ntype Coordinates = {\n  x: number;\n  y: number;\n};\n\nfunction $string(value: unknown): string | undefined {\n  return typeof value === \"string\" ? value : undefined;\n}\n\nfunction $coordinates(value: unknown): Coordinates | undefined {\n  if (\n    isPlainObject(value) &&\n    typeof value.x === \"number\" &&\n    typeof value.y === \"number\"\n  ) {\n    return value as Coordinates;\n  }\n\n  return undefined;\n}\n\nfunction DefaultCursorWithUserInfo({ userId }: CursorsCursorProps) {\n  const { user, isLoading } = useUser(userId);\n  const color = $string(user?.color);\n  const name = $string(user?.name);\n\n  if (isLoading) {\n    return null;\n  }\n\n  return <DefaultCursor color={color} label={name} />;\n}\n\nfunction PresenceCursor({\n  connectionId,\n  presenceKey,\n  Cursor,\n}: {\n  connectionId: number;\n  presenceKey: string;\n  Cursor: ComponentType<CursorsCursorProps>;\n}) {\n  const room = useRoom();\n  const cursorRef = useRef<HTMLDivElement>(null);\n  const reactFlowStoreApi = useStoreApi();\n  const userId = useOther(connectionId, (other) => $string(other.id));\n\n  useLayoutEffect(() => {\n    const spring = makeCursorSpring();\n\n    function update() {\n      const element = cursorRef.current;\n      const coordinates = spring.get();\n      const [panX, panY, zoom] = reactFlowStoreApi.getState().transform;\n\n      if (!element) {\n        return;\n      }\n\n      if (coordinates === null) {\n        element.style.transform = \"translate3d(0, 0, 0)\";\n        element.style.display = \"none\";\n        return;\n      }\n\n      element.style.transform = `translate3d(${coordinates.x * zoom + panX}px, ${coordinates.y * zoom + panY}px, 0)`;\n      element.style.display = \"\";\n    }\n\n    update();\n\n    const unsubscribeSpring = spring.subscribe(update);\n    const unsubscribeTransform = reactFlowStoreApi.subscribe(\n      (state, previousState) => {\n        // Update positions whenever the canvas is panned or zoomed.\n        if (state.transform !== previousState.transform) {\n          update();\n        }\n      }\n    );\n    const unsubscribeOther = room.events.others.subscribe(({ others }) => {\n      const other = others.find((other) => other.connectionId === connectionId);\n      const cursor = $coordinates(other?.presence[presenceKey]);\n\n      spring.set(cursor ?? null);\n    });\n\n    return () => {\n      spring.dispose();\n      unsubscribeSpring();\n      unsubscribeTransform();\n      unsubscribeOther();\n    };\n  }, [room, connectionId, presenceKey, reactFlowStoreApi]);\n\n  return (\n    <div ref={cursorRef} style={{ display: \"none\" }}>\n      {userId ? (\n        <Cursor userId={userId} connectionId={connectionId} />\n      ) : (\n        <DefaultCursor />\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays other users' cursors inside a React Flow canvas and stores the\n * current user's cursor in Presence as `{ cursor: { x, y } }`.\n *\n * Cursor coordinates are kept in React Flow canvas space, so panning moves\n * them correctly while zooming only affects their position, not their size.\n */\nexport const Cursors = forwardRef<HTMLDivElement, CursorsProps>(\n  (\n    {\n      className,\n      children,\n      presenceKey = DEFAULT_PRESENCE_KEY,\n      components,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Cursor = useStableComponent(\n      components?.Cursor,\n      DefaultCursorWithUserInfo\n    );\n    const reactFlow = useReactFlow();\n    const updateMyPresence = useUpdateMyPresence();\n    const othersConnectionIds = useOthersConnectionIds();\n    const reactFlowDomNode = useStore((state) => state.domNode);\n    const reactFlowStoreApi = useStoreApi();\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent) => {\n        const isPanning = reactFlowStoreApi.getState().paneDragging;\n\n        if (isPanning) {\n          return;\n        }\n\n        updateMyPresence({\n          [presenceKey]: reactFlow.screenToFlowPosition({\n            x: event.clientX,\n            y: event.clientY,\n          }),\n        });\n      },\n      [updateMyPresence, presenceKey, reactFlow, reactFlowStoreApi]\n    );\n\n    const handlePointerLeave = useCallback(() => {\n      updateMyPresence({ [presenceKey]: null });\n    }, [updateMyPresence, presenceKey]);\n\n    useEffect(() => {\n      if (!reactFlowDomNode) {\n        return;\n      }\n\n      reactFlowDomNode.addEventListener(\"pointermove\", handlePointerMove);\n      reactFlowDomNode.addEventListener(\"pointerleave\", handlePointerLeave);\n      window.addEventListener(\"blur\", handlePointerLeave);\n\n      return () => {\n        reactFlowDomNode.removeEventListener(\"pointermove\", handlePointerMove);\n        reactFlowDomNode.removeEventListener(\n          \"pointerleave\",\n          handlePointerLeave\n        );\n        window.removeEventListener(\"blur\", handlePointerLeave);\n        handlePointerLeave();\n      };\n    }, [reactFlowDomNode, handlePointerMove, handlePointerLeave]);\n\n    return (\n      <div\n        aria-hidden\n        className={cn(\"lb-root lb-react-flow-cursors\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {othersConnectionIds.map((connectionId) => (\n          <PresenceCursor\n            key={connectionId}\n            connectionId={connectionId}\n            presenceKey={presenceKey}\n            Cursor={Cursor}\n          />\n        ))}\n\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["isPlainObject","useUser","jsx","DefaultCursor","useRoom","useRef","useStoreApi","useOther","useLayoutEffect","makeCursorSpring","other","forwardRef","useStableComponent","useReactFlow","useUpdateMyPresence","useOthersConnectionIds","useStore","useCallback","useEffect","jsxs","cn"],"mappings":"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"}

package/dist/cursors.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { isPlainObject } from '@liveblocks/core';
-import { useRoom, useOther, useUser, useUpdateMyPresence, useOthersConnectionIds } from '@liveblocks/react';
+import { useUser, useRoom, useOther, useUpdateMyPresence, useOthersConnectionIds } from '@liveblocks/react';
 import { useLayoutEffect } from '@liveblocks/react/_private';
 import { Cursor } from '@liveblocks/react-ui';
-import { makeCursorSpring, cn } from '@liveblocks/react-ui/_private';
+import { makeCursorSpring, useStableComponent, cn } from '@liveblocks/react-ui/_private';
 import { useStoreApi, useReactFlow, useStore } from '@xyflow/react';
 import { useRef, forwardRef, useCallback, useEffect } from 'react';
 
@@ -17,18 +17,24 @@ function $coordinates(value) {
   }
   return void 0;
 }
+function DefaultCursorWithUserInfo({ userId }) {
+  const { user, isLoading } = useUser(userId);
+  const color = $string(user?.color);
+  const name = $string(user?.name);
+  if (isLoading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Cursor, { color, label: name });
+}
 function PresenceCursor({
   connectionId,
-  presenceKey
+  presenceKey,
+  Cursor: Cursor$1
 }) {
   const room = useRoom();
   const cursorRef = useRef(null);
   const reactFlowStoreApi = useStoreApi();
   const userId = useOther(connectionId, (other) => $string(other.id));
-  const { user, isLoading } = useUser(userId ?? "");
-  const hasUserInfo = userId !== void 0 && !isLoading;
-  const color = $string(user?.color);
-  const name = $string(user?.name);
   useLayoutEffect(() => {
     const spring = makeCursorSpring();
     function update() {
@@ -38,7 +44,7 @@ function PresenceCursor({
       if (!element) {
         return;
       }
-      if (!hasUserInfo || coordinates === null) {
+      if (coordinates === null) {
         element.style.transform = "translate3d(0, 0, 0)";
         element.style.display = "none";
         return;
@@ -66,19 +72,21 @@ function PresenceCursor({
       unsubscribeTransform();
       unsubscribeOther();
     };
-  }, [room, connectionId, presenceKey, hasUserInfo, reactFlowStoreApi]);
-  return /* @__PURE__ */ jsx(
-    Cursor,
-    {
-      color,
-      label: name,
-      ref: cursorRef,
-      style: { display: "none" }
-    }
-  );
+  }, [room, connectionId, presenceKey, reactFlowStoreApi]);
+  return /* @__PURE__ */ jsx("div", { ref: cursorRef, style: { display: "none" }, children: userId ? /* @__PURE__ */ jsx(Cursor$1, { userId, connectionId }) : /* @__PURE__ */ jsx(Cursor, {}) });
 }
 const Cursors = forwardRef(
-  ({ className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props }, forwardedRef) => {
+  ({
+    className,
+    children,
+    presenceKey = DEFAULT_PRESENCE_KEY,
+    components,
+    ...props
+  }, forwardedRef) => {
+    const Cursor = useStableComponent(
+      components?.Cursor,
+      DefaultCursorWithUserInfo
+    );
     const reactFlow = useReactFlow();
     const updateMyPresence = useUpdateMyPresence();
     const othersConnectionIds = useOthersConnectionIds();
@@ -131,7 +139,8 @@ const Cursors = forwardRef(
             PresenceCursor,
             {
               connectionId,
-              presenceKey
+              presenceKey,
+              Cursor
             },
             connectionId
           )),

package/dist/cursors.js.map

@@ -1 +1 @@
-{"version":3,"file":"cursors.js","sources":["../src/cursors.tsx"],"sourcesContent":["import { isPlainObject } from \"@liveblocks/core\";\nimport {\n  useOther,\n  useOthersConnectionIds,\n  useRoom,\n  useUpdateMyPresence,\n  useUser,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport { Cursor } from \"@liveblocks/react-ui\";\nimport { cn, makeCursorSpring } from \"@liveblocks/react-ui/_private\";\nimport { useReactFlow, useStore, useStoreApi } from \"@xyflow/react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef, useCallback, useEffect, useRef } from \"react\";\n\nconst DEFAULT_PRESENCE_KEY = \"cursor\";\n\nexport interface CursorsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The key used to store the cursors in users' Presence.\n   *\n   * Defaults to `\"cursor\"`.\n   */\n  presenceKey?: string;\n}\n\ntype Coordinates = {\n  x: number;\n  y: number;\n};\n\nfunction $string(value: unknown): string | undefined {\n  return typeof value === \"string\" ? value : undefined;\n}\n\nfunction $coordinates(value: unknown): Coordinates | undefined {\n  if (\n    isPlainObject(value) &&\n    typeof value.x === \"number\" &&\n    typeof value.y === \"number\"\n  ) {\n    return value as Coordinates;\n  }\n\n  return undefined;\n}\n\nfunction PresenceCursor({\n  connectionId,\n  presenceKey,\n}: {\n  connectionId: number;\n  presenceKey: string;\n}) {\n  const room = useRoom();\n  const cursorRef = useRef<HTMLDivElement>(null);\n  const reactFlowStoreApi = useStoreApi();\n  const userId = useOther(connectionId, (other) => $string(other.id));\n  const { user, isLoading } = useUser(userId ?? \"\");\n  const hasUserInfo = userId !== undefined && !isLoading;\n  const color = $string(user?.color);\n  const name = $string(user?.name);\n\n  useLayoutEffect(() => {\n    const spring = makeCursorSpring();\n\n    function update() {\n      const element = cursorRef.current;\n      const coordinates = spring.get();\n      const [panX, panY, zoom] = reactFlowStoreApi.getState().transform;\n\n      if (!element) {\n        return;\n      }\n\n      if (!hasUserInfo || coordinates === null) {\n        element.style.transform = \"translate3d(0, 0, 0)\";\n        element.style.display = \"none\";\n        return;\n      }\n\n      element.style.transform = `translate3d(${coordinates.x * zoom + panX}px, ${coordinates.y * zoom + panY}px, 0)`;\n      element.style.display = \"\";\n    }\n\n    update();\n\n    const unsubscribeSpring = spring.subscribe(update);\n    const unsubscribeTransform = reactFlowStoreApi.subscribe(\n      (state, previousState) => {\n        // Update positions whenever the canvas is panned or zoomed.\n        if (state.transform !== previousState.transform) {\n          update();\n        }\n      }\n    );\n    const unsubscribeOther = room.events.others.subscribe(({ others }) => {\n      const other = others.find((other) => other.connectionId === connectionId);\n      const cursor = $coordinates(other?.presence[presenceKey]);\n\n      spring.set(cursor ?? null);\n    });\n\n    return () => {\n      spring.dispose();\n      unsubscribeSpring();\n      unsubscribeTransform();\n      unsubscribeOther();\n    };\n  }, [room, connectionId, presenceKey, hasUserInfo, reactFlowStoreApi]);\n\n  return (\n    <Cursor\n      color={color}\n      label={name}\n      ref={cursorRef}\n      style={{ display: \"none\" }}\n    />\n  );\n}\n\n/**\n * Displays other users' cursors inside a React Flow canvas and stores the\n * current user's cursor in Presence as `{ cursor: { x, y } }`.\n *\n * Cursor coordinates are kept in React Flow canvas space, so panning moves\n * them correctly while zooming only affects their position, not their size.\n */\nexport const Cursors = forwardRef<HTMLDivElement, CursorsProps>(\n  (\n    { className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props },\n    forwardedRef\n  ) => {\n    const reactFlow = useReactFlow();\n    const updateMyPresence = useUpdateMyPresence();\n    const othersConnectionIds = useOthersConnectionIds();\n    const reactFlowDomNode = useStore((state) => state.domNode);\n    const reactFlowStoreApi = useStoreApi();\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent) => {\n        const isPanning = reactFlowStoreApi.getState().paneDragging;\n\n        if (isPanning) {\n          return;\n        }\n\n        updateMyPresence({\n          [presenceKey]: reactFlow.screenToFlowPosition({\n            x: event.clientX,\n            y: event.clientY,\n          }),\n        });\n      },\n      [updateMyPresence, presenceKey, reactFlow, reactFlowStoreApi]\n    );\n\n    const handlePointerLeave = useCallback(() => {\n      updateMyPresence({ [presenceKey]: null });\n    }, [updateMyPresence, presenceKey]);\n\n    useEffect(() => {\n      if (!reactFlowDomNode) {\n        return;\n      }\n\n      reactFlowDomNode.addEventListener(\"pointermove\", handlePointerMove);\n      reactFlowDomNode.addEventListener(\"pointerleave\", handlePointerLeave);\n      window.addEventListener(\"blur\", handlePointerLeave);\n\n      return () => {\n        reactFlowDomNode.removeEventListener(\"pointermove\", handlePointerMove);\n        reactFlowDomNode.removeEventListener(\n          \"pointerleave\",\n          handlePointerLeave\n        );\n        window.removeEventListener(\"blur\", handlePointerLeave);\n        handlePointerLeave();\n      };\n    }, [reactFlowDomNode, handlePointerMove, handlePointerLeave]);\n\n    return (\n      <div\n        aria-hidden\n        className={cn(\"lb-root lb-react-flow-cursors\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {othersConnectionIds.map((connectionId) => (\n          <PresenceCursor\n            key={connectionId}\n            connectionId={connectionId}\n            presenceKey={presenceKey}\n          />\n        ))}\n\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["other"],"mappings":"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"}
+{"version":3,"file":"cursors.js","sources":["../src/cursors.tsx"],"sourcesContent":["import { isPlainObject } from \"@liveblocks/core\";\nimport {\n  useOther,\n  useOthersConnectionIds,\n  useRoom,\n  useUpdateMyPresence,\n  useUser,\n} from \"@liveblocks/react\";\nimport { useLayoutEffect } from \"@liveblocks/react/_private\";\nimport { Cursor as DefaultCursor } from \"@liveblocks/react-ui\";\nimport {\n  cn,\n  makeCursorSpring,\n  useStableComponent,\n} from \"@liveblocks/react-ui/_private\";\nimport { useReactFlow, useStore, useStoreApi } from \"@xyflow/react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport { forwardRef, useCallback, useEffect, useRef } from \"react\";\n\nconst DEFAULT_PRESENCE_KEY = \"cursor\";\n\nexport interface CursorsCursorProps {\n  /**\n   * The user ID for this cursor.\n   */\n  userId: string;\n\n  /**\n   * The connection ID for this cursor.\n   */\n  connectionId: number;\n}\n\ninterface CursorsComponents {\n  /**\n   * The component used to display each cursor.\n   */\n  Cursor: ComponentType<CursorsCursorProps>;\n}\n\nexport interface CursorsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The key used to store the cursors in users' Presence.\n   *\n   * Defaults to `\"cursor\"`.\n   */\n  presenceKey?: string;\n\n  /**\n   * Override the component's components.\n   */\n  components?: Partial<CursorsComponents>;\n}\n\ntype Coordinates = {\n  x: number;\n  y: number;\n};\n\nfunction $string(value: unknown): string | undefined {\n  return typeof value === \"string\" ? value : undefined;\n}\n\nfunction $coordinates(value: unknown): Coordinates | undefined {\n  if (\n    isPlainObject(value) &&\n    typeof value.x === \"number\" &&\n    typeof value.y === \"number\"\n  ) {\n    return value as Coordinates;\n  }\n\n  return undefined;\n}\n\nfunction DefaultCursorWithUserInfo({ userId }: CursorsCursorProps) {\n  const { user, isLoading } = useUser(userId);\n  const color = $string(user?.color);\n  const name = $string(user?.name);\n\n  if (isLoading) {\n    return null;\n  }\n\n  return <DefaultCursor color={color} label={name} />;\n}\n\nfunction PresenceCursor({\n  connectionId,\n  presenceKey,\n  Cursor,\n}: {\n  connectionId: number;\n  presenceKey: string;\n  Cursor: ComponentType<CursorsCursorProps>;\n}) {\n  const room = useRoom();\n  const cursorRef = useRef<HTMLDivElement>(null);\n  const reactFlowStoreApi = useStoreApi();\n  const userId = useOther(connectionId, (other) => $string(other.id));\n\n  useLayoutEffect(() => {\n    const spring = makeCursorSpring();\n\n    function update() {\n      const element = cursorRef.current;\n      const coordinates = spring.get();\n      const [panX, panY, zoom] = reactFlowStoreApi.getState().transform;\n\n      if (!element) {\n        return;\n      }\n\n      if (coordinates === null) {\n        element.style.transform = \"translate3d(0, 0, 0)\";\n        element.style.display = \"none\";\n        return;\n      }\n\n      element.style.transform = `translate3d(${coordinates.x * zoom + panX}px, ${coordinates.y * zoom + panY}px, 0)`;\n      element.style.display = \"\";\n    }\n\n    update();\n\n    const unsubscribeSpring = spring.subscribe(update);\n    const unsubscribeTransform = reactFlowStoreApi.subscribe(\n      (state, previousState) => {\n        // Update positions whenever the canvas is panned or zoomed.\n        if (state.transform !== previousState.transform) {\n          update();\n        }\n      }\n    );\n    const unsubscribeOther = room.events.others.subscribe(({ others }) => {\n      const other = others.find((other) => other.connectionId === connectionId);\n      const cursor = $coordinates(other?.presence[presenceKey]);\n\n      spring.set(cursor ?? null);\n    });\n\n    return () => {\n      spring.dispose();\n      unsubscribeSpring();\n      unsubscribeTransform();\n      unsubscribeOther();\n    };\n  }, [room, connectionId, presenceKey, reactFlowStoreApi]);\n\n  return (\n    <div ref={cursorRef} style={{ display: \"none\" }}>\n      {userId ? (\n        <Cursor userId={userId} connectionId={connectionId} />\n      ) : (\n        <DefaultCursor />\n      )}\n    </div>\n  );\n}\n\n/**\n * Displays other users' cursors inside a React Flow canvas and stores the\n * current user's cursor in Presence as `{ cursor: { x, y } }`.\n *\n * Cursor coordinates are kept in React Flow canvas space, so panning moves\n * them correctly while zooming only affects their position, not their size.\n */\nexport const Cursors = forwardRef<HTMLDivElement, CursorsProps>(\n  (\n    {\n      className,\n      children,\n      presenceKey = DEFAULT_PRESENCE_KEY,\n      components,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Cursor = useStableComponent(\n      components?.Cursor,\n      DefaultCursorWithUserInfo\n    );\n    const reactFlow = useReactFlow();\n    const updateMyPresence = useUpdateMyPresence();\n    const othersConnectionIds = useOthersConnectionIds();\n    const reactFlowDomNode = useStore((state) => state.domNode);\n    const reactFlowStoreApi = useStoreApi();\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent) => {\n        const isPanning = reactFlowStoreApi.getState().paneDragging;\n\n        if (isPanning) {\n          return;\n        }\n\n        updateMyPresence({\n          [presenceKey]: reactFlow.screenToFlowPosition({\n            x: event.clientX,\n            y: event.clientY,\n          }),\n        });\n      },\n      [updateMyPresence, presenceKey, reactFlow, reactFlowStoreApi]\n    );\n\n    const handlePointerLeave = useCallback(() => {\n      updateMyPresence({ [presenceKey]: null });\n    }, [updateMyPresence, presenceKey]);\n\n    useEffect(() => {\n      if (!reactFlowDomNode) {\n        return;\n      }\n\n      reactFlowDomNode.addEventListener(\"pointermove\", handlePointerMove);\n      reactFlowDomNode.addEventListener(\"pointerleave\", handlePointerLeave);\n      window.addEventListener(\"blur\", handlePointerLeave);\n\n      return () => {\n        reactFlowDomNode.removeEventListener(\"pointermove\", handlePointerMove);\n        reactFlowDomNode.removeEventListener(\n          \"pointerleave\",\n          handlePointerLeave\n        );\n        window.removeEventListener(\"blur\", handlePointerLeave);\n        handlePointerLeave();\n      };\n    }, [reactFlowDomNode, handlePointerMove, handlePointerLeave]);\n\n    return (\n      <div\n        aria-hidden\n        className={cn(\"lb-root lb-react-flow-cursors\", className)}\n        {...props}\n        ref={forwardedRef}\n      >\n        {othersConnectionIds.map((connectionId) => (\n          <PresenceCursor\n            key={connectionId}\n            connectionId={connectionId}\n            presenceKey={presenceKey}\n            Cursor={Cursor}\n          />\n        ))}\n\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DefaultCursor","Cursor","other"],"mappings":"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"}