@liveblocks/react-flow 0.0.0 → 3.16.0-flow2

package/dist/helpers.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var constants = require('./constants.cjs');
+
+function toLiveblocksInternalNode(node, config) {
+  return core.LiveObject.from(
+    node,
+    config
+  );
+}
+function toLiveblocksInternalEdge(edge, config) {
+  return core.LiveObject.from(
+    edge,
+    config
+  );
+}
+function toLiveblocksNode(node, config) {
+  return toLiveblocksInternalNode(node, {
+    ...constants.NODE_BASE_CONFIG,
+    data: config
+  });
+}
+function toLiveblocksEdge(edge, config) {
+  return toLiveblocksInternalEdge(edge, {
+    ...constants.EDGE_BASE_CONFIG,
+    data: config
+  });
+}
+
+exports.toLiveblocksEdge = toLiveblocksEdge;
+exports.toLiveblocksInternalEdge = toLiveblocksInternalEdge;
+exports.toLiveblocksInternalNode = toLiveblocksInternalNode;
+exports.toLiveblocksNode = toLiveblocksNode;
+//# sourceMappingURL=helpers.cjs.map

package/dist/helpers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.cjs","sources":["../src/helpers.ts"],"sourcesContent":["import type { JsonObject, SyncConfig } from \"@liveblocks/core\";\nimport { LiveObject } from \"@liveblocks/core\";\nimport type { Edge, Node } from \"@xyflow/react\";\n\nimport { EDGE_BASE_CONFIG, NODE_BASE_CONFIG } from \"./constants\";\nimport type {\n  InternalLiveblocksEdge,\n  InternalLiveblocksNode,\n  LiveblocksEdge,\n  LiveblocksNode,\n} from \"./types\";\n\nexport function toLiveblocksInternalNode<N extends Node>(\n  node: N,\n  config: SyncConfig\n): InternalLiveblocksNode {\n  return LiveObject.from(\n    node as unknown as JsonObject,\n    config\n  ) as InternalLiveblocksNode;\n}\n\nexport function toLiveblocksInternalEdge<E extends Edge>(\n  edge: E,\n  config: SyncConfig\n): InternalLiveblocksEdge {\n  return LiveObject.from(\n    edge as unknown as JsonObject,\n    config\n  ) as InternalLiveblocksEdge;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Node` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksNode<N extends Node>(\n  node: N,\n  config?: SyncConfig\n): LiveblocksNode<N> {\n  return toLiveblocksInternalNode(node, {\n    ...NODE_BASE_CONFIG,\n    data: config,\n  }) as unknown as LiveblocksNode<N>;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Edge` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksEdge<E extends Edge>(\n  edge: E,\n  config?: SyncConfig\n): LiveblocksEdge<E> {\n  return toLiveblocksInternalEdge(edge, {\n    ...EDGE_BASE_CONFIG,\n    data: config,\n  }) as unknown as LiveblocksEdge<E>;\n}\n"],"names":["LiveObject","NODE_BASE_CONFIG","EDGE_BASE_CONFIG"],"mappings":";;;;;AAYgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAOA,eAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAOA,eAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAGC,0BAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAGC,0BAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH;;;;;;;"}

package/dist/helpers.js

@@ -0,0 +1,30 @@
+import { LiveObject } from '@liveblocks/core';
+import { NODE_BASE_CONFIG, EDGE_BASE_CONFIG } from './constants.js';
+
+function toLiveblocksInternalNode(node, config) {
+  return LiveObject.from(
+    node,
+    config
+  );
+}
+function toLiveblocksInternalEdge(edge, config) {
+  return LiveObject.from(
+    edge,
+    config
+  );
+}
+function toLiveblocksNode(node, config) {
+  return toLiveblocksInternalNode(node, {
+    ...NODE_BASE_CONFIG,
+    data: config
+  });
+}
+function toLiveblocksEdge(edge, config) {
+  return toLiveblocksInternalEdge(edge, {
+    ...EDGE_BASE_CONFIG,
+    data: config
+  });
+}
+
+export { toLiveblocksEdge, toLiveblocksInternalEdge, toLiveblocksInternalNode, toLiveblocksNode };
+//# sourceMappingURL=helpers.js.map

