@liveblocks/react-flow 0.0.0 → 3.16.0-flow1

package/README.md

@@ -0,0 +1,6 @@
+<p>
+  <a href="https://liveblocks.io#gh-light-mode-only"><img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" /></a>
+  <a href="https://liveblocks.io#gh-dark-mode-only"><img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" /></a>
+</p>
+
+# `@liveblocks/react-flow`

package/dist/cursors.cjs

@@ -0,0 +1,148 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@liveblocks/core');
+var react = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
+var reactUi = require('@liveblocks/react-ui');
+var _private$1 = require('@liveblocks/react-ui/_private');
+var react$2 = require('@xyflow/react');
+var react$1 = require('react');
+
+const DEFAULT_PRESENCE_KEY = "cursor";
+function $string(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function $coordinates(value) {
+  if (core.isPlainObject(value) && typeof value.x === "number" && typeof value.y === "number") {
+    return value;
+  }
+  return void 0;
+}
+function PresenceCursor({
+  connectionId,
+  presenceKey
+}) {
+  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() {
+      const element = cursorRef.current;
+      const coordinates = spring.get();
+      const [panX, panY, zoom] = reactFlowStoreApi.getState().transform;
+      if (!element) {
+        return;
+      }
+      if (!hasUserInfo || coordinates === null) {
+        element.style.transform = "translate3d(0, 0, 0)";
+        element.style.display = "none";
+        return;
+      }
+      element.style.transform = `translate3d(${coordinates.x * zoom + panX}px, ${coordinates.y * zoom + panY}px, 0)`;
+      element.style.display = "";
+    }
+    update();
+    const unsubscribeSpring = spring.subscribe(update);
+    const unsubscribeTransform = reactFlowStoreApi.subscribe(
+      (state, previousState) => {
+        if (state.transform !== previousState.transform) {
+          update();
+        }
+      }
+    );
+    const unsubscribeOther = room.events.others.subscribe(({ others }) => {
+      const other = others.find((other2) => other2.connectionId === connectionId);
+      const cursor = $coordinates(other?.presence[presenceKey]);
+      spring.set(cursor ?? null);
+    });
+    return () => {
+      spring.dispose();
+      unsubscribeSpring();
+      unsubscribeTransform();
+      unsubscribeOther();
+    };
+  }, [room, connectionId, presenceKey, hasUserInfo, reactFlowStoreApi]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactUi.Cursor,
+    {
+      color,
+      label: name,
+      ref: cursorRef,
+      style: { display: "none" }
+    }
+  );
+}
+const Cursors = react$1.forwardRef(
+  ({ className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props }, forwardedRef) => {
+    const reactFlow = react$2.useReactFlow();
+    const updateMyPresence = react.useUpdateMyPresence();
+    const othersConnectionIds = react.useOthersConnectionIds();
+    const reactFlowDomNode = react$2.useStore((state) => state.domNode);
+    const reactFlowStoreApi = react$2.useStoreApi();
+    const handlePointerMove = react$1.useCallback(
+      (event) => {
+        const isPanning = reactFlowStoreApi.getState().paneDragging;
+        if (isPanning) {
+          return;
+        }
+        updateMyPresence({
+          [presenceKey]: reactFlow.screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY
+          })
+        });
+      },
+      [updateMyPresence, presenceKey, reactFlow, reactFlowStoreApi]
+    );
+    const handlePointerLeave = react$1.useCallback(() => {
+      updateMyPresence({ [presenceKey]: null });
+    }, [updateMyPresence, presenceKey]);
+    react$1.useEffect(() => {
+      if (!reactFlowDomNode) {
+        return;
+      }
+      reactFlowDomNode.addEventListener("pointermove", handlePointerMove);
+      reactFlowDomNode.addEventListener("pointerleave", handlePointerLeave);
+      window.addEventListener("blur", handlePointerLeave);
+      return () => {
+        reactFlowDomNode.removeEventListener("pointermove", handlePointerMove);
+        reactFlowDomNode.removeEventListener(
+          "pointerleave",
+          handlePointerLeave
+        );
+        window.removeEventListener("blur", handlePointerLeave);
+        handlePointerLeave();
+      };
+    }, [reactFlowDomNode, handlePointerMove, handlePointerLeave]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "aria-hidden": true,
+        className: _private$1.cn("lb-root lb-react-flow-cursors", className),
+        ...props,
+        ref: forwardedRef,
+        children: [
+          othersConnectionIds.map((connectionId) => /* @__PURE__ */ jsxRuntime.jsx(
+            PresenceCursor,
+            {
+              connectionId,
+              presenceKey
+            },
+            connectionId
+          )),
+          children
+        ]
+      }
+    );
+  }
+);
+
+exports.Cursors = Cursors;
+//# sourceMappingURL=cursors.cjs.map

