ReUI alignment: AlertDialog for destructive confirms, Input for date range, ghost Button for Alert close

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/ui/Alert.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, type ReactNode } from 'react'
 import { Icon, type IconName } from './Icon'
 import { Alert as ReuiAlert } from '@/components/reui/alert'
+import { Button as ReuiButton } from '@/components/ui/button'
 
 /*
 A replica of the old console's `showAlert` (common.js:202-217): a type, a bold
@@ -79,14 +80,16 @@ export function Alert({
         <b className="font-medium">{title}</b> {children}
       </div>
       {onDismiss && (
-        <button
+        <ReuiButton
           type="button"
-          className="absolute top-2 right-2 inline-flex size-6 border-0 bg-transparent items-center justify-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+          variant="ghost"
+          size="icon-xs"
+          className="absolute top-2 right-2 text-muted-foreground"
           aria-label="Close"
           onClick={onDismiss}
         >
-          <Icon name="close" size={14} />
-        </button>
+          <Icon name="close" size={14} className="size-3.5" />
+        </ReuiButton>
       )}
     </ReuiAlert>
   )

src/ui/Confirm.tsx

@@ -1,4 +1,14 @@
 import { useState, type ReactNode } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
 import { Button } from './Button'
 import { Check } from './Check'
 import { Dialog } from './Dialog'
@@ -64,6 +74,32 @@ export function Confirm({
     })
   }
 
+  /* A destructive confirm is ReUI's `AlertDialog`: it takes no outside click and
+     cannot be dismissed while the request runs. The one that only converts or
+     enables keeps the plain dialog. */
+  if (variant === 'danger') {
+    const pending = busy || inProgress
+    return (
+      <AlertDialog open={open} onOpenChange={(o) => !o && !pending && onClose()}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{title}</AlertDialogTitle>
+            {/* `pre-wrap`: the Zones confirmations are multi-line. */}
+            <AlertDialogDescription render={<div />} style={{ whiteSpace: 'pre-wrap' }}>
+              {body}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" disabled={pending} onClick={confirm}>
+              {label}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    )
+  }
+
   return (
     <Dialog
       open={open}

src/ui/KpiStrip.tsx

@@ -31,13 +31,13 @@ export function KpiStrip({ items, label }: { items: Kpi[]; label: string }) {
             className="flex min-w-0 items-center gap-3 border-r border-b border-border px-[18px] py-3.5 last:border-r-0"
           >
             <span
-              className={`flex size-10 flex-none items-center justify-center rounded-lg border border-border bg-muted shadow-sm ${k.tone ? TEXT[k.tone] : 'text-foreground'}`}
+              className={`flex size-10 flex-none items-center justify-center rounded-lg border border-border bg-muted ${k.tone ? TEXT[k.tone] : 'text-foreground'}`}
               aria-hidden="true"
             >
               <Icon name={k.icon} size={18} />
             </span>
             <div className="flex min-w-0 flex-col gap-1">
-              <div className="text-[13px] text-muted-foreground">{k.label}</div>
+              <div className="text-sm text-muted-foreground">{k.label}</div>
               <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                 <span className={`text-2xl font-semibold tabular-nums ${k.tone ? TEXT[k.tone] : ''}`}>{k.value}</span>
                 {k.hint != null && <Badge variant={k.tone ? BADGE[k.tone] : 'outline'}>{k.hint}</Badge>}