{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "canvas-fractal-grid-demo",
  "type": "registry:component",
  "registryDependencies": [
    "canvas-fractal-grid"
  ],
  "files": [
    {
      "path": "registry/default/example/canvas-fractal-grid-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { Check, Copy, Minus, Plus, Trash2 } from \"lucide-react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { useToast } from \"@/components/ui/use-toast\"\n\nimport { CanvasFractalGrid } from \"../ui/canvas-fractal-grid\"\n\ntype GradientStop = {\n  color: string\n  position: number\n}\n\ntype Gradient = {\n  stops: GradientStop[]\n  centerX: number\n  centerY: number\n}\n\nconst initialConfig = {\n  dotSize: 5,\n  dotSpacing: 25,\n  dotOpacity: 0.8,\n  gradientAnimationDuration: 5,\n  waveIntensity: 40,\n  waveRadius: 250,\n  dotColor: \"rgba(100, 200, 255, 0.2)\",\n  glowColor: \"rgba(100, 200, 255, 1)\",\n  enableNoise: true,\n  noiseOpacity: 0.05,\n  enableMouseGlow: false,\n  initialPerformance: \"high\" as const,\n  gradients: [\n    {\n      stops: [\n        { color: \"#3498DB\", position: 0 },\n        { color: \"#2980B9\", position: 25 },\n        { color: \"#1ABC9C\", position: 50 },\n        { color: \"transparent\", position: 75 },\n      ],\n      centerX: 30,\n      centerY: 70,\n    },\n    {\n      stops: [\n        { color: \"#16A085\", position: 0 },\n        { color: \"#2980B9\", position: 25 },\n        { color: \"#3498DB\", position: 50 },\n        { color: \"transparent\", position: 75 },\n      ],\n      centerX: 70,\n      centerY: 30,\n    },\n  ],\n}\n\nexport function ConfigurableCanvasFractalGrid() {\n  const [config, setConfig] = useState(initialConfig)\n  const [isCopied, setIsCopied] = useState(false)\n  const { toast } = useToast()\n\n  const updateConfig = (key: string, value: any) => {\n    setConfig((prev) => ({ ...prev, [key]: value }))\n  }\n\n  const updateGradient = (index: number, updatedGradient: Gradient) => {\n    const newGradients = [...config.gradients]\n    newGradients[index] = updatedGradient\n    updateConfig(\"gradients\", newGradients)\n  }\n\n  const addGradient = () => {\n    const newGradient: Gradient = {\n      stops: [\n        { color: \"#000000\", position: 0 },\n        { color: \"#FFFFFF\", position: 100 },\n      ],\n      centerX: 50,\n      centerY: 50,\n    }\n    updateConfig(\"gradients\", [...config.gradients, newGradient])\n  }\n\n  const removeGradient = (index: number) => {\n    const newGradients = config.gradients.filter((_, i) => i !== index)\n    updateConfig(\"gradients\", newGradients)\n  }\n\n  const copyConfigToClipboard = () => {\n    const configString = `\n\"use client\"\n\nimport { CanvasFractalGrid } from \"../ui/canvas-fractal-grid\"\n\nexport function CanvasFractalGridExample() {\n  return (\n    <div className=\"h-screen w-screen relative grid\">\n      <CanvasFractalGrid\n        dotSize={${config.dotSize}}\n        dotSpacing={${config.dotSpacing}}\n        dotOpacity={${config.dotOpacity}}\n        gradientAnimationDuration={${config.gradientAnimationDuration}}\n        waveIntensity={${config.waveIntensity}}\n        waveRadius={${config.waveRadius}}\n        dotColor=\"${config.dotColor}\"\n        glowColor=\"${config.glowColor}\"\n        enableNoise={${config.enableNoise}}\n        noiseOpacity={${config.noiseOpacity}}\n        enableMouseGlow={${config.enableMouseGlow}}\n        initialPerformance=\"${config.initialPerformance}\"\n        gradients={${JSON.stringify(config.gradients, null, 2)}}\n      />\n    </div>\n  )\n}\n`\n\n    navigator.clipboard.writeText(configString).then(() => {\n      setIsCopied(true)\n      toast({\n        title: \"Configuration Copied\",\n        description:\n          \"The current configuration has been copied to your clipboard.\",\n      })\n      setTimeout(() => setIsCopied(false), 2000)\n    })\n  }\n\n  return (\n    <div className=\"container mx-auto py-8\">\n      <h1 className=\"mb-6 text-center text-3xl font-bold\">\n        Configurable CanvasFractalGrid\n      </h1>\n      <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-1\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={copyConfigToClipboard}\n          className=\"ml-2\"\n        >\n          {isCopied ? (\n            <Check className=\"mr-2 h-4 w-4\" />\n          ) : (\n            <Copy className=\"mr-2 h-4 w-4\" />\n          )}\n          {isCopied ? \"Copied!\" : \"Copy Config\"}\n        </Button>\n        <div className=\"overflow-hidden rounded-lg bg-white\">\n          <div className=\"relative h-[500px] w-full\">\n            <CanvasFractalGrid {...config} />\n          </div>\n        </div>\n        <Card className=\"from-primary/5 to-primary/5 overflow-hidden bg-gradient-to-b\">\n          <CardHeader>\n            <CardTitle>Configuration</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <Tabs defaultValue=\"general\">\n              <TabsList className=\"grid w-full grid-cols-2\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"gradients\">Gradients</TabsTrigger>\n              </TabsList>\n              <TabsContent value=\"general\">\n                <Accordion type=\"single\" collapsible className=\"w-full\">\n                  <AccordionItem value=\"dots\">\n                    <AccordionTrigger>Dots</AccordionTrigger>\n                    <AccordionContent>\n                      <div className=\"space-y-4\">\n                        <div>\n                          <Label htmlFor=\"dotSize\">Dot Size</Label>\n                          <Slider\n                            id=\"dotSize\"\n                            min={1}\n                            max={20}\n                            step={1}\n                            value={[config.dotSize]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"dotSize\", value)\n                            }\n                          />\n                        </div>\n                        <div>\n                          <Label htmlFor=\"dotSpacing\">Dot Spacing</Label>\n                          <Slider\n                            id=\"dotSpacing\"\n                            min={10}\n                            max={50}\n                            step={1}\n                            value={[config.dotSpacing]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"dotSpacing\", value)\n                            }\n                          />\n                        </div>\n                        <div>\n                          <Label htmlFor=\"dotOpacity\">Dot Opacity</Label>\n                          <Slider\n                            id=\"dotOpacity\"\n                            min={0}\n                            max={1}\n                            step={0.1}\n                            value={[config.dotOpacity]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"dotOpacity\", value)\n                            }\n                          />\n                        </div>\n                        <div>\n                          <Label htmlFor=\"dotColor\">Dot Color</Label>\n                          <Input\n                            id=\"dotColor\"\n                            type=\"color\"\n                            value={config.dotColor}\n                            onChange={(e) =>\n                              updateConfig(\"dotColor\", e.target.value)\n                            }\n                            className=\"h-10 px-3 py-2\"\n                          />\n                        </div>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                  <AccordionItem value=\"waves\">\n                    <AccordionTrigger>Waves</AccordionTrigger>\n                    <AccordionContent>\n                      <div className=\"space-y-4\">\n                        <div>\n                          <Label htmlFor=\"waveIntensity\">Wave Intensity</Label>\n                          <Slider\n                            id=\"waveIntensity\"\n                            min={0}\n                            max={100}\n                            step={1}\n                            value={[config.waveIntensity]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"waveIntensity\", value)\n                            }\n                          />\n                        </div>\n                        <div>\n                          <Label htmlFor=\"waveRadius\">Wave Radius</Label>\n                          <Slider\n                            id=\"waveRadius\"\n                            min={50}\n                            max={500}\n                            step={10}\n                            value={[config.waveRadius]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"waveRadius\", value)\n                            }\n                          />\n                        </div>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                  <AccordionItem value=\"effects\">\n                    <AccordionTrigger>Effects</AccordionTrigger>\n                    <AccordionContent>\n                      <div className=\"space-y-4\">\n                        <div>\n                          <Label htmlFor=\"gradientAnimationDuration\">\n                            Gradient Animation Duration\n                          </Label>\n                          <Slider\n                            id=\"gradientAnimationDuration\"\n                            min={5}\n                            max={30}\n                            step={1}\n                            value={[config.gradientAnimationDuration]}\n                            onValueChange={([value]) =>\n                              updateConfig(\"gradientAnimationDuration\", value)\n                            }\n                          />\n                        </div>\n                        <div>\n                          <Label htmlFor=\"glowColor\">Glow Color</Label>\n                          <Input\n                            id=\"glowColor\"\n                            type=\"color\"\n                            value={config.glowColor}\n                            onChange={(e) =>\n                              updateConfig(\"glowColor\", e.target.value)\n                            }\n                            className=\"h-10 px-3 py-2\"\n                          />\n                        </div>\n                        <div className=\"flex items-center space-x-2\">\n                          <Switch\n                            id=\"enableNoise\"\n                            checked={config.enableNoise}\n                            onCheckedChange={(checked) =>\n                              updateConfig(\"enableNoise\", checked)\n                            }\n                          />\n                          <Label htmlFor=\"enableNoise\">Enable Noise</Label>\n                        </div>\n                        <div className=\"flex items-center space-x-2\">\n                          <Switch\n                            id=\"enableMouseGlow\"\n                            checked={config.enableMouseGlow}\n                            onCheckedChange={(checked) =>\n                              updateConfig(\"enableMouseGlow\", checked)\n                            }\n                          />\n                          <Label htmlFor=\"enableMouseGlow\">\n                            Enable Mouse Glow\n                          </Label>\n                        </div>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                  <AccordionItem value=\"performance\">\n                    <AccordionTrigger>Performance</AccordionTrigger>\n                    <AccordionContent>\n                      <div>\n                        <Label htmlFor=\"initialPerformance\">\n                          Initial Performance\n                        </Label>\n                        <Select\n                          value={config.initialPerformance}\n                          onValueChange={(value) =>\n                            updateConfig(\n                              \"initialPerformance\",\n                              value as \"low\" | \"medium\" | \"high\"\n                            )\n                          }\n                        >\n                          <SelectTrigger id=\"initialPerformance\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent>\n                            <SelectItem value=\"low\">Low</SelectItem>\n                            <SelectItem value=\"medium\">Medium</SelectItem>\n                            <SelectItem value=\"high\">High</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </div>\n                    </AccordionContent>\n                  </AccordionItem>\n                </Accordion>\n              </TabsContent>\n              <TabsContent value=\"gradients\">\n                <div className=\"space-y-4\">\n                  {config.gradients.map((gradient, index) => (\n                    <Card\n                      key={index}\n                      className=\"from-primary/5 to-primary/10 bg-gradient-to-b\"\n                    >\n                      <CardHeader>\n                        <CardTitle className=\"text-lg\">\n                          Gradient {index + 1}\n                        </CardTitle>\n                      </CardHeader>\n                      <CardContent>\n                        <div className=\"space-y-4\">\n                          <div className=\"grid grid-cols-2 gap-4\">\n                            <div>\n                              <Label htmlFor={`centerX-${index}`}>\n                                Center X\n                              </Label>\n                              <Slider\n                                id={`centerX-${index}`}\n                                min={0}\n                                max={100}\n                                step={1}\n                                value={[gradient.centerX]}\n                                onValueChange={([value]) =>\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    centerX: value,\n                                  })\n                                }\n                              />\n                            </div>\n                            <div>\n                              <Label htmlFor={`centerY-${index}`}>\n                                Center Y\n                              </Label>\n                              <Slider\n                                id={`centerY-${index}`}\n                                min={0}\n                                max={100}\n                                step={1}\n                                value={[gradient.centerY]}\n                                onValueChange={([value]) =>\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    centerY: value,\n                                  })\n                                }\n                              />\n                            </div>\n                          </div>\n                          {gradient.stops.map((stop, stopIndex) => (\n                            <div\n                              key={stopIndex}\n                              className=\"flex items-center space-x-2\"\n                            >\n                              <Input\n                                type=\"color\"\n                                value={stop.color}\n                                onChange={(e) => {\n                                  const newStops = [...gradient.stops]\n                                  newStops[stopIndex] = {\n                                    ...stop,\n                                    color: e.target.value,\n                                  }\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    stops: newStops,\n                                  })\n                                }}\n                                className=\"h-10 w-16\"\n                              />\n                              <Slider\n                                min={0}\n                                max={100}\n                                step={1}\n                                value={[stop.position]}\n                                onValueChange={([value]) => {\n                                  const newStops = [...gradient.stops]\n                                  newStops[stopIndex] = {\n                                    ...stop,\n                                    position: value,\n                                  }\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    stops: newStops,\n                                  })\n                                }}\n                                className=\"flex-grow\"\n                              />\n                              <Button\n                                variant=\"outline\"\n                                size=\"icon\"\n                                onClick={() => {\n                                  const newStops = gradient.stops.filter(\n                                    (_, i) => i !== stopIndex\n                                  )\n                                  updateGradient(index, {\n                                    ...gradient,\n                                    stops: newStops,\n                                  })\n                                }}\n                              >\n                                <Minus className=\"h-4 w-4\" />\n                              </Button>\n                            </div>\n                          ))}\n                          <div className=\"flex justify-between\">\n                            <Button\n                              variant=\"outline\"\n                              onClick={() => {\n                                const newStops = [\n                                  ...gradient.stops,\n                                  { color: \"#000000\", position: 100 },\n                                ]\n                                updateGradient(index, {\n                                  ...gradient,\n                                  stops: newStops,\n                                })\n                              }}\n                            >\n                              <Plus className=\"mr-2 h-4 w-4\" />\n                              Add Stop\n                            </Button>\n                            <Button\n                              variant=\"destructive\"\n                              onClick={() => removeGradient(index)}\n                            >\n                              <Trash2 className=\"mr-2 h-4 w-4\" />\n                              Remove Gradient\n                            </Button>\n                          </div>\n                        </div>\n                      </CardContent>\n                    </Card>\n                  ))}\n                  <Button onClick={addGradient} className=\"w-full\">\n                    <Plus className=\"mr-2 h-4 w-4\" />\n                    Add Gradient\n                  </Button>\n                </div>\n              </TabsContent>\n            </Tabs>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n\nexport default ConfigurableCanvasFractalGrid\n",
      "type": "registry:component"
    }
  ]
}