@burdenoff/microfe-organization 2026.624.1 → 2026.625.1

package/dist/organization-management/modules/members/pages/MembersListPage.js

@@ -10,198 +10,224 @@ import { useDebouncedValue as c } from "../../../shared/hooks/useDebouncedValue.
 import { useConfirmDialog as ee } from "../../../shared/components/dialog/ConfirmDialog.js";
 import { PERMISSIONS as l } from "../../../constants/permissions.js";
 import { MemberRoleBadge as u } from "../components/MemberRoleBadge.js";
-import { useMembers as d, useRemoveMember as f } from "../hooks/useMembers.js";
-import { useEffect as p, useMemo as m, useState as h } from "react";
-import { Eye as g, Mail as te, RefreshCw as _, Shield as v, Trash2 as y } from "lucide-react";
-import { useFeatureFlagDetails as ne } from "@burdenoff/fe-libs/shared/feature-flags";
-import { usePermissions as re } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { useParams as ie } from "react-router-dom";
-import { ActorIdentity as ae, buildActorFallback as oe, useActorProfiles as se } from "@burdenoff/fe-libs/shared";
+import { useMembers as te, useRemoveMember as ne } from "../hooks/useMembers.js";
+import { useEffect as re, useMemo as d, useState as f } from "react";
+import { Eye as p, Mail as m, RefreshCw as h, Shield as g, Trash2 as _ } from "lucide-react";
+import { GlassCard as v } from "@burdenoff/fe-libs/ui";
+import { useFeatureFlagDetails as ie } from "@burdenoff/fe-libs/shared/feature-flags";
+import { usePermissions as ae } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as oe, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useParams as se } from "react-router-dom";
+import { ActorIdentity as x, buildActorFallback as ce, useActorProfiles as S } from "@burdenoff/fe-libs/shared";
 //#region src/organization-management/modules/members/pages/MembersListPage.tsx
