@quanticjs/notification-ui 8.1.0 → 9.0.1

package/dist/index.js

@@ -363,7 +363,7 @@ function NotificationBell({
           "span",
           {
             "aria-hidden": "true",
-            className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-xs font-semibold text-destructive-foreground",
+            className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-coral px-1.5 text-xs font-semibold text-coral-foreground ring-2 ring-background",
             children: count > 99 ? "99+" : count
           }
         )
@@ -373,7 +373,7 @@ function NotificationBell({
 }
 
 // src/notification-inbox.tsx
-import { cn as cn3 } from "@quanticjs/react-ui";
+import { Button, Card, EmptyState, Skeleton, cn as cn3 } from "@quanticjs/react-ui";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function NotificationInbox({
   basePath,
@@ -387,54 +387,80 @@ function NotificationInbox({
     appId
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        role: "status",
-        "aria-label": "Loading notifications",
-        className: cn3("flex flex-col gap-2 p-4", className),
-        children: [
-          /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Loading notifications" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx5("div", { "aria-hidden": "true", className: "h-12 animate-pulse rounded bg-muted" }, i))
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs3("div", { role: "status", "aria-label": "Loading notifications", className: cn3(className), children: [
+      /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Loading notifications" }),
+      /* @__PURE__ */ jsxs3(Card, { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx5(InboxHeader, {}),
+        /* @__PURE__ */ jsx5("ul", { className: "divide-y divide-border", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsxs3("li", { className: "flex items-start gap-3 px-4 py-3.5", children: [
+          /* @__PURE__ */ jsx5(Skeleton, { className: "mt-1 h-2 w-2 rounded-full" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsx5(Skeleton, { className: "h-3.5 w-2/3" }),
+            /* @__PURE__ */ jsx5(Skeleton, { className: "h-3 w-1/2" })
+          ] })
+        ] }, i)) })
+      ] })
+    ] });
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs3("div", { className: cn3("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx5("p", { className: "text-sm text-foreground", children: "Failed to load notifications" }),
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
-        }
-      )
+    return /* @__PURE__ */ jsxs3(Card, { className, children: [
+      /* @__PURE__ */ jsx5(InboxHeader, {}),
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-3 px-6 py-12 text-center", children: [
+        /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "grid size-12 place-items-center rounded-full bg-destructive/10 text-destructive [&_svg]:size-6",
+            children: /* @__PURE__ */ jsx5(AlertIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium text-foreground", children: "Failed to load notifications" }),
+          /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "Something went wrong while loading your inbox." })
+        ] }),
+        /* @__PURE__ */ jsx5(Button, { type: "button", onClick: () => void refetch(), children: "Try again" })
+      ] })
     ] });
   }
   const items = data?.items ?? [];
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx5("div", { className: cn3("p-6 text-center text-sm text-muted-foreground", className), children: "No notifications yet" });
-  }
-  return /* @__PURE__ */ jsxs3("section", { "aria-label": "Notifications", className: cn3("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs3("header", { className: "flex items-center justify-between border-b border-border px-4 py-2", children: [
-      /* @__PURE__ */ jsx5("h2", { className: "text-sm font-semibold text-foreground", children: "Notifications" }),
+    return /* @__PURE__ */ jsxs3(Card, { className, children: [
+      /* @__PURE__ */ jsx5(InboxHeader, {}),
       /* @__PURE__ */ jsx5(
-        "button",
+        EmptyState,
         {
-          type: "button",
-          onClick: () => markAllRead.mutate(),
-          disabled: markAllRead.isPending,
-          className: "text-sm text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-          children: "Mark all read"
+          icon: /* @__PURE__ */ jsx5(BellOffIcon, {}),
+          title: "No notifications yet",
+          description: "New alerts and updates will appear here."
         }
       )
-    ] }),
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(Card, { role: "region", "aria-label": "Notifications", className, children: [
+    /* @__PURE__ */ jsx5(
+      InboxHeader,
+      {
+        action: /* @__PURE__ */ jsx5(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => markAllRead.mutate(),
+            disabled: markAllRead.isPending,
+            children: "Mark all read"
+          }
+        )
+      }
+    ),
     /* @__PURE__ */ jsx5("ul", { className: "divide-y divide-border", children: items.map((item) => /* @__PURE__ */ jsx5(InboxRow, { item, onMarkRead: () => markRead.mutate(item.id) }, item.id)) })
   ] });
 }
+function InboxHeader({ action }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsx5("h2", { className: "text-sm font-semibold text-foreground", children: "Notifications" }),
+    action
+  ] });
+}
 function InboxRow({
   item,
   onMarkRead
@@ -445,20 +471,63 @@ function InboxRow({
       type: "button",
       onClick: onMarkRead,
       "aria-label": `${item.title}${item.isRead ? "" : " (unread)"}`,
-      className: cn3(
-        "flex w-full flex-col items-start gap-0.5 px-4 py-3 text-start hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-        item.isRead ? "text-muted-foreground" : "text-foreground"
-      ),
+      className: "flex w-full items-start gap-3 px-4 py-3.5 text-start transition-colors hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
       children: [
-        /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2 text-sm font-medium", children: [
-          !item.isRead && /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "h-2 w-2 rounded-full bg-primary" }),
-          item.title
-        ] }),
-        item.body && /* @__PURE__ */ jsx5("span", { className: "text-xs text-muted-foreground", children: item.body })
+        /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: "mt-1.5 flex size-2 shrink-0 items-center justify-center", children: !item.isRead && /* @__PURE__ */ jsx5("span", { className: "size-2 rounded-full bg-coral" }) }),
+        /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx5(
+            "span",
+            {
+              className: cn3(
+                "truncate text-sm",
+                item.isRead ? "font-normal text-muted-foreground" : "font-semibold text-foreground"
+              ),
+              children: item.title
+            }
+          ),
+          item.body && /* @__PURE__ */ jsx5("span", { className: "truncate text-xs text-muted-foreground", children: item.body })
+        ] })
       ]
     }
   ) });
 }
+function AlertIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
+        /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "9", y2: "13" }),
+        /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12.01", y1: "17", y2: "17" })
+      ]
+    }
+  );
+}
+function BellOffIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx5("path", { d: "M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5" }),
+        /* @__PURE__ */ jsx5("path", { d: "M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7" }),
+        /* @__PURE__ */ jsx5("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" }),
+        /* @__PURE__ */ jsx5("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+      ]
+    }
+  );
+}
 
 // src/notification-center.tsx
 import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
@@ -533,7 +602,7 @@ function NotificationCenter({
             "span",
             {
               "aria-hidden": true,
-              className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-xs font-semibold text-destructive-foreground",
+              className: "absolute -end-0.5 -top-0.5 inline-flex min-w-5 items-center justify-center rounded-full bg-coral px-1.5 text-xs font-semibold text-coral-foreground ring-2 ring-background",
               children: badge
             }
           )
@@ -663,14 +732,14 @@ import {
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function TrendChart({ data, className }) {
   return /* @__PURE__ */ jsx8("div", { className: cn6("h-72 w-full", className), role: "img", "aria-label": "Delivery trend over time", children: /* @__PURE__ */ jsx8(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs6(LineChart, { data, margin: { top: 8, right: 16, bottom: 8, left: 0 }, children: [
-    /* @__PURE__ */ jsx8(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }),
-    /* @__PURE__ */ jsx8(XAxis, { dataKey: "day", stroke: "hsl(var(--muted-foreground))", fontSize: 12 }),
-    /* @__PURE__ */ jsx8(YAxis, { stroke: "hsl(var(--muted-foreground))", fontSize: 12, allowDecimals: false }),
+    /* @__PURE__ */ jsx8(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }),
+    /* @__PURE__ */ jsx8(XAxis, { dataKey: "day", stroke: "var(--muted-foreground)", fontSize: 12 }),
+    /* @__PURE__ */ jsx8(YAxis, { stroke: "var(--muted-foreground)", fontSize: 12, allowDecimals: false }),
     /* @__PURE__ */ jsx8(Tooltip, {}),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "sends", stroke: "hsl(var(--primary))", dot: false }),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "delivered", stroke: "hsl(var(--chart-2, var(--primary)))", dot: false }),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "opened", stroke: "hsl(var(--chart-3, var(--primary)))", dot: false }),
-    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "clicked", stroke: "hsl(var(--chart-4, var(--primary)))", dot: false })
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "sends", stroke: "var(--primary)", dot: false }),
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "delivered", stroke: "var(--chart-2, var(--primary))", dot: false }),
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "opened", stroke: "var(--chart-3, var(--primary))", dot: false }),
+    /* @__PURE__ */ jsx8(Line, { type: "monotone", dataKey: "clicked", stroke: "var(--chart-4, var(--primary))", dot: false })
   ] }) }) });
 }
 
@@ -820,7 +889,7 @@ function TemplateStatusBadge({
 }
 
 // src/template-list.tsx
-import { cn as cn10 } from "@quanticjs/react-ui";
+import { Button as Button2, Card as Card2, EmptyState as EmptyState2, Skeleton as Skeleton2, cn as cn10 } from "@quanticjs/react-ui";
 import { useApiQuery as useApiQuery7 } from "@quanticjs/react-query";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function TemplateList({ basePath = "/api/templates", className }) {
@@ -829,51 +898,134 @@ function TemplateList({ basePath = "/api/templates", className }) {
     (client) => client.get(basePath)
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsxs9(
-      "div",
-      {
-        role: "status",
-        "aria-label": "Loading templates",
-        className: cn10("flex flex-col gap-2 p-4", className),
-        children: [
-          /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Loading templates" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx12("div", { "aria-hidden": "true", className: "h-12 animate-pulse rounded bg-muted" }, i))
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs9("div", { role: "status", "aria-label": "Loading templates", className: cn10(className), children: [
+      /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Loading templates" }),
+      /* @__PURE__ */ jsxs9(Card2, { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx12(ListHeader, {}),
+        /* @__PURE__ */ jsx12("ul", { className: "divide-y divide-border", children: [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs9("li", { className: "flex flex-col gap-2 px-4 py-3.5", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx12(Skeleton2, { className: "h-3.5 w-40" }),
+            /* @__PURE__ */ jsx12(Skeleton2, { className: "h-5 w-16 rounded-full" })
+          ] }),
+          /* @__PURE__ */ jsx12(Skeleton2, { className: "h-3 w-56" })
+        ] }, i)) })
+      ] })
+    ] });
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs9("div", { className: cn10("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx12("p", { className: "text-sm text-foreground", children: "Failed to load templates" }),
+    return /* @__PURE__ */ jsxs9(Card2, { className, children: [
+      /* @__PURE__ */ jsx12(ListHeader, {}),
+      /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center gap-3 px-6 py-12 text-center", children: [
+        /* @__PURE__ */ jsx12(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "grid size-12 place-items-center rounded-full bg-destructive/10 text-destructive [&_svg]:size-6",
+            children: /* @__PURE__ */ jsx12(AlertIcon2, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-foreground", children: "Failed to load templates" }),
+          /* @__PURE__ */ jsx12("p", { className: "text-sm text-muted-foreground", children: "Something went wrong while loading your templates." })
+        ] }),
+        /* @__PURE__ */ jsx12(Button2, { type: "button", onClick: () => void refetch(), children: "Try again" })
+      ] })
+    ] });
+  }
+  const items = data ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs9(Card2, { className, children: [
+      /* @__PURE__ */ jsx12(ListHeader, {}),
       /* @__PURE__ */ jsx12(
-        "button",
+        EmptyState2,
         {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
+          icon: /* @__PURE__ */ jsx12(FileIcon, {}),
+          title: "No templates found",
+          description: "This workspace doesn't have any notification templates yet."
         }
       )
     ] });
   }
-  const items = data ?? [];
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx12("div", { className: cn10("p-6 text-center text-sm text-muted-foreground", className), children: "No templates found" });
-  }
-  return /* @__PURE__ */ jsx12("section", { "aria-label": "Templates", className: cn10("flex flex-col", className), children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-      /* @__PURE__ */ jsx12("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Template" }),
-      /* @__PURE__ */ jsx12("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
-      /* @__PURE__ */ jsx12("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Locales" }),
-      /* @__PURE__ */ jsx12("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Versions" })
-    ] }) }),
-    /* @__PURE__ */ jsx12("tbody", { children: items.map((item) => /* @__PURE__ */ jsxs9("tr", { className: "border-b border-border", children: [
-      /* @__PURE__ */ jsx12("td", { className: "py-3 pe-4 font-medium text-foreground", children: item.templateId }),
-      /* @__PURE__ */ jsx12("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx12(TemplateStatusBadge, { status: item.latestStatus }) }),
-      /* @__PURE__ */ jsx12("td", { className: "px-4 py-3 text-muted-foreground", children: item.locales.join(", ") }),
-      /* @__PURE__ */ jsx12("td", { className: "px-4 py-3 text-muted-foreground", children: item.versionCount })
-    ] }, item.templateId)) })
-  ] }) });
+  return /* @__PURE__ */ jsxs9(Card2, { role: "region", "aria-label": "Templates", className, children: [
+    /* @__PURE__ */ jsx12(ListHeader, { count: items.length }),
+    /* @__PURE__ */ jsx12("ul", { className: "divide-y divide-border", children: items.map((item) => /* @__PURE__ */ jsx12(TemplateRow, { item }, item.templateId)) })
+  ] });
+}
+function ListHeader({ count }) {
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx12("h2", { className: "text-sm font-semibold text-foreground", children: "Templates" }),
+      /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground", children: "Read-only view of all notification templates" })
+    ] }),
+    count != null && count > 0 && /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium tabular-nums text-muted-foreground", children: [
+      count,
+      " templates"
+    ] })
+  ] });
+}
+function TemplateRow({ item }) {
+  return /* @__PURE__ */ jsxs9("li", { className: "flex flex-col gap-1.5 px-4 py-3.5", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx12("span", { className: "truncate text-sm font-medium text-foreground", children: item.templateId }),
+      /* @__PURE__ */ jsx12(TemplateStatusBadge, { status: item.latestStatus })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "tabular-nums", children: [
+        item.versionCount,
+        " versions"
+      ] }),
+      /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", className: "text-border", children: "\xB7" }),
+      /* @__PURE__ */ jsxs9("span", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx12("span", { children: "Locales:" }),
+        item.locales.map((locale) => /* @__PURE__ */ jsx12(
+          "span",
+          {
+            className: "inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
+            children: locale
+          },
+          locale
+        ))
+      ] })
+    ] })
+  ] });
+}
+function AlertIcon2() {
+  return /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx12("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
+        /* @__PURE__ */ jsx12("line", { x1: "12", x2: "12", y1: "9", y2: "13" }),
+        /* @__PURE__ */ jsx12("line", { x1: "12", x2: "12.01", y1: "17", y2: "17" })
+      ]
+    }
+  );
+}
+function FileIcon() {
+  return /* @__PURE__ */ jsxs9(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx12("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+        /* @__PURE__ */ jsx12("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+        /* @__PURE__ */ jsx12("path", { d: "M10 9H8" }),
+        /* @__PURE__ */ jsx12("path", { d: "M16 13H8" }),
+        /* @__PURE__ */ jsx12("path", { d: "M16 17H8" })
+      ]
+    }
+  );
 }
 
 // src/template-editor.tsx
