@dschz/solid-flow 0.3.0-next.5 → 1.0.0-next.7

package/README.md

@@ -15,12 +15,12 @@ A SolidJS port of [React Flow](https://reactflow.dev/) and [Svelte Flow](https:/
 
 ## Version pairing
 
-| Solid Flow | SolidJS         | Status              |
-| ---------- | --------------- | ------------------- |
-| `0.3.x`    | `solid-js` 2.x  | Active development  |
-| `0.2.x`    | `solid-js` 1.9+ | Maintenance (fixes) |
+| Solid Flow | SolidJS         | Status                          |
+| ---------- | --------------- | ------------------------------- |
+| `1.x`      | `solid-js` 2.x  | Active development (`next` tag) |
+| `0.2.x`    | `solid-js` 1.9+ | Maintenance (fixes)             |
 
-The 0.3 line is built for SolidJS 2.0 and its deferred, fine-grained reactive graph. Keep `solid-js` and `@solidjs/web` on matching 2.0 versions — mixing them breaks at import time. Upgrading from 0.2.x? See [Migrating from 0.2.x](#migrating-from-02x).
+The 1.x line is built for SolidJS 2.0 and its deferred, fine-grained reactive graph; the stable 1.0.0 ships alongside SolidJS 2.0 stable (until then, install with the `next` tag). Keep `solid-js` and `@solidjs/web` on matching 2.0 versions — mixing them breaks at import time. Upgrading from 0.2.x? See [Migrating from 0.2.x](#migrating-from-02x).
 
 ## Key Features
 
@@ -135,11 +135,11 @@ const [nodes] = createNodeStore<typeof nodeTypes>([
 The same guided unions are exported as standalone types, so plain arrays, props, and vanilla stores get identical narrowing:
 
 ```tsx
-import type { EdgesFor, NodesFor } from "@dschz/solid-flow";
+import type { SolidFlowEdge, SolidFlowNode } from "@dschz/solid-flow";
 
 const initialNodes = [
   { id: "a", type: "counter", data: { count: 1 }, position: { x: 0, y: 0 } },
-] satisfies NodesFor<typeof nodeTypes>[];
+] satisfies SolidFlowNode<typeof nodeTypes>[];
 ```
 
 ## Who owns the data
@@ -150,6 +150,34 @@ The stores you pass as `nodes` / `edges` props are **controlled** — a delibera
 - **The flow writes runtime fields onto your rows.** Dragging updates `position`, selection updates `selected`, measurement fills `measured` — on the same objects you provided, so reading your store is always live.
 - **Imperative commands don't write membership back.** `commands.addNodes(...)` and friends update the flow, not your store. To keep an element across a store replacement, adopt it — like the `onConnect` handler in the Quick Start pushing the new connection into the edge store.
 
+**Prefer letting the flow own the data?** Pass `defaultNodes` / `defaultEdges` instead of `nodes` / `edges` for an **uncontrolled** flow (React Flow parity): the arrays seed the flow once (later values are ignored), and membership belongs to the flow — commands like `addNodes` and completed connections persist with no adoption step. Read live state through `useSolidFlow()`'s `flow.nodes` / `flow.edges`. The two axes are independent, so you can control edges while leaving nodes uncontrolled (or vice versa); supplying both props on one axis is a mistake (`nodes` wins, with a dev warning).
+
+## Loading your graph from an API
+
+Both stores accept an async seed — pass `async () => data` instead of an array. No memo, no lifecycle juggling: reads are not-ready until the data lands (SolidJS 2.0's async model), so a `<Loading>` boundary holds the flow and swaps in the graph when it arrives. Afterwards the stores behave exactly like their array-seeded counterparts — drafts, adoption, wholesale replacement.
+
+```tsx
+import { Loading } from "@solidjs/web";
+
+const fetchNodes = async () => (await fetch("/api/graph/nodes")).json();
+const fetchEdges = async () => (await fetch("/api/graph/edges")).json();
+
+export const Flow = () => {
+  const [nodes] = createNodeStore(fetchNodes);
+  const [edges, setEdges] = createEdgeStore(fetchEdges);
+
+  return (
+    <Loading fallback={<div>Loading graph…</div>}>
+      <SolidFlow nodes={nodes} edges={edges} fitView>
+        <Background variant="dots" />
+      </SolidFlow>
+    </Loading>
+  );
+};
+```
+
+Where the boundary goes is your design decision (SolidJS 2.0: "fetch high, block low") — one `<Loading>` can cover the flow together with its toolbar and sidebar, or sit tight around the flow alone. Without any boundary the flow renders immediately (canvas, controls, background) and the graph pops in when the data arrives — there is deliberately no `fallback` prop. See the AsyncData playground example for the full version (including connection adoption after the async seed).
+
 ## The flow API
 
 `useSolidFlow()` returns `{ flow, commands }` (with `commands` also spread at the top level for React/Svelte Flow familiarity). Both are stable identities — destructuring is safe.
@@ -263,6 +291,7 @@ Reconnection lifecycle callbacks (`onReconnectStart`, `onReconnect`, `onReconnec
 Two complementary culling tiers keep large graphs fast:
 
 - **CSS culling (always on):** Elements outside the (overscanned) viewport are hidden with `visibility: hidden` + `pointer-events: none`. Everything stays mounted, so component state, measurement, and accessibility semantics are untouched — this tier has no userland contract at all.
+- **Gesture-time spatial queries:** Dragging a connection runs upstream's closest-handle search on every pointer move — a full node scan in stock React/Svelte Flow. Solid Flow snapshots node geometry into a spatial grid at gesture start (geometry is frozen mid-gesture) and answers from the pointer's neighborhood: at 10,000 nodes a connection drag went from ~422ms per move (unusable) to ~5ms median. Box selection and `getIntersectingNodes` use the same machinery.
 - **`onlyRenderVisibleElements` (opt-in):** Off-screen elements are **unmounted entirely** and remount as the viewport reaches them. At 10,000 nodes this cuts the DOM ~16x, roughly halves memory, and makes node drags several times faster. Positions, selection, and cached measurements live in the flow's data graph — outside your components — so elements come back exactly as they left. Component-_local_ state does not survive unmounting: keep state you care about in `node.data`. Selected elements, unmeasured nodes, and the node holding focus are never unmounted — and an element whose content must keep running off-screen (media, timers, embeds) can opt out of culling entirely with `cullable: false` on the node or edge.
 
 The MiniMap always renders the full graph in either mode — it reads the data graph, not the DOM.
@@ -280,7 +309,7 @@ The MiniMap always renders the full graph in either mode — it reads the data g
 
 ## Migrating from 0.2.x
 
-The 0.3 line targets SolidJS 2.0, which changes how you write to stores, and reworks the read API. The gestures, components, plugins, and commands are otherwise the same.
+The 1.x line targets SolidJS 2.0, which changes how you write to stores, and reworks the read API. The gestures, components, plugins, and commands are otherwise the same.
 
 **1. Upgrade the peer dependencies.** `solid-js` and `@solidjs/web` move to matching 2.0 versions.
 
@@ -291,7 +320,7 @@ The 0.3 line targets SolidJS 2.0, which changes how you write to stores, and rew
 setNodes(0, "position", "x", (x) => x + 20);
 setEdges((edge) => edge.id === "e1", "animated", true);
 
-// 0.3.x (SolidJS 2.0) — draft callback
+// 1.x (SolidJS 2.0) — draft callback
 setNodes((nodes) => {
   nodes[0]!.position.x += 20;
 });
@@ -307,7 +336,7 @@ setNodes(() => nextNodes);
 **3. `useSolidFlow` reads moved to the reactive `flow` struct.** The flat getters (`getNodes()`, `getEdges()`, `getNode(id)`, `getEdge(id)`, `getInternalNode(id)`, `getViewport()`, `getZoom()`) are removed:
 
 ```tsx
-// 0.2.x                          // 0.3.x
+// 0.2.x                          // 1.x
 solidFlow.getNodes();
 flow.nodes;
 solidFlow.getViewport();
@@ -322,9 +351,9 @@ useInternalNode(() => "a");
 
 `flow.*` reads are reactive — using them in JSX or a tracked scope subscribes. Commands (`fitView`, `setViewport`, `updateNode`, `deleteElements`, ...) are unchanged and now also available namespaced under `commands`.
 
-**4. New connections are no longer written into your edge store.** In 0.2.x the flow inserted the connected edge into your store before `onConnect` fired. Under 0.3's ownership contract your store owns membership: adopt the connection yourself (see the Quick Start's `onConnect`). Unadopted connections still render, but won't survive a wholesale store replacement.
+**4. New connections are no longer written into your edge store.** In 0.2.x the flow inserted the connected edge into your store before `onConnect` fired. Under the 1.x ownership contract your store owns membership: adopt the connection yourself (see the Quick Start's `onConnect`). Unadopted connections still render, but won't survive a wholesale store replacement.
 
-**5. `onlyRenderVisibleElements` now does what it says.** In 0.2.x the prop was accepted but inert. In 0.3 it opts into unmount culling (off-screen elements are not mounted at all — see [Performance](#performance)), while the CSS culling tier is always on and needs no prop.
+**5. `onlyRenderVisibleElements` now does what it says.** In 0.2.x the prop was accepted but inert. In 1.x it opts into unmount culling (off-screen elements are not mounted at all — see [Performance](#performance)), while the CSS culling tier is always on and needs no prop.
 
 **6. Smaller signature changes.** `useNodes()` / `useEdges()` return `readonly` arrays; `useHandleEdgeSelect` is removed (it was internal plumbing — select edges through `commands`).
 

package/dist/index/index.d.ts

@@ -368,10 +368,7 @@ type ConnectionLineProps<NodeType extends Node = Node> = {
 declare const ConnectionLine: <NodeType extends Node = Node>(props: ParentProps<Partial<ConnectionLineProps<NodeType>>>) => JSX.Element;
 //#endregion
 //#region src/components/container/EdgeRenderer.d.ts
-type EdgeRendererProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType> & {
-  readonly defaultEdgeOptions?: DefaultEdgeOptions;
-  readonly reconnectRadius: number;
-};
+type EdgeRendererProps<EdgeType extends Edge = Edge> = EdgeEvents<EdgeType>;
 /** Internal renderer iterating the edge id list into `EdgeWrapper`s. */
 declare const EdgeRenderer: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: EdgeRendererProps<EdgeType>) => JSX.Element;
 //#endregion
@@ -627,6 +624,22 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * ]);
    */
   readonly edges?: Store<EdgeType[]>;
+  /**
+   * Initial nodes for an UNCONTROLLED flow. When `nodes` is not supplied,
+   * the flow owns element state: this array seeds it once (later values
+   * are ignored), and membership belongs to the flow — commands like
+   * `addNodes`/`deleteElements` and completed connections write through
+   * and persist, with no adoption step. Mutually exclusive with `nodes`
+   * (which wins, with a dev warning). Mode is fixed at mount, per axis:
+   * nodes and edges can each be controlled or uncontrolled independently.
+   */
+  readonly defaultNodes?: readonly NodeType[];
+  /**
+   * Initial edges for an UNCONTROLLED flow — the edge-axis counterpart of
+   * `defaultNodes`: seeds once, flow owns membership, completed
+   * connections are kept automatically. Mutually exclusive with `edges`.
+   */
+  readonly defaultEdges?: readonly EdgeType[];
   /**
    * Custom node types to be available in a flow.
    * Solid Flow matches a node's type to a component in the nodeTypes object.
@@ -848,6 +861,12 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @default false
    */
   readonly panOnScroll?: boolean;
+  /**
+   * Controls how fast the viewport pans while scrolling.
+   * Only applies when `panOnScroll` is enabled.
+   * @default 0.5
+   */
+  readonly panOnScrollSpeed?: number;
   /**
    * This prop is used to limit the direction of panning when panOnScroll is enabled.
    * The "free" option allows panning in any direction.
@@ -903,6 +922,12 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @default true
    */
   readonly autoPanOnNodeDrag?: boolean;
+  /**
+   * The speed at which the viewport auto-pans while dragging a node or a
+   * connection toward the edge of the viewport.
+   * @default 15
+   */
+  readonly autoPanSpeed?: number;
   /**
    * Defaults to be applied to all new edges that are added to the flow.
    * Properties on a new edge will override these defaults if they exist.
@@ -919,6 +944,11 @@ type SolidFlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
    * @example 'system' | 'light' | 'dark'
    */
   readonly colorMode?: ColorMode$1;
+  /**
+   * Static message announced to screen readers via the flow's aria-live
+   * region (in addition to the built-in keyboard-interaction messages).
+   */
+  readonly ariaLiveMessage?: string;
   /** Fallback color mode for SSR if colorMode is set to 'system' */
   readonly colorModeSSR?: Omit<ColorMode$1, "system">;
   /** Class to be applied to the flow container */
@@ -1070,102 +1100,6 @@ declare const SolidFlow: <NodeType extends Node = Node, EdgeType extends Edge =
 /** Hoists flow state above `SolidFlow` so hooks work outside the component (multi-panel UIs). */
 declare const SolidFlowProvider: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ParentProps<SolidFlowProps<NodeType, EdgeType>>) => JSX.Element;
 //#endregion
-//#region src/core/createEdgeStore.d.ts
-type EdgeDataOf<T> = T extends ((props: EdgeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
-type AllEdgeTypes<TUserEdgeTypes extends EdgeTypes> = TUserEdgeTypes extends Record<string, never> ? BuiltInEdgeTypes : BuiltInEdgeTypes & TUserEdgeTypes;
-/**
- * The discriminated union of edge configurations for a renderer map: one
- * member per built-in and custom edge type, with `data` narrowed by the
- * `type` discriminant (the MAP KEY — what the renderer actually matches).
- * Use it to carry `createEdgeStore`'s guided typing anywhere a plain array
- * or vanilla store is typed:
- *
- * ```typescript
- * const initialEdges = [
- *   { id: "e1", source: "1", target: "2", type: "labeled", data: { label: "hi" } },
- * ] satisfies EdgesFor<typeof edgeTypes>[];
- * ```
- */
-type EdgesFor<TUserEdgeTypes extends EdgeTypes = Record<string, never>> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<EdgeDataOf<AllEdgeTypes<TUserEdgeTypes>[K]>, K & string>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
-type EdgesInput<TUserEdgeTypes extends EdgeTypes> = EdgesFor<TUserEdgeTypes>;
-/**
- * Creates a type-safe reactive store of edges for use in Solid Flow.
- *
- * This utility function provides full type safety and autocomplete for creating edges,
- * combining both built-in edge types (default, straight, step, smoothstep) and custom user-defined
- * edge types. When a specific edge type is selected, TypeScript automatically infers the
- * required data structure and validates the edge configuration.
- *
- * @template TUserEdgeTypes - The user's custom edge types map (optional)
- * @param edges - Array of edge configurations to create
- * @returns A SolidJS store tuple [store, setStore] with properly typed Edge objects
- *
- * @example
- * ```typescript
- * // Using only built-in edge types (no generic parameter needed)
- * const [builtInEdges, setBuiltInEdges] = createEdgeStore([
- *   {
- *     id: "1",
- *     source: "1",
- *     target: "2",
- *     type: "default",
- *     data: { label: "Start" }
- *   },
- *   {
- *     id: "2",
- *     source: "2",
- *     target: "3",
- *     type: "default",
- *     data: { label: "Process" }
- *   }
- * ]);
- * ```
- *
- * @example
- * ```typescript
- * // Using custom edge types (requires generic parameter)
- * const customEdgeTypes = {
- *   textEdge: (props: EdgeProps<{ content: string }, "textEdge">) =>
- *     <div>{props.data.content}</div>,
- *   numberEdge: (props: EdgeProps<{ value: number }, "numberEdge">) =>
- *     <div>{props.data.value}</div>
- * } satisfies EdgeTypes;
- *
- * const [mixedEdges, setMixedEdges] = createEdgeStore<typeof customEdgeTypes>([
- *   {
- *     id: "1",
- *     source: "1",
- *     target: "2",
- *     type: "default",        // Built-in type
- *     data: { label: "Input" }
- *   },
- *   {
- *     id: "2",
- *     source: "2",
- *     target: "3",
- *     type: "textEdge",     // Custom type - gets autocomplete
- *     data: { content: "Custom text edge" }  // Type-safe data
- *   },
- *   {
- *     id: "3",
- *     source: "3",
- *     target: "4",
- *     type: "numberEdge",   // Another custom type
- *     data: { value: 42 },  // Type-safe data
- *     style: { "background-color": "lightblue" }  // All Edge properties available
- *   }
- * ]);
- * ```
- *
- * @remarks
- * - Provides autocomplete for the `type` field with all available node types
- * - Validates `data` structure based on the selected node type
- * - Supports all Node properties (style, draggable, hidden, etc.)
- * - Works seamlessly with both built-in and custom node types
- * - Type errors prevent invalid type names or incorrect data structures
- */
-declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: NoInfer<EdgesInput<TUserEdgeTypes>>[]) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
-//#endregion
 //#region src/core/projections/connections.d.ts
 /**
  * Lookup keys for the connection index. Each edge is registered under six
@@ -1319,7 +1253,109 @@ type FlowCommands<NodeType extends Node = Node, EdgeType extends Edge = Edge> =
   };
 };
 //#endregion
-//#region src/core/createNodeStore.d.ts
+//#region src/core/stores/createEdgeStore.d.ts
+type EdgeDataOf<T> = T extends ((props: EdgeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
+type AllEdgeTypes<TUserEdgeTypes extends EdgeTypes> = TUserEdgeTypes extends Record<string, never> ? BuiltInEdgeTypes : BuiltInEdgeTypes & TUserEdgeTypes;
+/**
+ * The discriminated union of edge configurations for a renderer map: one
+ * member per built-in and custom edge type, with `data` narrowed by the
+ * `type` discriminant (the MAP KEY — what the renderer actually matches).
+ * Use it to carry `createEdgeStore`'s guided typing anywhere a plain array
+ * or vanilla store is typed:
+ *
+ * ```typescript
+ * const initialEdges = [
+ *   { id: "e1", source: "1", target: "2", type: "labeled", data: { label: "hi" } },
+ * ] satisfies SolidFlowEdge<typeof edgeTypes>[];
+ * ```
+ */
+type SolidFlowEdge<TUserEdgeTypes extends EdgeTypes = Record<string, never>> = { [K in keyof AllEdgeTypes<TUserEdgeTypes>]: Edge<EdgeDataOf<AllEdgeTypes<TUserEdgeTypes>[K]>, K & string>; }[keyof AllEdgeTypes<TUserEdgeTypes>];
+type EdgesInput<TUserEdgeTypes extends EdgeTypes> = SolidFlowEdge<TUserEdgeTypes>;
+/**
+ * Creates a type-safe reactive store of edges for use in Solid Flow.
+ *
+ * This utility function provides full type safety and autocomplete for creating edges,
+ * combining both built-in edge types (default, straight, step, smoothstep) and custom user-defined
+ * edge types. When a specific edge type is selected, TypeScript automatically infers the
+ * required data structure and validates the edge configuration.
+ *
+ * @template TUserEdgeTypes - The user's custom edge types map (optional)
+ * @param edges - Array of edge configurations to create
+ * @returns A SolidJS store tuple [store, setStore] with properly typed Edge objects
+ *
+ * @example
+ * ```typescript
+ * // Using only built-in edge types (no generic parameter needed)
+ * const [builtInEdges, setBuiltInEdges] = createEdgeStore([
+ *   {
+ *     id: "1",
+ *     source: "1",
+ *     target: "2",
+ *     type: "default",
+ *     data: { label: "Start" }
+ *   },
+ *   {
+ *     id: "2",
+ *     source: "2",
+ *     target: "3",
+ *     type: "default",
+ *     data: { label: "Process" }
+ *   }
+ * ]);
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using custom edge types (requires generic parameter)
+ * const customEdgeTypes = {
+ *   textEdge: (props: EdgeProps<{ content: string }, "textEdge">) =>
+ *     <div>{props.data.content}</div>,
+ *   numberEdge: (props: EdgeProps<{ value: number }, "numberEdge">) =>
+ *     <div>{props.data.value}</div>
+ * } satisfies EdgeTypes;
+ *
+ * const [mixedEdges, setMixedEdges] = createEdgeStore<typeof customEdgeTypes>([
+ *   {
+ *     id: "1",
+ *     source: "1",
+ *     target: "2",
+ *     type: "default",        // Built-in type
+ *     data: { label: "Input" }
+ *   },
+ *   {
+ *     id: "2",
+ *     source: "2",
+ *     target: "3",
+ *     type: "textEdge",     // Custom type - gets autocomplete
+ *     data: { content: "Custom text edge" }  // Type-safe data
+ *   },
+ *   {
+ *     id: "3",
+ *     source: "3",
+ *     target: "4",
+ *     type: "numberEdge",   // Another custom type
+ *     data: { value: 42 },  // Type-safe data
+ *     style: { "background-color": "lightblue" }  // All Edge properties available
+ *   }
+ * ]);
+ * ```
+ *
+ * @remarks
+ * - Provides autocomplete for the `type` field with all available node types
+ * - Validates `data` structure based on the selected node type
+ * - Supports all Node properties (style, draggable, hidden, etc.)
+ * - Works seamlessly with both built-in and custom node types
+ * - Type errors prevent invalid type names or incorrect data structures
+ */
+/**
+ * Also accepts an async seed ("Fetch High"): pass `async () => edges`
+ * instead of an array. Reads throw `NotReadyError` until the first value
+ * (cover the flow with `<Loading fallback>`); afterwards the store is an
+ * ordinary writable store. See {@link createNodeStore} for details.
+ */
+declare const createEdgeStore: <TUserEdgeTypes extends EdgeTypes = Record<string, never>>(edges: NoInfer<EdgesInput<TUserEdgeTypes>>[] | (() => Promise<NoInfer<EdgesInput<TUserEdgeTypes>>[]>)) => readonly [Store<EdgesInput<TUserEdgeTypes>[]>, StoreSetter<EdgesInput<TUserEdgeTypes>[]>];
+//#endregion
+//#region src/core/stores/createNodeStore.d.ts
 type NodeDataOf<T> = T extends ((props: NodeProps<infer TData, infer _TType>) => unknown) ? TData : UnknownStruct;
 type AllNodeTypes<TUserNodeTypes extends NodeTypes> = TUserNodeTypes extends Record<string, never> ? BuiltInNodeTypes : BuiltInNodeTypes & TUserNodeTypes;
 /**
@@ -1332,11 +1368,11 @@ type AllNodeTypes<TUserNodeTypes extends NodeTypes> = TUserNodeTypes extends Rec
  * ```typescript
  * const initialNodes = [
  *   { id: "1", type: "custom", position: { x: 0, y: 0 }, data: { value: 1 } },
- * ] satisfies NodesFor<typeof nodeTypes>[];
+ * ] satisfies SolidFlowNode<typeof nodeTypes>[];
  * ```
  */
-type NodesFor<TUserNodeTypes extends NodeTypes = Record<string, never>> = { [K in keyof AllNodeTypes<TUserNodeTypes>]: Node<NodeDataOf<AllNodeTypes<TUserNodeTypes>[K]>, K & string>; }[keyof AllNodeTypes<TUserNodeTypes>];
-type NodesInput<TUserNodeTypes extends NodeTypes> = NodesFor<TUserNodeTypes>;
+type SolidFlowNode<TUserNodeTypes extends NodeTypes = Record<string, never>> = { [K in keyof AllNodeTypes<TUserNodeTypes>]: Node<NodeDataOf<AllNodeTypes<TUserNodeTypes>[K]>, K & string>; }[keyof AllNodeTypes<TUserNodeTypes>];
+type NodesInput<TUserNodeTypes extends NodeTypes> = SolidFlowNode<TUserNodeTypes>;
 /**
  * Creates a type-safe reactive store of nodes for use in Solid Flow.
  *
@@ -1408,7 +1444,16 @@ type NodesInput<TUserNodeTypes extends NodeTypes> = NodesFor<TUserNodeTypes>;
  * - Works seamlessly with both built-in and custom node types
  * - Type errors prevent invalid type names or incorrect data structures
  */
-declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NoInfer<NodesInput<TUserNodeTypes>>[]) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
+/**
+ * Also accepts an async seed ("Fetch High"): pass `async () => nodes` —
+ * typically an API call — instead of an array. No memo required: the
+ * function goes straight to `createStore`'s projection derive, so reads
+ * throw `NotReadyError` until the first value (cover the flow with
+ * `<Loading fallback>`), and the graph retries them when the data lands.
+ * Afterwards the store is an ordinary writable store — draft writes and
+ * wholesale replacement work exactly like the array form.
+ */
+declare const createNodeStore: <TUserNodeTypes extends NodeTypes = Record<string, never>>(nodes: NoInfer<NodesInput<TUserNodeTypes>>[] | (() => Promise<NoInfer<NodesInput<TUserNodeTypes>>[]>)) => readonly [Store<NodesInput<TUserNodeTypes>[]>, StoreSetter<NodesInput<TUserNodeTypes>[]>];
 //#endregion
 //#region src/hooks/useColorMode.d.ts
 /**
@@ -1929,4 +1974,4 @@ declare const getEdgeCenter: typeof getEdgeCenter$1;
 /** Returns the label center and offsets for a bezier edge. */
 declare const getBezierEdgeCenter: typeof getBezierEdgeCenter$1;
 //#endregion
-export { Align, AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, BezierPathOptions, Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, ColorMode, ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type EdgesFor, type FitBounds, FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, GetBezierPathParams, type GetMiniMapNodeAttribute, GetSmoothStepPathParams, GetStraightPathParams, GroupNode, Handle, type HandleConnection, InputNode, type InternalNode, IsValidConnection, KeyDefinition, KeyDefinitionObject, KeyModifier, Marker, MarkerDefinition, MarkerType, MiniMap, MiniMapNode, type MiniMapNodeProps, type MiniMapProps, type Node, type NodeConnection, NodeEvents, NodeGraph, type NodeOrigin, type NodeProps, NodeRenderer, NodeResizer, NodeSelection, NodeSelectionEvents, NodeToolbar, NodeToolbarProps, type NodeTypes, NodeWrapper, type NodesFor, OnBeforeDelete, OnBeforeEdgeConnect, OnBeforeReconnect, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, OnError, type OnMove, OnMoveEnd, OnMoveStart, OnReconnect, OnReconnectEnd, OnReconnectStart, OnResize, OnResizeEnd, OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, ProOptions, Rect, ResizeControl, ResizeControlVariant, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, Selection, SelectionMode, SelectionRect, type SetCenter, SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, SmoothStepPathOptions, SnapGrid, SolidFlow, type SolidFlowInitialProps, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, Transform, UseSolidFlowReturn, Viewport, ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, XYZPosition, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdgeId, useEdges, useInternalNode, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };
+export { Align, AriaLabelConfig, Background, type BackgroundProps, type BackgroundVariant, BaseEdge, BezierEdge, BezierEdgeInternal, type BezierEdgeProps, BezierPathOptions, Box, type BuiltInEdge, type BuiltInNode, type BuiltInNodeTypes, ColorMode, ColorModeClass, type Connection, ConnectionData, ConnectionLine, ConnectionLineComponentProps, ConnectionLineType, ConnectionMode, type ConnectionsRecord, ControlButton, type ControlLinePosition, type ControlPosition, Controls, type CoordinateExtent, type DefaultEdgeOptions, DefaultNode, DeleteEvents, Dimensions, type Edge, EdgeConnection, EdgeEvents, EdgeLabel, EdgeLabelRenderer, type EdgeMarker, EdgeMarkerType, type EdgeProps, EdgeReconnectAnchor, EdgeReconnectEvents, EdgeRenderer, EdgeToolbar, EdgeToolbarProps, type EdgeTypes, EdgeWrapper, type FitBounds, FitBoundsOptions, FitViewOptions, type FlowCommands, type FlowSelection, type FlowState, GetBezierPathParams, type GetMiniMapNodeAttribute, GetSmoothStepPathParams, GetStraightPathParams, GroupNode, Handle, type HandleConnection, InputNode, type InternalNode, IsValidConnection, KeyDefinition, KeyDefinitionObject, KeyModifier, Marker, MarkerDefinition, MarkerType, MiniMap, MiniMapNode, type MiniMapNodeProps, type MiniMapProps, type Node, type NodeConnection, NodeEvents, NodeGraph, type NodeOrigin, type NodeProps, NodeRenderer, NodeResizer, NodeSelection, NodeSelectionEvents, NodeToolbar, NodeToolbarProps, type NodeTypes, NodeWrapper, OnBeforeDelete, OnBeforeEdgeConnect, OnBeforeReconnect, OnConnect, OnConnectEnd, OnConnectStart, OnConnectStartParams, OnDelete, OnEdgeConnect, OnEdgeCreate, OnError, type OnMove, OnMoveEnd, OnMoveStart, OnReconnect, OnReconnectEnd, OnReconnectStart, OnResize, OnResizeEnd, OnResizeStart, OnSelectionChange, OnSelectionDrag, OutputNode, PanOnScrollMode, Pane, PaneEvents, Panel, type PanelPosition, Position, ProOptions, Rect, ResizeControl, ResizeControlVariant, ResizeDragEvent, ResizeParams, ResizeParamsWithDirection, Selection, SelectionMode, SelectionRect, type SetCenter, SetCenterOptions, type SetViewport, ShortcutModifier, ShortcutModifierDefinition, type ShouldResize, SmoothStepEdge, SmoothStepEdgeInternal, type SmoothStepEdgeProps, SmoothStepPathOptions, SnapGrid, SolidFlow, type SolidFlowEdge, type SolidFlowInitialProps, type SolidFlowNode, type SolidFlowProps, SolidFlowProvider, StepEdge, StepEdgeInternal, type StepEdgeProps, StraightEdge, StraightEdgeInternal, type StraightEdgeProps, Transform, UseSolidFlowReturn, Viewport, ViewportHelperFunctionOptions, ViewportPortal, type XYPosition, XYZPosition, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdgeId, useEdges, useInternalNode, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };