add basic condfig and rendering

src/App.tsx

@@ -15,31 +15,38 @@ import ReactFlow, {
   EdgeChange,
 } from 'reactflow'
 import CustomNode from './components/CustomNode'
+import ConfigNode from './components/ConfigNode'
+import RenderingNode from './components/RenderingNode'
+import FlowContext from './lib/flowContext'
+
+// Generate short unique node ids when missing
+const genId = () => `node_${Math.random().toString(36).slice(2, 9)}`
 
 const initialNodes: Node[] = [
   {
-    id: '1',
-    position: { x: 250, y: 5 },
-    data: { label: 'Node A' },
-    type: 'custom',
+    id: 'config-1',
+    position: { x: 50, y: 50 },
+    data: { yaml: "# example:\nmessage: Hello from config" },
+    type: 'config',
   },
   {
-    id: '2',
-    position: { x: 100, y: 200 },
-    data: { label: 'Node B' },
-    type: 'custom',
+    id: 'render-1',
+    position: { x: 350, y: 80 },
+    data: {},
+    type: 'render',
   },
-]
+].map((n) => ({ ...n, id: n.id ?? genId() }))
 
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2' },
-]
+const initialEdges: Edge[] = [{ id: 'e-config-render', source: 'config-1', target: 'render-1' }]
 
 export default function App() {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
 
-  const nodeTypes = React.useMemo(() => ({ custom: CustomNode }), [])
+  const nodeTypes = React.useMemo(
+    () => ({ custom: CustomNode, config: ConfigNode, render: RenderingNode }),
+    []
+  )
 
   const onConnect = React.useCallback(
     (params: Connection) => setEdges((eds) => addEdge(params, eds)),
@@ -48,19 +55,21 @@ export default function App() {
 
   return (
     <div className="reactflow-wrapper">
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        nodeTypes={nodeTypes}
-        fitView
-      >
-        <Background />
-        <Controls />
-        <MiniMap />
-      </ReactFlow>
+      <FlowContext.Provider value={{ nodes, setNodes, edges, setEdges }}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          nodeTypes={nodeTypes}
+          fitView
+        >
+          <Background />
+          <Controls />
+          <MiniMap />
+        </ReactFlow>
+      </FlowContext.Provider>
     </div>
   )
 }