@@ -2087,9 +2239,74 @@ function SegmentBuilder({
 
 // src/suppression-manager.tsx
 import { useState as useState10 } from "react";
-import { cn as cn20, formatDateTime as formatDateTime3, useToast as useToast8 } from "@quanticjs/react-ui";
+import { Button as Button4, Card as Card3, EmptyState as EmptyState3, cn as cn20, formatDateTime as formatDateTime3, useToast as useToast8 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation9, useApiQuery as useApiQuery14 } from "@quanticjs/react-query";
-import { Fragment, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// src/admin-panel.tsx
+import { Button as Button3, Skeleton as Skeleton3 } from "@quanticjs/react-ui";
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+function PanelHeader({ title, subtitle }) {
+  return /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: /* @__PURE__ */ jsxs19("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx22("h2", { className: "text-sm font-semibold text-foreground", children: title }),
+    subtitle && /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground tabular-nums", children: subtitle })
+  ] }) });
+}
+function SkeletonRows({ label, rows = 4 }) {
+  return /* @__PURE__ */ jsxs19("div", { role: "status", "aria-label": label, className: "flex flex-col gap-2 p-4", children: [
+    /* @__PURE__ */ jsx22("span", { className: "sr-only", children: label }),
+    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx22(Skeleton3, { className: "h-10 w-full" }, i))
+  ] });
+}
+function ErrorPanel({ message, onRetry }) {
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-3 px-6 py-12 text-center", children: [
+    /* @__PURE__ */ jsx22(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "grid size-12 place-items-center rounded-full bg-destructive/10 text-destructive [&_svg]:size-6",
+        children: /* @__PURE__ */ jsx22(AlertIcon3, {})
+      }
+    ),
+    /* @__PURE__ */ jsx22("p", { className: "text-sm font-medium text-foreground", children: message }),
+    /* @__PURE__ */ jsx22(Button3, { type: "button", onClick: onRetry, children: "Try again" })
+  ] });
+}
+function Pager({
+  label,
+  page,
+  totalPages,
+  onPrev,
+  onNext
+}) {
+  return /* @__PURE__ */ jsxs19(
+    "nav",
+    {
+      "aria-label": label,
+      className: "flex items-center justify-between gap-2 border-t border-border px-4 py-3",
+      children: [
+        /* @__PURE__ */ jsx22(Button3, { type: "button", variant: "outline", size: "sm", onClick: onPrev, disabled: page <= 1, children: "Previous" }),
+        /* @__PURE__ */ jsxs19("span", { className: "text-xs text-muted-foreground tabular-nums", children: [
+          "Page ",
+          page,
+          " of ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx22(Button3, { type: "button", variant: "outline", size: "sm", onClick: onNext, disabled: page >= totalPages, children: "Next" })
+      ]
+    }
+  );
+}
+var FIELD_CLASS = "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring";
+function AlertIcon3() {
+  return /* @__PURE__ */ jsxs19("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx22("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }),
+    /* @__PURE__ */ jsx22("line", { x1: "12", x2: "12", y1: "9", y2: "13" }),
+    /* @__PURE__ */ jsx22("line", { x1: "12", x2: "12.01", y1: "17", y2: "17" })
+  ] });
+}
+
+// src/suppression-manager.tsx
+import { Fragment, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var LIMIT3 = 20;
 var CHANNELS3 = ["inapp", "email", "push", "sms"];
 function SuppressionManager({ basePath = "/api", className }) {
@@ -2133,154 +2350,96 @@ function SuppressionManager({ basePath = "/api", className }) {
     event.preventDefault();
     add.mutate({ channel, address: address.trim(), reason: reason.trim() });
   };
-  const addForm = /* @__PURE__ */ jsxs19("form", { onSubmit: onAdd, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx22("label", { htmlFor: "suppression-channel", className: "text-sm font-medium text-foreground", children: "Channel" }),
-      /* @__PURE__ */ jsx22(
-        "select",
-        {
-          id: "suppression-channel",
-          value: channel,
-          onChange: (e) => setChannel(e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: CHANNELS3.map((c) => /* @__PURE__ */ jsx22("option", { value: c, children: c }, c))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx22("label", { htmlFor: "suppression-address", className: "text-sm font-medium text-foreground", children: "Address" }),
-      /* @__PURE__ */ jsx22(
-        "input",
-        {
-          id: "suppression-address",
-          type: "text",
-          value: address,
-          onChange: (e) => setAddress(e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx22("label", { htmlFor: "suppression-reason", className: "text-sm font-medium text-foreground", children: "Reason" }),
-      /* @__PURE__ */ jsx22(
-        "input",
-        {
-          id: "suppression-reason",
-          type: "text",
-          value: reason,
-          onChange: (e) => setReason(e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx22(
-      "button",
-      {
-        type: "submit",
-        disabled: add.isPending,
-        className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-        children: add.isPending ? "Adding\u2026" : "Add suppression"
-      }
-    )
-  ] });
-  let body;
-  if (isLoading) {
-    body = /* @__PURE__ */ jsxs19("div", { role: "status", "aria-label": "Loading suppressions", className: "flex flex-col gap-2 p-4", children: [
-      /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Loading suppressions" }),
-      [0, 1, 2].map((i) => /* @__PURE__ */ jsx22("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
-    ] });
-  } else if (isError) {
-    body = /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx22("p", { className: "text-sm text-foreground", children: "Failed to load suppressions" }),
-      /* @__PURE__ */ jsx22(
-        "button",
-        {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
-        }
-      )
-    ] });
-  } else {
-    const rows = data?.items ?? [];
-    const totalPages = data?.totalPages ?? 1;
-    if (rows.length === 0) {
-      body = /* @__PURE__ */ jsx22("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No suppressions" });
-    } else {
-      body = /* @__PURE__ */ jsxs19(Fragment, { children: [
-        /* @__PURE__ */ jsxs19("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-            /* @__PURE__ */ jsx22("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Channel" }),
-            /* @__PURE__ */ jsx22("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Address" }),
-            /* @__PURE__ */ jsx22("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Reason" }),
-            /* @__PURE__ */ jsx22("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
-            /* @__PURE__ */ jsx22("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Actions" }) })
+  const rows = data?.items ?? [];
+  const totalPages = data?.totalPages ?? 1;
+  return /* @__PURE__ */ jsxs20("section", { "aria-label": "Suppression list", className: cn20("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsx23(Card3, { children: /* @__PURE__ */ jsxs20("form", { onSubmit: onAdd, className: "flex flex-wrap items-end gap-3 p-4", noValidate: true, children: [
+      /* @__PURE__ */ jsxs20("label", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx23("span", { className: "font-medium text-foreground", children: "Channel" }),
+        /* @__PURE__ */ jsx23(
+          "select",
+          {
+            value: channel,
+            onChange: (e) => setChannel(e.target.value),
+            className: FIELD_CLASS,
+            children: CHANNELS3.map((c) => /* @__PURE__ */ jsx23("option", { value: c, children: c }, c))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs20("label", { className: "flex flex-1 flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx23("span", { className: "font-medium text-foreground", children: "Address" }),
+        /* @__PURE__ */ jsx23("input", { type: "text", value: address, onChange: (e) => setAddress(e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsxs20("label", { className: "flex flex-1 flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx23("span", { className: "font-medium text-foreground", children: "Reason" }),
+        /* @__PURE__ */ jsx23("input", { type: "text", value: reason, onChange: (e) => setReason(e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsx23(Button4, { type: "submit", disabled: add.isPending, children: add.isPending ? "Adding\u2026" : "Add suppression" })
+    ] }) }),
+    /* @__PURE__ */ jsxs20(Card3, { children: [
+      /* @__PURE__ */ jsx23(PanelHeader, { title: "Suppressions", subtitle: `${data?.total ?? rows.length} entries` }),
+      isLoading ? /* @__PURE__ */ jsx23(SkeletonRows, { label: "Loading suppressions" }) : isError ? /* @__PURE__ */ jsx23(ErrorPanel, { message: "Failed to load suppressions", onRetry: () => void refetch() }) : rows.length === 0 ? /* @__PURE__ */ jsx23(EmptyState3, { icon: /* @__PURE__ */ jsx23(BanIcon, {}), title: "No suppressions", description: "No addresses are suppressed." }) : /* @__PURE__ */ jsxs20(Fragment, { children: [
+        /* @__PURE__ */ jsxs20("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsxs20("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Channel" }),
+            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Address" }),
+            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Reason" }),
+            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
+            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Actions" }) })
           ] }) }),
-          /* @__PURE__ */ jsx22("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs19("tr", { className: "border-b border-border", children: [
-            /* @__PURE__ */ jsx22("td", { className: "py-3 pe-4 text-foreground", children: row.channel }),
-            /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-foreground", children: row.address }),
-            /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-muted-foreground", children: row.reason }),
-            /* @__PURE__ */ jsx22("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime3(row.createdAt) }),
-            /* @__PURE__ */ jsx22("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx22(
-              "button",
+          /* @__PURE__ */ jsx23("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs20("tr", { className: "border-b border-border last:border-0 hover:bg-muted/40", children: [
+            /* @__PURE__ */ jsx23("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx23("span", { className: "inline-flex items-center rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: row.channel }) }),
+            /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-foreground", children: row.address }),
+            /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-muted-foreground", children: row.reason }),
+            /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime3(row.createdAt) }),
+            /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-end", children: /* @__PURE__ */ jsx23(
+              Button4,
               {
                 type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "text-destructive",
                 disabled: remove.isPending,
                 onClick: () => remove.mutate(row.id),
-                className: "rounded-md border border-border px-3 py-1 text-sm font-medium text-destructive hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
                 children: "Remove"
               }
             ) })
           ] }, row.id)) })
         ] }),
-        /* @__PURE__ */ jsxs19("nav", { "aria-label": "Suppression pagination", className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx22(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPage((p) => Math.max(1, p - 1)),
-              disabled: page <= 1,
-              className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxs19("span", { className: "text-xs text-muted-foreground", children: [
-            "Page ",
+        /* @__PURE__ */ jsx23(
+          Pager,
+          {
+            label: "Suppression pagination",
             page,
-            " of ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsx22(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
-              disabled: page >= totalPages,
-              className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-              children: "Next"
-            }
-          )
-        ] })
-      ] });
-    }
-  }
-  return /* @__PURE__ */ jsxs19("section", { "aria-label": "Suppression list", className: cn20("flex flex-col gap-4", className), children: [
-    addForm,
-    body
+            totalPages,
+            onPrev: () => setPage((p) => Math.max(1, p - 1)),
+            onNext: () => setPage((p) => Math.min(totalPages, p + 1))
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function BanIcon() {
+  return /* @__PURE__ */ jsxs20("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx23("path", { d: "m4.9 4.9 14.2 14.2" })
   ] });
 }
 
 // src/dlq-console.tsx
 import { Fragment as Fragment2, useState as useState11 } from "react";
 import {
+  Button as Button5,
+  Card as Card4,
+  EmptyState as EmptyState4,
+  StatusBadge as StatusBadge4,
   cn as cn21,
   formatDateTime as formatDateTime4,
-  StatusBadge as StatusBadge4,
   useToast as useToast9
 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation10, useApiQuery as useApiQuery15 } from "@quanticjs/react-query";
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var LIMIT4 = 20;
 var STATUS_FILTERS = ["queued", "replayed", "discarded"];
 function buildErrorDescription(error) {
@@ -2304,31 +2463,26 @@ function DlqMessageDetailRow({ id, basePath }) {
     (client) => client.get(`${basePath}/admin/dlq/${id}`)
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsxs20("div", { role: "status", "aria-label": "Loading message detail", className: "flex flex-col gap-2 p-3", children: [
-      /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Loading message detail" }),
-      /* @__PURE__ */ jsx23("div", { "aria-hidden": "true", className: "h-16 animate-pulse rounded bg-muted" })
+    return /* @__PURE__ */ jsxs21("div", { role: "status", "aria-label": "Loading message detail", className: "p-4", children: [
+      /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Loading message detail" }),
+      /* @__PURE__ */ jsx24("div", { "aria-hidden": "true", className: "h-16 animate-pulse rounded bg-muted motion-reduce:animate-none" })
     ] });
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-start gap-3 p-3", children: [
-      /* @__PURE__ */ jsx23("p", { className: "text-sm text-foreground", children: "Failed to load message detail" }),
-      /* @__PURE__ */ jsx23(
-        "button",
-        {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
-        }
-      )
+    return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start gap-3 p-4", children: [
+      /* @__PURE__ */ jsx24("p", { className: "text-sm text-foreground", children: "Failed to load message detail" }),
+      /* @__PURE__ */ jsx24(Button5, { type: "button", size: "sm", onClick: () => void refetch(), children: "Try again" })
     ] });
   }
-  return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-2 p-3 text-sm", children: [
-    /* @__PURE__ */ jsxs20("p", { className: "text-muted-foreground", children: [
-      "Error: ",
-      /* @__PURE__ */ jsx23("span", { className: "text-foreground", children: data?.errorMessage ?? "\u2014" })
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-3 px-5 py-4 text-sm", children: [
+    /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx24("div", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Error" }),
+      /* @__PURE__ */ jsx24("div", { className: "font-mono text-xs text-destructive", children: data?.errorMessage ?? "\u2014" })
     ] }),
-    /* @__PURE__ */ jsx23("pre", { className: "max-h-64 overflow-auto rounded bg-muted p-3 text-xs text-foreground", children: JSON.stringify(data?.payload ?? {}, null, 2) })
+    /* @__PURE__ */ jsxs21("div", { children: [
+      /* @__PURE__ */ jsx24("div", { className: "mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Payload" }),
+      /* @__PURE__ */ jsx24("pre", { className: "max-h-64 overflow-auto rounded-md border border-border bg-card p-3 font-mono text-xs leading-relaxed text-foreground", children: JSON.stringify(data?.payload ?? {}, null, 2) })
+    ] })
   ] });
 }
 function DlqConsole({ basePath = "/api", className }) {
@@ -2376,150 +2530,108 @@ function DlqConsole({ basePath = "/api", className }) {
       })
     }
   );
-  const filterControl = /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx23("label", { htmlFor: "dlq-status", className: "text-sm font-medium text-foreground", children: "Status" }),
-    /* @__PURE__ */ jsxs20(
-      "select",
-      {
-        id: "dlq-status",
-        value: statusFilter,
-        onChange: (e) => {
-          setStatusFilter(e.target.value);
-          setPage(1);
-        },
-        className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-        children: [
-          /* @__PURE__ */ jsx23("option", { value: "", children: "All" }),
-          STATUS_FILTERS.map((s) => /* @__PURE__ */ jsx23("option", { value: s, children: s }, s))
-        ]
-      }
-    )
-  ] });
-  let body;
-  if (isLoading) {
-    body = /* @__PURE__ */ jsxs20(
-      "div",
-      {
-        role: "status",
-        "aria-label": "Loading dead-letter messages",
-        className: "flex flex-col gap-2 p-4",
-        children: [
-          /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Loading dead-letter messages" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx23("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
-        ]
-      }
-    );
-  } else if (isError) {
-    body = /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx23("p", { className: "text-sm text-foreground", children: "Failed to load dead-letter messages" }),
-      /* @__PURE__ */ jsx23(
-        "button",
+  const rows = data?.items ?? [];
+  const totalPages = data?.totalPages ?? 1;
+  return /* @__PURE__ */ jsxs21("section", { "aria-label": "Dead-letter queue", className: cn21("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-2", children: [
+      /* @__PURE__ */ jsx24("label", { htmlFor: "dlq-status", className: "text-sm font-medium text-foreground", children: "Status" }),
+      /* @__PURE__ */ jsxs21(
+        "select",
         {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
+          id: "dlq-status",
+          value: statusFilter,
+          onChange: (e) => {
+            setStatusFilter(e.target.value);
+            setPage(1);
+          },
+          className: FIELD_CLASS,
+          children: [
+            /* @__PURE__ */ jsx24("option", { value: "", children: "All" }),
+            STATUS_FILTERS.map((s) => /* @__PURE__ */ jsx24("option", { value: s, children: s }, s))
+          ]
         }
       )
-    ] });
-  } else {
-    const rows = data?.items ?? [];
-    const totalPages = data?.totalPages ?? 1;
-    if (rows.length === 0) {
-      body = /* @__PURE__ */ jsx23("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No dead-letter messages" });
-    } else {
-      body = /* @__PURE__ */ jsxs20(Fragment3, { children: [
-        /* @__PURE__ */ jsxs20("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx23("thead", { children: /* @__PURE__ */ jsxs20("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-            /* @__PURE__ */ jsx23("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Request" }),
-            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Failure reason" }),
-            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
-            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Attempts" }),
-            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: "First seen" }),
-            /* @__PURE__ */ jsx23("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Actions" }) })
-          ] }) }),
-          /* @__PURE__ */ jsx23("tbody", { children: rows.map((row) => {
-            const isExpanded = expandedId === row.id;
-            return /* @__PURE__ */ jsxs20(Fragment2, { children: [
-              /* @__PURE__ */ jsxs20("tr", { className: "border-b border-border", children: [
-                /* @__PURE__ */ jsx23("td", { className: "py-3 pe-4", children: /* @__PURE__ */ jsx23(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-expanded": isExpanded,
-                    onClick: () => setExpandedId(isExpanded ? null : row.id),
-                    className: "rounded text-start font-medium text-primary hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-                    children: row.requestId ?? row.id
-                  }
-                ) }),
-                /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-muted-foreground", children: row.failureReason }),
-                /* @__PURE__ */ jsx23("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx23(StatusBadge4, { variant: statusVariant3(row.status), appearance: "dot", children: row.status }) }),
-                /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-muted-foreground", children: row.attemptCount }),
-                /* @__PURE__ */ jsx23("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime4(row.firstSeenAt) }),
-                /* @__PURE__ */ jsx23("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx23(
-                    "button",
-                    {
-                      type: "button",
-                      disabled: replay.isPending,
-                      onClick: () => replay.mutate(row.id),
-                      className: "rounded-md border border-border px-3 py-1 text-sm font-medium text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-                      children: "Replay"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx23(
-                    "button",
-                    {
-                      type: "button",
-                      disabled: discard.isPending,
-                      onClick: () => discard.mutate(row.id),
-                      className: "rounded-md border border-border px-3 py-1 text-sm font-medium text-destructive hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-                      children: "Discard"
-                    }
-                  )
-                ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs21(Card4, { children: [
+      /* @__PURE__ */ jsx24(PanelHeader, { title: "Messages", subtitle: !isLoading && !isError ? `${data?.total ?? rows.length} messages` : void 0 }),
+      isLoading ? /* @__PURE__ */ jsx24(SkeletonRows, { label: "Loading dead-letter messages" }) : isError ? /* @__PURE__ */ jsx24(ErrorPanel, { message: "Failed to load dead-letter messages", onRetry: () => void refetch() }) : rows.length === 0 ? /* @__PURE__ */ jsx24(EmptyState4, { icon: /* @__PURE__ */ jsx24(SkullIcon, {}), title: "No dead-letter messages", description: "The queue is empty for the current filter." }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
+        /* @__PURE__ */ jsx24("ul", { className: "divide-y divide-border", children: rows.map((row) => {
+          const isExpanded = expandedId === row.id;
+          return /* @__PURE__ */ jsxs21(Fragment2, { children: [
+            /* @__PURE__ */ jsxs21("li", { className: "flex items-start gap-3 px-4 py-3.5", children: [
+              /* @__PURE__ */ jsx24(
+                "button",
+                {
+                  type: "button",
+                  "aria-expanded": isExpanded,
+                  "aria-label": isExpanded ? "Collapse" : "Expand",
+                  onClick: () => setExpandedId(isExpanded ? null : row.id),
+                  className: "mt-0.5 grid size-5 shrink-0 place-items-center rounded text-muted-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring [&_svg]:size-4",
+                  children: /* @__PURE__ */ jsx24(ChevronIcon, { open: isExpanded })
+                }
+              ),
+              /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ jsx24("span", { className: "font-mono text-xs text-muted-foreground", children: row.requestId ?? row.id }),
+                  /* @__PURE__ */ jsx24(StatusBadge4, { variant: statusVariant3(row.status), appearance: "dot", children: row.status })
+                ] }),
+                /* @__PURE__ */ jsx24("div", { className: "mt-1 truncate text-sm font-medium text-foreground", children: row.failureReason }),
+                /* @__PURE__ */ jsxs21("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 text-xs text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs21("span", { className: "tabular-nums", children: [
+                    row.attemptCount,
+                    " attempts"
+                  ] }),
+                  /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-border", children: "\xB7" }),
+                  /* @__PURE__ */ jsxs21("span", { className: "tabular-nums", children: [
+                    "first seen ",
+                    formatDateTime4(row.firstSeenAt)
+                  ] })
+                ] })
               ] }),
-              isExpanded && /* @__PURE__ */ jsx23("tr", { className: "border-b border-border", children: /* @__PURE__ */ jsx23("td", { colSpan: 6, className: "bg-muted/40", children: /* @__PURE__ */ jsx23(DlqMessageDetailRow, { id: row.id, basePath }) }) })
-            ] }, row.id);
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxs20("nav", { "aria-label": "Dead-letter pagination", className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx23(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPage((p) => Math.max(1, p - 1)),
-              disabled: page <= 1,
-              className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground", children: [
-            "Page ",
+              /* @__PURE__ */ jsxs21("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx24(Button5, { type: "button", variant: "outline", size: "sm", disabled: replay.isPending, onClick: () => replay.mutate(row.id), children: "Replay" }),
+                /* @__PURE__ */ jsx24(Button5, { type: "button", variant: "ghost", size: "sm", className: "text-destructive", disabled: discard.isPending, onClick: () => discard.mutate(row.id), children: "Discard" })
+              ] })
+            ] }),
+            isExpanded && /* @__PURE__ */ jsx24("li", { className: "border-t border-border bg-muted/40", children: /* @__PURE__ */ jsx24(DlqMessageDetailRow, { id: row.id, basePath }) })
+          ] }, row.id);
+        }) }),
+        /* @__PURE__ */ jsx24(
+          Pager,
+          {
+            label: "Dead-letter pagination",
             page,
-            " of ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsx23(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
-              disabled: page >= totalPages,
-              className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-              children: "Next"
-            }
-          )
-        ] })
-      ] });
+            totalPages,
+            onPrev: () => setPage((p) => Math.max(1, p - 1)),
+            onNext: () => setPage((p) => Math.min(totalPages, p + 1))
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ChevronIcon({ open }) {
+  return /* @__PURE__ */ jsx24(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: cn21("transition-transform motion-reduce:transition-none", open && "rotate-90"),
+      children: /* @__PURE__ */ jsx24("path", { d: "m9 18 6-6-6-6" })
     }
-  }
-  return /* @__PURE__ */ jsxs20("section", { "aria-label": "Dead-letter queue", className: cn21("flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsxs20("header", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx23("h2", { className: "text-sm font-semibold text-foreground", children: "Dead-letter queue" }),
-      filterControl
-    ] }),
-    body
+  );
+}
+function SkullIcon() {
+  return /* @__PURE__ */ jsxs21("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx24("circle", { cx: "9", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx24("circle", { cx: "15", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx24("path", { d: "M8 20v2h8v-2" }),
+    /* @__PURE__ */ jsx24("path", { d: "m12.5 17-.5-1-.5 1h1Z" }),
+    /* @__PURE__ */ jsx24("path", { d: "M16 20a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20" })
   ] });
 }
 
