@burdenoff/microfe-workspaces 2026.624.2 → 2026.625.2

package/dist/pages/WorkspaceInvitePage.js

@@ -14,7 +14,7 @@ import { useMemo as s, useRef as ue, useState as c } from "react";
 import { AlertCircle as l, ArrowLeft as de, CheckCircle2 as u, Download as fe, Loader2 as d, Mail as pe, RefreshCw as me, Send as he, Upload as ge, UserPlus as _e, XCircle as f } from "lucide-react";
 import { PermissionProvider as ve } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as ye, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { AlertDialog as be, AlertDialogAction as xe, AlertDialogCancel as Se, AlertDialogContent as Ce, AlertDialogDescription as we, AlertDialogFooter as Te, AlertDialogHeader as Ee, AlertDialogTitle as De, Badge as h, Button as g, Card as _, CardContent as v, CardHeader as y, CardTitle as b, Checkbox as x, Input as Oe, ResponsiveTable as ke, Skeleton as S, Tabs as Ae, TabsContent as je, TabsList as Me, TabsTrigger as Ne, Tooltip as C, TooltipContent as w, TooltipProvider as Pe, TooltipTrigger as T } from "@burdenoff/fe-libs/ui";
+import { AlertDialog as be, AlertDialogAction as xe, AlertDialogCancel as Se, AlertDialogContent as Ce, AlertDialogDescription as we, AlertDialogFooter as Te, AlertDialogHeader as Ee, AlertDialogTitle as De, Badge as h, Button as g, CardContent as _, CardHeader as v, CardTitle as y, Checkbox as b, GlassCard as x, Input as Oe, ResponsiveTable as ke, Skeleton as S, Tabs as Ae, TabsContent as je, TabsList as Me, TabsTrigger as Ne, Tooltip as C, TooltipContent as w, TooltipProvider as Pe, TooltipTrigger as T } from "@burdenoff/fe-libs/ui";
 import { useNavigate as Fe, useParams as Ie } from "react-router-dom";
 import { useI18n as Le } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/pages/WorkspaceInvitePage.tsx
