{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "prompt-crafter-node-demo",
	"type": "registry:example",
	"files": [
		{
			"path": "./src/registry/examples/prompt-crafter-node-demo.tsx",
			"content": "\"use client\";\n\nimport \"@xyflow/react/dist/style.css\";\n\nimport {\n\taddEdge,\n\tapplyEdgeChanges,\n\tapplyNodeChanges,\n\tBackground,\n\ttype Connection,\n\ttype EdgeChange,\n\ttype Node,\n\ttype NodeChange,\n\ttype NodeProps,\n\ttype NodeTypes,\n\tReactFlow,\n\tReactFlowProvider,\n} from \"@xyflow/react\";\nimport { nanoid } from \"nanoid\";\nimport { useCallback, useState } from \"react\";\nimport { PromptCrafterNode } from \"@/registry/ui/flow/prompt-crafter-node\";\n\nconst PromptCrafterNodeController = ({\n\tid,\n\tdata,\n\t...props\n}: NodeProps<Node>) => {\n\tconst [template, setTemplate] = useState(\"Hello {{name}}\");\n\tconst [dynamicHandles, setDynamicHandles] = useState({\n\t\t\"template-tags\": [\n\t\t\t{\n\t\t\t\tid: \"name\",\n\t\t\t\tname: \"name\",\n\t\t\t},\n\t\t],\n\t});\n\n\tconst handleCreateInput = useCallback(\n\t\t(name: string) => {\n\t\t\tsetDynamicHandles({\n\t\t\t\t...dynamicHandles,\n\t\t\t\t\"template-tags\": [\n\t\t\t\t\t...dynamicHandles[\"template-tags\"],\n\t\t\t\t\t{ id: nanoid(), name },\n\t\t\t\t],\n\t\t\t});\n\t\t\treturn true;\n\t\t},\n\t\t[dynamicHandles],\n\t);\n\n\tconst handleRemoveInput = useCallback(() => {\n\t\tsetDynamicHandles({\n\t\t\t...dynamicHandles,\n\t\t\t\"template-tags\": dynamicHandles[\"template-tags\"].filter(\n\t\t\t\t(input) => input.id !== \"name\",\n\t\t\t),\n\t\t});\n\t\treturn true;\n\t}, [dynamicHandles]);\n\n\tconst handleUpdateInputName = useCallback(\n\t\t(handleId: string, newLabel: string) => {\n\t\t\tsetDynamicHandles({\n\t\t\t\t...dynamicHandles,\n\t\t\t\t\"template-tags\": dynamicHandles[\"template-tags\"].map((input) =>\n\t\t\t\t\tinput.id === handleId\n\t\t\t\t\t\t? { ...input, name: newLabel }\n\t\t\t\t\t\t: input,\n\t\t\t\t),\n\t\t\t});\n\t\t\treturn true;\n\t\t},\n\t\t[dynamicHandles],\n\t);\n\n\treturn (\n\t\t<PromptCrafterNode\n\t\t\tid={id}\n\t\t\tdata={{\n\t\t\t\tstatus: \"success\",\n\t\t\t\tconfig: {\n\t\t\t\t\ttemplate,\n\t\t\t\t},\n\t\t\t\tdynamicHandles,\n\t\t\t}}\n\t\t\t{...props}\n\t\t\ttype=\"prompt-crafter\"\n\t\t\tonPromptTextChange={setTemplate}\n\t\t\tonCreateInput={handleCreateInput}\n\t\t\tonRemoveInput={handleRemoveInput}\n\t\t\tonUpdateInputName={handleUpdateInputName}\n\t\t\tonDeleteNode={() => {}}\n\t\t/>\n\t);\n};\n\nconst nodeTypes: NodeTypes = {\n\t\"prompt-crafter-node\": PromptCrafterNodeController,\n};\n\nconst initialNodes = [\n\t{\n\t\tid: \"node-1\",\n\t\ttype: \"prompt-crafter-node\",\n\t\tposition: { x: 0, y: -50 },\n\t\tdata: {},\n\t},\n];\n\nexport default function ResizableNodeDemo() {\n\tconst [nodes, setNodes] = useState<Node[]>(initialNodes);\n\tconst [edges, setEdges] = useState([]);\n\n\t// Add default viewport configuration\n\tconst defaultViewport = { x: 100, y: 100, zoom: 0.9 };\n\n\tconst onNodesChange = useCallback(\n\t\t(changes: NodeChange<Node>[]) =>\n\t\t\tsetNodes((nds) => applyNodeChanges(changes, nds)),\n\t\t[],\n\t);\n\tconst onEdgesChange = useCallback(\n\t\t(changes: EdgeChange<never>[]) =>\n\t\t\tsetEdges((eds) => applyEdgeChanges(changes, eds)),\n\t\t[],\n\t);\n\tconst onConnect = useCallback(\n\t\t(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),\n\t\t[],\n\t);\n\treturn (\n\t\t<div className=\"w-full h-full\">\n\t\t\t<ReactFlowProvider>\n\t\t\t\t<ReactFlow\n\t\t\t\t\tnodes={nodes}\n\t\t\t\t\tedges={edges}\n\t\t\t\t\tonNodesChange={onNodesChange}\n\t\t\t\t\tonEdgesChange={onEdgesChange}\n\t\t\t\t\tonConnect={onConnect}\n\t\t\t\t\tnodeTypes={nodeTypes}\n\t\t\t\t\tdefaultViewport={defaultViewport}\n\t\t\t\t\t/* fitView */\n\t\t\t\t>\n\t\t\t\t\t<Background />\n\t\t\t\t</ReactFlow>\n\t\t\t</ReactFlowProvider>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:example"
		}
	]
}