package/dist/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type { JsonObject, SyncConfig } from \"@liveblocks/core\";\nimport { LiveObject } from \"@liveblocks/core\";\nimport type { Edge, Node } from \"@xyflow/react\";\n\nimport { EDGE_BASE_CONFIG, NODE_BASE_CONFIG } from \"./constants\";\nimport type {\n  InternalLiveblocksEdge,\n  InternalLiveblocksNode,\n  LiveblocksEdge,\n  LiveblocksNode,\n} from \"./types\";\n\nexport function toLiveblocksInternalNode<N extends Node>(\n  node: N,\n  config: SyncConfig\n): InternalLiveblocksNode {\n  return LiveObject.from(\n    node as unknown as JsonObject,\n    config\n  ) as InternalLiveblocksNode;\n}\n\nexport function toLiveblocksInternalEdge<E extends Edge>(\n  edge: E,\n  config: SyncConfig\n): InternalLiveblocksEdge {\n  return LiveObject.from(\n    edge as unknown as JsonObject,\n    config\n  ) as InternalLiveblocksEdge;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Node` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksNode<N extends Node>(\n  node: N,\n  config?: SyncConfig\n): LiveblocksNode<N> {\n  return toLiveblocksInternalNode(node, {\n    ...NODE_BASE_CONFIG,\n    data: config,\n  }) as unknown as LiveblocksNode<N>;\n}\n\n/**\n * @experimental\n *\n * Converts a React Flow `Edge` into a Liveblocks Storage version.\n * Keys marked `false` in config are set as local-only (not synced).\n * Keys marked `\"atomic\"` are stored as plain Json (no deep wrapping).\n * All other keys are deep-liveified (objects→LiveObject, arrays→LiveList).\n */\nexport function toLiveblocksEdge<E extends Edge>(\n  edge: E,\n  config?: SyncConfig\n): LiveblocksEdge<E> {\n  return toLiveblocksInternalEdge(edge, {\n    ...EDGE_BASE_CONFIG,\n    data: config,\n  }) as unknown as LiveblocksEdge<E>;\n}\n"],"names":[],"mappings":";;;AAYgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAO,UAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAEgB,SAAA,wBAAA,CACd,MACA,MACwB,EAAA;AACxB,EAAA,OAAO,UAAW,CAAA,IAAA;AAAA,IAChB,IAAA;AAAA,IACA,MAAA;AAAA,GACF,CAAA;AACF,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAG,gBAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH,CAAA;AAUgB,SAAA,gBAAA,CACd,MACA,MACmB,EAAA;AACnB,EAAA,OAAO,yBAAyB,IAAM,EAAA;AAAA,IACpC,GAAG,gBAAA;AAAA,IACH,IAAM,EAAA,MAAA;AAAA,GACP,CAAA,CAAA;AACH;;;;"}

package/dist/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var core = require('@liveblocks/core');
+var version = require('./version.cjs');
+var cursors = require('./cursors.cjs');
+var flow = require('./flow.cjs');
+var helpers = require('./helpers.cjs');
+
+core.detectDupes(version.PKG_NAME, version.PKG_VERSION, version.PKG_FORMAT);
+
+exports.Cursors = cursors.Cursors;
+exports.useLiveblocksFlow = flow.useLiveblocksFlow;
+exports.toLiveblocksEdge = helpers.toLiveblocksEdge;
+exports.toLiveblocksNode = helpers.toLiveblocksNode;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;;"}

package/dist/index.d.cts

