{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fractal-grid",
  "type": "registry:block",
  "title": "Fractal grid",
  "description": "Fractal grid",
  "files": [
    {
      "path": "components/usages/fractalgridusage.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport { FractalDotGrid } from \"@/registry/open-source/fractal-grid\";\nimport { Check, Copy } from \"lucide-react\";\n\nimport {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"../ui/accordion\";\nimport { Button } from \"../ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"../ui/card\";\nimport { Input } from \"../ui/input\";\nimport { Label } from \"../ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../ui/select\";\nimport { Slider } from \"../ui/slider\";\nimport { Switch } from \"../ui/switch\";\nimport { useToast } from \"../ui/use-toast\";\n\nconst initialConfig = {\n\tdotSize: 5.5,\n\tdotSpacing: 13,\n\tdotOpacity: 0.7,\n\twaveIntensity: 99,\n\twaveRadius: 200,\n\tdotColor: \"rgba(100, 100, 255, 1)\",\n\tglowColor: \"rgba(100, 100, 255, 1)\",\n\tenableNoise: false,\n\tnoiseOpacity: 0.03,\n\tenableMouseGlow: false,\n\tinitialPerformance: \"medium\" as const,\n};\n\nfunction ConfigurableFractalDotGridDemo() {\n\tconst [config, setConfig] = useState(initialConfig);\n\tconst [isCopied, setIsCopied] = useState(false);\n\tconst { toast } = useToast();\n\n\tconst updateConfig = (key: string, value: any) => {\n\t\tsetConfig((prev) => ({ ...prev, [key]: value }));\n\t};\n\n\tconst copyConfigToClipboard = () => {\n\t\tconst configString = `\n\"use client\"\n\nimport { FractalDotGrid } from \"./fractal-dot-grid\"\n\nexport function FractalDotGridUsage() {\n  return (\n\t<div className=\"h-screen w-screen relative\">\n\t  <FractalDotGrid\n\t\tdotSize={${config.dotSize}}\n\t\tdotSpacing={${config.dotSpacing}}\n\t\tdotOpacity={${config.dotOpacity}}\n\t\twaveIntensity={${config.waveIntensity}}\n\t\twaveRadius={${config.waveRadius}}\n\t\tdotColor=\"${config.dotColor}\"\n\t\tglowColor=\"${config.glowColor}\"\n\t\tenableNoise={${config.enableNoise}}\n\t\tnoiseOpacity={${config.noiseOpacity}}\n\t\tenableMouseGlow={${config.enableMouseGlow}}\n\t\tinitialPerformance=\"${config.initialPerformance}\"\n\t  />\n\t</div>\n  )\n}\n`;\n\n\t\tnavigator.clipboard.writeText(configString).then(() => {\n\t\t\tsetIsCopied(true);\n\t\t\ttoast({\n\t\t\t\ttitle: \"Configuration Copied\",\n\t\t\t\tdescription:\n\t\t\t\t\t\"The current configuration has been copied to your clipboard.\",\n\t\t\t});\n\t\t\tsetTimeout(() => setIsCopied(false), 2000);\n\t\t});\n\t};\n\n\treturn (\n\t\t<div className=\"container mx-auto py-8\">\n\t\t\t<div className=\"grid grid-cols-1  gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonClick={copyConfigToClipboard}\n\t\t\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{isCopied ? (\n\t\t\t\t\t\t\t<Check className=\"h-4 w-4 mr-2\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Copy className=\"h-4 w-4 mr-2\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isCopied ? \"Copied!\" : \"Copy Config\"}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<div className=\"overflow-hidden bg-background rounded-lg\">\n\t\t\t\t\t\t<div className=\"h-[500px] w-full relative\">\n\t\t\t\t\t\t\t<FractalDotGrid {...config} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Card className=\"overflow-hidden bg-linear-to-b from-primary/5 to-primary/5\">\n\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t<CardTitle>Configuration</CardTitle>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t<Accordion type=\"single\" collapsible className=\"w-full\">\n\t\t\t\t\t\t\t<AccordionItem value=\"dots\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Dots</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotSize\">Dot Size</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotSize\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={1}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={10}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={0.5}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.dotSize]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotSize\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotSpacing\">Dot Spacing</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotSpacing\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={10}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={50}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.dotSpacing]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotSpacing\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotOpacity\">Dot Opacity</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotOpacity\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={1}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={0.1}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.dotOpacity]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotOpacity\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotColor\">Dot Color</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotColor\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={config.dotColor}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotColor\", e.target.value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-10 px-3 py-2\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t\t<AccordionItem value=\"waves\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Waves</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"waveIntensity\">\n\t\t\t\t\t\t\t\t\t\t\t\tWave Intensity\n\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"waveIntensity\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={100}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.waveIntensity]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"waveIntensity\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"waveRadius\">Wave Radius</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"waveRadius\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={50}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={500}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={10}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.waveRadius]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"waveRadius\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t\t<AccordionItem value=\"effects\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Effects</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"glowColor\">Glow Color</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"glowColor\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={config.glowColor}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"glowColor\", e.target.value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-10 px-3 py-2\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"enableNoise\"\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={config.enableNoise}\n\t\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"enableNoise\", checked)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"enableNoise\">\n\t\t\t\t\t\t\t\t\t\t\t\tEnable Noise\n\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{config.enableNoise && (\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"noiseOpacity\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tNoise Opacity\n\t\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\t\tid=\"noiseOpacity\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tmax={0.1}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstep={0.01}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.noiseOpacity]}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"noiseOpacity\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"enableMouseGlow\"\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={config.enableMouseGlow}\n\t\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"enableMouseGlow\", checked)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"enableMouseGlow\">\n\t\t\t\t\t\t\t\t\t\t\t\tEnable Mouse Glow\n\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t\t<AccordionItem value=\"performance\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Performance</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"initialPerformance\">\n\t\t\t\t\t\t\t\t\t\t\tInitial Performance\n\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\t\tvalue={config.initialPerformance}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={(value) =>\n\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"initialPerformance\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue as \"low\" | \"medium\" | \"high\"\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger id=\"initialPerformance\">\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"low\">Low</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tMedium\n\t\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"high\">High</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t</Accordion>\n\t\t\t\t\t</CardContent>\n\t\t\t\t</Card>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default ConfigurableFractalDotGridDemo;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/fractalgridusage.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport { FractalDotGrid } from \"@/registry/open-source/fractal-grid\";\nimport { Check, Copy } from \"lucide-react\";\n\nimport {\n\tAccordion,\n\tAccordionContent,\n\tAccordionItem,\n\tAccordionTrigger,\n} from \"../ui/accordion\";\nimport { Button } from \"../ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"../ui/card\";\nimport { Input } from \"../ui/input\";\nimport { Label } from \"../ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../ui/select\";\nimport { Slider } from \"../ui/slider\";\nimport { Switch } from \"../ui/switch\";\nimport { useToast } from \"../ui/use-toast\";\n\nconst initialConfig = {\n\tdotSize: 5.5,\n\tdotSpacing: 13,\n\tdotOpacity: 0.7,\n\twaveIntensity: 99,\n\twaveRadius: 200,\n\tdotColor: \"rgba(100, 100, 255, 1)\",\n\tglowColor: \"rgba(100, 100, 255, 1)\",\n\tenableNoise: false,\n\tnoiseOpacity: 0.03,\n\tenableMouseGlow: false,\n\tinitialPerformance: \"medium\" as const,\n};\n\nfunction ConfigurableFractalDotGridDemo() {\n\tconst [config, setConfig] = useState(initialConfig);\n\tconst [isCopied, setIsCopied] = useState(false);\n\tconst { toast } = useToast();\n\n\tconst updateConfig = (key: string, value: any) => {\n\t\tsetConfig((prev) => ({ ...prev, [key]: value }));\n\t};\n\n\tconst copyConfigToClipboard = () => {\n\t\tconst configString = `\n\"use client\"\n\nimport { FractalDotGrid } from \"./fractal-dot-grid\"\n\nexport function FractalDotGridUsage() {\n  return (\n\t<div className=\"h-screen w-screen relative\">\n\t  <FractalDotGrid\n\t\tdotSize={${config.dotSize}}\n\t\tdotSpacing={${config.dotSpacing}}\n\t\tdotOpacity={${config.dotOpacity}}\n\t\twaveIntensity={${config.waveIntensity}}\n\t\twaveRadius={${config.waveRadius}}\n\t\tdotColor=\"${config.dotColor}\"\n\t\tglowColor=\"${config.glowColor}\"\n\t\tenableNoise={${config.enableNoise}}\n\t\tnoiseOpacity={${config.noiseOpacity}}\n\t\tenableMouseGlow={${config.enableMouseGlow}}\n\t\tinitialPerformance=\"${config.initialPerformance}\"\n\t  />\n\t</div>\n  )\n}\n`;\n\n\t\tnavigator.clipboard.writeText(configString).then(() => {\n\t\t\tsetIsCopied(true);\n\t\t\ttoast({\n\t\t\t\ttitle: \"Configuration Copied\",\n\t\t\t\tdescription:\n\t\t\t\t\t\"The current configuration has been copied to your clipboard.\",\n\t\t\t});\n\t\t\tsetTimeout(() => setIsCopied(false), 2000);\n\t\t});\n\t};\n\n\treturn (\n\t\t<div className=\"container mx-auto py-8\">\n\t\t\t<div className=\"grid grid-cols-1  gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tonClick={copyConfigToClipboard}\n\t\t\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{isCopied ? (\n\t\t\t\t\t\t\t<Check className=\"h-4 w-4 mr-2\" />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Copy className=\"h-4 w-4 mr-2\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isCopied ? \"Copied!\" : \"Copy Config\"}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<div className=\"overflow-hidden bg-background rounded-lg\">\n\t\t\t\t\t\t<div className=\"h-[500px] w-full relative\">\n\t\t\t\t\t\t\t<FractalDotGrid {...config} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Card className=\"overflow-hidden bg-linear-to-b from-primary/5 to-primary/5\">\n\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t<CardTitle>Configuration</CardTitle>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardContent>\n\t\t\t\t\t\t<Accordion type=\"single\" collapsible className=\"w-full\">\n\t\t\t\t\t\t\t<AccordionItem value=\"dots\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Dots</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotSize\">Dot Size</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotSize\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={1}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={10}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={0.5}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.dotSize]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotSize\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotSpacing\">Dot Spacing</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotSpacing\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={10}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={50}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.dotSpacing]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotSpacing\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotOpacity\">Dot Opacity</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotOpacity\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={1}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={0.1}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.dotOpacity]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotOpacity\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"dotColor\">Dot Color</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"dotColor\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={config.dotColor}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"dotColor\", e.target.value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-10 px-3 py-2\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t\t<AccordionItem value=\"waves\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Waves</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"waveIntensity\">\n\t\t\t\t\t\t\t\t\t\t\t\tWave Intensity\n\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"waveIntensity\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={100}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.waveIntensity]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"waveIntensity\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"waveRadius\">Wave Radius</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"waveRadius\"\n\t\t\t\t\t\t\t\t\t\t\t\tmin={50}\n\t\t\t\t\t\t\t\t\t\t\t\tmax={500}\n\t\t\t\t\t\t\t\t\t\t\t\tstep={10}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.waveRadius]}\n\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"waveRadius\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t\t<AccordionItem value=\"effects\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Effects</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"glowColor\">Glow Color</Label>\n\t\t\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"glowColor\"\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"color\"\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={config.glowColor}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"glowColor\", e.target.value)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-10 px-3 py-2\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"enableNoise\"\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={config.enableNoise}\n\t\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"enableNoise\", checked)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"enableNoise\">\n\t\t\t\t\t\t\t\t\t\t\t\tEnable Noise\n\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{config.enableNoise && (\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"noiseOpacity\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tNoise Opacity\n\t\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t\t\t<Slider\n\t\t\t\t\t\t\t\t\t\t\t\t\tid=\"noiseOpacity\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tmax={0.1}\n\t\t\t\t\t\t\t\t\t\t\t\t\tstep={0.01}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={[config.noiseOpacity]}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonValueChange={([value]) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"noiseOpacity\", value)\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center space-x-2\">\n\t\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\t\tid=\"enableMouseGlow\"\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={config.enableMouseGlow}\n\t\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\"enableMouseGlow\", checked)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"enableMouseGlow\">\n\t\t\t\t\t\t\t\t\t\t\t\tEnable Mouse Glow\n\t\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t\t<AccordionItem value=\"performance\">\n\t\t\t\t\t\t\t\t<AccordionTrigger>Performance</AccordionTrigger>\n\t\t\t\t\t\t\t\t<AccordionContent>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<Label htmlFor=\"initialPerformance\">\n\t\t\t\t\t\t\t\t\t\t\tInitial Performance\n\t\t\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\t\t\tvalue={config.initialPerformance}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={(value) =>\n\t\t\t\t\t\t\t\t\t\t\t\tupdateConfig(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"initialPerformance\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue as \"low\" | \"medium\" | \"high\"\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SelectTrigger id=\"initialPerformance\">\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"low\">Low</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tMedium\n\t\t\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<SelectItem value=\"high\">High</SelectItem>\n\t\t\t\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</AccordionContent>\n\t\t\t\t\t\t\t</AccordionItem>\n\t\t\t\t\t\t</Accordion>\n\t\t\t\t\t</CardContent>\n\t\t\t\t</Card>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default ConfigurableFractalDotGridDemo;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/fractal-grid.tsx",
      "content": "\"use client\";\n\nimport React, {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\n\n// Credit:\n// https://www.cult-ui.com/docs/components/bg-animated-fractal-grid\n\ninterface FractalDotGridProps {\n\t/** Size of each dot in pixels */\n\tdotSize?: number;\n\t/** Spacing between dots in pixels */\n\tdotSpacing?: number;\n\t/** Opacity of dots (0-1) */\n\tdotOpacity?: number;\n\t/** Intensity of the wave effect when hovering */\n\twaveIntensity?: number;\n\t/** Radius of the wave effect in pixels */\n\twaveRadius?: number;\n\t/** Color of the dots (supports any valid CSS color) */\n\tdotColor?: string;\n\t/** Color of the dot glow effect (supports any valid CSS color) */\n\tglowColor?: string;\n\t/** Enable or disable the noise overlay */\n\tenableNoise?: boolean;\n\t/** Opacity of the noise overlay (0-1) */\n\tnoiseOpacity?: number;\n\t/** Enable or disable the mouse glow effect */\n\tenableMouseGlow?: boolean;\n\t/** Set the initial performance level */\n\tinitialPerformance?: \"low\" | \"medium\" | \"high\";\n}\n\nconst NoiseSVG = React.memo(() => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\">\n\t\t<filter id=\"noise\">\n\t\t\t<feTurbulence\n\t\t\t\ttype=\"fractalNoise\"\n\t\t\t\tbaseFrequency=\"0.65\"\n\t\t\t\tnumOctaves=\"3\"\n\t\t\t\tstitchTiles=\"stitch\"\n\t\t\t/>\n\t\t</filter>\n\t\t<rect width=\"100%\" height=\"100%\" filter=\"url(#noise)\" />\n\t</svg>\n));\n\nNoiseSVG.displayName = \"NoiseSVG\";\n\nconst NoiseOverlay: React.FC<{ opacity: number }> = ({ opacity }) => (\n\t<div\n\t\tclassName=\"absolute inset-0 h-full w-full mix-blend-overlay\"\n\t\tstyle={{ opacity }}\n\t>\n\t\t<NoiseSVG />\n\t</div>\n);\n\nconst useResponsive = () => {\n\tconst [windowSize, setWindowSize] = useState({\n\t\twidth: typeof window !== \"undefined\" ? window.innerWidth : 0,\n\t\theight: typeof window !== \"undefined\" ? window.innerHeight : 0,\n\t});\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tsetWindowSize({\n\t\t\t\twidth: window.innerWidth,\n\t\t\t\theight: window.innerHeight,\n\t\t\t});\n\t\t};\n\n\t\twindow.addEventListener(\"resize\", handleResize);\n\t\treturn () => window.removeEventListener(\"resize\", handleResize);\n\t}, []);\n\n\treturn {\n\t\tisMobile: windowSize.width < 768,\n\t\tisTablet: windowSize.width >= 768 && windowSize.width < 1024,\n\t\tisDesktop: windowSize.width >= 1024,\n\t};\n};\n\nconst usePerformance = (\n\tinitialPerformance: \"low\" | \"medium\" | \"high\" = \"medium\"\n) => {\n\tconst [performance, setPerformance] = useState(initialPerformance);\n\tconst [fps, setFps] = useState(60);\n\n\tuseEffect(() => {\n\t\tlet frameCount = 0;\n\t\tlet lastTime = globalThis.performance.now();\n\t\tlet framerId: number;\n\n\t\tconst measureFps = (time: number) => {\n\t\t\tframeCount++;\n\t\t\tif (time - lastTime > 1000) {\n\t\t\t\tsetFps(Math.round((frameCount * 1000) / (time - lastTime)));\n\t\t\t\tframeCount = 0;\n\t\t\t\tlastTime = time;\n\t\t\t}\n\t\t\tframerId = requestAnimationFrame(measureFps);\n\t\t};\n\n\t\tframerId = requestAnimationFrame(measureFps);\n\n\t\treturn () => cancelAnimationFrame(framerId);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (fps < 30 && performance !== \"low\") {\n\t\t\tsetPerformance(\"low\");\n\t\t} else if (fps >= 30 && fps < 50 && performance !== \"medium\") {\n\t\t\tsetPerformance(\"medium\");\n\t\t} else if (fps >= 50 && performance !== \"high\") {\n\t\t\tsetPerformance(\"high\");\n\t\t}\n\t}, [fps, performance]);\n\n\treturn { performance, fps };\n};\n\nconst DotCanvas: React.FC<{\n\tdotSize: number;\n\tdotSpacing: number;\n\tdotOpacity: number;\n\twaveIntensity: number;\n\twaveRadius: number;\n\tdotColor: string;\n\tglowColor: string;\n\tperformance: \"low\" | \"medium\" | \"high\";\n\tmousePos: { x: number; y: number };\n}> = React.memo(\n\t({\n\t\tdotSize,\n\t\tdotSpacing,\n\t\tdotOpacity,\n\t\twaveIntensity,\n\t\twaveRadius,\n\t\tdotColor,\n\t\tglowColor,\n\t\tperformance,\n\t\tmousePos,\n\t}) => {\n\t\tconst canvasRef = useRef<HTMLCanvasElement>(null);\n\t\tconst animationRef = useRef<number>();\n\n\t\tconst drawDots = useCallback(\n\t\t\t(ctx: CanvasRenderingContext2D, time: number) => {\n\t\t\t\tconst { width, height } = ctx.canvas;\n\t\t\t\tctx.clearRect(0, 0, width, height);\n\n\t\t\t\tconst performanceSettings = {\n\t\t\t\t\tlow: { skip: 3 },\n\t\t\t\t\tmedium: { skip: 2 },\n\t\t\t\t\thigh: { skip: 1 },\n\t\t\t\t};\n\n\t\t\t\tconst skip = performanceSettings[performance].skip;\n\n\t\t\t\tconst cols = Math.ceil(width / dotSpacing);\n\t\t\t\tconst rows = Math.ceil(height / dotSpacing);\n\n\t\t\t\tconst centerX = mousePos.x * width;\n\t\t\t\tconst centerY = mousePos.y * height;\n\n\t\t\t\tfor (let i = 0; i < cols; i += skip) {\n\t\t\t\t\tfor (let j = 0; j < rows; j += skip) {\n\t\t\t\t\t\tconst x = i * dotSpacing;\n\t\t\t\t\t\tconst y = j * dotSpacing;\n\n\t\t\t\t\t\tconst distanceX = x - centerX;\n\t\t\t\t\t\tconst distanceY = y - centerY;\n\t\t\t\t\t\tconst distance = Math.sqrt(\n\t\t\t\t\t\t\tdistanceX * distanceX + distanceY * distanceY\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tlet dotX = x;\n\t\t\t\t\t\tlet dotY = y;\n\n\t\t\t\t\t\tif (distance < waveRadius) {\n\t\t\t\t\t\t\tconst waveStrength = Math.pow(\n\t\t\t\t\t\t\t\t1 - distance / waveRadius,\n\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst angle = Math.atan2(distanceY, distanceX);\n\t\t\t\t\t\t\tconst waveOffset =\n\t\t\t\t\t\t\t\tMath.sin(distance * 0.05 - time * 0.005) *\n\t\t\t\t\t\t\t\twaveIntensity *\n\t\t\t\t\t\t\t\twaveStrength;\n\t\t\t\t\t\t\tdotX += Math.cos(angle) * waveOffset;\n\t\t\t\t\t\t\tdotY += Math.sin(angle) * waveOffset;\n\n\t\t\t\t\t\t\tconst glowRadius = dotSize * (1 + waveStrength);\n\t\t\t\t\t\t\tconst gradient = ctx.createRadialGradient(\n\t\t\t\t\t\t\t\tdotX,\n\t\t\t\t\t\t\t\tdotY,\n\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\tdotX,\n\t\t\t\t\t\t\t\tdotY,\n\t\t\t\t\t\t\t\tglowRadius\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tgradient.addColorStop(\n\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\tglowColor.replace(\n\t\t\t\t\t\t\t\t\t\"1)\",\n\t\t\t\t\t\t\t\t\t`${dotOpacity * (1 + waveStrength)})`\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tgradient.addColorStop(1, glowColor.replace(\"1)\", \"0)\"));\n\t\t\t\t\t\t\tctx.fillStyle = gradient;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tctx.fillStyle = dotColor.replace(\"1)\", `${dotOpacity})`);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tctx.beginPath();\n\t\t\t\t\t\tctx.arc(dotX, dotY, dotSize / 2, 0, Math.PI * 2);\n\t\t\t\t\t\tctx.fill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t[\n\t\t\t\tdotSize,\n\t\t\t\tdotSpacing,\n\t\t\t\tdotOpacity,\n\t\t\t\twaveIntensity,\n\t\t\t\twaveRadius,\n\t\t\t\tdotColor,\n\t\t\t\tglowColor,\n\t\t\t\tperformance,\n\t\t\t\tmousePos,\n\t\t\t]\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst canvas = canvasRef.current;\n\t\t\tif (!canvas) return;\n\n\t\t\tconst ctx = canvas.getContext(\"2d\");\n\t\t\tif (!ctx) return;\n\n\t\t\tconst resizeCanvas = () => {\n\t\t\t\tcanvas.width = window.innerWidth;\n\t\t\t\tcanvas.height = window.innerHeight;\n\t\t\t};\n\n\t\t\tresizeCanvas();\n\t\t\twindow.addEventListener(\"resize\", resizeCanvas);\n\n\t\t\tlet lastTime = 0;\n\t\t\tconst animate = (time: number) => {\n\t\t\t\tif (time - lastTime > 16) {\n\t\t\t\t\tdrawDots(ctx, time);\n\t\t\t\t\tlastTime = time;\n\t\t\t\t}\n\t\t\t\tanimationRef.current = requestAnimationFrame(animate);\n\t\t\t};\n\n\t\t\tanimationRef.current = requestAnimationFrame(animate);\n\n\t\t\treturn () => {\n\t\t\t\twindow.removeEventListener(\"resize\", resizeCanvas);\n\t\t\t\tif (animationRef.current) {\n\t\t\t\t\tcancelAnimationFrame(animationRef.current);\n\t\t\t\t}\n\t\t\t};\n\t\t}, [drawDots]);\n\n\t\treturn (\n\t\t\t<canvas\n\t\t\t\tref={canvasRef}\n\t\t\t\tclassName=\"absolute inset-0 h-full w-full bg-background\"\n\t\t\t\tstyle={{ mixBlendMode: \"multiply\" }}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nDotCanvas.displayName = \"DotCanvas\";\n\nconst MouseGlow: React.FC<{\n\tglowColor: string;\n\tmousePos: { x: number; y: number };\n}> = React.memo(({ glowColor, mousePos }) => (\n\t<>\n\t\t<div\n\t\t\tclassName=\"absolute w-40 h-40 rounded-full pointer-events-none\"\n\t\t\tstyle={{\n\t\t\t\tbackground: `radial-gradient(circle, ${glowColor.replace(\n\t\t\t\t\t\"1)\",\n\t\t\t\t\t\"0.2)\"\n\t\t\t\t)} 0%, ${glowColor.replace(\"1)\", \"0)\")} 70%)`,\n\t\t\t\tleft: `${mousePos.x * 100}%`,\n\t\t\t\ttop: `${mousePos.y * 100}%`,\n\t\t\t\ttransform: \"translate(-50%, -50%)\",\n\t\t\t\tfilter: \"blur(10px)\",\n\t\t\t}}\n\t\t/>\n\t\t<div\n\t\t\tclassName=\"absolute w-20 h-20 rounded-full pointer-events-none\"\n\t\t\tstyle={{\n\t\t\t\tbackground: `radial-gradient(circle, ${glowColor.replace(\n\t\t\t\t\t\"1)\",\n\t\t\t\t\t\"0.4)\"\n\t\t\t\t)} 0%, ${glowColor.replace(\"1)\", \"0)\")} 70%)`,\n\t\t\t\tleft: `${mousePos.x * 100}%`,\n\t\t\t\ttop: `${mousePos.y * 100}%`,\n\t\t\t\ttransform: \"translate(-50%, -50%)\",\n\t\t\t}}\n\t\t/>\n\t</>\n));\n\nMouseGlow.displayName = \"MouseGlow\";\n\nexport function FractalDotGrid({\n\tdotSize = 4,\n\tdotSpacing = 20,\n\tdotOpacity = 0.3,\n\twaveIntensity = 30,\n\twaveRadius = 200,\n\tdotColor = \"rgba(100, 100, 255, 1)\",\n\tglowColor = \"rgba(100, 100, 255, 1)\",\n\tenableNoise = true,\n\tnoiseOpacity = 0.03,\n\tenableMouseGlow = true,\n\tinitialPerformance = \"medium\",\n}: FractalDotGridProps) {\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst { isMobile, isTablet } = useResponsive();\n\tconst { performance } = usePerformance(initialPerformance);\n\tconst [mousePos, setMousePos] = useState({ x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallback((event: MouseEvent) => {\n\t\tconst { clientX, clientY } = event;\n\t\tconst { left, top, width, height } =\n\t\t\tcontainerRef.current?.getBoundingClientRect() ?? {\n\t\t\t\tleft: 0,\n\t\t\t\ttop: 0,\n\t\t\t\twidth: 0,\n\t\t\t\theight: 0,\n\t\t\t};\n\t\tconst x = (clientX - left) / width;\n\t\tconst y = (clientY - top) / height;\n\t\tsetMousePos({ x, y });\n\t}, []);\n\n\tuseEffect(() => {\n\t\twindow.addEventListener(\"mousemove\", handleMouseMove);\n\t\treturn () => window.removeEventListener(\"mousemove\", handleMouseMove);\n\t}, [handleMouseMove]);\n\n\tconst responsiveDotSize = useMemo(() => {\n\t\tif (isMobile) return dotSize * 0.75;\n\t\tif (isTablet) return dotSize * 0.9;\n\t\treturn dotSize;\n\t}, [isMobile, isTablet, dotSize]);\n\n\tconst responsiveDotSpacing = useMemo(() => {\n\t\tif (isMobile) return dotSpacing * 1.5;\n\t\tif (isTablet) return dotSpacing * 1.25;\n\t\treturn dotSpacing;\n\t}, [isMobile, isTablet, dotSpacing]);\n\n\treturn (\n\t\t<AnimatePresence>\n\t\t\t<motion.div\n\t\t\t\tref={containerRef}\n\t\t\t\tkey=\"fractal-dot-grid\"\n\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\ttransition={{ duration: 1.5, ease: \"easeOut\" }}\n\t\t\t\tclassName=\"absolute inset-0 overflow-hidden w-full h-full\"\n\t\t\t>\n\t\t\t\t<DotCanvas\n\t\t\t\t\tdotSize={responsiveDotSize}\n\t\t\t\t\tdotSpacing={responsiveDotSpacing}\n\t\t\t\t\tdotOpacity={dotOpacity}\n\t\t\t\t\twaveIntensity={waveIntensity}\n\t\t\t\t\twaveRadius={waveRadius}\n\t\t\t\t\tdotColor={dotColor}\n\t\t\t\t\tglowColor={glowColor}\n\t\t\t\t\tperformance={performance}\n\t\t\t\t\tmousePos={mousePos}\n\t\t\t\t/>\n\t\t\t\t{enableNoise && <NoiseOverlay opacity={noiseOpacity} />}\n\t\t\t\t{enableMouseGlow && (\n\t\t\t\t\t<MouseGlow glowColor={glowColor} mousePos={mousePos} />\n\t\t\t\t)}\n\t\t\t</motion.div>\n\t\t</AnimatePresence>\n\t);\n}\n\nexport default FractalDotGrid;\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/card.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\n\r\nconst Card = React.forwardRef<\r\n\tHTMLDivElement,\r\n\tReact.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n\t<div\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"rounded-lg border bg-card text-card-foreground shadow-xs\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\nCard.displayName = \"Card\";\r\n\r\nconst CardHeader = React.forwardRef<\r\n\tHTMLDivElement,\r\n\tReact.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n\t<div\r\n\t\tref={ref}\r\n\t\tclassName={cn(\"flex flex-col space-y-1.5 p-6\", className)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\nCardHeader.displayName = \"CardHeader\";\r\n\r\nconst CardTitle = React.forwardRef<\r\n\tHTMLParagraphElement,\r\n\tReact.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n\t<h3\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"text-2xl font-semibold leading-none tracking-tight\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\nCardTitle.displayName = \"CardTitle\";\r\n\r\nconst CardDescription = React.forwardRef<\r\n\tHTMLParagraphElement,\r\n\tReact.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n\t<p\r\n\t\tref={ref}\r\n\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\nCardDescription.displayName = \"CardDescription\";\r\n\r\nconst CardContent = React.forwardRef<\r\n\tHTMLDivElement,\r\n\tReact.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n\t<div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\r\n));\r\nCardContent.displayName = \"CardContent\";\r\n\r\nconst CardFooter = React.forwardRef<\r\n\tHTMLDivElement,\r\n\tReact.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n\t<div\r\n\t\tref={ref}\r\n\t\tclassName={cn(\"flex items-center p-6 pt-0\", className)}\r\n\t\t{...props}\r\n\t/>\r\n));\r\nCardFooter.displayName = \"CardFooter\";\r\n\r\nexport {\r\n\tCard,\r\n\tCardHeader,\r\n\tCardFooter,\r\n\tCardTitle,\r\n\tCardDescription,\r\n\tCardContent,\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/slider.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\n\r\nconst Slider = React.forwardRef<\r\n\tReact.ElementRef<typeof SliderPrimitive.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<SliderPrimitive.Root\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"relative flex w-full touch-none select-none items-center\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t>\r\n\t\t<SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\r\n\t\t\t<SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\r\n\t\t</SliderPrimitive.Track>\r\n\t\t<SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\r\n\t\t<SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\r\n\t</SliderPrimitive.Root>\r\n));\r\nSlider.displayName = SliderPrimitive.Root.displayName;\r\n\r\nexport { Slider };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/switch.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\r\n\r\nconst Switch = React.forwardRef<\r\n\tReact.ElementRef<typeof SwitchPrimitives.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<SwitchPrimitives.Root\r\n\t\tclassName={cn(\r\n\t\t\t\"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t\tref={ref}\r\n\t>\r\n\t\t<SwitchPrimitives.Thumb\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\r\n\t\t\t)}\r\n\t\t/>\r\n\t</SwitchPrimitives.Root>\r\n));\r\nSwitch.displayName = SwitchPrimitives.Root.displayName;\r\n\r\nexport { Switch };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/use-toast.tsx",
      "content": "\"use client\"\r\n\r\n// Inspired by react-hot-toast library\r\nimport React from \"react\"\r\n\r\nimport type {\r\n  ToastActionElement,\r\n  ToastProps,\r\n} from \"./toast\"\r\n\r\nconst TOAST_LIMIT = 1\r\nconst TOAST_REMOVE_DELAY = 1000000\r\n\r\ntype ToasterToast = ToastProps & {\r\n  id: string\r\n  title?: React.ReactNode\r\n  description?: React.ReactNode\r\n  action?: ToastActionElement\r\n}\r\n\r\nconst actionTypes = {\r\n  ADD_TOAST: \"ADD_TOAST\",\r\n  UPDATE_TOAST: \"UPDATE_TOAST\",\r\n  DISMISS_TOAST: \"DISMISS_TOAST\",\r\n  REMOVE_TOAST: \"REMOVE_TOAST\",\r\n} as const\r\n\r\nlet count = 0\r\n\r\nfunction genId() {\r\n  count = (count + 1) % Number.MAX_SAFE_INTEGER\r\n  return count.toString()\r\n}\r\n\r\ntype ActionType = typeof actionTypes\r\n\r\ntype Action =\r\n  | {\r\n      type: ActionType[\"ADD_TOAST\"]\r\n      toast: ToasterToast\r\n    }\r\n  | {\r\n      type: ActionType[\"UPDATE_TOAST\"]\r\n      toast: Partial<ToasterToast>\r\n    }\r\n  | {\r\n      type: ActionType[\"DISMISS_TOAST\"]\r\n      toastId?: ToasterToast[\"id\"]\r\n    }\r\n  | {\r\n      type: ActionType[\"REMOVE_TOAST\"]\r\n      toastId?: ToasterToast[\"id\"]\r\n    }\r\n\r\ninterface State {\r\n  toasts: ToasterToast[]\r\n}\r\n\r\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()\r\n\r\nconst addToRemoveQueue = (toastId: string) => {\r\n  if (toastTimeouts.has(toastId)) {\r\n    return\r\n  }\r\n\r\n  const timeout = setTimeout(() => {\r\n    toastTimeouts.delete(toastId)\r\n    dispatch({\r\n      type: \"REMOVE_TOAST\",\r\n      toastId: toastId,\r\n    })\r\n  }, TOAST_REMOVE_DELAY)\r\n\r\n  toastTimeouts.set(toastId, timeout)\r\n}\r\n\r\nexport const reducer = (state: State, action: Action): State => {\r\n  switch (action.type) {\r\n    case \"ADD_TOAST\":\r\n      return {\r\n        ...state,\r\n        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\r\n      }\r\n\r\n    case \"UPDATE_TOAST\":\r\n      return {\r\n        ...state,\r\n        toasts: state.toasts.map((t) =>\r\n          t.id === action.toast.id ? { ...t, ...action.toast } : t\r\n        ),\r\n      }\r\n\r\n    case \"DISMISS_TOAST\": {\r\n      const { toastId } = action\r\n\r\n      // ! Side effects ! - This could be extracted into a dismissToast() action,\r\n      // but I'll keep it here for simplicity\r\n      if (toastId) {\r\n        addToRemoveQueue(toastId)\r\n      } else {\r\n        state.toasts.forEach((toast) => {\r\n          addToRemoveQueue(toast.id)\r\n        })\r\n      }\r\n\r\n      return {\r\n        ...state,\r\n        toasts: state.toasts.map((t) =>\r\n          t.id === toastId || toastId === undefined\r\n            ? {\r\n                ...t,\r\n                open: false,\r\n              }\r\n            : t\r\n        ),\r\n      }\r\n    }\r\n    case \"REMOVE_TOAST\":\r\n      if (action.toastId === undefined) {\r\n        return {\r\n          ...state,\r\n          toasts: [],\r\n        }\r\n      }\r\n      return {\r\n        ...state,\r\n        toasts: state.toasts.filter((t) => t.id !== action.toastId),\r\n      }\r\n  }\r\n}\r\n\r\nconst listeners: Array<(state: State) => void> = []\r\n\r\nlet memoryState: State = { toasts: [] }\r\n\r\nfunction dispatch(action: Action) {\r\n  memoryState = reducer(memoryState, action)\r\n  listeners.forEach((listener) => {\r\n    listener(memoryState)\r\n  })\r\n}\r\n\r\ntype Toast = Omit<ToasterToast, \"id\">\r\n\r\nfunction toast({ ...props }: Toast) {\r\n  const id = genId()\r\n\r\n  const update = (props: ToasterToast) =>\r\n    dispatch({\r\n      type: \"UPDATE_TOAST\",\r\n      toast: { ...props, id },\r\n    })\r\n  const dismiss = () => dispatch({ type: \"DISMISS_TOAST\", toastId: id })\r\n\r\n  dispatch({\r\n    type: \"ADD_TOAST\",\r\n    toast: {\r\n      ...props,\r\n      id,\r\n      open: true,\r\n      onOpenChange: (open) => {\r\n        if (!open) dismiss()\r\n      },\r\n    },\r\n  })\r\n\r\n  return {\r\n    id: id,\r\n    dismiss,\r\n    update,\r\n  }\r\n}\r\n\r\nfunction useToast() {\r\n  const [state, setState] = React.useState<State>(memoryState)\r\n\r\n  React.useEffect(() => {\r\n    listeners.push(setState)\r\n    return () => {\r\n      const index = listeners.indexOf(setState)\r\n      if (index > -1) {\r\n        listeners.splice(index, 1)\r\n      }\r\n    }\r\n  }, [state])\r\n\r\n  return {\r\n    ...state,\r\n    toast,\r\n    dismiss: (toastId?: string) => dispatch({ type: \"DISMISS_TOAST\", toastId }),\r\n  }\r\n}\r\n\r\nexport { useToast, toast }\r\n",
      "type": "registry:ui"
    }
  ]
}