{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-pulse",
  "type": "registry:component",
  "title": "Alert Pulse",
  "description": "Pulsing ring overlay for alerting canvas objects, with severity tones.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/alert-pulse/alert-pulse.tsx",
      "content": "\"use client\";\n\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/**\n * Severity tone of an alert pulse — drives the ring color.\n *\n * @public\n */\nexport type AlertPulseSeverity = \"error\" | \"info\" | \"warn\";\n\nconst SEVERITY_STROKE: Record<AlertPulseSeverity, string> = {\n  error: \"stroke-red-500\",\n  info: \"stroke-blue-500\",\n  warn: \"stroke-amber-500\",\n};\n\nconst SEVERITY_FILL: Record<AlertPulseSeverity, string> = {\n  error: \"fill-red-500/20\",\n  info: \"fill-blue-500/20\",\n  warn: \"fill-amber-500/20\",\n};\n\nconst SEVERITY_LABEL: Record<AlertPulseSeverity, string> = {\n  error: \"Error\",\n  info: \"Info\",\n  warn: \"Warning\",\n};\n\n/**\n * Localizable strings.\n *\n * @public\n */\nexport type AlertPulseLabels = {\n  /** Override for the aria-label. Defaults to severity name. */\n  region?: string;\n};\n\n/**\n * Props for {@link AlertPulse}.\n *\n * @public\n */\nexport type AlertPulseProps = {\n  /** Center X of the pulse in canvas pixels. */\n  cx: number;\n  /** Center Y of the pulse in canvas pixels. */\n  cy: number;\n  /** Localizable strings. */\n  labels?: AlertPulseLabels;\n  /** Outer ring radius in pixels. Defaults to `36`. */\n  radius?: number;\n  /** Disable the pulse animation. Useful for snapshots. Defaults to `false`. */\n  reducedMotion?: boolean;\n  /** Severity tone. Defaults to `\"warn\"`. */\n  severity?: AlertPulseSeverity;\n} & ComponentPropsWithoutRef<\"svg\">;\n\nconst safeRadius = (value: number): number => (value < 6 ? 6 : value);\n\n/**\n * Pulsing ring overlay drawn around an alerting canvas object. The\n * outer ring expands and fades to communicate \"attention here\";\n * the inner ring stays put so the object remains anchored. Pure\n * presentation; the host computes the center + severity from the\n * runtime alert stream.\n *\n * Render inside a `position: relative` parent that shares the canvas\n * pixel coordinate space; the SVG is `pointer-events: none` so host\n * gestures pass through.\n *\n * @example\n * ```tsx\n * <div className=\"relative h-screen w-screen\">\n *   <Canvas />\n *   <AlertPulse cx={480} cy={320} severity=\"error\" />\n * </div>\n * ```\n *\n * @public\n */\nexport const AlertPulse = forwardRef<SVGSVGElement, AlertPulseProps>(\n  (props, ref) => {\n    const {\n      className,\n      cx,\n      cy,\n      labels,\n      radius = 36,\n      reducedMotion = false,\n      severity = \"warn\",\n      ...rest\n    } = props;\n    const r = safeRadius(radius);\n    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];\n    const size = r * 2 + 24;\n    return (\n      <svg\n        aria-label={ariaLabel}\n        className={cn(\n          \"pointer-events-none absolute z-20 overflow-visible\",\n          className,\n        )}\n        data-alert-pulse\n        data-alert-severity={severity}\n        height={size}\n        ref={ref}\n        role=\"img\"\n        style={{\n          left: cx - size / 2,\n          top: cy - size / 2,\n        }}\n        width={size}\n        {...rest}\n      >\n        <circle\n          className={cn(\"origin-center\", SEVERITY_STROKE[severity])}\n          cx={size / 2}\n          cy={size / 2}\n          fill=\"none\"\n          r={r}\n          strokeOpacity={0.7}\n          strokeWidth={2}\n        />\n        <circle\n          className={cn(\n            \"origin-center\",\n            SEVERITY_STROKE[severity],\n            SEVERITY_FILL[severity],\n            reducedMotion ? null : \"animate-ping\",\n          )}\n          cx={size / 2}\n          cy={size / 2}\n          data-alert-pulse-ring\n          r={r}\n          strokeOpacity={0.4}\n          strokeWidth={2}\n        />\n      </svg>\n    );\n  },\n);\nAlertPulse.displayName = \"AlertPulse\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}