@@ -137,7 +137,7 @@ function We({ selectedRoleIds: e, onRoleToggle: t, selectedProjectIds: n, onProj
 							children: [/* @__PURE__ */ p("span", {
 								className: "min-w-0 flex-1 truncate",
 								children: n.name
-							}), /* @__PURE__ */ p(x, {
+							}), /* @__PURE__ */ p(b, {
 								checked: r,
 								disabled: o,
 								onCheckedChange: (e) => t(n.id, !!e),
@@ -207,7 +207,7 @@ function We({ selectedRoleIds: e, onRoleToggle: t, selectedProjectIds: n, onProj
 									children: e.status
 								})]
 							})]
-						}), /* @__PURE__ */ p(x, {
+						}), /* @__PURE__ */ p(b, {
 							checked: t,
 							disabled: o,
 							onCheckedChange: (t) => r(e.id, !!t),
@@ -220,7 +220,7 @@ function We({ selectedRoleIds: e, onRoleToggle: t, selectedProjectIds: n, onProj
 	});
 }
 function O() {
-	let { workspaceId: ve } = Ie(), { t: x } = Le(), C = Fe(), { basePath: w = "/workspaces", workspaceId: Pe } = e(), { withCurrentSearch: T } = n(), O = ve || Pe || "";
+	let { workspaceId: ve } = Ie(), { t: b } = Le(), C = Fe(), { basePath: w = "/workspaces", workspaceId: Pe } = e(), { withCurrentSearch: T } = n(), O = ve || Pe || "";
 	i("workspaces.invite", { workspaceId: O || void 0 });
 	let { canInviteMember: Ge, isLoading: Ke } = ae(), { data: qe, isLoading: Je, error: Ye } = t(O), { data: k = [], isLoading: Xe } = oe(O), { data: A, isLoading: Ze } = se({ archived: !1 }, { limit: 100 }, O), { data: Qe, isLoading: $e, isFetching: j, error: et, refetch: tt } = a(O, "PENDING", { limit: 50 }, { retry: !1 }), M = s(() => (A?.items ?? []).filter((e) => !e.archived), [A?.items]), [nt, rt] = c("single"), [N, it] = c(""), [P, at] = c([]), [F, ot] = c([]), [st, I] = c(null), [ct, lt] = c(null), [ut, L] = c(null), [dt, R] = c(null), [z, B] = c(null), [V, H] = c([]), [ft, pt] = c(null), [mt, U] = c(!1), [W, ht] = c(!1), gt = ue(null), [G, K] = c(null), { mutateAsync: _t, isPending: q } = o(O), { mutateAsync: vt, isPending: yt } = ee(), { mutate: bt, isPending: J } = ne(O), { mutate: xt, isPending: Y } = te(O), [St, X] = c(null), Z = Qe?.items ?? [], Ct = q || yt || W, wt = s(() => k.filter((e) => P.includes(e.id)).map((e) => e.name), [k, P]), Tt = s(() => M.filter((e) => F.includes(e.id)).map((e) => e.name), [M, F]), Q = s(() => V.filter((e) => e.errors.length === 0 && e.status.kind !== "invited"), [V]), $ = s(() => V.filter((e) => e.errors.length > 0), [V]);
 	if (!O) return /* @__PURE__ */ p("div", {
@@ -230,18 +230,18 @@ function O() {
 			children: [
 				/* @__PURE__ */ p("h1", {
 					className: "text-2xl font-bold",
-					children: r(x, "workspaceInvite.noWorkspaceTitle", "Select a workspace first")
+					children: r(b, "workspaceInvite.noWorkspaceTitle", "Select a workspace first")
 				}),
 				/* @__PURE__ */ p("p", {
 					className: "mt-2 text-text-secondary",
-					children: r(x, "workspaceInvite.noWorkspaceDescription", "Choose a current workspace from the header or open a workspace detail page before inviting members.")
+					children: r(b, "workspaceInvite.noWorkspaceDescription", "Choose a current workspace from the header or open a workspace detail page before inviting members.")
 				}),
 				/* @__PURE__ */ p("div", {
 					className: "mt-4",
 					children: /* @__PURE__ */ p(g, {
 						onClick: () => C(T(`${w}/list`)),
 						variant: "outline",
-						children: r(x, "workspaceInvite.backToWorkspaces", "Back to Workspaces")
+						children: r(b, "workspaceInvite.backToWorkspaces", "Back to Workspaces")
 					})
 				})
 			]
@@ -261,10 +261,10 @@ function O() {
 			className: "space-y-2 text-center",
 			children: [/* @__PURE__ */ p("h2", {
 				className: "text-lg font-semibold",
-				children: r(x, "workspaceInvite.accessDenied", "Access Denied")
+				children: r(b, "workspaceInvite.accessDenied", "Access Denied")
 			}), /* @__PURE__ */ p("p", {
 				className: "text-sm text-text-secondary",
-				children: r(x, "workspaceInvite.accessDeniedDescription", "You don't have permission to invite members into this workspace.")
+				children: r(b, "workspaceInvite.accessDeniedDescription", "You don't have permission to invite members into this workspace.")
 			})]
 		})
 	});
@@ -274,10 +274,10 @@ function O() {
 			variant: "ghost",
 			onClick: () => C(T(`${w}/list`)),
 			className: "gap-2",
-			children: [/* @__PURE__ */ p(de, { size: 18 }), r(x, "workspaceInvite.backToWorkspaces", "Back to Workspaces")]
+			children: [/* @__PURE__ */ p(de, { size: 18 }), r(b, "workspaceInvite.backToWorkspaces", "Back to Workspaces")]
 		}), /* @__PURE__ */ p("div", {
 			className: "rounded-xl border bg-bg-surface p-8 text-center text-status-error-text",
-			children: r(x, "workspaceInvite.workspaceLoadError", "Unable to load workspace invite details.")
+			children: r(b, "workspaceInvite.workspaceLoadError", "Unable to load workspace invite details.")
 		})]
 	});
 	let Et = (e, t) => {
@@ -391,7 +391,7 @@ function O() {
 						variant: "ghost",
 						onClick: () => C(T(`${w}/${O}`)),
 						className: "-ml-2 mb-2 gap-2",
-						children: [/* @__PURE__ */ p(de, { size: 18 }), r(x, "workspaceInvite.backToWorkspace", "Back to Workspace")]
+						children: [/* @__PURE__ */ p(de, { size: 18 }), r(b, "workspaceInvite.backToWorkspace", "Back to Workspace")]
 					}),
 					/* @__PURE__ */ m("div", {
 						className: "flex items-center gap-2",
@@ -400,7 +400,7 @@ function O() {
 							size: 24
 						}), /* @__PURE__ */ p("h1", {
 							className: "text-2xl font-bold sm:text-3xl",
-							children: r(x, "workspaceInvite.title", "Invite Members")
+							children: r(b, "workspaceInvite.title", "Invite Members")
 						})]
 					}),
 					/* @__PURE__ */ m("p", {
@@ -409,294 +409,293 @@ function O() {
 							qe.name,
 							" —",
 							" ",
-							r(x, "workspaceInvite.subtitle", "Invite people into this workspace and optionally grant project access.")
+							r(b, "workspaceInvite.subtitle", "Invite people into this workspace and optionally grant project access.")
 						]
 					})
 				] })
 			}),
