{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stream-glow",
  "title": "Stream Glow",
  "description": "An edge that breathes along a region while tokens land in it.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/stream-glow/stream-glow.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nexport type StreamGlowProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Whether anything is arriving. */\n  active?: boolean\n  /** Nought to one. Faster arrival breathes faster and reaches further. */\n  rate?: number\n  color?: string\n  /** Thickness of the glow in pixels. */\n  spread?: number\n}\n\n/**\n * An edge that breathes along a region while tokens land in it. It says only\n * that something is arriving, so it belongs beside a stop control and a\n * written status rather than in place of either.\n */\nexport function StreamGlow({\n  active = false,\n  rate = 0.5,\n  color = \"--primary\",\n  spread = 22,\n  className,\n  style,\n  children,\n  ...rootProps\n}: StreamGlowProps) {\n  const level = Math.min(1, Math.max(0, rate))\n\n  return (\n    <div\n      data-slot=\"stream-glow\"\n      data-active={active ? \"\" : undefined}\n      className={cn(\"relative isolate\", className)}\n      style={\n        {\n          \"--glow-color\": color.startsWith(\"--\") ? `var(${color})` : color,\n          \"--glow-spread\": `${spread}px`,\n          \"--glow-duration\": `${(2.4 - level * 1.6).toFixed(2)}s`,\n          \"--glow-peak\": (0.35 + level * 0.45).toFixed(2),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rootProps}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-500\",\n          \"shadow-[inset_0_0_var(--glow-spread)_color-mix(in_oklch,var(--glow-color)_70%,transparent)]\",\n          \"data-active:animate-pulse data-active:opacity-[var(--glow-peak)]\",\n          \"motion-reduce:animate-none\"\n        )}\n        data-active={active ? \"\" : undefined}\n        style={{ animationDuration: \"var(--glow-duration)\" }}\n      />\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "ai",
    "agent",
    "streaming",
    "feedback"
  ],
  "type": "registry:ui"
}