@burdenoff/microfe-devportal 2026.625.9 → 2026.626.1

package/dist/devportal/pages/DelegationsPage.js

@@ -13,8 +13,9 @@ import { useCallback as d, useEffect as f, useMemo as te, useState as p } from "
 import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 import { AlertCircle as h, AlertTriangle as g, Bot as _, Clock as v, Cog as y, Loader2 as b, Shield as x, Users as S, XCircle as C, Zap as w } from "lucide-react";
 import { Fragment as ne, jsx as T, jsxs as E } from "react/jsx-runtime";
+import { EmphasisPanel as re, GlassCard as D } from "@burdenoff/fe-libs/ui";
 //#region src/devportal/pages/DelegationsPage.tsx
-function D(e) {
+function O(e) {
 	return {
 		id: e.id,
 		appId: e.appId,
@@ -36,17 +37,17 @@ function D(e) {
 		}
 	};
 }
-function O(e) {
+function k(e) {
 	let t = new Date(e), n = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), r = Math.floor(n / 1e3), i = Math.floor(r / 60), a = Math.floor(i / 60), o = Math.floor(a / 24), s = Math.floor(o / 7), c = Math.floor(o / 30);
 	return r < 60 ? "just now" : i < 60 ? `${i} minute${i === 1 ? "" : "s"} ago` : a < 24 ? `${a} hour${a === 1 ? "" : "s"} ago` : o < 7 ? `${o} day${o === 1 ? "" : "s"} ago` : s < 5 ? `${s} week${s === 1 ? "" : "s"} ago` : c < 12 ? `${c} month${c === 1 ? "" : "s"} ago` : t.toLocaleDateString();
 }
-function k(e) {
+function A(e) {
 	let t = new Date(e), n = /* @__PURE__ */ new Date(), r = t.getTime() - n.getTime();
 	if (r <= 0) return "expired";
 	let i = Math.floor(r / (1e3 * 60)), a = Math.floor(r / (1e3 * 60 * 60)), o = Math.floor(r / (1e3 * 60 * 60 * 24));
 	return i < 60 ? `in ${i} minute${i === 1 ? "" : "s"}` : a < 24 ? `in ${a} hour${a === 1 ? "" : "s"}` : `in ${o} day${o === 1 ? "" : "s"}`;
 }
-var A = ({ type: t, className: n }) => {
+var j = ({ type: t, className: n }) => {
 	let r = { className: e("h-5 w-5", n) };
 	switch (t) {
 		case "SERVICE": return /* @__PURE__ */ T(y, { ...r });
@@ -54,14 +55,14 @@ var A = ({ type: t, className: n }) => {
 		case "INTEGRATION": return /* @__PURE__ */ T(w, { ...r });
 		default: return /* @__PURE__ */ T(x, { ...r });
 	}
-}, j = ({ status: t }) => /* @__PURE__ */ T("span", {
+}, M = ({ status: t }) => /* @__PURE__ */ T("span", {
 	className: e("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", {
 		ACTIVE: "bg-status-success-bg-subtle text-status-success-text",
 		REVOKED: "bg-status-error-bg-subtle text-status-error-text",
 		EXPIRED: "bg-bg-sunken text-text-primary"
 	}[t]),
 	children: t
-}), re = ({ message: e, onDismiss: t }) => (f(() => {
+}), ie = ({ message: e, onDismiss: t }) => (f(() => {
 	let e = setTimeout(t, 5e3);
 	return () => clearTimeout(e);
 }, [t]), /* @__PURE__ */ T("div", {
@@ -73,21 +74,21 @@ var A = ({ type: t, className: n }) => {
 			children: e
 		})]
 	})
-})), ie = ({ message: e, onRetry: t }) => {
+})), ae = ({ message: e, onRetry: t }) => {
 	let { t: n } = m();
 	return /* @__PURE__ */ T("div", {
-		className: "rounded-lg border border-destructive/50 bg-destructive/10 p-4",
+		className: "rounded-lg border border-status-error-border/50 bg-status-error-bg/10 p-4",
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-center gap-3",
 			children: [
-				/* @__PURE__ */ T(h, { className: "h-5 w-5 text-destructive" }),
+				/* @__PURE__ */ T(h, { className: "h-5 w-5 text-status-error-text" }),
 				/* @__PURE__ */ T("p", {
-					className: "flex-1 text-sm text-destructive",
+					className: "flex-1 text-sm text-status-error-text",
 					children: e
 				}),
 				t && /* @__PURE__ */ T("button", {
 					onClick: t,
-					className: "rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-muted transition-colors",
+					className: "rounded-md border px-3 py-1.5 text-xs font-medium hover:bg-bg-sunken transition-colors",
 					children: ((e, t) => {
 						let r = n(e);
 						return r === e ? t : r;
@@ -96,13 +97,13 @@ var A = ({ type: t, className: n }) => {
 			]
 		})
 	});
-}, ae = ({ delegation: t, onRevoke: n, isRevoking: r, selected: i, onToggleSelect: a, canRevoke: o }) => {
+}, oe = ({ delegation: t, onRevoke: n, isRevoking: r, selected: i, onToggleSelect: a, canRevoke: o }) => {
 	let { t: c } = m(), l = (e, t) => {
 		let n = c(e);
 		return n === e ? t : n;
 	};
 	return /* @__PURE__ */ T("div", {
-		className: e("rounded-lg border bg-card p-5 transition-colors hover:border-border/80", i && "border-primary bg-primary/5", t.status !== "ACTIVE" && "opacity-60"),
+		className: e("rounded-card border border-border-seam bg-bg-surface p-5 transition-colors hover:border-border-subtle/80", i && "border-primary bg-action-primary-bg/5", t.status !== "ACTIVE" && "opacity-60"),
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-start justify-between gap-4",
 			children: [/* @__PURE__ */ E("div", {
@@ -118,8 +119,8 @@ var A = ({ type: t, className: n }) => {
 						})
 					}),
 					/* @__PURE__ */ T("div", {
-						className: e("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg", t.status === "ACTIVE" ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"),
-						children: /* @__PURE__ */ T(A, {
+						className: e("flex h-12 w-12 shrink-0 items-center justify-center rounded-lg", t.status === "ACTIVE" ? "bg-action-primary-bg/10 text-primary" : "bg-bg-sunken text-text-secondary"),
+						children: /* @__PURE__ */ T(j, {
 							type: t.app?.type ?? "SERVICE",
 							className: "h-6 w-6"
 						})
@@ -132,14 +133,14 @@ var A = ({ type: t, className: n }) => {
 								children: [/* @__PURE__ */ T("h3", {
 									className: "truncate font-semibold",
 									children: t.app?.name ?? l("devportal.unknownApp", "Unknown App")
-								}), /* @__PURE__ */ T(j, { status: t.status })]
+								}), /* @__PURE__ */ T(M, { status: t.status })]
 							}),
 							t.app?.description && /* @__PURE__ */ T("p", {
-								className: "text-sm text-muted-foreground line-clamp-2",
+								className: "text-sm text-text-secondary line-clamp-2",
 								children: t.app.description
 							}),
 							/* @__PURE__ */ E("div", {
-								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground",
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary",
 								children: [
 									/* @__PURE__ */ E("span", {
 										className: "flex items-center gap-1",
@@ -147,7 +148,7 @@ var A = ({ type: t, className: n }) => {
 											/* @__PURE__ */ T(v, { className: "h-3.5 w-3.5" }),
 											l("devportal.granted", "Granted"),
 											" ",
-											O(t.grantedAt)
+											k(t.grantedAt)
 										]
 									}),
 									t.expiresAt && /* @__PURE__ */ E("span", {
@@ -156,17 +157,17 @@ var A = ({ type: t, className: n }) => {
 											/* @__PURE__ */ T(g, { className: "h-3.5 w-3.5" }),
 											l("devportal.expires", "Expires"),
 											" ",
-											k(t.expiresAt)
+											A(t.expiresAt)
 										]
 									}),
 									/* @__PURE__ */ T("span", {
-										className: e("rounded-md px-2 py-0.5 text-xs font-mono", "bg-muted text-muted-foreground"),
+										className: e("rounded-md px-2 py-0.5 text-xs font-mono", "bg-bg-sunken text-text-secondary"),
 										children: t.app?.type ?? "UNKNOWN"
 									})
 								]
 							}),
 							t.scopes.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
-								className: "mb-1.5 text-xs text-muted-foreground",
+								className: "mb-1.5 text-xs text-text-secondary",
 								children: l("devportal.permissions", "Permissions:")
 							}), /* @__PURE__ */ T("div", {
 								className: "flex flex-wrap gap-1.5",
@@ -176,7 +177,7 @@ var A = ({ type: t, className: n }) => {
 								}, e))
 							})] }),
 							t.workspaceIds.length > 0 && /* @__PURE__ */ E("p", {
-								className: "flex items-center gap-1 text-xs text-muted-foreground",
+								className: "flex items-center gap-1 text-xs text-text-secondary",
 								children: [
 									/* @__PURE__ */ T(S, { className: "h-3.5 w-3.5" }),
 									l("devportal.accessToWorkspaces", "Access to"),
@@ -199,13 +200,13 @@ var A = ({ type: t, className: n }) => {
 			})]
 		})
 	});
