react-flow-expertlisted
Install: claude install-skill dyammarcano/react-flow-expert
# React Flow Expert
Authoritative, source-verified knowledge for `@xyflow/react` **12.10.2**, `@xyflow/svelte` **1.5.2**, and the shared `@xyflow/system` **0.0.76** core. This file is the always-loaded orientation; depth lives in `reference/` — open the specific doc rather than guessing.
## Core mental model
**Three packages, one engine.** `@xyflow/system` is a headless, framework-free core: pure geometry/coordinate functions plus D3-based imperative controllers (`XYPanZoom`, `XYDrag`, `XYHandle`, `XYResizer`, `XYMinimap`) and all shared TypeScript types. `@xyflow/react` (Zustand store) and `@xyflow/svelte` (Svelte 5 runes store) are thin bindings that hold reactive state, render a fixed DOM tree, and attach the system controllers to DOM nodes. Behavior is identical across frameworks because the algorithms live in `system`, not the wrapper. (`reactflow` v11 is the legacy React-11 package, out of scope.)
**The store + two representations.** Each `<ReactFlowProvider>` (auto-mounted by `<ReactFlow>` if absent) owns one store. It holds two parallel views of your graph: your plain **user array** (`{ id, position, data }`) and a normalized **internal lookup** (`nodeLookup`/`edgeLookup`/`parentLookup`/`connectionLookup` — Maps of `InternalNode`s with measured dimensions, `internals.positionAbsolute`, z-index, handle bounds). `adoptUserNodes` rebuilds the lookups from the user array on every `setNodes`; you never write the lookups directly. Components subscribe via narrow `useSto