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

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

@@ -4,10 +4,12 @@ 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.createLiveblocksFlow = flow.createLiveblocksFlow;
 exports.useLiveblocksFlow = flow.useLiveblocksFlow;
+exports.toLiveblocksEdge = helpers.toLiveblocksEdge;
+exports.toLiveblocksNode = helpers.toLiveblocksNode;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +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 { Cursors } from \"./cursors\";\nexport type { LiveblocksEdge, LiveblocksFlow, LiveblocksNode } from \"./flow\";\nexport { createLiveblocksFlow, useLiveblocksFlow } from \"./flow\";\n"],"names":["detectDupes","PKG_NAME","PKG_VERSION","PKG_FORMAT"],"mappings":";;;;;;;AAIAA,gBAAY,CAAAC,gBAAA,EAAUC,qBAAaC,kBAAU,CAAA;;;;;;"}
+{"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

@@ -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 };