@invect/user-auth 0.0.1

package/dist/frontend/index.mjs

@@ -0,0 +1,1250 @@
+import { a as formatAuthRoleLabel, o as isAuthAssignableRole, r as AUTH_DEFAULT_ROLE } from "../roles-CZuKFEpJ.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronsUpDown, LogOut, Mail, Search, Shield, Trash2, User, UserPlus, Users } from "lucide-react";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, PageLayout, useApiClient } from "@invect/frontend";
+import { Link, useLocation } from "react-router";
+//#region src/frontend/providers/AuthProvider.tsx
+/**
+* AuthProvider — Context provider for authentication state.
+*
+* Fetches the current session from the better-auth proxy endpoints
+* and caches it via React Query. Provides sign-in, sign-up, and
+* sign-out actions to child components.
+*/
+const AuthContext = createContext(null);
+function AuthProvider({ children, baseUrl }) {
+	const queryClient = useQueryClient();
+	const authApiBase = `${baseUrl}/plugins/auth/api/auth`;
+	const { data: session, isLoading } = useQuery({
+		queryKey: ["auth", "session"],
+		queryFn: async () => {
+			const response = await fetch(`${authApiBase}/get-session`, { credentials: "include" });
+			if (!response.ok) return {
+				user: null,
+				isAuthenticated: false
+			};
+			const data = await response.json();
+			if (!data?.user) return {
+				user: null,
+				isAuthenticated: false
+			};
+			return {
+				user: {
+					id: data.user.id,
+					name: data.user.name ?? void 0,
+					email: data.user.email ?? void 0,
+					image: data.user.image ?? void 0,
+					role: data.user.role ?? void 0
+				},
+				isAuthenticated: true
+			};
+		},
+		staleTime: 300 * 1e3,
+		retry: 1
+	});
+	const signInMutation = useMutation({
+		mutationFn: async (credentials) => {
+			const response = await fetch(`${authApiBase}/sign-in/email`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(credentials)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({ message: "Sign in failed" }));
+				throw new Error(err.message || `Sign in failed (${response.status})`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["auth", "session"] });
+		}
+	});
+	const signUpMutation = useMutation({
+		mutationFn: async (credentials) => {
+			const response = await fetch(`${authApiBase}/sign-up/email`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(credentials)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({ message: "Sign up failed" }));
+				throw new Error(err.message || `Sign up failed (${response.status})`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["auth", "session"] });
+		}
+	});
+	const signOutMutation = useMutation({
+		mutationFn: async () => {
+			const response = await fetch(`${authApiBase}/sign-out`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({})
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(async () => ({ message: await response.text().catch(() => "") || "Sign out failed" }));
+				throw new Error(err.message || `Sign out failed (${response.status})`);
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["auth", "session"] });
+		}
+	});
+	const signIn = useCallback(async (credentials) => {
+		await signInMutation.mutateAsync(credentials);
+	}, [signInMutation]);
+	const signUp = useCallback(async (credentials) => {
+		await signUpMutation.mutateAsync(credentials);
+	}, [signUpMutation]);
+	const signOut = useCallback(async () => {
+		await signOutMutation.mutateAsync();
+	}, [signOutMutation]);
+	const error = signInMutation.error?.message ?? signUpMutation.error?.message ?? signOutMutation.error?.message ?? null;
+	const value = useMemo(() => ({
+		user: session?.isAuthenticated ? session.user : null,
+		isAuthenticated: session?.isAuthenticated ?? false,
+		isLoading,
+		signIn,
+		signUp,
+		signOut,
+		isSigningIn: signInMutation.isPending,
+		isSigningUp: signUpMutation.isPending,
+		error
+	}), [
+		session,
+		isLoading,
+		signIn,
+		signUp,
+		signOut,
+		signInMutation.isPending,
+		signUpMutation.isPending,
+		error
+	]);
+	return /* @__PURE__ */ jsx(AuthContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Access auth context — current user, sign-in/sign-up/sign-out actions.
+*
+* Must be used within an `<AuthProvider>`.
+* Returns a safe fallback (unauthenticated) if provider is missing.
+*/
+function useAuth() {
+	const ctx = useContext(AuthContext);
+	if (!ctx) return {
+		user: null,
+		isAuthenticated: false,
+		isLoading: false,
+		signIn: async () => {
+			throw new Error("AuthProvider not found");
+		},
+		signUp: async () => {
+			throw new Error("AuthProvider not found");
+		},
+		signOut: async () => {
+			throw new Error("AuthProvider not found");
+		},
+		isSigningIn: false,
+		isSigningUp: false,
+		error: null
+	};
+	return ctx;
+}
+//#endregion
+//#region src/frontend/components/SignInForm.tsx
+/**
+* SignInForm — Email/password sign-in form component.
+*
+* Uses the AuthProvider's signIn action. Styled to match the Invect
+* design system with grouped fields, clean labels, and themed inputs.
+*/
+function SignInForm({ onSuccess, className }) {
+	const { signIn, isSigningIn, error } = useAuth();
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [localError, setLocalError] = useState(null);
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setLocalError(null);
+		if (!email.trim() || !password.trim()) {
+			setLocalError("Email and password are required");
+			return;
+		}
+		try {
+			await signIn({
+				email,
+				password
+			});
+			onSuccess?.();
+		} catch (err) {
+			setLocalError(err instanceof Error ? err.message : "Sign in failed");
+		}
+	};
+	const displayError = localError ?? error;
+	return /* @__PURE__ */ jsx("form", {
+		onSubmit: handleSubmit,
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-6",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "auth-signin-email",
+						className: "text-sm font-medium leading-none",
+						children: "Email"
+					}), /* @__PURE__ */ jsx("input", {
+						id: "auth-signin-email",
+						type: "email",
+						value: email,
+						onChange: (e) => setEmail(e.target.value),
+						placeholder: "you@example.com",
+						autoComplete: "email",
+						required: true,
+						className: "flex h-9 w-full rounded-md border border-imp-border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-imp-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:cursor-not-allowed disabled:opacity-50"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: "auth-signin-password",
+						className: "text-sm font-medium leading-none",
+						children: "Password"
+					}), /* @__PURE__ */ jsx("input", {
+						id: "auth-signin-password",
+						type: "password",
+						value: password,
+						onChange: (e) => setPassword(e.target.value),
+						placeholder: "••••••••",
+						autoComplete: "current-password",
+						required: true,
+						className: "flex h-9 w-full rounded-md border border-imp-border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-imp-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:cursor-not-allowed disabled:opacity-50"
+					})]
+				}),
+				displayError && /* @__PURE__ */ jsx("div", {
+					className: "rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-400",
+					children: displayError
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: isSigningIn,
+					className: "inline-flex h-9 w-full items-center justify-center gap-2 whitespace-nowrap rounded-md bg-imp-foreground px-4 py-2 text-sm font-medium text-imp-background shadow transition-colors hover:bg-imp-foreground/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-imp-ring disabled:pointer-events-none disabled:opacity-50",
+					children: isSigningIn ? "Signing in…" : "Login"
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/frontend/components/SignInPage.tsx
+/**
+* SignInPage — Full-page sign-in component with layout.
+*
+* Renders the SignInForm centered on the page with a logo, title,
+* and grouped fields matching the Invect design system.
+* Sign-up is not offered — new users are created by admins.
+*/
+function SignInPage({ onSuccess, onNavigateToSignUp, title = "Welcome back", subtitle = "Sign in to your account to continue" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-imp-background p-4 text-imp-foreground",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full max-w-sm flex-col gap-6",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-2 text-center",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center",
+							children: /* @__PURE__ */ jsx(ImpLogo, { className: "h-10 w-auto" })
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "text-xl font-bold",
+							children: title
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-imp-muted-foreground",
+							children: subtitle
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(SignInForm, { onSuccess }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative text-center text-sm",
+					children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-1/2 border-t border-imp-border" }), /* @__PURE__ */ jsx("span", {
+						className: "relative bg-imp-background px-2 text-imp-muted-foreground",
+						children: "Admin-managed accounts"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: "px-6 text-center text-xs text-imp-muted-foreground",
+					children: [
+						"New accounts are created by your administrator.",
+						onNavigateToSignUp ? " Or " : " Contact your admin if you need access.",
+						onNavigateToSignUp && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onNavigateToSignUp,
+							className: "font-medium underline underline-offset-4 hover:text-imp-foreground",
+							children: "Sign up"
+						})
+					]
+				})
+			]
+		})
+	});
+}
+function ImpLogo({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 109 209",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "9",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M31.7735 104.5L4.50073 18.7859L54.5007 33.0716L31.7735 104.5Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M54.5007 4.5L104.501 18.7857L54.5007 33.0714L4.50073 18.7857L54.5007 4.5Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M4.50073 190.214L54.5007 33.0716L104.501 18.7859L4.50073 190.214Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M54.5007 204.5L81.4238 104.5L104.501 18.7859L4.50073 190.214L54.5007 204.5Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M54.5007 204.5L81.4238 104.5L104.501 190.214L54.5007 204.5Z" })
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/UserButton.tsx
+/**
+* UserButton — Compact user avatar + dropdown for the authenticated user.
+*
+* Shows the user's avatar/initials when signed in, with a dropdown
+* containing their name, email, and sign-out button.
+* Shows a "Sign In" button when not authenticated.
+*/
+function UserButton({ onSignInClick, className }) {
+	const { user, isAuthenticated, isLoading, signOut } = useAuth();
+	const [isOpen, setIsOpen] = useState(false);
+	const ref = useRef(null);
+	useEffect(() => {
+		const handleClick = (e) => {
+			if (ref.current && !ref.current.contains(e.target)) setIsOpen(false);
+		};
+		if (isOpen) document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, [isOpen]);
+	if (isLoading) return /* @__PURE__ */ jsx("div", { className: `h-8 w-8 animate-pulse rounded-full bg-imp-muted ${className ?? ""}` });
+	if (!isAuthenticated || !user) return /* @__PURE__ */ jsxs("button", {
+		onClick: onSignInClick,
+		className: `inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-imp-foreground hover:bg-imp-muted ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx(User, { className: "h-4 w-4" }), "Sign In"]
+	});
+	const initials = (user.name ?? user.email ?? user.id)[0]?.toUpperCase() ?? "?";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: `relative ${className ?? ""}`,
+		children: [/* @__PURE__ */ jsx("button", {
+			onClick: () => setIsOpen(!isOpen),
+			className: "flex h-8 w-8 items-center justify-center rounded-full bg-imp-primary/10 text-sm font-medium text-imp-primary hover:bg-imp-primary/20 transition-colors",
+			title: user.name ?? user.email ?? user.id,
+			children: user.image ? /* @__PURE__ */ jsx("img", {
+				src: user.image,
+				alt: user.name ?? "",
+				className: "h-8 w-8 rounded-full object-cover"
+			}) : initials
+		}), isOpen && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-0 top-full z-50 mt-2 w-56 rounded-lg border border-imp-border bg-imp-background shadow-lg",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "border-b border-imp-border px-4 py-3",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						children: user.name ?? "User"
+					}),
+					user.email && /* @__PURE__ */ jsx("p", {
+						className: "truncate text-xs text-imp-muted-foreground",
+						children: user.email
+					}),
+					user.role && /* @__PURE__ */ jsx("span", {
+						className: "mt-1 inline-block rounded-full bg-imp-muted px-2 py-0.5 text-xs font-medium",
+						children: formatAuthRoleLabel(user.role)
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "p-1",
+				children: /* @__PURE__ */ jsxs("button", {
+					onClick: async () => {
+						setIsOpen(false);
+						await signOut();
+					},
+					className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-imp-foreground hover:bg-imp-muted",
+					children: [/* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }), "Sign Out"]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/frontend/components/AuthGate.tsx
+function AuthGate({ children, fallback = null, loading = null }) {
+	const { isAuthenticated, isLoading } = useAuth();
+	if (isLoading) return /* @__PURE__ */ jsx(Fragment, { children: loading });
+	if (!isAuthenticated) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+//#endregion
+//#region src/frontend/components/UserManagement.tsx
+/**
+* UserManagement — Admin panel for managing users.
+*
+* Displays a list of users with the ability to:
+* - Create new users (email/password/role)
+* - Change user roles
+* - Delete users
+*
+* Only visible to admin users. Uses the auth plugin's
+* `/plugins/auth/users` endpoints.
+*/
+const ASSIGNABLE_ROLE_OPTIONS = [
+	{
+		value: AUTH_DEFAULT_ROLE,
+		label: "None",
+		description: "No global access; flow access can still be granted via RBAC."
+	},
+	{
+		value: "owner",
+		label: "Owner",
+		description: "Can edit and manage sharing for all flows."
+	},
+	{
+		value: "editor",
+		label: "Editor",
+		description: "Can inspect, run, and edit flows."
+	},
+	{
+		value: "operator",
+		label: "Operator",
+		description: "Can inspect and run flows."
+	},
+	{
+		value: "viewer",
+		label: "Viewer",
+		description: "Can inspect flows."
+	}
+];
+const ROLE_BADGE_CLASSES = "border-imp-border bg-imp-muted/50 text-imp-foreground";
+function getInitials(user) {
+	if (user.name) {
+		const parts = user.name.trim().split(/\s+/);
+		if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+		return parts[0][0].toUpperCase();
+	}
+	if (user.email) return user.email[0].toUpperCase();
+	return "?";
+}
+function formatDate(iso) {
+	try {
+		return new Intl.DateTimeFormat(void 0, { dateStyle: "medium" }).format(new Date(iso));
+	} catch {
+		return iso;
+	}
+}
+function SortHeader({ label, field, sortField, sortDir, onSort, align = "left" }) {
+	const active = sortField === field;
+	const Icon = active ? sortDir === "asc" ? ArrowUp : ArrowDown : ChevronsUpDown;
+	return /* @__PURE__ */ jsx("th", {
+		className: `px-4 py-2.5 text-${align} font-medium`,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => onSort(field),
+			className: `inline-flex items-center gap-1 rounded transition-colors hover:text-imp-foreground ${active ? "text-imp-foreground" : ""}`,
+			children: [label, /* @__PURE__ */ jsx(Icon, { className: "w-3 h-3 shrink-0" })]
+		})
+	});
+}
+function RoleDropdown({ value, userId, disabled, onChange }) {
+	const current = isAuthAssignableRole(value) ? value : AUTH_DEFAULT_ROLE;
+	const currentLabel = ASSIGNABLE_ROLE_OPTIONS.find((o) => o.value === current)?.label ?? current;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		disabled,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: `inline-flex w-28 items-center justify-between gap-1.5 rounded-full border px-2.5 py-0.5 text-sm font-medium transition-colors hover:bg-imp-muted disabled:cursor-not-allowed disabled:opacity-50 ${ROLE_BADGE_CLASSES}`,
+			children: [currentLabel, !disabled && /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3 shrink-0" })]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "start",
+		className: "w-56",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-xs",
+				children: "Set role"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			ASSIGNABLE_ROLE_OPTIONS.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onChange(userId, option.value),
+				className: `items-start gap-0 px-2 py-2 ${current === option.value ? "bg-accent text-accent-foreground" : ""}`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 text-left",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-sm font-medium",
+						children: option.label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "text-xs text-muted-foreground",
+						children: option.description
+					})]
+				})
+			}, option.value))
+		]
+	})] });
+}
+function UserManagement({ apiBaseUrl, className }) {
+	const { user, isAuthenticated } = useAuth();
+	const [users, setUsers] = useState([]);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [showCreateDialog, setShowCreateDialog] = useState(false);
+	const [pendingDeleteUser, setPendingDeleteUser] = useState(null);
+	const [hasFetched, setHasFetched] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [currentPage, setCurrentPage] = useState(1);
+	const [sortField, setSortField] = useState("name");
+	const [sortDir, setSortDir] = useState("asc");
+	const PAGE_SIZE = 10;
+	const handleSort = useCallback((field) => {
+		setSortField((prev) => {
+			if (prev === field) {
+				setSortDir((d) => d === "asc" ? "desc" : "asc");
+				return prev;
+			}
+			setSortDir("asc");
+			return field;
+		});
+		setCurrentPage(1);
+	}, []);
+	const filteredUsers = useMemo(() => {
+		let result = users;
+		if (searchQuery.trim()) {
+			const q = searchQuery.toLowerCase();
+			result = result.filter((u) => u.name?.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q) || u.role?.toLowerCase().includes(q));
+		}
+		return [...result].sort((a, b) => {
+			let aVal = "";
+			let bVal = "";
+			if (sortField === "name") {
+				aVal = (a.name || a.email || "").toLowerCase();
+				bVal = (b.name || b.email || "").toLowerCase();
+			} else if (sortField === "createdAt") {
+				aVal = a.createdAt ?? "";
+				bVal = b.createdAt ?? "";
+			} else if (sortField === "role") {
+				aVal = (a.role ?? "").toLowerCase();
+				bVal = (b.role ?? "").toLowerCase();
+			}
+			const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+			return sortDir === "asc" ? cmp : -cmp;
+		});
+	}, [
+		users,
+		searchQuery,
+		sortField,
+		sortDir
+	]);
+	const totalPages = Math.max(1, Math.ceil(filteredUsers.length / PAGE_SIZE));
+	const paginatedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+	const authApiBase = `${apiBaseUrl}/plugins/auth`;
+	const fetchUsers = useCallback(async () => {
+		setIsLoading(true);
+		setError(null);
+		try {
+			const res = await fetch(`${authApiBase}/users`, { credentials: "include" });
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({ error: "Failed to fetch users" }));
+				throw new Error(data.error || data.message || `HTTP ${res.status}`);
+			}
+			setUsers((await res.json()).users ?? []);
+			setHasFetched(true);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to fetch users");
+		} finally {
+			setIsLoading(false);
+		}
+	}, [authApiBase]);
+	const deleteUser = useCallback(async (userId) => {
+		try {
+			const res = await fetch(`${authApiBase}/users/${userId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({}));
+				throw new Error(data.error || `HTTP ${res.status}`);
+			}
+			setUsers((prev) => prev.filter((u) => u.id !== userId));
+			setPendingDeleteUser(null);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to delete user");
+			setPendingDeleteUser(null);
+		}
+	}, [authApiBase]);
+	const updateRole = useCallback(async (userId, role) => {
+		try {
+			const res = await fetch(`${authApiBase}/users/${userId}/role`, {
+				method: "PATCH",
+				credentials: "include",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({ role })
+			});
+			if (!res.ok) {
+				const data = await res.json().catch(() => ({}));
+				throw new Error(data.error || `HTTP ${res.status}`);
+			}
+			setUsers((prev) => prev.map((u) => u.id === userId ? {
+				...u,
+				role
+			} : u));
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to update role");
+		}
+	}, [authApiBase]);
+	if (!isAuthenticated || user?.role !== "admin") return null;
+	if (!hasFetched && !isLoading) fetchUsers();
+	return /* @__PURE__ */ jsxs("div", {
+		className: `space-y-4 ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "relative flex-1 max-w-sm",
+					children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 pointer-events-none text-imp-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+						type: "text",
+						value: searchQuery,
+						onChange: (e) => {
+							setSearchQuery(e.target.value);
+							setCurrentPage(1);
+						},
+						placeholder: "Search users…",
+						className: "w-full py-2 pr-3 text-sm border rounded-lg outline-none border-imp-border bg-transparent pl-9 placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
+					})]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setShowCreateDialog(true),
+					className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-2 text-sm font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+					children: [/* @__PURE__ */ jsx(UserPlus, { className: "w-4 h-4" }), " Create User"]
+				})]
+			}),
+			error && /* @__PURE__ */ jsxs("div", {
+				className: "p-3 text-sm text-red-600 rounded-md bg-red-50 dark:bg-red-950/20 dark:text-red-400",
+				children: [error, /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => setError(null),
+					className: "ml-2 underline hover:no-underline",
+					children: "Dismiss"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden border rounded-xl border-imp-border bg-imp-background/40",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full text-sm table-fixed",
+					children: [
+						/* @__PURE__ */ jsxs("colgroup", { children: [
+							/* @__PURE__ */ jsx("col", { className: "w-[40%]" }),
+							/* @__PURE__ */ jsx("col", { className: "w-[20%]" }),
+							/* @__PURE__ */ jsx("col", { className: "w-[20%]" }),
+							/* @__PURE__ */ jsx("col", { className: "w-[20%]" })
+						] }),
+						/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+							className: "text-xs font-medium border-b border-imp-border bg-imp-muted/20 text-imp-muted-foreground",
+							children: [
+								/* @__PURE__ */ jsx(SortHeader, {
+									label: "User",
+									field: "name",
+									sortField,
+									sortDir,
+									onSort: handleSort
+								}),
+								/* @__PURE__ */ jsx(SortHeader, {
+									label: "Global Role",
+									field: "role",
+									sortField,
+									sortDir,
+									onSort: handleSort
+								}),
+								/* @__PURE__ */ jsx(SortHeader, {
+									label: "Created",
+									field: "createdAt",
+									sortField,
+									sortDir,
+									onSort: handleSort,
+									align: "right"
+								}),
+								/* @__PURE__ */ jsx("th", { className: "px-4 py-2.5 text-right font-medium" })
+							]
+						}) }),
+						/* @__PURE__ */ jsxs("tbody", {
+							className: "divide-y divide-imp-border",
+							children: [paginatedUsers.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+								colSpan: 4,
+								className: "px-4 py-8 text-sm text-center text-imp-muted-foreground",
+								children: !hasFetched || isLoading ? "Loading…" : searchQuery ? "No users match your search." : "No users found."
+							}) }), paginatedUsers.map((u) => /* @__PURE__ */ jsxs("tr", {
+								className: "group hover:bg-imp-muted/20",
+								children: [
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-3",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-3",
+											children: [/* @__PURE__ */ jsx("div", {
+												className: "flex items-center justify-center w-8 h-8 text-xs font-semibold rounded-full shrink-0 bg-imp-primary/10 text-imp-primary",
+												children: getInitials(u)
+											}), /* @__PURE__ */ jsxs("div", {
+												className: "min-w-0",
+												children: [/* @__PURE__ */ jsx("div", {
+													className: "font-medium truncate text-imp-foreground",
+													children: u.name || "Unnamed"
+												}), /* @__PURE__ */ jsx("div", {
+													className: "text-xs truncate text-imp-muted-foreground",
+													children: u.email
+												})]
+											})]
+										})
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-3",
+										children: u.role === "admin" ? /* @__PURE__ */ jsx("span", {
+											className: `inline-flex rounded-full border px-2.5 py-0.5 text-sm font-medium ${ROLE_BADGE_CLASSES}`,
+											children: formatAuthRoleLabel(u.role)
+										}) : /* @__PURE__ */ jsx(RoleDropdown, {
+											value: u.role ?? "default",
+											userId: u.id,
+											disabled: u.id === user?.id,
+											onChange: updateRole
+										})
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-3 text-xs text-right text-imp-muted-foreground",
+										children: u.createdAt ? formatDate(u.createdAt) : "—"
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "px-4 py-3 text-right",
+										children: u.role === "admin" ? /* @__PURE__ */ jsx("span", {
+											className: "text-xs text-imp-muted-foreground",
+											children: "Config managed"
+										}) : u.id !== user?.id ? /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: () => setPendingDeleteUser(u),
+											className: "rounded-md p-1.5 text-imp-muted-foreground opacity-0 transition-opacity hover:bg-red-50 hover:text-red-600 group-hover:opacity-100 dark:hover:bg-red-950/20 dark:hover:text-red-400",
+											children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
+										}) : null
+									})
+								]
+							}, u.id))]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between text-sm",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "text-xs text-imp-muted-foreground",
+					children: [
+						filteredUsers.length,
+						" user",
+						filteredUsers.length !== 1 ? "s" : "",
+						searchQuery && ` matching "${searchQuery}"`
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+							disabled: currentPage === 1,
+							className: "rounded-md border border-imp-border px-2.5 py-1 text-xs hover:bg-imp-muted disabled:opacity-50",
+							children: "Previous"
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-imp-muted-foreground",
+							children: [
+								currentPage,
+								" / ",
+								totalPages
+							]
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+							disabled: currentPage === totalPages,
+							className: "rounded-md border border-imp-border px-2.5 py-1 text-xs hover:bg-imp-muted disabled:opacity-50",
+							children: "Next"
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: showCreateDialog,
+				onOpenChange: (open) => !open && setShowCreateDialog(false),
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					className: "max-w-md border-imp-border bg-imp-background text-imp-foreground sm:max-w-md",
+					children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
+						className: "text-sm font-semibold",
+						children: "Create New User"
+					}) }), /* @__PURE__ */ jsx(CreateUserForm, {
+						apiBaseUrl: authApiBase,
+						onCreated: (newUser) => {
+							setUsers((prev) => [...prev, newUser]);
+							setShowCreateDialog(false);
+						},
+						onCancel: () => setShowCreateDialog(false)
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: pendingDeleteUser !== null,
+				onOpenChange: (open) => !open && setPendingDeleteUser(null),
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					className: "max-w-sm border-imp-border bg-imp-background text-imp-foreground sm:max-w-sm",
+					children: [
+						/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, {
+							className: "text-sm font-semibold",
+							children: "Delete user"
+						}) }),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-imp-muted-foreground",
+							children: [
+								"Are you sure you want to delete",
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: "font-medium text-imp-foreground",
+									children: pendingDeleteUser?.name || pendingDeleteUser?.email || "this user"
+								}),
+								"? This action cannot be undone."
+							]
+						}),
+						/* @__PURE__ */ jsxs(DialogFooter, {
+							className: "gap-2",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setPendingDeleteUser(null),
+								className: "rounded-md border border-imp-border px-3 py-1.5 text-sm hover:bg-imp-muted",
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => pendingDeleteUser && deleteUser(pendingDeleteUser.id),
+								className: "rounded-md bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700",
+								children: "Delete"
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+function CreateUserForm({ apiBaseUrl, onCreated, onCancel }) {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [name, setName] = useState("");
+	const [role, setRole] = useState(AUTH_DEFAULT_ROLE);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		setError(null);
+		if (!email.trim() || !password.trim()) {
+			setError("Email and password are required");
+			return;
+		}
+		if (password.length < 8) {
+			setError("Password must be at least 8 characters");
+			return;
+		}
+		setIsSubmitting(true);
+		try {
+			const res = await fetch(`${apiBaseUrl}/users`, {
+				method: "POST",
+				credentials: "include",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify({
+					email,
+					password,
+					name: name.trim() || void 0,
+					role
+				})
+			});
+			const data = await res.json();
+			if (!res.ok) throw new Error(data.error || data.message || `HTTP ${res.status}`);
+			onCreated(data.user);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to create user");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: handleSubmit,
+		className: "space-y-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+					className: "block mb-1 text-xs font-medium text-imp-foreground",
+					children: "Name"
+				}), /* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: name,
+					onChange: (e) => setName(e.target.value),
+					placeholder: "User name",
+					className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:outline-none focus:border-imp-primary/50"
+				})] }), /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("label", {
+						className: "block mb-1 text-xs font-medium text-imp-foreground",
+						children: "Role"
+					}),
+					/* @__PURE__ */ jsx("select", {
+						value: role,
+						onChange: (e) => setRole(e.target.value),
+						className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm focus:outline-none focus:border-imp-primary/50",
+						children: ASSIGNABLE_ROLE_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", {
+							value: option.value,
+							children: option.label
+						}, option.value))
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-xs text-imp-muted-foreground",
+						children: "Flow access can still be granted via RBAC."
+					})
+				] })]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
+				className: "block mb-1 text-xs font-medium text-imp-foreground",
+				children: ["Email ", /* @__PURE__ */ jsx("span", {
+					className: "text-red-500",
+					children: "*"
+				})]
+			}), /* @__PURE__ */ jsx("input", {
+				type: "email",
+				value: email,
+				onChange: (e) => setEmail(e.target.value),
+				placeholder: "user@example.com",
+				required: true,
+				autoComplete: "off",
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:outline-none focus:border-imp-primary/50"
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("label", {
+				className: "block mb-1 text-xs font-medium text-imp-foreground",
+				children: ["Password ", /* @__PURE__ */ jsx("span", {
+					className: "text-red-500",
+					children: "*"
+				})]
+			}), /* @__PURE__ */ jsx("input", {
+				type: "password",
+				value: password,
+				onChange: (e) => setPassword(e.target.value),
+				placeholder: "Min 8 characters",
+				required: true,
+				minLength: 8,
+				autoComplete: "new-password",
+				className: "w-full rounded-md border border-imp-border bg-imp-background px-3 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:outline-none focus:border-imp-primary/50"
+			})] }),
+			error && /* @__PURE__ */ jsx("div", {
+				className: "p-2 text-xs text-red-600 rounded-md bg-red-50 dark:bg-red-950/20 dark:text-red-400",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-2 pt-1",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onCancel,
+					className: "rounded-md border border-imp-border px-3 py-1.5 text-sm hover:bg-imp-muted",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					disabled: isSubmitting,
+					className: "px-4 py-2 text-sm font-semibold rounded-md bg-imp-primary text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+					children: isSubmitting ? "Creating…" : "Create User"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/AuthenticatedInvect.tsx
+const defaultQueryClient = new QueryClient({ defaultOptions: { queries: {
+	staleTime: 300 * 1e3,
+	retry: 1
+} } });
+function AuthenticatedInvect({ apiBaseUrl = "http://localhost:3000/invect", basePath = "/invect", InvectComponent, ShellComponent, reactQueryClient, loading, theme = "light", plugins }) {
+	const client = reactQueryClient ?? defaultQueryClient;
+	const Invect = InvectComponent;
+	const Shell = ShellComponent;
+	const content = /* @__PURE__ */ jsx(QueryClientProvider, {
+		client,
+		children: /* @__PURE__ */ jsx(AuthProvider, {
+			baseUrl: apiBaseUrl,
+			children: /* @__PURE__ */ jsx(AuthGate, {
+				loading: loading ?? /* @__PURE__ */ jsx(LoadingSpinner, {}),
+				fallback: /* @__PURE__ */ jsx(SignInOnly, {}),
+				children: /* @__PURE__ */ jsx(Invect, {
+					apiBaseUrl,
+					basePath,
+					reactQueryClient: client,
+					plugins
+				})
+			})
+		})
+	});
+	if (Shell) return /* @__PURE__ */ jsx(Shell, {
+		theme,
+		className: "h-full",
+		children: content
+	});
+	return content;
+}
+function SignInOnly() {
+	return /* @__PURE__ */ jsx(SignInPage, {
+		onSuccess: () => {},
+		subtitle: "Sign in to access Invect"
+	});
+}
+function LoadingSpinner() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-imp-background",
+		children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-imp-muted border-t-imp-primary" })
+	});
+}
+//#endregion
+//#region src/frontend/components/UserManagementPage.tsx
+/**
+* UserManagementPage — Standalone page for user management.
+*
+* Wraps the existing UserManagement component in a page layout
+* consistent with the Access Control page style. Registered as a
+* plugin route contribution at '/users'.
+*/
+function UserManagementPage() {
+	const api = useApiClient();
+	const { user, isAuthenticated } = useAuth();
+	const apiBaseUrl = api.getBaseURL();
+	if (!isAuthenticated) return /* @__PURE__ */ jsx("div", {
+		className: "imp-page w-full h-full min-h-0 overflow-y-auto bg-imp-background text-imp-foreground flex items-center justify-center",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-imp-muted-foreground",
+			children: "Please sign in to access this page."
+		})
+	});
+	if (user?.role !== "admin") return /* @__PURE__ */ jsx(PageLayout, {
+		title: "User Management",
+		subtitle: "Manage users for your Invect instance.",
+		icon: Users,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rounded-md bg-yellow-50 p-3 text-sm text-yellow-800 dark:bg-yellow-950/20 dark:text-yellow-400",
+			children: "Only administrators can manage users. Contact an admin for access."
+		})
+	});
+	return /* @__PURE__ */ jsx(PageLayout, {
+		title: "User Management",
+		subtitle: "Create, manage, and remove users for your Invect instance.",
+		icon: Users,
+		children: /* @__PURE__ */ jsx(UserManagement, { apiBaseUrl })
+	});
+}
+//#endregion
+//#region src/frontend/components/ProfilePage.tsx
+/**
+* ProfilePage — Standalone page for the current authenticated user.
+*
+* Shows basic account information and provides a sign-out action.
+*/
+function ProfilePage({ basePath }) {
+	const { user, isAuthenticated, isLoading, signOut } = useAuth();
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "imp-page flex h-full min-h-0 w-full items-center justify-center overflow-y-auto bg-imp-background text-imp-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-imp-muted-foreground",
+			children: "Loading profile…"
+		})
+	});
+	if (!isAuthenticated || !user) return /* @__PURE__ */ jsx("div", {
+		className: "imp-page flex h-full min-h-0 w-full items-center justify-center overflow-y-auto bg-imp-background text-imp-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-imp-muted-foreground",
+			children: "Please sign in to view your profile."
+		})
+	});
+	const displayName = user.name ?? user.email ?? user.id;
+	const initials = displayName[0]?.toUpperCase() ?? "?";
+	return /* @__PURE__ */ jsx(PageLayout, {
+		title: "Profile",
+		subtitle: "View your account details and manage your current session.",
+		icon: User,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-2xl rounded-xl border border-imp-border bg-imp-card p-6 shadow-sm",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-6 flex items-center gap-4",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-full bg-imp-primary/10 text-lg font-semibold text-imp-primary",
+						children: user.image ? /* @__PURE__ */ jsx("img", {
+							src: user.image,
+							alt: displayName,
+							className: "h-16 w-16 object-cover"
+						}) : initials
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "truncate text-lg font-semibold text-imp-foreground",
+							children: displayName
+						}), /* @__PURE__ */ jsx("p", {
+							className: "truncate text-sm text-imp-muted-foreground",
+							children: user.email ?? user.id
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-4 md:grid-cols-2",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border border-imp-border bg-imp-background p-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-2 flex items-center gap-2 text-sm font-medium text-imp-foreground",
+								children: [/* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-imp-muted-foreground" }), "Name"]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-imp-muted-foreground",
+								children: user.name ?? "Not set"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border border-imp-border bg-imp-background p-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-2 flex items-center gap-2 text-sm font-medium text-imp-foreground",
+								children: [/* @__PURE__ */ jsx(Mail, { className: "h-4 w-4 text-imp-muted-foreground" }), "Email"]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-imp-muted-foreground",
+								children: user.email ?? "Not available"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border border-imp-border bg-imp-background p-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-2 flex items-center gap-2 text-sm font-medium text-imp-foreground",
+								children: [/* @__PURE__ */ jsx(Shield, { className: "h-4 w-4 text-imp-muted-foreground" }), "Role"]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-imp-muted-foreground",
+								children: formatAuthRoleLabel(user.role)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "rounded-lg border border-imp-border bg-imp-background p-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "mb-2 flex items-center gap-2 text-sm font-medium text-imp-foreground",
+								children: [/* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-imp-muted-foreground" }), "User ID"]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "break-all text-sm text-imp-muted-foreground",
+								children: user.id
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-6 flex justify-end border-t border-imp-border pt-4",
+					children: /* @__PURE__ */ jsxs("button", {
+						onClick: async () => {
+							await signOut();
+						},
+						className: "inline-flex items-center gap-2 rounded-md border border-imp-border px-4 py-2 text-sm font-medium text-imp-foreground transition-colors hover:bg-imp-muted",
+						children: [/* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }), "Sign Out"]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/frontend/components/SidebarUserMenu.tsx
+/**
+* SidebarUserMenu — User avatar link in the sidebar footer.
+*
+* Clicking navigates directly to the profile page.
+* Sign-out is available on the profile page itself.
+*/
+function SidebarUserMenu({ collapsed = false, basePath = "" }) {
+	const { user, isAuthenticated, isLoading } = useAuth();
+	const location = useLocation();
+	if (isLoading || !isAuthenticated || !user) return null;
+	const initials = (user.name ?? user.email ?? user.id)[0]?.toUpperCase() ?? "?";
+	const displayName = user.name ?? user.email ?? "User";
+	const profilePath = `${basePath}/profile`;
+	const isActive = location.pathname === profilePath;
+	return /* @__PURE__ */ jsxs(Link, {
+		to: profilePath,
+		title: `${displayName}${user.role ? ` — ${user.role}` : ""}`,
+		className: [
+			"flex w-full items-center gap-3 rounded-md px-2 py-2 transition-colors",
+			"hover:bg-imp-muted/60",
+			isActive ? "bg-imp-muted/60" : "",
+			collapsed ? "justify-center" : ""
+		].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-imp-primary/10 text-sm font-medium text-imp-primary",
+			children: user.image ? /* @__PURE__ */ jsx("img", {
+				src: user.image,
+				alt: displayName,
+				className: "h-8 w-8 rounded-full object-cover"
+			}) : initials
+		}), !collapsed && /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "truncate text-sm font-medium",
+				children: displayName
+			}), user.role && /* @__PURE__ */ jsx("p", {
+				className: "truncate text-xs capitalize text-imp-muted-foreground",
+				children: user.role
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/frontend/plugins/authFrontendPlugin.ts
+/**
+* @invect/user-auth — Auth Frontend Plugin Definition
+*
+* Registers the auth plugin's frontend contributions:
+* - Sidebar item: "Users" (admin-only)
+* - Route: /users → UserManagementPage
+*
+* Note: AuthProvider is NOT included as a plugin provider because
+* AuthenticatedInvect already wraps the tree with it. This plugin
+* only adds the user management UI.
+*/
+const authFrontendPlugin = {
+	id: "user-auth",
+	name: "User Authentication",
+	sidebar: [{
+		label: "Users",
+		icon: Users,
+		path: "/users",
+		position: "top",
+		permission: "admin:*"
+	}],
+	sidebarFooter: SidebarUserMenu,
+	routes: [{
+		path: "/profile",
+		component: ProfilePage
+	}, {
+		path: "/users",
+		component: UserManagementPage
+	}]
+};
+//#endregion
+export { AuthGate, AuthProvider, AuthenticatedInvect, ProfilePage, SidebarUserMenu, SignInForm, SignInPage, UserButton, UserManagement, UserManagementPage, authFrontendPlugin, useAuth };
+
+//# sourceMappingURL=index.mjs.map