-}, oe = ({ delegation: t, onRevoke: n, isRevoking: r, selected: i, onToggleSelect: a, canRevoke: o }) => {
+}, se = ({ delegation: t, onRevoke: n, isRevoking: r, selected: i, onToggleSelect: a, canRevoke: o }) => {
 	let { t: c } = m(), l = (e, t) => {
 		let n = c(e);
 		return n === e ? t : n;
 	};
 	return /* @__PURE__ */ T("div", {
-		className: e("rounded-lg border bg-card p-5 transition-colors hover:border-border/80", i && "border-primary bg-primary/5"),
+		className: e("rounded-card border border-border-seam bg-bg-surface p-5 transition-colors hover:border-border-subtle/80", i && "border-primary bg-action-primary-bg/5"),
 		children: /* @__PURE__ */ E("div", {
 			className: "flex items-start justify-between gap-4",
 			children: [/* @__PURE__ */ E("div", {
@@ -222,7 +223,7 @@ var A = ({ type: t, className: n }) => {
 					}),
 					/* @__PURE__ */ T("div", {
 						className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-accent-purple-subtle text-accent-purple",
-						children: /* @__PURE__ */ T(A, {
+						children: /* @__PURE__ */ T(j, {
 							type: t.app?.type ?? "SERVICE",
 							className: "h-6 w-6"
 						})
@@ -235,28 +236,28 @@ var A = ({ type: t, className: n }) => {
 								children: [/* @__PURE__ */ T("h3", {
 									className: "truncate font-semibold",
 									children: t.app?.name ?? l("devportal.unknownApp", "Unknown App")
-								}), /* @__PURE__ */ T(j, { status: t.status })]
+								}), /* @__PURE__ */ T(M, { status: t.status })]
 							}),
 							/* @__PURE__ */ E("p", {
-								className: "text-sm text-muted-foreground",
+								className: "text-sm text-text-secondary",
 								children: [
 									l("devportal.grantedToUser", "Granted to user:"),
 									" ",
 									/* @__PURE__ */ T("code", {
-										className: "rounded bg-muted px-1.5 py-0.5 text-xs",
+										className: "rounded bg-bg-sunken px-1.5 py-0.5 text-xs",
 										children: t.userId
 									})
 								]
 							}),
 							/* @__PURE__ */ E("div", {
-								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground",
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary",
 								children: [/* @__PURE__ */ E("span", {
 									className: "flex items-center gap-1",
 									children: [
 										/* @__PURE__ */ T(v, { className: "h-3.5 w-3.5" }),
 										l("devportal.granted", "Granted"),
 										" ",
-										O(t.grantedAt)
+										k(t.grantedAt)
 									]
 								}), t.expiresAt && /* @__PURE__ */ E("span", {
 									className: "flex items-center gap-1",
@@ -269,7 +270,7 @@ var A = ({ type: t, className: n }) => {
 								})]
 							}),
 							t.scopes.length > 0 && /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
-								className: "mb-1.5 text-xs text-muted-foreground",
+								className: "mb-1.5 text-xs text-text-secondary",
 								children: l("devportal.permissionsGranted", "Permissions granted:")
 							}), /* @__PURE__ */ T("div", {
 								className: "flex flex-wrap gap-1.5",
@@ -290,7 +291,7 @@ var A = ({ type: t, className: n }) => {
 			})]
 		})
 	});
-}, se = ({ delegations: e }) => {
+}, ce = ({ delegations: e }) => {
 	let { t } = m(), n = (e, n) => {
 		let r = t(e);
 		return r === e ? n : r;
@@ -303,12 +304,12 @@ var A = ({ type: t, className: n }) => {
 		}), /* @__PURE__ */ T("div", {
 			className: "space-y-3 opacity-60",
 			children: e.map((e) => /* @__PURE__ */ E("div", {
-				className: "flex items-center justify-between rounded-lg border bg-muted/30 p-4",
+				className: "flex items-center justify-between rounded-lg border bg-bg-sunken/30 p-4",
 				children: [/* @__PURE__ */ E("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ T("div", {
-						className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground",
-						children: /* @__PURE__ */ T(A, {
+						className: "flex h-10 w-10 items-center justify-center rounded-lg bg-bg-sunken text-text-secondary",
+						children: /* @__PURE__ */ T(j, {
 							type: e.app?.type ?? "SERVICE",
 							className: "h-5 w-5"
 						})
@@ -316,109 +317,113 @@ var A = ({ type: t, className: n }) => {
 						className: "font-medium",
 						children: e.app?.name ?? n("devportal.unknownApp", "Unknown App")
 					}), /* @__PURE__ */ E("p", {
-						className: "text-sm text-muted-foreground",
+						className: "text-sm text-text-secondary",
 						children: [
 							e.status === "REVOKED" ? n("devportal.revoked", "Revoked") : n("devportal.expired", "Expired"),
 							" ",
-							e.revokedAt ? O(e.revokedAt) : ""
+							e.revokedAt ? k(e.revokedAt) : ""
 						]
 					})] })]
-				}), /* @__PURE__ */ T(j, { status: e.status })]
+				}), /* @__PURE__ */ T(M, { status: e.status })]
 			}, e.id))
 		})]
 	});
