fix(ui): выровнять confirms и токены под ReUI PRO

Добавить ui-design-contract, AlertDialog вместо hand-roll, CodeExportSheet для preview фильтров, ReUI Badge и gap вместо space-y.

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

app/(main)/data-collection/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { FormToggle } from "@/components/form-kit"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { Button, buttonVariants } from "@/components/ui/button"
 import { Frame, FramePanel } from "@/components/reui/frame"
 import { IconTile } from "@/components/reui/icon-tile"
@@ -104,7 +104,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "traffic") {
     const t = snap as TrafficRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {t.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущий сбор трафика ещё выполнялся.</p>
         ) : null}
@@ -126,7 +126,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "uptime_resources") {
     const u = snap as ResourcesRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {u.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: сбор ресурсов уже выполняется.</p>
         ) : null}
@@ -148,7 +148,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "servers_rest_ping") {
     const s = snap as ServersRestPingRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {s.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущая проверка API ещё выполнялась.</p>
         ) : null}
@@ -171,7 +171,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "uptime_ping") {
     const p = snap as PingRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {p.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: сбор ping уже выполняется.</p>
         ) : null}
@@ -196,7 +196,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "uptime_speed") {
     const s = snap as SpeedScheduledRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-xs text-muted-foreground">
           Прогоны speed на <span className="font-mono tabular-nums">{new Date(s.sampledAt).toLocaleString("ru-RU")}</span> — по очереди для каждой включённой пробы
         </p>
@@ -209,7 +209,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "gre_bgp") {
     const g = snap as GreBgpSnapshotRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {g.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущий сбор GRE/BGP ещё выполнялся.</p>
         ) : null}
