chore(docs): add state injection section to useVueFlow docs

Author: bcakmakoglu

docs/src/guide/composables.md

@@ -35,6 +35,7 @@ onInit((instance) => {
   }
 })
 </script>
+
 <template>
   <VueFlow :nodes="nodes" :edges="edges" />
 </template>
@@ -43,6 +44,30 @@ onInit((instance) => {
 `useVueFlow` exposes the whole internal state, including the nodes and edges.
 The values are reactive, meaning changing the values returned from `useVueFlow` will trigger changes in the graph.
 
+### State creation and injection
+
+The `useVueFlow` composable creates, on first call, a new instance of the `VueFlowStore` and injects it into the Vue component tree.
+This allows you to access the store from any child component using the `useVueFlow` composable.
+
+This also means that the *first call* of `useVueFlow` is crucial as it determines the state instance that will be used throughout the component tree.
+You can think of it as a sort of `<VueFlowProvider>` wrapper that is automatically injected into the component tree.
+
+You can read more about this in the [State section of the guide](/guide/vue-flow/state).
+
+#### Enforcing a specific state instance
+
+If necessary, you can enforce the use of a specific state instance by passing an `id` to the `useVueFlow` composable.
+
+```ts
+import { useVueFlow } from '@vue-flow/core'
+
+const { onInit } = useVueFlow({ id: 'my-flow-instance' })
+
+onInit((instance) => {
+  // `instance` is the same type as the return of `useVueFlow` (VueFlowStore)
+})
+```
+
 ## [useHandleConnections](/typedocs/functions/useHandleConnections)
 
 `useHandleConnections` provides you with an array of connections that are connected to the node you pass to it.

docs/src/guide/node.md

@@ -136,7 +136,7 @@ Sidebar or Toolbar.
 
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref([
   {
@@ -167,18 +167,20 @@ function onAddNodes() {
 </script>
 
 <template>
-  <VueFlow :nodes="initialNodes" />
-  
-  <button type="button" @click="onAddNode">Add a node</button>
-  <button type="button" @click="onAddNodes">Add multiple nodes</button>
+  <VueFlow :nodes="initialNodes">
+    <Panel>
+      <button type="button" @click="onAddNode">Add a node</button>
+      <button type="button" @click="onAddNodes">Add multiple nodes</button>
+    </Panel>
+  </VueFlow>
 </template>
 ```
 
 ```vue [<LogosTypescript />]
 <script setup lang="ts">
 import { ref } from 'vue'  
 import type { Node } from '@vue-flow/core'  
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref<Node[]>([
   {
@@ -213,10 +215,12 @@ function onAddNodes() {
 </script>
 
 <template>
-  <VueFlow :nodes="initialNodes" />
-  
-  <button type="button" @click="onAddNode()">Add a node</button>
-  <button type="button" @click="onAddNodes()">Add multiple nodes</button>
+  <VueFlow :nodes="initialNodes">
+    <Panel>
+      <button type="button" @click="onAddNode">Add a node</button>
+      <button type="button" @click="onAddNodes">Add multiple nodes</button>
+    </Panel>
+  </VueFlow>
 </template>
 ```
 

docs/src/guide/vue-flow/state.md

@@ -1,6 +1,6 @@
 # State
 
-##
+## Introduction
 
 Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject)
 to pass around it's state between components.