{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "editable-handle-demo",
	"type": "registry:example",
	"files": [
		{
			"path": "./src/registry/examples/editable-handle-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\tPosition,\n\tReactFlow,\n\tReactFlowProvider,\n\tuseUpdateNodeInternals,\n} from \"@xyflow/react\";\nimport { nanoid } from \"nanoid\";\nimport { useCallback, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tEditableHandle,\n\tEditableHandleDialog,\n} from \"@/registry/ui/flow/editable-handle\";\n\nconst DynamicHandlesNode = ({ id }: NodeProps<Node>) => {\n\tconst updateNodeInternals = useUpdateNodeInternals();\n\tconst [handles, setHandles] = useState<\n\t\t{ id: string; name: string; description?: string }[]\n\t>([\n\t\t{\n\t\t\tid: \"1\",\n\t\t\tname: \"input1\",\n\t\t\tdescription: \"Input 1 description\",\n\t\t},\n\t]);\n\n\tconst handleCreate = useCallback(\n\t\t(name: string, description?: string) => {\n\t\t\tconsole.log(\"New handle\", name, description);\n\t\t\tconst newHandle = {\n\t\t\t\tid: `handle-${nanoid()}`,\n\t\t\t\tname,\n\t\t\t\tdescription,\n\t\t\t};\n\t\t\tsetHandles((prev) => [...prev, newHandle]);\n\t\t\tupdateNodeInternals(id);\n\t\t\treturn true;\n\t\t},\n\t\t[id, updateNodeInternals],\n\t);\n\n\tconst handleUpdate = useCallback(\n\t\t(handleId: string, newName: string, newDescription?: string) => {\n\t\t\tsetHandles((prev) =>\n\t\t\t\tprev.map((handle) =>\n\t\t\t\t\thandle.id === handleId\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...handle,\n\t\t\t\t\t\t\t\tname: newName,\n\t\t\t\t\t\t\t\tdescription: newDescription,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: handle,\n\t\t\t\t),\n\t\t\t);\n\t\t\treturn true;\n\t\t},\n\t\t[],\n\t);\n\n\tconst handleDelete = useCallback(\n\t\t(handleId: string) => {\n\t\t\tsetHandles((prev) =>\n\t\t\t\tprev.filter((handle) => handle.id !== handleId),\n\t\t\t);\n\t\t\tupdateNodeInternals(id);\n\t\t},\n\t\t[id, updateNodeInternals],\n\t);\n\n\treturn (\n\t\t<div className=\"py-4 border rounded-lg bg-background w-[300px]\">\n\t\t\t<h2 className=\"text-lg font-semibold mb-4 px-4\">\n\t\t\t\tNode with dynamic Handles\n\t\t\t</h2>\n\n\t\t\t<EditableHandleDialog\n\t\t\t\tvariant=\"create\"\n\t\t\t\tlabel=\"\"\n\t\t\t\tonSave={handleCreate}\n\t\t\t\tonCancel={() => {}}\n\t\t\t\talign=\"start\"\n\t\t\t>\n\t\t\t\t<Button variant=\"outline\" size=\"sm\" className=\"h-8 ml-4\">\n\t\t\t\t\tCreate New Handle\n\t\t\t\t</Button>\n\t\t\t</EditableHandleDialog>\n\n\t\t\t<div className=\"mt-4 space-y-2\">\n\t\t\t\t{handles.map((handle) => (\n\t\t\t\t\t<div key={handle.id} className=\"flex items-center gap-2\">\n\t\t\t\t\t\t<EditableHandle\n\t\t\t\t\t\t\tnodeId={id}\n\t\t\t\t\t\t\thandleId={handle.id}\n\t\t\t\t\t\t\tname={handle.name}\n\t\t\t\t\t\t\tdescription={handle.description}\n\t\t\t\t\t\t\ttype=\"target\"\n\t\t\t\t\t\t\tposition={Position.Left}\n\t\t\t\t\t\t\twrapperClassName=\"w-full\"\n\t\t\t\t\t\t\tonUpdateTool={handleUpdate}\n\t\t\t\t\t\t\tonDelete={handleDelete}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst nodeTypes: NodeTypes = {\n\t\"editable-handle-node\": DynamicHandlesNode,\n};\n\nconst initialNodes = [\n\t{\n\t\tid: \"node-1\",\n\t\ttype: \"editable-handle-node\",\n\t\tposition: { x: 0, y: 0 },\n\t\tdata: {},\n\t},\n];\n\nexport default function EditableHandleDemo() {\n\tconst [nodes, setNodes] = useState<Node[]>(initialNodes);\n\tconst [edges, setEdges] = useState([]);\n\n\tconst defaultViewport = { x: 100, y: 150, zoom: 1.1 };\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\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>\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"
		}
	]
}