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

package/dist/index.d.ts

@@ -1,8 +1,25 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { LiveObject, DistributiveOmit, LsonObject, LiveMap, Resolve, JsonObject } from '@liveblocks/core';
-import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect } from '@xyflow/react';
+import { ComponentPropsWithoutRef, ComponentType, CSSProperties } from 'react';
+import { SyncConfig, LiveObject, LiveMap, SyncMode, Json, JsonScalar, LiveList, Lson, LsonObject, Resolve } from '@liveblocks/core';
+export { SyncConfig, SyncMode } from '@liveblocks/core';
+import { Node, Edge, BuiltInNode, BuiltInEdge, OnNodesChange, OnEdgesChange, OnConnect, OnDelete } from '@xyflow/react';
 
+interface CursorsCursorProps {
+    /**
+     * The user ID for this cursor.
+     */
+    userId: string;
+    /**
+     * The connection ID for this cursor.
+     */
+    connectionId: number;
+}
+interface CursorsComponents {
+    /**
+     * The component used to display each cursor.
+     */
+    Cursor: ComponentType<CursorsCursorProps>;
+}
 interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * The key used to store the cursors in users' Presence.
@@ -10,6 +27,10 @@ interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
      * Defaults to `"cursor"`.
      */
     presenceKey?: string;
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<CursorsComponents>;
 }
 /**
  * Displays other users' cursors inside a React Flow canvas and stores the
@@ -20,131 +41,214 @@ interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
  */
 declare const Cursors: react.ForwardRefExoticComponent<CursorsProps & react.RefAttributes<HTMLDivElement>>;
 
-declare const NODE_LOCAL_KEYS: ["selected", "dragging", "measured", "resizing"];
-declare const EDGE_LOCAL_KEYS: ["selected"];
-type SerializableNode = Node<JsonObject>;
-type SerializableEdge = Edge<JsonObject>;
+declare const NODE_BASE_CONFIG: {
+    readonly selected: false;
+    readonly dragging: false;
+    readonly measured: false;
+    readonly resizing: false;
+    readonly position: "atomic";
+    readonly sourcePosition: "atomic";
+    readonly targetPosition: "atomic";
+    readonly extent: "atomic";
+    readonly origin: "atomic";
+    readonly handles: "atomic";
+};
+declare const EDGE_BASE_CONFIG: {
+    readonly selected: false;
+    readonly markerStart: "atomic";
+    readonly markerEnd: "atomic";
+    readonly label: "atomic";
+};
+
+type InferNodeTypeLiterals<N> = N extends Node<any, infer T extends string> ? string extends T ? never : T : never;
+type NodeTypeLiterals<N> = (string & {}) | "*" | InferNodeTypeLiterals<N>;
+type InferEdgeTypeLiterals<E> = E extends Edge<any, infer T extends string> ? string extends T ? never : T : never;
+type EdgeTypeLiterals<E> = (string & {}) | "*" | InferEdgeTypeLiterals<E>;
+type NodeSyncConfig<N extends Node> = {
+    [key in NodeTypeLiterals<N>]?: SyncConfig;
+};
+type EdgeSyncConfig<E extends Edge> = {
+    [key in EdgeTypeLiterals<E>]?: SyncConfig;
+};
+type ToLsonProperty<V, S extends SyncMode> = undefined extends V ? ToLson<Exclude<V, undefined>, S> | undefined : ToLson<V, S>;
+type SyncedKeysFor<K, S extends SyncMode> = S extends SyncConfig ? K extends keyof S ? S[K] extends false ? never : K : K : K;
+type SyncModeFor<K, S extends SyncMode> = S extends SyncConfig ? K extends keyof S ? S[K] extends SyncMode ? S[K] : true : true : S;
+type ToLson<T, S extends SyncMode = true> = [S] extends [false] ? T : [S] extends ["atomic"] ? Json : T extends JsonScalar ? T : T extends Date | RegExp | Function | Promise<any> | WeakMap<any, any> | WeakSet<any> | Map<any, any> | Set<any> ? never : T extends ReadonlyArray<infer E> ? LiveList<ToLson<E, S> & Lson> : T extends CSSProperties ? LiveObject<CSSProperties & LsonObject> : T extends object ? LiveObject<{
+    [K in keyof T as SyncedKeysFor<K, S>]: ToLsonProperty<T[K], SyncModeFor<K, S>>;
+} & LsonObject> : never;
+type ToLiveElement<Base, BaseConfig, Concrete, Data> = LiveObject<{
+    [K in keyof Base]: K extends keyof BaseConfig ? BaseConfig[K & keyof BaseConfig] extends "atomic" | false ? Json : Concrete[K & keyof Concrete] : K extends "data" ? Data : ToLson<Base[K]>;
+} & LsonObject>;
 /**
  * The Liveblocks Storage representation of a React Flow `Node`.
- *
- * It doesn't include local-only properties.
- * The entire node and its `data` property are both stored as `LiveObject`s.
  */
