refactor(web): улучшить компоненты KpiStatGrid и KpiStatCardBody для более компактного отображения

- Обновлены стили и структура компонентов KpiStatGrid и KpiStatCardBody для улучшения визуального представления.
- Изменены классы и добавлены новые стили для более гибкого и компактного макета.
- Обновлена документация для отражения изменений в интерфейсе и описания нового визуального представления KPI.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -71,11 +71,11 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) {
   const valueVariant = card.variant ?? 'default'
 
   return (
-    <div className="relative z-10 flex h-full flex-col items-start gap-3">
+    <div className="relative z-10 flex h-full items-start gap-3">
       {card.icon ? (
         <Item
           className={cn(
-            'border-background bg-muted flex size-10.5 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
+            'border-background bg-muted flex size-10.5 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] dark:border [&_svg]:size-4',
             card.iconClassName ?? DEFAULT_ICON_CLASS,
           )}
         >
@@ -85,7 +85,11 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) {
         </Item>
       ) : null}
 
-      <div className="flex flex-col gap-0.5">
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex items-start justify-between gap-2">
+          <span className="text-muted-foreground text-sm font-medium">{card.label}</span>
+          {footer ? <div className="shrink-0">{footer}</div> : null}
+        </div>
         <span
           className={cn(
             'text-2xl leading-none font-bold tabular-nums',
@@ -94,10 +98,7 @@ function KpiStatCardBody({ card }: { card: KpiStatCard }) {
         >
           {card.value}
         </span>
-        <span className="text-muted-foreground text-sm font-medium">{card.label}</span>
       </div>
-
-      {footer ? <div className="mt-auto w-full">{footer}</div> : null}
     </div>
   )
 }
@@ -147,11 +148,15 @@ function KpiStatGridSkeleton({ count }: { count: number }) {
     <Frame className="@container w-full">
       <div className={cn('grid gap-2', kpiCols(count))}>
         {Array.from({ length: count }).map((_, index) => (
-          <FramePanel key={index} className="flex flex-col gap-3">
+          <FramePanel key={index} className="flex items-start gap-3">
-            <Skeleton className="size-10.5 rounded-lg" />
+            <Skeleton className="size-10.5 shrink-0 rounded-lg" />
-            <Skeleton className="h-7 w-14" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-            <Skeleton className="h-4 w-20" />
+              <div className="flex items-center justify-between gap-2">
-            <Skeleton className="mt-auto h-4.5 w-16 rounded-full" />
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4.5 w-14 rounded-full" />
+              </div>
+              <Skeleton className="h-7 w-16" />
+            </div>
           </FramePanel>
         ))}
       </div>
@@ -160,7 +165,7 @@ function KpiStatGridSkeleton({ count }: { count: number }) {
 }
 
 /**
- * Hybrid KPI grid — compact stats-12 Frame strip.
+ * Hybrid KPI — EvoBGP visual (colored icon + Badge) + horizontal compact layout.
  * Preview: https://reui.io/preview/base/stats-12
  */
 export function KpiStatGrid({

apps/web/src/lib/ui-surface.ts

@@ -2,8 +2,8 @@
  * VPS Tracker UI surface contract (ReUI Pro).
  *
  * Ops / list / dashboard / detail / settings: **Frame** only.
- * KPI: hybrid compact **stats-12** via `reui-kit/KpiStatGrid`
+ * KPI: horizontal compact hybrid via `reui-kit/KpiStatGrid`
- * (colored icon → value ± variant → label → Badge footer).
+ * (icon left + label/Badge + value ± variant).
  * Lists: **data-grid-filtering-2** via `reui-kit/ResourcePage`.
  *
  * @see https://reui.io/preview/base/stats-12
@@ -12,5 +12,5 @@
  */
 export const UI_SURFACE = 'frame' as const
 
-/** Grid for hybrid compact stats-12 KPI rows (3–6 tiles). */
+/** Grid for horizontal compact hybrid KPI rows (3–6 tiles). */
 export const kpiStatGridClassName = '@container w-full'

docs/ui-design-contract.md

@@ -18,7 +18,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 | Зона | Block | Preview |
 |------|-------|---------|
 | Shell | `app-shell-12` (+ cmdk/monitor где нужно) | https://reui.io/preview/base/app-shell-12 |
-| KPI | hybrid `stats-12` (compact Frame strip: colored icon → value ± variant → label → Badge footer) | https://reui.io/preview/base/stats-12 |
+| KPI | horizontal compact hybrid (icon left + label/Badge + value ± variant; EvoBGP visual) | https://reui.io/preview/base/stats-12 |
 | Dashboard | `dashboard-1` | https://reui.io/preview/base/dashboard-1 |
 | Lists | `data-grid-filtering-2` | https://reui.io/preview/base/data-grid-filtering-2 |
 | Settings | `settings-16` + SettingRow | https://reui.io/preview/base/settings-16 |
@@ -31,7 +31,7 @@ Ops / list / dashboard / detail / settings — только **Frame**, не shad
 | Component | Role |
 |-----------|------|
 | `ResourcePage` | Frame + line tabs + Filters + DataGrid |
-| `KpiStatGrid` | hybrid compact stats-12 KPI tiles (`variant`, Badge footer) |
+| `KpiStatGrid` | horizontal compact hybrid KPI tiles (`variant`, Badge) |
 | `OpsDashboard` | KPI + charts + attention queue |
 | `SettingsShell` | settings nav + Outlet |
 | `DetailPanel` | detail Frame sections |