@burdenoff/microfe-devportal 2026.625.9 → 2026.626.1

package/dist/devportal/pages/ApiKeysPage.js

@@ -7,18 +7,19 @@ import { PageLayout as i } from "../components/PageLayout.js";
 import { ActiveIndicator as ie } from "../components/StatusBadge.js";
 import { SelectionCheckbox as a } from "../components/SelectionCheckbox.js";
 import { NewSecretAlert as ae } from "../components/SecretDisplay.js";
-import { DataTable as oe } from "../components/DataTable.js";
-import { ConfirmDialog as o } from "../components/ConfirmDialog.js";
-import { PermissionGuard as se } from "../components/PermissionGuard.js";
+import { DataTable as o } from "../components/DataTable.js";
+import { ConfirmDialog as s } from "../components/ConfirmDialog.js";
+import { PermissionGuard as oe } from "../components/PermissionGuard.js";
 import "../components/index.js";
-import { DEVPORTAL_PERMISSIONS as s } from "../constants/permissions.js";
+import { DEVPORTAL_PERMISSIONS as se } from "../constants/permissions.js";
 import "../hooks/index.js";
 import { useMemo as c, useState as l } from "react";
 import { useI18n as ce } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as le, AlertTriangle as ue, Ban as u, Clock as de, Key as d, Loader2 as fe, Plus as f, RotateCw as p, Search as pe, Shield as me } from "lucide-react";