-			/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(y, { children: /* @__PURE__ */ p(b, { children: r(x, "workspaceInvite.setupTitle", "Access to grant on acceptance") }) }), /* @__PURE__ */ p(v, { children: /* @__PURE__ */ p(We, {
-				selectedRoleIds: P,
-				onRoleToggle: Et,
-				selectedProjectIds: F,
-				onProjectToggle: Dt,
-				availableRoles: k,
-				availableProjects: M,
-				isLoadingRoles: Xe,
-				isLoadingProjects: Ze,
-				disabled: Ct
-			}) })] }),
-			/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(y, { children: /* @__PURE__ */ p(b, { children: "Selection summary" }) }), /* @__PURE__ */ m(v, {
-				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ m("div", {
-					className: "space-y-2 rounded-lg border p-4",
+			/* @__PURE__ */ m(x, {
+				treatment: "plain",
+				className: "border-border-seam",
+				children: [/* @__PURE__ */ p(v, { children: /* @__PURE__ */ p(y, { children: r(b, "workspaceInvite.setupTitle", "Access to grant on acceptance") }) }), /* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(We, {
+					selectedRoleIds: P,
+					onRoleToggle: Et,
+					selectedProjectIds: F,
+					onProjectToggle: Dt,
+					availableRoles: k,
+					availableProjects: M,
+					isLoadingRoles: Xe,
+					isLoadingProjects: Ze,
+					disabled: Ct
+				}) })]
+			}),
+			/* @__PURE__ */ m(x, {
+				treatment: "metric",
+				className: "border-border-seam",
+				children: [/* @__PURE__ */ p(v, { children: /* @__PURE__ */ p(y, { children: "Selection summary" }) }), /* @__PURE__ */ m(_, {
+					className: "grid gap-4 md:grid-cols-2",
 					children: [/* @__PURE__ */ m("div", {
-						className: "flex items-center justify-between gap-2",
-						children: [/* @__PURE__ */ p("p", {
-							className: "text-sm font-medium",
-							children: "Roles"
-						}), /* @__PURE__ */ p(h, {
-							variant: "secondary",
-							children: wt.length
+						className: "space-y-2 rounded-lg border border-border-seam bg-bg-surface p-4",
+						children: [/* @__PURE__ */ m("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ p("p", {
+								className: "text-sm font-medium",
+								children: "Roles"
+							}), /* @__PURE__ */ p(h, {
+								variant: "secondary",
+								className: "tabular-nums",
+								children: wt.length
+							})]
+						}), /* @__PURE__ */ p("p", {
+							className: "text-sm text-text-muted",
+							children: He(wt, "No roles selected")
 						})]
-					}), /* @__PURE__ */ p("p", {
-						className: "text-sm text-text-secondary",
-						children: He(wt, "No roles selected")
-					})]
-				}), /* @__PURE__ */ m("div", {
-					className: "space-y-2 rounded-lg border p-4",
-					children: [/* @__PURE__ */ m("div", {
-						className: "flex items-center justify-between gap-2",
-						children: [/* @__PURE__ */ p("p", {
-							className: "text-sm font-medium",
-							children: "Projects"
-						}), /* @__PURE__ */ p(h, {
-							variant: "secondary",
-							children: Tt.length
+					}), /* @__PURE__ */ m("div", {
+						className: "space-y-2 rounded-lg border border-border-seam bg-bg-surface p-4",
+						children: [/* @__PURE__ */ m("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ p("p", {
+								className: "text-sm font-medium",
+								children: "Projects"
+							}), /* @__PURE__ */ p(h, {
+								variant: "secondary",
+								className: "tabular-nums",
+								children: Tt.length
+							})]
+						}), /* @__PURE__ */ p("p", {
+							className: "text-sm text-text-muted",
+							children: He(Tt, "No project access will be granted automatically")
 						})]
-					}), /* @__PURE__ */ p("p", {
-						className: "text-sm text-text-secondary",
-						children: He(Tt, "No project access will be granted automatically")
 					})]
 				})]
-			})] }),
-			/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(y, { children: /* @__PURE__ */ p(b, { children: r(x, "workspaceInvite.sendTitle", "Send invitations") }) }), /* @__PURE__ */ p(v, { children: /* @__PURE__ */ m(Ae, {
-				value: nt,
-				onValueChange: (e) => rt(e),
-				className: "space-y-5",
-				children: [
-					/* @__PURE__ */ m(Me, { children: [/* @__PURE__ */ p(Ne, {
-						value: "single",
-						children: r(x, "workspaceInvite.modeSingle", "Single")
-					}), /* @__PURE__ */ p(Ne, {
-						value: "bulk",
-						children: r(x, "workspaceInvite.modeBulk", "Bulk CSV")
-					})] }),
-					/* @__PURE__ */ m(je, {
-						value: "single",
-						className: "space-y-4",
-						children: [
-							st ? /* @__PURE__ */ m("div", {
-								className: "flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
-								children: [/* @__PURE__ */ p(l, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: st })]
-							}) : null,
-							ct ? /* @__PURE__ */ m("div", {
-								className: "flex items-center gap-2 rounded-md border border-green-500/20 bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400",
-								children: [/* @__PURE__ */ p(u, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: ct })]
-							}) : null,
-							/* @__PURE__ */ m("form", {
-								onSubmit: Ot,
-								className: "space-y-4",
-								children: [/* @__PURE__ */ m("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ p("label", {
-										htmlFor: "workspace-invite-email",
-										className: "text-sm font-medium",
-										children: r(x, "workspaceInvite.emailLabel", "Email Address")
-									}), /* @__PURE__ */ p(Oe, {
-										id: "workspace-invite-email",
-										type: "email",
-										placeholder: "member@example.com",
-										value: N,
-										onChange: (e) => it(e.target.value),
-										disabled: q
+			}),
+			/* @__PURE__ */ m(x, {
+				treatment: "plain",
+				className: "border-border-seam",
+				children: [/* @__PURE__ */ p(v, { children: /* @__PURE__ */ p(y, { children: r(b, "workspaceInvite.sendTitle", "Send invitations") }) }), /* @__PURE__ */ p(_, { children: /* @__PURE__ */ m(Ae, {
+					value: nt,
+					onValueChange: (e) => rt(e),
+					className: "space-y-5",
+					children: [
+						/* @__PURE__ */ m(Me, { children: [/* @__PURE__ */ p(Ne, {
+							value: "single",
+							children: r(b, "workspaceInvite.modeSingle", "Single")
+						}), /* @__PURE__ */ p(Ne, {
+							value: "bulk",
+							children: r(b, "workspaceInvite.modeBulk", "Bulk CSV")
+						})] }),
+						/* @__PURE__ */ m(je, {
+							value: "single",
+							className: "space-y-4",
+							children: [
+								st ? /* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
+									children: [/* @__PURE__ */ p(l, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: st })]
+								}) : null,
+								ct ? /* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2 rounded-md border border-green-500/20 bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400",
+									children: [/* @__PURE__ */ p(u, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: ct })]
+								}) : null,
+								/* @__PURE__ */ m("form", {
+									onSubmit: Ot,
+									className: "space-y-4",
+									children: [/* @__PURE__ */ m("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ p("label", {
+											htmlFor: "workspace-invite-email",
+											className: "text-sm font-medium",
+											children: r(b, "workspaceInvite.emailLabel", "Email Address")
+										}), /* @__PURE__ */ p(Oe, {
+											id: "workspace-invite-email",
+											type: "email",
+											placeholder: "member@example.com",
+											value: N,
+											onChange: (e) => it(e.target.value),
+											disabled: q
+										})]
+									}), /* @__PURE__ */ p("div", {
+										className: "flex justify-end",
+										children: /* @__PURE__ */ m(g, {
+											type: "submit",
+											disabled: q,
+											className: "gap-2",
+											children: [q ? /* @__PURE__ */ p(d, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(he, { className: "size-4" }), r(b, "workspaceInvite.sendSingleButton", "Send Invitation")]
+										})
 									})]
-								}), /* @__PURE__ */ p("div", {
-									className: "flex justify-end",
-									children: /* @__PURE__ */ m(g, {
-										type: "submit",
-										disabled: q,
+								})
+							]
+						}),
+						/* @__PURE__ */ m(je, {
+							value: "bulk",
+							className: "space-y-5",
+							children: [
+								ut ? /* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
+									children: [/* @__PURE__ */ p(l, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: ut })]
+								}) : null,
+								dt ? /* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2 rounded-md border border-green-500/20 bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400",
+									children: [/* @__PURE__ */ p(u, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: dt })]
+								}) : null,
+								/* @__PURE__ */ m("div", {
+									className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+									children: [/* @__PURE__ */ m("div", {
+										className: "space-y-1",
+										children: [
+											/* @__PURE__ */ p("p", {
+												className: "text-sm text-text-secondary",
+												children: r(b, "workspaceInvite.bulkDescription", "Upload a CSV with one email column. All valid rows will receive the currently selected roles and projects.")
+											}),
+											/* @__PURE__ */ m("div", {
+												className: "rounded-md border bg-bg-sunken/30 px-3 py-2 text-xs text-text-secondary",
+												children: [/* @__PURE__ */ p("p", {
+													className: "font-medium text-text-primary",
+													children: "Sample format"
+												}), /* @__PURE__ */ m("pre", {
+													className: "mt-1 whitespace-pre-wrap",
+													children: [
+														"email",
+														"\n",
+														"alice@example.com",
+														"\n",
+														"bob@example.com"
+													]
+												})]
+											}),
+											(A?.total ?? 0) > M.length ? /* @__PURE__ */ m("p", {
+												className: "text-xs text-text-secondary",
+												children: [
+													"Showing the first ",
+													M.length,
+													" active projects. Narrow the workspace project list if you need to invite into more."
+												]
+											}) : null
+										]
+									}), /* @__PURE__ */ m(g, {
+										type: "button",
+										variant: "outline",
+										onClick: ce,
 										className: "gap-2",
-										children: [q ? /* @__PURE__ */ p(d, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(he, { className: "size-4" }), r(x, "workspaceInvite.sendSingleButton", "Send Invitation")]
-									})
-								})]
-							})
-						]
-					}),
-					/* @__PURE__ */ m(je, {
-						value: "bulk",
-						className: "space-y-5",
-						children: [
-							ut ? /* @__PURE__ */ m("div", {
-								className: "flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
-								children: [/* @__PURE__ */ p(l, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: ut })]
-							}) : null,
-							dt ? /* @__PURE__ */ m("div", {
-								className: "flex items-center gap-2 rounded-md border border-green-500/20 bg-green-500/10 p-3 text-sm text-green-700 dark:text-green-400",
-								children: [/* @__PURE__ */ p(u, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: dt })]
-							}) : null,
-							/* @__PURE__ */ m("div", {
-								className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-								children: [/* @__PURE__ */ m("div", {
-									className: "space-y-1",
+										children: [/* @__PURE__ */ p(fe, { size: 16 }), r(b, "workspaceInvite.downloadTemplate", "Download template")]
+									})]
+								}),
+								/* @__PURE__ */ m("div", {
+									onDragOver: (e) => {
+										e.preventDefault(), U(!0);
+									},
+									onDragLeave: () => U(!1),
+									onDrop: (e) => {
+										e.preventDefault(), U(!1);
+										let t = e.dataTransfer.files?.[0];
+										t ? kt(t) : L("Please upload a .csv file.");
+									},
+									className: `flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 transition-colors ${mt ? "border-primary bg-action-primary-bg/5" : "border-border-subtle bg-bg-surface"}`,
 									children: [
-										/* @__PURE__ */ p("p", {
-											className: "text-sm text-text-secondary",
-											children: r(x, "workspaceInvite.bulkDescription", "Upload a CSV with one email column. All valid rows will receive the currently selected roles and projects.")
+										/* @__PURE__ */ p(ge, {
+											size: 28,
+											className: "text-text-secondary"
 										}),
 										/* @__PURE__ */ m("div", {
-											className: "rounded-md border bg-bg-sunken/30 px-3 py-2 text-xs text-text-secondary",
+											className: "text-center",
 											children: [/* @__PURE__ */ p("p", {
-												className: "font-medium text-text-primary",
-												children: "Sample format"
-											}), /* @__PURE__ */ m("pre", {
-												className: "mt-1 whitespace-pre-wrap",
-												children: [
-													"email",
-													"\n",
-													"alice@example.com",
-													"\n",
-													"bob@example.com"
-												]
+												className: "text-sm font-medium",
+												children: ft || "Drop a CSV file here or click to browse"
+											}), /* @__PURE__ */ p("p", {
+												className: "mt-1 text-xs text-text-secondary",
+												children: "CSV files only. Required column: email."
 											})]
 										}),
-										(A?.total ?? 0) > M.length ? /* @__PURE__ */ m("p", {
-											className: "text-xs text-text-secondary",
-											children: [
-												"Showing the first ",
-												M.length,
-												" active projects. Narrow the workspace project list if you need to invite into more."
-											]
-										}) : null
+										/* @__PURE__ */ p("input", {
+											ref: gt,
+											type: "file",
+											accept: ".csv,text/csv",
+											onChange: (e) => {
+												let t = e.target.files?.[0];
+												t && kt(t), e.target.value = "";
+											},
+											className: "hidden",
+											"aria-label": "Choose CSV file"
+										}),
+										/* @__PURE__ */ p(g, {
+											type: "button",
+											onClick: () => gt.current?.click(),
+											children: r(b, "workspaceInvite.chooseFile", "Choose file")
+										})
 									]
-								}), /* @__PURE__ */ m(g, {
-									type: "button",
-									variant: "outline",
-									onClick: ce,
-									className: "gap-2",
-									children: [/* @__PURE__ */ p(fe, { size: 16 }), r(x, "workspaceInvite.downloadTemplate", "Download template")]
-								})]
-							}),
-							/* @__PURE__ */ m("div", {
-								onDragOver: (e) => {
-									e.preventDefault(), U(!0);
-								},
-								onDragLeave: () => U(!1),
-								onDrop: (e) => {
-									e.preventDefault(), U(!1);
-									let t = e.dataTransfer.files?.[0];
-									t ? kt(t) : L("Please upload a .csv file.");
-								},
-								className: `flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-8 transition-colors ${mt ? "border-primary bg-action-primary-bg/5" : "border-border-subtle bg-bg-surface"}`,
-								children: [
-									/* @__PURE__ */ p(ge, {
-										size: 28,
-										className: "text-text-secondary"
-									}),
+								}),
+								V.length > 0 ? /* @__PURE__ */ m(ye, { children: [
 									/* @__PURE__ */ m("div", {
-										className: "text-center",
-										children: [/* @__PURE__ */ p("p", {
-											className: "text-sm font-medium",
-											children: ft || "Drop a CSV file here or click to browse"
-										}), /* @__PURE__ */ p("p", {
-											className: "mt-1 text-xs text-text-secondary",
-											children: "CSV files only. Required column: email."
-										})]
-									}),
-									/* @__PURE__ */ p("input", {
-										ref: gt,
-										type: "file",
-										accept: ".csv,text/csv",
-										onChange: (e) => {
-											let t = e.target.files?.[0];
-											t && kt(t), e.target.value = "";
-										},
-										className: "hidden",
-										"aria-label": "Choose CSV file"
+										className: "flex flex-wrap gap-4 text-xs text-text-secondary",
+										children: [
+											/* @__PURE__ */ m("span", { children: ["Total rows: ", V.length] }),
+											/* @__PURE__ */ m("span", { children: ["Ready: ", Q.length] }),
+											/* @__PURE__ */ m("span", { children: ["With errors: ", $.length] }),
+											$.length > 0 ? /* @__PURE__ */ p(h, {
+												variant: "destructive",
+												children: "Invalid rows will be skipped"
+											}) : null
+										]
 									}),
-									/* @__PURE__ */ p(g, {
-										type: "button",
-										onClick: () => gt.current?.click(),
-										children: r(x, "workspaceInvite.chooseFile", "Choose file")
+									$.length > 0 ? /* @__PURE__ */ m("div", {
+										className: "rounded-md border border-status-error-border/20 bg-status-error-bg/10 px-3 py-2 text-sm text-status-error-text",
+										children: [
+											$.length,
+											" row",
+											$.length === 1 ? "" : "s",
+											" need attention. Only valid rows can be invited."
+										]
+									}) : null,
+									/* @__PURE__ */ p("div", {
+										className: "overflow-hidden rounded-xl border",
+										children: /* @__PURE__ */ p(ke, {
+											columns: ze,
+											data: V,
+											rowKey: (e) => `${e.rowNumber}-${e.email}`
+										})
 									})
-								]
-							}),
-							V.length > 0 ? /* @__PURE__ */ m(ye, { children: [
-								/* @__PURE__ */ m("div", {
-									className: "flex flex-wrap gap-4 text-xs text-text-secondary",
-									children: [
-										/* @__PURE__ */ m("span", { children: ["Total rows: ", V.length] }),
-										/* @__PURE__ */ m("span", { children: ["Ready: ", Q.length] }),
-										/* @__PURE__ */ m("span", { children: ["With errors: ", $.length] }),
-										$.length > 0 ? /* @__PURE__ */ p(h, {
-											variant: "destructive",
-											children: "Invalid rows will be skipped"
-										}) : null
-									]
+								] }) : /* @__PURE__ */ p("div", {
+									className: "rounded-xl border border-dashed p-6 text-center text-sm text-text-secondary",
+									children: "Upload a CSV to preview invite rows here before sending."
 								}),
-								$.length > 0 ? /* @__PURE__ */ m("div", {
-									className: "rounded-md border border-status-error-border/20 bg-status-error-bg/10 px-3 py-2 text-sm text-status-error-text",
-									children: [
-										$.length,
-										" row",
-										$.length === 1 ? "" : "s",
-										" need attention. Only valid rows can be invited."
-									]
-								}) : null,
 								/* @__PURE__ */ p("div", {
-									className: "overflow-hidden rounded-xl border",
-									children: /* @__PURE__ */ p(ke, {
-										columns: ze,
-										data: V,
-										rowKey: (e) => `${e.rowNumber}-${e.email}`
+									className: "flex justify-end",
+									children: /* @__PURE__ */ m(g, {
+										type: "button",
+										onClick: At,
+										disabled: Q.length === 0 || yt || W,
+										className: "gap-2",
+										children: [yt || W ? /* @__PURE__ */ p(d, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(he, { className: "size-4" }), r(b, "workspaceInvite.sendBulkButton", "Send Bulk Invites")]
 									})
 								})
-							] }) : /* @__PURE__ */ p("div", {
-								className: "rounded-xl border border-dashed p-6 text-center text-sm text-text-secondary",
-								children: "Upload a CSV to preview invite rows here before sending."
-							}),
-							/* @__PURE__ */ p("div", {
-								className: "flex justify-end",
-								children: /* @__PURE__ */ m(g, {
-									type: "button",
-									onClick: At,
-									disabled: Q.length === 0 || yt || W,
-									className: "gap-2",
-									children: [yt || W ? /* @__PURE__ */ p(d, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(he, { className: "size-4" }), r(x, "workspaceInvite.sendBulkButton", "Send Bulk Invites")]
-								})
-							})
-						]
-					})
-				]
-			}) })] }),
-			/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(y, { children: /* @__PURE__ */ m(b, {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ p(pe, { className: "size-5 text-primary" }),
-					r(x, "workspaceInvite.pendingTitle", "Pending Invitations"),
-					/* @__PURE__ */ p(h, {
-						variant: "secondary",
-						children: Z.length
-					})
-				]
-			}) }), /* @__PURE__ */ m(v, { children: [z ? /* @__PURE__ */ m("div", {
-				className: `mb-4 flex items-center gap-2 rounded-md border p-3 text-sm ${z.tone === "success" ? "border-green-500/20 bg-green-500/10 text-green-700 dark:text-green-400" : "border-status-error-border/20 bg-status-error-bg/10 text-status-error-text"}`,
-				children: [z.tone === "success" ? /* @__PURE__ */ p(u, { className: "size-4 shrink-0" }) : /* @__PURE__ */ p(l, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: z.message })]
-			}) : null, $e ? /* @__PURE__ */ m("div", {
-				className: "space-y-3",
-				children: [/* @__PURE__ */ p(S, { className: "h-20 w-full" }), /* @__PURE__ */ p(S, { className: "h-20 w-full" })]
-			}) : et && Z.length === 0 ? /* @__PURE__ */ m("div", {
-				role: "alert",
-				className: "space-y-3 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
-				children: [/* @__PURE__ */ p("p", { children: r(x, "workspaceInvite.pendingLoadFailed", "Failed to load pending invitations for this workspace.") }), /* @__PURE__ */ p(g, {
-					type: "button",
-					variant: "outline",
-					size: "sm",
-					className: "w-fit",
-					disabled: j,
-					onClick: () => {
-						tt();
-					},
-					children: j ? r(x, "workspaceInvite.retrying", "Retrying…") : r(x, "workspaceInvite.tryAgain", "Try again")
-				})]
-			}) : Z.length === 0 ? /* @__PURE__ */ p("p", {
-				className: "text-sm text-text-secondary",
-				children: r(x, "workspaceInvite.pendingEmpty", "No pending invitations for this workspace.")
-			}) : /* @__PURE__ */ m("div", {
-				className: "space-y-3",
-				children: [et ? /* @__PURE__ */ m("div", {
+							]
+						})
+					]
+				}) })]
+			}),
+			/* @__PURE__ */ m(x, {
+				treatment: "plain",
+				className: "border-border-seam",
+				children: [/* @__PURE__ */ p(v, { children: /* @__PURE__ */ m(y, {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ p(pe, { className: "size-5 text-primary" }),
+						r(b, "workspaceInvite.pendingTitle", "Pending Invitations"),
+						/* @__PURE__ */ p(h, {
+							variant: "secondary",
+							className: "tabular-nums",
+							children: Z.length
+						})
+					]
+				}) }), /* @__PURE__ */ m(_, { children: [z ? /* @__PURE__ */ m("div", {
+					className: `mb-4 flex items-center gap-2 rounded-md border p-3 text-sm ${z.tone === "success" ? "border-green-500/20 bg-green-500/10 text-green-700 dark:text-green-400" : "border-status-error-border/20 bg-status-error-bg/10 text-status-error-text"}`,
+					children: [z.tone === "success" ? /* @__PURE__ */ p(u, { className: "size-4 shrink-0" }) : /* @__PURE__ */ p(l, { className: "size-4 shrink-0" }), /* @__PURE__ */ p("span", { children: z.message })]
+				}) : null, $e ? /* @__PURE__ */ m("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ p(S, { className: "h-20 w-full" }), /* @__PURE__ */ p(S, { className: "h-20 w-full" })]
+				}) : et && Z.length === 0 ? /* @__PURE__ */ m("div", {
 					role: "alert",
-					className: "flex flex-wrap items-center justify-between gap-3 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
-					children: [/* @__PURE__ */ p("span", { children: r(x, "workspaceInvite.pendingStaleWarning", "Pending invitations may be outdated. Try again to refresh this list.") }), /* @__PURE__ */ p(g, {
+					className: "space-y-3 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
+					children: [/* @__PURE__ */ p("p", { children: r(b, "workspaceInvite.pendingLoadFailed", "Failed to load pending invitations for this workspace.") }), /* @__PURE__ */ p(g, {
 						type: "button",
 						variant: "outline",
 						size: "sm",
@@ -705,86 +704,106 @@ function O() {
 						onClick: () => {
 							tt();
 						},
-						children: j ? r(x, "workspaceInvite.retrying", "Retrying…") : r(x, "workspaceInvite.tryAgain", "Try again")
+						children: j ? r(b, "workspaceInvite.retrying", "Retrying…") : r(b, "workspaceInvite.tryAgain", "Try again")
 					})]
-				}) : null, Z.map((e) => {
-					let t = ie(e), n = re(e), r = St === e.id && (J || Y);
-					return /* @__PURE__ */ p("div", {
-						className: "rounded-lg border p-4",
-						children: /* @__PURE__ */ m("div", {
-							className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between",
-							children: [/* @__PURE__ */ m("div", {
-								className: "space-y-3",
-								children: [
-									/* @__PURE__ */ m("div", {
-										className: "flex flex-wrap items-center gap-2",
-										children: [/* @__PURE__ */ p("p", {
-											className: "font-semibold",
-											children: e.email
-										}), /* @__PURE__ */ p(h, {
-											variant: "outline",
-											children: e.status
-										})]
-									}),
-									/* @__PURE__ */ m("div", {
-										className: "grid gap-3 text-sm text-text-secondary sm:grid-cols-2",
-										children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
-											className: "font-medium text-text-primary",
-											children: "Received"
-										}), /* @__PURE__ */ p("p", { children: Ve(e.createdAt) ?? "—" })] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
-											className: "font-medium text-text-primary",
-											children: "Expires"
-										}), /* @__PURE__ */ p("p", { children: Ve(e.expiresAt) ?? "—" })] })]
-									}),
-									/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
-										className: "mb-2 text-sm font-medium text-text-primary",
-										children: "Roles"
-									}), /* @__PURE__ */ p("div", {
-										className: "flex flex-wrap gap-2",
-										children: t.length > 0 ? t.map((t, n) => /* @__PURE__ */ p(h, {
-											variant: "outline",
-											children: t
-										}, `${e.id}-${e.roleIds[n] ?? t}`)) : /* @__PURE__ */ p("span", {
-											className: "text-sm text-text-secondary",
-											children: "No roles selected"
-										})
-									})] }),
-									/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
-										className: "mb-2 text-sm font-medium text-text-primary",
-										children: "Projects"
-									}), /* @__PURE__ */ p("div", {
-										className: "flex flex-wrap gap-2",
-										children: n.length > 0 ? n.map((t, n) => /* @__PURE__ */ p(h, {
-											variant: "secondary",
-											children: t
-										}, `${e.id}-project-${t}-${n}`)) : /* @__PURE__ */ p("span", {
-											className: "text-sm text-text-secondary",
-											children: "No project access will be granted automatically"
-										})
-									})] })
-								]
-							}), /* @__PURE__ */ m("div", {
-								className: "flex gap-2",
-								children: [/* @__PURE__ */ m(g, {
-									type: "button",
-									variant: "outline",
-									disabled: J || Y,
-									onClick: () => jt(e),
-									className: "gap-2",
-									children: [r && J ? /* @__PURE__ */ p(me, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(me, { className: "size-4" }), "Resend"]
-								}), /* @__PURE__ */ m(g, {
-									type: "button",
-									variant: "outline",
-									disabled: J || Y,
-									onClick: () => K(e),
-									className: "gap-2",
-									children: [r && Y ? /* @__PURE__ */ p(d, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(f, { className: "size-4" }), "Cancel"]
+				}) : Z.length === 0 ? /* @__PURE__ */ p("p", {
+					className: "text-sm text-text-secondary",
+					children: r(b, "workspaceInvite.pendingEmpty", "No pending invitations for this workspace.")
+				}) : /* @__PURE__ */ m("div", {
+					className: "space-y-3",
+					children: [et ? /* @__PURE__ */ m("div", {
+						role: "alert",
+						className: "flex flex-wrap items-center justify-between gap-3 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
+						children: [/* @__PURE__ */ p("span", { children: r(b, "workspaceInvite.pendingStaleWarning", "Pending invitations may be outdated. Try again to refresh this list.") }), /* @__PURE__ */ p(g, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							className: "w-fit",
+							disabled: j,
+							onClick: () => {
+								tt();
+							},
+							children: j ? r(b, "workspaceInvite.retrying", "Retrying…") : r(b, "workspaceInvite.tryAgain", "Try again")
+						})]
+					}) : null, Z.map((e) => {
+						let t = ie(e), n = re(e), r = St === e.id && (J || Y);
+						return /* @__PURE__ */ p("div", {
+							className: "rounded-lg border p-4",
+							children: /* @__PURE__ */ m("div", {
+								className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between",
+								children: [/* @__PURE__ */ m("div", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ m("div", {
+											className: "flex flex-wrap items-center gap-2",
+											children: [/* @__PURE__ */ p("p", {
+												className: "font-semibold",
+												children: e.email
+											}), /* @__PURE__ */ p(h, {
+												variant: "outline",
+												children: e.status
+											})]
+										}),
+										/* @__PURE__ */ m("div", {
+											className: "grid gap-3 text-sm text-text-secondary sm:grid-cols-2",
+											children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+												className: "font-medium text-text-primary",
+												children: "Received"
+											}), /* @__PURE__ */ p("p", { children: Ve(e.createdAt) ?? "—" })] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+												className: "font-medium text-text-primary",
+												children: "Expires"
+											}), /* @__PURE__ */ p("p", { children: Ve(e.expiresAt) ?? "—" })] })]
+										}),
+										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+											className: "mb-2 text-sm font-medium text-text-primary",
+											children: "Roles"
+										}), /* @__PURE__ */ p("div", {
+											className: "flex flex-wrap gap-2",
+											children: t.length > 0 ? t.map((t, n) => /* @__PURE__ */ p(h, {
+												variant: "outline",
+												children: t
+											}, `${e.id}-${e.roleIds[n] ?? t}`)) : /* @__PURE__ */ p("span", {
+												className: "text-sm text-text-secondary",
+												children: "No roles selected"
+											})
+										})] }),
+										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+											className: "mb-2 text-sm font-medium text-text-primary",
+											children: "Projects"
+										}), /* @__PURE__ */ p("div", {
+											className: "flex flex-wrap gap-2",
+											children: n.length > 0 ? n.map((t, n) => /* @__PURE__ */ p(h, {
+												variant: "secondary",
+												children: t
+											}, `${e.id}-project-${t}-${n}`)) : /* @__PURE__ */ p("span", {
+												className: "text-sm text-text-secondary",
+												children: "No project access will be granted automatically"
+											})
+										})] })
+									]
+								}), /* @__PURE__ */ m("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ m(g, {
+										type: "button",
+										variant: "outline",
+										disabled: J || Y,
+										onClick: () => jt(e),
+										className: "gap-2",
+										children: [r && J ? /* @__PURE__ */ p(me, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(me, { className: "size-4" }), "Resend"]
+									}), /* @__PURE__ */ m(g, {
+										type: "button",
+										variant: "outline",
+										disabled: J || Y,
+										onClick: () => K(e),
+										className: "gap-2",
+										children: [r && Y ? /* @__PURE__ */ p(d, { className: "size-4 animate-spin" }) : /* @__PURE__ */ p(f, { className: "size-4" }), "Cancel"]
+									})]
 								})]
-							})]
-						})
-					}, e.id);
-				})]
-			})] })] })
+							})
+						}, e.id);
+					})]
+				})] })]
+			})
 		]
 	})] });
 }