add basic condfig and rendering

package-lock.json

@@ -8,6 +8,9 @@
       "name": "reactflow-shadcn-app",
       "version": "0.1.0",
       "dependencies": {
+        "@monaco-editor/react": "^4.7.0",
+        "js-yaml": "^4.1.0",
+        "monaco-editor": "^0.55.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "reactflow": "^11.0.0",
@@ -1193,6 +1196,29 @@
         }
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.41.3",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.41.3.tgz",
@@ -1730,6 +1756,13 @@
       "integrity": "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==",
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/validate-npm-package-name": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz",
@@ -2703,6 +2736,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
@@ -3921,6 +3963,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4061,6 +4115,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5320,6 +5384,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",

package.json

@@ -8,19 +8,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
+    "js-yaml": "^4.1.0",
+    "monaco-editor": "^0.55.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "reactflow": "^11.0.0",
     "shadcn": "^3.8.5"
   },
   "devDependencies": {
-    "vite": "^4.0.0",
-    "@vitejs/plugin-react": "^3.0.0",
-    "tailwindcss": "^3.4.0",
-    "postcss": "^8.4.0",
-    "autoprefixer": "^10.4.0",
-    "typescript": "^5.0.0",
     "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^3.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
   }
 }

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',
+    id: 'config-1',
-    position: { x: 250, y: 5 },
+    position: { x: 50, y: 50 },
-    data: { label: 'Node A' },
+    data: { yaml: "# example:\nmessage: Hello from config" },
-    type: 'custom',
+    type: 'config',
   },
   {
-    id: '2',
+    id: 'render-1',
-    position: { x: 100, y: 200 },
+    position: { x: 350, y: 80 },
-    data: { label: 'Node B' },
+    data: {},
-    type: 'custom',
+    type: 'render',
   },
-]
+].map((n) => ({ ...n, id: n.id ?? genId() }))
 
-const initialEdges: Edge[] = [
+const initialEdges: Edge[] = [{ id: 'e-config-render', source: 'config-1', target: 'render-1' }]
-  { id: 'e1-2', source: '1', target: '2' },
-]
 
 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
+      <FlowContext.Provider value={{ nodes, setNodes, edges, setEdges }}>
-        nodes={nodes}
+        <ReactFlow
-        edges={edges}
+          nodes={nodes}
-        onNodesChange={onNodesChange}
+          edges={edges}
-        onEdgesChange={onEdgesChange}
+          onNodesChange={onNodesChange}
-        onConnect={onConnect}
+          onEdgesChange={onEdgesChange}
-        nodeTypes={nodeTypes}
+          onConnect={onConnect}
-        fitView
+          nodeTypes={nodeTypes}
-      >
+          fitView
-        <Background />
+        >
-        <Controls />
+          <Background />
-        <MiniMap />
+          <Controls />
-      </ReactFlow>
+          <MiniMap />
+        </ReactFlow>
+      </FlowContext.Provider>
     </div>
   )
 }

src/components/ConfigNode.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+import Editor, { loader } from '@monaco-editor/react'
+import FlowContext from '../lib/flowContext'
+
+// Ensure Monaco can load its web workers under Vite by pointing to a CDN
+// This avoids the editor hanging while trying to locate worker scripts locally.
+loader.config({ paths: { vs: 'https://unpkg.com/monaco-editor@latest/min/vs' } })
+
+type Props = {
+    id: string
+    data: any
+}
+
+export default function ConfigNode({ id, data }: Props) {
+    const [value, setValue] = React.useState<string>(data?.yaml ?? "# Enter YAML here\n")
+    const ctx = React.useContext(FlowContext)
+    const setNodes = ctx?.setNodes
+    const storedYaml = ctx?.nodes?.find((n: any) => n.id === id)?.data?.yaml ?? ''
+
+    React.useEffect(() => {
+        // keep node data in sync on mount
+        if (setNodes) {
+            setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, yaml: value } } : n)))
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    const onChange = React.useCallback(
+        (val?: string) => {
+            const v = val ?? ''
+            setValue(v)
+            // debug log to help trace updates
+            // eslint-disable-next-line no-console
+            console.debug('ConfigNode:onChange', id, v.substring(0, 60))
+            if (setNodes) {
+                setNodes((nds: any[]) => nds.map((n) => (n.id === id ? { ...n, data: { ...n.data, yaml: v } } : n)))
+            }
+        },
+        [id, setNodes]
+    )
+
+    return (
+        <div className="w-80 bg-white rounded shadow hover:shadow-md border border-gray-200">
+            <div className="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
+                <div className="text-sm font-medium">Configuration</div>
+                <div className="text-xs text-gray-400">YAML</div>
+            </div>
+
+            <div style={{ height: 180 }}>
+                <Editor
+                    height="100%"
+                    defaultLanguage="yaml"
+                    value={value}
+                    theme="vs-light"
+                    onChange={onChange}
+                    options={{ minimap: { enabled: false }, fontSize: 12 }}
+                />
+            </div>
+            <div className="px-3 py-2 text-xs text-gray-500 border-t border-gray-100">
+                Stored YAML: {storedYaml ? `${storedYaml.length} chars` : 'none'}
+            </div>
+
+            <Handle type="source" position={Position.Right} id="out" style={{ background: '#10B981', right: -6 }} />
+            <Handle type="target" position={Position.Left} id="in" style={{ background: '#F97316', left: -6 }} />
+        </div>
+    )
+}

