From c265c06f937e1b44f79efa237381ce8d9da3963e Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Thu, 9 Jul 2026 14:09:40 +0700
Subject: [PATCH] refactor: replace dialog components with FormDrawer for
 improved UI consistency

Updated multiple components to utilize the new FormDrawer for modal dialogs, enhancing the user interface and streamlining the layout. This change includes the ConfirmDialog, ApiKeyCreateDialog, FirewallRuleCreateDialog, and others, ensuring a more cohesive and modern design across the application. Additionally, refactored the ConfirmDialog to improve confirmation handling and user feedback during actions.
---
 .../access/api-key-create-dialog.tsx          |  82 +++----
 apps/web/src/components/confirm-dialog.tsx    | 133 ++++++++---
 .../firewall/firewall-rule-create-dialog.tsx  |  82 +++----
 apps/web/src/components/form-drawer.tsx       |  47 ++++
 .../modules/module-as-entry-dialog.tsx        |  75 +++---
 .../modules/module-cdn-source-dialog.tsx      | 205 ++++++++--------
 .../modules/module-domain-entry-dialog.tsx    |  64 +++--
 .../modules/module-entries-section.tsx        |  40 +---
 .../modules/module-ip-range-entry-dialog.tsx  |  64 +++--
 .../components/network/peer-form-dialog.tsx   | 137 +++++------
 .../network/speaker-form-dialog.tsx           | 131 +++++-----
 apps/web/tsconfig.tsbuildinfo                 |   2 +-
 packages/ui/src/components/drawer.tsx         | 226 ++++++++++++++++++
 13 files changed, 782 insertions(+), 506 deletions(-)
 create mode 100644 apps/web/src/components/form-drawer.tsx
 create mode 100644 packages/ui/src/components/drawer.tsx