+import { AlertCircle as le, AlertTriangle as ue, Ban as u, Clock as de, Key as d, Loader2 as fe, Plus as f, RotateCw as pe, Search as me, Shield as p } from "lucide-react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { EmphasisPanel as he, GlassCard as g } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/ApiKeysPage.tsx
-function he(e) {
+function ge(e) {
 	return {
 		id: e.id,
 		name: e.name,
@@ -31,32 +32,32 @@ function he(e) {
 		lastUsedAt: e.lastUsedAt ?? void 0
 	};
 }
-var g = (e) => {
+var _ = (e) => {
 	if (!e) return !1;
 	let t = Math.ceil((new Date(e).getTime() - Date.now()) / (1e3 * 60 * 60 * 24));
 	return t <= 30 && t > 0;
-}, _ = (e) => e ? new Date(e).getTime() < Date.now() : !1, v = () => {
-	let { navigate: v, basePath: ge, activeOrgId: _e } = e(), { t: ve } = ce(), y = (e, t) => {
-		let n = ve(e);
+}, v = (e) => e ? new Date(e).getTime() < Date.now() : !1, y = () => {
+	let { navigate: y, basePath: _e, activeOrgId: ve } = e(), { t: ye } = ce(), b = (e, t) => {
+		let n = ye(e);
 		return n === e ? t : n;
-	}, [b, x] = l(""), [S, ye] = l("all"), [C, w] = l(null), [T, E] = l(null), [D, O] = l(null), [k, A] = l(/* @__PURE__ */ new Set()), [j, M] = l(null), [N, P] = l(!1), { data: F, loading: be, error: I, refetch: L } = ee({ fetchPolicy: "cache-and-network" }), { data: R } = r({ fetchPolicy: "cache-first" }), z = c(() => {
-		let e = R?.currentUserApps?.apps;
+	}, [x, be] = l(""), [S, xe] = l("all"), [C, w] = l(null), [T, E] = l(null), [D, O] = l(null), [k, A] = l(/* @__PURE__ */ new Set()), [j, M] = l(null), [Se, N] = l(!1), { data: P, loading: Ce, error: F, refetch: I } = ee({ fetchPolicy: "cache-and-network" }), { data: L } = r({ fetchPolicy: "cache-first" }), R = c(() => {
+		let e = L?.currentUserApps?.apps;
 		return e?.length ? new Set(e.map((e) => e.id)) : null;
-	}, [R?.currentUserApps?.apps]), [B, { loading: V }] = te(), [xe, { loading: H }] = ne(), U = c(() => F?.myApiKeys?.apiKeys.map(he) ?? [], [F?.myApiKeys?.apiKeys]), W = (e) => {
-		v?.(`${ge}${e}`);
-	}, Se = async () => {
+	}, [L?.currentUserApps?.apps]), [z, { loading: B }] = te(), [we, { loading: V }] = ne(), H = c(() => P?.myApiKeys?.apiKeys.map(ge) ?? [], [P?.myApiKeys?.apiKeys]), U = (e) => {
+		y?.(`${_e}${e}`);
+	}, Te = async () => {
 		if (C) try {
-			await B({ variables: { keyId: C.id } }), w(null), await L();
+			await z({ variables: { keyId: C.id } }), w(null), await I();
 		} catch {}
-	}, Ce = async () => {
+	}, Ee = async () => {
 		if (T) try {
-			let e = (await xe({ variables: { keyId: T.id } })).data?.rotateAPIKey.apiSecret;
-			e && O(e), E(null), await L();
+			let e = (await we({ variables: { keyId: T.id } })).data?.rotateAPIKey.apiSecret;
+			e && O(e), E(null), await I();
 		} catch {}
-	}, G = U.filter((e) => {
-		let t = !z || z.has(e.appId), n = !b || e.name.toLowerCase().includes(b.toLowerCase()) || e.prefix.toLowerCase().includes(b.toLowerCase()) || (e.appName?.toLowerCase().includes(b.toLowerCase()) ?? !1), r = S === "all" || S === "active" && !_(e.expiresAt) || S === "expired" && _(e.expiresAt);
+	}, W = H.filter((e) => {
+		let t = !R || R.has(e.appId), n = !x || e.name.toLowerCase().includes(x.toLowerCase()) || e.prefix.toLowerCase().includes(x.toLowerCase()) || (e.appName?.toLowerCase().includes(x.toLowerCase()) ?? !1), r = S === "all" || S === "active" && !v(e.expiresAt) || S === "expired" && v(e.expiresAt);
 		return t && n && r;
-	}), K = c(() => U.filter((e) => k.has(e.id)), [U, k]), q = c(() => K.filter((e) => !_(e.expiresAt)), [K]), J = G.filter((e) => !_(e.expiresAt)), Y = J.length > 0 && J.every((e) => k.has(e.id)), X = J.some((e) => k.has(e.id)) && !Y, we = (e, t) => {
+	}), G = c(() => H.filter((e) => k.has(e.id)), [H, k]), K = c(() => G.filter((e) => !v(e.expiresAt)), [G]), q = W.filter((e) => !v(e.expiresAt)), J = q.length > 0 && q.every((e) => k.has(e.id)), Y = q.some((e) => k.has(e.id)) && !J, X = (e, t) => {
 		A((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
@@ -64,51 +65,51 @@ var g = (e) => {
 	}, Z = (e) => {
 		A((t) => {
 			let n = new Set(t);
-			return J.forEach((t) => {
+			return q.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
 	}, Q = () => A(/* @__PURE__ */ new Set());
-	if (be && !F) return /* @__PURE__ */ m(i, {
-		title: y("devportal.apiKeys", "API Keys"),
-		description: y("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+	if (Ce && !P) return /* @__PURE__ */ m(i, {
+		title: b("devportal.apiKeys", "API Keys"),
+		description: b("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 		children: /* @__PURE__ */ h("div", {
 			className: "flex items-center justify-center py-12",
-			children: [/* @__PURE__ */ m(fe, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ m("span", {
-				className: "ml-2 text-muted-foreground",
-				children: y("devportal.loadingApiKeys", "Loading API keys...")
+			children: [/* @__PURE__ */ m(fe, { className: "h-8 w-8 animate-spin text-text-secondary" }), /* @__PURE__ */ m("span", {
+				className: "ml-2 text-text-secondary",
+				children: b("devportal.loadingApiKeys", "Loading API keys...")
 			})]
 		})
 	});
-	if (I) return /* @__PURE__ */ m(i, {
-		title: y("devportal.apiKeys", "API Keys"),
-		description: y("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+	if (F) return /* @__PURE__ */ m(i, {
+		title: b("devportal.apiKeys", "API Keys"),
+		description: b("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
 		children: /* @__PURE__ */ h("div", {
-			className: "rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center",
+			className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-6 text-center",
 			children: [
-				/* @__PURE__ */ m(le, { className: "mx-auto h-8 w-8 text-destructive" }),
+				/* @__PURE__ */ m(le, { className: "mx-auto h-8 w-8 text-status-error-text" }),
 				/* @__PURE__ */ m("h3", {
-					className: "mt-2 font-medium text-destructive",
-					children: y("devportal.failedToLoadApiKeys", "Failed to load API keys")
+					className: "mt-2 font-medium text-status-error-text",
+					children: b("devportal.failedToLoadApiKeys", "Failed to load API keys")
 				}),
 				/* @__PURE__ */ m("p", {
-					className: "mt-1 text-sm text-muted-foreground",
-					children: re(I)
+					className: "mt-1 text-sm text-text-secondary",
+					children: re(F)
 				}),
 				/* @__PURE__ */ m("button", {
-					onClick: () => L(),
-					className: "mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-					children: y("devportal.tryAgain", "Try Again")
+					onClick: () => I(),
+					className: "mt-4 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+					children: b("devportal.tryAgain", "Try Again")
 				})
 			]
 		})
 	});
-	let Te = [
+	let De = [
 		{
 			key: "select",
 			header: /* @__PURE__ */ m(a, {
-				checked: Y,
-				indeterminate: X,
+				checked: J,
+				indeterminate: Y,
 				onChange: Z,
 				ariaLabel: "Select all visible API keys"
 			}),
@@ -117,8 +118,8 @@ var g = (e) => {
 				onClick: (e) => e.stopPropagation(),
 				children: /* @__PURE__ */ m(a, {
 					checked: k.has(e.id),
-					disabled: _(e.expiresAt),
-					onChange: (t) => we(e.id, t),
+					disabled: v(e.expiresAt),
+					onChange: (t) => X(e.id, t),
 					ariaLabel: `Select API key ${e.name}`
 				})
 			})
@@ -129,7 +130,7 @@ var g = (e) => {
 			render: (e) => /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ m("div", {
-					className: t("flex h-10 w-10 items-center justify-center rounded-lg", _(e.expiresAt) ? "bg-status-error-bg-subtle text-status-error-text" : "bg-primary/10 text-primary"),
+					className: t("flex h-10 w-10 items-center justify-center rounded-lg", v(e.expiresAt) ? "bg-status-error-bg-subtle text-status-error-text" : "bg-action-primary-bg/10 text-primary"),
 					children: /* @__PURE__ */ m(d, { size: 20 })
 				}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("div", {
 					className: "flex items-center gap-2",
@@ -138,17 +139,17 @@ var g = (e) => {
 							className: "font-medium",
 							children: e.name
 						}),
-						_(e.expiresAt) && /* @__PURE__ */ m("span", {
+						v(e.expiresAt) && /* @__PURE__ */ m("span", {
 							className: "rounded bg-status-error-bg-subtle px-1.5 py-0.5 text-xs text-status-error-text",
 							children: "Expired"
 						}),
-						g(e.expiresAt) && !_(e.expiresAt) && /* @__PURE__ */ m("span", {
+						_(e.expiresAt) && !v(e.expiresAt) && /* @__PURE__ */ m("span", {
 							className: "rounded bg-status-warning-bg-subtle px-1.5 py-0.5 text-xs text-status-warning-text",
 							children: "Expiring Soon"
 						})
 					]
 				}), e.appName && /* @__PURE__ */ h("p", {
-					className: "text-xs text-muted-foreground",
+					className: "text-xs text-text-secondary",
 					children: ["App: ", e.appName]
 				})] })]
 			})
@@ -157,7 +158,7 @@ var g = (e) => {
 			key: "prefix",
 			header: "Key Prefix",
 			render: (e) => /* @__PURE__ */ h("code", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: [e.prefix, "..."]
 			})
 		},
@@ -167,10 +168,10 @@ var g = (e) => {
 			render: (e) => /* @__PURE__ */ h("div", {
 				className: "flex flex-wrap gap-1",
 				children: [e.scopes.slice(0, 3).map((e) => /* @__PURE__ */ m("span", {
-					className: "inline-flex rounded bg-muted px-1.5 py-0.5 text-xs",
+					className: "inline-flex rounded bg-bg-sunken px-1.5 py-0.5 text-xs",
 					children: e
 				}, e)), e.scopes.length > 3 && /* @__PURE__ */ h("span", {
-					className: "text-xs text-muted-foreground",
+					className: "text-xs text-text-secondary",
 					children: ["+", e.scopes.length - 3]
 				})]
 			})
@@ -179,7 +180,7 @@ var g = (e) => {
 			key: "lastUsed",
 			header: "Last Used",
 			render: (e) => /* @__PURE__ */ m("span", {
-				className: "text-sm text-muted-foreground",
+				className: "text-sm text-text-secondary",
 				children: e.lastUsedAt ? new Date(e.lastUsedAt).toLocaleDateString() : "Never"
 			})
 		},
@@ -187,7 +188,7 @@ var g = (e) => {
 			key: "expires",
 			header: "Expires",
 			render: (e) => /* @__PURE__ */ m("span", {
-				className: t("text-sm", _(e.expiresAt) ? "text-status-error-text" : g(e.expiresAt) ? "text-status-warning-text" : "text-muted-foreground"),
+				className: t("text-sm", v(e.expiresAt) ? "text-status-error-text" : _(e.expiresAt) ? "text-status-warning-text" : "text-text-secondary"),
 				children: e.expiresAt ? new Date(e.expiresAt).toLocaleDateString() : "Never"
 			})
 		},
@@ -196,9 +197,9 @@ var g = (e) => {
 			header: "Status",
 			render: (e) => /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ m(ie, { active: !_(e.expiresAt) }), /* @__PURE__ */ m("span", {
+				children: [/* @__PURE__ */ m(ie, { active: !v(e.expiresAt) }), /* @__PURE__ */ m("span", {
 					className: "text-sm",
-					children: _(e.expiresAt) ? "Expired" : "Active"
+					children: v(e.expiresAt) ? "Expired" : "Active"
 				})]
 			})
 		},
@@ -206,27 +207,27 @@ var g = (e) => {
 			key: "actions",
 			header: "Actions",
 			className: "w-28",
-			render: (e) => _(e.expiresAt) ? /* @__PURE__ */ m("span", {
-				className: "text-xs text-muted-foreground",
+			render: (e) => v(e.expiresAt) ? /* @__PURE__ */ m("span", {
+				className: "text-xs text-text-secondary",
 				children: "No actions"
 			}) : /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-1",
 				children: [/* @__PURE__ */ h("button", {
 					type: "button",
 					title: "Rotate secret",
-					disabled: H,
+					disabled: V,
 					onClick: (t) => {
 						t.stopPropagation(), E(e);
 					},
 					className: t("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors", "text-status-info-text hover:bg-status-info-bg-subtle", "disabled:opacity-50 disabled:cursor-not-allowed"),
-					children: [/* @__PURE__ */ m(p, { size: 14 }), /* @__PURE__ */ m("span", {
+					children: [/* @__PURE__ */ m(pe, { size: 14 }), /* @__PURE__ */ m("span", {
 						className: "sr-only sm:not-sr-only",
 						children: "Rotate"
 					})]
 				}), /* @__PURE__ */ h("button", {
 					type: "button",
 					title: "Revoke key",
-					disabled: V,
+					disabled: B,
 					onClick: (t) => {
 						t.stopPropagation(), w(e);
 					},
@@ -239,20 +240,21 @@ var g = (e) => {
 			})
 		}
 	], $ = {
-		total: G.length,
-		active: G.filter((e) => !_(e.expiresAt)).length,
-		expiringSoon: G.filter((e) => g(e.expiresAt)).length,
-		expired: G.filter((e) => _(e.expiresAt)).length
+		total: W.length,
+		active: W.filter((e) => !v(e.expiresAt)).length,
+		expiringSoon: W.filter((e) => _(e.expiresAt)).length,
+		expired: W.filter((e) => v(e.expiresAt)).length
 	};
-	return /* @__PURE__ */ m(se, {
-		permission: s.APP_READ,
+	return /* @__PURE__ */ m(oe, {
+		permission: se.APP_READ,
 		children: /* @__PURE__ */ h(i, {
-			title: y("devportal.apiKeys", "API Keys"),
-			description: y("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+			title: b("devportal.apiKeys", "API Keys"),
+			description: b("devportal.manageApiKeys", "Manage your API keys for programmatic access"),
+			purpose: b("devportal.apiKeysPurpose", "API keys authenticate server-to-server calls — use them in scripts, CI jobs, or backend services that talk to the platform without a logged-in user. Generate a key here, scope it to an app, and rotate it if it is ever exposed."),
 			actions: /* @__PURE__ */ h("button", {
-				onClick: () => W("/api-keys/new"),
-				className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
-				children: [/* @__PURE__ */ m(f, { size: 16 }), y("devportal.generateApiKey", "Generate API Key")]
+				onClick: () => U("/api-keys/new"),
+				className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
+				children: [/* @__PURE__ */ m(f, { size: 16 }), b("devportal.generateApiKey", "Generate API Key")]
 			}),
 			children: [
 				D && /* @__PURE__ */ m(ae, {
@@ -262,7 +264,7 @@ var g = (e) => {
 					onDismiss: () => O(null)
 				}),
 				j && /* @__PURE__ */ m("div", {
-					className: t("rounded-lg border px-4 py-3 text-sm", j.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-destructive/40 bg-destructive/10 text-destructive"),
+					className: t("rounded-lg border px-4 py-3 text-sm", j.type === "success" ? "border-border-subtle bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border/40 bg-status-error-bg/10 text-status-error-text"),
 					children: /* @__PURE__ */ h("div", {
 						className: "flex items-center justify-between gap-3",
 						children: [/* @__PURE__ */ m("span", { children: j.message }), /* @__PURE__ */ m("button", {
@@ -278,20 +280,20 @@ var g = (e) => {
 						className: "flex flex-1 items-center gap-4",
 						children: [/* @__PURE__ */ h("div", {
 							className: "relative flex-1 max-w-md",
-							children: [/* @__PURE__ */ m(pe, {
+							children: [/* @__PURE__ */ m(me, {
 								size: 16,
-								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
 							}), /* @__PURE__ */ m("input", {
 								type: "text",
 								placeholder: "Search by name, prefix, or app...",
-								value: b,
-								onChange: (e) => x(e.target.value),
-								className: "w-full rounded-md border bg-background pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+								value: x,
+								onChange: (e) => be(e.target.value),
+								className: "w-full rounded-md border bg-bg-surface pl-9 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 							})]
 						}), /* @__PURE__ */ h("select", {
 							value: S,
-							onChange: (e) => ye(e.target.value),
-							className: "rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
+							onChange: (e) => xe(e.target.value),
+							className: "rounded-md border bg-bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary",
 							children: [
 								/* @__PURE__ */ m("option", {
 									value: "all",
@@ -309,37 +311,40 @@ var g = (e) => {
 						})]
 					})
 				}),
-				/* @__PURE__ */ h("div", {
+				/* @__PURE__ */ m(he, { children: /* @__PURE__ */ h("div", {
 					className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
 					children: [
-						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ h(g, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ h("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ m(d, { size: 16 }), /* @__PURE__ */ m("span", {
 									className: "text-sm",
 									children: "Total Keys"
 								})]
 							}), /* @__PURE__ */ m("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.total
 							})]
 						}),
-						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ h(g, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2 text-status-success-text",
-								children: [/* @__PURE__ */ m(me, { size: 16 }), /* @__PURE__ */ m("span", {
+								children: [/* @__PURE__ */ m(p, { size: 16 }), /* @__PURE__ */ m("span", {
 									className: "text-sm",
 									children: "Active"
 								})]
 							}), /* @__PURE__ */ m("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.active
 							})]
 						}),
-						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ h(g, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2 text-status-warning-text",
 								children: [/* @__PURE__ */ m(de, { size: 16 }), /* @__PURE__ */ m("span", {
@@ -347,12 +352,13 @@ var g = (e) => {
 									children: "Expiring Soon"
 								})]
 							}), /* @__PURE__ */ m("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.expiringSoon
 							})]
 						}),
-						/* @__PURE__ */ h("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ h(g, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2 text-status-error-text",
 								children: [/* @__PURE__ */ m(ue, { size: 16 }), /* @__PURE__ */ m("span", {
@@ -360,24 +366,24 @@ var g = (e) => {
 									children: "Expired"
 								})]
 							}), /* @__PURE__ */ m("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $.expired
 							})]
 						})
 					]
-				}),
+				}) }),
 				/* @__PURE__ */ h("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: [
-						G.length,
+						W.length,
 						" API key",
-						G.length === 1 ? "" : "s",
+						W.length === 1 ? "" : "s",
 						" ",
 						"found"
 					]
 				}),
-				G.length > 0 && /* @__PURE__ */ m("div", {
-					className: "rounded-lg border bg-card p-4",
+				W.length > 0 && /* @__PURE__ */ m("div", {
+					className: "rounded-card border border-border-seam bg-bg-surface p-4",
 					children: /* @__PURE__ */ h("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
 						children: [/* @__PURE__ */ h("div", {
@@ -385,8 +391,8 @@ var g = (e) => {
 							children: [/* @__PURE__ */ h("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ m(a, {
-									checked: Y,
-									indeterminate: X,
+									checked: J,
+									indeterminate: Y,
 									onChange: Z,
 									ariaLabel: "Select all visible API keys"
 								}), /* @__PURE__ */ m("span", {
@@ -395,90 +401,90 @@ var g = (e) => {
 								})]
 							}), k.size > 0 && /* @__PURE__ */ m("button", {
 								onClick: Q,
-								className: "text-sm text-muted-foreground hover:text-foreground",
+								className: "text-sm text-text-secondary hover:text-text-primary",
 								children: "Clear selection"
 							})]
 						}), /* @__PURE__ */ h("div", {
 							className: "flex flex-wrap items-center gap-2",
 							children: [/* @__PURE__ */ h("span", {
-								className: "rounded-full bg-muted px-3 py-1 text-sm font-medium text-muted-foreground",
+								className: "rounded-full bg-bg-sunken px-3 py-1 text-sm font-medium text-text-secondary",
 								children: [k.size, " selected"]
 							}), /* @__PURE__ */ h("button", {
-								onClick: () => P(!0),
-								disabled: q.length === 0,
+								onClick: () => N(!0),
+								disabled: K.length === 0,
 								className: "inline-flex items-center gap-2 rounded-md border border-status-error-bg px-3 py-2 text-sm font-medium text-status-error-text transition-colors hover:bg-status-error-bg-subtle disabled:cursor-not-allowed disabled:opacity-50",
 								children: [
 									/* @__PURE__ */ m(u, { size: 16 }),
 									"Revoke Selected",
-									q.length > 0 ? ` (${q.length})` : ""
+									K.length > 0 ? ` (${K.length})` : ""
 								]
 							})]
 						})]
 					})
 				}),
-				G.length > 0 ? /* @__PURE__ */ m(oe, {
-					data: G,
-					columns: Te,
+				W.length > 0 ? /* @__PURE__ */ m(o, {
+					data: W,
+					columns: De,
 					keyField: "id"
 				}) : /* @__PURE__ */ m(n, {
-					icon: /* @__PURE__ */ m(d, { size: 32 }),
-					title: y("devportal.noApiKeysFound", "No API keys found"),
-					description: b || S !== "all" ? y("devportal.tryAdjustingFilters", "Try adjusting your filters") : y("devportal.generateFirstApiKey", "Generate your first API key to start making API calls"),
-					action: !b && S === "all" ? /* @__PURE__ */ h("button", {
-						onClick: () => W("/api-keys/new"),
-						className: "inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-						children: [/* @__PURE__ */ m(f, { size: 16 }), y("devportal.generateApiKey", "Generate API Key")]
+					illustration: "empty-data",
+					title: b("devportal.noApiKeysFound", "No API keys found"),
+					description: x || S !== "all" ? b("devportal.tryAdjustingFilters", "Try adjusting your filters") : b("devportal.generateFirstApiKey", "Generate your first API key to start making API calls"),
+					action: !x && S === "all" ? /* @__PURE__ */ h("button", {
+						onClick: () => U("/api-keys/new"),
+						className: "inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
+						children: [/* @__PURE__ */ m(f, { size: 16 }), b("devportal.generateApiKey", "Generate API Key")]
 					}) : void 0
 				}),
-				/* @__PURE__ */ m(o, {
+				/* @__PURE__ */ m(s, {
 					open: C !== null,
 					onOpenChange: (e) => {
 						e || w(null);
 					},
-					onConfirm: Se,
+					onConfirm: Te,
 					title: "Revoke API Key",
 					description: `Are you sure you want to revoke "${C?.name ?? ""}"? This action cannot be undone. Any application or service using this key will immediately lose access.`,
 					confirmLabel: "Revoke Key",
 					cancelLabel: "Cancel",
 					variant: "danger",
-					loading: V
+					loading: B
 				}),
-				/* @__PURE__ */ m(o, {
+				/* @__PURE__ */ m(s, {
 					open: T !== null,
 					onOpenChange: (e) => {
 						e || E(null);
 					},
-					onConfirm: Ce,
+					onConfirm: Ee,
 					title: "Rotate API Key Secret",
 					description: `This will generate a new secret for "${T?.name ?? ""}" and immediately invalidate the current one. Make sure to update all services using this key before the old secret stops working.`,
 					confirmLabel: "Rotate Secret",
 					cancelLabel: "Cancel",
 					variant: "warning",
-					loading: H
+					loading: V
 				}),
-				/* @__PURE__ */ m(o, {
-					open: N,
-					onOpenChange: P,
+				/* @__PURE__ */ m(s, {
+					open: Se,
+					onOpenChange: N,
 					onConfirm: async () => {
-						if (q.length === 0) return;
-						let e = await Promise.allSettled(q.map((e) => B({ variables: { keyId: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
+						if (K.length === 0) return;
+						let e = await Promise.allSettled(K.map((e) => z({ variables: { keyId: e.id } }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
 						M({
 							type: n === 0 ? "success" : "error",
 							message: `Revoked ${t} API key${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`
-						}), P(!1), Q(), await L();
+						}), N(!1), Q(), await I();
 					},
 					title: "Revoke selected API keys",
-					description: `Revoke ${q.length} selected API key${q.length === 1 ? "" : "s"}? Any service using these keys will immediately lose access.`,
+					description: `Revoke ${K.length} selected API key${K.length === 1 ? "" : "s"}? Any service using these keys will immediately lose access.`,
 					confirmLabel: "Revoke Keys",
 					cancelLabel: "Cancel",
 					variant: "danger",
-					loading: V
+					loading: B
 				})
 			]
 		})
 	});
 };
 //#endregion
-export { v as ApiKeysPage };
+export { y as ApiKeysPage };
 
 //# sourceMappingURL=ApiKeysPage.js.map