feat: add reui configuration for enhanced API integration

Updated .mcp.json and .cursor/mcp.json to include reui configuration for HTTP API integration, specifying the URL and necessary headers. Modified components.json to enhance the @reui registry with authorization headers, improving security and access to resources.

apps/web/src/components/analytics/analytics-card-shell.tsx

@@ -53,8 +53,8 @@ export function AnalyticsCardShell({
       actions={actions}
       footer={footer}
       className={cn('overflow-hidden', className)}
-      contentClassName="flex flex-col gap-4 py-4"
-      footerClassName={footer ? 'gap-2 p-3' : undefined}
+      contentClassName="flex flex-col gap-5 py-5"
+      footerClassName={footer ? 'gap-2 px-5 py-4' : undefined}
     >
       {children}
     </PanelCard>

apps/web/src/components/data-grid-shell.tsx

@@ -4,13 +4,14 @@ import type { Table } from '@tanstack/react-table'
 import { cn } from '@evobgp/ui/lib/utils'
 
 import { DataGridToolbar } from '@/components/data-grid-toolbar'
-import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName } from '@/components/panel-card'
+import { PanelCard, panelCardContentFlushClassName, panelCardFooterClassName, panelCardInsetClassName } from '@/components/panel-card'
 import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
 import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
 import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
 import {
   DATA_GRID_MESSAGES_RU,
   DATA_GRID_PAGINATION_RU,
+  DATA_GRID_TABLE_CLASS_NAMES,
   DATA_GRID_TABLE_LAYOUT,
 } from '@/lib/data-grid-defaults'
 
@@ -43,14 +44,15 @@ export function DataGridShell<TData extends object>({
       emptyMessage={emptyMessage ?? DATA_GRID_MESSAGES_RU.emptyMessage}
       loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
       tableLayout={tableLayout}
+      tableClassNames={DATA_GRID_TABLE_CLASS_NAMES}
       className={className}
       onRowClick={onRowClick}
     >
-      <DataGridContainer>
+      <DataGridContainer border={false}>
         <DataGridTable />
       </DataGridContainer>
       {showPagination ? (
-        <div className={cn(panelCardFooterClassName, 'px-3 py-2')}>
+        <div className={cn(panelCardFooterClassName, panelCardInsetClassName)}>
           <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
         </div>
       ) : null}

apps/web/src/components/data-grid-toolbar.tsx

@@ -9,6 +9,9 @@ import {
 } from '@evobgp/ui/components/input-group'
 import { ListFilterIcon, SearchIcon, XIcon } from 'lucide-react'
 
+import { panelCardInsetClassName } from '@/components/panel-card'
+import { cn } from '@evobgp/ui/lib/utils'
+
 interface DataGridToolbarProps {
   searchValue: string
   onSearchChange: (value: string) => void
@@ -28,7 +31,7 @@ export function DataGridToolbar({
   className,
 }: DataGridToolbarProps) {
   return (
-    <div className={`flex flex-wrap items-center gap-2 border-b px-3 py-2 ${className ?? ''}`}>
+    <div className={cn('flex flex-wrap items-center gap-3 border-b', panelCardInsetClassName, className)}>
       <Field className="min-w-[200px] flex-1">
         <InputGroup>
           <InputGroupAddon align="inline-start">

apps/web/src/components/panel-card.tsx

@@ -11,11 +11,13 @@ import {
 } from '@evobgp/ui/components/card'
 import { cn } from '@evobgp/ui/lib/utils'
 
-/** REUI c-data-grid-19: flush card shell with compact header spacing. */
-export const panelCardClassName = 'gap-0 py-0'
-export const panelCardHeaderClassName = 'border-b [.border-b]:pb-3'
+/** REUI c-data-grid-19: card shell with default spacing and flush grid body. */
+export const panelCardClassName = 'gap-0 has-data-[slot=card-footer]:pb-0'
+export const panelCardHeaderClassName = 'border-b'
 export const panelCardContentFlushClassName = 'px-0'
-export const panelCardFooterClassName = 'border-t bg-transparent py-0'
+/** Horizontal inset for toolbar / pagination rows (matches edgeCell px-5). */
+export const panelCardInsetClassName = 'px-5 py-3'
+export const panelCardFooterClassName = 'border-t bg-transparent'
 
 interface PanelCardProps {
   title?: ReactNode
@@ -40,7 +42,7 @@ export function PanelCard({
   headerClassName,
   contentClassName,
   footerClassName,
-  size = 'sm',
+  size = 'default',
 }: PanelCardProps) {
   const hasHeader = Boolean(title || description || actions)
 

apps/web/src/components/section-cards.tsx

@@ -42,7 +42,7 @@ export function SectionCards({ items, className }: { items: SectionCardItem[]; c
       {items.map((item, idx) => {
         const clickable = Boolean(item.onClick)
         const content = (
-          <CardContent className="flex items-start gap-2.5 px-3 py-2">
+          <CardContent className="flex items-start gap-3 px-4 py-3">
             {item.icon ? (
               <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground">
                 {item.icon}
@@ -82,7 +82,7 @@ export function SectionCards({ items, className }: { items: SectionCardItem[]; c
             key={typeof item.label === 'string' ? item.label : idx}
             size="sm"
             className={cn(
-              'gap-0 py-0',
+              'gap-0',
               VARIANT_CLASS[item.variant ?? 'default'],
               item.active && 'border-primary ring-1 ring-primary/30',
               clickable && 'cursor-pointer transition-colors hover:bg-muted/40',

apps/web/src/components/skeletons.tsx

@@ -1,6 +1,8 @@
 import { Card, CardContent } from '@evobgp/ui/components/card'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
+import { cn } from '@evobgp/ui/lib/utils'
 
+import { panelCardInsetClassName } from '@/components/panel-card'
 import { SectionCards } from './section-cards'
 
 export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
@@ -18,8 +20,8 @@ export function SectionCardsSkeleton({ count = 4 }: { count?: number }) {
 export function AnalyticsDashboardSkeleton() {
   return (
     <div className="grid gap-4 lg:grid-cols-3 lg:items-start">
-      <Card size="sm" className="gap-0 py-0">
-        <CardContent className="space-y-4 py-4">
+      <Card className="gap-0">
+        <CardContent className="space-y-5 py-5">
           <Skeleton className="h-4 w-40" />
           <div className="grid gap-4 sm:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
@@ -30,15 +32,15 @@ export function AnalyticsDashboardSkeleton() {
           <Skeleton className="h-32 w-full" />
         </CardContent>
       </Card>
-      <Card size="sm" className="gap-0 py-0">
-        <CardContent className="space-y-4 py-4">
+      <Card className="gap-0">
+        <CardContent className="space-y-5 py-5">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-10 w-24" />
           <Skeleton className="h-36 w-full" />
         </CardContent>
       </Card>
-      <Card size="sm" className="gap-0 py-0">
-        <CardContent className="space-y-4 py-4">
+      <Card className="gap-0">
+        <CardContent className="space-y-5 py-5">
           <Skeleton className="h-4 w-32" />
           <Skeleton className="h-44 w-full" />
         </CardContent>
@@ -49,16 +51,16 @@ export function AnalyticsDashboardSkeleton() {
 
 export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
   return (
-    <Card size="sm" className="gap-0 py-0">
+    <Card className="gap-0">
       <CardContent className="p-0">
         <div className="flex flex-col">
-          <div className="flex gap-2 border-b px-3 py-2">
+          <div className={cn('flex gap-2 border-b', panelCardInsetClassName)}>
             {Array.from({ length: cols }).map((_, i) => (
               <Skeleton className="h-4 flex-1" key={`h-${i}`} />
             ))}
           </div>
           {Array.from({ length: rows }).map((_, r) => (
-            <div className="flex gap-2 border-b px-3 py-2" key={`r-${r}`}>
+            <div className={cn('flex gap-2 border-b', panelCardInsetClassName)} key={`r-${r}`}>
               {Array.from({ length: cols }).map((_, c) => (
                 <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
               ))}