@@ -235,7 +235,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </div>
         </dl>
         {g.errors?.length ? (
-          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 space-y-1">
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 flex flex-col gap-1">
             {g.errors.map((e, i) => (
               <p key={i} className="break-words">
                 {e}
@@ -249,7 +249,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "internet_path") {
     const p = snap as InternetPathRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-xs text-muted-foreground">
           Снимок internet-path на{" "}
           <span className="font-mono tabular-nums">{new Date(p.sampledAt).toLocaleString("ru-RU")}</span>
@@ -276,7 +276,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "certificates_renew") {
     const c = snap as CertificatesRenewRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {c.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущая проверка ещё выполнялась или задача отключена.</p>
         ) : null}
@@ -299,7 +299,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </div>
         </dl>
         {c.errors.length ? (
-          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 space-y-1">
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 flex flex-col gap-1">
             {c.errors.map((e, i) => (
               <p key={i} className="break-words">{e}</p>
             ))}
@@ -311,7 +311,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "backups") {
     const b = snap as BackupsRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <dl className="grid grid-cols-2 gap-3 text-xs sm:grid-cols-4">
           <div>
             <dt className="text-muted-foreground">Слот расписания</dt>
@@ -331,7 +331,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </div>
         </dl>
         {b.errors?.length ? (
-          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 space-y-1">
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 flex flex-col gap-1">
             {b.errors.map((e, i) => (
               <p key={i} className="break-words">{e}</p>
             ))}
@@ -343,7 +343,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "alert_engine") {
     const a = snap as AlertEngineRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-xs text-muted-foreground">
           Снимок на{" "}
           <span className="font-mono tabular-nums">{new Date(a.sampledAt).toLocaleString("ru-RU")}</span>
@@ -370,7 +370,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
         {a.errors?.length ? (
           <Alert variant="destructive" className="py-2">
             <AlertCircleIcon />
-            <AlertDescription className="space-y-1 text-xs">
+            <AlertDescription className="flex flex-col gap-1 text-xs">
               {a.errors.map((e, i) => (
                 <p key={i} className="break-words">
                   {e}
@@ -380,7 +380,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </Alert>
         ) : null}
         {a.ruleDiag && a.ruleDiag.length > 0 ? (
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2 space-y-2">
+          <div className="rounded-md border border-border bg-muted/20 px-3 py-2 flex flex-col gap-2">
             <p className="text-[11px] font-medium text-muted-foreground">По правилам (почему не ушло в Telegram)</p>
             <DataPageCard className="border-0 shadow-none bg-transparent">
               <AlertEngineRuleDiagGrid ruleDiag={a.ruleDiag} />
@@ -398,39 +398,39 @@ function RunRowDetail({ r }: { r: SchedulerRunRowDto }) {
   const jobDesc = SCHEDULER_JOB_DESCRIPTIONS[r.jobKey] ?? "—"
   const snapshot = useMemo(() => parseSchedulerRunSnapshot(r.resultJson ?? null), [r.resultJson])
   return (
-    <div className="space-y-4 text-sm">
+    <div className="flex flex-col gap-4 text-sm">
       <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">ID записи</dt>
           <dd className="font-mono text-xs break-all bg-muted/60 rounded-md px-2 py-1.5 border border-border">{r.id}</dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Ключ задачи</dt>
           <dd className="font-mono text-xs">{r.jobKey}</dd>
         </div>
-        <div className="sm:col-span-2 space-y-1">
+        <div className="sm:col-span-2 flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Название и назначение</dt>
           <dd>
             <span className="font-medium">{jobTitle}</span>
             <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{jobDesc}</p>
           </dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Старт</dt>
           <dd className="tabular-nums text-xs">{new Date(r.startedAt).toLocaleString("ru-RU")}</dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Завершение</dt>
           <dd className="tabular-nums text-xs">{new Date(r.finishedAt).toLocaleString("ru-RU")}</dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Длительность</dt>
           <dd className="tabular-nums">
             <span className="font-mono">{r.durationMs}</span> мс
             <span className="text-muted-foreground text-xs ml-2">({fmtMs(r.durationMs)})</span>
           </dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Результат</dt>
           <dd>
             <Badge
@@ -447,7 +447,7 @@ function RunRowDetail({ r }: { r: SchedulerRunRowDto }) {
         </div>
       </dl>
       {r.error ? (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-1.5">
           <p className="text-xs font-medium text-destructive">Текст ошибки</p>
           <pre
             className="text-xs font-mono whitespace-pre-wrap break-words rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 max-h-48 overflow-y-auto"
@@ -461,7 +461,7 @@ function RunRowDetail({ r }: { r: SchedulerRunRowDto }) {
 
       <Separator />
 
-      <div className="space-y-2">
+      <div className="flex flex-col gap-2">
         <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Результаты измерений</p>
         {snapshot ? (
           <SnapshotTables snap={snapshot} />
@@ -1090,7 +1090,7 @@ export default function DataCollectionPage() {
                 </div>
                 <DataCollectionSchedulerDataGrid rows={schedulerGridRows} />
                 <Separator />
-                <div className="space-y-3 px-5 py-4">
+                <div className="flex flex-col gap-3 px-5 py-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                       <div>
                         <p className="text-xs text-muted-foreground mb-1.5">Хранение сэмплов трафика (дней)</p>
@@ -1142,7 +1142,7 @@ export default function DataCollectionPage() {
                       {schedulerSaveBusy ? <LoaderCircleIcon className="size-4 animate-spin mr-2" /> : null}
                       Сохранить настройки планировщика
                     </Button>
-                    <div className="text-xs text-muted-foreground space-y-0.5 pt-1 border-t border-border/60">
+                    <div className="text-xs text-muted-foreground flex flex-col gap-0.5 pt-1 border-t border-border/60">
                       <p>
                         Трафик — последний сбор:{" "}
                         {trafficCollector?.lastCollectedAt

app/(main)/filters/page.tsx

@@ -35,6 +35,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { toast } from "sonner"
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
 
 // ── helpers ────────────────────────────────────────────────────────────────────
 
@@ -754,13 +755,11 @@ function PreviewModal({ open, serverId, rulesets, onClose, serversList, tunnelsL
   tunnelsList: GreTunnel[]
   recRoutesByServer: Record<string, RecursiveRouteLite[]>
 }) {
-  const [copied, setCopied] = useState(false)
-
   const singleRuleset = useMemo(
     () => rulesets.filter(r => r.serverId === serverId),
     [rulesets, serverId],
   )
-  const server     = serversList.find(s => s.id === serverId)
+  const server = serversList.find(s => s.id === serverId)
   const totalRules = singleRuleset.reduce((s, r) => s + r.rules.length, 0)
 
   const config = useMemo(
@@ -771,93 +770,25 @@ function PreviewModal({ open, serverId, rulesets, onClose, serversList, tunnelsL
     [open, singleRuleset, serversList, tunnelsList, recRoutesByServer],
   )
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(config).catch(() => {})
-    setCopied(true); setTimeout(() => setCopied(false), 2000)
-  }
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative z-10 w-full max-w-2xl mx-4 bg-card rounded-xl border shadow-2xl flex flex-col max-h-[85vh]">
-
-        {/* header */}
-        <div className="flex items-center justify-between px-5 py-3.5 border-b shrink-0">
-          <div className="flex items-center gap-2.5">
-            <FileCodeIcon className="size-4 text-muted-foreground" />
-            <span className="text-sm font-semibold">RouterOS config</span>
-            {server && (
-              <span className="flex items-center gap-1 text-[11px] text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
-                <Flag code={server.country} size={11} />
-                <span className="font-mono">{server.name}</span>
-                <span>· {totalRules} правил</span>
-              </span>
-            )}
-          </div>
-          <Button variant="ghost" size="icon-sm" onClick={onClose}><XIcon className="size-4" /></Button>
-        </div>
-
-        {/* code */}
-        <div className="flex-1 overflow-y-auto p-4 min-h-0">
-          <pre className="text-xs font-mono bg-[#0d1117] rounded-lg p-4 leading-[1.6] whitespace-pre overflow-x-auto">
-            {config.split("\n").map((line, i) => {
-              const trimmed = line.trimStart()
-              const cls =
-                // section dividers
-                trimmed.startsWith("# ═") || trimmed.startsWith("# ─")
-                  ? "text-[#444c56]" :
-                // inline comments inside rule body
-                trimmed.startsWith("# ")
-                  ? "text-[#8b949e]" :
-                // RouterOS scripting keywords
-                trimmed.startsWith(":local") || trimmed.startsWith(":log") || trimmed.startsWith(":foreach")
-                  ? "text-[#d2a8ff]" :
-                // :if identity branch / closing brace
-                trimmed.startsWith(":if") || (trimmed === "}" && line.length < 3)
-                  ? "text-[#ff7b72] font-semibold" :
-                // filter rule add command
-                trimmed.startsWith("/routing filter rule")
-                  ? "text-[#79c0ff]" :
-                // rule body: if/else if branches
-                trimmed.startsWith("if (") || trimmed.startsWith("} else if")
-                  ? "text-[#ff7b72]" :
-                // rule body: blackhole action
-                trimmed.startsWith("set type blackhole")
-                  ? "text-[#ff7b72] font-semibold" :
-                // rule body: set actions
-                trimmed.startsWith("set gw") || trimmed.startsWith("set gateway") || trimmed.startsWith("set out-interface")
-                  ? "text-[#a5d6ff]" :
-                // rule body: accept / rule close
-                trimmed.startsWith("accept") || trimmed === `}"` || trimmed.startsWith(`rule="`)
-                  ? "text-[#79c0ff]" :
-                // named params
-                trimmed.match(/^(chain|comment|bgp-communities)=/)
-                  ? "text-[#a5d6ff]" :
-                  "text-[#c9d1d9]"
-              return <span key={i} className={cn("block", cls)}>{line || " "}</span>
-            })}
-          </pre>
-        </div>
-
-        {/* footer */}
-        <div className="px-5 py-4 border-t bg-muted/30 shrink-0 space-y-3">
-          <div className="grid grid-cols-2 gap-x-6 gap-y-1 text-xs text-muted-foreground">
-            <p>1. Скопируйте скрипт в буфер обмена</p>
-            <p>3. Вставьте в терминал и нажмите Enter</p>
-            <p>2. Подключитесь к любому MikroTik (SSH / Winbox)</p>
-            <p>4. Скрипт сам определит свои правила по identity</p>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={onClose} className="flex-1">Закрыть</Button>
-            <Button onClick={handleCopy} className="flex-1">
-              {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-              {copied ? "Скопировано!" : "Скопировать"}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <CodeExportSheet
+      open={open}
+      onClose={onClose}
+      title="RouterOS config"
+      description={
+        server
+          ? `${server.name} · ${totalRules} правил`
+          : "Экспорт правил фильтрации"
+      }
+      formats={[
+        {
+          id: "rsc",
+          label: "RouterOS",
+          filename: `filters-${server?.name ?? "server"}.rsc`,
+          code: config,
+        },
+      ]}
+    />
   )
 }
 

app/(main)/settings/page.tsx

@@ -16,6 +16,17 @@ import { Separator } from "@/components/ui/separator"
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter,
 } from "@/components/ui/sheet"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
 import { Flag } from "@/components/flag"
 import { StatusDot } from "@/components/status-dot"
 import { servers } from "@/lib/data"
@@ -152,7 +163,7 @@ const PERM_OPTS: { v: PermLevel; label: string }[] = [
 const PERM_COLOR: Record<PermLevel, string> = {
   none:  "bg-muted text-muted-foreground",
   read:  "bg-sky-500/10 text-sky-600 dark:text-sky-400",
-  write: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  write: "bg-success/10 text-success",
 }
 
 const SECTIONS_NAV = ["Общие", "EvoBGP", "Уведомления", "Пользователи", "API-ключи", "Безопасность"] as const
@@ -188,8 +199,8 @@ function PermPills({ value, onChange, disabled }: { value: PermLevel; onChange:
             "px-2 text-[11px] font-medium transition-colors",
             i < PERM_OPTS.length - 1 && "border-r border-input",
             value === o.v
-              ? o.v === "write" ? "bg-emerald-600 text-white dark:bg-emerald-500"
-              : o.v === "read"  ? "bg-sky-600 text-white dark:bg-sky-500"
+              ? o.v === "write" ? "bg-success text-white"
+              : o.v === "read"  ? "bg-info text-white"
               :                   "bg-muted-foreground/70 text-white"
               : "text-muted-foreground hover:bg-muted",
           )}
@@ -685,68 +696,79 @@ function UserSheet({ open, user, onSave, onClose }: {
 // ─── delete confirm ───────────────────────────────────────────────────────────
 
 function DatabaseRestoreConfirm({
+  open,
   filename,
   busy,
   onConfirm,
   onCancel,
 }: {
+  open: boolean
   filename: string
   busy?: boolean
   onConfirm: () => void
   onCancel: () => void
 }) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative z-10 w-full max-w-sm mx-4 bg-card rounded-xl border shadow-2xl p-5 flex flex-col gap-4">
-        <div className="flex items-center gap-3">
-          <div className="size-9 rounded-full bg-destructive/10 flex items-center justify-center shrink-0">
-            <AlertCircleIcon className="size-4 text-destructive" />
-          </div>
-          <div>
-            <p className="text-sm font-semibold">Восстановить базу приложения?</p>
-            <p className="text-xs text-muted-foreground mt-0.5 break-all">{filename}</p>
-          </div>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          Текущие данные SQLite на бекенде будут полностью заменены содержимым файла. Рекомендуется сначала скачать
-          актуальный бэкап.
-        </p>
-        <div className="flex gap-2">
-          <Button variant="outline" className="flex-1" onClick={onCancel} disabled={busy}>Отмена</Button>
-          <Button variant="destructive" className="flex-1" onClick={onConfirm} disabled={busy}>
+    <AlertDialog open={open} onOpenChange={(v) => { if (!v && !busy) onCancel() }}>
+      <AlertDialogContent size="default">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive">
+            <AlertCircleIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Восстановить базу приложения?</AlertDialogTitle>
+          <AlertDialogDescription>
+            Файл: {filename}. Текущие данные SQLite на бекенде будут полностью заменены.
+            Рекомендуется сначала скачать актуальный бэкап.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={busy} onClick={onCancel}>Отмена</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            disabled={busy}
+            onClick={onConfirm}
+          >
             {busy ? <LoaderCircleIcon className="size-4 animate-spin" /> : null}
             {busy ? "Восстановление…" : "Восстановить"}
-          </Button>
-        </div>
-      </div>
-    </div>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
-function DeleteConfirm({ user, onConfirm, onCancel }: { user: User; onConfirm: () => void; onCancel: () => void }) {
+function DeleteConfirm({
+  open,
+  user,
+  onConfirm,
+  onCancel,
+}: {
+  open: boolean
+  user: User
+  onConfirm: () => void
+  onCancel: () => void
+}) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative z-10 w-full max-w-sm mx-4 bg-card rounded-xl border shadow-2xl p-5 flex flex-col gap-4">
-        <div className="flex items-center gap-3">
-          <div className="size-9 rounded-full bg-destructive/10 flex items-center justify-center shrink-0">
-            <TrashIcon className="size-4 text-destructive" />
-          </div>
-          <div>
-            <p className="text-sm font-semibold">Удалить пользователя?</p>
-            <p className="text-xs text-muted-foreground mt-0.5">{user.name} · @{user.login}</p>
-          </div>
-        </div>
-        <p className="text-xs text-muted-foreground">
-          Это действие нельзя отменить. Пользователь потеряет доступ немедленно.
-        </p>
-        <div className="flex gap-2">
-          <Button variant="outline" className="flex-1" onClick={onCancel}>Отмена</Button>
-          <Button variant="destructive" className="flex-1" onClick={onConfirm}>Удалить</Button>
-        </div>
-      </div>
-    </div>
+    <AlertDialog open={open} onOpenChange={(v) => { if (!v) onCancel() }}>
+      <AlertDialogContent size="default">
+        <AlertDialogHeader>
+          <AlertDialogMedia className="bg-destructive/10 text-destructive">
+            <TrashIcon />
+          </AlertDialogMedia>
+          <AlertDialogTitle>Удалить пользователя?</AlertDialogTitle>
+          <AlertDialogDescription>
+            {user.name} · @{user.login}. Это действие нельзя отменить.
+            Пользователь потеряет доступ немедленно.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>Отмена</AlertDialogCancel>
+          <AlertDialogAction variant="destructive" onClick={onConfirm}>
+            Удалить
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
@@ -937,7 +959,7 @@ export default function SettingsPage() {
 
     // ── Общие ──
     if (section === "Общие") return (
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
 
       {/* ── Источник данных ── */}
       <OpsPanel
@@ -960,9 +982,7 @@ export default function SettingsPage() {
                       "px-3 text-xs transition-colors border-input",
                       i === 0 && "border-r",
                       mode === v
-                        ? v === "live"
-                          ? "bg-emerald-600 text-white dark:bg-emerald-500"
-                          : "bg-primary text-primary-foreground"
+                        ? "bg-primary text-primary-foreground"
                         : "text-muted-foreground hover:bg-muted",
                     )}>
                     {l}
@@ -972,7 +992,7 @@ export default function SettingsPage() {
             </SettingRow>
           ) : (
             <SettingRow label="Режим данных" description="В Docker-образе приложение работает только с живыми данными бекенда">
-              <span className="inline-flex h-8 items-center rounded-md border border-input bg-emerald-600 px-3 text-xs text-white dark:bg-emerald-500">
+              <span className="inline-flex h-8 items-center rounded-md border border-input bg-primary px-3 text-xs text-primary-foreground">
                 Живые
               </span>
             </SettingRow>
@@ -1173,7 +1193,7 @@ export default function SettingsPage() {
 
     // ── EvoBGP ──
     if (section === "EvoBGP") return (
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         {(mode !== "live" || backendStatus !== true) && (
           <Frame dense className="w-full">
             <FramePanel className="px-4 py-4">
@@ -1357,7 +1377,7 @@ export default function SettingsPage() {
 
     // ── Уведомления ──
     if (section === "Уведомления") return (
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         <OpsPanel title="Каналы уведомлений" contentClassName="divide-y px-5">
             <SettingRow label="Email" description="Отправка уведомлений на [email protected]">
               <FormToggle checked={notifEmail} onChange={setNotifEmail} />
@@ -1479,11 +1499,11 @@ export default function SettingsPage() {
 
     // ── API-ключи ──
     if (section === "API-ключи") return (
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         <div className="flex justify-end">
           <Button size="sm"><PlusIcon className="size-4" />Создать ключ</Button>
         </div>
-        <div className="space-y-3">
+        <div className="flex flex-col gap-3">
           {apiKeys.map(k => (
             <Frame key={k.id} dense className="w-full">
               <FramePanel className="pt-4 pb-3 px-4">
@@ -1546,7 +1566,7 @@ export default function SettingsPage() {
 
     // ── Безопасность ──
     if (section === "Безопасность") return (
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         <OpsPanel title="Аутентификация" contentClassName="divide-y px-5">
             <SettingRow label="Двухфакторная аутентификация (MFA)"
               description="TOTP / Authenticator app для всех администраторов">
@@ -1647,6 +1667,7 @@ export default function SettingsPage() {
       {/* delete confirm */}
       {dbRestoreFile && (
         <DatabaseRestoreConfirm
+          open={!!dbRestoreFile}
           filename={dbRestoreFile.name}
           busy={dbRestoreBusy}
           onConfirm={() => { void handleSystemDatabaseRestoreConfirm() }}
@@ -1658,6 +1679,7 @@ export default function SettingsPage() {
       )}
       {deleteTarget && (
         <DeleteConfirm
+          open={!!deleteTarget}
           user={deleteTarget}
           onConfirm={() => { setUsers(p => p.filter(u => u.id !== deleteTarget.id)); setDeleteTarget(null) }}
           onCancel={() => setDeleteTarget(null)}

components/data-grids/data-collection-scheduler-data-grid.tsx

@@ -8,7 +8,7 @@ import {
 } from "@tanstack/react-table"
 import type { SchedulerJobStatusDto } from "@/lib/scheduler-settings"
 import { FormToggle } from "@/components/form-kit"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"

components/data-grids/snapshot-data-grid.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { cn } from "@/lib/utils"
 import {
   CompactDataGrid,
@@ -35,11 +35,11 @@ function SnapshotOkBadge({
   errLabel?: string
 }) {
   return ok ? (
-    <Badge variant="outline" className="text-[10px] border-emerald-500/40 text-emerald-700 dark:text-emerald-400">
+    <Badge variant="success-outline" size="sm" className="text-[10px]">
       {okLabel}
     </Badge>
   ) : (
-    <Badge variant="outline" className="text-[10px] border-destructive/50 text-destructive">
+    <Badge variant="destructive-outline" size="sm" className="text-[10px]">
       {errLabel}
     </Badge>
   )

components/release-notes-modal.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,

docs/ui-design-contract.md

@@ -0,0 +1,79 @@
+# UI Design Contract (MikrotikManager)
+
+Surface: **ReUI Frame**. Kit: `components/reui-kit/`.  
+Иерархия: **ReUI PRO > shadcn primitives**.  
+Стек: Next.js 16 App Router + Turbopack + shadcn **base-nova** + ReUI `@reui`.
+
+Карта: [docs](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [Get Started](https://reui.io/docs/get-started) · [Styling](https://reui.io/docs/styling) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp)
+
+## Surface
+
+Project lock: **`surface: frame`**. Ops / list / dashboard / detail / settings — только **Frame**, не shadcn Card как page shell. Не смешивать Card и Frame на одном ops-экране.
+
+Эталон CRUD: [`app/(main)/servers`](../app/(main)/servers).  
+Оболочка списков: `DataPageCard` → Frame. Панели: `OpsPanel` → Frame.
+
+## Canonical PRO references
+
+| Зона | Preview |
+|------|---------|
+| Shell | https://reui.io/preview/base/app-shell-12 |
+| KPI | https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile |
+| Lists | https://reui.io/preview/base/data-grid-filtering-2 |
+| Settings | https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3 |
+| Forms / Sheet | https://reui.io/preview/base/form-7 · https://reui.io/preview/base/sheet-8 |
+| Alert / Badge | https://reui.io/docs/components/base/alert · https://reui.io/docs/components/base/badge |
+| Empty | https://reui.io/preview/base/empty-state-12 |
+
+## Kit (`components/reui-kit/`)
+
+| Component | Role |
+|-----------|------|
+| `KpiStatGrid` | Hybrid KPI (IconTile elevated `size-10.5`) |
+| `CodeExportSheet` | Экспорт кода (.rsc / .conf) — Sheet + Frame + ScrollArea |
+
+Слои:
+
+| Слой | Путь |
+|------|------|
+| shadcn | `components/ui/` |
+| ReUI CLI | `components/reui/` |
+| Kit | `components/reui-kit/` |
+| Domain grids | `components/data-grids/` |
+
+## Shared App Shell chrome
+
+| Токен / зона | Значение |
+|--------------|----------|
+| `--sidebar-width` | `240px` |
+| Header right | AppsMenu → SystemMonitorPopover (тема — в NavUser) |
+| Search | ⌘K / Ctrl+K only |
+| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
+
+## Spacing & tokens
+
+- `flex` + `gap-*` — не `space-y-*` / `space-x-*`
+- Semantic tokens / ReUI Badge variants — не raw `bg-emerald-*` / hex
+- Max 1 primary CTA на экран
+
+## Exceptions (не Frame ops shell)
+
+- `network-map` — canvas / topology UX
+- `terminal` — terminal chrome
+
+## Forbidden
+
+- Card как ops list/dashboard shell
+- Hand-roll data-grid / KPI / code-export при наличии kit
+- Дубль Copy в header + footer export sheet
+- Mixing Card и Frame на одном ops-экране
+- Radix-варианты docs — только Base UI (`base-nova`)
+
+## License
+
+```env
+# .env.local (gitignored)
+REUI_LICENSE_KEY=
+```
+
+`components.json` → `@reui` с `Authorization: Bearer ${REUI_LICENSE_KEY}`.