package/dist/cursors.cjs.map

@@ -0,0 +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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"}

package/dist/cursors.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isPlainObject } from '@liveblocks/core';
+import { useRoom, useOther, useUser, 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 { useStoreApi, useReactFlow, useStore } from '@xyflow/react';
+import { useRef, forwardRef, useCallback, useEffect } from 'react';
+
+const DEFAULT_PRESENCE_KEY = "cursor";
+function $string(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function $coordinates(value) {
+  if (isPlainObject(value) && typeof value.x === "number" && typeof value.y === "number") {
+    return value;
+  }
+  return void 0;
+}
+function PresenceCursor({
+  connectionId,
+  presenceKey
+}) {
+  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() {
+      const element = cursorRef.current;
+      const coordinates = spring.get();
+      const [panX, panY, zoom] = reactFlowStoreApi.getState().transform;
+      if (!element) {
+        return;
+      }
+      if (!hasUserInfo || coordinates === null) {
+        element.style.transform = "translate3d(0, 0, 0)";
+        element.style.display = "none";
+        return;
+      }
+      element.style.transform = `translate3d(${coordinates.x * zoom + panX}px, ${coordinates.y * zoom + panY}px, 0)`;
+      element.style.display = "";
+    }
+    update();
+    const unsubscribeSpring = spring.subscribe(update);
+    const unsubscribeTransform = reactFlowStoreApi.subscribe(
+      (state, previousState) => {
+        if (state.transform !== previousState.transform) {
+          update();
+        }
+      }
+    );
+    const unsubscribeOther = room.events.others.subscribe(({ others }) => {
+      const other = others.find((other2) => other2.connectionId === connectionId);
+      const cursor = $coordinates(other?.presence[presenceKey]);
+      spring.set(cursor ?? null);
+    });
+    return () => {
+      spring.dispose();
+      unsubscribeSpring();
+      unsubscribeTransform();
+      unsubscribeOther();
+    };
+  }, [room, connectionId, presenceKey, hasUserInfo, reactFlowStoreApi]);
+  return /* @__PURE__ */ jsx(
+    Cursor,
+    {
+      color,
+      label: name,
+      ref: cursorRef,
+      style: { display: "none" }
+    }
+  );
+}
+const Cursors = forwardRef(
+  ({ className, children, presenceKey = DEFAULT_PRESENCE_KEY, ...props }, forwardedRef) => {
+    const reactFlow = useReactFlow();
+    const updateMyPresence = useUpdateMyPresence();
+    const othersConnectionIds = useOthersConnectionIds();
+    const reactFlowDomNode = useStore((state) => state.domNode);
+    const reactFlowStoreApi = useStoreApi();
+    const handlePointerMove = useCallback(
+      (event) => {
+        const isPanning = reactFlowStoreApi.getState().paneDragging;
+        if (isPanning) {
+          return;
+        }
+        updateMyPresence({
+          [presenceKey]: reactFlow.screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY
+          })
+        });
+      },
+      [updateMyPresence, presenceKey, reactFlow, reactFlowStoreApi]
+    );
+    const handlePointerLeave = useCallback(() => {
+      updateMyPresence({ [presenceKey]: null });
+    }, [updateMyPresence, presenceKey]);
+    useEffect(() => {
+      if (!reactFlowDomNode) {
+        return;
+      }
+      reactFlowDomNode.addEventListener("pointermove", handlePointerMove);
+      reactFlowDomNode.addEventListener("pointerleave", handlePointerLeave);
+      window.addEventListener("blur", handlePointerLeave);
+      return () => {
+        reactFlowDomNode.removeEventListener("pointermove", handlePointerMove);
+        reactFlowDomNode.removeEventListener(
+          "pointerleave",
+          handlePointerLeave
+        );
+        window.removeEventListener("blur", handlePointerLeave);
+        handlePointerLeave();
+      };
+    }, [reactFlowDomNode, handlePointerMove, handlePointerLeave]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn("lb-root lb-react-flow-cursors", className),
+        ...props,
+        ref: forwardedRef,
+        children: [
+          othersConnectionIds.map((connectionId) => /* @__PURE__ */ jsx(
+            PresenceCursor,
+            {
+              connectionId,
+              presenceKey
+            },
+            connectionId
+          )),
+          children
+        ]
+      }
+    );
+  }
+);
+
+export { Cursors };
+//# sourceMappingURL=cursors.js.map