src/components/CustomNode.tsx

@@ -3,23 +3,29 @@ import { Handle, Position } from 'reactflow'
 
 export default function CustomNode({ data }: any) {
   return (
-    <div className="p-3 rounded-lg bg-white shadow-md border border-gray-200 w-48">
+    <div className="p-3 rounded-lg bg-white shadow hover:shadow-md border border-gray-200 w-56">
-      <div className="text-sm font-medium mb-2">{data.label}</div>
+      <div className="flex items-center justify-between mb-2">
-      <div className="text-xs text-gray-500">Custom content</div>
+        <div className="text-sm font-semibold">{data.label}</div>
+        <div className="text-xs text-gray-400">ID: {data?.id ?? ''}</div>
+      </div>
 
-      <Handle
+      <div className="text-xs text-gray-500 mb-2">Custom content</div>
-        type="target"
-        position={Position.Left}
-        id="a"
-        style={{ background: '#10B981', width: 10, height: 10 }}
-      />
 
-      <Handle
+      <div className="flex justify-between mt-2">
-        type="source"
+        <Handle
-        position={Position.Right}
+          type="target"
-        id="b"
+          position={Position.Left}
-        style={{ background: '#3B82F6', width: 10, height: 10 }}
+          id="a"
-      />
+          style={{ background: '#F97316', width: 12, height: 12, borderRadius: 3 }}
+        />
+
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="b"
+          style={{ background: '#10B981', width: 12, height: 12, borderRadius: 3 }}
+        />
+      </div>
     </div>
   )
 }

src/components/RenderingNode.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+import yaml from 'js-yaml'
+import FlowContext from '../lib/flowContext'
+
+type Props = {
+    id: string
+    data: any
+}
+
+export default function RenderingNode({ id }: Props) {
+    const [output, setOutput] = React.useState<string>('')
+
+    const ctx = React.useContext(FlowContext)
+    const nodes = ctx?.nodes ?? []
+    const edges = ctx?.edges ?? []
+
+    const incomingEdges = edges.filter((e: any) => e.target === id)
+    const incomingIds = incomingEdges.map((e: any) => e.source).sort()
+    const srcId = incomingIds.length > 0 ? incomingIds[0] : null
+    const srcNode = nodes.find((n: any) => n.id === srcId)
+    const yamlText = srcNode && srcNode.type === 'config' ? srcNode?.data?.yaml ?? '' : ''
+
+    React.useEffect(() => {
+        // debug
+        // eslint-disable-next-line no-console
+        console.debug('RenderingNode:selection', { id, incomingIds, srcNode: srcNode ? { id: srcNode.id, type: srcNode.type, yaml: (srcNode.data?.yaml ?? '').slice(0, 60) } : null })
+
+        if (!yamlText) {
+            if (incomingIds.length === 0) {
+                setOutput(`No configuration connected (nodes: ${nodes.length}, edges: ${edges.length})`)
+                return
+            }
+            setOutput('No YAML found on connected configuration node')
+            return
+        }
+
+        try {
+            const parsed = yaml.load(yamlText)
+            const newOutput = JSON.stringify(parsed, null, 2)
+            setOutput((prev) => (prev === newOutput ? prev : newOutput))
+        } catch (err: any) {
+            const msg = 'YAML parse error: ' + err.message
+            setOutput((prev) => (prev === msg ? prev : msg))
+        }
+    }, [id, incomingIds.join(','), yamlText, nodes.length, edges.length])
+
+    return (
+        <div className="w-72 bg-white rounded shadow-sm border p-3">
+            <div className="text-sm font-medium mb-2">Rendering</div>
+            <pre className="text-xs text-gray-800 max-h-40 overflow-auto">{output}</pre>
+            <Handle type="target" position={Position.Left} id="in" style={{ background: '#F97316' }} />
+        </div>
+    )
+}

src/lib/flowContext.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export type FlowContextValue = {
+    nodes: any[]
+    setNodes: (updater: any) => void
+    edges: any[]
+    setEdges: (updater: any) => void
+}
+
+const FlowContext = React.createContext<FlowContextValue | null>(null)
+
+export default FlowContext

src/styles.css

@@ -18,3 +18,17 @@ body {
     width: 100%;
     height: 100vh;
 }
+
+/* Node specific overrides */
+.react-flow__node {
+    display: block;
+}
+
+.react-flow__node .react-flow__handle {
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
+}
+
+/* Small helper for monospace pre output */
+pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
+}