@invect/rbac 0.0.1

package/dist/frontend/index.mjs

@@ -0,0 +1,2899 @@
+import { ChevronDown, ChevronRight, ExternalLink, FolderInput, GripVertical, Move, Plus, Search, Share2, Shield, Trash2, User, Users, Workflow, X } from "lucide-react";
+import { Fragment, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, PageLayout, useApiClient } from "@invect/frontend";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { create } from "zustand";
+//#region src/frontend/providers/RbacProvider.tsx
+/**
+* RBAC Context Provider
+*
+* Wraps the Invect app tree with RBAC state — current user identity,
+* permissions cache, and permission-checking utilities.
+*
+* Fetches GET /plugins/auth/me on mount and caches the result.
+*/
+const RbacContext = createContext(null);
+function RbacProvider({ children }) {
+	const api = useApiClient();
+	const { data: me, isLoading } = useQuery({
+		queryKey: [
+			"rbac",
+			"auth",
+			"me"
+		],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/auth/me`, { credentials: "include" });
+			if (!response.ok) return {
+				identity: null,
+				permissions: [],
+				isAuthenticated: false
+			};
+			return response.json();
+		},
+		staleTime: 300 * 1e3,
+		retry: 1
+	});
+	const permissions = useMemo(() => new Set(me?.permissions ?? []), [me?.permissions]);
+	const checkPermission = useCallback((permission) => {
+		if (!me?.isAuthenticated) return true;
+		return permissions.has(permission) || permissions.has("admin:*");
+	}, [me?.isAuthenticated, permissions]);
+	const value = useMemo(() => ({
+		user: me?.identity ?? null,
+		isAuthenticated: me?.isAuthenticated ?? false,
+		permissions,
+		checkPermission,
+		isLoading
+	}), [
+		me,
+		permissions,
+		checkPermission,
+		isLoading
+	]);
+	return /* @__PURE__ */ jsx(RbacContext.Provider, {
+		value,
+		children
+	});
+}
+/**
+* Access RBAC context — current user, permissions, and permission checking.
+*
+* Must be used within an `<RbacProvider>`.
+* Returns a safe fallback (unauthenticated, allow all) if provider is missing.
+*/
+function useRbac() {
+	const ctx = useContext(RbacContext);
+	if (!ctx) return {
+		user: null,
+		isAuthenticated: false,
+		permissions: /* @__PURE__ */ new Set(),
+		checkPermission: () => true,
+		isLoading: false
+	};
+	return ctx;
+}
+//#endregion
+//#region src/frontend/hooks/useFlowAccess.ts
+/**
+* useFlowAccess — React Query hooks for flow access records
+*/
+/** Fetch access records for a specific flow */
+function useFlowAccess(flowId) {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: [
+			"rbac",
+			"flow-access",
+			flowId
+		],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/flows/${flowId}/access`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch flow access: ${response.status}`);
+			return response.json();
+		},
+		enabled: !!flowId
+	});
+}
+/** Fetch all flow IDs accessible to the current user with their effective permission */
+function useAccessibleFlows() {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: ["rbac", "accessible-flows"],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/flows/accessible`, { credentials: "include" });
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || err.message || `Failed to fetch accessible flows: ${response.status}`);
+			}
+			return response.json();
+		}
+	});
+}
+/** Grant access to a flow */
+function useGrantFlowAccess(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (input) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/flows/${flowId}/access`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(input)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to grant access: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"flow-access",
+				flowId
+			] });
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"effective-flow-access",
+				flowId
+			] });
+		}
+	});
+}
+/** Revoke a specific access record */
+function useRevokeFlowAccess(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (accessId) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/flows/${flowId}/access/${accessId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to revoke access: ${response.status}`);
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"flow-access",
+				flowId
+			] });
+		}
+	});
+}
+//#endregion
+//#region src/frontend/components/ShareFlowModal.tsx
+/**
+* ShareFlowModal — Modal for managing flow access permissions.
+*
+* Shows current access records and allows granting/revoking access.
+*/
+const AVATAR_COLORS = [
+	"bg-blue-500/15 text-blue-600 dark:text-blue-400",
+	"bg-violet-500/15 text-violet-600 dark:text-violet-400",
+	"bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+	"bg-amber-500/15 text-amber-600 dark:text-amber-400",
+	"bg-rose-500/15 text-rose-600 dark:text-rose-400",
+	"bg-cyan-500/15 text-cyan-600 dark:text-cyan-400",
+	"bg-fuchsia-500/15 text-fuchsia-600 dark:text-fuchsia-400",
+	"bg-orange-500/15 text-orange-600 dark:text-orange-400"
+];
+function getAvatarColor(id) {
+	let hash = 0;
+	for (let i = 0; i < id.length; i++) hash = (hash << 5) - hash + id.charCodeAt(i) | 0;
+	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+function getPermissionColor(permission) {
+	switch (permission) {
+		case "owner": return "border-amber-500/30 bg-amber-500/5 text-amber-600 dark:text-amber-400";
+		case "editor": return "border-blue-500/30 bg-blue-500/5 text-blue-600 dark:text-blue-400";
+		case "operator": return "border-emerald-500/30 bg-emerald-500/5 text-emerald-600 dark:text-emerald-400";
+		default: return "border-imp-border bg-imp-muted/50 text-imp-muted-foreground";
+	}
+}
+const PERMISSION_OPTIONS = [
+	{
+		value: "viewer",
+		label: "Viewer"
+	},
+	{
+		value: "operator",
+		label: "Operator"
+	},
+	{
+		value: "editor",
+		label: "Editor"
+	},
+	{
+		value: "owner",
+		label: "Owner"
+	}
+];
+function ShareFlowModal({ flowId, onClose }) {
+	const { user } = useRbac();
+	const { data, isLoading } = useFlowAccess(flowId);
+	const grantAccess = useGrantFlowAccess(flowId);
+	const revokeAccess = useRevokeFlowAccess(flowId);
+	const [newPrincipal, setNewPrincipal] = useState("");
+	const [newPermission, setNewPermission] = useState("viewer");
+	const [principalType, setPrincipalType] = useState("user");
+	const [error, setError] = useState(null);
+	const [openRoleDropdown, setOpenRoleDropdown] = useState(null);
+	const accessRecords = data?.access ?? [];
+	const handleGrant = async () => {
+		if (!newPrincipal.trim()) {
+			setError("Please enter a user ID or team ID");
+			return;
+		}
+		setError(null);
+		try {
+			await grantAccess.mutateAsync({
+				...principalType === "user" ? { userId: newPrincipal } : { teamId: newPrincipal },
+				permission: newPermission
+			});
+			setNewPrincipal("");
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to grant access");
+		}
+	};
+	const handleRevoke = async (accessId) => {
+		try {
+			await revokeAccess.mutateAsync(accessId);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to revoke access");
+		}
+	};
+	const handleChangeRole = async (accessId, record, newRole) => {
+		try {
+			await grantAccess.mutateAsync({
+				...record.userId ? { userId: record.userId } : record.teamId ? { teamId: record.teamId } : {},
+				permission: newRole
+			});
+			setOpenRoleDropdown(null);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to update role");
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+		onClick: onClose,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-full max-w-md rounded-xl border border-imp-border bg-imp-background p-5 shadow-2xl",
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-4 flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-base font-semibold text-imp-foreground",
+						children: "Share Flow"
+					}), /* @__PURE__ */ jsx("button", {
+						onClick: onClose,
+						className: "rounded-lg p-1.5 text-imp-muted-foreground transition-colors hover:bg-imp-muted hover:text-imp-foreground",
+						children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+					})]
+				}),
+				error && /* @__PURE__ */ jsx("div", {
+					className: "mb-3 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600 dark:bg-red-950/20 dark:text-red-400",
+					children: error
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mb-4",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "mb-2 text-xs font-medium uppercase tracking-wide text-imp-muted-foreground",
+						children: "People with access"
+					}), isLoading ? /* @__PURE__ */ jsx("div", {
+						className: "py-4 text-center text-sm text-imp-muted-foreground",
+						children: "Loading..."
+					}) : accessRecords.length === 0 ? /* @__PURE__ */ jsx("div", {
+						className: "py-4 text-center text-sm text-imp-muted-foreground",
+						children: "No flow-specific access records yet."
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "max-h-48 space-y-0.5 overflow-y-auto",
+						children: accessRecords.map((record) => {
+							const principalId = record.userId ?? record.teamId ?? "?";
+							const isCurrentUser = record.userId === user?.id;
+							const isRoleDropdownOpen = openRoleDropdown === record.id;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between rounded-lg px-2.5 py-2 transition-colors hover:bg-imp-muted/30",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2.5 min-w-0",
+									children: [/* @__PURE__ */ jsx("div", {
+										className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold ${getAvatarColor(principalId)}`,
+										children: principalId[0]?.toUpperCase()
+									}), /* @__PURE__ */ jsxs("span", {
+										className: "truncate text-sm font-medium text-imp-foreground",
+										children: [principalId, isCurrentUser && /* @__PURE__ */ jsx("span", {
+											className: "ml-1 font-normal text-imp-muted-foreground",
+											children: "(you)"
+										})]
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "relative",
+									children: isCurrentUser ? /* @__PURE__ */ jsx("span", {
+										className: `inline-flex rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${getPermissionColor(record.permission)}`,
+										children: record.permission
+									}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: () => setOpenRoleDropdown(isRoleDropdownOpen ? null : record.id),
+										className: `inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize transition-colors hover:bg-imp-muted/50 ${getPermissionColor(record.permission)}`,
+										children: [record.permission, /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })]
+									}), isRoleDropdownOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+										className: "fixed inset-0 z-10",
+										onClick: () => setOpenRoleDropdown(null)
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "absolute right-0 top-full z-20 mt-1 w-36 rounded-lg border border-imp-border bg-imp-background py-1 shadow-lg",
+										children: [
+											PERMISSION_OPTIONS.map((opt) => /* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: `w-full px-3 py-1.5 text-left text-xs ${record.permission === opt.value ? "bg-imp-muted font-medium text-imp-foreground" : "text-imp-foreground hover:bg-imp-muted/50"}`,
+												onClick: () => handleChangeRole(record.id, record, opt.value),
+												children: opt.label
+											}, opt.value)),
+											/* @__PURE__ */ jsx("div", { className: "my-1 border-t border-imp-border" }),
+											/* @__PURE__ */ jsx("button", {
+												type: "button",
+												className: "w-full px-3 py-1.5 text-left text-xs text-red-600 hover:bg-red-500/10 dark:text-red-400",
+												onClick: () => {
+													handleRevoke(record.id);
+													setOpenRoleDropdown(null);
+												},
+												children: "Remove access"
+											})
+										]
+									})] })] })
+								})]
+							}, record.id);
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "border-t border-imp-border pt-4",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "mb-2.5 text-xs font-medium uppercase tracking-wide text-imp-muted-foreground",
+						children: "Add people"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setPrincipalType(principalType === "user" ? "team" : "user"),
+								className: "shrink-0 rounded-lg border border-imp-border bg-imp-background px-2.5 py-1.5 text-xs font-medium text-imp-foreground transition-colors hover:bg-imp-muted/50",
+								children: principalType === "user" ? "User" : "Team"
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "text",
+								value: newPrincipal,
+								onChange: (e) => setNewPrincipal(e.target.value),
+								placeholder: principalType === "user" ? "User ID" : "Team ID",
+								className: "flex-1 rounded-lg border border-imp-border bg-imp-background px-3 py-1.5 text-sm placeholder:text-imp-muted-foreground focus:border-imp-primary/50 focus:outline-none",
+								onKeyDown: (e) => {
+									if (e.key === "Enter") handleGrant();
+								}
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									const next = PERMISSION_OPTIONS[(PERMISSION_OPTIONS.findIndex((o) => o.value === newPermission) + 1) % PERMISSION_OPTIONS.length];
+									setNewPermission(next.value);
+								},
+								className: `shrink-0 rounded-lg border px-2.5 py-1.5 text-xs font-medium capitalize transition-colors ${getPermissionColor(newPermission)}`,
+								children: newPermission
+							}),
+							/* @__PURE__ */ jsx("button", {
+								onClick: handleGrant,
+								disabled: grantAccess.isPending,
+								className: "shrink-0 rounded-lg bg-imp-primary px-3.5 py-1.5 text-sm font-medium text-imp-primary-foreground transition-colors hover:bg-imp-primary/90 disabled:opacity-50",
+								children: /* @__PURE__ */ jsx(Share2, { className: "h-3.5 w-3.5" })
+							})
+						]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/frontend/components/ShareButton.tsx
+/**
+* ShareButton — Header action component for the flow editor.
+*
+* Renders a "Share" button in the flow header that opens the ShareFlowModal.
+* Registered as a headerAction contribution for the 'flowHeader' context.
+*/
+function ShareButton({ flowId }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const { isAuthenticated, checkPermission } = useRbac();
+	const { data } = useAccessibleFlows();
+	if (!flowId) return null;
+	if ((isAuthenticated && checkPermission("admin:*") ? "owner" : data?.permissions?.[flowId] ?? null) !== "owner") return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		onClick: () => setIsOpen(true),
+		className: "inline-flex items-center gap-2 rounded-md border border-imp-border px-3 py-1.5 text-sm font-medium text-imp-foreground transition-colors hover:border-imp-primary/50 hover:bg-imp-muted",
+		children: [/* @__PURE__ */ jsx(Share2, { className: "h-4 w-4" }), "Share"]
+	}), isOpen && /* @__PURE__ */ jsx(ShareFlowModal, {
+		flowId,
+		onClose: () => setIsOpen(false)
+	})] });
+}
+//#endregion
+//#region src/frontend/components/FlowAccessPanel.tsx
+/**
+* FlowAccessPanel — Panel tab for the flow editor.
+*
+* Shows the current access records for the selected flow in a
+* compact list. Registered as a panelTab contribution for the
+* 'flowEditor' context.
+*/
+function FlowAccessPanel({ flowId }) {
+	const { user } = useRbac();
+	const { data, isLoading, error } = useFlowAccess(flowId);
+	const accessRecords = data?.access ?? [];
+	const myRecord = accessRecords.find((r) => r.userId === user?.id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-4 flex items-center justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx(Shield, { className: "h-4 w-4 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("h3", {
+						className: "text-sm font-medium",
+						children: "Access Control"
+					})]
+				}), myRecord && /* @__PURE__ */ jsx("span", {
+					className: "rounded-full border border-imp-border px-2 py-0.5 text-xs font-medium capitalize",
+					children: myRecord.permission
+				})]
+			}),
+			isLoading ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-imp-muted-foreground",
+					children: "Loading access records..."
+				})
+			}) : error ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 items-center justify-center",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-red-500",
+					children: error instanceof Error ? error.message : "Failed to load access records"
+				})
+			}) : accessRecords.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-1 flex-col items-center justify-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Users, { className: "h-8 w-8 text-imp-muted-foreground/50" }),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-imp-muted-foreground",
+						children: "No access records"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-imp-muted-foreground",
+						children: "Use the Share button to grant access."
+					})
+				]
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex-1 space-y-1 overflow-y-auto",
+				children: accessRecords.map((record) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 rounded-md px-3 py-2 bg-imp-muted/30",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex h-7 w-7 items-center justify-center rounded-full bg-imp-primary/10",
+							children: record.teamId ? /* @__PURE__ */ jsx(Users, { className: "h-3.5 w-3.5 text-imp-primary" }) : /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5 text-imp-primary" })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "truncate text-sm",
+								children: [record.userId ?? record.teamId, record.userId === user?.id && /* @__PURE__ */ jsx("span", {
+									className: "ml-1 text-imp-muted-foreground",
+									children: "(you)"
+								})]
+							}), record.expiresAt && /* @__PURE__ */ jsxs("p", {
+								className: "text-xs text-imp-muted-foreground",
+								children: ["Expires ", new Date(record.expiresAt).toLocaleDateString()]
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "rounded-full bg-imp-muted px-2 py-0.5 text-xs font-medium capitalize",
+							children: record.permission
+						})
+					]
+				}, record.id))
+			}),
+			accessRecords.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-3 border-t border-imp-border pt-3",
+				children: /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-imp-muted-foreground",
+					children: [
+						accessRecords.length,
+						" ",
+						accessRecords.length === 1 ? "person" : "people",
+						" with access"
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/hooks/useTeams.ts
+/**
+* useTeams — React Query hooks for team management
+*/
+/** List all teams */
+function useTeams() {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: ["rbac", "teams"],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch teams: ${response.status}`);
+			return response.json();
+		}
+	});
+}
+/** Get a single team with members */
+function useTeam(teamId) {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: [
+			"rbac",
+			"team",
+			teamId
+		],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams/${teamId}`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch team: ${response.status}`);
+			return response.json();
+		},
+		enabled: !!teamId
+	});
+}
+/** Get current user's teams */
+function useMyTeams() {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: ["rbac", "my-teams"],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/my-teams`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch my teams: ${response.status}`);
+			return response.json();
+		}
+	});
+}
+/** Create a team */
+function useCreateTeam() {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (input) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(input)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to create team: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["rbac", "teams"] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+/** Update a team */
+function useUpdateTeam(teamId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (input) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams/${teamId}`, {
+				method: "PUT",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(input)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to update team: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["rbac", "teams"] });
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"team",
+				teamId
+			] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+/** Delete a team */
+function useDeleteTeam() {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (teamId) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams/${teamId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to delete team: ${response.status}`);
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["rbac", "teams"] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+/** Add a member to a team */
+function useAddTeamMember(teamId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (input) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams/${teamId}/members`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(input)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to add member: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"team",
+				teamId
+			] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "teams"] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+/** Remove a member from a team */
+function useRemoveTeamMember(teamId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (userId) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/teams/${teamId}/members/${userId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to remove member: ${response.status}`);
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"team",
+				teamId
+			] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "teams"] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+//#endregion
+//#region src/frontend/hooks/useScopes.ts
+function useScopeTree() {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: ["rbac", "scope-tree"],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/scopes/tree`, { credentials: "include" });
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to fetch scope tree: ${response.status}`);
+			}
+			return response.json();
+		}
+	});
+}
+function useScopeAccess(scopeId) {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: [
+			"rbac",
+			"scope-access",
+			scopeId
+		],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/scopes/${scopeId}/access`, { credentials: "include" });
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to fetch scope access: ${response.status}`);
+			}
+			return response.json();
+		},
+		enabled: !!scopeId
+	});
+}
+function useGrantScopeAccess(scopeId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (input) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/scopes/${scopeId}/access`, {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(input)
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to grant scope access: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"scope-access",
+				scopeId
+			] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+function useRevokeScopeAccess(scopeId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (accessId) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/scopes/${scopeId}/access/${accessId}`, {
+				method: "DELETE",
+				credentials: "include"
+			});
+			if (!response.ok && response.status !== 204) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to revoke scope access: ${response.status}`);
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"scope-access",
+				scopeId
+			] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+		}
+	});
+}
+function useEffectiveFlowAccess(flowId) {
+	const api = useApiClient();
+	return useQuery({
+		queryKey: [
+			"rbac",
+			"effective-flow-access",
+			flowId
+		],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/flows/${flowId}/effective-access`, { credentials: "include" });
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to fetch effective flow access: ${response.status}`);
+			}
+			return response.json();
+		},
+		enabled: !!flowId
+	});
+}
+function useMoveFlow(flowId) {
+	const api = useApiClient();
+	const queryClient = useQueryClient();
+	return useMutation({
+		mutationFn: async (scopeId) => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/rbac/flows/${flowId}/scope`, {
+				method: "PUT",
+				headers: { "content-type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({ scopeId })
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({}));
+				throw new Error(err.error || `Failed to move flow: ${response.status}`);
+			}
+			return response.json();
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["rbac", "scope-tree"] });
+			queryClient.invalidateQueries({ queryKey: ["rbac", "accessible-flows"] });
+			queryClient.invalidateQueries({ queryKey: [
+				"rbac",
+				"effective-flow-access",
+				flowId
+			] });
+		}
+	});
+}
+function usePreviewMove() {
+	const api = useApiClient();
+	return useMutation({ mutationFn: async (input) => {
+		const response = await fetch(`${api.getBaseURL()}/plugins/rbac/preview-move`, {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			credentials: "include",
+			body: JSON.stringify(input)
+		});
+		if (!response.ok) {
+			const err = await response.json().catch(() => ({}));
+			throw new Error(err.error || `Failed to preview move: ${response.status}`);
+		}
+		return response.json();
+	} });
+}
+//#endregion
+//#region src/frontend/components/access-control/types.ts
+function formatPermissionLabel(permission) {
+	switch (permission) {
+		case "owner": return "Owner";
+		case "editor": return "Editor";
+		case "operator": return "Operator";
+		default: return "Viewer";
+	}
+}
+function getPermissionBadgeClasses(_permission) {
+	return "border-imp-border text-imp-muted-foreground";
+}
+//#endregion
+//#region src/frontend/components/access-control/useUsers.ts
+function useUsers$1() {
+	const api = useApiClient();
+	const { data } = useQuery({
+		queryKey: ["rbac", "auth-users"],
+		queryFn: async () => {
+			const response = await fetch(`${api.getBaseURL()}/plugins/auth/users?limit=200`, { credentials: "include" });
+			if (!response.ok) throw new Error(`Failed to fetch users: ${response.status}`);
+			return response.json();
+		},
+		staleTime: 1e3 * 60 * 5,
+		gcTime: 1e3 * 60 * 10
+	});
+	return data?.users ?? [];
+}
+//#endregion
+//#region src/frontend/components/access-control/AccessTable.tsx
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+const ROLE_OPTIONS = [
+	{
+		value: "viewer",
+		label: "Viewer",
+		description: "Can inspect the flow."
+	},
+	{
+		value: "operator",
+		label: "Operator",
+		description: "Can inspect and run the flow."
+	},
+	{
+		value: "editor",
+		label: "Editor",
+		description: "Can inspect, run, and edit the flow."
+	},
+	{
+		value: "owner",
+		label: "Owner",
+		description: "Can edit and manage sharing."
+	}
+];
+function RoleSelector({ value, onChange }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn("inline-flex w-full items-center justify-between gap-1 rounded-md border px-2.5 py-1.5 text-sm font-medium capitalize", getPermissionBadgeClasses(value)),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: value
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0" })]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "w-56",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-xs",
+				children: "Select role"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			ROLE_OPTIONS.map((role) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onChange(role.value),
+				className: cn("items-start gap-0 px-2 py-2", value === role.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: role.label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "text-xs text-muted-foreground",
+						children: role.description
+					})]
+				})
+			}, role.value))
+		]
+	})] });
+}
+function OptionalRoleSelector({ value, onChange, emptyLabel = "No direct access" }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cn("inline-flex w-40 items-center justify-between gap-1 rounded-md border px-2.5 py-1.5 text-sm font-medium capitalize", value ? getPermissionBadgeClasses(value) : "border-imp-border text-imp-muted-foreground hover:bg-imp-muted/50"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: value ?? emptyLabel
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0" })]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		className: "w-56",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-xs",
+				children: "Set access level"
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onChange(null),
+				className: cn("px-2 py-2 text-sm", value === null && "bg-accent text-accent-foreground"),
+				children: emptyLabel
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			ROLE_OPTIONS.map((role) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onSelect: () => onChange(role.value),
+				className: cn("items-start gap-0 px-2 py-2", value === role.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: role.label
+					}), /* @__PURE__ */ jsx("div", {
+						className: "text-xs text-muted-foreground",
+						children: role.description
+					})]
+				})
+			}, role.value))
+		]
+	})] });
+}
+function AccessTable({ rows, isLoading, emptyLabel }) {
+	const [pendingRemovalRow, setPendingRemovalRow] = useState(null);
+	const removalDialogCopy = pendingRemovalRow ? pendingRemovalRow.group === "Members" ? {
+		title: "Remove team member",
+		body: `Remove "${pendingRemovalRow.label}" from team?`,
+		confirmLabel: "Remove member"
+	} : {
+		title: pendingRemovalRow.kind === "team" ? "Revoke team access" : "Revoke user access",
+		body: pendingRemovalRow.kind === "team" ? `Remove direct access for ${pendingRemovalRow.label}?` : `Remove direct access for ${pendingRemovalRow.label}?`,
+		confirmLabel: "Remove access"
+	} : null;
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "px-2 py-4 text-sm text-center text-imp-muted-foreground",
+		children: "Loading…"
+	});
+	if (rows.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "px-2 py-4 text-sm text-center text-imp-muted-foreground",
+		children: emptyLabel
+	});
+	const groups = [];
+	for (const row of rows) {
+		const groupLabel = row.group ?? "";
+		const existing = groups.find((g) => g.label === groupLabel);
+		if (existing) existing.rows.push(row);
+		else groups.push({
+			label: groupLabel,
+			rows: [row]
+		});
+	}
+	const hasGroups = groups.length > 1;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("table", {
+		className: "w-full text-sm table-fixed",
+		children: [/* @__PURE__ */ jsxs("colgroup", { children: [
+			/* @__PURE__ */ jsx("col", {}),
+			/* @__PURE__ */ jsx("col", { className: "w-36" }),
+			/* @__PURE__ */ jsx("col", { className: "w-10" })
+		] }), /* @__PURE__ */ jsx("tbody", { children: groups.map((group) => /* @__PURE__ */ jsxs(Fragment, { children: [hasGroups && group.label && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			colSpan: 3,
+			className: "px-3 pt-4 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-imp-muted-foreground",
+			children: group.label
+		}) }), group.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs("tr", {
+			className: cn("hover:bg-imp-muted/20", rowIndex > 0 && "border-t border-imp-border"),
+			children: [
+				/* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2.5",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded-full", row.kind === "user" ? "bg-imp-primary/10" : "bg-imp-muted"),
+							children: row.kind === "user" ? /* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5 text-imp-primary" }) : /* @__PURE__ */ jsx(Users, { className: "h-3.5 w-3.5 text-imp-muted-foreground" })
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-medium truncate",
+									children: row.label
+								}), row.kind === "team" && /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 rounded border border-imp-border px-1.5 py-0.5 text-[11px] font-medium text-imp-muted-foreground",
+									children: "Team"
+								})]
+							}), row.source && row.source !== "Direct grant" && row.source !== "Member" && /* @__PURE__ */ jsx("span", {
+								className: "text-[11px] text-imp-muted-foreground",
+								children: row.source
+							})]
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2.5 text-center",
+					children: row.permission ? row.onPermissionChange ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: cn("inline-flex w-32 items-center justify-between gap-1 rounded-full border px-2.5 py-1 text-xs font-medium capitalize hover:bg-imp-muted/50", getPermissionBadgeClasses(row.permission)),
+							title: row.source,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: row.permission
+							}), /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0" })]
+						})
+					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+						align: "end",
+						className: "w-64",
+						children: [
+							/* @__PURE__ */ jsx(DropdownMenuLabel, {
+								className: "text-xs",
+								children: "Change access role"
+							}),
+							/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+							ROLE_OPTIONS.map((role) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+								onSelect: () => row.onPermissionChange?.(role.value),
+								className: cn("items-start gap-0 px-2 py-2", row.permission === role.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: role.label
+									}), /* @__PURE__ */ jsx("div", {
+										className: "text-xs text-muted-foreground",
+										children: role.description
+									})]
+								})
+							}, role.value))
+						]
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: cn("inline-flex w-32 justify-center rounded-full border px-2.5 py-1 text-xs font-medium capitalize", getPermissionBadgeClasses(row.permission)),
+						title: row.source,
+						children: row.permission
+					}) : null
+				}),
+				/* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2.5 text-center",
+					children: row.canRemove && row.onRemove ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setPendingRemovalRow(row),
+						className: "p-1 rounded text-imp-muted-foreground hover:bg-red-500/10 hover:text-red-500",
+						children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+					}) : null
+				})
+			]
+		}, row.id))] }, group.label || "_default")) })]
+	}), /* @__PURE__ */ jsx(Dialog, {
+		open: !!pendingRemovalRow,
+		onOpenChange: (open) => !open && setPendingRemovalRow(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: removalDialogCopy?.title
+				}) }),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-imp-muted-foreground",
+					children: removalDialogCopy?.body
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "justify-between w-full sm:gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setPendingRemovalRow(null),
+						className: "rounded-md mr-auto border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground hover:text-imp-foreground",
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							pendingRemovalRow?.onRemove?.();
+							setPendingRemovalRow(null);
+						},
+						className: "rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700",
+						children: removalDialogCopy?.confirmLabel
+					})]
+				})
+			]
+		})
+	})] });
+}
+//#endregion
+//#region src/frontend/components/access-control/FormDialog.tsx
+function FormDialog({ open, onClose, title, children }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (nextOpen) => !nextOpen && onClose(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-md p-4 border-imp-border bg-imp-background text-imp-foreground sm:max-w-md",
+			children: [/* @__PURE__ */ jsx(DialogHeader, {
+				className: "mb-1",
+				children: /* @__PURE__ */ jsx(DialogTitle, {
+					className: "text-sm font-semibold",
+					children: title
+				})
+			}), children]
+		})
+	});
+}
+//#endregion
+//#region src/frontend/components/access-control/MemberCombobox.tsx
+function MemberCombobox({ users, excludeIds, selectedUserIds, onSelect }) {
+	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef(null);
+	const selectedSet = new Set(selectedUserIds);
+	const filteredUsers = users.filter((user) => {
+		if (excludeIds.has(user.id)) return false;
+		if (selectedSet.has(user.id)) return false;
+		return `${user.name || ""} ${user.email || ""} ${user.id}`.toLowerCase().includes(query.toLowerCase());
+	});
+	const toggle = (userId) => {
+		onSelect(selectedSet.has(userId) ? selectedUserIds.filter((id) => id !== userId) : [...selectedUserIds, userId]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		onBlur: (e) => {
+			if (!containerRef.current?.contains(e.relatedTarget)) setOpen(false);
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-[2.5rem] w-full cursor-text flex-wrap gap-1.5 rounded-md border border-imp-border bg-imp-background px-2 py-1.5 focus-within:border-imp-primary/50",
+			onClick: () => setOpen(true),
+			children: [selectedUserIds.map((userId) => {
+				const user = users.find((u) => u.id === userId);
+				const label = user?.name || user?.email || userId;
+				return /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1 rounded-md border border-imp-border bg-imp-muted px-2 py-0.5 text-xs font-medium text-imp-foreground",
+					children: [
+						/* @__PURE__ */ jsx(User, { className: "h-3 w-3 shrink-0 text-imp-muted-foreground" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[140px] truncate",
+							children: label
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onMouseDown: (e) => e.preventDefault(),
+							onClick: (e) => {
+								e.stopPropagation();
+								toggle(userId);
+							},
+							className: "ml-0.5 text-imp-muted-foreground hover:text-imp-foreground",
+							children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+						})
+					]
+				}, userId);
+			}), /* @__PURE__ */ jsx("input", {
+				value: query,
+				onChange: (e) => {
+					setQuery(e.target.value);
+					setOpen(true);
+				},
+				onFocus: () => setOpen(true),
+				placeholder: selectedUserIds.length === 0 ? "Search users…" : "Add more…",
+				className: "min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-imp-muted-foreground"
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "absolute left-0 z-20 mt-1 w-full overflow-y-auto rounded-md border border-imp-border bg-imp-background shadow-lg top-full max-h-52",
+			children: filteredUsers.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-2 text-xs text-imp-muted-foreground",
+				children: query ? "No matches." : "No more users to add."
+			}) : filteredUsers.map((user) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => {
+					toggle(user.id);
+					setQuery("");
+				},
+				className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-imp-muted/50",
+				children: [/* @__PURE__ */ jsx(User, { className: "h-4 w-4 shrink-0 text-imp-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate font-medium",
+						children: user.name || user.email || user.id
+					}), user.name && user.email && /* @__PURE__ */ jsx("div", {
+						className: "truncate text-xs text-imp-muted-foreground",
+						children: user.email
+					})]
+				})]
+			}, user.id))
+		})]
+	});
+}
+//#endregion
+//#region src/frontend/components/access-control/ScopeDetailPanel.tsx
+function ScopeDetailPanel({ scopeId, scopeName, users, userMap, teams, isAdmin }) {
+	const scopeQuery = useTeam(scopeId);
+	const scopeAccessQuery = useScopeAccess(scopeId);
+	const grantScopeAccess = useGrantScopeAccess(scopeId);
+	const revokeScopeAccess = useRevokeScopeAccess(scopeId);
+	const addTeamMember = useAddTeamMember(scopeId);
+	const removeTeamMember = useRemoveTeamMember(scopeId);
+	const deleteScope = useDeleteTeam();
+	const [showGrantDialog, setShowGrantDialog] = useState(false);
+	const [showMemberDialog, setShowMemberDialog] = useState(false);
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const [permission, setPermission] = useState("viewer");
+	const [grantUserIds, setGrantUserIds] = useState([]);
+	const [memberUserIds, setMemberUserIds] = useState([]);
+	const members = scopeQuery.data?.members ?? [];
+	const scopeAccess = scopeAccessQuery.data?.access ?? [];
+	const existingMemberIds = new Set(members.map((member) => member.userId));
+	const existingScopeUserIds = new Set(scopeAccess.map((record) => record.userId).filter(Boolean));
+	const teamRoleRecord = scopeAccess.find((record) => record.teamId === scopeId) ?? null;
+	const childTeams = teams.filter((team) => team.parentId === scopeId);
+	const isLoading = scopeQuery.isLoading || scopeAccessQuery.isLoading;
+	const accessRows = useMemo(() => {
+		const rows = [];
+		for (const member of members) {
+			const user = userMap.get(member.userId);
+			rows.push({
+				id: `member:${member.id}`,
+				label: user?.name || user?.email || member.userId,
+				kind: "user",
+				permission: null,
+				source: "Member",
+				group: "Members",
+				canRemove: isAdmin,
+				onRemove: () => removeTeamMember.mutate(member.userId)
+			});
+		}
+		for (const record of scopeAccess) {
+			if (record.teamId === scopeId) continue;
+			const isUser = !!record.userId;
+			const userId = record.userId ?? null;
+			rows.push({
+				id: `access:${record.id}`,
+				label: isUser ? userMap.get(userId ?? "")?.name || userMap.get(userId ?? "")?.email || userId || "Unknown" : teams.find((team) => team.id === record.teamId)?.name || record.teamId || "Unknown",
+				kind: isUser ? "user" : "team",
+				permission: record.permission,
+				source: "Direct grant",
+				group: "Access Grants",
+				canRemove: isAdmin,
+				onPermissionChange: userId ? (permission) => grantScopeAccess.mutate({
+					userId,
+					permission
+				}) : void 0,
+				onRemove: () => revokeScopeAccess.mutate(record.id)
+			});
+		}
+		return rows;
+	}, [
+		members,
+		scopeAccess,
+		userMap,
+		teams,
+		isAdmin,
+		removeTeamMember,
+		grantScopeAccess,
+		revokeScopeAccess
+	]);
+	const memberRows = accessRows.filter((row) => row.group === "Members");
+	accessRows.filter((row) => row.group === "Access Grants");
+	const scopePath = useMemo(() => {
+		const path = [];
+		let current = teams.find((team) => team.id === scopeId) ?? null;
+		while (current) {
+			path.unshift(current);
+			current = current.parentId ? teams.find((team) => team.id === current?.parentId) ?? null : null;
+		}
+		return path;
+	}, [teams, scopeId]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-5 py-4 overflow-hidden border-b shrink-0 border-imp-border",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-3",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center flex-none w-10 h-10 rounded-xl bg-imp-primary/10 text-imp-primary",
+						children: /* @__PURE__ */ jsx(Users, { className: "w-5 h-5" })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("h2", {
+								className: "flex-1 min-w-0 text-base font-semibold truncate",
+								children: scopeName
+							}), isAdmin ? /* @__PURE__ */ jsx("div", {
+								className: "flex items-center gap-1.5",
+								children: /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => setShowDeleteConfirm(true),
+									className: "flex items-center gap-1.5 rounded-md border border-red-200 px-3 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-500/10 dark:border-red-500/20 dark:text-red-400",
+									children: [/* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }), " Delete team"]
+								})
+							}) : null]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-1 mt-1 text-[11px] text-imp-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", { children: "Root" }), scopePath.map((team) => /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", {
+									className: team.id === scopeId ? "font-medium text-imp-foreground" : void 0,
+									children: team.name
+								})]
+							}, team.id))]
+						})]
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-between",
+					children: /* @__PURE__ */ jsx("p", {
+						className: "mt-3 text-xs text-imp-muted-foreground",
+						children: "Access applies to all flows inside this team and its child teams."
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 px-5 py-4 overflow-x-hidden overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-4",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ jsx("h3", {
+									className: "text-sm font-semibold text-imp-foreground",
+									children: "Team Role on Child Flows"
+								}), /* @__PURE__ */ jsx("p", {
+									className: "mt-0.5 text-xs text-imp-muted-foreground",
+									children: "Base role applied to every flow inside this team."
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "shrink-0",
+								children: /* @__PURE__ */ jsx(OptionalRoleSelector, {
+									value: teamRoleRecord?.permission ?? null,
+									emptyLabel: "No team role",
+									onChange: (nextPermission) => {
+										if (nextPermission === null) {
+											if (teamRoleRecord) revokeScopeAccess.mutate(teamRoleRecord.id);
+											return;
+										}
+										grantScopeAccess.mutate({
+											teamId: scopeId,
+											permission: nextPermission
+										});
+									}
+								})
+							})]
+						}) }),
+						/* @__PURE__ */ jsxs("section", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ jsx("h3", {
+									className: "text-sm font-semibold text-imp-foreground",
+									children: "Members"
+								}), isAdmin ? /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => setShowMemberDialog(true),
+									className: "flex items-center gap-1.5 rounded-md border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+									children: [/* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }), " Add Member"]
+								}) : null]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "overflow-hidden border rounded-xl border-imp-border bg-imp-background/40",
+								children: /* @__PURE__ */ jsx(AccessTable, {
+									rows: memberRows,
+									isLoading,
+									emptyLabel: "No members"
+								})
+							})]
+						}),
+						childTeams.length > 0 ? /* @__PURE__ */ jsxs("section", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "text-sm font-semibold text-imp-foreground",
+								children: "Sub-teams"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "space-y-2",
+								children: childTeams.map((team) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2 px-3 py-2 border rounded-xl border-imp-border bg-imp-background/40",
+									children: [
+										/* @__PURE__ */ jsx(Users, { className: "w-3.5 h-3.5 text-imp-muted-foreground" }),
+										/* @__PURE__ */ jsx("span", {
+											className: "flex-1 min-w-0 text-sm font-medium truncate text-imp-foreground",
+											children: team.name
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-[11px] text-imp-muted-foreground",
+											children: "Child team"
+										})
+									]
+								}, team.id))
+							})]
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(FormDialog, {
+				open: showGrantDialog,
+				onClose: () => setShowGrantDialog(false),
+				title: "Grant Scope Access",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [/* @__PURE__ */ jsx(MemberCombobox, {
+						users,
+						excludeIds: existingScopeUserIds,
+						selectedUserIds: grantUserIds,
+						onSelect: setGrantUserIds
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(RoleSelector, {
+							value: permission,
+							onChange: setPermission
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								if (grantUserIds.length === 0) return;
+								for (const userId of grantUserIds) grantScopeAccess.mutate({
+									userId,
+									permission
+								});
+								setGrantUserIds([]);
+								setShowGrantDialog(false);
+							},
+							disabled: grantUserIds.length === 0 || grantScopeAccess.isPending,
+							className: "ml-auto rounded-md bg-imp-primary px-4 py-2 text-sm font-semibold text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+							children: "Grant"
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(FormDialog, {
+				open: showMemberDialog,
+				onClose: () => setShowMemberDialog(false),
+				title: "Add Team Member",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [/* @__PURE__ */ jsx(MemberCombobox, {
+						users,
+						excludeIds: existingMemberIds,
+						selectedUserIds: memberUserIds,
+						onSelect: setMemberUserIds
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => {
+							if (memberUserIds.length === 0) return;
+							for (const userId of memberUserIds) addTeamMember.mutate({ userId });
+							setMemberUserIds([]);
+							setShowMemberDialog(false);
+						},
+						disabled: memberUserIds.length === 0 || addTeamMember.isPending,
+						className: "rounded-md bg-imp-primary px-4 py-2 text-sm font-semibold text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+						children: "Add"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: showDeleteConfirm,
+				onOpenChange: (open) => !open && setShowDeleteConfirm(false),
+				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 team"
+						}) }),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-imp-muted-foreground",
+							children: [
+								"Are you sure you want to delete",
+								" ",
+								/* @__PURE__ */ jsx("strong", {
+									className: "text-imp-foreground",
+									children: scopeName
+								}),
+								"? Flows directly inside this team will move to the parent team when one exists, and this team's access grants will be removed."
+							]
+						}),
+						/* @__PURE__ */ jsxs(DialogFooter, {
+							className: "gap-2 sm:gap-0",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setShowDeleteConfirm(false),
+								className: "rounded-md border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground hover:text-imp-foreground",
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => {
+									deleteScope.mutate(scopeId);
+									setShowDeleteConfirm(false);
+								},
+								className: "rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700",
+								children: "Delete"
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/access-control/PrincipalCombobox.tsx
+function PrincipalCombobox({ users, teams, excludeUserIds, excludeTeamIds, selections, onSelect }) {
+	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef(null);
+	const selectedUserIds = new Set(selections.filter((s) => s.type === "user").map((s) => s.id));
+	const selectedTeamIds = new Set(selections.filter((s) => s.type === "team").map((s) => s.id));
+	const filteredUsers = users.filter((user) => {
+		if (excludeUserIds.has(user.id)) return false;
+		if (selectedUserIds.has(user.id)) return false;
+		return `${user.name || ""} ${user.email || ""} ${user.id}`.toLowerCase().includes(query.toLowerCase());
+	});
+	const filteredTeams = teams.filter((team) => {
+		if (excludeTeamIds.has(team.id)) return false;
+		if (selectedTeamIds.has(team.id)) return false;
+		return `${team.name} ${team.description || ""}`.toLowerCase().includes(query.toLowerCase());
+	});
+	const toggle = (sel) => {
+		onSelect(selections.some((s) => s.type === sel.type && s.id === sel.id) ? selections.filter((s) => !(s.type === sel.type && s.id === sel.id)) : [...selections, sel]);
+	};
+	const getLabel = (sel) => {
+		if (sel.type === "user") {
+			const user = users.find((u) => u.id === sel.id);
+			return user?.name || user?.email || sel.id;
+		}
+		return teams.find((t) => t.id === sel.id)?.name || sel.id;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		onBlur: (e) => {
+			if (!containerRef.current?.contains(e.relatedTarget)) setOpen(false);
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-[2.5rem] w-full cursor-text flex-wrap gap-1.5 rounded-md border border-imp-border bg-imp-background px-2 py-1.5 focus-within:border-imp-primary/50",
+			onClick: () => setOpen(true),
+			children: [selections.map((sel) => /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1 rounded-md border border-imp-border bg-imp-muted px-2 py-0.5 text-xs font-medium text-imp-foreground",
+				children: [
+					sel.type === "user" ? /* @__PURE__ */ jsx(User, { className: "h-3 w-3 shrink-0 text-imp-muted-foreground" }) : /* @__PURE__ */ jsx(Users, { className: "h-3 w-3 shrink-0 text-imp-muted-foreground" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "max-w-[140px] truncate",
+						children: getLabel(sel)
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: (e) => {
+							e.stopPropagation();
+							toggle(sel);
+						},
+						className: "ml-0.5 text-imp-muted-foreground hover:text-imp-foreground",
+						children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+					})
+				]
+			}, `${sel.type}:${sel.id}`)), /* @__PURE__ */ jsx("input", {
+				value: query,
+				onChange: (e) => {
+					setQuery(e.target.value);
+					setOpen(true);
+				},
+				onFocus: () => setOpen(true),
+				placeholder: selections.length === 0 ? "Search users or teams…" : "Add more…",
+				className: "min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-imp-muted-foreground"
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "absolute left-0 z-20 mt-1 w-full overflow-y-auto rounded-md border border-imp-border bg-imp-background shadow-lg top-full max-h-52",
+			children: filteredTeams.length === 0 && filteredUsers.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-2 text-xs text-imp-muted-foreground",
+				children: query ? "No matches." : "No more users or teams to add."
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredTeams.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				className: "px-3 py-1 text-[10px] font-medium uppercase tracking-wider text-imp-muted-foreground",
+				children: "Teams"
+			}), filteredTeams.map((team) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => {
+					toggle({
+						type: "team",
+						id: team.id
+					});
+					setQuery("");
+				},
+				className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-imp-muted/50",
+				children: [/* @__PURE__ */ jsx(Users, { className: "h-4 w-4 shrink-0 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: team.name
+				})]
+			}, team.id))] }), filteredUsers.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				className: "px-3 py-1 text-[10px] font-medium uppercase tracking-wider text-imp-muted-foreground",
+				children: "Users"
+			}), filteredUsers.map((user) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => {
+					toggle({
+						type: "user",
+						id: user.id
+					});
+					setQuery("");
+				},
+				className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-imp-muted/50",
+				children: [/* @__PURE__ */ jsx(User, { className: "h-4 w-4 shrink-0 text-imp-muted-foreground" }), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate font-medium",
+						children: user.name || user.email || user.id
+					}), user.name && user.email && /* @__PURE__ */ jsx("div", {
+						className: "truncate text-xs text-imp-muted-foreground",
+						children: user.email
+					})]
+				})]
+			}, user.id))] })] })
+		})]
+	});
+}
+//#endregion
+//#region src/frontend/components/access-control/FlowDetailPanel.tsx
+function FlowDetailPanel({ flowId, flowName, users, userMap, teams, isAdmin }) {
+	const effectiveFlowAccessQuery = useEffectiveFlowAccess(flowId);
+	const grantFlowAccess = useGrantFlowAccess(flowId);
+	const revokeFlowAccess = useRevokeFlowAccess(flowId);
+	const [showGrantDialog, setShowGrantDialog] = useState(false);
+	const [principalSelections, setPrincipalSelections] = useState([]);
+	const [permission, setPermission] = useState("viewer");
+	const effectiveRecords = effectiveFlowAccessQuery.data?.records ?? [];
+	const existingDirectUserIds = new Set(effectiveRecords.filter((record) => record.source === "direct" && record.userId).map((record) => record.userId));
+	const existingDirectTeamIds = new Set(effectiveRecords.filter((record) => record.source === "direct" && record.teamId).map((record) => record.teamId));
+	const owningTeam = teams.find((team) => team.id === effectiveFlowAccessQuery.data?.scopeId) ?? null;
+	const scopePath = useMemo(() => {
+		const path = [];
+		let current = owningTeam;
+		while (current) {
+			path.unshift(current);
+			current = current.parentId ? teams.find((team) => team.id === current?.parentId) ?? null : null;
+		}
+		return path;
+	}, [owningTeam, teams]);
+	const accessRows = useMemo(() => {
+		const rows = effectiveRecords.map((record) => {
+			const isUser = !!record.userId;
+			const userId = record.userId ?? null;
+			const teamId = record.teamId ?? null;
+			return {
+				id: `${record.source}:${record.id}`,
+				label: isUser ? userMap.get(userId ?? "")?.name || userMap.get(userId ?? "")?.email || userId || "Unknown" : teams.find((team) => team.id === teamId)?.name || teamId || "Unknown",
+				kind: isUser ? "user" : "team",
+				permission: record.permission,
+				source: record.source === "direct" ? "Direct grant" : `via ${record.scopeName || "team"}`,
+				group: record.source === "direct" ? "Direct" : "Inherited",
+				canRemove: record.source === "direct" && isAdmin,
+				onPermissionChange: record.source === "direct" ? (permission) => grantFlowAccess.mutate({
+					...userId ? { userId } : teamId ? { teamId } : {},
+					permission
+				}) : void 0,
+				onRemove: () => revokeFlowAccess.mutate(record.id)
+			};
+		});
+		rows.sort((a, b) => {
+			const aIsDirect = a.source === "Direct grant" ? 1 : 0;
+			return (b.source === "Direct grant" ? 1 : 0) - aIsDirect;
+		});
+		return rows;
+	}, [
+		effectiveRecords,
+		userMap,
+		teams,
+		isAdmin,
+		grantFlowAccess,
+		revokeFlowAccess
+	]);
+	const directRows = accessRows.filter((row) => row.group === "Direct");
+	const inheritedRows = accessRows.filter((row) => row.group === "Inherited");
+	const openFlow = () => {
+		const path = window.location.pathname;
+		const accessIdx = path.lastIndexOf("/access");
+		const basePath = accessIdx >= 0 ? path.slice(0, accessIdx) : path;
+		window.open(`${basePath}/flow/${flowId}`, "_blank");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "px-5 py-4 overflow-hidden border-b shrink-0 border-imp-border",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start gap-3",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center flex-none w-10 h-10 rounded-xl bg-imp-primary/10 text-imp-primary",
+							children: /* @__PURE__ */ jsx(Workflow, { className: "w-5 h-5" })
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "flex items-center gap-2",
+								children: /* @__PURE__ */ jsx("h2", {
+									className: "flex-1 min-w-0 text-base font-semibold truncate",
+									children: flowName
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "mt-1 flex flex-wrap items-center gap-1 text-[11px] text-imp-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsx("span", { children: "Root" }),
+									scopePath.map((team) => /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: team.name })]
+									}, team.id)),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", {
+											className: "font-medium text-imp-foreground",
+											children: flowName
+										})]
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center gap-1.5",
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: openFlow,
+								className: "flex items-center gap-1.5 rounded-md border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+								children: [/* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4" }), " Open in Editor"]
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-3 text-xs text-imp-muted-foreground",
+					children: "All principals with access and how they got it."
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 px-5 py-4 overflow-x-hidden overflow-y-auto",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ jsxs("section", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "text-sm font-semibold text-imp-foreground",
+								children: "Direct Access"
+							}), isAdmin ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => setShowGrantDialog(true),
+								className: "flex items-center gap-1.5 rounded-md border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-muted-foreground transition-colors hover:border-imp-primary/50 hover:text-imp-foreground",
+								children: [/* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }), " Grant Access"]
+							}) : null]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "overflow-hidden border rounded-xl border-imp-border bg-imp-background/40",
+							children: /* @__PURE__ */ jsx(AccessTable, {
+								rows: directRows,
+								isLoading: effectiveFlowAccessQuery.isLoading,
+								emptyLabel: "No direct access assigned"
+							})
+						})]
+					}), /* @__PURE__ */ jsxs("section", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-semibold text-imp-foreground",
+							children: "Inherited Access"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "overflow-hidden border rounded-xl border-imp-border bg-imp-background/40",
+							children: /* @__PURE__ */ jsx(AccessTable, {
+								rows: inheritedRows,
+								isLoading: effectiveFlowAccessQuery.isLoading,
+								emptyLabel: "No inherited access"
+							})
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(FormDialog, {
+				open: showGrantDialog,
+				onClose: () => setShowGrantDialog(false),
+				title: "Grant Flow Access",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [/* @__PURE__ */ jsx(PrincipalCombobox, {
+						users,
+						teams,
+						excludeUserIds: existingDirectUserIds,
+						excludeTeamIds: existingDirectTeamIds,
+						selections: principalSelections,
+						onSelect: setPrincipalSelections
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(RoleSelector, {
+							value: permission,
+							onChange: setPermission
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								if (principalSelections.length === 0) return;
+								for (const sel of principalSelections) grantFlowAccess.mutate({
+									...sel.type === "user" ? { userId: sel.id } : { teamId: sel.id },
+									permission
+								});
+								setPrincipalSelections([]);
+								setShowGrantDialog(false);
+							},
+							disabled: principalSelections.length === 0 || grantFlowAccess.isPending,
+							className: "ml-auto rounded-md bg-imp-primary px-4 py-2 text-sm font-semibold text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+							children: "Grant"
+						})]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/access-control/MoveConfirmationDialog.tsx
+function MoveConfirmationDialog({ pendingMove, preview, error, onClose }) {
+	const moveFlow = useMoveFlow(pendingMove?.type === "flow" ? pendingMove.id : "");
+	const reparentScope = useUpdateTeam(pendingMove?.type === "scope" ? pendingMove.id : "");
+	const isSubmitting = moveFlow.isPending || reparentScope.isPending;
+	const handleConfirm = async () => {
+		if (!pendingMove) return;
+		if (pendingMove.type === "flow") await moveFlow.mutateAsync(pendingMove.targetScopeId);
+		else await reparentScope.mutateAsync({ parentId: pendingMove.targetScopeId });
+		onClose();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/35",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-full max-w-lg rounded-xl border border-imp-border bg-imp-background shadow-[var(--imp-shadow-floating)]",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between px-5 py-4 border-b border-imp-border",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-sm font-semibold text-imp-foreground",
+						children: [/* @__PURE__ */ jsx(Move, { className: "w-4 h-4 text-imp-primary" }), "Confirm Move"]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-xs text-imp-muted-foreground",
+						children: "Review the access impact before applying this hierarchy change."
+					})] }), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						className: "p-1 rounded text-imp-muted-foreground hover:text-imp-foreground",
+						children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-5 py-4 space-y-4 text-sm",
+					children: error ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-2 text-red-700 border border-red-300 rounded-lg bg-red-50 dark:border-red-900 dark:bg-red-950/20 dark:text-red-300",
+						children: error
+					}) : !preview ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-4 text-center border rounded-lg border-imp-border bg-imp-card text-imp-muted-foreground",
+						children: "Calculating impact…"
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+						className: "px-3 py-3 border rounded-lg border-imp-border bg-imp-card",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "font-medium text-imp-foreground",
+							children: [
+								"Move \"",
+								preview.item.name,
+								"\" to",
+								" ",
+								preview.target.path.length > 0 ? preview.target.path.join(" / ") : "Top level"
+							]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "mt-1 text-xs text-imp-muted-foreground",
+							children: [
+								preview.affectedFlows,
+								" flow",
+								preview.affectedFlows === 1 ? "" : "s",
+								" affected"
+							]
+						})]
+					}), /* @__PURE__ */ jsxs("div", { children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "mb-2 text-xs font-medium tracking-wider uppercase text-imp-muted-foreground",
+							children: "Access Changes"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "p-2 space-y-1 overflow-y-auto border rounded-lg max-h-56 border-imp-border bg-imp-card",
+							children: preview.accessChanges.gained.length === 0 ? /* @__PURE__ */ jsx("div", {
+								className: "px-2 py-2 text-xs text-imp-muted-foreground",
+								children: "No new principals gain access from this move."
+							}) : preview.accessChanges.gained.map((entry) => /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs",
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "flex items-center justify-center w-6 h-6 rounded-full shrink-0 bg-imp-primary/10",
+										children: entry.userId ? /* @__PURE__ */ jsx(User, { className: "w-3 h-3 text-imp-primary" }) : /* @__PURE__ */ jsx(Users, { className: "w-3 h-3 text-imp-primary" })
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex-1 min-w-0",
+										children: [/* @__PURE__ */ jsx("div", {
+											className: "font-medium truncate",
+											children: entry.name
+										}), /* @__PURE__ */ jsx("div", {
+											className: "truncate text-[10px] text-imp-muted-foreground",
+											children: entry.source
+										})]
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: `rounded px-1.5 py-0.5 text-[10px] font-medium ${getPermissionBadgeClasses(entry.permission)}`,
+										children: entry.permission
+									})
+								]
+							}, `${entry.source}-${entry.name}`))
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "mt-2 text-xs text-imp-muted-foreground",
+							children: [
+								preview.accessChanges.unchanged,
+								" access grant",
+								preview.accessChanges.unchanged === 1 ? "" : "s",
+								" remain unchanged."
+							]
+						})
+					] })] })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-end gap-2 px-5 py-4 border-t border-imp-border",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						className: "rounded border border-imp-border px-3 py-1.5 text-sm text-imp-muted-foreground hover:text-imp-foreground",
+						children: "Cancel"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleConfirm,
+						disabled: !preview || isSubmitting || !!error,
+						className: "rounded bg-imp-primary px-3 py-1.5 text-sm font-medium text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+						children: isSubmitting ? "Applying…" : `Move ${pendingMove?.type === "scope" ? "Team" : "Flow"}`
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/frontend/stores/accessControlStore.ts
+const useAccessControlStore = create()((set) => ({
+	selected: null,
+	setSelected: (item) => set({ selected: item }),
+	expandedNodes: /* @__PURE__ */ new Set(),
+	setExpandedNodes: (nodes) => set({ expandedNodes: nodes }),
+	toggleNode: (scopeId) => set((state) => {
+		const next = new Set(state.expandedNodes);
+		if (next.has(scopeId)) next.delete(scopeId);
+		else next.add(scopeId);
+		return { expandedNodes: next };
+	}),
+	expandAll: (ids) => set({ expandedNodes: new Set(ids) }),
+	search: "",
+	setSearch: (q) => set({ search: q }),
+	showNewTeam: false,
+	setShowNewTeam: (show) => set({ showNewTeam: show }),
+	newTeamName: "",
+	setNewTeamName: (name) => set({ newTeamName: name }),
+	draggedItem: null,
+	dropTarget: null,
+	startDrag: (item) => set({
+		draggedItem: item,
+		dropTarget: null
+	}),
+	endDrag: () => set({
+		draggedItem: null,
+		dropTarget: null
+	}),
+	setDropTarget: (targetId) => set({ dropTarget: targetId }),
+	pendingMove: null,
+	movePreview: null,
+	moveError: null,
+	setPendingMove: (move) => set({ pendingMove: move }),
+	setMovePreview: (preview) => set({ movePreview: preview }),
+	setMoveError: (error) => set({ moveError: error }),
+	clearMove: () => set({
+		pendingMove: null,
+		movePreview: null,
+		moveError: null
+	})
+}));
+function collectScopeIds(scopes) {
+	return scopes.flatMap((scope) => [scope.id, ...collectScopeIds(scope.children)]);
+}
+function findScopeNode$1(scopes, scopeId) {
+	for (const scope of scopes) {
+		if (scope.id === scopeId) return scope;
+		const child = findScopeNode$1(scope.children, scopeId);
+		if (child) return child;
+	}
+	return null;
+}
+function scopeContains(scope, potentialChildId) {
+	for (const child of scope.children) if (child.id === potentialChildId || scopeContains(child, potentialChildId)) return true;
+	return false;
+}
+function isDescendantScope(scopes, draggedScopeId, potentialTargetId) {
+	const draggedScope = findScopeNode$1(scopes, draggedScopeId);
+	if (!draggedScope) return false;
+	return scopeContains(draggedScope, potentialTargetId);
+}
+/**
+* Returns true if dropping `dragged` onto `targetId` is a valid move.
+* targetId of null means "move to root".
+*/
+function canDropOnTarget(dragged, targetId, allScopes) {
+	if (dragged.type === "scope" && dragged.id === targetId) return false;
+	if (dragged.type === "scope" && targetId !== null && isDescendantScope(allScopes, dragged.id, targetId)) return false;
+	if (dragged.parentId === targetId) return false;
+	return true;
+}
+//#endregion
+//#region src/frontend/components/access-control/AccessControlPage.tsx
+function findScopeNode(scopes, scopeId) {
+	for (const scope of scopes) {
+		if (scope.id === scopeId) return scope;
+		const child = findScopeNode(scope.children, scopeId);
+		if (child) return child;
+	}
+	return null;
+}
+function filterScopes(scopes, query) {
+	return scopes.reduce((acc, scope) => {
+		const matchesScope = scope.name.toLowerCase().includes(query) || (scope.description?.toLowerCase().includes(query) ?? false);
+		const matchingChildren = filterScopes(scope.children, query);
+		const matchingFlows = scope.flows.filter((flow) => flow.name.toLowerCase().includes(query));
+		if (matchesScope || matchingChildren.length > 0 || matchingFlows.length > 0) acc.push({
+			...scope,
+			children: matchingChildren,
+			flows: matchingFlows
+		});
+		return acc;
+	}, []);
+}
+function findSelectedName(scopes, flows, selected) {
+	if (!selected) return null;
+	if (selected.kind === "team") return findScopeNode(scopes, selected.id)?.name ?? selected.name;
+	const stack = [...flows];
+	const scopeStack = [...scopes];
+	while (scopeStack.length > 0) {
+		const current = scopeStack.pop();
+		if (!current) break;
+		stack.push(...current.flows);
+		scopeStack.push(...current.children);
+	}
+	return stack.find((flow) => flow.id === selected.id)?.name ?? selected.name;
+}
+function FlowTreeRow({ flow, isSelected, onSelect }) {
+	const { draggedItem, startDrag, endDrag } = useAccessControlStore();
+	return /* @__PURE__ */ jsxs("div", {
+		draggable: true,
+		onDragStart: (event) => {
+			event.dataTransfer.effectAllowed = "move";
+			startDrag({
+				type: "flow",
+				id: flow.id,
+				name: flow.name,
+				parentId: flow.scopeId ?? null
+			});
+		},
+		onDragEnd: endDrag,
+		onClick: () => onSelect(flow),
+		className: clsx("group flex cursor-pointer items-center gap-2 rounded-md px-4 py-1.5 transition-colors", "hover:bg-imp-muted/50", draggedItem?.type === "flow" && draggedItem.id === flow.id && "opacity-40", isSelected && "bg-imp-primary/10 text-imp-primary ring-1 ring-imp-primary/30"),
+		children: [
+			/* @__PURE__ */ jsx(Workflow, { className: clsx("h-4 w-4 shrink-0", isSelected ? "text-imp-primary" : "text-imp-muted-foreground") }),
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 min-w-0 text-sm font-medium truncate",
+				children: flow.name
+			}),
+			/* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 text-imp-muted-foreground/60 opacity-0 transition-opacity group-hover:opacity-100" })
+		]
+	});
+}
+function ScopeTreeRow({ scope, allScopes, depth, onSelectScope, onSelectFlow, onTriggerMove }) {
+	const { draggedItem, dropTarget, selected, expandedNodes, startDrag, endDrag, setDropTarget, toggleNode } = useAccessControlStore();
+	const isExpanded = expandedNodes.has(scope.id);
+	const isSelected = selected?.kind === "team" && selected.id === scope.id;
+	const isDragging = draggedItem?.type === "scope" && draggedItem.id === scope.id;
+	const hasChildren = scope.children.length > 0 || scope.flows.length > 0;
+	const canDrop = draggedItem !== null && canDropOnTarget(draggedItem, scope.id, allScopes);
+	const isDropTarget = dropTarget === scope.id && canDrop;
+	const handleDragOver = (event) => {
+		if (!draggedItem || !canDrop) return;
+		event.preventDefault();
+		event.stopPropagation();
+		if (dropTarget !== scope.id) setDropTarget(scope.id);
+	};
+	const handleDragLeave = (event) => {
+		const related = event.relatedTarget;
+		if (related && event.currentTarget.contains(related)) return;
+		if (dropTarget === scope.id) setDropTarget(null);
+	};
+	const handleDrop = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!draggedItem || !canDrop) return;
+		onTriggerMove(draggedItem, scope.id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop,
+		children: [/* @__PURE__ */ jsxs("div", {
+			draggable: true,
+			onDragStart: (event) => {
+				event.dataTransfer.effectAllowed = "move";
+				startDrag({
+					type: "scope",
+					id: scope.id,
+					name: scope.name,
+					parentId: scope.parentId ?? null
+				});
+			},
+			onDragEnd: endDrag,
+			onClick: () => onSelectScope(scope),
+			className: clsx("group flex cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors", isDragging && "opacity-40", isDropTarget && "ring-2 ring-imp-primary/40 bg-imp-primary/5", isSelected ? "text-imp-primary ring-1 ring-imp-primary/30" : "hover:bg-accent"),
+			children: [
+				hasChildren ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: (event) => {
+						event.stopPropagation();
+						toggleNode(scope.id);
+					},
+					className: "rounded p-0.5 text-imp-muted-foreground hover:bg-imp-muted",
+					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+				}) : /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0" }),
+				/* @__PURE__ */ jsx(Users, { className: clsx("h-4 w-4 shrink-0", isSelected ? "text-imp-primary" : "text-imp-muted-foreground") }),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 min-w-0 text-sm font-medium truncate",
+					children: scope.name
+				}),
+				scope.teamPermission ? /* @__PURE__ */ jsx("span", {
+					className: clsx("inline-flex shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium", getPermissionBadgeClasses(scope.teamPermission)),
+					children: formatPermissionLabel(scope.teamPermission)
+				}) : null,
+				/* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 text-imp-muted-foreground/60 opacity-0 transition-opacity group-hover:opacity-100" })
+			]
+		}), isExpanded ? /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1 border-l border-imp-border",
+			style: { marginLeft: "22px" },
+			children: [scope.flows.map((flow) => /* @__PURE__ */ jsx(FlowTreeRow, {
+				flow,
+				isSelected: selected?.kind === "flow" && selected.id === flow.id,
+				onSelect: onSelectFlow
+			}, flow.id)), scope.children.map((child) => /* @__PURE__ */ jsx(ScopeTreeRow, {
+				scope: child,
+				allScopes,
+				depth: depth + 1,
+				onSelectScope,
+				onSelectFlow,
+				onTriggerMove
+			}, child.id))]
+		}) : null]
+	});
+}
+const EMPTY_SCOPES = [];
+const EMPTY_FLOWS = [];
+function AccessControlPage() {
+	const { isAuthenticated, checkPermission } = useRbac();
+	const isAdmin = isAuthenticated && checkPermission("admin:*");
+	const users = useUsers$1();
+	const userMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const user of users) map.set(user.id, user);
+		return map;
+	}, [users]);
+	const teams = useTeams().data?.teams ?? [];
+	const scopeTreeQuery = useScopeTree();
+	const createTeam = useCreateTeam();
+	const previewMove = usePreviewMove();
+	const { selected, setSelected, search, setSearch, expandedNodes, expandAll, showNewTeam, setShowNewTeam, newTeamName, setNewTeamName, draggedItem, dropTarget, setDropTarget, endDrag, pendingMove, setPendingMove, movePreview, setMovePreview, moveError, setMoveError, clearMove } = useAccessControlStore();
+	const scopes = scopeTreeQuery.data?.scopes ?? EMPTY_SCOPES;
+	const unscopedFlows = scopeTreeQuery.data?.unscopedFlows ?? EMPTY_FLOWS;
+	useEffect(() => {
+		if (scopes.length > 0 && expandedNodes.size === 0) expandAll(collectScopeIds(scopes));
+	}, [scopes]);
+	useEffect(() => {
+		scopeTreeQuery.refetch();
+	}, []);
+	const normalizedSearch = search.trim().toLowerCase();
+	const filteredScopes = useMemo(() => normalizedSearch ? filterScopes(scopes, normalizedSearch) : scopes, [scopes, normalizedSearch]);
+	const filteredUnscopedFlows = useMemo(() => normalizedSearch ? unscopedFlows.filter((f) => f.name.toLowerCase().includes(normalizedSearch)) : unscopedFlows, [unscopedFlows, normalizedSearch]);
+	const selectedName = useMemo(() => findSelectedName(scopes, unscopedFlows, selected), [
+		scopes,
+		unscopedFlows,
+		selected
+	]);
+	const hasTreeItems = filteredScopes.length > 0 || filteredUnscopedFlows.length > 0;
+	const handleTriggerMove = useCallback(async (item, targetScopeId) => {
+		endDrag();
+		if (!canDropOnTarget(item, targetScopeId, scopes)) return;
+		setPendingMove({
+			type: item.type,
+			id: item.id,
+			name: item.name,
+			targetScopeId
+		});
+		setMovePreview(null);
+		setMoveError(null);
+		try {
+			setMovePreview(await previewMove.mutateAsync({
+				type: item.type,
+				id: item.id,
+				targetScopeId
+			}));
+		} catch (err) {
+			setMoveError(err instanceof Error ? err.message : "Failed to preview move");
+		}
+	}, [
+		scopes,
+		endDrag,
+		previewMove,
+		setPendingMove,
+		setMovePreview,
+		setMoveError
+	]);
+	if (!isAuthenticated) return /* @__PURE__ */ jsx(PageLayout, {
+		title: "Access Control",
+		subtitle: "Manage team hierarchy and flow-level access grants.",
+		icon: Shield,
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-imp-muted-foreground",
+			children: "Please sign in to access this page."
+		})
+	});
+	const isLoading = scopeTreeQuery.isLoading;
+	return /* @__PURE__ */ jsxs(PageLayout, {
+		title: "Access Control",
+		subtitle: "Manage team hierarchy and flow-level access grants.",
+		icon: Shield,
+		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 w-3.5 h-3.5 pointer-events-none left-3 top-1/2 -translate-y-1/2 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+						value: search,
+						onChange: (event) => setSearch(event.target.value),
+						placeholder: "Search teams and flows…",
+						className: "w-full py-2 pr-3 text-sm border rounded-lg outline-none pl-9 border-imp-border bg-imp-background placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
+					})]
+				}), isAdmin ? showNewTeam ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							value: newTeamName,
+							onChange: (event) => setNewTeamName(event.target.value),
+							placeholder: "Team name",
+							className: "px-2.5 py-2 text-sm border rounded-lg border-imp-border bg-imp-background",
+							autoFocus: true,
+							onKeyDown: (event) => {
+								if (event.key === "Enter" && newTeamName.trim()) {
+									createTeam.mutate({ name: newTeamName.trim() });
+									setNewTeamName("");
+									setShowNewTeam(false);
+								}
+								if (event.key === "Escape") {
+									setShowNewTeam(false);
+									setNewTeamName("");
+								}
+							}
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								if (!newTeamName.trim()) return;
+								createTeam.mutate({ name: newTeamName.trim() });
+								setNewTeamName("");
+								setShowNewTeam(false);
+							},
+							disabled: !newTeamName.trim(),
+							className: "px-3 py-2 text-sm font-medium rounded-lg bg-imp-primary text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+							children: "Create"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setShowNewTeam(false);
+								setNewTeamName("");
+							},
+							className: "px-3 py-2 text-sm rounded-lg text-imp-muted-foreground hover:text-imp-foreground",
+							children: "Cancel"
+						})
+					]
+				}) : /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => setShowNewTeam(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 hover:border-imp-primary/50 hover:text-imp-foreground",
+					children: [/* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }), " New Team"]
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid h-[calc(100vh-220px)] min-h-130 border rounded-lg overflow-hidden",
+				style: { gridTemplateColumns: "320px 1fr" },
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col overflow-hidden bg-imp-muted/20",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex-1 px-1 py-2 overflow-y-auto",
+						onDragOver: (event) => {
+							if (!draggedItem) return;
+							if (dropTarget === null) {
+								event.preventDefault();
+								setDropTarget("root");
+							}
+						},
+						onDragLeave: (event) => {
+							const related = event.relatedTarget;
+							if (related && event.currentTarget.contains(related)) return;
+							if (dropTarget === "root") setDropTarget(null);
+						},
+						onDrop: (event) => {
+							event.preventDefault();
+							if (!draggedItem) return;
+							handleTriggerMove(draggedItem, null);
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							className: clsx("min-h-full rounded-lg py-1 transition-colors", dropTarget === "root" ? "bg-imp-primary/5 ring-1 ring-imp-primary/20 ring-inset" : ""),
+							children: isLoading ? /* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center px-4 py-12 text-sm text-center text-imp-muted-foreground",
+								children: "Loading hierarchy…"
+							}) : !hasTreeItems ? /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col items-center justify-center px-6 py-16 text-center",
+								children: [
+									/* @__PURE__ */ jsx(FolderInput, { className: "w-10 h-10 mb-3 opacity-30 text-imp-muted-foreground" }),
+									/* @__PURE__ */ jsx("h3", {
+										className: "text-base font-medium text-imp-foreground",
+										children: normalizedSearch ? "No matching teams or flows" : "No teams or flows yet"
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "max-w-sm mt-2 text-sm text-imp-muted-foreground",
+										children: normalizedSearch ? "Adjust the search to find a team or flow in the hierarchy." : "Create a team to start organizing flows and access scopes."
+									})
+								]
+							}) : /* @__PURE__ */ jsxs("div", {
+								className: "space-y-1",
+								children: [filteredUnscopedFlows.map((flow) => /* @__PURE__ */ jsx(FlowTreeRow, {
+									flow,
+									isSelected: selected?.kind === "flow" && selected.id === flow.id,
+									onSelect: (nextFlow) => setSelected({
+										kind: "flow",
+										id: nextFlow.id,
+										name: nextFlow.name
+									})
+								}, flow.id)), filteredScopes.map((scope) => /* @__PURE__ */ jsx(ScopeTreeRow, {
+									scope,
+									allScopes: scopes,
+									depth: 0,
+									onSelectScope: (nextScope) => setSelected({
+										kind: "team",
+										id: nextScope.id,
+										name: nextScope.name
+									}),
+									onSelectFlow: (nextFlow) => setSelected({
+										kind: "flow",
+										id: nextFlow.id,
+										name: nextFlow.name
+									}),
+									onTriggerMove: handleTriggerMove
+								}, scope.id))]
+							})
+						})
+					})
+				}), /* @__PURE__ */ jsx("aside", {
+					className: "flex flex-col overflow-hidden border-l border-imp-border bg-imp-muted/30",
+					children: !selected ? /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center justify-center h-full gap-4 px-8 text-center text-imp-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center w-12 h-12 rounded-xl bg-imp-primary/5",
+								children: /* @__PURE__ */ jsx(Shield, { className: "w-6 h-6 text-imp-primary/40" })
+							}),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium text-imp-foreground",
+								children: "Select a team or flow"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "mt-1.5 text-xs text-imp-muted-foreground max-w-[280px]",
+								children: "Choose an item from the tree to manage its members and permissions."
+							})] }),
+							hasTreeItems ? null : isAdmin ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => setShowNewTeam(true),
+								className: "flex items-center gap-1.5 rounded-lg border border-imp-border px-3 py-1.5 text-xs font-medium text-imp-foreground transition-colors hover:border-imp-primary/50 hover:bg-imp-muted/50",
+								children: [/* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }), " Create your first team"]
+							}) : null
+						]
+					}) : selected.kind === "team" ? /* @__PURE__ */ jsx(ScopeDetailPanel, {
+						scopeId: selected.id,
+						scopeName: selectedName ?? selected.name,
+						users,
+						userMap,
+						teams,
+						isAdmin: !!isAdmin
+					}) : /* @__PURE__ */ jsx(FlowDetailPanel, {
+						flowId: selected.id,
+						flowName: selectedName ?? selected.name,
+						users,
+						userMap,
+						teams,
+						isAdmin: !!isAdmin
+					})
+				})]
+			}),
+			pendingMove ? /* @__PURE__ */ jsx(MoveConfirmationDialog, {
+				pendingMove,
+				preview: movePreview,
+				error: moveError,
+				onClose: clearMove
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region src/frontend/components/TeamsPage.tsx
+/**
+* TeamsPage — Team management page with create/edit/delete teams and member management.
+*/
+function useUsers() {
+	const api = useApiClient();
+	const [users, setUsers] = useState([]);
+	useEffect(() => {
+		let cancelled = false;
+		fetch(`${api.getBaseURL()}/plugins/auth/users?limit=200`, { credentials: "include" }).then((r) => r.ok ? r.json() : null).then((data) => {
+			if (!cancelled && data?.users) setUsers(data.users);
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [api]);
+	return { users };
+}
+function TeamsPage() {
+	const { isAuthenticated, checkPermission } = useRbac();
+	const teamsQuery = useTeams();
+	const createTeam = useCreateTeam();
+	const deleteTeam = useDeleteTeam();
+	const { users } = useUsers();
+	const [expandedTeamId, setExpandedTeamId] = useState(null);
+	const [teamSearch, setTeamSearch] = useState("");
+	const [showCreateForm, setShowCreateForm] = useState(false);
+	const [newTeamName, setNewTeamName] = useState("");
+	const [newTeamDescription, setNewTeamDescription] = useState("");
+	const teams = teamsQuery.data?.teams ?? [];
+	const isAdmin = isAuthenticated && checkPermission("admin:*");
+	const userMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const u of users) map.set(u.id, u);
+		return map;
+	}, [users]);
+	const filteredTeams = useMemo(() => {
+		const q = teamSearch.trim().toLowerCase();
+		if (!q) return teams;
+		return teams.filter((t) => t.name.toLowerCase().includes(q) || t.description?.toLowerCase().includes(q));
+	}, [teams, teamSearch]);
+	const handleCreate = async () => {
+		if (!newTeamName.trim()) return;
+		await createTeam.mutateAsync({
+			name: newTeamName.trim(),
+			description: newTeamDescription.trim() || void 0
+		});
+		setNewTeamName("");
+		setNewTeamDescription("");
+		setShowCreateForm(false);
+	};
+	const handleDelete = async (teamId) => {
+		await deleteTeam.mutateAsync(teamId);
+		if (expandedTeamId === teamId) setExpandedTeamId(null);
+	};
+	if (!isAuthenticated) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center w-full h-full min-h-0 overflow-y-auto imp-page bg-imp-background text-imp-foreground",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-imp-muted-foreground",
+			children: "Please sign in to access this page."
+		})
+	});
+	return /* @__PURE__ */ jsxs(PageLayout, {
+		title: "Teams",
+		icon: Users,
+		actions: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-xs text-imp-muted-foreground",
+				children: [
+					filteredTeams.length,
+					" team",
+					filteredTeams.length !== 1 ? "s" : ""
+				]
+			}), isAdmin && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setShowCreateForm(!showCreateForm),
+				className: "flex items-center gap-1 px-2 py-1 text-xs font-medium rounded bg-imp-primary text-imp-primary-foreground hover:bg-imp-primary/90",
+				children: [/* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" }), "New Team"]
+			})]
+		}),
+		children: [
+			showCreateForm && /* @__PURE__ */ jsxs("div", {
+				className: "p-3 border rounded-lg border-imp-border bg-imp-card",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "mb-2 text-xs font-medium text-imp-foreground",
+					children: "Create Team"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: newTeamName,
+							onChange: (e) => setNewTeamName(e.target.value),
+							placeholder: "Team name",
+							className: "w-full rounded border border-imp-border bg-imp-background px-2 py-1.5 text-sm placeholder:text-imp-muted-foreground",
+							onKeyDown: (e) => {
+								if (e.key === "Enter") handleCreate();
+							}
+						}),
+						/* @__PURE__ */ jsx("input", {
+							type: "text",
+							value: newTeamDescription,
+							onChange: (e) => setNewTeamDescription(e.target.value),
+							placeholder: "Description (optional)",
+							className: "w-full rounded border border-imp-border bg-imp-background px-2 py-1.5 text-sm placeholder:text-imp-muted-foreground",
+							onKeyDown: (e) => {
+								if (e.key === "Enter") handleCreate();
+							}
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: handleCreate,
+								disabled: createTeam.isPending || !newTeamName.trim(),
+								className: "px-3 py-1 text-xs font-medium rounded bg-imp-primary text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+								children: createTeam.isPending ? "Creating…" : "Create"
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setShowCreateForm(false),
+								className: "px-3 py-1 text-xs rounded text-imp-muted-foreground hover:text-imp-foreground",
+								children: "Cancel"
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+					value: teamSearch,
+					onChange: (e) => setTeamSearch(e.target.value),
+					placeholder: "Search teams…",
+					className: "w-full rounded-lg border border-imp-border bg-transparent py-2 pl-9 pr-3 text-sm outline-none placeholder:text-imp-muted-foreground focus:border-imp-primary/50"
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border rounded-lg border-imp-border bg-imp-card",
+				children: teamsQuery.isLoading ? /* @__PURE__ */ jsx("div", {
+					className: "px-4 py-8 text-sm text-center text-imp-muted-foreground",
+					children: "Loading…"
+				}) : teamsQuery.error ? /* @__PURE__ */ jsx("div", {
+					className: "px-4 py-8 text-sm text-center text-red-500",
+					children: teamsQuery.error instanceof Error ? teamsQuery.error.message : "Failed to load teams"
+				}) : filteredTeams.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "px-4 py-8 text-sm text-center text-imp-muted-foreground",
+					children: teamSearch ? "No teams match this search." : "No teams yet. Create one to get started."
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "divide-y divide-imp-border",
+					children: filteredTeams.map((team) => {
+						const isExpanded = expandedTeamId === team.id;
+						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-3 px-3 py-2",
+							children: [/* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: "flex items-center flex-1 gap-3 text-left transition-opacity hover:opacity-80",
+								onClick: () => setExpandedTeamId(isExpanded ? null : team.id),
+								children: [
+									isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-imp-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-imp-muted-foreground" }),
+									/* @__PURE__ */ jsx(Users, { className: "h-3.5 w-3.5 shrink-0 text-imp-primary" }),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex-1 min-w-0",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "block text-sm font-medium truncate",
+											children: team.name
+										}), team.description && /* @__PURE__ */ jsx("span", {
+											className: "block text-xs truncate text-imp-muted-foreground",
+											children: team.description
+										})]
+									})
+								]
+							}), isAdmin && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => handleDelete(team.id),
+								className: "p-1 rounded shrink-0 text-imp-muted-foreground hover:text-red-500",
+								title: "Delete team",
+								children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+							})]
+						}), isExpanded && /* @__PURE__ */ jsx(TeamMembersPanel, {
+							teamId: team.id,
+							users,
+							userMap,
+							isAdmin: !!isAdmin
+						})] }, team.id);
+					})
+				})
+			})
+		]
+	});
+}
+function TeamMembersPanel({ teamId, users, userMap, isAdmin }) {
+	const { data, isLoading } = useTeam(teamId);
+	const addMember = useAddTeamMember(teamId);
+	const removeMember = useRemoveTeamMember(teamId);
+	const members = data?.members ?? [];
+	const existingUserIds = new Set(members.map((m) => m.userId));
+	const getUserLabel = (userId) => {
+		const u = userMap.get(userId);
+		return u?.name || u?.email || userId;
+	};
+	const [selectedUserId, setSelectedUserId] = useState(null);
+	const handleAdd = async () => {
+		if (!selectedUserId) return;
+		await addMember.mutateAsync({ userId: selectedUserId });
+		setSelectedUserId(null);
+	};
+	const handleRemove = async (userId) => {
+		await removeMember.mutateAsync(userId);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "px-3 pt-2 pb-3 border-t border-imp-border bg-imp-muted/20",
+		children: [isLoading ? /* @__PURE__ */ jsx("p", {
+			className: "py-3 text-xs text-center text-imp-muted-foreground",
+			children: "Loading…"
+		}) : members.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "py-2 text-xs text-imp-muted-foreground",
+			children: "No members yet."
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "mb-2 space-y-1",
+			children: members.map((member) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-2 py-1 text-xs rounded",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center w-5 h-5 rounded-full shrink-0 bg-imp-primary/10",
+						children: /* @__PURE__ */ jsx(User, { className: "w-3 h-3 text-imp-primary" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "flex-1 min-w-0 truncate",
+						children: getUserLabel(member.userId)
+					}),
+					isAdmin && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => handleRemove(member.userId),
+						className: "shrink-0 rounded p-0.5 text-imp-muted-foreground hover:text-red-500",
+						title: "Remove member",
+						children: /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" })
+					})
+				]
+			}, member.id))
+		}), isAdmin && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ jsx(MemberSearchCombobox, {
+				users,
+				excludeIds: existingUserIds,
+				selectedUserId,
+				onSelect: setSelectedUserId
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleAdd,
+				disabled: addMember.isPending || !selectedUserId,
+				className: "shrink-0 rounded bg-imp-primary px-2.5 py-1 text-xs font-medium text-imp-primary-foreground hover:bg-imp-primary/90 disabled:opacity-50",
+				children: addMember.isPending ? "…" : "Add"
+			})]
+		})]
+	});
+}
+function MemberSearchCombobox({ users, excludeIds, selectedUserId, onSelect }) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const containerRef = useRef(null);
+	const inputRef = useRef(null);
+	const selectedUser = selectedUserId ? users.find((u) => u.id === selectedUserId) : null;
+	const filtered = useMemo(() => {
+		const q = query.toLowerCase();
+		return users.filter((u) => {
+			if (excludeIds.has(u.id)) return false;
+			if (!q) return true;
+			return u.name?.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q) || u.id.toLowerCase().includes(q);
+		});
+	}, [
+		users,
+		excludeIds,
+		query
+	]);
+	useEffect(() => {
+		const handleClick = (e) => {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+		};
+		if (open) {
+			document.addEventListener("mousedown", handleClick);
+			return () => document.removeEventListener("mousedown", handleClick);
+		}
+	}, [open]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative flex-1 min-w-0",
+		children: [selectedUser ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => {
+				onSelect(null);
+				setQuery("");
+			},
+			className: "flex w-full items-center gap-1.5 rounded border border-imp-border bg-imp-background px-2 py-1 text-xs text-left",
+			children: [
+				/* @__PURE__ */ jsx(User, { className: "w-3 h-3 shrink-0 text-imp-muted-foreground" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 min-w-0 truncate",
+					children: selectedUser.name || selectedUser.email || selectedUser.id
+				}),
+				/* @__PURE__ */ jsx(X, { className: "w-3 h-3 shrink-0 text-imp-muted-foreground" })
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(Search, { className: "absolute w-3 h-3 -translate-y-1/2 pointer-events-none left-2 top-1/2 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "text",
+				value: query,
+				onChange: (e) => {
+					setQuery(e.target.value);
+					if (!open) setOpen(true);
+				},
+				onFocus: () => setOpen(true),
+				placeholder: "Search users…",
+				className: "w-full py-1 pl-6 pr-2 text-xs border rounded border-imp-border bg-imp-background placeholder:text-imp-muted-foreground"
+			})]
+		}), open && !selectedUser && /* @__PURE__ */ jsx("div", {
+			className: "absolute left-0 z-50 w-full mt-1 border rounded-md shadow-lg top-full border-imp-border bg-imp-background",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "py-1 overflow-y-auto max-h-40",
+				children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "px-3 py-2 text-xs text-imp-muted-foreground",
+					children: "No users found."
+				}) : filtered.map((u) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => {
+						onSelect(u.id);
+						setQuery("");
+						setOpen(false);
+					},
+					className: "flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-imp-muted/50 transition-colors",
+					children: [/* @__PURE__ */ jsx(User, { className: "h-3.5 w-3.5 shrink-0 text-imp-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+						className: "flex-1 min-w-0 truncate",
+						children: u.name || u.email || u.id
+					})]
+				}, u.id))
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/frontend/components/UserMenuSection.tsx
+/**
+* UserMenuSection — Sidebar footer component showing current user info.
+*
+* Displays the authenticated user's name and role in the sidebar footer area.
+* This is a standalone component — not directly injected via plugin system
+* but available for host apps to use in custom sidebar layouts.
+*/
+function UserMenuSection({ collapsed = false }) {
+	const { user, isAuthenticated, isLoading } = useRbac();
+	if (isLoading || !isAuthenticated || !user) return null;
+	const initials = (user.name ?? user.id)[0]?.toUpperCase() ?? "?";
+	if (collapsed) return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center px-2 py-2",
+		title: `${user.name ?? user.id} (${user.role ?? "user"})`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex h-8 w-8 items-center justify-center rounded-full bg-imp-primary/10 text-xs font-medium text-imp-primary",
+			children: initials
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3 px-3 py-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex h-8 w-8 items-center justify-center rounded-full bg-imp-primary/10 text-xs font-medium text-imp-primary",
+			children: initials
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "truncate text-sm font-medium",
+				children: user.name ?? user.id
+			}), /* @__PURE__ */ jsx("p", {
+				className: "truncate text-xs text-imp-muted-foreground capitalize",
+				children: user.role ?? "user"
+			})]
+		})]
+	});
+}
+function UserAvatar({ className }) {
+	const { user, isAuthenticated } = useRbac();
+	if (!isAuthenticated || !user) return null;
+	const initials = (user.name ?? user.id)[0]?.toUpperCase() ?? "?";
+	return /* @__PURE__ */ jsx("div", {
+		className: `flex items-center justify-center rounded-full bg-imp-primary/10 text-xs font-medium text-imp-primary ${className ?? "h-6 w-6"}`,
+		title: user.name ?? user.id,
+		children: initials
+	});
+}
+//#endregion
+//#region src/frontend/index.ts
+/**
+* @invect/rbac/ui — Frontend Plugin Entry Point
+*
+* This is the browser-safe entry point that exports the RBAC frontend plugin.
+* Import via: `import { rbacFrontendPlugin } from '@invect/rbac/ui'`
+*
+* No Node.js dependencies. No @invect/core runtime imports.
+*/
+const rbacFrontendPlugin = {
+	id: "rbac",
+	name: "Role-Based Access Control",
+	providers: [RbacProvider],
+	sidebar: [{
+		label: "Access Control",
+		icon: Shield,
+		path: "/access",
+		position: "top",
+		permission: "flow:read"
+	}],
+	routes: [{
+		path: "/access",
+		component: AccessControlPage
+	}],
+	panelTabs: [{
+		context: "flowEditor",
+		label: "Access",
+		icon: Shield,
+		component: FlowAccessPanel,
+		permission: "flow:read"
+	}],
+	headerActions: [{
+		context: "flowHeader",
+		component: ShareButton,
+		permission: "flow:read"
+	}],
+	components: {
+		"rbac.AccessControlPage": AccessControlPage,
+		"rbac.FlowAccessPanel": FlowAccessPanel,
+		"rbac.ShareButton": ShareButton
+	},
+	checkPermission: (_permission, _context) => {}
+};
+//#endregion
+export { AccessControlPage, FlowAccessPanel, RbacProvider, ShareButton, ShareFlowModal, TeamsPage, UserAvatar, UserMenuSection, rbacFrontendPlugin, useAccessibleFlows, useAddTeamMember, useCreateTeam, useDeleteTeam, useEffectiveFlowAccess, useFlowAccess, useGrantFlowAccess, useGrantScopeAccess, useMoveFlow, useMyTeams, usePreviewMove, useRbac, useRemoveTeamMember, useRevokeFlowAccess, useRevokeScopeAccess, useScopeAccess, useScopeTree, useTeam, useTeams, useUpdateTeam };
+
+//# sourceMappingURL=index.mjs.map