package/dist/cursors.js.map

@@ -0,0 +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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"}

package/dist/flow.cjs

@@ -0,0 +1,332 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var react = require('@liveblocks/react');
+var _private = require('@liveblocks/react/_private');
+var react$2 = require('@xyflow/react');
+var react$1 = require('react');
+
+const DEFAULT_STORAGE_KEY = "flow";
+const NODE_LOCAL_KEYS = [
+  "selected",
+  "dragging",
+  "measured",
+  "resizing"
+];
+const EDGE_LOCAL_KEYS = ["selected"];
+const EMPTY_ARRAY = [];
+function pick(from, keys) {
+  const result = {};
+  for (const key of keys) {
+    const value = from[key];
+    if (value !== void 0 && value !== null) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function omit(from, keys) {
+  const result = { ...from };
+  for (const key of keys) {
+    delete result[key];
+  }
+  return result;
+}
+function reconcile(cache, next) {
+  const previous = cache.get(next.id);
+  if (previous && core.shallow(previous, next)) {
+    return previous;
+  }
+  cache.set(next.id, next);
+  return next;
+}
+function merge(cache, remote, local) {
+  for (const id of cache.keys()) {
+    if (!remote.has(id)) {
+      cache.delete(id);
+    }
+  }
+  for (const id of local.keys()) {
+    if (!remote.has(id)) {
+      local.delete(id);
+    }
+  }
+  return Array.from(remote.values(), (item) => {
+    const localItem = local.get(item.id);
+    return reconcile(
+      cache,
+      localItem ? Object.assign({}, item, localItem) : item
+    );
+  });
+}
+function updateLocalState(map, key, changes) {
+  const next = {};
+  for (const change in changes) {
+    const value = changes[change];
+    if (value !== void 0 && value !== false) {
+      next[change] = value;
+    }
+  }
+  if (Object.keys(next).length > 0) {
+    map.set(key, next);
+    return true;
+  } else {
+    const hasItem = map.has(key);
+    map.delete(key);
+    return hasItem;
+  }
+}
+function nodeToStorage(node) {
+  const { data, ...rest } = omit(node, NODE_LOCAL_KEYS);
+  return new core.LiveObject({
+    ...rest,
+    data: new core.LiveObject(data)
+  });
+}
+function edgeToStorage(edge) {
+  const { data, ...rest } = omit(edge, EDGE_LOCAL_KEYS);
+  return new core.LiveObject({
+    ...rest,
+    // `data` is optional on edges.
+    data: data === void 0 ? void 0 : new core.LiveObject(data)
+  });
+}
+function applyNodeChanges(args) {
+  const { changes, nodes, nextLocal, nodeCache } = args;
+  let hasLocalChanged = false;
+  for (const change of changes) {
+    switch (change.type) {
+      case "add":
+      case "replace":
+        nodes.set(change.item.id, nodeToStorage(change.item));
+        if (updateLocalState(
+          nextLocal,
+          change.item.id,
+          pick(change.item, NODE_LOCAL_KEYS)
+        )) {
+          hasLocalChanged = true;
+        }
+        break;
+      case "remove":
+        nodes.delete(change.id);
+        nodeCache.delete(change.id);
+        nextLocal.delete(change.id);
+        hasLocalChanged = true;
+        break;
+      case "position": {
+        const node = nodes.get(change.id);
+        if (!node || !change.position) {
+          break;
+        }
+        const previous = node.get("position");
+        if (previous?.x !== change.position.x || previous?.y !== change.position.y) {
+          node.set("position", change.position);
+        }
+        if (change.dragging !== void 0) {
+          updateLocalState(nextLocal, change.id, {
+            ...nextLocal.get(change.id),
+            dragging: change.dragging
+          });
+          hasLocalChanged = true;
+        }
+        break;
+      }
+      case "dimensions": {
+        const node = nodes.get(change.id);
+        const patch = {
+          ...nextLocal.get(change.id)
+        };
+        if (node && change.dimensions !== void 0 && change.setAttributes !== void 0) {
+          if (change.setAttributes === true || change.setAttributes === "width") {
+            node.set("width", change.dimensions.width);
+          }
+          if (change.setAttributes === true || change.setAttributes === "height") {
+            node.set("height", change.dimensions.height);
+          }
+        }
+        if (change.dimensions !== void 0) {
+          patch.measured = change.dimensions;
+        }
+        if (change.resizing !== void 0) {
+          patch.resizing = change.resizing;
+        }
+        updateLocalState(nextLocal, change.id, patch);
+        hasLocalChanged = true;
+        break;
+      }
+      case "select":
+        updateLocalState(nextLocal, change.id, {
+          ...nextLocal.get(change.id),
+          selected: change.selected
+        });
+        hasLocalChanged = true;
+        break;
+    }
+  }
+  return hasLocalChanged;
+}
+function applyEdgeChanges(args) {
+  const { changes, edges, nextLocal, edgeCache } = args;
+  let hasLocalChanged = false;
+  for (const change of changes) {
+    switch (change.type) {
+      case "add":
+      case "replace":
+        edges.set(change.item.id, edgeToStorage(change.item));
+        if (updateLocalState(
+          nextLocal,
+          change.item.id,
+          pick(change.item, EDGE_LOCAL_KEYS)
+        )) {
+          hasLocalChanged = true;
+        }
+        break;
+      case "remove":
+        edges.delete(change.id);
+        edgeCache.delete(change.id);
+        nextLocal.delete(change.id);
+        hasLocalChanged = true;
+        break;
+      case "select":
+        updateLocalState(nextLocal, change.id, {
+          ...nextLocal.get(change.id),
+          selected: change.selected
+        });
+        hasLocalChanged = true;
+        break;
+    }
+  }
+  return hasLocalChanged;
+}
+function createLiveblocksFlow(nodes = [], edges = []) {
+  return new core.LiveObject({
+    nodes: new core.LiveMap(nodes.map((node) => [node.id, nodeToStorage(node)])),
+    edges: new core.LiveMap(edges.map((edge) => [edge.id, edgeToStorage(edge)]))
+  });
+}
+function useLiveblocksFlow(options = {}) {
+  const isStorageLoaded = react.useStorage(() => true) ?? false;
+  const frozenOptions = _private.useInitial({
+    initial: options.initial,
+    storageKey: options.storageKey ?? DEFAULT_STORAGE_KEY
+  });
+  const nodeCache = react$1.useRef(/* @__PURE__ */ new Map());
+  const edgeCache = react$1.useRef(/* @__PURE__ */ new Map());
+  const [localNodes\u03A3] = react$1.useState(
+    () => new core.Signal(/* @__PURE__ */ new Map())
+  );
+  const [localEdges\u03A3] = react$1.useState(
+    () => new core.Signal(/* @__PURE__ */ new Map())
+  );
+  const localNodes = _private.useSignal(localNodes\u03A3);
+  const localEdges = _private.useSignal(localEdges\u03A3);
+  const remoteNodesMap = react.useStorage((storage) => {
+    const flow = storage[frozenOptions.storageKey];
+    return flow?.nodes ?? null;
+  });
+  const remoteEdgesMap = react.useStorage((storage) => {
+    const flow = storage[frozenOptions.storageKey];
+    return flow?.edges ?? null;
+  });
+  const nodes = react$1.useMemo(
+    () => remoteNodesMap ? merge(nodeCache.current, remoteNodesMap, localNodes) : null,
+    [remoteNodesMap, localNodes]
+  );
+  const edges = react$1.useMemo(
+    () => remoteEdgesMap ? merge(edgeCache.current, remoteEdgesMap, localEdges) : null,
+    [remoteEdgesMap, localEdges]
+  );
+  const onNodesChange = react.useMutation(
+    ({ storage }, changes) => {
+      const flow = storage.get(frozenOptions.storageKey);
+      if (!flow) {
+        return;
+      }
+      const nextLocal = new Map(localNodes\u03A3.get());
+      const hasLocalChanged = applyNodeChanges({
+        changes,
+        nodes: flow.get("nodes"),
+        nextLocal,
+        nodeCache: nodeCache.current
+      });
+      if (hasLocalChanged) {
+        localNodes\u03A3.set(nextLocal);
+      }
+    },
+    []
+  );
+  const onEdgesChange = react.useMutation(
+    ({ storage }, changes) => {
+      const flow = storage.get(frozenOptions.storageKey);
+      if (!flow) {
+        return;
+      }
+      const nextLocal = new Map(localEdges\u03A3.get());
+      const hasLocalChanged = applyEdgeChanges({
+        changes,
+        edges: flow.get("edges"),
+        nextLocal,
+        edgeCache: edgeCache.current
+      });
+      if (hasLocalChanged) {
+        localEdges\u03A3.set(nextLocal);
+      }
+    },
+    []
+  );
+  const onConnect = react.useMutation(({ storage }, connection) => {
+    const flow = storage.get(frozenOptions.storageKey);
+    if (!flow) {
+      return;
+    }
+    const edges2 = flow.get("edges");
+    for (const edge of edges2.values()) {
+      if (edge.get("source") === connection.source && edge.get("target") === connection.target && (edge.get("sourceHandle") ?? null) === (connection.sourceHandle ?? null) && (edge.get("targetHandle") ?? null) === (connection.targetHandle ?? null)) {
+        return;
+      }
+    }
+    const [newEdge] = react$2.addEdge(connection, []);
+    if (!newEdge) {
+      return;
+    }
+    edges2.set(newEdge.id, edgeToStorage(newEdge));
+  }, []);
+  const setInitialStorage = react.useMutation(({ storage }) => {
+    if (storage.get(frozenOptions.storageKey) !== void 0) {
+      return;
+    }
+    const { nodes: initialNodes = [], edges: initialEdges = [] } = frozenOptions.initial ?? {};
+    storage.set(
+      frozenOptions.storageKey,
+      createLiveblocksFlow(initialNodes, initialEdges)
+    );
+  }, []);
+  react$1.useEffect(() => {
+    if (isStorageLoaded) {
+      setInitialStorage();
+    }
+  }, [isStorageLoaded, setInitialStorage]);
+  return {
+    nodes,
+    edges,
+    isLoading: !isStorageLoaded,
+    onNodesChange,
+    onEdgesChange,
+    onConnect
+  };
+}
+function useLiveblocksFlowSuspense(options = {}) {
+  const result = useLiveblocksFlow(options);
+  _private.useSuspendUntilStorageReady();
+  return {
+    ...result,
+    nodes: result.nodes ?? EMPTY_ARRAY,
+    edges: result.edges ?? EMPTY_ARRAY,
+    isLoading: false
+  };
+}
+
+exports.createLiveblocksFlow = createLiveblocksFlow;
+exports.useLiveblocksFlow = useLiveblocksFlow;
+exports.useLiveblocksFlowSuspense = useLiveblocksFlowSuspense;
+//# sourceMappingURL=flow.cjs.map