-type LiveblocksNode<TNode extends SerializableNode = SerializableNode> = LiveObject<DistributiveOmit<TNode, (typeof NODE_LOCAL_KEYS)[number] | "data"> & {
-    data: LiveObject<TNode["data"]>;
-} & LsonObject>;
+type LiveblocksNode<N extends Node = BuiltInNode, S extends SyncConfig = SyncConfig> = ToLiveElement<Node, typeof NODE_BASE_CONFIG, N, ToLson<N["data"], S>>;
 /**
  * The Liveblocks Storage representation of a React Flow `Edge`.
- *
- * It doesn't include local-only properties.
- * The entire edge and its `data` property are both stored as `LiveObject`s.
  */
-type LiveblocksEdge<TEdge extends SerializableEdge = SerializableEdge> = LiveObject<DistributiveOmit<TEdge, (typeof EDGE_LOCAL_KEYS)[number] | "data"> & {
-    data?: LiveObject<NonNullable<TEdge["data"]>>;
-} & LsonObject>;
+type LiveblocksEdge<E extends Edge = BuiltInEdge, S extends SyncConfig = SyncConfig> = ToLiveElement<Edge, typeof EDGE_BASE_CONFIG, E, ToLson<E["data"], S>>;
 /**
  * The Liveblocks Storage representation of a React Flow diagram made of nodes and edges.
- *
- * Nodes and edges are stored as `LiveMap`s keyed by their IDs, enabling
- * fine-grained conflict-free updates from multiple clients simultaneously.
  */