diff --git a/apps/web/src/components/access/api-key-create-dialog.tsx b/apps/web/src/components/access/api-key-create-dialog.tsx
index 750ec86..47ed82c 100644
--- a/apps/web/src/components/access/api-key-create-dialog.tsx
+++ b/apps/web/src/components/access/api-key-create-dialog.tsx
@@ -2,16 +2,10 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { API_KEY_ROLE_ITEMS } from '@/lib/access/api-key-labels'
@@ -68,48 +62,48 @@ export function ApiKeyCreateDialog({ open, onOpenChange, onCreated }: ApiKeyCrea
   }
 
   return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>Новый API-ключ</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-4 py-2">
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="key-name">Имя</Label>
-            <Input
-              id="key-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="CI / оператор UI"
-            />
-          </div>
-          <SelectField
-            id="key-role"
-            label="Роль"
-            items={[...API_KEY_ROLE_ITEMS]}
-            value={role}
-            placeholder="Выберите роль"
-            onValueChange={(v) => v && setRole(v as ApiKeyRole)}
-          />
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="key-expires">Истекает (опционально)</Label>
-            <Input
-              id="key-expires"
-              type="datetime-local"
-              value={expiresLocal}
-              onChange={(e) => setExpiresLocal(e.target.value)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={handleOpenChange}
+      title="Новый API-ключ"
+      className="sm:max-w-sm"
+      footer={
+        <>
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton onClick={save} loading={createMutation.isPending}>
             Создать
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="key-name">Имя</Label>
+        <Input
+          id="key-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="CI / оператор UI"
+        />
+      </div>
+      <SelectField
+        id="key-role"
+        label="Роль"
+        items={[...API_KEY_ROLE_ITEMS]}
+        value={role}
+        placeholder="Выберите роль"
+        onValueChange={(v) => v && setRole(v as ApiKeyRole)}
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="key-expires">Истекает (опционально)</Label>
+        <Input
+          id="key-expires"
+          type="datetime-local"
+          value={expiresLocal}
+          onChange={(e) => setExpiresLocal(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/confirm-dialog.tsx b/apps/web/src/components/confirm-dialog.tsx
index 76b3860..87acb56 100644
--- a/apps/web/src/components/confirm-dialog.tsx
+++ b/apps/web/src/components/confirm-dialog.tsx
@@ -1,53 +1,126 @@
+import { Button } from '@evobgp/ui/components/button'
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@evobgp/ui/components/alert-dialog'
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@evobgp/ui/components/drawer'
 import type { ReactElement, ReactNode } from 'react'
 
-interface ConfirmDialogProps {
-  trigger: ReactElement
+type ConfirmDialogBaseProps = {
   title: string
   description?: ReactNode
   confirmLabel?: string
   cancelLabel?: string
   destructive?: boolean
   onConfirm: () => void
+  confirmDisabled?: boolean
+  confirmLoading?: boolean
+  confirmLoadingLabel?: string
 }
 
-export function ConfirmDialog({
-  trigger,
+type ConfirmDialogWithTrigger = ConfirmDialogBaseProps & {
+  trigger: ReactElement
+  open?: never
+  onOpenChange?: never
+}
+
+type ConfirmDialogControlled = ConfirmDialogBaseProps & {
+  trigger?: never
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+type ConfirmDialogProps = ConfirmDialogWithTrigger | ConfirmDialogControlled
+
+function ConfirmDrawerBody({
   title,
   description,
   confirmLabel = 'Подтвердить',
   cancelLabel = 'Отмена',
   destructive,
   onConfirm,
-}: ConfirmDialogProps) {
+  confirmDisabled,
+  confirmLoading,
+  confirmLoadingLabel,
+  controlled,
+}: ConfirmDialogBaseProps & { controlled?: boolean }) {
+  const confirmText =
+    confirmLoading && confirmLoadingLabel
+      ? confirmLoadingLabel
+      : confirmLoading
+        ? `${confirmLabel}…`
+        : confirmLabel
+
   return (
-    <AlertDialog>
-      <AlertDialogTrigger render={trigger} />
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>{title}</AlertDialogTitle>
-          {description ? <AlertDialogDescription>{description}</AlertDialogDescription> : null}
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
-          <AlertDialogAction
+    <>
+      <DrawerHeader>
+        <DrawerTitle>{title}</DrawerTitle>
+        {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+      </DrawerHeader>
+      <DrawerFooter className="border-t bg-muted/50 sm:flex-row sm:justify-end">
+        <DrawerClose render={<Button variant="outline" disabled={confirmLoading} />}>
+          {cancelLabel}
+        </DrawerClose>
+        {controlled ? (
+          <Button
             variant={destructive ? 'destructive' : 'default'}
+            disabled={confirmDisabled || confirmLoading}
             onClick={onConfirm}
           >
-            {confirmLabel}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+            {confirmText}
+          </Button>
+        ) : (
+          <DrawerClose
+            render={
+              <Button
+                variant={destructive ? 'destructive' : 'default'}
+                disabled={confirmDisabled || confirmLoading}
+              />
+            }
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </DrawerClose>
+        )}
+      </DrawerFooter>
+    </>
+  )
+}
+
+export function ConfirmDialog(props: ConfirmDialogProps) {
+  const bodyProps: ConfirmDialogBaseProps = {
+    title: props.title,
+    description: props.description,
+    confirmLabel: props.confirmLabel,
+    cancelLabel: props.cancelLabel,
+    destructive: props.destructive,
+    onConfirm: props.onConfirm,
+    confirmDisabled: props.confirmDisabled,
+    confirmLoading: props.confirmLoading,
+    confirmLoadingLabel: props.confirmLoadingLabel,
+  }
+
+  if (props.trigger) {
+    return (
+      <Drawer swipeDirection="right">
+        <DrawerTrigger render={props.trigger} />
+        <DrawerContent className="h-full max-h-none sm:max-w-sm">
+          <ConfirmDrawerBody {...bodyProps} />
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <Drawer open={props.open} onOpenChange={props.onOpenChange} swipeDirection="right">
+      <DrawerContent className="h-full max-h-none sm:max-w-sm">
+        <ConfirmDrawerBody {...bodyProps} controlled />
+      </DrawerContent>
+    </Drawer>
   )
 }
diff --git a/apps/web/src/components/firewall/firewall-rule-create-dialog.tsx b/apps/web/src/components/firewall/firewall-rule-create-dialog.tsx
index 2cd7afe..e56d036 100644
--- a/apps/web/src/components/firewall/firewall-rule-create-dialog.tsx
+++ b/apps/web/src/components/firewall/firewall-rule-create-dialog.tsx
@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { SelectField } from '@/components/select-field'
@@ -60,48 +54,48 @@ export function FirewallRuleCreateDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Новое правило</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-4 py-2">
-          <SelectField
-            id="fw-rule-action"
-            label="Действие"
-            items={[...FIREWALL_ACTION_ITEMS]}
-            value={action}
-            placeholder="Выберите действие"
-            onValueChange={(v) => v && setAction(v as 'block' | 'accept')}
-          />
-          <CommunitySelect
-            id="fw-rule-community"
-            label="Community"
-            value={communityId}
-            onValueChange={setCommunityId}
-            communities={communities}
-            nullable
-            placeholder="Все communities"
-          />
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="fw-rule-comment">Комментарий</Label>
-            <Input
-              id="fw-rule-comment"
-              placeholder="Комментарий"
-              value={comment}
-              onChange={(e) => setComment(e.target.value)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Новое правило"
+      className="sm:max-w-md"
+      footer={
+        <>
           <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton type="button" onClick={save} loading={createMutation.isPending}>
             Добавить
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <SelectField
+        id="fw-rule-action"
+        label="Действие"
+        items={[...FIREWALL_ACTION_ITEMS]}
+        value={action}
+        placeholder="Выберите действие"
+        onValueChange={(v) => v && setAction(v as 'block' | 'accept')}
+      />
+      <CommunitySelect
+        id="fw-rule-community"
+        label="Community"
+        value={communityId}
+        onValueChange={setCommunityId}
+        communities={communities}
+        nullable
+        placeholder="Все communities"
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="fw-rule-comment">Комментарий</Label>
+        <Input
+          id="fw-rule-comment"
+          placeholder="Комментарий"
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+      </div>
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/form-drawer.tsx b/apps/web/src/components/form-drawer.tsx
new file mode 100644
index 0000000..9fbd67c
--- /dev/null
+++ b/apps/web/src/components/form-drawer.tsx
@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '@evobgp/ui/lib/utils'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@evobgp/ui/components/drawer'
+import { ScrollArea } from '@evobgp/ui/components/scroll-area'
+
+interface FormDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+  children: ReactNode
+  footer: ReactNode
+  className?: string
+}
+
+export function FormDrawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  className,
+}: FormDrawerProps) {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} swipeDirection="right">
+      <DrawerContent className={cn('h-full max-h-none sm:max-w-lg', className)}>
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+        </DrawerHeader>
+        <ScrollArea className="min-h-0 flex-1 px-4">
+          <div className="space-y-4 pb-4">{children}</div>
+        </ScrollArea>
+        <DrawerFooter className="border-t bg-muted/50 sm:flex-row sm:justify-end">{footer}</DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/web/src/components/modules/module-as-entry-dialog.tsx b/apps/web/src/components/modules/module-as-entry-dialog.tsx
index 45cb21b..ed989fb 100644
--- a/apps/web/src/components/modules/module-as-entry-dialog.tsx
+++ b/apps/web/src/components/modules/module-as-entry-dialog.tsx
@@ -1,17 +1,10 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { ApiError, apiMutate } from '@/lib/api-client'
@@ -72,45 +65,43 @@ export function ModuleAsEntryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>{edit ? 'Редактировать запись' : 'Новая AS-запись'}</DialogTitle>
-          <DialogDescription>
-            Номер автономной системы и community для политики анонса.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="as-asn">ASN</Label>
-            <Input
-              id="as-asn"
-              type="number"
-              placeholder="12345"
-              value={form.asn || ''}
-              min={1}
-              max={4294967295}
-              onChange={(e) => setForm((s) => ({ ...s, asn: Number(e.target.value) }))}
-            />
-          </div>
-          <CommunitySelect
-            id="as-comm"
-            label="Community"
-            value={form.community_id ?? null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
-            communities={communities}
-            nullable
-          />
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={edit ? 'Редактировать запись' : 'Новая AS-запись'}
+      description="Номер автономной системы и community для политики анонса."
+      className="sm:max-w-sm"
+      footer={
+        <>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="as-asn">ASN</Label>
+        <Input
+          id="as-asn"
+          type="number"
+          placeholder="12345"
+          value={form.asn || ''}
+          min={1}
+          max={4294967295}
+          onChange={(e) => setForm((s) => ({ ...s, asn: Number(e.target.value) }))}
+        />
+      </div>
+      <CommunitySelect
+        id="as-comm"
+        label="Community"
+        value={form.community_id ?? null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+        communities={communities}
+        nullable
+      />
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/modules/module-cdn-source-dialog.tsx b/apps/web/src/components/modules/module-cdn-source-dialog.tsx
index d607417..6774f84 100644
--- a/apps/web/src/components/modules/module-cdn-source-dialog.tsx
+++ b/apps/web/src/components/modules/module-cdn-source-dialog.tsx
@@ -1,21 +1,14 @@
 import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
+import { Button } from '@evobgp/ui/components/button'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
-import { SelectField } from '@/components/select-field'
-import { Button } from '@evobgp/ui/components/button'
-
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
+import { SelectField } from '@/components/select-field'
 import { ApiError, apiMutate } from '@/lib/api-client'
 import { normalizeCdnSourceKind } from '@/lib/modules/helpers'
 import type { BgpCommunity, CdnPreviewResponse, CdnSource, CdnSourceCreate } from '@/types/api'
@@ -154,107 +147,107 @@ export function ModuleCdnSourceDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{edit ? 'Редактировать источник' : 'Новый CDN-источник'}</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4 py-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="cdn-url">URL</Label>
-            <Input
-              id="cdn-url"
-              placeholder="https://example.com/list.txt"
-              value={form.url}
-              onChange={(e) => setForm((s) => ({ ...s, url: e.target.value }))}
-            />
-          </div>
-          <SelectField
-            id="cdn-kind"
-            label="Тип источника"
-            items={kindItems}
-            value={form.source_kind}
-            onValueChange={(v) => v && setForm((s) => ({ ...s, source_kind: v }))}
-          />
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="cdn-prefix-path">JSON path (prefix_path)</Label>
-            <Input
-              id="cdn-prefix-path"
-              placeholder="напр. prefixes[] или data.items[].cidr"
-              value={form.prefix_path ?? ''}
-              onChange={(e) => setForm((s) => ({ ...s, prefix_path: e.target.value }))}
-            />
-            {form.source_kind === 'json' && !form.prefix_path?.trim() ? (
-              <p className="text-xs text-muted-foreground">
-                Для JSON укажите путь к полям с CIDR; пустой путь может не дать префиксов.
-              </p>
-            ) : null}
-          </div>
-          <CommunitySelect
-            id="cdn-comm"
-            label="Community"
-            value={form.community_id ?? null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
-            communities={communities}
-            nullable
-          />
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="cdn-interval">Интервал обновления (сек)</Label>
-            <Input
-              id="cdn-interval"
-              type="number"
-              placeholder="3600"
-              value={form.refresh_interval_sec ?? ''}
-              onChange={(e) =>
-                setForm((s) => ({
-                  ...s,
-                  refresh_interval_sec: e.target.value ? Number(e.target.value) : null,
-                }))
-              }
-            />
-          </div>
-          <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
-            <div className="flex flex-wrap items-center gap-2">
-              <Button
-                type="button"
-                variant="secondary"
-                size="sm"
-                onClick={() => void previewCdn()}
-                disabled={previewLoading}
-              >
-                {previewLoading ? 'Загрузка…' : 'Предпросмотр'}
-              </Button>
-              {previewError ? (
-                <span className="text-sm text-destructive">{previewError}</span>
-              ) : previewOk ? (
-                <span className="text-sm text-muted-foreground">
-                  Всего: {previewTotal}
-                  {previewTruncated ? (
-                    <span className="text-amber-600 dark:text-amber-500"> (обрезано)</span>
-                  ) : null}
-                </span>
-              ) : null}
-            </div>
-            {previewItems.length > 0 ? (
-              <ul className="max-h-48 overflow-y-auto rounded-md border bg-muted/40 p-2 font-mono text-xs">
-                {previewItems.map((item, i) => (
-                  <li key={`${i}-${item}`} className="py-0.5">
-                    {item}
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-          </div>
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={edit ? 'Редактировать источник' : 'Новый CDN-источник'}
+      className="sm:max-w-lg"
+      footer={
+        <>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="cdn-url">URL</Label>
+        <Input
+          id="cdn-url"
+          placeholder="https://example.com/list.txt"
+          value={form.url}
+          onChange={(e) => setForm((s) => ({ ...s, url: e.target.value }))}
+        />
+      </div>
+      <SelectField
+        id="cdn-kind"
+        label="Тип источника"
+        items={kindItems}
+        value={form.source_kind}
+        onValueChange={(v) => v && setForm((s) => ({ ...s, source_kind: v }))}
+      />
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="cdn-prefix-path">JSON path (prefix_path)</Label>
+        <Input
+          id="cdn-prefix-path"
+          placeholder="напр. prefixes[] или data.items[].cidr"
+          value={form.prefix_path ?? ''}
+          onChange={(e) => setForm((s) => ({ ...s, prefix_path: e.target.value }))}
+        />
+        {form.source_kind === 'json' && !form.prefix_path?.trim() ? (
+          <p className="text-xs text-muted-foreground">
+            Для JSON укажите путь к полям с CIDR; пустой путь может не дать префиксов.
+          </p>
+        ) : null}
+      </div>
+      <CommunitySelect
+        id="cdn-comm"
+        label="Community"
+        value={form.community_id ?? null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+        communities={communities}
+        nullable
+      />
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="cdn-interval">Интервал обновления (сек)</Label>
+        <Input
+          id="cdn-interval"
+          type="number"
+          placeholder="3600"
+          value={form.refresh_interval_sec ?? ''}
+          onChange={(e) =>
+            setForm((s) => ({
+              ...s,
+              refresh_interval_sec: e.target.value ? Number(e.target.value) : null,
+            }))
+          }
+        />
+      </div>
+      <div className="flex flex-col gap-2 rounded-lg border border-border p-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => void previewCdn()}
+            disabled={previewLoading}
+          >
+            {previewLoading ? 'Загрузка…' : 'Предпросмотр'}
+          </Button>
+          {previewError ? (
+            <span className="text-sm text-destructive">{previewError}</span>
+          ) : previewOk ? (
+            <span className="text-sm text-muted-foreground">
+              Всего: {previewTotal}
+              {previewTruncated ? (
+                <span className="text-amber-600 dark:text-amber-500"> (обрезано)</span>
+              ) : null}
+            </span>
+          ) : null}
+        </div>
+        {previewItems.length > 0 ? (
+          <ul className="max-h-48 overflow-y-auto rounded-md border bg-muted/40 p-2 font-mono text-xs">
+            {previewItems.map((item, i) => (
+              <li key={`${i}-${item}`} className="py-0.5">
+                {item}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/modules/module-domain-entry-dialog.tsx b/apps/web/src/components/modules/module-domain-entry-dialog.tsx
index c6bc8e7..5f2bbe9 100644
--- a/apps/web/src/components/modules/module-domain-entry-dialog.tsx
+++ b/apps/web/src/components/modules/module-domain-entry-dialog.tsx
@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { ApiError, apiMutate } from '@/lib/api-client'
@@ -70,39 +64,39 @@ export function ModuleDomainEntryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>{edit ? 'Редактировать домен' : 'Новый домен'}</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4 py-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="dom-fqdn">FQDN</Label>
-            <Input
-              id="dom-fqdn"
-              placeholder="example.com"
-              value={form.fqdn}
-              onChange={(e) => setForm((s) => ({ ...s, fqdn: e.target.value }))}
-            />
-          </div>
-          <CommunitySelect
-            id="dom-comm"
-            label="Community"
-            value={form.community_id ?? null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
-            communities={communities}
-            nullable
-          />
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={edit ? 'Редактировать домен' : 'Новый домен'}
+      className="sm:max-w-sm"
+      footer={
+        <>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="dom-fqdn">FQDN</Label>
+        <Input
+          id="dom-fqdn"
+          placeholder="example.com"
+          value={form.fqdn}
+          onChange={(e) => setForm((s) => ({ ...s, fqdn: e.target.value }))}
+        />
+      </div>
+      <CommunitySelect
+        id="dom-comm"
+        label="Community"
+        value={form.community_id ?? null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v }))}
+        communities={communities}
+        nullable
+      />
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/modules/module-entries-section.tsx b/apps/web/src/components/modules/module-entries-section.tsx
index d03b5f6..c2dbc11 100644
--- a/apps/web/src/components/modules/module-entries-section.tsx
+++ b/apps/web/src/components/modules/module-entries-section.tsx
@@ -2,18 +2,9 @@ import { useState } from 'react'
 import { Plus } from 'lucide-react'
 import { toast } from 'sonner'
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@evobgp/ui/components/alert-dialog'
 import { Button } from '@evobgp/ui/components/button'
 
+import { ConfirmDialog } from '@/components/confirm-dialog'
 import { DataGridCard } from '@/components/data-grid-shell'
 import { QueryState } from '@/components/query-state'
 import { TableSkeleton } from '@/components/skeletons'
@@ -218,24 +209,17 @@ export function ModuleEntriesSection({
         />
       ) : null}
 
-      <AlertDialog open={deleteTarget !== null} onOpenChange={(open) => !open && setDeleteTarget(null)}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Удалить запись?</AlertDialogTitle>
-            <AlertDialogDescription>{deleteDescription(deleteTarget)}</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleting}>Отмена</AlertDialogCancel>
-            <AlertDialogAction
-              variant="destructive"
-              disabled={deleting}
-              onClick={() => void confirmDelete()}
-            >
-              {deleting ? 'Удаление…' : 'Удалить'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <ConfirmDialog
+        open={deleteTarget !== null}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+        title="Удалить запись?"
+        description={deleteDescription(deleteTarget)}
+        confirmLabel="Удалить"
+        confirmLoadingLabel="Удаление…"
+        destructive
+        confirmLoading={deleting}
+        onConfirm={() => void confirmDelete()}
+      />
     </>
   )
 }
diff --git a/apps/web/src/components/modules/module-ip-range-entry-dialog.tsx b/apps/web/src/components/modules/module-ip-range-entry-dialog.tsx
index 08ee885..c54887b 100644
--- a/apps/web/src/components/modules/module-ip-range-entry-dialog.tsx
+++ b/apps/web/src/components/modules/module-ip-range-entry-dialog.tsx
@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { CommunitySelect } from '@/components/modules/community-select'
 import { ApiError, apiMutate } from '@/lib/api-client'
@@ -70,39 +64,39 @@ export function ModuleIpRangeEntryDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>{edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4 py-2">
-          <div className="flex flex-col gap-1.5">
-            <Label htmlFor="ip-prefix">Префикс (CIDR)</Label>
-            <Input
-              id="ip-prefix"
-              placeholder="203.0.113.0/24"
-              value={form.prefix}
-              onChange={(e) => setForm((s) => ({ ...s, prefix: e.target.value }))}
-            />
-          </div>
-          <CommunitySelect
-            id="ip-comm"
-            label="Community (обязательно)"
-            value={form.community_id || null}
-            onValueChange={(v) => setForm((s) => ({ ...s, community_id: v ?? '' }))}
-            communities={communities}
-            placeholder="Выберите community"
-          />
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}
+      className="sm:max-w-sm"
+      footer={
+        <>
           <LoadingButton variant="outline" onClick={() => onOpenChange(false)}>
             Отмена
           </LoadingButton>
           <LoadingButton loading={saving} onClick={() => void save()}>
             {edit ? 'Сохранить' : 'Добавить'}
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="ip-prefix">Префикс (CIDR)</Label>
+        <Input
+          id="ip-prefix"
+          placeholder="203.0.113.0/24"
+          value={form.prefix}
+          onChange={(e) => setForm((s) => ({ ...s, prefix: e.target.value }))}
+        />
+      </div>
+      <CommunitySelect
+        id="ip-comm"
+        label="Community (обязательно)"
+        value={form.community_id || null}
+        onValueChange={(v) => setForm((s) => ({ ...s, community_id: v ?? '' }))}
+        communities={communities}
+        placeholder="Выберите community"
+      />
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/network/peer-form-dialog.tsx b/apps/web/src/components/network/peer-form-dialog.tsx
index f89ff2c..09786b1 100644
--- a/apps/web/src/components/network/peer-form-dialog.tsx
+++ b/apps/web/src/components/network/peer-form-dialog.tsx
@@ -2,18 +2,11 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
+import { Checkbox } from '@evobgp/ui/components/checkbox'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
-import { Checkbox } from '@evobgp/ui/components/checkbox'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { useCreatePeerMutation, useUpdatePeerMutation } from '@/queries/network'
@@ -102,74 +95,74 @@ export function PeerFormDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-sm">
-        <DialogHeader>
-          <DialogTitle>{editTarget ? 'Редактировать пира' : 'Новый пир'}</DialogTitle>
-          <DialogDescription>BGP-сосед для установки сессии</DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-4 py-2">
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="peer-name">Имя пира (опционально)</Label>
-            <Input
-              id="peer-name"
-              placeholder="Core-RTR-1"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="peer-neighbor">Адрес соседа</Label>
-            <Input
-              id="peer-neighbor"
-              placeholder="192.0.2.1"
-              value={neighbor}
-              onChange={(e) => setNeighbor(e.target.value)}
-              required
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="peer-asn">Remote ASN</Label>
-            <Input
-              id="peer-asn"
-              type="number"
-              placeholder="65000"
-              value={remoteAsn}
-              onChange={(e) => setRemoteAsn(e.target.value)}
-              required
-            />
-          </div>
-          <SelectField
-            id="peer-speaker"
-            label="Спикер (опционально)"
-            items={speakerItems}
-            value={bgpSpeakerId ?? ''}
-            onValueChange={(v) => setBgpSpeakerId(v || null)}
-            placeholder="Все спикеры"
-          />
-          <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
-            <div className="grid min-w-0 flex-1 gap-1 pr-2">
-              <Label htmlFor="peer-enabled">Включён</Label>
-              <p className="text-xs text-muted-foreground">
-                Выключенный пир не попадает в конфиг BIRD до следующей ревизии.
-              </p>
-            </div>
-            <Checkbox
-              id="peer-enabled"
-              checked={enabled}
-              onCheckedChange={(v) => setEnabled(v === true)}
-            />
-          </div>
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title={editTarget ? 'Редактировать пира' : 'Новый пир'}
+      description="BGP-сосед для установки сессии"
+      className="sm:max-w-sm"
+      footer={
+        <>
           <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton type="button" loading={saving} onClick={save}>
             {editTarget ? 'Сохранить' : 'Создать'}
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="peer-name">Имя пира (опционально)</Label>
+        <Input
+          id="peer-name"
+          placeholder="Core-RTR-1"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="peer-neighbor">Адрес соседа</Label>
+        <Input
+          id="peer-neighbor"
+          placeholder="192.0.2.1"
+          value={neighbor}
+          onChange={(e) => setNeighbor(e.target.value)}
+          required
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="peer-asn">Remote ASN</Label>
+        <Input
+          id="peer-asn"
+          type="number"
+          placeholder="65000"
+          value={remoteAsn}
+          onChange={(e) => setRemoteAsn(e.target.value)}
+          required
+        />
+      </div>
+      <SelectField
+        id="peer-speaker"
+        label="Спикер (опционально)"
+        items={speakerItems}
+        value={bgpSpeakerId ?? ''}
+        onValueChange={(v) => setBgpSpeakerId(v || null)}
+        placeholder="Все спикеры"
+      />
+      <div className="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3">
+        <div className="grid min-w-0 flex-1 gap-1 pr-2">
+          <Label htmlFor="peer-enabled">Включён</Label>
+          <p className="text-xs text-muted-foreground">
+            Выключенный пир не попадает в конфиг BIRD до следующей ревизии.
+          </p>
+        </div>
+        <Checkbox
+          id="peer-enabled"
+          checked={enabled}
+          onCheckedChange={(v) => setEnabled(v === true)}
+        />
+      </div>
+    </FormDrawer>
   )
 }
diff --git a/apps/web/src/components/network/speaker-form-dialog.tsx b/apps/web/src/components/network/speaker-form-dialog.tsx
index 1db5689..56010ac 100644
--- a/apps/web/src/components/network/speaker-form-dialog.tsx
+++ b/apps/web/src/components/network/speaker-form-dialog.tsx
@@ -2,17 +2,10 @@ import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Button } from '@evobgp/ui/components/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@evobgp/ui/components/dialog'
 import { Input } from '@evobgp/ui/components/input'
 import { Label } from '@evobgp/ui/components/label'
 
+import { FormDrawer } from '@/components/form-drawer'
 import { LoadingButton } from '@/components/loading-button'
 import { SelectField } from '@/components/select-field'
 import { useCreateSpeakerMutation } from '@/queries/network'
@@ -98,72 +91,72 @@ export function SpeakerFormDialog({ open, onOpenChange }: SpeakerFormDialogProps
   }
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Новый спикер</DialogTitle>
-          <DialogDescription>BIRD-агент на ноде реплики или control plane</DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-4 py-2">
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-endpoint">Endpoint</Label>
-            <Input
-              id="speaker-endpoint"
-              placeholder="https://node.example.com:8443"
-              value={endpoint}
-              onChange={(e) => handleEndpointChange(e.target.value)}
-            />
-          </div>
-          <SelectField
-            id="speaker-role"
-            label="Роль"
-            items={[
-              { value: 'replica', label: 'replica' },
-              { value: 'master', label: 'master (CP)' },
-            ]}
-            value={role}
-            onValueChange={(v) => setRole(v ?? 'replica')}
-          />
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-agent-domain">Agent domain</Label>
-            <Input
-              id="speaker-agent-domain"
-              placeholder="bird-agent.example.com"
-              value={agentDomain}
-              onChange={(e) => setAgentDomain(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-node-ipv4">Node IPv4</Label>
-            <Input
-              id="speaker-node-ipv4"
-              placeholder="203.0.113.10"
-              value={nodeIpv4}
-              onChange={(e) => handleNodeIpv4Change(e.target.value)}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="speaker-bgp-source">BGP source IPv4</Label>
-            <Input
-              id="speaker-bgp-source"
-              placeholder="203.0.113.10"
-              value={bgpSourceIpv4}
-              onChange={(e) => {
-                setBgpSourceManual(true)
-                setBgpSourceIpv4(e.target.value)
-              }}
-            />
-          </div>
-        </div>
-        <DialogFooter>
+    <FormDrawer
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Новый спикер"
+      description="BIRD-агент на ноде реплики или control plane"
+      className="sm:max-w-md"
+      footer={
+        <>
           <Button variant="outline" type="button" onClick={() => onOpenChange(false)}>
             Отмена
           </Button>
           <LoadingButton type="button" loading={createMutation.isPending} onClick={save}>
             Создать
           </LoadingButton>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-endpoint">Endpoint</Label>
+        <Input
+          id="speaker-endpoint"
+          placeholder="https://node.example.com:8443"
+          value={endpoint}
+          onChange={(e) => handleEndpointChange(e.target.value)}
+        />
+      </div>
+      <SelectField
+        id="speaker-role"
+        label="Роль"
+        items={[
+          { value: 'replica', label: 'replica' },
+          { value: 'master', label: 'master (CP)' },
+        ]}
+        value={role}
+        onValueChange={(v) => setRole(v ?? 'replica')}
+      />
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-agent-domain">Agent domain</Label>
+        <Input
+          id="speaker-agent-domain"
+          placeholder="bird-agent.example.com"
+          value={agentDomain}
+          onChange={(e) => setAgentDomain(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-node-ipv4">Node IPv4</Label>
+        <Input
+          id="speaker-node-ipv4"
+          placeholder="203.0.113.10"
+          value={nodeIpv4}
+          onChange={(e) => handleNodeIpv4Change(e.target.value)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="speaker-bgp-source">BGP source IPv4</Label>
+        <Input
+          id="speaker-bgp-source"
+          placeholder="203.0.113.10"
+          value={bgpSourceIpv4}
+          onChange={(e) => {
+            setBgpSourceManual(true)
+            setBgpSourceIpv4(e.target.value)
+          }}
+        />
+      </div>
+    </FormDrawer>
   )
 }
diff --git a/apps/web/tsconfig.tsbuildinfo b/apps/web/tsconfig.tsbuildinfo
index 17f5ace..f58e79f 100644
--- a/apps/web/tsconfig.tsbuildinfo
+++ b/apps/web/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/empty-state.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/analytics/operations-analytics-card.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-quick-actions.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/firewall/firewall-clients-grid.tsx","./src/components/firewall/firewall-rule-create-dialog.tsx","./src/components/firewall/firewall-rules-grid.tsx","./src/components/layout/app-shell.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/number-field.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/settings-kv-grid.tsx","./src/hooks/use-client-data-grid.ts","./src/lib/api-client.ts","./src/lib/data-grid-defaults.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/firewall.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/firewall.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/routetree.gen.ts","./src/components/badge-tabs.tsx","./src/components/category-badge.tsx","./src/components/confirm-dialog.tsx","./src/components/data-grid-cell.tsx","./src/components/data-grid-shell.tsx","./src/components/data-grid-toolbar.tsx","./src/components/empty-state.tsx","./src/components/form-drawer.tsx","./src/components/loading-button.tsx","./src/components/mode-toggle.tsx","./src/components/page-header.tsx","./src/components/page-shell.tsx","./src/components/query-state.tsx","./src/components/section-cards.tsx","./src/components/select-field.tsx","./src/components/skeletons.tsx","./src/components/status-badge.tsx","./src/components/theme-provider.tsx","./src/components/truncated-text.tsx","./src/components/access/access-api-keys-card.tsx","./src/components/access/access-api-keys-grid.tsx","./src/components/access/api-key-create-dialog.tsx","./src/components/access/api-key-token-dialog.tsx","./src/components/analytics/analytics-activity-list.tsx","./src/components/analytics/analytics-card-shell.tsx","./src/components/analytics/analytics-kpi-row.tsx","./src/components/analytics/analytics-progress.tsx","./src/components/analytics/analytics-segment-control.tsx","./src/components/analytics/chart-bar-strip.tsx","./src/components/analytics/chart-donut-metric.tsx","./src/components/analytics/dashboard-network-capacity-card.tsx","./src/components/analytics/dashboard-operations-flow-card.tsx","./src/components/analytics/dashboard-platform-card.tsx","./src/components/analytics/index.ts","./src/components/analytics/monitoring-health-card.tsx","./src/components/analytics/network-overview-analytics-card.tsx","./src/components/analytics/operations-analytics-card.tsx","./src/components/dashboard/dashboard-network-panel.tsx","./src/components/dashboard/dashboard-quick-actions.tsx","./src/components/dashboard/dashboard-recent-jobs-grid.tsx","./src/components/dashboard/dashboard-recent-revisions-grid.tsx","./src/components/directories/directories-communities-grid.tsx","./src/components/directories/directories-doh-grid.tsx","./src/components/examples/c-input-group-37.tsx","./src/components/examples/c-select-4.tsx","./src/components/examples/c-tabs-6.tsx","./src/components/examples/c-tabs-7.tsx","./src/components/firewall/firewall-clients-grid.tsx","./src/components/firewall/firewall-rule-create-dialog.tsx","./src/components/firewall/firewall-rules-grid.tsx","./src/components/layout/app-shell.tsx","./src/components/modules/community-select.tsx","./src/components/modules/module-as-entry-dialog.tsx","./src/components/modules/module-cdn-source-dialog.tsx","./src/components/modules/module-domain-entry-dialog.tsx","./src/components/modules/module-entries-grid.tsx","./src/components/modules/module-entries-section.tsx","./src/components/modules/module-ip-range-entry-dialog.tsx","./src/components/modules/module-kpi-cards.tsx","./src/components/modules/modules-list-grid.tsx","./src/components/monitoring/monitoring-ready-grid.tsx","./src/components/network/network-peers-card.tsx","./src/components/network/network-peers-grid.tsx","./src/components/network/network-speakers-card.tsx","./src/components/network/network-speakers-grid.tsx","./src/components/network/peer-form-dialog.tsx","./src/components/network/speaker-form-dialog.tsx","./src/components/operations/operations-jobs-grid.tsx","./src/components/operations/operations-revisions-grid.tsx","./src/components/reui/autocomplete.tsx","./src/components/reui/badge.tsx","./src/components/reui/date-selector.tsx","./src/components/reui/filters.tsx","./src/components/reui/frame.tsx","./src/components/reui/number-field.tsx","./src/components/reui/data-grid/data-grid-column-filter.tsx","./src/components/reui/data-grid/data-grid-column-header.tsx","./src/components/reui/data-grid/data-grid-column-visibility.tsx","./src/components/reui/data-grid/data-grid-pagination.tsx","./src/components/reui/data-grid/data-grid-scroll-area.tsx","./src/components/reui/data-grid/data-grid-table-dnd-rows.tsx","./src/components/reui/data-grid/data-grid-table-dnd.tsx","./src/components/reui/data-grid/data-grid-table-virtual.tsx","./src/components/reui/data-grid/data-grid-table.tsx","./src/components/reui/data-grid/data-grid.tsx","./src/components/schedule/schedule-jobs-grid.tsx","./src/components/schedule/schedule-modules-grid.tsx","./src/components/settings/settings-kv-grid.tsx","./src/hooks/use-client-data-grid.ts","./src/lib/api-client.ts","./src/lib/data-grid-defaults.ts","./src/lib/queryclient.ts","./src/lib/router.ts","./src/lib/ui-labels.ts","./src/lib/access/api-key-labels.ts","./src/lib/metrics/deployment-progress.ts","./src/lib/metrics/index.ts","./src/lib/metrics/job-status-breakdown.ts","./src/lib/metrics/module-type-breakdown.ts","./src/lib/metrics/peer-capacity-bars.ts","./src/lib/metrics/peer-session-breakdown.ts","./src/lib/metrics/readiness-breakdown.ts","./src/lib/metrics/recent-platform-activity.ts","./src/lib/metrics/types.ts","./src/lib/modules/display.ts","./src/lib/modules/helpers.ts","./src/queries/api-keys.ts","./src/queries/auth.ts","./src/queries/directories.ts","./src/queries/firewall.ts","./src/queries/modules.ts","./src/queries/monitoring.ts","./src/queries/network.ts","./src/queries/operations.ts","./src/queries/overview.ts","./src/queries/settings.ts","./src/routes/__root.tsx","./src/routes/_auth.tsx","./src/routes/index.tsx","./src/routes/_auth/access.tsx","./src/routes/_auth/dashboard.tsx","./src/routes/_auth/directories.tsx","./src/routes/_auth/firewall.tsx","./src/routes/_auth/monitoring.tsx","./src/routes/_auth/network.tsx","./src/routes/_auth/operations.tsx","./src/routes/_auth/schedule.tsx","./src/routes/_auth/settings.tsx","./src/routes/_auth/tenant-settings.tsx","./src/routes/_auth/modules/$moduleid.tsx","./src/routes/_auth/modules/index.tsx","./src/routes/_auth/modules/new.tsx","./src/types/api.ts","./vite.config.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx
new file mode 100644
index 0000000..ffe1f0b
--- /dev/null
+++ b/packages/ui/src/components/drawer.tsx
@@ -0,0 +1,226 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
+
+import { cn } from "@evobgp/ui/lib/utils"
+
+type DrawerContextProps = {
+  hasSnapPoints: boolean
+  modal: DrawerPrimitive.Root.Props["modal"]
+  showSwipeHandle: boolean
+  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
+}
+
+const DrawerContext = React.createContext<DrawerContextProps | null>(null)
+
+function useDrawer() {
+  const context = React.useContext(DrawerContext)
+
+  if (!context) {
+    throw new Error("useDrawer must be used within a Drawer.")
+  }
+
+  return context
+}
+
+function Drawer({
+  modal = true,
+  showSwipeHandle = false,
+  snapPoints,
+  swipeDirection = "down",
+  ...props
+}: DrawerPrimitive.Root.Props & {
+  showSwipeHandle?: boolean
+}) {
+  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
+  const contextValue = React.useMemo(
+    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
+    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
+  )
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      <DrawerPrimitive.Root
+        data-slot="drawer"
+        modal={modal}
+        snapPoints={snapPoints}
+        swipeDirection={swipeDirection}
+        {...props}
+      />
+    </DrawerContext.Provider>
+  )
+}
+
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: DrawerPrimitive.Backdrop.Props) {
+  return (
+    <DrawerPrimitive.Backdrop
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerSwipeHandle({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-swipe-handle"
+      aria-hidden="true"
+      className={cn(
+        "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: DrawerPrimitive.Popup.Props) {
+  const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
+  const swipeAxis =
+    swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
+
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      {modal === true && (
+        <DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
+      )}
+      <DrawerPrimitive.Viewport
+        data-slot="drawer-viewport"
+        data-modal={modal}
+        className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
+      >
+        <DrawerPrimitive.Popup
+          data-slot="drawer-popup"
+          data-swipe-axis={swipeAxis}
+          data-snap-points={hasSnapPoints ? "" : undefined}
+          className={cn(
+            // Base.
+            "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
+            // Nested.
+            "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
+            // Bleed.
+            "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
+            // Sizing.
+            "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
+            // Stack.
+            "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
+            // Transitions.
+            "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
+            // Axis: y.
+            "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
+            // Axis: x.
+            "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
+            // Direction: down.
+            "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
+            className
+          )}
+          {...props}
+        >
+          {showSwipeHandle && <DrawerSwipeHandle />}
+          <DrawerPrimitive.Content
+            data-slot="drawer-content"
+            className={cn(
+              "flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
+            )}
+          >
+            {children}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(
+        "text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-balance text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerSwipeHandle,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}