-}, M = () => {
+}, N = () => {
 	let { t: f } = m(), _ = (e, t) => {
 		let n = f(e);
 		return n === e ? t : n;
-	}, { allowed: y } = ee(u.DELEGATION_REVOKE), [b, C] = p("acting-as-me"), [w, O] = p([]), [k, A] = p(null), [j, M] = p(/* @__PURE__ */ new Set()), { data: N, loading: ce, error: le, refetch: P } = r({ fetchPolicy: "cache-and-network" }), { data: F, loading: ue, error: de, refetch: I } = i({ fetchPolicy: "cache-and-network" }), [L, { loading: R }] = a(), z = (N?.currentUserDelegations?.delegations ?? []).map(D), B = (F?.currentUserGrantedDelegations?.delegations ?? []).map(D), V = z.filter((e) => e.status === "ACTIVE"), H = z.filter((e) => e.status !== "ACTIVE"), U = B.filter((e) => e.status === "ACTIVE"), W = b === "acting-as-me" ? V : U, G = te(() => W.filter((e) => j.has(e.id)), [j, W]), K = W.length > 0 && W.every((e) => j.has(e.id)), fe = W.some((e) => j.has(e.id)) && !K, q = b === "acting-as-me" ? ce : ue, J = b === "acting-as-me" ? le : de, Y = d((e) => {
-		O([e]);
+	}, { allowed: y } = ee(u.DELEGATION_REVOKE), [b, C] = p("acting-as-me"), [w, k] = p([]), [A, j] = p(null), [M, N] = p(/* @__PURE__ */ new Set()), { data: le, loading: ue, error: de, refetch: P } = r({ fetchPolicy: "cache-and-network" }), { data: F, loading: fe, error: pe, refetch: I } = i({ fetchPolicy: "cache-and-network" }), [L, { loading: R }] = a(), z = (le?.currentUserDelegations?.delegations ?? []).map(O), B = (F?.currentUserGrantedDelegations?.delegations ?? []).map(O), V = z.filter((e) => e.status === "ACTIVE"), H = z.filter((e) => e.status !== "ACTIVE"), U = B.filter((e) => e.status === "ACTIVE"), W = b === "acting-as-me" ? V : U, G = te(() => W.filter((e) => M.has(e.id)), [M, W]), K = W.length > 0 && W.every((e) => M.has(e.id)), me = W.some((e) => M.has(e.id)) && !K, q = b === "acting-as-me" ? ue : fe, J = b === "acting-as-me" ? de : pe, Y = d((e) => {
+		k([e]);
 	}, []), X = d((e, t) => {
-		M((n) => {
+		N((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
-	}, []), pe = d((e) => {
-		M((t) => {
+	}, []), he = d((e) => {
+		N((t) => {
 			let n = new Set(t);
 			return W.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
 	}, [W]), Z = d(() => {
-		M(/* @__PURE__ */ new Set());
+		N(/* @__PURE__ */ new Set());
 	}, []);
 	d(() => {
-		G.length !== 0 && O(G);
+		G.length !== 0 && k(G);
 	}, [G]);
-	let me = d(async () => {
+	let ge = d(async () => {
 		if (w.length !== 0) try {
 			let e = await Promise.allSettled(w.map((e) => L({ variables: {
 				id: e.id,
 				reason: _("devportal.userRevokedAccessReason", "User revoked access via Developer Portal")
 			} }))), t = e.filter((e) => e.status === "fulfilled").length, n = e.length - t;
-			A(`Revoked ${t} delegation${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), M((e) => {
+			j(`Revoked ${t} delegation${t === 1 ? "" : "s"}${n > 0 ? ` • ${n} failed` : ""}`), N((e) => {
 				let t = new Set(e);
 				return w.forEach((e) => t.delete(e.id)), t;
-			}), O([]), P(), I();
+			}), k([]), P(), I();
 		} catch {
-			O([]);
+			k([]);
 		}
 	}, [
 		w,
 		L,
 		P,
 		I
-	]), he = d(() => {
-		A(null);
+	]), _e = d(() => {
+		j(null);
 	}, []), Q = V.length, $ = U.length;
 	return /* @__PURE__ */ T(l, {
 		permission: u.INSTALLATION_READ,
 		children: /* @__PURE__ */ E(o, {
 			title: _("devportal.appDelegationsTitle", "App Delegations"),
 			description: _("devportal.appDelegationsDescription", "Manage which apps can act on your behalf. Revoke access at any time."),
+			purpose: _("devportal.appDelegationsPurpose", "Delegations are the consent grants that let an app perform actions as you within a limited scope and time window. Review what you have authorized here, see what each app can do, and revoke anything you no longer trust."),
 			children: [
-				k && /* @__PURE__ */ T(re, {
-					message: k,
-					onDismiss: he
+				A && /* @__PURE__ */ T(ie, {
+					message: A,
+					onDismiss: _e
 				}),
-				J && /* @__PURE__ */ T(ie, {
+				J && /* @__PURE__ */ T(ae, {
 					message: J.message || _("devportal.failedToLoadDelegations", "Failed to load delegations"),
 					onRetry: () => {
 						P(), I();
 					}
 				}),
-				/* @__PURE__ */ E("div", {
+				/* @__PURE__ */ T(re, { children: /* @__PURE__ */ E("div", {
 					className: "grid grid-cols-2 gap-4 sm:grid-cols-4",
 					children: [
-						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ E(D, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ E("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ T(x, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
 									className: "text-sm",
 									children: _("devportal.activeDelegations", "Active Delegations")
 								})]
 							}), /* @__PURE__ */ T("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: Q
 							})]
 						}),
-						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ E(D, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ E("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ T(S, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
 									className: "text-sm",
 									children: _("devportal.grantedByMe", "Granted by Me")
 								})]
 							}), /* @__PURE__ */ T("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: $
 							})]
 						}),
-						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ E(D, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ E("div", {
 								className: "flex items-center gap-2 text-status-warning-text",
 								children: [/* @__PURE__ */ T(g, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
@@ -426,25 +431,26 @@ var A = ({ type: t, className: n }) => {
 									children: _("devportal.revokedExpired", "Revoked / Expired")
 								})]
 							}), /* @__PURE__ */ T("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: H.length
 							})]
 						}),
-						/* @__PURE__ */ E("div", {
-							className: "rounded-lg border bg-card p-4",
+						/* @__PURE__ */ E(D, {
+							treatment: "metric",
+							className: "p-4",
 							children: [/* @__PURE__ */ E("div", {
-								className: "flex items-center gap-2 text-muted-foreground",
+								className: "flex items-center gap-2 text-text-secondary",
 								children: [/* @__PURE__ */ T(v, { className: "h-4 w-4" }), /* @__PURE__ */ T("span", {
 									className: "text-sm",
 									children: _("devportal.totalAllTime", "Total All-Time")
 								})]
 							}), /* @__PURE__ */ T("p", {
-								className: "mt-1 text-2xl font-semibold",
+								className: "mt-1 text-2xl font-semibold tabular-nums",
 								children: z.length
 							})]
 						})
 					]
-				}),
+				}) }),
 				/* @__PURE__ */ T("div", {
 					className: "border-b",
 					children: /* @__PURE__ */ E("div", {
@@ -458,9 +464,9 @@ var A = ({ type: t, className: n }) => {
 							onClick: () => {
 								Z(), C("acting-as-me");
 							},
-							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "acting-as-me" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"),
+							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "acting-as-me" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"),
 							children: [_("devportal.appsActingAsMe", "Apps Acting as Me"), Q > 0 && /* @__PURE__ */ T("span", {
-								className: "ml-2 inline-flex items-center justify-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+								className: "ml-2 inline-flex items-center justify-center rounded-full bg-action-primary-bg/10 px-2 py-0.5 text-xs font-medium text-primary",
 								children: Q
 							})]
 						}), /* @__PURE__ */ E("button", {
@@ -470,16 +476,16 @@ var A = ({ type: t, className: n }) => {
 							onClick: () => {
 								Z(), C("granted-by-me");
 							},
-							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "granted-by-me" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"),
+							className: e("-mb-px border-b-2 px-4 py-3 text-sm font-medium transition-colors", b === "granted-by-me" ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"),
 							children: [_("devportal.delegationsIGranted", "Delegations I Granted"), $ > 0 && /* @__PURE__ */ T("span", {
-								className: "ml-2 inline-flex items-center justify-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+								className: "ml-2 inline-flex items-center justify-center rounded-full bg-action-primary-bg/10 px-2 py-0.5 text-xs font-medium text-primary",
 								children: $
 							})]
 						})]
 					})
 				}),
 				W.length > 0 && /* @__PURE__ */ T("div", {
-					className: "rounded-lg border bg-card p-4",
+					className: "rounded-card border border-border-seam bg-bg-surface p-4",
 					children: /* @__PURE__ */ E("div", {
 						className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
 						children: [
@@ -489,25 +495,25 @@ var A = ({ type: t, className: n }) => {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ T(s, {
 										checked: K,
-										indeterminate: fe,
-										onChange: pe,
+										indeterminate: me,
+										onChange: he,
 										ariaLabel: _("devportal.selectAllVisibleDelegations", "Select all visible delegations")
 									}), /* @__PURE__ */ T("span", {
 										className: "text-sm font-medium",
 										children: _("devportal.selectAllVisible", "Select all visible")
 									})]
-								}), j.size > 0 && /* @__PURE__ */ T("button", {
+								}), M.size > 0 && /* @__PURE__ */ T("button", {
 									onClick: Z,
-									className: "text-sm text-muted-foreground hover:text-foreground",
+									className: "text-sm text-text-secondary hover:text-text-primary",
 									children: _("devportal.clearSelection", "Clear selection")
 								})]
 							}),
 							/* @__PURE__ */ T("div", {
 								className: "flex flex-wrap items-center gap-2",
 								children: /* @__PURE__ */ E("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: [
-										j.size,
+										M.size,
 										" ",
 										_("devportal.selected", "selected")
 									]
@@ -520,7 +526,7 @@ var A = ({ type: t, className: n }) => {
 						]
 					})
 				}),
-				q && !N && !F && /* @__PURE__ */ T(t, { message: _("devportal.loadingDelegations", "Loading delegations...") }),
+				q && !le && !F && /* @__PURE__ */ T(t, { message: _("devportal.loadingDelegations", "Loading delegations...") }),
 				!q && b === "acting-as-me" && /* @__PURE__ */ T("div", {
 					className: "space-y-8",
 					id: "delegations-panel-acting-as-me",
@@ -528,24 +534,25 @@ var A = ({ type: t, className: n }) => {
 					"aria-labelledby": "delegations-tab-acting-as-me",
 					tabIndex: 0,
 					children: V.length === 0 && H.length === 0 ? /* @__PURE__ */ T(n, {
-						icon: /* @__PURE__ */ T(x, { size: 32 }),
+						illustration: "empty-people",
 						title: _("devportal.noActiveDelegations", "No Active Delegations"),
 						description: _("devportal.noAppsAuthorizedOnYourBehalf", "No apps are currently authorized to act on your behalf.")
 					}) : /* @__PURE__ */ E(ne, { children: [V.length === 0 ? /* @__PURE__ */ T(n, {
+						illustration: "empty-people",
 						icon: /* @__PURE__ */ T(x, { size: 32 }),
 						title: _("devportal.noActiveDelegations", "No Active Delegations"),
 						description: _("devportal.allPreviousDelegationsRevokedOrExpired", "All previous delegations have been revoked or expired.")
 					}) : /* @__PURE__ */ T("div", {
 						className: "space-y-4",
-						children: V.map((e) => /* @__PURE__ */ T(ae, {
+						children: V.map((e) => /* @__PURE__ */ T(oe, {
 							delegation: e,
 							onRevoke: Y,
 							isRevoking: R && w.some((t) => t.id === e.id),
-							selected: j.has(e.id),
+							selected: M.has(e.id),
 							onToggleSelect: (t) => X(e.id, t),
 							canRevoke: y
 						}, e.id))
-					}), /* @__PURE__ */ T(se, { delegations: H })] })
+					}), /* @__PURE__ */ T(ce, { delegations: H })] })
 				}),
 				!q && b === "granted-by-me" && /* @__PURE__ */ T("div", {
 					className: "space-y-4",
@@ -554,14 +561,14 @@ var A = ({ type: t, className: n }) => {
 					"aria-labelledby": "delegations-tab-granted-by-me",
 					tabIndex: 0,
 					children: B.length === 0 ? /* @__PURE__ */ T(n, {
-						icon: /* @__PURE__ */ T(S, { size: 32 }),
+						illustration: "empty-people",
 						title: _("devportal.noDelegationsGranted", "No Delegations Granted"),
 						description: _("devportal.noGrantedDelegationsDescription", "You haven't granted any app delegations to other users.")
-					}) : B.map((e) => /* @__PURE__ */ T(oe, {
+					}) : B.map((e) => /* @__PURE__ */ T(se, {
 						delegation: e,
 						onRevoke: Y,
 						isRevoking: R && w.some((t) => t.id === e.id),
-						selected: j.has(e.id),
+						selected: M.has(e.id),
 						onToggleSelect: (t) => X(e.id, t),
 						canRevoke: y
 					}, e.id))
@@ -582,9 +589,9 @@ var A = ({ type: t, className: n }) => {
 				/* @__PURE__ */ T(c, {
 					open: w.length > 0,
 					onOpenChange: (e) => {
-						e || O([]);
+						e || k([]);
 					},
-					onConfirm: me,
+					onConfirm: ge,
 					title: w.length > 1 ? _("devportal.revokeDelegations", "Revoke Delegations") : _("devportal.revokeDelegation", "Revoke Delegation"),
 					description: w.length > 1 ? _("devportal.revokeDelegationsBulkConfirm", `Are you sure you want to revoke ${w.length} selected delegations? Those apps will no longer be able to act on the delegated users' behalf.`) : _("devportal.revokeDelegationSingleConfirm", `Are you sure you want to revoke access for "${w[0]?.app?.name ?? "this app"}"? This app will no longer be able to act on your behalf.`),
 					confirmLabel: _("devportal.revokeAccess", "Revoke Access"),
@@ -597,6 +604,6 @@ var A = ({ type: t, className: n }) => {
 	});
 };
 //#endregion
-export { M as DelegationsPage };
+export { N as DelegationsPage };
 
 //# sourceMappingURL=DelegationsPage.js.map