{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-mutation-observer-demo",
  "title": "UseMutationObserverDemo",
  "description": "use-mutation-observer's hook in action.",
  "registryDependencies": [
    "button",
    "card",
    "https://guarahooks.com/r/use-mutation-observer.json"
  ],
  "files": [
    {
      "path": "registry/example/use-mutation-observer-demo.tsx",
      "content": "'use client';\n\nimport React, { useRef, useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\n\nimport { useMutationObserver } from '@/hooks/guarahooks/use-mutation-observer';\n\nexport function UseMutationObserverDemo() {\n  const targetRef = useRef<HTMLDivElement | null>(null);\n  const [mutations, setMutations] = useState<MutationRecord[]>([]);\n  const [count, setCount] = useState(0);\n\n  useMutationObserver<HTMLDivElement>({\n    target: targetRef,\n    callback: (mutationsList) => {\n      setMutations((prev) => [...prev, ...mutationsList]);\n      setCount((prev) => prev + mutationsList.length);\n    },\n  });\n\n  const addElement = () => {\n    if (targetRef.current) {\n      const newElement = document.createElement('div');\n      newElement.className = 'p-2 m-2 border rounded';\n      newElement.textContent = `New Element ${count + 1}`;\n      targetRef.current.appendChild(newElement);\n    }\n  };\n\n  const clearMutations = () => {\n    setMutations([]);\n    setCount(0);\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Mutation Observer Demo</CardTitle>\n        <CardDescription>\n          Watch how the hook detects DOM changes in real-time\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div className=\"flex gap-2\">\n          <Button onClick={addElement}>Add Element</Button>\n          <Button variant=\"outline\" onClick={clearMutations}>\n            Clear Mutations\n          </Button>\n        </div>\n\n        <div ref={targetRef} className=\"min-h-[100px] p-4 border rounded-lg\">\n          <p className=\"text-sm text-gray-500\">Target Element</p>\n        </div>\n\n        <div className=\"space-y-2\">\n          <h3 className=\"font-medium\">Mutation Count: {count}</h3>\n          <div className=\"max-h-[200px] overflow-auto\">\n            {mutations.map((mutation, index) => (\n              <div key={index} className=\"p-2 text-sm rounded\">\n                <p>Type: {mutation.type}</p>\n                <p>Target: {mutation.target.nodeName}</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-mutation-observer-demo.tsx"
    }
  ],
  "type": "registry:example"
}