@@ -2527,7 +2639,7 @@ function DlqConsole({ basePath = "/api", className }) {
 import { useMemo as useMemo3, useState as useState12 } from "react";
 import { cn as cn22, useToast as useToast10 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation11, useApiQuery as useApiQuery16 } from "@quanticjs/react-query";
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function normalize2(data) {
   if (!data) return [];
   if (Array.isArray(data)) return data;
@@ -2609,10 +2721,10 @@ function CatalogEditor({ basePath = "/api", className }) {
     setEditingId(`${entry.key}:${entry.locale}`);
     setEditValue(entry.value);
   };
-  const addForm = /* @__PURE__ */ jsxs21("form", { onSubmit: onAdd, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx24("label", { htmlFor: "catalog-new-key", className: "text-sm font-medium text-foreground", children: "Key" }),
-      /* @__PURE__ */ jsx24(
+  const addForm = /* @__PURE__ */ jsxs22("form", { onSubmit: onAdd, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx25("label", { htmlFor: "catalog-new-key", className: "text-sm font-medium text-foreground", children: "Key" }),
+      /* @__PURE__ */ jsx25(
         "input",
         {
           id: "catalog-new-key",
@@ -2623,9 +2735,9 @@ function CatalogEditor({ basePath = "/api", className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx24("label", { htmlFor: "catalog-new-locale", className: "text-sm font-medium text-foreground", children: "Locale" }),
-      /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx25("label", { htmlFor: "catalog-new-locale", className: "text-sm font-medium text-foreground", children: "Locale" }),
+      /* @__PURE__ */ jsx25(
         "input",
         {
           id: "catalog-new-locale",
@@ -2636,9 +2748,9 @@ function CatalogEditor({ basePath = "/api", className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx24("label", { htmlFor: "catalog-new-value", className: "text-sm font-medium text-foreground", children: "Value" }),
-      /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx25("label", { htmlFor: "catalog-new-value", className: "text-sm font-medium text-foreground", children: "Value" }),
+      /* @__PURE__ */ jsx25(
         "input",
         {
           id: "catalog-new-value",
@@ -2649,7 +2761,7 @@ function CatalogEditor({ basePath = "/api", className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       "button",
       {
         type: "submit",
@@ -2659,9 +2771,9 @@ function CatalogEditor({ basePath = "/api", className }) {
       }
     )
   ] });
-  const filterInput = /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx24("label", { htmlFor: "catalog-filter", className: "text-sm font-medium text-foreground", children: "Filter by key" }),
-    /* @__PURE__ */ jsx24(
+  const filterInput = /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx25("label", { htmlFor: "catalog-filter", className: "text-sm font-medium text-foreground", children: "Filter by key" }),
+    /* @__PURE__ */ jsx25(
       "input",
       {
         id: "catalog-filter",
@@ -2674,14 +2786,14 @@ function CatalogEditor({ basePath = "/api", className }) {
   ] });
   let body;
   if (isLoading) {
-    body = /* @__PURE__ */ jsxs21("div", { role: "status", "aria-label": "Loading catalog", className: "flex flex-col gap-2 p-4", children: [
-      /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Loading catalog" }),
-      [0, 1, 2].map((i) => /* @__PURE__ */ jsx24("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+    body = /* @__PURE__ */ jsxs22("div", { role: "status", "aria-label": "Loading catalog", className: "flex flex-col gap-2 p-4", children: [
+      /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Loading catalog" }),
+      [0, 1, 2].map((i) => /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
     ] });
   } else if (isError) {
-    body = /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx24("p", { className: "text-sm text-foreground", children: "Failed to load catalog" }),
-      /* @__PURE__ */ jsx24(
+    body = /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-start gap-3 p-4", children: [
+      /* @__PURE__ */ jsx25("p", { className: "text-sm text-foreground", children: "Failed to load catalog" }),
+      /* @__PURE__ */ jsx25(
         "button",
         {
           type: "button",
@@ -2692,22 +2804,22 @@ function CatalogEditor({ basePath = "/api", className }) {
       )
     ] });
   } else if (filtered.length === 0) {
-    body = /* @__PURE__ */ jsx24("div", { className: "p-6 text-center text-sm text-muted-foreground", children: entries.length === 0 ? "No catalog entries" : "No entries match your filter" });
+    body = /* @__PURE__ */ jsx25("div", { className: "p-6 text-center text-sm text-muted-foreground", children: entries.length === 0 ? "No catalog entries" : "No entries match your filter" });
   } else {
-    body = /* @__PURE__ */ jsxs21("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx24("thead", { children: /* @__PURE__ */ jsxs21("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-        /* @__PURE__ */ jsx24("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Key" }),
-        /* @__PURE__ */ jsx24("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Locale" }),
-        /* @__PURE__ */ jsx24("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Value" }),
-        /* @__PURE__ */ jsx24("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Actions" }) })
+    body = /* @__PURE__ */ jsxs22("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs22("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+        /* @__PURE__ */ jsx25("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Key" }),
+        /* @__PURE__ */ jsx25("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Locale" }),
+        /* @__PURE__ */ jsx25("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Value" }),
+        /* @__PURE__ */ jsx25("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Actions" }) })
       ] }) }),
-      /* @__PURE__ */ jsx24("tbody", { children: filtered.map((entry) => {
+      /* @__PURE__ */ jsx25("tbody", { children: filtered.map((entry) => {
         const rowId = `${entry.key}:${entry.locale}`;
         const isEditing = editingId === rowId;
-        return /* @__PURE__ */ jsxs21("tr", { className: "border-b border-border", children: [
-          /* @__PURE__ */ jsx24("td", { className: "py-3 pe-4 font-mono text-foreground", children: entry.key }),
-          /* @__PURE__ */ jsx24("td", { className: "px-4 py-3 text-foreground", children: entry.locale }),
-          /* @__PURE__ */ jsx24("td", { className: "px-4 py-3 text-foreground", children: isEditing ? /* @__PURE__ */ jsx24(
+        return /* @__PURE__ */ jsxs22("tr", { className: "border-b border-border", children: [
+          /* @__PURE__ */ jsx25("td", { className: "py-3 pe-4 font-mono text-foreground", children: entry.key }),
+          /* @__PURE__ */ jsx25("td", { className: "px-4 py-3 text-foreground", children: entry.locale }),
+          /* @__PURE__ */ jsx25("td", { className: "px-4 py-3 text-foreground", children: isEditing ? /* @__PURE__ */ jsx25(
             "input",
             {
               type: "text",
@@ -2717,8 +2829,8 @@ function CatalogEditor({ basePath = "/api", className }) {
               className: "w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
             }
           ) : entry.value }),
-          /* @__PURE__ */ jsx24("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
-            /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: isEditing ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -2732,7 +2844,7 @@ function CatalogEditor({ basePath = "/api", className }) {
                 children: "Save"
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -2741,8 +2853,8 @@ function CatalogEditor({ basePath = "/api", className }) {
                 children: "Cancel"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
-            /* @__PURE__ */ jsx24(
+          ] }) : /* @__PURE__ */ jsxs22(Fragment4, { children: [
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -2751,7 +2863,7 @@ function CatalogEditor({ basePath = "/api", className }) {
                 children: "Edit"
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "button",
               {
                 type: "button",
@@ -2766,7 +2878,7 @@ function CatalogEditor({ basePath = "/api", className }) {
       }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs21("section", { "aria-label": "Catalog editor", className: cn22("flex flex-col gap-4", className), children: [
+  return /* @__PURE__ */ jsxs22("section", { "aria-label": "Catalog editor", className: cn22("flex flex-col gap-4", className), children: [
     addForm,
     filterInput,
     body
@@ -2776,7 +2888,7 @@ function CatalogEditor({ basePath = "/api", className }) {
 // src/missing-translations-panel.tsx
 import { cn as cn23 } from "@quanticjs/react-ui";
 import { useApiQuery as useApiQuery17 } from "@quanticjs/react-query";
-import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function normalize3(data) {
   if (Array.isArray(data)) return data;
   return data?.missing ?? [];
@@ -2790,23 +2902,23 @@ function MissingTranslationsPanel({
     (client) => client.get(`${basePath}/i18n/catalog/missing`)
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         role: "status",
         "aria-label": "Loading missing translations",
         className: cn23("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Loading missing translations" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx25("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Loading missing translations" }),
+          [0, 1, 2].map((i) => /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs22("div", { className: cn23("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx25("p", { className: "text-sm text-foreground", children: "Failed to load missing translations" }),
-      /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsxs23("div", { className: cn23("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx26("p", { className: "text-sm text-foreground", children: "Failed to load missing translations" }),
+      /* @__PURE__ */ jsx26(
         "button",
         {
           type: "button",
@@ -2819,18 +2931,18 @@ function MissingTranslationsPanel({
   }
   const rows = normalize3(data);
   if (rows.length === 0) {
-    return /* @__PURE__ */ jsx25("div", { className: cn23("p-6 text-center text-sm text-muted-foreground", className), children: "No missing translations" });
+    return /* @__PURE__ */ jsx26("div", { className: cn23("p-6 text-center text-sm text-muted-foreground", className), children: "No missing translations" });
   }
-  return /* @__PURE__ */ jsx25("section", { "aria-label": "Missing translations", className: cn23("flex flex-col gap-3", className), children: /* @__PURE__ */ jsxs22("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx25("thead", { children: /* @__PURE__ */ jsxs22("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-      /* @__PURE__ */ jsx25("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Key" }),
-      /* @__PURE__ */ jsx25("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Locale" }),
-      /* @__PURE__ */ jsx25("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Type" })
+  return /* @__PURE__ */ jsx26("section", { "aria-label": "Missing translations", className: cn23("flex flex-col gap-3", className), children: /* @__PURE__ */ jsxs23("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsxs23("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+      /* @__PURE__ */ jsx26("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Key" }),
+      /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Locale" }),
+      /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Type" })
     ] }) }),
-    /* @__PURE__ */ jsx25("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs22("tr", { className: "border-b border-border", children: [
-      /* @__PURE__ */ jsx25("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.key }),
-      /* @__PURE__ */ jsx25("td", { className: "px-4 py-3 text-foreground", children: row.locale }),
-      /* @__PURE__ */ jsx25("td", { className: "px-4 py-3 text-muted-foreground", children: row.type ?? "\u2014" })
+    /* @__PURE__ */ jsx26("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs23("tr", { className: "border-b border-border", children: [
+      /* @__PURE__ */ jsx26("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.key }),
+      /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-foreground", children: row.locale }),
+      /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-muted-foreground", children: row.type ?? "\u2014" })
     ] }, `${row.key}:${row.locale}:${i}`)) })
   ] }) });
 }
@@ -2838,7 +2950,7 @@ function MissingTranslationsPanel({
 // src/fallback-report-panel.tsx
 import { cn as cn24 } from "@quanticjs/react-ui";
 import { useApiQuery as useApiQuery18 } from "@quanticjs/react-query";
-import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function normalize4(data) {
   if (Array.isArray(data)) return data;
   return data?.entries ?? [];
@@ -2849,23 +2961,23 @@ function FallbackReportPanel({ basePath = "/api", className }) {
     (client) => client.get(`${basePath}/i18n/catalog/fallback-report`)
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "div",
       {
         role: "status",
         "aria-label": "Loading fallback report",
         className: cn24("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx26("span", { className: "sr-only", children: "Loading fallback report" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx26("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Loading fallback report" }),
+          [0, 1, 2].map((i) => /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs23("div", { className: cn24("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx26("p", { className: "text-sm text-foreground", children: "Failed to load fallback report" }),
-      /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsxs24("div", { className: cn24("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx27("p", { className: "text-sm text-foreground", children: "Failed to load fallback report" }),
+      /* @__PURE__ */ jsx27(
         "button",
         {
           type: "button",
@@ -2878,22 +2990,22 @@ function FallbackReportPanel({ basePath = "/api", className }) {
   }
   const rows = normalize4(data);
   if (rows.length === 0) {
-    return /* @__PURE__ */ jsx26("div", { className: cn24("p-6 text-center text-sm text-muted-foreground", className), children: "No fallbacks reported" });
+    return /* @__PURE__ */ jsx27("div", { className: cn24("p-6 text-center text-sm text-muted-foreground", className), children: "No fallbacks reported" });
   }
-  return /* @__PURE__ */ jsx26("section", { "aria-label": "Fallback report", className: cn24("flex flex-col gap-3", className), children: /* @__PURE__ */ jsxs23("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsxs23("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-      /* @__PURE__ */ jsx26("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Key" }),
-      /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Requested" }),
-      /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Resolved" }),
-      /* @__PURE__ */ jsx26("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Chain" })
+  return /* @__PURE__ */ jsx27("section", { "aria-label": "Fallback report", className: cn24("flex flex-col gap-3", className), children: /* @__PURE__ */ jsxs24("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsxs24("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+      /* @__PURE__ */ jsx27("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Key" }),
+      /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Requested" }),
+      /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Resolved" }),
+      /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Chain" })
     ] }) }),
-    /* @__PURE__ */ jsx26("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs23("tr", { className: "border-b border-border", children: [
-      /* @__PURE__ */ jsx26("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.key }),
-      /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-foreground", children: row.requestedLocale }),
-      /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-foreground", children: row.resolvedLocale }),
-      /* @__PURE__ */ jsx26("td", { className: "px-4 py-3 text-muted-foreground", children: row.steps && row.steps.length > 0 ? /* @__PURE__ */ jsx26("ol", { className: "flex flex-wrap items-center gap-1", children: row.steps.map((step, si) => /* @__PURE__ */ jsxs23("li", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx26("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs text-foreground", children: step }),
-        si < (row.steps?.length ?? 0) - 1 && /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2192" })
+    /* @__PURE__ */ jsx27("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs24("tr", { className: "border-b border-border", children: [
+      /* @__PURE__ */ jsx27("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.key }),
+      /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-foreground", children: row.requestedLocale }),
+      /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-foreground", children: row.resolvedLocale }),
+      /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-muted-foreground", children: row.steps && row.steps.length > 0 ? /* @__PURE__ */ jsx27("ol", { className: "flex flex-wrap items-center gap-1", children: row.steps.map((step, si) => /* @__PURE__ */ jsxs24("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx27("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs text-foreground", children: step }),
+        si < (row.steps?.length ?? 0) - 1 && /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u2192" })
       ] }, `${step}:${si}`)) }) : "\u2014" })
     ] }, `${row.key}:${row.requestedLocale}:${i}`)) })
   ] }) });
@@ -2903,7 +3015,7 @@ function FallbackReportPanel({ basePath = "/api", className }) {
 import { useState as useState13 } from "react";
 import { cn as cn25, formatDateTime as formatDateTime5, useToast as useToast11 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation12, useApiQuery as useApiQuery19 } from "@quanticjs/react-query";
-import { Fragment as Fragment5, jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 var LIMIT5 = 20;
 function RecipientAdminPanel({ basePath = "/api", className }) {
   const toast = useToast11();
@@ -2954,10 +3066,10 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
     if (row.consentSms) active.push("sms");
     return active.length > 0 ? active.join(", ") : "none";
   };
-  const searchForm = /* @__PURE__ */ jsxs24("form", { onSubmit: onSearch, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs24("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx27("label", { htmlFor: "recipient-search", className: "text-sm font-medium text-foreground", children: "Search recipients" }),
-      /* @__PURE__ */ jsx27(
+  const searchForm = /* @__PURE__ */ jsxs25("form", { onSubmit: onSearch, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
+    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx28("label", { htmlFor: "recipient-search", className: "text-sm font-medium text-foreground", children: "Search recipients" }),
+      /* @__PURE__ */ jsx28(
         "input",
         {
           id: "recipient-search",
@@ -2968,7 +3080,7 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       "button",
       {
         type: "submit",
@@ -2979,14 +3091,14 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
   ] });
   let body;
   if (isLoading) {
-    body = /* @__PURE__ */ jsxs24("div", { role: "status", "aria-label": "Loading recipients", className: "flex flex-col gap-2 p-4", children: [
-      /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Loading recipients" }),
-      [0, 1, 2].map((i) => /* @__PURE__ */ jsx27("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+    body = /* @__PURE__ */ jsxs25("div", { role: "status", "aria-label": "Loading recipients", className: "flex flex-col gap-2 p-4", children: [
+      /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Loading recipients" }),
+      [0, 1, 2].map((i) => /* @__PURE__ */ jsx28("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
     ] });
   } else if (isError) {
-    body = /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx27("p", { className: "text-sm text-foreground", children: "Failed to load recipients" }),
-      /* @__PURE__ */ jsx27(
+    body = /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-start gap-3 p-4", children: [
+      /* @__PURE__ */ jsx28("p", { className: "text-sm text-foreground", children: "Failed to load recipients" }),
+      /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -3000,26 +3112,26 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
     const rows = data?.items ?? [];
     const totalPages = data?.totalPages ?? 1;
     if (rows.length === 0) {
-      body = /* @__PURE__ */ jsx27("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No recipients" });
+      body = /* @__PURE__ */ jsx28("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No recipients" });
     } else {
-      body = /* @__PURE__ */ jsxs24(Fragment5, { children: [
-        /* @__PURE__ */ jsxs24("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsxs24("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-            /* @__PURE__ */ jsx27("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "User" }),
-            /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Email" }),
-            /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Phone" }),
-            /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Consents" }),
-            /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
-            /* @__PURE__ */ jsx27("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx27("span", { className: "sr-only", children: "Actions" }) })
+      body = /* @__PURE__ */ jsxs25(Fragment5, { children: [
+        /* @__PURE__ */ jsxs25("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs25("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+            /* @__PURE__ */ jsx28("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "User" }),
+            /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Email" }),
+            /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Phone" }),
+            /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Consents" }),
+            /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
+            /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Actions" }) })
           ] }) }),
-          /* @__PURE__ */ jsx27("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs24("tr", { className: "border-b border-border", children: [
-            /* @__PURE__ */ jsx27("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.userId }),
-            /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-foreground", children: row.email ?? "\u2014" }),
-            /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-foreground", children: row.phone ?? "\u2014" }),
-            /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-muted-foreground", children: consents(row) }),
-            /* @__PURE__ */ jsx27("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime5(row.createdAt) }),
-            /* @__PURE__ */ jsx27("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs25("tr", { className: "border-b border-border", children: [
+            /* @__PURE__ */ jsx28("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.userId }),
+            /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 text-foreground", children: row.email ?? "\u2014" }),
+            /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 text-foreground", children: row.phone ?? "\u2014" }),
+            /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 text-muted-foreground", children: consents(row) }),
+            /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime5(row.createdAt) }),
+            /* @__PURE__ */ jsx28("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
@@ -3029,7 +3141,7 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
                   children: "Export"
                 }
               ),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   type: "button",
@@ -3042,8 +3154,8 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
             ] }) })
           ] }, row.userId)) })
         ] }),
-        /* @__PURE__ */ jsxs24("nav", { "aria-label": "Recipient pagination", className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs25("nav", { "aria-label": "Recipient pagination", className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx28(
             "button",
             {
               type: "button",
@@ -3053,13 +3165,13 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsxs24("span", { className: "text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs25("span", { className: "text-xs text-muted-foreground", children: [
             "Page ",
             page,
             " of ",
             totalPages
           ] }),
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "button",
             {
               type: "button",
@@ -3073,7 +3185,7 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
       ] });
     }
   }
-  return /* @__PURE__ */ jsxs24("section", { "aria-label": "Recipient administration", className: cn25("flex flex-col gap-4", className), children: [
+  return /* @__PURE__ */ jsxs25("section", { "aria-label": "Recipient administration", className: cn25("flex flex-col gap-4", className), children: [
     searchForm,
     body
   ] });
@@ -3083,7 +3195,7 @@ function RecipientAdminPanel({ basePath = "/api", className }) {
 import { Fragment as Fragment6, useState as useState14 } from "react";
 import { cn as cn26, formatDateTime as formatDateTime6, useToast as useToast12, StatusBadge as StatusBadge5 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation13, useApiQuery as useApiQuery20 } from "@quanticjs/react-query";
-import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 var EVENT_TYPES = [
   "notification.sent",
   "notification.delivered",
@@ -3109,15 +3221,15 @@ function WebhookDeliveries({ endpointId, basePath }) {
     (client) => client.get(`${basePath}/webhook-endpoints/${endpointId}/deliveries`)
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsxs25("div", { role: "status", "aria-label": "Loading deliveries", className: "flex flex-col gap-2 p-3", children: [
-      /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Loading deliveries" }),
-      [0, 1].map((i) => /* @__PURE__ */ jsx28("div", { "aria-hidden": "true", className: "h-8 animate-pulse rounded bg-muted" }, i))
+    return /* @__PURE__ */ jsxs26("div", { role: "status", "aria-label": "Loading deliveries", className: "flex flex-col gap-2 p-3", children: [
+      /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Loading deliveries" }),
+      [0, 1].map((i) => /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", className: "h-8 animate-pulse rounded bg-muted" }, i))
     ] });
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-start gap-2 p-3", children: [
-      /* @__PURE__ */ jsx28("p", { className: "text-sm text-foreground", children: "Failed to load deliveries" }),
-      /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-start gap-2 p-3", children: [
+      /* @__PURE__ */ jsx29("p", { className: "text-sm text-foreground", children: "Failed to load deliveries" }),
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -3130,18 +3242,18 @@ function WebhookDeliveries({ endpointId, basePath }) {
   }
   const rows = normalizeDeliveries(data);
   if (rows.length === 0) {
-    return /* @__PURE__ */ jsx28("div", { className: "p-3 text-center text-sm text-muted-foreground", children: "No deliveries" });
+    return /* @__PURE__ */ jsx29("div", { className: "p-3 text-center text-sm text-muted-foreground", children: "No deliveries" });
   }
-  return /* @__PURE__ */ jsxs25("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs25("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-      /* @__PURE__ */ jsx28("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Delivery" }),
-      /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
-      /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" })
+  return /* @__PURE__ */ jsxs26("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+      /* @__PURE__ */ jsx29("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Delivery" }),
+      /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
+      /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" })
     ] }) }),
-    /* @__PURE__ */ jsx28("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs25("tr", { className: "border-b border-border", children: [
-      /* @__PURE__ */ jsx28("td", { className: "py-2 pe-4 font-mono text-foreground", children: row.id }),
-      /* @__PURE__ */ jsx28("td", { className: "px-4 py-2 text-muted-foreground", children: row.status }),
-      /* @__PURE__ */ jsx28("td", { className: "px-4 py-2 text-muted-foreground", children: formatDateTime6(row.createdAt) })
+    /* @__PURE__ */ jsx29("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border", children: [
+      /* @__PURE__ */ jsx29("td", { className: "py-2 pe-4 font-mono text-foreground", children: row.id }),
+      /* @__PURE__ */ jsx29("td", { className: "px-4 py-2 text-muted-foreground", children: row.status }),
+      /* @__PURE__ */ jsx29("td", { className: "px-4 py-2 text-muted-foreground", children: formatDateTime6(row.createdAt) })
     ] }, row.id)) })
   ] });
 }
@@ -3216,10 +3328,10 @@ function WebhookEndpointManager({
       remove.mutate(id);
     }
   };
-  const createForm = /* @__PURE__ */ jsxs25("form", { onSubmit: onCreate, className: "flex flex-col gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx28("label", { htmlFor: "webhook-url", className: "text-sm font-medium text-foreground", children: "Endpoint URL" }),
-      /* @__PURE__ */ jsx28(
+  const createForm = /* @__PURE__ */ jsxs26("form", { onSubmit: onCreate, className: "flex flex-col gap-3", noValidate: true, children: [
+    /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx29("label", { htmlFor: "webhook-url", className: "text-sm font-medium text-foreground", children: "Endpoint URL" }),
+      /* @__PURE__ */ jsx29(
         "input",
         {
           id: "webhook-url",
@@ -3231,19 +3343,19 @@ function WebhookEndpointManager({
           className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
         }
       ),
-      urlError && /* @__PURE__ */ jsx28("p", { id: "webhook-url-error", className: "text-xs text-destructive", children: urlError })
+      urlError && /* @__PURE__ */ jsx29("p", { id: "webhook-url-error", className: "text-xs text-destructive", children: urlError })
     ] }),
-    /* @__PURE__ */ jsxs25("fieldset", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx28("legend", { className: "text-sm font-medium text-foreground", children: "Events" }),
-      /* @__PURE__ */ jsx28("div", { className: "flex flex-wrap gap-3", children: EVENT_TYPES.map((evt) => {
+    /* @__PURE__ */ jsxs26("fieldset", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx29("legend", { className: "text-sm font-medium text-foreground", children: "Events" }),
+      /* @__PURE__ */ jsx29("div", { className: "flex flex-wrap gap-3", children: EVENT_TYPES.map((evt) => {
         const id = `webhook-event-${evt}`;
-        return /* @__PURE__ */ jsxs25(
+        return /* @__PURE__ */ jsxs26(
           "label",
           {
             htmlFor: id,
             className: "flex items-center gap-2 text-sm text-foreground",
             children: [
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx29(
                 "input",
                 {
                   id,
@@ -3260,8 +3372,8 @@ function WebhookEndpointManager({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsxs25("label", { htmlFor: "webhook-active", className: "flex items-center gap-2 text-sm text-foreground", children: [
-      /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsxs26("label", { htmlFor: "webhook-active", className: "flex items-center gap-2 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx29(
         "input",
         {
           id: "webhook-active",
@@ -3273,7 +3385,7 @@ function WebhookEndpointManager({
       ),
       "Active"
     ] }),
-    /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsx29(
       "button",
       {
         type: "submit",
@@ -3285,14 +3397,14 @@ function WebhookEndpointManager({
   ] });
   let body;
   if (isLoading) {
-    body = /* @__PURE__ */ jsxs25("div", { role: "status", "aria-label": "Loading webhook endpoints", className: "flex flex-col gap-2 p-4", children: [
-      /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Loading webhook endpoints" }),
-      [0, 1, 2].map((i) => /* @__PURE__ */ jsx28("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+    body = /* @__PURE__ */ jsxs26("div", { role: "status", "aria-label": "Loading webhook endpoints", className: "flex flex-col gap-2 p-4", children: [
+      /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Loading webhook endpoints" }),
+      [0, 1, 2].map((i) => /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
     ] });
   } else if (isError) {
-    body = /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx28("p", { className: "text-sm text-foreground", children: "Failed to load webhook endpoints" }),
-      /* @__PURE__ */ jsx28(
+    body = /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-start gap-3 p-4", children: [
+      /* @__PURE__ */ jsx29("p", { className: "text-sm text-foreground", children: "Failed to load webhook endpoints" }),
+      /* @__PURE__ */ jsx29(
         "button",
         {
           type: "button",
@@ -3305,26 +3417,26 @@ function WebhookEndpointManager({
   } else {
     const rows = normalizeEndpoints(data);
     if (rows.length === 0) {
-      body = /* @__PURE__ */ jsx28("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No webhook endpoints" });
+      body = /* @__PURE__ */ jsx29("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No webhook endpoints" });
     } else {
-      body = /* @__PURE__ */ jsxs25("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx28("thead", { children: /* @__PURE__ */ jsxs25("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-          /* @__PURE__ */ jsx28("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "URL" }),
-          /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Events" }),
-          /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Active" }),
-          /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
-          /* @__PURE__ */ jsx28("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Actions" }) })
+      body = /* @__PURE__ */ jsxs26("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+          /* @__PURE__ */ jsx29("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "URL" }),
+          /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Events" }),
+          /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Active" }),
+          /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
+          /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
-        /* @__PURE__ */ jsx28("tbody", { children: rows.map((row) => {
+        /* @__PURE__ */ jsx29("tbody", { children: rows.map((row) => {
           const isExpanded = expandedId === row.id;
-          return /* @__PURE__ */ jsxs25(Fragment6, { children: [
-            /* @__PURE__ */ jsxs25("tr", { className: "border-b border-border", children: [
-              /* @__PURE__ */ jsx28("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.url }),
-              /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 text-muted-foreground", children: row.events.length > 0 ? row.events.join(", ") : "\u2014" }),
-              /* @__PURE__ */ jsx28("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx28(StatusBadge5, { variant: row.active ? "success" : "neutral", appearance: "dot", children: row.active ? "active" : "inactive" }) }),
-              /* @__PURE__ */ jsx28("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime6(row.createdAt) }),
-              /* @__PURE__ */ jsx28("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx28(
+          return /* @__PURE__ */ jsxs26(Fragment6, { children: [
+            /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border", children: [
+              /* @__PURE__ */ jsx29("td", { className: "py-3 pe-4 font-mono text-foreground", children: row.url }),
+              /* @__PURE__ */ jsx29("td", { className: "px-4 py-3 text-muted-foreground", children: row.events.length > 0 ? row.events.join(", ") : "\u2014" }),
+              /* @__PURE__ */ jsx29("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx29(StatusBadge5, { variant: row.active ? "success" : "neutral", appearance: "dot", children: row.active ? "active" : "inactive" }) }),
+              /* @__PURE__ */ jsx29("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime6(row.createdAt) }),
+              /* @__PURE__ */ jsx29("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
@@ -3334,7 +3446,7 @@ function WebhookEndpointManager({
                     children: row.active ? "Disable" : "Enable"
                   }
                 ),
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
@@ -3344,7 +3456,7 @@ function WebhookEndpointManager({
                     children: "Deliveries"
                   }
                 ),
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
@@ -3356,57 +3468,65 @@ function WebhookEndpointManager({
                 )
               ] }) })
             ] }),
-            isExpanded && /* @__PURE__ */ jsx28("tr", { className: "border-b border-border", children: /* @__PURE__ */ jsx28("td", { colSpan: 5, className: "bg-muted px-4 py-3", children: /* @__PURE__ */ jsx28(WebhookDeliveries, { endpointId: row.id, basePath }) }) })
+            isExpanded && /* @__PURE__ */ jsx29("tr", { className: "border-b border-border", children: /* @__PURE__ */ jsx29("td", { colSpan: 5, className: "bg-muted px-4 py-3", children: /* @__PURE__ */ jsx29(WebhookDeliveries, { endpointId: row.id, basePath }) }) })
           ] }, row.id);
         }) })
       ] });
     }
   }
-  return /* @__PURE__ */ jsxs25("section", { "aria-label": "Webhook endpoints", className: cn26("flex flex-col gap-4", className), children: [
+  return /* @__PURE__ */ jsxs26("section", { "aria-label": "Webhook endpoints", className: cn26("flex flex-col gap-4", className), children: [
     createForm,
     body
   ] });
 }
 
 // src/operations-overview.tsx
-import { cn as cn27, formatDateTime as formatDateTime7, StatusBadge as StatusBadge6 } from "@quanticjs/react-ui";
+import {
+  Button as Button6,
+  Card as Card5,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  EmptyState as EmptyState5,
+  Skeleton as Skeleton4,
+  StatCard,
+  StatusBadge as StatusBadge6,
+  cn as cn27,
+  formatDateTime as formatDateTime7
+} from "@quanticjs/react-ui";
 import { useApiQuery as useApiQuery21 } from "@quanticjs/react-query";
-import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function OperationsOverview({ basePath = "/api", className }) {
   const { data, isLoading, isError, refetch } = useApiQuery21(
     ["operations-overview"],
     (client) => client.get(`${basePath}/v1/admin/overview`)
   );
   if (isLoading) {
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs27(
       "div",
       {
         role: "status",
         "aria-label": "Loading operations overview",
-        className: cn27("flex flex-col gap-2 p-4", className),
+        className: cn27("flex flex-col gap-4", className),
         children: [
-          /* @__PURE__ */ jsx29("span", { className: "sr-only", children: "Loading operations overview" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx29("div", { "aria-hidden": "true", className: "h-20 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx30("span", { className: "sr-only", children: "Loading operations overview" }),
+          /* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx30(Card5, { children: /* @__PURE__ */ jsxs27(CardContent, { className: "space-y-3 p-5", children: [
+            /* @__PURE__ */ jsx30(Skeleton4, { className: "h-3 w-24" }),
+            /* @__PURE__ */ jsx30(Skeleton4, { className: "h-7 w-28" })
+          ] }) }, i)) }),
+          /* @__PURE__ */ jsx30(Card5, { "aria-hidden": "true", children: /* @__PURE__ */ jsx30(CardContent, { className: "space-y-2 p-5", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx30(Skeleton4, { className: "h-10 w-full" }, i)) }) })
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs26("div", { className: cn27("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx29("p", { className: "text-sm text-foreground", children: "Failed to load operations overview" }),
-      /* @__PURE__ */ jsx29(
-        "button",
-        {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsx30(Card5, { className, children: /* @__PURE__ */ jsxs27(CardContent, { className: "flex flex-col items-center gap-3 p-8 text-center", children: [
+      /* @__PURE__ */ jsx30("p", { className: "text-sm text-foreground", children: "Failed to load operations overview" }),
+      /* @__PURE__ */ jsx30(Button6, { type: "button", onClick: () => void refetch(), children: "Try again" })
+    ] }) });
   }
   if (!data) {
-    return /* @__PURE__ */ jsx29("div", { className: cn27("p-6 text-center text-sm text-muted-foreground", className), children: "No overview data" });
+    return /* @__PURE__ */ jsx30(EmptyState5, { className, title: "No overview data" });
   }
   const windowHours = data.windowHours;
   const channels = data.channels ?? [];
@@ -3416,51 +3536,68 @@ function OperationsOverview({ basePath = "/api", className }) {
     { label: `Delivered (${windowHours}h)`, value: data.totalDelivered },
     { label: `Failed (${windowHours}h)`, value: data.totalFailed }
   ];
-  return /* @__PURE__ */ jsxs26("section", { "aria-label": "Operations overview", className: cn27("flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsx29("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: cards.map((card) => /* @__PURE__ */ jsxs26("div", { className: "rounded-md border border-border bg-card p-4", children: [
-      /* @__PURE__ */ jsx29("p", { className: "text-xs font-medium text-muted-foreground", children: card.label }),
-      /* @__PURE__ */ jsx29("p", { className: "mt-1 text-2xl font-semibold text-foreground", children: card.value })
-    ] }, card.label)) }),
-    /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-4", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx29("span", { className: "text-sm text-muted-foreground", children: "DLQ pending" }),
-        /* @__PURE__ */ jsx29(StatusBadge6, { variant: dlqPending > 0 ? "destructive" : "success", children: dlqPending })
-      ] }),
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx29("span", { className: "text-sm text-muted-foreground", children: "Broadcasts in flight" }),
-        /* @__PURE__ */ jsx29("span", { className: "text-sm font-medium text-foreground", children: data.broadcastsInFlight })
+  return /* @__PURE__ */ jsxs27("section", { "aria-label": "Operations overview", className: cn27("flex flex-col gap-5", className), children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs27("div", { children: [
+        /* @__PURE__ */ jsx30("h2", { className: "text-base font-semibold tracking-tight text-foreground", children: "Operations overview" }),
+        /* @__PURE__ */ jsxs27("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+          "Last ",
+          windowHours,
+          "h"
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx29("span", { className: "text-sm text-muted-foreground", children: "Queue" }),
-        /* @__PURE__ */ jsx29(StatusBadge6, { variant: data.queueHealthy ? "success" : "destructive", children: data.queueHealthy ? "Healthy" : "Unhealthy" })
+      /* @__PURE__ */ jsxs27("p", { className: "text-xs text-muted-foreground", children: [
+        "Generated ",
+        formatDateTime7(data.generatedAt)
       ] })
     ] }),
-    /* @__PURE__ */ jsxs26("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-        /* @__PURE__ */ jsx29("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Channel" }),
-        /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Sends" }),
-        /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Delivered" }),
-        /* @__PURE__ */ jsx29("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Failed" })
-      ] }) }),
-      /* @__PURE__ */ jsx29("tbody", { children: channels.length === 0 ? /* @__PURE__ */ jsx29("tr", { className: "border-b border-border", children: /* @__PURE__ */ jsx29("td", { colSpan: 4, className: "py-3 text-center text-muted-foreground", children: "No channel activity" }) }) : channels.map((row) => /* @__PURE__ */ jsxs26("tr", { className: "border-b border-border", children: [
-        /* @__PURE__ */ jsx29("td", { className: "py-3 pe-4 text-foreground", children: row.channel }),
-        /* @__PURE__ */ jsx29("td", { className: "px-4 py-3 text-muted-foreground", children: row.sends }),
-        /* @__PURE__ */ jsx29("td", { className: "px-4 py-3 text-muted-foreground", children: row.delivered }),
-        /* @__PURE__ */ jsx29("td", { className: "px-4 py-3 text-muted-foreground", children: row.failed })
-      ] }, row.channel)) })
-    ] }),
-    /* @__PURE__ */ jsxs26("p", { className: "text-xs text-muted-foreground", children: [
-      "Generated ",
-      formatDateTime7(data.generatedAt)
+    /* @__PURE__ */ jsx30("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: cards.map((card) => /* @__PURE__ */ jsx30(StatCard, { label: card.label, value: card.value }, card.label)) }),
+    /* @__PURE__ */ jsx30(Card5, { children: /* @__PURE__ */ jsxs27(CardContent, { className: "flex flex-wrap items-center gap-x-8 gap-y-3 p-5", children: [
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx30("span", { className: "text-sm text-muted-foreground", children: "DLQ pending" }),
+        /* @__PURE__ */ jsx30(StatusBadge6, { variant: dlqPending > 0 ? "destructive" : "success", appearance: "solid", children: dlqPending })
+      ] }),
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx30("span", { className: "text-sm text-muted-foreground", children: "Broadcasts in flight" }),
+        /* @__PURE__ */ jsx30("span", { className: "text-sm font-semibold tabular-nums text-foreground", children: data.broadcastsInFlight })
+      ] }),
+      /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx30("span", { className: "text-sm text-muted-foreground", children: "Queue" }),
+        /* @__PURE__ */ jsx30(StatusBadge6, { variant: data.queueHealthy ? "success" : "destructive", appearance: "solid", children: data.queueHealthy ? "Healthy" : "Unhealthy" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs27(Card5, { children: [
+      /* @__PURE__ */ jsx30(CardHeader, { children: /* @__PURE__ */ jsx30(CardTitle, { children: "Channel breakdown" }) }),
+      /* @__PURE__ */ jsx30(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs27("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs27("tr", { className: "border-b border-border text-start text-xs uppercase tracking-wide text-muted-foreground", children: [
+          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-5 py-2.5 font-medium", children: "Channel" }),
+          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2.5 text-end font-medium", children: "Sends" }),
+          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2.5 text-end font-medium", children: "Delivered" }),
+          /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2.5 text-end font-medium", children: "Failed" })
+        ] }) }),
+        /* @__PURE__ */ jsx30("tbody", { children: channels.length === 0 ? /* @__PURE__ */ jsx30("tr", { children: /* @__PURE__ */ jsx30("td", { colSpan: 4, className: "px-5 py-8 text-center text-muted-foreground", children: "No channel activity" }) }) : channels.map((row) => /* @__PURE__ */ jsxs27(
+          "tr",
+          {
+            className: "border-b border-border last:border-0 hover:bg-muted/40",
+            children: [
+              /* @__PURE__ */ jsx30("td", { className: "px-5 py-3 font-medium text-foreground", children: row.channel }),
+              /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-end tabular-nums text-muted-foreground", children: row.sends }),
+              /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-end tabular-nums text-muted-foreground", children: row.delivered }),
+              /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-end tabular-nums text-muted-foreground", children: row.failed })
+            ]
+          },
+          row.channel
+        )) })
+      ] }) })
     ] })
   ] });
 }
 
 // src/delivery-log-explorer.tsx
 import { useState as useState15 } from "react";
-import { cn as cn28, formatDateTime as formatDateTime8, StatusBadge as StatusBadge7 } from "@quanticjs/react-ui";
+import { Button as Button7, Card as Card6, EmptyState as EmptyState6, StatusBadge as StatusBadge7, cn as cn28, formatDateTime as formatDateTime8 } from "@quanticjs/react-ui";
 import { useApiQuery as useApiQuery22 } from "@quanticjs/react-query";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 var LIMIT6 = 20;
 var EMPTY_FILTERS = {
   channel: "",
@@ -3513,178 +3650,90 @@ function DeliveryLogExplorer({ basePath = "/api", className }) {
     });
   };
   const setField = (key, value) => setDraft((prev) => ({ ...prev, [key]: value }));
-  const filterForm = /* @__PURE__ */ jsxs27("form", { onSubmit: onApply, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx30("label", { htmlFor: "dle-channel", className: "text-sm font-medium text-foreground", children: "Channel" }),
-      /* @__PURE__ */ jsxs27(
-        "select",
-        {
-          id: "dle-channel",
-          value: draft.channel,
-          onChange: (e) => setField("channel", e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: [
-            /* @__PURE__ */ jsx30("option", { value: "", children: "All" }),
-            /* @__PURE__ */ jsx30("option", { value: "email", children: "Email" }),
-            /* @__PURE__ */ jsx30("option", { value: "sms", children: "SMS" })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx30("label", { htmlFor: "dle-status", className: "text-sm font-medium text-foreground", children: "Status" }),
-      /* @__PURE__ */ jsx30(
-        "input",
-        {
-          id: "dle-status",
-          type: "text",
-          value: draft.status,
-          onChange: (e) => setField("status", e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx30("label", { htmlFor: "dle-recipient", className: "text-sm font-medium text-foreground", children: "Recipient" }),
-      /* @__PURE__ */ jsx30(
-        "input",
-        {
-          id: "dle-recipient",
-          type: "text",
-          value: draft.recipient,
-          onChange: (e) => setField("recipient", e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx30("label", { htmlFor: "dle-user", className: "text-sm font-medium text-foreground", children: "User ID" }),
-      /* @__PURE__ */ jsx30(
-        "input",
-        {
-          id: "dle-user",
-          type: "text",
-          value: draft.userId,
-          onChange: (e) => setField("userId", e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx30("label", { htmlFor: "dle-from", className: "text-sm font-medium text-foreground", children: "From" }),
-      /* @__PURE__ */ jsx30(
-        "input",
-        {
-          id: "dle-from",
-          type: "date",
-          value: draft.from,
-          onChange: (e) => setField("from", e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx30("label", { htmlFor: "dle-to", className: "text-sm font-medium text-foreground", children: "To" }),
-      /* @__PURE__ */ jsx30(
-        "input",
-        {
-          id: "dle-to",
-          type: "date",
-          value: draft.to,
-          onChange: (e) => setField("to", e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx30(
-      "button",
-      {
-        type: "submit",
-        className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-        children: "Apply"
-      }
-    )
-  ] });
-  let body;
-  if (isLoading) {
-    body = /* @__PURE__ */ jsxs27("div", { role: "status", "aria-label": "Loading delivery logs", className: "flex flex-col gap-2 p-4", children: [
-      /* @__PURE__ */ jsx30("span", { className: "sr-only", children: "Loading delivery logs" }),
-      [0, 1, 2].map((i) => /* @__PURE__ */ jsx30("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
-    ] });
-  } else if (isError) {
-    body = /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx30("p", { className: "text-sm text-foreground", children: "Failed to load delivery logs" }),
-      /* @__PURE__ */ jsx30(
-        "button",
-        {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
-        }
-      )
-    ] });
-  } else {
-    const rows = data?.items ?? [];
-    const totalPages = data?.totalPages ?? 1;
-    if (rows.length === 0) {
-      body = /* @__PURE__ */ jsx30("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No delivery logs" });
-    } else {
-      body = /* @__PURE__ */ jsxs27(Fragment7, { children: [
-        /* @__PURE__ */ jsxs27("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs27("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Channel" }),
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Recipient" }),
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2 font-medium", children: "User" }),
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Provider" }),
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Attempts" }),
-            /* @__PURE__ */ jsx30("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" })
+  const rows = data?.items ?? [];
+  const totalPages = data?.totalPages ?? 1;
+  return /* @__PURE__ */ jsxs28("section", { "aria-label": "Delivery log explorer", className: cn28("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsx31(Card6, { children: /* @__PURE__ */ jsxs28("form", { onSubmit: onApply, className: "flex flex-wrap items-end gap-3 p-4", noValidate: true, children: [
+      /* @__PURE__ */ jsxs28("label", { htmlFor: "dle-channel", className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: "Channel" }),
+        /* @__PURE__ */ jsxs28(
+          "select",
+          {
+            id: "dle-channel",
+            value: draft.channel,
+            onChange: (e) => setField("channel", e.target.value),
+            className: FIELD_CLASS,
+            children: [
+              /* @__PURE__ */ jsx31("option", { value: "", children: "All" }),
+              /* @__PURE__ */ jsx31("option", { value: "email", children: "Email" }),
+              /* @__PURE__ */ jsx31("option", { value: "sms", children: "SMS" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs28("label", { htmlFor: "dle-status", className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: "Status" }),
+        /* @__PURE__ */ jsx31("input", { id: "dle-status", type: "text", value: draft.status, onChange: (e) => setField("status", e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsxs28("label", { htmlFor: "dle-recipient", className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: "Recipient" }),
+        /* @__PURE__ */ jsx31("input", { id: "dle-recipient", type: "text", value: draft.recipient, onChange: (e) => setField("recipient", e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsxs28("label", { htmlFor: "dle-user", className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: "User ID" }),
+        /* @__PURE__ */ jsx31("input", { id: "dle-user", type: "text", value: draft.userId, onChange: (e) => setField("userId", e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsxs28("label", { htmlFor: "dle-from", className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: "From" }),
+        /* @__PURE__ */ jsx31("input", { id: "dle-from", type: "date", value: draft.from, onChange: (e) => setField("from", e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsxs28("label", { htmlFor: "dle-to", className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: "To" }),
+        /* @__PURE__ */ jsx31("input", { id: "dle-to", type: "date", value: draft.to, onChange: (e) => setField("to", e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsx31(Button7, { type: "submit", className: "ms-auto", children: "Apply" })
+    ] }) }),
+    /* @__PURE__ */ jsxs28(Card6, { children: [
+      /* @__PURE__ */ jsx31(PanelHeader, { title: "Attempts", subtitle: !isLoading && !isError ? `${data?.total ?? rows.length} matching entries` : void 0 }),
+      isLoading ? /* @__PURE__ */ jsx31(SkeletonRows, { label: "Loading delivery logs" }) : isError ? /* @__PURE__ */ jsx31(ErrorPanel, { message: "Failed to load delivery logs", onRetry: () => void refetch() }) : rows.length === 0 ? /* @__PURE__ */ jsx31(EmptyState6, { icon: /* @__PURE__ */ jsx31(InboxIcon, {}), title: "No delivery logs", description: "No attempts match the current filters." }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
+        /* @__PURE__ */ jsxs28("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx31("thead", { children: /* @__PURE__ */ jsxs28("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Channel" }),
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Recipient" }),
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "User" }),
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Provider" }),
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Attempts" }),
+            /* @__PURE__ */ jsx31("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" })
           ] }) }),
-          /* @__PURE__ */ jsx30("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs27("tr", { className: "border-b border-border", children: [
-            /* @__PURE__ */ jsx30("td", { className: "py-3 pe-4", children: /* @__PURE__ */ jsx30(StatusBadge7, { variant: channelVariant(row.channel), appearance: "dot", children: row.channel }) }),
-            /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-foreground", children: row.recipient ?? "\u2014" }),
-            /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 font-mono text-foreground", children: row.userId }),
-            /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-foreground", children: row.status }),
-            /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-muted-foreground", children: row.provider ?? "\u2014" }),
-            /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-muted-foreground", children: row.attempts }),
-            /* @__PURE__ */ jsx30("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime8(row.createdAt) })
+          /* @__PURE__ */ jsx31("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs28("tr", { className: "border-b border-border last:border-0 hover:bg-muted/40", children: [
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx31(StatusBadge7, { variant: channelVariant(row.channel), appearance: "dot", children: row.channel }) }),
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3 text-foreground", children: row.recipient ?? "\u2014" }),
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3 font-mono text-foreground", children: row.userId }),
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3 text-foreground", children: row.status }),
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3 text-muted-foreground", children: row.provider ?? "\u2014" }),
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3 tabular-nums text-muted-foreground", children: row.attempts }),
+            /* @__PURE__ */ jsx31("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime8(row.createdAt) })
           ] }, row.id)) })
         ] }),
-        /* @__PURE__ */ jsxs27("nav", { "aria-label": "Delivery log pagination", className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx30(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPage((p) => Math.max(1, p - 1)),
-              disabled: page <= 1,
-              className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxs27("span", { className: "text-xs text-muted-foreground", children: [
-            "Page ",
+        /* @__PURE__ */ jsx31(
+          Pager,
+          {
+            label: "Delivery log pagination",
             page,
-            " of ",
-            totalPages
-          ] }),
-          /* @__PURE__ */ jsx30(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
-              disabled: page >= totalPages,
-              className: "rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-              children: "Next"
-            }
-          )
-        ] })
-      ] });
-    }
-  }
-  return /* @__PURE__ */ jsxs27("section", { "aria-label": "Delivery log explorer", className: cn28("flex flex-col gap-4", className), children: [
-    filterForm,
-    body
+            totalPages,
+            onPrev: () => setPage((p) => Math.max(1, p - 1)),
+            onNext: () => setPage((p) => Math.min(totalPages, p + 1))
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function InboxIcon() {
+  return /* @__PURE__ */ jsxs28("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx31("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
+    /* @__PURE__ */ jsx31("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" })
   ] });
 }
 
@@ -3692,7 +3741,7 @@ function DeliveryLogExplorer({ basePath = "/api", className }) {
 import { useEffect as useEffect6, useState as useState16 } from "react";
 import { cn as cn29, useToast as useToast13 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation14, useApiQuery as useApiQuery23 } from "@quanticjs/react-query";
-import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULTS = {
   enabled: false,
   start: "22:00",
@@ -3733,23 +3782,23 @@ function QuietHoursForm({ basePath = "/api", className }) {
     save.mutate(form);
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29(
       "div",
       {
         role: "status",
         "aria-label": "Loading quiet hours",
         className: cn29("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Loading quiet hours" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx31("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Loading quiet hours" }),
+          [0, 1, 2].map((i) => /* @__PURE__ */ jsx32("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs28("div", { className: cn29("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx31("p", { className: "text-sm text-foreground", children: "Failed to load quiet hours" }),
-      /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsxs29("div", { className: cn29("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx32("p", { className: "text-sm text-foreground", children: "Failed to load quiet hours" }),
+      /* @__PURE__ */ jsx32(
         "button",
         {
           type: "button",
@@ -3760,10 +3809,10 @@ function QuietHoursForm({ basePath = "/api", className }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs28("form", { onSubmit, className: cn29("flex flex-col gap-4", className), noValidate: true, children: [
-    /* @__PURE__ */ jsx31("h2", { className: "text-sm font-semibold text-foreground", children: "Quiet hours" }),
-    /* @__PURE__ */ jsxs28("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
-      /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs29("form", { onSubmit, className: cn29("flex flex-col gap-4", className), noValidate: true, children: [
+    /* @__PURE__ */ jsx32("h2", { className: "text-sm font-semibold text-foreground", children: "Quiet hours" }),
+    /* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx32(
         "input",
         {
           type: "checkbox",
@@ -3774,10 +3823,10 @@ function QuietHoursForm({ basePath = "/api", className }) {
       ),
       "Enable quiet hours"
     ] }),
-    /* @__PURE__ */ jsxs28("div", { className: "flex flex-wrap gap-4", children: [
-      /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx31("label", { htmlFor: "qh-start", className: "text-sm font-medium text-foreground", children: "Start" }),
-        /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("label", { htmlFor: "qh-start", className: "text-sm font-medium text-foreground", children: "Start" }),
+        /* @__PURE__ */ jsx32(
           "input",
           {
             id: "qh-start",
@@ -3788,9 +3837,9 @@ function QuietHoursForm({ basePath = "/api", className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx31("label", { htmlFor: "qh-end", className: "text-sm font-medium text-foreground", children: "End" }),
-        /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("label", { htmlFor: "qh-end", className: "text-sm font-medium text-foreground", children: "End" }),
+        /* @__PURE__ */ jsx32(
           "input",
           {
             id: "qh-end",
@@ -3801,9 +3850,9 @@ function QuietHoursForm({ basePath = "/api", className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx31("label", { htmlFor: "qh-tz", className: "text-sm font-medium text-foreground", children: "Timezone" }),
-        /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx32("label", { htmlFor: "qh-tz", className: "text-sm font-medium text-foreground", children: "Timezone" }),
+        /* @__PURE__ */ jsx32(
           "input",
           {
             id: "qh-tz",
@@ -3815,7 +3864,7 @@ function QuietHoursForm({ basePath = "/api", className }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
       "button",
       {
         type: "submit",
@@ -3831,7 +3880,7 @@ function QuietHoursForm({ basePath = "/api", className }) {
 import { useEffect as useEffect7, useState as useState17 } from "react";
 import { cn as cn30, useToast as useToast14 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation15, useApiQuery as useApiQuery24 } from "@quanticjs/react-query";
-import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 function normalize6(raw) {
   const list = Array.isArray(raw) ? raw : Array.isArray(raw?.caps) ? raw.caps : [];
   return list.map((entry) => {
@@ -3876,23 +3925,23 @@ function FrequencyCapTable({ basePath = "/api", className }) {
     setNewMax(0);
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "div",
       {
         role: "status",
         "aria-label": "Loading frequency caps",
         className: cn30("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Loading frequency caps" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx32("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Loading frequency caps" }),
+          [0, 1, 2].map((i) => /* @__PURE__ */ jsx33("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs29("div", { className: cn30("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx32("p", { className: "text-sm text-foreground", children: "Failed to load frequency caps" }),
-      /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs30("div", { className: cn30("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx33("p", { className: "text-sm text-foreground", children: "Failed to load frequency caps" }),
+      /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -3903,24 +3952,24 @@ function FrequencyCapTable({ basePath = "/api", className }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs29("section", { "aria-label": "Frequency caps", className: cn30("flex flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsx32("h2", { className: "text-sm font-semibold text-foreground", children: "Frequency caps" }),
-    /* @__PURE__ */ jsxs29("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsxs29("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-        /* @__PURE__ */ jsx32("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Type" }),
-        /* @__PURE__ */ jsx32("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Max per day" }),
-        /* @__PURE__ */ jsx32("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx32("span", { className: "sr-only", children: "Actions" }) })
+  return /* @__PURE__ */ jsxs30("section", { "aria-label": "Frequency caps", className: cn30("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsx33("h2", { className: "text-sm font-semibold text-foreground", children: "Frequency caps" }),
+    /* @__PURE__ */ jsxs30("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx33("thead", { children: /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+        /* @__PURE__ */ jsx33("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Type" }),
+        /* @__PURE__ */ jsx33("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Max per day" }),
+        /* @__PURE__ */ jsx33("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Actions" }) })
       ] }) }),
-      /* @__PURE__ */ jsx32("tbody", { children: caps.map((cap, index) => {
+      /* @__PURE__ */ jsx33("tbody", { children: caps.map((cap, index) => {
         const inputId = `cap-${index}`;
-        return /* @__PURE__ */ jsxs29("tr", { className: "border-b border-border", children: [
-          /* @__PURE__ */ jsx32("td", { className: "py-3 pe-4 text-foreground", children: cap.type }),
-          /* @__PURE__ */ jsxs29("td", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ jsxs29("label", { htmlFor: inputId, className: "sr-only", children: [
+        return /* @__PURE__ */ jsxs30("tr", { className: "border-b border-border", children: [
+          /* @__PURE__ */ jsx33("td", { className: "py-3 pe-4 text-foreground", children: cap.type }),
+          /* @__PURE__ */ jsxs30("td", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsxs30("label", { htmlFor: inputId, className: "sr-only", children: [
               "Max per day for ",
               cap.type
             ] }),
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33(
               "input",
               {
                 id: inputId,
@@ -3932,7 +3981,7 @@ function FrequencyCapTable({ basePath = "/api", className }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx32("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx33(
             "button",
             {
               type: "button",
@@ -3944,10 +3993,10 @@ function FrequencyCapTable({ basePath = "/api", className }) {
         ] }, `${cap.type}-${index}`);
       }) })
     ] }),
-    /* @__PURE__ */ jsxs29("form", { onSubmit: addRow, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-      /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx32("label", { htmlFor: "cap-new-type", className: "text-sm font-medium text-foreground", children: "New type" }),
-        /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsxs30("form", { onSubmit: addRow, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx33("label", { htmlFor: "cap-new-type", className: "text-sm font-medium text-foreground", children: "New type" }),
+        /* @__PURE__ */ jsx33(
           "input",
           {
             id: "cap-new-type",
@@ -3958,9 +4007,9 @@ function FrequencyCapTable({ basePath = "/api", className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx32("label", { htmlFor: "cap-new-max", className: "text-sm font-medium text-foreground", children: "Max per day" }),
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx33("label", { htmlFor: "cap-new-max", className: "text-sm font-medium text-foreground", children: "Max per day" }),
+        /* @__PURE__ */ jsx33(
           "input",
           {
             id: "cap-new-max",
@@ -3972,7 +4021,7 @@ function FrequencyCapTable({ basePath = "/api", className }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         "button",
         {
           type: "submit",
@@ -3981,7 +4030,7 @@ function FrequencyCapTable({ basePath = "/api", className }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
@@ -3998,7 +4047,7 @@ function FrequencyCapTable({ basePath = "/api", className }) {
 import { useEffect as useEffect8, useState as useState18 } from "react";
 import { cn as cn31, useToast as useToast15 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation16, useApiQuery as useApiQuery25 } from "@quanticjs/react-query";
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 function normalize7(raw) {
   const obj = raw ?? {};
   const toList = (value) => Array.isArray(value) ? value.filter((v) => typeof v === "string") : [];
@@ -4016,15 +4065,15 @@ function TagEditor({ id, label, values, onAdd, onRemove }) {
     onAdd(value);
     setDraft("");
   };
-  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium text-foreground", children: label }),
-    /* @__PURE__ */ jsx33("ul", { className: "flex flex-wrap gap-2", children: values.length === 0 ? /* @__PURE__ */ jsx33("li", { className: "text-sm text-muted-foreground", children: "None" }) : values.map((value) => /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx34("span", { className: "text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx34("ul", { className: "flex flex-wrap gap-2", children: values.length === 0 ? /* @__PURE__ */ jsx34("li", { className: "text-sm text-muted-foreground", children: "None" }) : values.map((value) => /* @__PURE__ */ jsxs31(
       "li",
       {
         className: "flex items-center gap-1 rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground",
         children: [
           value,
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "button",
             {
               type: "button",
@@ -4038,13 +4087,13 @@ function TagEditor({ id, label, values, onAdd, onRemove }) {
       },
       value
     )) }),
-    /* @__PURE__ */ jsxs30("form", { onSubmit: add, className: "flex items-end gap-2", noValidate: true, children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs30("label", { htmlFor: id, className: "sr-only", children: [
+    /* @__PURE__ */ jsxs31("form", { onSubmit: add, className: "flex items-end gap-2", noValidate: true, children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxs31("label", { htmlFor: id, className: "sr-only", children: [
           "Add to ",
           label
         ] }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "input",
           {
             id,
@@ -4055,7 +4104,7 @@ function TagEditor({ id, label, values, onAdd, onRemove }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(
         "button",
         {
           type: "submit",
@@ -4120,23 +4169,23 @@ function TenantConfigForm({ basePath = "/api", className }) {
     save.mutate(config);
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31(
       "div",
       {
         role: "status",
         "aria-label": "Loading tenant configuration",
         className: cn31("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Loading tenant configuration" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx33("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx34("span", { className: "sr-only", children: "Loading tenant configuration" }),
+          [0, 1, 2].map((i) => /* @__PURE__ */ jsx34("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs30("div", { className: cn31("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx33("p", { className: "text-sm text-foreground", children: "Failed to load tenant configuration" }),
-      /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsxs31("div", { className: cn31("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx34("p", { className: "text-sm text-foreground", children: "Failed to load tenant configuration" }),
+      /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -4148,7 +4197,7 @@ function TenantConfigForm({ basePath = "/api", className }) {
     ] });
   }
   const errorId = "tenant-config-subset-error";
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "form",
     {
       onSubmit,
@@ -4157,8 +4206,8 @@ function TenantConfigForm({ basePath = "/api", className }) {
       "aria-invalid": subsetError ? "true" : void 0,
       "aria-describedby": subsetError ? errorId : void 0,
       children: [
-        /* @__PURE__ */ jsx33("h2", { className: "text-sm font-semibold text-foreground", children: "Notification configuration" }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34("h2", { className: "text-sm font-semibold text-foreground", children: "Notification configuration" }),
+        /* @__PURE__ */ jsx34(
           TagEditor,
           {
             id: "tc-notification-types",
@@ -4168,7 +4217,7 @@ function TenantConfigForm({ basePath = "/api", className }) {
             onRemove: removeType
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           TagEditor,
           {
             id: "tc-immediate-email-types",
@@ -4178,8 +4227,8 @@ function TenantConfigForm({ basePath = "/api", className }) {
             onRemove: removeImmediate
           }
         ),
-        subsetError && /* @__PURE__ */ jsx33("p", { id: errorId, className: "text-xs text-destructive", children: subsetError }),
-        /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(
+        subsetError && /* @__PURE__ */ jsx34("p", { id: errorId, className: "text-xs text-destructive", children: subsetError }),
+        /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(
           "button",
           {
             type: "submit",
@@ -4197,7 +4246,7 @@ function TenantConfigForm({ basePath = "/api", className }) {
 import { useEffect as useEffect9, useState as useState19 } from "react";
 import { cn as cn32, useToast as useToast16 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation17, useApiQuery as useApiQuery26 } from "@quanticjs/react-query";
-import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
 function normalize8(raw) {
   const obj = raw ?? {};
   const bool = (...keys) => {
@@ -4242,23 +4291,23 @@ function TrackingConfigForm({ basePath = "/api", className }) {
     save.mutate(form);
   };
   if (isLoading) {
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "div",
       {
         role: "status",
         "aria-label": "Loading tracking configuration",
         className: cn32("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx34("span", { className: "sr-only", children: "Loading tracking configuration" }),
-          [0, 1].map((i) => /* @__PURE__ */ jsx34("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx35("span", { className: "sr-only", children: "Loading tracking configuration" }),
+          [0, 1].map((i) => /* @__PURE__ */ jsx35("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs31("div", { className: cn32("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx34("p", { className: "text-sm text-foreground", children: "Failed to load tracking configuration" }),
-      /* @__PURE__ */ jsx34(
+    return /* @__PURE__ */ jsxs32("div", { className: cn32("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx35("p", { className: "text-sm text-foreground", children: "Failed to load tracking configuration" }),
+      /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -4269,10 +4318,10 @@ function TrackingConfigForm({ basePath = "/api", className }) {
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs31("form", { onSubmit, className: cn32("flex flex-col gap-4", className), noValidate: true, children: [
-    /* @__PURE__ */ jsx34("h2", { className: "text-sm font-semibold text-foreground", children: "Tracking configuration" }),
-    /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
-      /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs32("form", { onSubmit, className: cn32("flex flex-col gap-4", className), noValidate: true, children: [
+    /* @__PURE__ */ jsx35("h2", { className: "text-sm font-semibold text-foreground", children: "Tracking configuration" }),
+    /* @__PURE__ */ jsxs32("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx35(
         "input",
         {
           type: "checkbox",
@@ -4283,8 +4332,8 @@ function TrackingConfigForm({ basePath = "/api", className }) {
       ),
       "Open tracking"
     ] }),
-    /* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
-      /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsxs32("label", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx35(
         "input",
         {
           type: "checkbox",
@@ -4295,7 +4344,7 @@ function TrackingConfigForm({ basePath = "/api", className }) {
       ),
       "Click tracking"
     ] }),
-    /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
       "button",
       {
         type: "submit",
@@ -4309,9 +4358,9 @@ function TrackingConfigForm({ basePath = "/api", className }) {
 
 // src/api-key-manager.tsx
 import { useState as useState20 } from "react";
-import { cn as cn33, formatDateTime as formatDateTime9, StatusBadge as StatusBadge8, useToast as useToast17 } from "@quanticjs/react-ui";
+import { Button as Button8, Card as Card7, EmptyState as EmptyState7, StatusBadge as StatusBadge8, cn as cn33, formatDateTime as formatDateTime9, useToast as useToast17 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation18, useApiQuery as useApiQuery27 } from "@quanticjs/react-query";
-import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
 function normalize9(raw) {
   const list = Array.isArray(raw) ? raw : Array.isArray(raw?.items) ? raw.items : [];
   return list;
@@ -4369,102 +4418,69 @@ function ApiKeyManager({ basePath = "/api", className }) {
       revoke.mutate(id);
     }
   };
-  const createForm = /* @__PURE__ */ jsxs32("form", { onSubmit: onCreate, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx35("label", { htmlFor: "api-key-name", className: "text-sm font-medium text-foreground", children: "New key name" }),
-      /* @__PURE__ */ jsx35(
-        "input",
-        {
-          id: "api-key-name",
-          type: "text",
-          value: name,
-          onChange: (e) => setName(e.target.value),
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx35("label", { htmlFor: "api-key-app", className: "text-sm font-medium text-foreground", children: "Application (optional)" }),
-      /* @__PURE__ */ jsx35(
-        "input",
-        {
-          id: "api-key-app",
-          type: "text",
-          value: applicationKey,
-          onChange: (e) => setApplicationKey(e.target.value),
-          placeholder: "delivery-hub",
-          className: "rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx35(
-      "button",
-      {
-        type: "submit",
-        disabled: create.isPending,
-        className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
-        children: create.isPending ? "Creating\u2026" : "Create key"
-      }
-    )
-  ] });
-  let body;
-  if (isLoading) {
-    body = /* @__PURE__ */ jsxs32("div", { role: "status", "aria-label": "Loading API keys", className: "flex flex-col gap-2 p-4", children: [
-      /* @__PURE__ */ jsx35("span", { className: "sr-only", children: "Loading API keys" }),
-      [0, 1, 2].map((i) => /* @__PURE__ */ jsx35("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
-    ] });
-  } else if (isError) {
-    body = /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-start gap-3 p-4", children: [
-      /* @__PURE__ */ jsx35("p", { className: "text-sm text-foreground", children: "Failed to load API keys" }),
-      /* @__PURE__ */ jsx35(
-        "button",
-        {
-          type: "button",
-          onClick: () => void refetch(),
-          className: "rounded bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring",
-          children: "Try again"
-        }
-      )
-    ] });
-  } else {
-    const rows = normalize9(data);
-    if (rows.length === 0) {
-      body = /* @__PURE__ */ jsx35("div", { className: "p-6 text-center text-sm text-muted-foreground", children: "No API keys" });
-    } else {
-      body = /* @__PURE__ */ jsxs32("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs32("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "py-2 pe-4 font-medium", children: "Name" }),
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Prefix" }),
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Application" }),
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Last used" }),
-          /* @__PURE__ */ jsx35("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx35("span", { className: "sr-only", children: "Actions" }) })
+  const rows = normalize9(data);
+  return /* @__PURE__ */ jsxs33("section", { "aria-label": "API key management", className: cn33("flex flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsx36(Card7, { children: /* @__PURE__ */ jsxs33("form", { onSubmit: onCreate, className: "flex flex-wrap items-end gap-3 p-4", noValidate: true, children: [
+      /* @__PURE__ */ jsxs33("label", { className: "flex flex-1 flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx36("span", { className: "font-medium text-foreground", children: "New key name" }),
+        /* @__PURE__ */ jsx36("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), className: FIELD_CLASS })
+      ] }),
+      /* @__PURE__ */ jsxs33("label", { className: "flex flex-1 flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx36("span", { className: "font-medium text-foreground", children: "Application (optional)" }),
+        /* @__PURE__ */ jsx36(
+          "input",
+          {
+            type: "text",
+            value: applicationKey,
+            onChange: (e) => setApplicationKey(e.target.value),
+            placeholder: "delivery-hub",
+            className: FIELD_CLASS
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx36(Button8, { type: "submit", disabled: create.isPending, children: create.isPending ? "Creating\u2026" : "Create key" })
+    ] }) }),
+    /* @__PURE__ */ jsxs33(Card7, { children: [
+      /* @__PURE__ */ jsx36(PanelHeader, { title: "Keys", subtitle: !isLoading && !isError ? `${rows.length} keys` : void 0 }),
+      isLoading ? /* @__PURE__ */ jsx36(SkeletonRows, { label: "Loading API keys" }) : isError ? /* @__PURE__ */ jsx36(ErrorPanel, { message: "Failed to load API keys", onRetry: () => void refetch() }) : rows.length === 0 ? /* @__PURE__ */ jsx36(EmptyState7, { icon: /* @__PURE__ */ jsx36(KeyIcon, {}), title: "No API keys", description: "Create a key to get started." }) : /* @__PURE__ */ jsxs33("table", { className: "w-full text-sm", children: [
+        /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs33("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Name" }),
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Prefix" }),
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Application" }),
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Status" }),
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Created" }),
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: "Last used" }),
+          /* @__PURE__ */ jsx36("th", { scope: "col", className: "px-4 py-2 font-medium", children: /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Actions" }) })
         ] }) }),
-        /* @__PURE__ */ jsx35("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs32("tr", { className: "border-b border-border", children: [
-          /* @__PURE__ */ jsx35("td", { className: "py-3 pe-4 text-foreground", children: row.name }),
-          /* @__PURE__ */ jsx35("td", { className: "px-4 py-3 font-mono text-muted-foreground", children: row.prefix ?? "\u2014" }),
-          /* @__PURE__ */ jsx35("td", { className: "px-4 py-3 font-mono text-muted-foreground", children: row.applicationKey ?? "\u2014" }),
-          /* @__PURE__ */ jsx35("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx35(StatusBadge8, { variant: row.revoked ? "destructive" : "success", children: row.revoked ? "Revoked" : "Active" }) }),
-          /* @__PURE__ */ jsx35("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime9(row.createdAt) }),
-          /* @__PURE__ */ jsx35("td", { className: "px-4 py-3 text-muted-foreground", children: row.lastUsedAt ? formatDateTime9(row.lastUsedAt) : "\u2014" }),
-          /* @__PURE__ */ jsx35("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx35(
-            "button",
+        /* @__PURE__ */ jsx36("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs33("tr", { className: "border-b border-border last:border-0 hover:bg-muted/40", children: [
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3 text-foreground", children: row.name }),
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3 font-mono text-muted-foreground", children: row.prefix ?? "\u2014" }),
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3 font-mono text-muted-foreground", children: row.applicationKey ?? "\u2014" }),
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx36(StatusBadge8, { variant: row.revoked ? "destructive" : "success", children: row.revoked ? "Revoked" : "Active" }) }),
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3 text-muted-foreground", children: formatDateTime9(row.createdAt) }),
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3 text-muted-foreground", children: row.lastUsedAt ? formatDateTime9(row.lastUsedAt) : "\u2014" }),
+          /* @__PURE__ */ jsx36("td", { className: "px-4 py-3 text-end", children: /* @__PURE__ */ jsx36(
+            Button8,
             {
               type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "text-destructive",
               disabled: revoke.isPending || row.revoked,
               onClick: () => onRevoke(row.id),
-              className: "rounded-md border border-border px-3 py-1 text-sm font-medium text-destructive hover:bg-muted focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50",
               children: "Revoke"
             }
           ) })
         ] }, row.id)) })
-      ] });
-    }
-  }
-  return /* @__PURE__ */ jsxs32("section", { "aria-label": "API key management", className: cn33("flex flex-col gap-4", className), children: [
-    createForm,
-    body
+      ] })
+    ] })
+  ] });
+}
+function KeyIcon() {
+  return /* @__PURE__ */ jsxs33("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx36("path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" }),
+    /* @__PURE__ */ jsx36("path", { d: "m21 2-9.6 9.6" }),
+    /* @__PURE__ */ jsx36("circle", { cx: "7.5", cy: "15.5", r: "5.5" })
   ] });
 }
 
@@ -4472,7 +4488,7 @@ function ApiKeyManager({ basePath = "/api", className }) {
 import { useState as useState21 } from "react";
 import { cn as cn34, formatDateTime as formatDateTime10, StatusBadge as StatusBadge9, useToast as useToast18 } from "@quanticjs/react-ui";
 import { useApiMutation as useApiMutation19, useApiQuery as useApiQuery28 } from "@quanticjs/react-query";
-import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
 function normalize10(raw) {
   const list = Array.isArray(raw) ? raw : Array.isArray(raw?.items) ? raw.items : [];
   return list;
@@ -4518,10 +4534,10 @@ function ApplicationRegistryPanel({
     if (!k || !name) return;
     register.mutate({ key: k, displayName: name, description: description.trim() || void 0 });
   };
-  const registerForm = /* @__PURE__ */ jsxs33("form", { onSubmit: onRegister, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx36("label", { htmlFor: "application-key", className: "text-sm font-medium text-foreground", children: "Key (slug)" }),
-      /* @__PURE__ */ jsx36(
+  const registerForm = /* @__PURE__ */ jsxs34("form", { onSubmit: onRegister, className: "flex flex-wrap items-end gap-3", noValidate: true, children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx37("label", { htmlFor: "application-key", className: "text-sm font-medium text-foreground", children: "Key (slug)" }),
+      /* @__PURE__ */ jsx37(
         "input",
         {
           id: "application-key",
@@ -4533,9 +4549,9 @@ function ApplicationRegistryPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx36("label", { htmlFor: "application-name", className: "text-sm font-medium text-foreground", children: "Display name" }),
-      /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx37("label", { htmlFor: "application-name", className: "text-sm font-medium text-foreground", children: "Display name" }),
+      /* @__PURE__ */ jsx37(
         "input",
         {
           id: "application-name",
@@ -4547,9 +4563,9 @@ function ApplicationRegistryPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx36("label", { htmlFor: "application-description", className: "text-sm font-medium text-foreground", children: "Description (optional)" }),
-      /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx37("label", { htmlFor: "application-description", className: "text-sm font-medium text-foreground", children: "Description (optional)" }),
+      /* @__PURE__ */ jsx37(
         "input",
         {
           id: "application-description",
@@ -4560,7 +4576,7 @@ function ApplicationRegistryPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "button",
       {
         type: "submit",
@@ -4571,23 +4587,23 @@ function ApplicationRegistryPanel({
     )
   ] });
   if (isLoading) {
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       "div",
       {
         role: "status",
         "aria-label": "Loading applications",
         className: cn34("flex flex-col gap-2 p-4", className),
         children: [
-          /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Loading applications" }),
-          [0, 1, 2].map((i) => /* @__PURE__ */ jsx36("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
+          /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "Loading applications" }),
+          [0, 1, 2].map((i) => /* @__PURE__ */ jsx37("div", { "aria-hidden": "true", className: "h-10 animate-pulse rounded bg-muted" }, i))
         ]
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs33("div", { className: cn34("flex flex-col items-start gap-3 p-4", className), children: [
-      /* @__PURE__ */ jsx36("p", { className: "text-sm text-foreground", children: "Failed to load applications" }),
-      /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsxs34("div", { className: cn34("flex flex-col items-start gap-3 p-4", className), children: [
+      /* @__PURE__ */ jsx37("p", { className: "text-sm text-foreground", children: "Failed to load applications" }),
+      /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -4599,22 +4615,22 @@ function ApplicationRegistryPanel({
     ] });
   }
   const apps = normalize10(data);
-  return /* @__PURE__ */ jsxs33("section", { "aria-label": "Applications", className: cn34("flex flex-col gap-4 p-4", className), children: [
+  return /* @__PURE__ */ jsxs34("section", { "aria-label": "Applications", className: cn34("flex flex-col gap-4 p-4", className), children: [
     registerForm,
-    apps.length === 0 ? /* @__PURE__ */ jsx36("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No applications registered" }) : /* @__PURE__ */ jsxs33("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs33("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
-        /* @__PURE__ */ jsx36("th", { className: "py-2 font-medium", children: "Key" }),
-        /* @__PURE__ */ jsx36("th", { className: "py-2 font-medium", children: "Name" }),
-        /* @__PURE__ */ jsx36("th", { className: "py-2 font-medium", children: "Status" }),
-        /* @__PURE__ */ jsx36("th", { className: "py-2 font-medium", children: "Created" }),
-        /* @__PURE__ */ jsx36("th", { className: "py-2 font-medium", children: "Actions" })
+    apps.length === 0 ? /* @__PURE__ */ jsx37("p", { className: "p-6 text-center text-sm text-muted-foreground", children: "No applications registered" }) : /* @__PURE__ */ jsxs34("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx37("thead", { children: /* @__PURE__ */ jsxs34("tr", { className: "border-b border-border text-start text-muted-foreground", children: [
+        /* @__PURE__ */ jsx37("th", { className: "py-2 font-medium", children: "Key" }),
+        /* @__PURE__ */ jsx37("th", { className: "py-2 font-medium", children: "Name" }),
+        /* @__PURE__ */ jsx37("th", { className: "py-2 font-medium", children: "Status" }),
+        /* @__PURE__ */ jsx37("th", { className: "py-2 font-medium", children: "Created" }),
+        /* @__PURE__ */ jsx37("th", { className: "py-2 font-medium", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx36("tbody", { children: apps.map((app) => /* @__PURE__ */ jsxs33("tr", { className: "border-b border-border", children: [
-        /* @__PURE__ */ jsx36("td", { className: "py-2 font-mono text-foreground", children: app.key }),
-        /* @__PURE__ */ jsx36("td", { className: "py-2 text-foreground", children: app.displayName }),
-        /* @__PURE__ */ jsx36("td", { className: "py-2", children: /* @__PURE__ */ jsx36(StatusBadge9, { variant: app.status === "active" ? "success" : "neutral", children: app.status }) }),
-        /* @__PURE__ */ jsx36("td", { className: "py-2 text-muted-foreground", children: formatDateTime10(app.createdAt) }),
-        /* @__PURE__ */ jsx36("td", { className: "py-2", children: /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37("tbody", { children: apps.map((app) => /* @__PURE__ */ jsxs34("tr", { className: "border-b border-border", children: [
+        /* @__PURE__ */ jsx37("td", { className: "py-2 font-mono text-foreground", children: app.key }),
+        /* @__PURE__ */ jsx37("td", { className: "py-2 text-foreground", children: app.displayName }),
+        /* @__PURE__ */ jsx37("td", { className: "py-2", children: /* @__PURE__ */ jsx37(StatusBadge9, { variant: app.status === "active" ? "success" : "neutral", children: app.status }) }),
+        /* @__PURE__ */ jsx37("td", { className: "py-2 text-muted-foreground", children: formatDateTime10(app.createdAt) }),
+        /* @__PURE__ */ jsx37("td", { className: "py-2", children: /* @__PURE__ */ jsx37(
           "button",
           {
             type: "button",