@@ -0,0 +1,217 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { SyncConfig, LiveObject, DistributiveOmit, LsonObject, LiveMap, 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.
+     *
+     * 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
+ * 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>>;
+
+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;
+};
+/**
+ * The Liveblocks Storage representation of a React Flow `Node`.
+ */
+type LiveblocksNode<N extends Node = BuiltInNode, _S extends NodeSyncConfig<N> = NodeSyncConfig<N>> = LiveObject<DistributiveOmit<N, "data"> & {
+    data: LsonObject;
+} & LsonObject>;
+/**
+ * The Liveblocks Storage representation of a React Flow `Edge`.
+ */
+type LiveblocksEdge<E extends Edge = BuiltInEdge, _S extends EdgeSyncConfig<E> = EdgeSyncConfig<E>> = LiveObject<DistributiveOmit<E, "data"> & {
+    data?: LsonObject;
+} & LsonObject>;
+/**
+ * The Liveblocks Storage representation of a React Flow diagram made of nodes and edges.
+ */
+type LiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge, NS extends NodeSyncConfig<N> = NodeSyncConfig<N>, ES extends EdgeSyncConfig<E> = EdgeSyncConfig<E>> = LiveObject<{
+    nodes: LiveMap<string, LiveblocksNode<N, NS>>;
+    edges: LiveMap<string, LiveblocksEdge<E, ES>>;
+}>;
+
+type UseLiveblocksFlowResult<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge> = Resolve<({
+    nodes: null;
+    edges: null;
+    isLoading: true;
+} | {
+    nodes: N[];
+    edges: E[];
+    isLoading: false;
+}) & {
+    onNodesChange: OnNodesChange<N>;
+    onEdgesChange: OnEdgesChange<E>;
+    onConnect: OnConnect;
+    onDelete: OnDelete<N, E>;
+}>;
+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 },
+         *
+         *       // Override for "custom" nodes
+         *       "custom": { color: false },
+         *     },
+         *   },
+         * });
+         * ```
+         */
+        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 node types
+         *       "*": { floating: false },
+         *     },
+         *   },
+         * });
+         * ```
+         */
+        sync?: EdgeSyncConfig<E>;
+    };
+    /**
+     * The key used to store the React Flow diagram in Liveblocks Storage.
+     * Defaults to `"flow"`.
+     */
+    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;
+};
+/**
+ * Returns a controlled React Flow state backed by Liveblocks Storage.
+ *
+ * @example
+ * ```tsx
+ * 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} 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 toLiveblocksEdge<E extends Edge>(edge: E, config?: SyncConfig): LiveblocksEdge<E>;
+
+export { Cursors, CursorsCursorProps, CursorsProps, EdgeSyncConfig, LiveblocksEdge, LiveblocksFlow, LiveblocksNode, NodeSyncConfig, toLiveblocksEdge, toLiveblocksNode, useLiveblocksFlow };

package/dist/index.d.ts

@@ -0,0 +1,217 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { SyncConfig, LiveObject, DistributiveOmit, LsonObject, LiveMap, 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.
+     *
+     * 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
+ * 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>>;
+
+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;
+};
+/**
+ * The Liveblocks Storage representation of a React Flow `Node`.
+ */
+type LiveblocksNode<N extends Node = BuiltInNode, _S extends NodeSyncConfig<N> = NodeSyncConfig<N>> = LiveObject<DistributiveOmit<N, "data"> & {
+    data: LsonObject;
+} & LsonObject>;
+/**
+ * The Liveblocks Storage representation of a React Flow `Edge`.
+ */
+type LiveblocksEdge<E extends Edge = BuiltInEdge, _S extends EdgeSyncConfig<E> = EdgeSyncConfig<E>> = LiveObject<DistributiveOmit<E, "data"> & {
+    data?: LsonObject;
+} & LsonObject>;
+/**
+ * The Liveblocks Storage representation of a React Flow diagram made of nodes and edges.
+ */
+type LiveblocksFlow<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge, NS extends NodeSyncConfig<N> = NodeSyncConfig<N>, ES extends EdgeSyncConfig<E> = EdgeSyncConfig<E>> = LiveObject<{
+    nodes: LiveMap<string, LiveblocksNode<N, NS>>;
+    edges: LiveMap<string, LiveblocksEdge<E, ES>>;
+}>;
+
+type UseLiveblocksFlowResult<N extends Node = BuiltInNode, E extends Edge = BuiltInEdge> = Resolve<({
+    nodes: null;
+    edges: null;
+    isLoading: true;
+} | {
+    nodes: N[];
+    edges: E[];
+    isLoading: false;
+}) & {
+    onNodesChange: OnNodesChange<N>;
+    onEdgesChange: OnEdgesChange<E>;
+    onConnect: OnConnect;
+    onDelete: OnDelete<N, E>;
+}>;
+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 },
+         *
+         *       // Override for "custom" nodes
+         *       "custom": { color: false },
+         *     },
+         *   },
+         * });
+         * ```
+         */
+        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 node types
+         *       "*": { floating: false },
+         *     },
+         *   },
+         * });
+         * ```
+         */
+        sync?: EdgeSyncConfig<E>;
+    };
+    /**
+     * The key used to store the React Flow diagram in Liveblocks Storage.
+     * Defaults to `"flow"`.
+     */
+    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;
+};
+/**
+ * Returns a controlled React Flow state backed by Liveblocks Storage.
+ *
+ * @example
+ * ```tsx
+ * 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} 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 toLiveblocksEdge<E extends Edge>(edge: E, config?: SyncConfig): LiveblocksEdge<E>;
+
+export { Cursors, CursorsCursorProps, CursorsProps, EdgeSyncConfig, LiveblocksEdge, LiveblocksFlow, LiveblocksNode, NodeSyncConfig, toLiveblocksEdge, toLiveblocksNode, useLiveblocksFlow };

package/dist/index.js

@@ -0,0 +1,8 @@
+import { detectDupes } from '@liveblocks/core';
+import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.js';
+export { Cursors } from './cursors.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

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

@@ -0,0 +1,10 @@
+'use strict';
+
+const PKG_NAME = "@liveblocks/react-flow";
+const PKG_VERSION = typeof "3.16.0-flow2" === "string" && "3.16.0-flow2";
+const PKG_FORMAT = typeof TSUP_FORMAT === "string" && TSUP_FORMAT;
+
+exports.PKG_FORMAT = PKG_FORMAT;
+exports.PKG_NAME = PKG_NAME;
+exports.PKG_VERSION = PKG_VERSION;
+//# sourceMappingURL=version.cjs.map

package/dist/version.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const TSUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-flow\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof TSUP_FORMAT === \"string\" && TSUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,yBAAA;AACX,MAAA,WAAA,GAAc,OAAO,cAAA,KAAgB,QAAY,IAAA,eAAA;AACjD,MAAA,UAAA,GAAa,OAAO,WAAA,KAAgB,QAAY,IAAA;;;;;;"}

package/dist/version.js

@@ -0,0 +1,6 @@
+const PKG_NAME = "@liveblocks/react-flow";
+const PKG_VERSION = typeof "3.16.0-flow2" === "string" && "3.16.0-flow2";
+const PKG_FORMAT = typeof TSUP_FORMAT === "string" && TSUP_FORMAT;
+
+export { PKG_FORMAT, PKG_NAME, PKG_VERSION };
+//# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const TSUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-flow\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof TSUP_FORMAT === \"string\" && TSUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,yBAAA;AACX,MAAA,WAAA,GAAc,OAAO,cAAA,KAAgB,QAAY,IAAA,eAAA;AACjD,MAAA,UAAA,GAAa,OAAO,WAAA,KAAgB,QAAY,IAAA;;;;"}