-type LiveblocksFlow<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge> = LiveObject<{
-    nodes: LiveMap<string, LiveblocksNode<TNode>>;
-    edges: LiveMap<string, LiveblocksEdge<TEdge>>;
+type LiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge, NS extends SyncConfig = SyncConfig, ES extends SyncConfig = SyncConfig> = LiveObject<{
+    nodes: LiveMap<string, LiveblocksNode<N, NS>>;
+    edges: LiveMap<string, LiveblocksEdge<E, ES>>;
 }>;
-type UseLiveblocksFlowResult<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge> = Resolve<({
+
+type UseLiveblocksFlowResult<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge> = Resolve<({
     nodes: null;
     edges: null;
     isLoading: true;
 } | {
-    nodes: TNode[];
-    edges: TEdge[];
+    nodes: N[];
+    edges: E[];
     isLoading: false;
 }) & {
-    onNodesChange: OnNodesChange<TNode>;
-    onEdgesChange: OnEdgesChange<TEdge>;
+    onNodesChange: OnNodesChange<N>;
+    onEdgesChange: OnEdgesChange<E>;
     onConnect: OnConnect;
+    onDelete: OnDelete<N, E>;
 }>;
-type UseLiveblocksFlowOptions<TNode extends SerializableNode, TEdge extends SerializableEdge> = {
-    /**
-     * The initial React Flow nodes and edges.
-     *
-     * @example
-     * ```tsx
-     * const { ... } = useLiveblocksFlow({
-     *   initial: {
-     *     nodes: [
-     *       { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
-     *       { id: "2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
-     *     ],
-     *     edges: [
-     *       { id: "1-2", source: "1", target: "2" },
-     *     ],
-     *   },
-     * });
-     * ```
-     *
-     * This is equivalent to setting `initialStorage` on `RoomProvider`.
-     *
-     * @example
-     * ```tsx
-     * <RoomProvider
-     *   initialStorage={{
-     *     flow: createLiveblocksFlow([
-     *       { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
-     *       { id: "2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
-     *     ], [
-     *       { id: "1-2", source: "1", target: "2" },
-     *     ]),
-     *   }}
-     * />
-     * ```
-     */
-    initial?: {
-        nodes?: TNode[];
-        edges?: TEdge[];
+type LiveblocksFlowSuspenseResult<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge> = Extract<UseLiveblocksFlowResult<N, E>, {
+    isLoading: false;
+}>;
+type UseLiveblocksFlowOptions<N extends Node, E extends Edge> = {
+    nodes?: {
+        /**
+         * The initial React Flow nodes.
+         *
+         * @example
+         * ```tsx
+         * const { ... } = useLiveblocksFlow({
+         *   nodes: {
+         *     initial: [
+         *       { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
+         *       { id: "2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
+         *     ],
+         *   },
+         * });
+         * ```
+         */
+        initial?: N[];
+        /**
+         * Per-type sync configuration for node data keys.
+         *
+         * Use `"*"` as a fallback for all node types. Type-specific entries are
+         * deep-merged on top of `"*"`, with explicitly named keys taking
+         * precedence.
+         *
+         * @example
+         * ```tsx
+         * const { ... } = useLiveblocksFlow({
+         *   nodes: {
+         *     sync: {
+         *       // Fallback for all node types
+         *       "*": {
+         *         label: false,  // Don't sync node.data.label
+         *       },
+         *
+         *       // Override for node.type === 'myCustomNode'
+         *       // This will also not sync `myCustomNode.data.label` (because of the fallback above)
+         *       myCustomNode: {
+         *         showPreview: false,  // Don't sync myCustomNode.data.showPreview
+         *       },
+         *     },
+         *   },
+         * });
+         * ```
+         */
+        sync?: NodeSyncConfig<N>;
+    };
+    edges?: {
+        initial?: E[];
+        /**
+         * Per-type sync configuration for edge data keys.
+         *
+         * Use `"*"` as a fallback for all edge types. Type-specific entries are
+         * deep-merged on top of `"*"`, with explicitly named keys taking
+         * precedence.
+         *
+         * @example
+         * ```tsx
+         * const { ... } = useLiveblocksFlow({
+         *   edges: {
+         *     sync: {
+         *       // Fallback for all edge types
+         *       "*": {
+         *         hovered: false,  // Don't sync edge.data.hovered
+         *       },
+         *
+         *       // Override for edge.type === 'myCustomEdge'
+         *       // This will also not sync `myCustomEdge.data.hovered` (because of the fallback above)
+         *       myCustomEdge: {
+         *         isHighlighted: false,  // Don't sync myCustomEdge.data.isHighlighted
+         *       },
+         *     },
+         *   },
+         * });
+         * ```
+         */
+        sync?: EdgeSyncConfig<E>;
     };
     /**
      * The key used to store the React Flow diagram in Liveblocks Storage.
-     *
      * Defaults to `"flow"`.
-     *
-     * @example
-     * ```tsx
-     * const { ... } = useLiveblocksFlow({
-     *   storageKey: "myDiagram",
-     * });
-     * ```
      */
     storageKey?: string;
+    /**
+     * When true, suspends until Storage is ready (use a React `Suspense`
+     * boundary). Then `nodes` and `edges` are always arrays and `isLoading` is
+     * always false.
+     */
+    suspense?: boolean;
 };
-/**
- * Creates a Liveblocks Storage representation of a React Flow diagram from nodes and edges.
- *
- * @example
- * ```tsx
- * <RoomProvider
- *   initialStorage={{
- *     flow: createLiveblocksFlow(initialNodes, initialEdges),
- *   }}
- * />
- * ```
- */
-declare function createLiveblocksFlow<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge>(nodes?: TNode[], edges?: TEdge[]): LiveblocksFlow<TNode, TEdge>;
 /**
  * Returns a controlled React Flow state backed by Liveblocks Storage.
  *
  * @example
  * ```tsx
- * const { nodes, edges, onNodesChange, onEdgesChange, onConnect, isLoading } = useLiveblocksFlow();
+ * const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete, isLoading } = useLiveblocksFlow();
  *
  * if (isLoading) {
  *   return <div>Loading…</div>
  * }
  *
- * return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />;
+ * return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} onDelete={onDelete} />;
  * ```
+ * Pass `{ suspense: true }` to suspend until Storage is ready, `nodes` and `edges` will never be `null`.
+ *
+ * @example
+ * ```tsx
+ * const { nodes, edges, onNodesChange, onEdgesChange, onConnect, onDelete } =
+ *   useLiveblocksFlow({ suspense: true });
+ *
+ * return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} onDelete={onDelete} />;
+ * ```
+ */
+declare function useLiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge>(options?: UseLiveblocksFlowOptions<N, E> & {
+    suspense?: false;
+}): Resolve<UseLiveblocksFlowResult<N, E>>;
+declare function useLiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge>(options: UseLiveblocksFlowOptions<N, E> & {
+    suspense: true;
+}): Resolve<LiveblocksFlowSuspenseResult<N, E>>;
+
+/**
+ * @experimental
+ *
+ * Converts a React Flow `Node` into a Liveblocks Storage version.
+ * Keys marked `false` in config are set as local-only (not synced).
+ * Keys marked `"atomic"` are stored as plain Json (no deep wrapping).
+ * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).
+ */
+declare function toLiveblocksNode<N extends Node>(node: N, config?: SyncConfig): LiveblocksNode<N>;
+/**
+ * @experimental
+ *
+ * Converts a React Flow `Edge` into a Liveblocks Storage version.
+ * Keys marked `false` in config are set as local-only (not synced).
+ * Keys marked `"atomic"` are stored as plain Json (no deep wrapping).
+ * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).
  */
-declare function useLiveblocksFlow<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge>(options?: UseLiveblocksFlowOptions<TNode, TEdge>): Resolve<UseLiveblocksFlowResult<TNode, TEdge>>;
+declare function toLiveblocksEdge<E extends Edge>(edge: E, config?: SyncConfig): LiveblocksEdge<E>;
 
-export { Cursors, LiveblocksEdge, LiveblocksFlow, LiveblocksNode, createLiveblocksFlow, useLiveblocksFlow };
+export { Cursors, CursorsCursorProps, CursorsProps, EdgeSyncConfig, LiveblocksEdge, LiveblocksFlow, LiveblocksNode, NodeSyncConfig, toLiveblocksEdge, toLiveblocksNode, useLiveblocksFlow };

package/dist/index.js

@@ -1,7 +1,8 @@
 import { detectDupes } from '@liveblocks/core';
 import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.js';
 export { Cursors } from './cursors.js';
-export { createLiveblocksFlow, useLiveblocksFlow } from './flow.js';
+export { useLiveblocksFlow } from './flow.js';
+export { toLiveblocksEdge, toLiveblocksNode } from './helpers.js';
 
 detectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { Cursors } from \"./cursors\";\nexport type { LiveblocksEdge, LiveblocksFlow, LiveblocksNode } from \"./flow\";\nexport { createLiveblocksFlow, useLiveblocksFlow } from \"./flow\";\n"],"names":[],"mappings":";;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { CursorsCursorProps, CursorsProps } from \"./cursors\";\nexport { Cursors } from \"./cursors\";\nexport { useLiveblocksFlow } from \"./flow\";\nexport { toLiveblocksEdge, toLiveblocksNode } from \"./helpers\";\nexport type {\n  EdgeSyncConfig,\n  LiveblocksEdge,\n  LiveblocksFlow,\n  LiveblocksNode,\n  NodeSyncConfig,\n  SyncConfig,\n  SyncMode,\n} from \"./types\";\n"],"names":[],"mappings":";;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/version.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-flow";
-const PKG_VERSION = typeof "3.16.0-flow1" === "string" && "3.16.0-flow1";
+const PKG_VERSION = typeof "3.16.0-flow3" === "string" && "3.16.0-flow3";
 const PKG_FORMAT = typeof TSUP_FORMAT === "string" && TSUP_FORMAT;
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.js

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-flow";
-const PKG_VERSION = typeof "3.16.0-flow1" === "string" && "3.16.0-flow1";
+const PKG_VERSION = typeof "3.16.0-flow3" === "string" && "3.16.0-flow3";
 const PKG_FORMAT = typeof TSUP_FORMAT === "string" && TSUP_FORMAT;
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liveblocks/react-flow",
-  "version": "3.16.0-flow1",
-  "description": "An integration of React Flow to enable collaboration, comments, live cursors, and more with Liveblocks.",
+  "version": "3.16.0-flow3",
+  "description": "An integration of React Flow to enable collaboration and realtime cursors with Liveblocks.",
   "license": "Apache-2.0",
   "author": "Liveblocks Inc.",
   "type": "module",
@@ -22,17 +22,6 @@
     "./styles.css": {
       "types": "./styles.css.d.cts",
       "default": "./styles.css"
-    },
-    "./suspense": {
-      "import": {
-        "types": "./dist/suspense.d.ts",
-        "default": "./dist/suspense.js"
-      },
-      "require": {
-        "types": "./dist/suspense.d.cts",
-        "module": "./dist/suspense.js",
-        "default": "./dist/suspense.cjs"
-      }
     }
   },
   "files": [
@@ -41,7 +30,6 @@
     "**/*.css.d.cts",
     "**/*.css.d.ts",
     "**/*.css.map",
-    "suspense/**",
     "README.md"
   ],
   "scripts": {
@@ -55,10 +43,10 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@liveblocks/client": "3.16.0-flow1",
-    "@liveblocks/core": "3.16.0-flow1",
-    "@liveblocks/react": "3.16.0-flow1",
-    "@liveblocks/react-ui": "3.16.0-flow1"
+    "@liveblocks/client": "3.16.0-flow3",
+    "@liveblocks/core": "3.16.0-flow3",
+    "@liveblocks/react": "3.16.0-flow3",
+    "@liveblocks/react-ui": "3.16.0-flow3"
   },
   "peerDependencies": {
     "@xyflow/react": "^12",

package/dist/suspense.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var core = require('@liveblocks/core');
-var version = require('./version.cjs');
-var cursors = require('./cursors.cjs');
-var flow = require('./flow.cjs');
-
-core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
-
-exports.Cursors = cursors.Cursors;
-exports.createLiveblocksFlow = flow.createLiveblocksFlow;
-exports.useLiveblocksFlow = flow.useLiveblocksFlowSuspense;
-//# sourceMappingURL=suspense.cjs.map

package/dist/suspense.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"suspense.cjs","sources":["../src/suspense.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport { Cursors } from \"./cursors\";\nexport type { LiveblocksEdge, LiveblocksFlow, LiveblocksNode } from \"./flow\";\nexport {\n  createLiveblocksFlow,\n  useLiveblocksFlowSuspense as useLiveblocksFlow,\n} from \"./flow\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;"}

package/dist/suspense.d.cts

@@ -1,149 +0,0 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-import { LiveObject, DistributiveOmit, LsonObject, LiveMap, Resolve, JsonObject } from '@liveblocks/core';
-import { Node, Edge, OnNodesChange, OnEdgesChange, OnConnect } from '@xyflow/react';
-
-interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * The key used to store the cursors in users' Presence.
-     *
-     * Defaults to `"cursor"`.
-     */
-    presenceKey?: string;
-}
-/**
- * Displays other users' cursors inside a React Flow canvas and stores the
- * current user's cursor in Presence as `{ cursor: { x, y } }`.
- *
- * Cursor coordinates are kept in React Flow canvas space, so panning moves
- * them correctly while zooming only affects their position, not their size.
- */
-declare const Cursors: react.ForwardRefExoticComponent<CursorsProps & react.RefAttributes<HTMLDivElement>>;
-
-declare const NODE_LOCAL_KEYS: ["selected", "dragging", "measured", "resizing"];
-declare const EDGE_LOCAL_KEYS: ["selected"];
-type SerializableNode = Node<JsonObject>;
-type SerializableEdge = Edge<JsonObject>;
-/**
- * The Liveblocks Storage representation of a React Flow `Node`.
- *
- * It doesn't include local-only properties.
- * The entire node and its `data` property are both stored as `LiveObject`s.
- */
-type LiveblocksNode<TNode extends SerializableNode = SerializableNode> = LiveObject<DistributiveOmit<TNode, (typeof NODE_LOCAL_KEYS)[number] | "data"> & {
-    data: LiveObject<TNode["data"]>;
-} & LsonObject>;
-/**
- * The Liveblocks Storage representation of a React Flow `Edge`.
- *
- * It doesn't include local-only properties.
- * The entire edge and its `data` property are both stored as `LiveObject`s.
- */
-type LiveblocksEdge<TEdge extends SerializableEdge = SerializableEdge> = LiveObject<DistributiveOmit<TEdge, (typeof EDGE_LOCAL_KEYS)[number] | "data"> & {
-    data?: LiveObject<NonNullable<TEdge["data"]>>;
-} & LsonObject>;
-/**
- * The Liveblocks Storage representation of a React Flow diagram made of nodes and edges.
- *
- * Nodes and edges are stored as `LiveMap`s keyed by their IDs, enabling
- * fine-grained conflict-free updates from multiple clients simultaneously.
- */
-type LiveblocksFlow<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge> = LiveObject<{
-    nodes: LiveMap<string, LiveblocksNode<TNode>>;
-    edges: LiveMap<string, LiveblocksEdge<TEdge>>;
-}>;
-type UseLiveblocksFlowResult<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge> = Resolve<({
-    nodes: null;
-    edges: null;
-    isLoading: true;
-} | {
-    nodes: TNode[];
-    edges: TEdge[];
-    isLoading: false;
-}) & {
-    onNodesChange: OnNodesChange<TNode>;
-    onEdgesChange: OnEdgesChange<TEdge>;
-    onConnect: OnConnect;
-}>;
-type LiveblocksFlowSuspenseResult<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge> = Extract<UseLiveblocksFlowResult<TNode, TEdge>, {
-    isLoading: false;
-}>;
-type UseLiveblocksFlowOptions<TNode extends SerializableNode, TEdge extends SerializableEdge> = {
-    /**
-     * The initial React Flow nodes and edges.
-     *
-     * @example
-     * ```tsx
-     * const { ... } = useLiveblocksFlow({
-     *   initial: {
-     *     nodes: [
-     *       { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
-     *       { id: "2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
-     *     ],
-     *     edges: [
-     *       { id: "1-2", source: "1", target: "2" },
-     *     ],
-     *   },
-     * });
-     * ```
-     *
-     * This is equivalent to setting `initialStorage` on `RoomProvider`.
-     *
-     * @example
-     * ```tsx
-     * <RoomProvider
-     *   initialStorage={{
-     *     flow: createLiveblocksFlow([
-     *       { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
-     *       { id: "2", position: { x: 0, y: 100 }, data: { label: "Node 2" } },
-     *     ], [
-     *       { id: "1-2", source: "1", target: "2" },
-     *     ]),
-     *   }}
-     * />
-     * ```
-     */
-    initial?: {
-        nodes?: TNode[];
-        edges?: TEdge[];
-    };
-    /**
-     * The key used to store the React Flow diagram in Liveblocks Storage.
-     *
-     * Defaults to `"flow"`.
-     *
-     * @example
-     * ```tsx
-     * const { ... } = useLiveblocksFlow({
-     *   storageKey: "myDiagram",
-     * });
-     * ```
-     */
-    storageKey?: string;
-};
-/**
- * Creates a Liveblocks Storage representation of a React Flow diagram from nodes and edges.
- *
- * @example
- * ```tsx
- * <RoomProvider
- *   initialStorage={{
- *     flow: createLiveblocksFlow(initialNodes, initialEdges),
- *   }}
- * />
- * ```
- */
-declare function createLiveblocksFlow<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge>(nodes?: TNode[], edges?: TEdge[]): LiveblocksFlow<TNode, TEdge>;
-/**
- * Returns a controlled React Flow state backed by Liveblocks Storage.
- *
- * @example
- * ```tsx
- * const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useLiveblocksFlow();
- *
- * return <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />;
- * ```
- */
-declare function useLiveblocksFlowSuspense<TNode extends SerializableNode = SerializableNode, TEdge extends SerializableEdge = SerializableEdge>(options?: UseLiveblocksFlowOptions<TNode, TEdge>): Resolve<LiveblocksFlowSuspenseResult<TNode, TEdge>>;
-
-export { Cursors, LiveblocksEdge, LiveblocksFlow, LiveblocksNode, createLiveblocksFlow, useLiveblocksFlowSuspense as useLiveblocksFlow };