-function C() {
+function le() {
 	let e = n();
 	return (t) => t ? new Date(t).toLocaleDateString() : e("common.status.pending", "Pending");
 }
-function w() {
-	let w = n(), T = C(), { navigate: E, basePath: D = "/organizations" } = e(), { hasPermission: O, isLoading: ce } = re(), k = ne("organization.invite"), A = k ? !!k.value : !0, { organizationId: j } = ie(), [M, N] = h(""), P = c(M, 250), [F, I] = h(/* @__PURE__ */ new Set()), { openConfirmDialog: L, ConfirmDialog: R } = ee(), { members: z, loading: B, error: V, refetch: H } = d(j ?? "", 50, 0), { removeMember: U, loading: W } = f(), { apiGatewayUrl: le, authToken: ue } = e(), G = se(m(() => z.map((e) => ({
+function C() {
+	let C = n(), w = le(), { navigate: T, basePath: E = "/organizations" } = e(), { hasPermission: D, isLoading: O } = ae(), k = ie("organization.invite"), A = k ? !!k.value : !0, { organizationId: j } = se(), [M, ue] = f(""), N = c(M, 250), [P, F] = f(/* @__PURE__ */ new Set()), { openConfirmDialog: I, ConfirmDialog: L } = ee(), { members: R, loading: z, error: B, refetch: V } = te(j ?? "", 50, 0), { removeMember: H, loading: U } = ne(), { apiGatewayUrl: de, authToken: W } = e(), G = S(d(() => R.map((e) => ({
 		actorId: e.userId,
 		actorType: "user"
-	})), [z]), {
-		apiGatewayUrl: le,
-		authToken: ue,
+	})), [R]), {
+		apiGatewayUrl: de,
+		authToken: W,
 		orgId: j
-	}), K = m(() => {
-		if (!P) return z;
-		let e = P.toLowerCase();
-		return z.filter((t) => {
+	}), K = d(() => {
+		if (!N) return R;
+		let e = N.toLowerCase();
+		return R.filter((t) => {
 			let n = G[t.userId];
 			return n?.displayName.toLowerCase().includes(e) || n?.email?.toLowerCase().includes(e) ? !0 : t.userId.toLowerCase().includes(e) || t.role.toLowerCase().includes(e);
 		});
 	}, [
-		P,
-		z,
+		N,
+		R,
 		G
 	]);
-	p(() => {
-		I((e) => {
+	re(() => {
+		F((e) => {
 			let t = new Set(K.map((e) => e.id)), n = new Set([...e].filter((e) => t.has(e)));
 			return n.size === e.size ? e : n;
 		});
 	}, [K]);
-	let q = m(() => K.filter((e) => F.has(e.id)), [K, F]), J = K.length > 0 && K.every((e) => F.has(e.id)), Y = K.some((e) => F.has(e.id)) && !J, X = async (e) => {
+	let q = d(() => K.filter((e) => P.has(e.id)), [K, P]), J = K.length > 0 && K.every((e) => P.has(e.id)), Y = K.some((e) => P.has(e.id)) && !J, X = async (e) => {
 		if (j) try {
 			let n = (await Promise.allSettled(e.map(async (e) => {
-				let t = await U(j, e);
+				let t = await H(j, e);
 				if (t.errors?.length) throw Error(t.errors[0]?.message ?? "Failed to remove member");
 			}))).find((e) => e.status === "rejected");
 			if (n?.status === "rejected") throw n.reason;
-			I(/* @__PURE__ */ new Set()), await H(), t.success(e.length === 1 ? w("members.remove.successSingle", "Member removed successfully") : `${e.length} ${w("members.remove.successMany", "members removed successfully")}`);
+			F(/* @__PURE__ */ new Set()), await V(), t.success(e.length === 1 ? C("members.remove.successSingle", "Member removed successfully") : `${e.length} ${C("members.remove.successMany", "members removed successfully")}`);
 		} catch (e) {
-			t.error(e instanceof Error ? e.message : w("members.remove.failed", "Failed to remove member"));
+			t.error(e instanceof Error ? e.message : C("members.remove.failed", "Failed to remove member"));
 		}
 	}, Z = (e) => {
-		L({
-			title: w("members.remove.title", "Remove member"),
-			description: `${w("members.remove.descriptionPrefix", "Remove")} ${e} ${w("members.remove.descriptionSuffix", "from this organization? Workspace access inherited from this membership will be impacted.")}`,
-			confirmText: w("members.remove.confirm", "Remove"),
+		I({
+			title: C("members.remove.title", "Remove member"),
+			description: `${C("members.remove.descriptionPrefix", "Remove")} ${e} ${C("members.remove.descriptionSuffix", "from this organization? Workspace access inherited from this membership will be impacted.")}`,
+			confirmText: C("members.remove.confirm", "Remove"),
 			variant: "danger",
 			onConfirm: () => {
 				X([e]);
 			}
 		});
-	}, de = () => {
-		q.length !== 0 && L({
-			title: w("members.remove.bulkTitle", "Remove selected members"),
-			description: `${w("members.remove.bulkPrefix", "Remove")} ${q.length} ${w(q.length === 1 ? "members.remove.bulkSuffixSingle" : "members.remove.bulkSuffixMany", q.length === 1 ? "selected member from this organization?" : "selected members from this organization?")}`,
-			confirmText: `${w("members.remove.confirm", "Remove")} ${q.length}`,
+	}, fe = () => {
+		q.length !== 0 && I({
+			title: C("members.remove.bulkTitle", "Remove selected members"),
+			description: `${C("members.remove.bulkPrefix", "Remove")} ${q.length} ${C(q.length === 1 ? "members.remove.bulkSuffixSingle" : "members.remove.bulkSuffixMany", q.length === 1 ? "selected member from this organization?" : "selected members from this organization?")}`,
+			confirmText: `${C("members.remove.confirm", "Remove")} ${q.length}`,
 			variant: "danger",
 			onConfirm: () => {
 				X(q.map((e) => e.userId));
 			}
 		});
 	}, Q = (e, t) => {
-		I((n) => {
+		F((n) => {
 			let r = new Set(n);
 			return t ? r.add(e) : r.delete(e), r;
 		});
 	}, $ = (e) => {
-		I((t) => {
+		F((t) => {
 			let n = new Set(t);
 			return K.forEach((t) => {
 				e ? n.add(t.id) : n.delete(t.id);
 			}), n;
 		});
 	};
-	return j ? ce ? /* @__PURE__ */ x("div", {
+	return j ? O ? /* @__PURE__ */ y("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ x(a, { message: w("common.loadingPermissions", "Loading permissions...") })
-	}) : O(l.MEMBER_LIST) ? B ? /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ y(a, { message: C("common.loadingPermissions", "Loading permissions...") })
+	}) : D(l.MEMBER_LIST) ? z ? /* @__PURE__ */ y("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
-		children: /* @__PURE__ */ x(a, { message: w("members.list.loading", "Loading members...") })
-	}) : V ? /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ y(a, { message: C("members.list.loading", "Loading members...") })
+	}) : B ? /* @__PURE__ */ y("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
-		children: /* @__PURE__ */ x(o, {
-			message: V.message,
+		children: /* @__PURE__ */ y(o, {
+			message: B.message,
 			action: {
-				label: w("common.retry", "Retry"),
+				label: C("common.retry", "Retry"),
 				onClick: () => {
-					H();
+					V();
 				}
 			}
 		})
-	}) : /* @__PURE__ */ S("div", {
-		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-300",
-		children: [/* @__PURE__ */ S("div", {
+	}) : /* @__PURE__ */ b("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-200",
+		children: [/* @__PURE__ */ b("div", {
 			className: "mx-auto flex w-full max-w-7xl flex-col gap-6",
 			children: [
-				/* @__PURE__ */ S("div", {
+				/* @__PURE__ */ b("div", {
 					className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between",
-					children: [/* @__PURE__ */ S("div", {
+					children: [/* @__PURE__ */ b("div", {
 						className: "space-y-2",
-						children: [/* @__PURE__ */ x("h1", {
+						children: [/* @__PURE__ */ y("h1", {
 							className: "text-3xl font-bold text-[var(--color-text-primary)]",
-							children: w("members.list.title", "Members")
-						}), /* @__PURE__ */ x("p", {
+							children: C("members.list.title", "Members")
+						}), /* @__PURE__ */ y("p", {
 							className: "max-w-2xl text-[var(--color-text-secondary)]",
-							children: w("members.list.subtitle", "Manage organization members, inspect their roles, and invite more people into this organization.")
+							children: C("members.list.subtitle", "Manage organization members, inspect their roles, and invite more people into this organization.")
 						})]
-					}), A && O(l.MEMBER_INVITE) && /* @__PURE__ */ S("button", {
+					}), A && D(l.MEMBER_INVITE) && /* @__PURE__ */ b("button", {
 						type: "button",
-						onClick: () => E(`${D}/${j}/members/invite`),
+						onClick: () => T(`${E}/${j}/members/invite`),
 						className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2.5 text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90",
-						children: [/* @__PURE__ */ x(te, {
+						children: [/* @__PURE__ */ y(m, {
 							size: 18,
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ x("span", {
+						}), /* @__PURE__ */ y("span", {
 							className: "font-medium",
-							children: w("members.invite.button", "Invite Member")
+							children: C("members.invite.button", "Invite Member")
 						})]
 					})]
 				}),
-				/* @__PURE__ */ S("div", {
-					className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-4 shadow-[var(--shadow-elevation-1)]",
-					children: [/* @__PURE__ */ S("div", {
+				R.length > 0 ? /* @__PURE__ */ b("div", {
+					className: "grid grid-cols-2 gap-4",
+					children: [/* @__PURE__ */ b(v, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary",
+							children: C("members.list.title", "Members")
+						}), /* @__PURE__ */ y("p", {
+							className: "mt-1 text-2xl font-semibold tabular-nums text-text-primary",
+							children: R.length
+						})]
+					}), /* @__PURE__ */ b(v, {
+						treatment: "metric",
+						className: "p-4",
+						children: [/* @__PURE__ */ y("p", {
+							className: "text-sm text-text-secondary",
+							children: C("members.list.column.role", "Role")
+						}), /* @__PURE__ */ y("p", {
+							className: "mt-1 text-2xl font-semibold tabular-nums text-text-primary",
+							children: new Set(R.map((e) => e.role)).size
+						})]
+					})]
+				}) : null,
+				/* @__PURE__ */ b(v, {
+					treatment: "plain",
+					className: "border-border-seam p-4",
+					children: [/* @__PURE__ */ b("div", {
 						className: "flex flex-col gap-3 sm:flex-row sm:items-center",
-						children: [/* @__PURE__ */ x(r, {
+						children: [/* @__PURE__ */ y(r, {
 							value: M,
-							onChange: N,
-							placeholder: w("members.list.searchPlaceholder", "Search by member ID or role..."),
-							label: w("members.list.searchLabel", "Search organization members"),
+							onChange: ue,
+							placeholder: C("members.list.searchPlaceholder", "Search by member ID or role..."),
+							label: C("members.list.searchLabel", "Search organization members"),
 							inputId: "organization-members-search",
 							className: "flex-1"
-						}), /* @__PURE__ */ x("button", {
+						}), /* @__PURE__ */ y("button", {
 							type: "button",
 							onClick: () => {
-								H();
+								V();
 							},
 							className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-4 py-2 text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)]",
-							"aria-label": w("members.list.refresh", "Refresh members"),
-							title: w("members.list.refresh", "Refresh members"),
-							children: /* @__PURE__ */ x(_, {
+							"aria-label": C("members.list.refresh", "Refresh members"),
+							title: C("members.list.refresh", "Refresh members"),
+							children: /* @__PURE__ */ y(h, {
 								size: 18,
 								"aria-hidden": "true"
 							})
 						})]
-					}), K.length > 0 ? /* @__PURE__ */ S("div", {
+					}), K.length > 0 ? /* @__PURE__ */ b("div", {
 						className: "mt-4 flex flex-col gap-3 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)] p-4 sm:flex-row sm:items-center sm:justify-between",
-						children: [/* @__PURE__ */ S("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "flex flex-wrap items-center gap-3",
-							children: [/* @__PURE__ */ S("label", {
+							children: [/* @__PURE__ */ b("label", {
 								className: "flex items-center gap-2 text-sm text-[var(--color-text-primary)]",
-								children: [/* @__PURE__ */ x(i, {
+								children: [/* @__PURE__ */ y(i, {
 									checked: J,
 									indeterminate: Y,
 									onChange: $,
-									ariaLabel: w("members.list.selectAll", "Select all members")
-								}), /* @__PURE__ */ x("span", { children: w("common.selectAllVisible", "Select all visible") })]
-							}), F.size > 0 ? /* @__PURE__ */ x("button", {
+									ariaLabel: C("members.list.selectAll", "Select all members")
+								}), /* @__PURE__ */ y("span", { children: C("common.selectAllVisible", "Select all visible") })]
+							}), P.size > 0 ? /* @__PURE__ */ y("button", {
 								type: "button",
-								onClick: () => I(/* @__PURE__ */ new Set()),
+								onClick: () => F(/* @__PURE__ */ new Set()),
 								className: "text-sm text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)]",
-								children: w("common.clearSelection", "Clear selection")
+								children: C("common.clearSelection", "Clear selection")
 							}) : null]
-						}), /* @__PURE__ */ S("div", {
+						}), /* @__PURE__ */ b("div", {
 							className: "flex flex-col gap-2 sm:flex-row sm:items-center",
-							children: [/* @__PURE__ */ S("span", {
+							children: [/* @__PURE__ */ b("span", {
 								className: "text-sm text-[var(--color-text-secondary)]",
 								children: [
-									F.size,
+									P.size,
 									" ",
-									w("common.selected", "selected")
+									C("common.selected", "selected")
 								]
-							}), O(l.MEMBER_REMOVE) && /* @__PURE__ */ S("button", {
+							}), D(l.MEMBER_REMOVE) && /* @__PURE__ */ b("button", {
 								type: "button",
-								onClick: de,
-								disabled: q.length === 0 || W,
+								onClick: fe,
+								disabled: q.length === 0 || U,
 								className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[var(--color-status-error-border)] px-3 py-2 text-[var(--color-status-error-text)] transition-all duration-200 hover:bg-[var(--color-status-error-bgSubtle)] disabled:cursor-not-allowed disabled:opacity-50",
 								children: [
-									/* @__PURE__ */ x(y, {
+									/* @__PURE__ */ y(_, {
 										size: 16,
 										"aria-hidden": "true"
 									}),
-									/* @__PURE__ */ x("span", { children: w("common.removeSelected", "Remove Selected") }),
-									q.length > 0 ? /* @__PURE__ */ S("span", { children: [
+									/* @__PURE__ */ y("span", { children: C("common.removeSelected", "Remove Selected") }),
+									q.length > 0 ? /* @__PURE__ */ b("span", { children: [
 										"(",
 										q.length,
 										")"
@@ -211,191 +237,194 @@ function w() {
 						})]
 					}) : null]
 				}),
-				K.length === 0 ? /* @__PURE__ */ x("div", {
-					className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-6 shadow-[var(--shadow-elevation-1)]",
-					children: /* @__PURE__ */ x(s, {
-						icon: /* @__PURE__ */ x(v, {
+				K.length === 0 ? /* @__PURE__ */ y(v, {
+					treatment: "plain",
+					className: "border-border-seam p-6",
+					children: /* @__PURE__ */ y(s, {
+						icon: /* @__PURE__ */ y(g, {
 							size: 40,
 							"aria-hidden": "true"
 						}),
-						title: w("members.list.emptyTitle", "No members found"),
-						description: w("members.list.emptyDescription", "Invite someone to this organization to grant them access and assign their role."),
-						action: A && O(l.MEMBER_INVITE) ? {
-							label: w("members.invite.button", "Invite Member"),
-							onClick: () => E(`${D}/${j}/members/invite`)
+						title: C("members.list.emptyTitle", "No members found"),
+						description: C("members.list.emptyDescription", "Invite someone to this organization to grant them access and assign their role."),
+						action: A && D(l.MEMBER_INVITE) ? {
+							label: C("members.invite.button", "Invite Member"),
+							onClick: () => T(`${E}/${j}/members/invite`)
 						} : void 0
 					})
-				}) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
+				}) : /* @__PURE__ */ b(oe, { children: [/* @__PURE__ */ y("div", {
 					className: "grid gap-4 md:hidden",
-					children: K.map((e) => /* @__PURE__ */ S("article", {
-						className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-4 shadow-[var(--shadow-elevation-1)]",
-						children: [/* @__PURE__ */ S("div", {
+					children: K.map((e) => /* @__PURE__ */ b(v, {
+						treatment: "insight",
+						className: "border-border-seam p-4",
+						children: [/* @__PURE__ */ b("div", {
 							className: "flex items-start gap-3",
-							children: [/* @__PURE__ */ x(i, {
-								checked: F.has(e.id),
+							children: [/* @__PURE__ */ y(i, {
+								checked: P.has(e.id),
 								onChange: (t) => Q(e.id, t),
-								ariaLabel: `${w("members.list.selectMember", "Select member")} ${e.userId}`
-							}), /* @__PURE__ */ S("div", {
+								ariaLabel: `${C("members.list.selectMember", "Select member")} ${e.userId}`
+							}), /* @__PURE__ */ b("div", {
 								className: "flex min-w-0 flex-1 gap-3",
-								children: [/* @__PURE__ */ x("div", {
+								children: [/* @__PURE__ */ y("div", {
 									className: "flex size-10 items-center justify-center rounded-full bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
-									children: /* @__PURE__ */ x(v, {
+									children: /* @__PURE__ */ y(g, {
 										size: 18,
 										"aria-hidden": "true"
 									})
-								}), /* @__PURE__ */ S("div", {
+								}), /* @__PURE__ */ b("div", {
 									className: "min-w-0 flex-1 space-y-3",
-									children: [/* @__PURE__ */ S("div", { children: [
-										/* @__PURE__ */ S("div", {
+									children: [/* @__PURE__ */ b("div", { children: [
+										/* @__PURE__ */ b("div", {
 											className: "flex flex-wrap items-start gap-2",
-											children: [/* @__PURE__ */ x("h2", {
+											children: [/* @__PURE__ */ y("h2", {
 												className: "break-all text-base font-semibold text-[var(--color-text-primary)]",
 												children: G[e.userId]?.displayName ?? `User ${e.userId.slice(0, 8)}…`
-											}), /* @__PURE__ */ x(u, { role: e.role })]
+											}), /* @__PURE__ */ y(u, { role: e.role })]
 										}),
-										G[e.userId]?.email ? /* @__PURE__ */ x("p", {
+										G[e.userId]?.email ? /* @__PURE__ */ y("p", {
 											className: "mt-0.5 break-all text-xs text-[var(--color-text-secondary)]",
 											children: G[e.userId]?.email
 										}) : null,
-										/* @__PURE__ */ S("details", {
+										/* @__PURE__ */ b("details", {
 											className: "mt-1 text-xs text-[var(--color-text-muted)]",
 											children: [
-												/* @__PURE__ */ x("summary", {
+												/* @__PURE__ */ y("summary", {
 													className: "cursor-pointer",
-													children: w("members.list.showIds", "Show IDs")
+													children: C("members.list.showIds", "Show IDs")
 												}),
-												/* @__PURE__ */ S("p", {
+												/* @__PURE__ */ b("p", {
 													className: "mt-1 break-all font-mono",
 													children: [
-														w("members.detail.userId", "User ID"),
+														C("members.detail.userId", "User ID"),
 														": ",
 														e.userId
 													]
 												}),
-												/* @__PURE__ */ S("p", {
+												/* @__PURE__ */ b("p", {
 													className: "mt-0.5 break-all font-mono",
 													children: [
-														w("members.list.memberId", "Member ID"),
+														C("members.list.memberId", "Member ID"),
 														": ",
 														e.id
 													]
 												})
 											]
 										})
-									] }), /* @__PURE__ */ S("dl", {
+									] }), /* @__PURE__ */ b("dl", {
 										className: "grid grid-cols-1 gap-3 text-sm",
-										children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("dt", {
+										children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("dt", {
 											className: "text-[var(--color-text-secondary)]",
-											children: w("members.list.invitedBy", "Invited by")
-										}), /* @__PURE__ */ x("dd", {
+											children: C("members.list.invitedBy", "Invited by")
+										}), /* @__PURE__ */ y("dd", {
 											className: "mt-1 break-all font-mono text-[var(--color-text-primary)]",
-											children: e.invitedBy || w("common.notAvailable", "N/A")
-										})] }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("dt", {
+											children: e.invitedBy || C("common.notAvailable", "N/A")
+										})] }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("dt", {
 											className: "text-[var(--color-text-secondary)]",
-											children: w("members.list.joined", "Joined")
-										}), /* @__PURE__ */ x("dd", {
+											children: C("members.list.joined", "Joined")
+										}), /* @__PURE__ */ y("dd", {
 											className: "mt-1 text-[var(--color-text-primary)]",
-											children: T(e.joinedAt)
+											children: w(e.joinedAt)
 										})] })]
 									})]
 								})]
 							})]
-						}), /* @__PURE__ */ S("div", {
+						}), /* @__PURE__ */ b("div", {
 							className: "mt-4 flex flex-wrap gap-2 border-t border-[var(--color-border-default)] pt-4",
-							children: [/* @__PURE__ */ S("button", {
+							children: [/* @__PURE__ */ b("button", {
 								type: "button",
-								onClick: () => E(`${D}/${j}/members/${e.userId}`),
+								onClick: () => T(`${E}/${j}/members/${e.userId}`),
 								className: "inline-flex min-h-10 items-center gap-2 rounded-lg border border-[var(--color-border-default)] px-3 py-2 text-sm text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)]",
-								children: [/* @__PURE__ */ x(g, {
+								children: [/* @__PURE__ */ y(p, {
 									size: 16,
 									"aria-hidden": "true"
-								}), w("common.view", "View")]
-							}), O(l.MEMBER_REMOVE) && /* @__PURE__ */ S("button", {
+								}), C("common.view", "View")]
+							}), D(l.MEMBER_REMOVE) && /* @__PURE__ */ b("button", {
 								type: "button",
 								onClick: () => Z(e.userId),
-								disabled: W,
+								disabled: U,
 								className: "inline-flex min-h-10 items-center gap-2 rounded-lg border border-[var(--color-status-error-border)] px-3 py-2 text-sm text-[var(--color-status-error-text)] transition-all duration-200 hover:bg-[var(--color-status-error-bgSubtle)] disabled:cursor-not-allowed disabled:opacity-50",
-								children: [/* @__PURE__ */ x(y, {
+								children: [/* @__PURE__ */ y(_, {
 									size: 16,
 									"aria-hidden": "true"
-								}), w("members.remove.confirm", "Remove")]
+								}), C("members.remove.confirm", "Remove")]
 							})]
 						})]
 					}, e.id))
-				}), /* @__PURE__ */ x("div", {
-					className: "hidden overflow-hidden rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-[var(--shadow-elevation-1)] md:block",
-					children: /* @__PURE__ */ x("div", {
+				}), /* @__PURE__ */ y(v, {
+					treatment: "plain",
+					className: "hidden overflow-hidden border-border-seam p-0 md:block",
+					children: /* @__PURE__ */ y("div", {
 						className: "overflow-x-auto",
-						children: /* @__PURE__ */ S("table", {
+						children: /* @__PURE__ */ b("table", {
 							className: "min-w-full",
-							children: [/* @__PURE__ */ x("thead", {
+							children: [/* @__PURE__ */ y("thead", {
 								className: "bg-[var(--color-bg-subtle)]",
-								children: /* @__PURE__ */ S("tr", { children: [
-									/* @__PURE__ */ x("th", {
+								children: /* @__PURE__ */ b("tr", { children: [
+									/* @__PURE__ */ y("th", {
 										className: "w-12 px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
-										children: /* @__PURE__ */ x(i, {
+										children: /* @__PURE__ */ y(i, {
 											checked: J,
 											indeterminate: Y,
 											onChange: $,
-											ariaLabel: w("members.list.selectAll", "Select all members")
+											ariaLabel: C("members.list.selectAll", "Select all members")
 										})
 									}),
-									/* @__PURE__ */ x("th", {
+									/* @__PURE__ */ y("th", {
 										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
-										children: w("members.list.column.user", "User")
+										children: C("members.list.column.user", "User")
 									}),
-									/* @__PURE__ */ x("th", {
+									/* @__PURE__ */ y("th", {
 										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
-										children: w("members.list.column.role", "Role")
+										children: C("members.list.column.role", "Role")
 									}),
-									/* @__PURE__ */ x("th", {
+									/* @__PURE__ */ y("th", {
 										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
-										children: w("members.list.invitedBy", "Invited by")
+										children: C("members.list.invitedBy", "Invited by")
 									}),
-									/* @__PURE__ */ x("th", {
+									/* @__PURE__ */ y("th", {
 										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
-										children: w("members.list.joined", "Joined")
+										children: C("members.list.joined", "Joined")
 									}),
-									/* @__PURE__ */ x("th", {
+									/* @__PURE__ */ y("th", {
 										className: "px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
-										children: w("common.actions", "Actions")
+										children: C("common.actions", "Actions")
 									})
 								] })
-							}), /* @__PURE__ */ x("tbody", {
-								className: "divide-y divide-[var(--color-border-default)]",
-								children: K.map((e) => /* @__PURE__ */ S("tr", {
+							}), /* @__PURE__ */ y("tbody", {
+								className: "divide-y divide-[var(--color-border-seam)]",
+								children: K.map((e) => /* @__PURE__ */ b("tr", {
 									className: "transition-colors hover:bg-[var(--color-bg-subtle)]",
 									children: [
-										/* @__PURE__ */ x("td", {
+										/* @__PURE__ */ y("td", {
 											className: "px-6 py-4 align-top",
-											children: /* @__PURE__ */ x(i, {
-												checked: F.has(e.id),
+											children: /* @__PURE__ */ y(i, {
+												checked: P.has(e.id),
 												onChange: (t) => Q(e.id, t),
-												ariaLabel: `${w("members.list.selectMember", "Select member")} ${e.userId}`
+												ariaLabel: `${C("members.list.selectMember", "Select member")} ${e.userId}`
 											})
 										}),
-										/* @__PURE__ */ x("td", {
+										/* @__PURE__ */ y("td", {
 											className: "px-6 py-4",
-											children: /* @__PURE__ */ S("div", {
+											children: /* @__PURE__ */ b("div", {
 												className: "flex items-start gap-3",
-												children: [/* @__PURE__ */ x("div", {
+												children: [/* @__PURE__ */ y("div", {
 													className: "flex size-10 items-center justify-center rounded-full bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
-													children: /* @__PURE__ */ x(v, {
+													children: /* @__PURE__ */ y(g, {
 														size: 18,
 														"aria-hidden": "true"
 													})
-												}), /* @__PURE__ */ S("div", {
+												}), /* @__PURE__ */ b("div", {
 													className: "min-w-0",
-													children: [/* @__PURE__ */ x(ae, {
-														profile: G[e.userId] ?? oe({
+													children: [/* @__PURE__ */ y(x, {
+														profile: G[e.userId] ?? ce({
 															actorId: e.userId,
 															actorType: "user"
 														}),
 														variant: "cell"
-													}), /* @__PURE__ */ S("p", {
+													}), /* @__PURE__ */ b("p", {
 														className: "break-all font-mono text-xs text-[var(--color-text-muted)]",
 														children: [
-															w("common.idLabel", "ID"),
+															C("common.idLabel", "ID"),
 															": ",
 															e.id
 														]
@@ -403,40 +432,40 @@ function w() {
 												})]
 											})
 										}),
-										/* @__PURE__ */ x("td", {
+										/* @__PURE__ */ y("td", {
 											className: "px-6 py-4 align-top",
-											children: /* @__PURE__ */ x(u, { role: e.role })
+											children: /* @__PURE__ */ y(u, { role: e.role })
 										}),
-										/* @__PURE__ */ x("td", {
+										/* @__PURE__ */ y("td", {
 											className: "px-6 py-4 align-top text-sm text-[var(--color-text-secondary)]",
-											children: e.invitedBy || w("common.notAvailable", "N/A")
+											children: e.invitedBy || C("common.notAvailable", "N/A")
 										}),
-										/* @__PURE__ */ x("td", {
+										/* @__PURE__ */ y("td", {
 											className: "px-6 py-4 align-top text-sm text-[var(--color-text-secondary)]",
-											children: T(e.joinedAt)
+											children: w(e.joinedAt)
 										}),
-										/* @__PURE__ */ x("td", {
+										/* @__PURE__ */ y("td", {
 											className: "px-6 py-4 align-top",
-											children: /* @__PURE__ */ S("div", {
+											children: /* @__PURE__ */ b("div", {
 												className: "flex items-center justify-end gap-2",
-												children: [/* @__PURE__ */ x("button", {
+												children: [/* @__PURE__ */ y("button", {
 													type: "button",
-													onClick: () => E(`${D}/${j}/members/${e.userId}`),
+													onClick: () => T(`${E}/${j}/members/${e.userId}`),
 													className: "rounded-lg p-2 text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)]",
-													"aria-label": `${w("members.list.viewMember", "View member")} ${e.userId}`,
-													title: `${w("members.list.viewMember", "View member")} ${e.userId}`,
-													children: /* @__PURE__ */ x(g, {
+													"aria-label": `${C("members.list.viewMember", "View member")} ${e.userId}`,
+													title: `${C("members.list.viewMember", "View member")} ${e.userId}`,
+													children: /* @__PURE__ */ y(p, {
 														size: 18,
 														"aria-hidden": "true"
 													})
-												}), O(l.MEMBER_REMOVE) && /* @__PURE__ */ x("button", {
+												}), D(l.MEMBER_REMOVE) && /* @__PURE__ */ y("button", {
 													type: "button",
 													onClick: () => Z(e.userId),
-													disabled: W,
+													disabled: U,
 													className: "rounded-lg p-2 text-[var(--color-status-error-text)] transition-all duration-200 hover:bg-[var(--color-status-error-bgSubtle)] disabled:cursor-not-allowed disabled:opacity-50",
-													"aria-label": `${w("members.list.removeMember", "Remove member")} ${e.userId}`,
-													title: `${w("members.list.removeMember", "Remove member")} ${e.userId}`,
-													children: /* @__PURE__ */ x(y, {
+													"aria-label": `${C("members.list.removeMember", "Remove member")} ${e.userId}`,
+													title: `${C("members.list.removeMember", "Remove member")} ${e.userId}`,
+													children: /* @__PURE__ */ y(_, {
 														size: 18,
 														"aria-hidden": "true"
 													})
@@ -450,25 +479,25 @@ function w() {
 					})
 				})] })
 			]
-		}), R]
-	}) : /* @__PURE__ */ x("div", {
+		}), L]
+	}) : /* @__PURE__ */ y("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
-		children: /* @__PURE__ */ x("div", {
+		children: /* @__PURE__ */ y("div", {
 			className: "p-8 text-center text-[var(--color-text-secondary)]",
-			children: w("members.list.noPermission", "You don't have permission to view members.")
+			children: C("members.list.noPermission", "You don't have permission to view members.")
 		})
-	}) : /* @__PURE__ */ x("div", {
+	}) : /* @__PURE__ */ y("div", {
 		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
-		children: /* @__PURE__ */ x(o, {
-			message: w("members.list.missingOrg", "Organization ID is required to view members"),
+		children: /* @__PURE__ */ y(o, {
+			message: C("members.list.missingOrg", "Organization ID is required to view members"),
 			action: {
-				label: w("members.list.goToOrganizations", "Go to Organizations"),
-				onClick: () => E(D)
+				label: C("members.list.goToOrganizations", "Go to Organizations"),
+				onClick: () => T(E)
 			}
 		})
 	});
 }
 //#endregion
-export { w as MembersListPage };
+export { C as MembersListPage };
 
 //# sourceMappingURL=MembersListPage.js.map