@parallelworks/ui 0.55.0 → 0.56.0

package/dist/access/GrantView.js

@@ -2,60 +2,58 @@ import { Button } from "../components/Button.js";
 import { Callout } from "../components/Callout.js";
 import { Combobox } from "../components/Combobox.js";
 import { StatusBadge } from "../components/StatusBadge.js";
-import { covers, grantPlan, overlapOf } from "./model.js";
-import { GroupPicker } from "./GroupPicker.js";
+import { covers, grantPlan, isOwner } from "./model.js";
+import { PrincipalPicker } from "./PrincipalPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 //#region src/access/GrantView.tsx
 /** The grant form's body and footer, which the drawer lays out in its own body and footer. */
-function useGrantView({ model, selection, onSelectionChange, resourceName, describeGroup, searchGroups, groupCount, recentGroupIds, cache, seen, saving, failure, onGrant, onCancel, focusLater, boundary, t }) {
+function useGrantView({ model, selection, onSelectionChange, resourceName, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, cache, seen, saving, failure, onGrant, onCancel, focusLater, boundary, t }) {
 	const uid = useId();
 	const [confirming, setConfirming] = useState(false);
 	const keepButton = useRef(null);
 	const grantId = `${uid}grant`;
-	const { groupIds, roleIds } = selection;
+	const { principalIds, roleIds } = selection;
 	const roles = roleIds.map((id) => model.roleById.get(id)).filter((role) => role !== void 0);
 	const roleNames = roles.map((role) => role.name);
-	const groupName = (id) => {
-		const group = seen.get(id);
-		return group?.kind === "everyone" ? t.everyone : group?.name ?? id;
+	const principalName = (id) => {
+		const principal = seen.get(id);
+		return principal?.kind === "everyone" ? t.everyone : principal?.name ?? id;
 	};
-	const plan = grantPlan(model, groupIds, roleIds);
+	const plan = grantPlan(model, principalIds, roleIds);
 	const everyone = model.everyone;
-	const toEveryone = everyone !== void 0 && groupIds.includes(everyone.id);
+	const toEveryone = everyone !== void 0 && principalIds.includes(everyone.id);
 	const people = everyone?.memberCount;
-	const roleItems = model.roles.map((role) => {
+	const everyoneHolds = (role) => everyone !== void 0 && [...model.held.get(everyone.id) ?? [], ...(model.inherited.get(everyone.id) ?? []).map((holding) => holding.role)].some((held) => held.id === role.id || covers(held, role));
+	const roleItems = model.grantable.map((role) => {
 		const chosen = roleIds.filter((id) => id !== role.id).map((id) => model.roleById.get(id)).filter((other) => other !== void 0);
-		const holders = groupIds.filter((id) => (model.held.get(id) ?? []).some((held) => held.id === role.id));
+		const holders = principalIds.filter((id) => isOwner(model, id) || (model.held.get(id) ?? []).some((held) => held.id === role.id));
 		const coveredBy = chosen.filter((other) => covers(other, role)).map((r) => r.name);
-		const everyoneHas = everyone !== void 0 && !groupIds.includes(everyone.id) && (overlapOf(model, everyone.id, role).coveredBy.length > 0 || (model.held.get(everyone.id) ?? []).some((held) => held.id === role.id));
+		const everyoneHas = everyone !== void 0 && !principalIds.includes(everyone.id) && everyoneHolds(role);
 		const hints = [
-			holders.length > 0 && t.alreadyHave(holders.map(groupName)),
+			holders.length > 0 && t.alreadyHave(holders.map(principalName)),
 			coveredBy.length > 0 && t.alreadyCovered(coveredBy),
 			everyoneHas && t.everyoneHasIt
 		].filter((hint) => typeof hint === "string");
 		return {
 			value: role.id,
 			label: role.name,
-			description: [role.description, ...hints].filter(Boolean).join(" "),
-			badge: role.highImpact ? /* @__PURE__ */ jsx(StatusBadge, {
-				variant: "warning",
-				children: t.highImpact
-			}) : null
+			description: [role.description, hints.join(" · ")].filter(Boolean).join(" "),
+			badge: role.privileged ? /* @__PURE__ */ jsx(StatusBadge, { children: t.privileged }) : null
 		};
 	});
-	const getting = [...new Set(plan.grant.map((grant) => grant.groupId))].map(groupName);
-	const status = groupIds.length === 0 && roleIds.length === 0 ? {
-		text: t.pickGroupsAndRoles,
+	const getting = [...new Set(plan.grant.map((grant) => grant.principalId))].map(principalName);
+	const status = principalIds.length === 0 && roleIds.length === 0 ? {
+		text: t.pickPrincipalsAndRoles,
 		ready: false
-	} : groupIds.length === 0 ? {
-		text: t.pickGroups,
+	} : principalIds.length === 0 ? {
+		text: t.pickPrincipals,
 		ready: false
 	} : roleIds.length === 0 ? {
 		text: t.pickRoles,
 		ready: false
 	} : plan.grant.length === 0 ? {
-		text: t.nothingToGrant(groupIds.map(groupName), roleNames),
+		text: t.nothingToGrant(principalIds.map(principalName), roleNames),
 		ready: false
 	} : {
 		text: t.grantSummary(getting, [...new Set(plan.grant.map((grant) => grant.roleId))].map((id) => model.roleById.get(id)?.name ?? id)),
@@ -73,24 +71,24 @@ function useGrantView({ model, selection, onSelectionChange, resourceName, descr
 		className: "flex flex-col gap-5 p-4",
 		children: [
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
-				htmlFor: `${uid}groups`,
+				htmlFor: `${uid}principals`,
 				className: "mb-1.5 block text-sm font-medium",
-				children: t.groupsLabel
-			}), /* @__PURE__ */ jsx(GroupPicker, {
-				id: `${uid}groups`,
-				describedBy: `${uid}groupsHint`,
+				children: t.principalsLabel
+			}), /* @__PURE__ */ jsx(PrincipalPicker, {
+				id: `${uid}principals`,
+				describedBy: `${uid}principalsHint`,
 				model,
-				value: groupIds,
+				value: principalIds,
 				onValueChange: (next) => onSelectionChange({
-					groupIds: next,
+					principalIds: next,
 					roleIds
 				}),
 				granting: roles,
-				resourceName,
 				describeGroup,
-				searchGroups,
+				searchPrincipals,
 				groupCount,
-				recentGroupIds,
+				peopleCount,
+				recentPrincipalIds,
 				cache,
 				seen,
 				boundary,
@@ -106,7 +104,7 @@ function useGrantView({ model, selection, onSelectionChange, resourceName, descr
 				items: roleItems,
 				value: roleIds,
 				onValueChange: (next) => onSelectionChange({
-					groupIds,
+					principalIds,
 					roleIds: next
 				}),
 				placeholder: t.searchRoles
@@ -147,7 +145,7 @@ function useGrantView({ model, selection, onSelectionChange, resourceName, descr
 					disabled: saving,
 					children: t.common.cancel
 				}), /* @__PURE__ */ jsx(Button, {
-					variant: roles.some((role) => role.highImpact) ? "danger" : "primary",
+					variant: roles.some((role) => role.privileged) ? "danger" : "primary",
 					loading: saving,
 					onClick: grant,
 					children: t.grantToEveryone

package/dist/access/PrincipalPicker.d.ts

@@ -0,0 +1,38 @@
+import { type AccessModel } from './model.js';
+import type { AccessStrings } from './strings.js';
+import type { AccessGroupDetails, AccessPrincipal, AccessRole } from './types.js';
+export type DescribeGroup = (groupId: string, signal: AbortSignal) => Promise<AccessGroupDetails>;
+export type SearchPrincipals = (query: string, signal: AbortSignal) => Promise<readonly AccessPrincipal[]>;
+/** Details already loaded, kept for as long as the drawer is open. */
+export type DetailsCache = Map<string, AccessGroupDetails>;
+/** A person's face, or a group's or everyone's icon, beside their name. */
+export declare function PrincipalTile({ principal, compact, className, }: {
+    principal: AccessPrincipal;
+    /** The smaller size, for a picker row. */
+    compact?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+interface PrincipalPickerProps {
+    model: AccessModel;
+    value: readonly string[];
+    onValueChange: (ids: string[]) => void;
+    /** The roles being granted, which the details weigh against what the highlighted holds. */
+    granting: readonly AccessRole[];
+    describeGroup?: DescribeGroup | undefined;
+    searchPrincipals?: SearchPrincipals | undefined;
+    groupCount?: number | undefined;
+    peopleCount?: number | undefined;
+    recentPrincipalIds?: readonly string[] | undefined;
+    cache: DetailsCache;
+    /** Everyone the picker has seen, by id, so a chosen one found by a search keeps its name. */
+    seen: Map<string, AccessPrincipal>;
+    id: string;
+    describedBy: string;
+    /** The drawer's body, above its footer, which the open list fills. */
+    boundary: Element | null;
+    t: AccessStrings;
+}
+/** The people and groups field: everyone pinned first, then recent picks, then people and
+ *  groups; a pane beside the list says more about the highlighted one and what it holds here. */
+export declare function PrincipalPicker({ model, value, onValueChange, granting, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, cache, seen, id, describedBy, boundary, t, }: PrincipalPickerProps): import("react").JSX.Element;
+export {};

package/dist/access/{GroupPicker.js → PrincipalPicker.js}

@@ -7,10 +7,10 @@ import { Combobox } from "../components/Combobox.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { useRelativeTime } from "../components/relativeTime.js";
 import { StatusBadge } from "../components/StatusBadge.js";
-import { covers } from "./model.js";
+import { covers, isOwner } from "./model.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-//#region src/access/GroupPicker.tsx
+//#region src/access/PrincipalPicker.tsx
 /** Waits this long on a highlighted group before asking for its details, so arrowing past
 *  groups doesn't ask for each one. */
 var DESCRIBE_DELAY = 120;
@@ -20,45 +20,70 @@ var SEARCH_DELAY = 200;
 var FACES = 5;
 /** Names in a group's details, before the rest are a count. */
 var NAMES = 3;
-function GroupTile({ everyone, className }) {
+/** A person's face, or a group's or everyone's icon, beside their name. */
+function PrincipalTile({ principal, compact = false, className }) {
+	if (principal.kind === "user") return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex shrink-0 items-center justify-center", compact ? "size-6" : "size-8", className),
+		children: /* @__PURE__ */ jsx(Avatar, {
+			src: principal.avatarUrl,
+			name: principal.name,
+			size: compact ? "sm" : "md"
+		})
+	});
+	const everyone = principal.kind === "everyone";
 	const Icon = everyone ? OrganizationIcon : UsersIcon;
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cx("flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4", everyone ? "bg-(--theme-info-muted) text-(--theme-info-text)" : "bg-(--theme-muted-panel-bg) text-(--theme-muted-text-color)", className),
+		className: cx("flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4", compact && "size-6 [&_svg]:size-3.5", everyone ? "bg-(--theme-info-muted) text-(--theme-info-text)" : "bg-(--theme-muted-panel-bg) text-(--theme-muted-text-color)", className),
 		children: /* @__PURE__ */ jsx(Icon, {})
 	});
 }
-/** The groups field: everyone pinned first, then recent groups, then all of them; a pane beside
-*  the list says who is in the highlighted group and what it holds here. */
-function GroupPicker({ model, value, onValueChange, granting, resourceName, describeGroup, searchGroups, groupCount, recentGroupIds = [], cache, seen, id, describedBy, boundary, t }) {
+/** The people and groups field: everyone pinned first, then recent picks, then people and
+*  groups; a pane beside the list says more about the highlighted one and what it holds here. */
+function PrincipalPicker({ model, value, onValueChange, granting, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds = [], cache, seen, id, describedBy, boundary, t }) {
 	const [highlighted, setHighlighted] = useState(void 0);
-	const details = useDetails(highlighted, describeGroup, cache);
-	const search = useSearch(searchGroups);
+	const search = useSearch(searchPrincipals);
 	const match = useQueryMatch();
-	for (const group of [...model.groupById.values(), ...search.results ?? []]) seen.set(group.id, group);
+	for (const principal of [...model.principalById.values(), ...search.results ?? []]) seen.set(principal.id, principal);
+	const details = useDetails(highlighted !== void 0 && seen.get(highlighted)?.kind !== "user" ? highlighted : void 0, describeGroup, cache);
 	const items = useMemo(() => {
-		const roleNames = (groupId) => (model.held.get(groupId) ?? []).map((r) => r.name);
-		const item = (group) => {
-			const everyone = group.kind === "everyone";
-			const held = roleNames(group.id);
-			const size = group.memberCount === void 0 ? void 0 : everyone ? t.people(group.memberCount) : t.members(group.memberCount);
+		const roleNames = (principalId) => (model.held.get(principalId) ?? []).map((r) => r.name);
+		const item = (principal) => {
+			const held = roleNames(principal.id);
+			const icon = /* @__PURE__ */ jsx(PrincipalTile, {
+				principal,
+				compact: true
+			});
+			if (principal.kind === "user") {
+				const owner = isOwner(model, principal.id);
+				return {
+					value: principal.id,
+					label: principal.name,
+					description: [principal.detail, owner ? t.owner : held.length > 0 && t.hasRoles(held)].filter(Boolean).join(" · "),
+					accessibleDescription: t.personSummary(principal.detail, owner, held),
+					icon
+				};
+			}
+			const everyone = principal.kind === "everyone";
+			const size = principal.memberCount === void 0 ? void 0 : everyone ? t.people(principal.memberCount) : t.members(principal.memberCount);
 			return {
-				value: group.id,
-				label: everyone ? t.everyone : group.name,
+				value: principal.id,
+				label: everyone ? t.everyone : principal.name,
 				description: [size, held.length > 0 && t.hasRoles(held)].filter(Boolean).join(" · "),
-				accessibleDescription: t.groupSummary(group.memberCount, everyone, cache.get(group.id)?.source, held),
-				icon: /* @__PURE__ */ jsx(GroupTile, {
-					everyone,
-					className: "size-7"
-				})
+				accessibleDescription: t.groupSummary(principal.memberCount, everyone, cache.get(principal.id)?.source, held),
+				icon
 			};
 		};
 		const everyone = model.everyone;
-		const recent = recentGroupIds.map((groupId) => seen.get(groupId)).filter((group) => group !== void 0 && group.kind !== "everyone");
-		const listed = search.results ?? [...model.groupById.values()];
-		const pinned = /* @__PURE__ */ new Set([everyone?.id, ...recent.map((group) => group.id)]);
-		const rest = listed.filter((group) => group.kind !== "everyone" && !pinned.has(group.id));
+		const recent = recentPrincipalIds.map((principalId) => seen.get(principalId)).filter((principal) => principal !== void 0 && principal.kind !== "everyone");
+		const listed = search.results ?? [...model.principalById.values()];
 		const searching = search.results !== void 0;
+		const pinned = new Set(searching ? [] : recent.map((principal) => principal.id));
+		const rest = listed.filter((principal) => principal.kind !== "everyone" && !pinned.has(principal.id));
+		const people = rest.filter((principal) => principal.kind === "user");
+		const groups = rest.filter((principal) => principal.kind === "group");
+		const count = (given, kind) => searching ? void 0 : (given ?? listed.filter((principal) => principal.kind === kind).length).toLocaleString();
 		return [
 			...everyone && (!searching || match(search.query, everyone.name, t.everyone)) ? [{
 				label: t.organization,
@@ -69,28 +94,35 @@ function GroupPicker({ model, value, onValueChange, granting, resourceName, desc
 				items: recent.map(item)
 			}] : [],
 			{
-				label: t.allGroups,
-				description: (groupCount ?? listed.length).toLocaleString(),
-				items: (searching ? listed.filter((g) => g.kind !== "everyone") : rest).map(item)
+				label: t.peopleSection,
+				description: count(peopleCount, "user"),
+				items: people.map(item)
+			},
+			{
+				label: t.groupsSection,
+				description: count(groupCount, "group"),
+				items: groups.map(item)
 			}
-		].filter((group) => group.items.length > 0);
+		].filter((section) => section.items.length > 0);
 	}, [
 		model,
-		recentGroupIds,
+		recentPrincipalIds,
 		search.results,
 		search.query,
 		match,
 		groupCount,
+		peopleCount,
 		seen,
 		cache,
 		t,
 		details.details
 	]);
 	const everyoneChosen = model.everyone !== void 0 && value.includes(model.everyone.id);
-	const nameOf = (groupId) => {
-		const group = seen.get(groupId);
-		return group?.kind === "everyone" ? t.everyoneInOrganization : group?.name ?? groupId;
+	const nameOf = (principalId) => {
+		const principal = seen.get(principalId);
+		return principal?.kind === "everyone" ? t.everyoneInOrganization : principal?.name ?? principalId;
 	};
+	const highlightedPrincipal = highlighted === void 0 ? void 0 : seen.get(highlighted);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Combobox, {
 		multiple: true,
 		id,
@@ -99,27 +131,34 @@ function GroupPicker({ model, value, onValueChange, granting, resourceName, desc
 		value,
 		onValueChange,
 		itemToStringLabel: nameOf,
-		placeholder: t.addGroup,
-		onQueryChange: searchGroups ? search.setQuery : void 0,
+		placeholder: t.addPrincipal,
+		onQueryChange: searchPrincipals ? search.setQuery : void 0,
 		loading: search.loading,
 		onItemHighlighted: setHighlighted,
 		collisionBoundary: boundary,
-		details: (groupId) => /* @__PURE__ */ jsx(GroupDetailsPane, {
-			group: groupId === void 0 ? void 0 : seen.get(groupId),
-			state: details,
-			model,
-			granting,
-			resourceName,
-			t
-		}),
-		detailsSummary: () => details.details ? /* @__PURE__ */ jsx(DetailsLine, {
+		details: (principalId) => {
+			const principal = principalId === void 0 ? void 0 : seen.get(principalId);
+			return principal?.kind === "user" ? /* @__PURE__ */ jsx(PersonDetailsPane, {
+				person: principal,
+				model,
+				granting,
+				t
+			}) : /* @__PURE__ */ jsx(GroupDetailsPane, {
+				group: principal,
+				state: details,
+				model,
+				granting,
+				t
+			});
+		},
+		detailsSummary: () => highlightedPrincipal?.kind === "user" ? highlightedPrincipal.detail ?? null : details.details ? /* @__PURE__ */ jsx(DetailsLine, {
 			details: details.details,
 			t
 		}) : null
 	}), /* @__PURE__ */ jsx("p", {
 		id: describedBy,
 		className: "m-0 mt-1.5 text-xs text-(--theme-muted-text-color)",
-		children: everyoneChosen ? t.everyoneCoversGroups : t.groupsHint(groupCount, model.everyone !== void 0)
+		children: everyoneChosen ? t.everyoneCoversGroups : t.pickerHint(peopleCount, groupCount, model.everyone !== void 0)
 	})] });
 }
 /** The highlighted group's details: from the cache, or asked for once the highlight rests on
@@ -156,21 +195,21 @@ function useDetails(groupId, describe, cache) {
 	};
 }
 /** A search on the host's side, run once typing pauses; a newer query drops the older one's. */
-function useSearch(searchGroups) {
+function useSearch(searchPrincipals) {
 	const [query, setQuery] = useState("");
 	const [found, setFound] = useState();
 	const trimmed = query.trim();
 	useEffect(() => {
-		if (!searchGroups || trimmed === "") return;
+		if (!searchPrincipals || trimmed === "") return;
 		const controller = new AbortController();
 		const timer = setTimeout(() => {
-			searchGroups(trimmed, controller.signal).then((groups) => setFound({
+			searchPrincipals(trimmed, controller.signal).then((principals) => setFound({
 				query: trimmed,
-				groups
+				principals
 			}), () => {
 				if (!controller.signal.aborted) setFound({
 					query: trimmed,
-					groups: []
+					principals: []
 				});
 			});
 		}, SEARCH_DELAY);
@@ -178,12 +217,12 @@ function useSearch(searchGroups) {
 			clearTimeout(timer);
 			controller.abort();
 		};
-	}, [searchGroups, trimmed]);
-	const active = searchGroups !== void 0 && trimmed !== "";
+	}, [searchPrincipals, trimmed]);
+	const active = searchPrincipals !== void 0 && trimmed !== "";
 	return {
 		query: trimmed,
 		setQuery,
-		results: active ? found?.groups ?? [] : void 0,
+		results: active ? found?.principals ?? [] : void 0,
 		loading: active && found?.query !== trimmed
 	};
 }
@@ -223,7 +262,78 @@ function Updated({ value, t }) {
 function DetailsLine({ details, t }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: [details.source === "synced" && t.syncedShort, memberLine(details, 2, t)].filter(Boolean).join(" · ") });
 }
-function GroupDetailsPane({ group, state, model, granting, resourceName, t }) {
+/** What the highlighted one holds here, and what granting the picked roles would change. */
+function OnResource({ principalId, model, granting, t }) {
+	const held = model.held.get(principalId) ?? [];
+	const owner = isOwner(model, principalId);
+	const heldIds = new Set(held.map((role) => role.id));
+	const fresh = owner ? [] : granting.filter((role) => !heldIds.has(role.id));
+	const redundant = held.filter((role) => fresh.some((by) => covers(by, role)));
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx(PaneHeading, { children: t.currentRoles }),
+		owner || held.length > 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-1",
+			children: [owner && /* @__PURE__ */ jsx(StatusBadge, {
+				size: "md",
+				variant: "info",
+				children: t.owner
+			}), held.map((role) => /* @__PURE__ */ jsx(StatusBadge, {
+				size: "md",
+				children: role.name
+			}, role.id))]
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "m-0 text-xs text-(--theme-muted-text-color)",
+			children: t.noRolesHere
+		}),
+		owner && /* @__PURE__ */ jsx("p", {
+			className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
+			children: t.ownerDescription
+		}),
+		redundant.length > 0 && /* @__PURE__ */ jsx("p", {
+			className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
+			children: t.becomesRedundant(fresh.filter((by) => redundant.some((role) => covers(by, role))).map((r) => r.name), redundant.map((role) => role.name))
+		}),
+		!owner && granting.length > 0 && fresh.length === 0 && /* @__PURE__ */ jsx("p", {
+			className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
+			children: t.alreadyHas(granting.map((role) => role.name))
+		})
+	] });
+}
+function PersonDetailsPane({ person, model, granting, t }) {
+	const groups = (person.groupIds ?? []).map((id) => model.principalById.get(id)).filter((group) => group?.kind === "group");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-full flex-col gap-4 p-4 text-sm",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ jsx(PrincipalTile, { principal: person }), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "m-0 font-semibold wrap-break-word",
+						children: person.name
+					}), person.detail && /* @__PURE__ */ jsx("p", {
+						className: "m-0 text-xs wrap-break-word text-(--theme-muted-text-color)",
+						children: person.detail
+					})]
+				})]
+			}),
+			groups.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(PaneHeading, { children: t.inGroups }), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-1",
+				children: groups.map((group) => /* @__PURE__ */ jsx(StatusBadge, {
+					size: "md",
+					children: group.name
+				}, group.id))
+			})] }),
+			/* @__PURE__ */ jsx(OnResource, {
+				principalId: person.id,
+				model,
+				granting,
+				t
+			})
+		]
+	});
+}
+function GroupDetailsPane({ group, state, model, granting, t }) {
 	if (!group) return /* @__PURE__ */ jsx("p", {
 		className: "m-0 p-4 text-xs text-(--theme-muted-text-color)",
 		children: t.noHighlight
@@ -234,14 +344,13 @@ function GroupDetailsPane({ group, state, model, granting, resourceName, t }) {
 	const count = details?.memberCount ?? group.memberCount;
 	const heldIds = new Set(held.map((role) => role.id));
 	const fresh = granting.filter((role) => !heldIds.has(role.id));
-	const redundant = held.filter((role) => fresh.some((by) => covers(by, role)));
 	const source = everyone ? t.wholeOrganization : details?.source === "synced" ? t.synced : details?.source === "manual" ? t.manual : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex min-h-full flex-col gap-4 p-4 text-sm",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start gap-3",
-				children: [/* @__PURE__ */ jsx(GroupTile, { everyone }), /* @__PURE__ */ jsxs("div", {
+				children: [/* @__PURE__ */ jsx(PrincipalTile, { principal: group }), /* @__PURE__ */ jsxs("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ jsx("p", {
 						className: "m-0 font-semibold wrap-break-word",
@@ -303,28 +412,12 @@ function GroupDetailsPane({ group, state, model, granting, resourceName, t }) {
 				icon: false,
 				children: t.everyoneReach(fresh.map((role) => role.name), count)
 			}),
-			/* @__PURE__ */ jsxs("div", { children: [
-				/* @__PURE__ */ jsx(PaneHeading, { children: t.onResource(resourceName) }),
-				held.length > 0 ? /* @__PURE__ */ jsx("div", {
-					className: "flex flex-wrap gap-1",
-					children: held.map((role) => /* @__PURE__ */ jsx(StatusBadge, {
-						size: "md",
-						variant: role.highImpact ? "warning" : "default",
-						children: role.name
-					}, role.id))
-				}) : /* @__PURE__ */ jsx("p", {
-					className: "m-0 text-xs text-(--theme-muted-text-color)",
-					children: t.noRolesHere
-				}),
-				redundant.length > 0 && /* @__PURE__ */ jsx("p", {
-					className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
-					children: t.becomesRedundant(fresh.filter((by) => redundant.some((role) => covers(by, role))).map((r) => r.name), redundant.map((role) => role.name))
-				}),
-				granting.length > 0 && fresh.length === 0 && /* @__PURE__ */ jsx("p", {
-					className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
-					children: t.alreadyHas(granting.map((role) => role.name))
-				})
-			] }),
+			/* @__PURE__ */ jsx(OnResource, {
+				principalId: group.id,
+				model,
+				granting,
+				t
+			}),
 			details?.updatedAt !== void 0 && details.updatedAt !== null && /* @__PURE__ */ jsx(Updated, {
 				value: details.updatedAt,
 				t
@@ -333,4 +426,4 @@ function GroupDetailsPane({ group, state, model, granting, resourceName, t }) {
 	});
 }
 //#endregion
-export { GroupPicker, GroupTile };
+export { PrincipalPicker, PrincipalTile };

package/dist/access/index.d.ts

@@ -1,3 +1,3 @@
 export { type AccessArrangement, AccessDrawer, type AccessDrawerProps } from './AccessDrawer.js';
 export { ACCESS_STRINGS, type AccessStrings, type AccessText, useAccessStrings, } from './strings.js';
-export type { AccessChange, AccessGrant, AccessGroup, AccessGroupDetails, AccessMember, AccessPermission, AccessRole, } from './types.js';
+export type { AccessChange, AccessGrant, AccessGroupDetails, AccessInheritedGrant, AccessMember, AccessPermission, AccessPrincipal, AccessRole, } from './types.js';