@parallelworks/ui 0.55.0 → 0.57.0

package/dist/access/AccessList.js

@@ -1,26 +1,35 @@
 import { cx } from "../cx.js";
-import { AddIcon, ChevronRightIcon, OrganizationIcon, TrashIcon } from "../icons.js";
+import { AddIcon, ChevronRightIcon, LockIcon, OrganizationIcon, TrashIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
 import { Button } from "../components/Button.js";
 import { IconButton } from "../components/IconButton.js";
 import { Callout } from "../components/Callout.js";
 import { collapsePanelClassName } from "../components/Disclosure.js";
 import { StatusBadge } from "../components/StatusBadge.js";
-import { inheritedRoles, key, overlapOf, removalOf } from "./model.js";
-import { GroupTile } from "./GroupPicker.js";
+import { alsoHas, firstOfEach, isOwner, key, overlapOf, removalOf } from "./model.js";
+import { PrincipalTile } from "./PrincipalPicker.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef } from "react";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/access/AccessList.tsx
-var groupLabel = (group, t) => group.kind === "everyone" ? t.everyoneInOrganization : group.name;
-var sizeOf = (group, t) => group.memberCount === void 0 ? void 0 : group.kind === "everyone" ? t.people(group.memberCount) : t.members(group.memberCount);
-function HighImpact({ t }) {
-	return /* @__PURE__ */ jsx(StatusBadge, {
-		variant: "warning",
-		children: t.highImpact
+/** The id the owner's section has among the roles' sections. */
+var OWNER_SECTION = "__owner";
+var principalLabel = (principal, t) => principal.kind === "everyone" ? t.everyoneInOrganization : principal.name;
+/** The line under a name: who a person is, or how many are in a group. */
+var aboutOf = (principal, t) => principal.kind === "user" ? principal.detail : principal.memberCount === void 0 ? void 0 : principal.kind === "everyone" ? t.people(principal.memberCount) : t.members(principal.memberCount);
+/** Where a role someone has elsewhere comes from, as "through" reads it. */
+var sourceOf = (holding) => holding.through?.name ?? holding.from ?? "";
+/** Stands where a remove button would, on a row that can't be removed here. */
+function Locked() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-7 items-center justify-center text-(--theme-muted-text-color)",
+		children: /* @__PURE__ */ jsx(LockIcon, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
 	});
 }
-/** A role or group whose rows fold under it. */
+/** A role or principal whose rows fold under it. */
 function Section({ id, open, onOpenChange, disabled, lead, title, description, aside, narrowAside, notice, children }) {
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		open: open && !disabled,
@@ -30,7 +39,7 @@ function Section({ id, open, onOpenChange, disabled, lead, title, description, a
 		children: [
 			/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 				id,
-				className: cx("group/section flex w-full items-center gap-3 px-4 py-3 text-left outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus)", disabled ? "cursor-default" : "cursor-pointer hover:bg-(--theme-hover)"),
+				className: cx("group/section flex w-full items-center gap-3 px-4 py-2.5 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus)", disabled ? "cursor-default" : "cursor-pointer hover:bg-(--theme-hover)"),
 				children: [
 					/* @__PURE__ */ jsx(ChevronRightIcon, {
 						"aria-hidden": "true",
@@ -43,22 +52,22 @@ function Section({ id, open, onOpenChange, disabled, lead, title, description, a
 							/* @__PURE__ */ jsx("span", {
 								className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5",
 								children: /* @__PURE__ */ jsx("span", {
-									className: "font-medium wrap-break-word",
+									className: "text-sm font-medium wrap-anywhere",
 									children: title
 								})
 							}),
 							description && /* @__PURE__ */ jsx("span", {
-								className: "hidden text-sm text-(--theme-muted-text-color) @min-[30rem]/access:block",
+								className: "hidden text-xs wrap-anywhere text-(--theme-muted-text-color) @min-[30rem]/access:block",
 								children: description
 							}),
 							narrowAside && /* @__PURE__ */ jsx("span", {
-								className: "text-sm text-(--theme-muted-text-color) @min-[30rem]/access:hidden",
+								className: "text-xs text-(--theme-muted-text-color) @min-[30rem]/access:hidden",
 								children: narrowAside
 							})
 						]
 					}),
 					aside && /* @__PURE__ */ jsx("span", {
-						className: "hidden shrink-0 items-center gap-1 text-sm text-(--theme-muted-text-color) @min-[30rem]/access:flex",
+						className: "hidden shrink-0 items-center gap-1 text-xs text-(--theme-muted-text-color) @min-[30rem]/access:flex",
 						children: aside
 					})
 				]
@@ -77,7 +86,7 @@ function Section({ id, open, onOpenChange, disabled, lead, title, description, a
 		]
 	});
 }
-/** A line under a section: a group under a role, or a role under a group. */
+/** A line under a section: a principal under a role, or a role under a principal. */
 function Row({ lead, title, meta, action, muted }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3 py-1.5 ps-11 pe-4 @min-[30rem]/access:ps-11",
@@ -86,10 +95,10 @@ function Row({ lead, title, meta, action, muted }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: cx("min-w-0 flex-1", muted && "text-(--theme-muted-text-color)"),
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex min-w-0 flex-wrap items-center gap-x-2",
+					className: "flex min-w-0 flex-wrap items-center gap-x-2 text-sm wrap-anywhere",
 					children: title
 				}), meta && /* @__PURE__ */ jsx("div", {
-					className: "text-sm text-(--theme-muted-text-color)",
+					className: "text-xs wrap-anywhere text-(--theme-muted-text-color)",
 					children: meta
 				})]
 			}),
@@ -112,21 +121,38 @@ function RemoveButton({ label, saving, removal, onAsk }) {
 		onClick: () => onAsk(removal)
 	});
 }
-/** Asks before a group loses roles, saying exactly what it loses and what it keeps. */
+/** What someone keeps elsewhere, by where it comes from, everyone's apart. */
+function keptElsewhere(holdings) {
+	const throughEveryone = [];
+	const through = /* @__PURE__ */ new Map();
+	for (const holding of holdings) if (holding.through?.kind === "everyone") throughEveryone.push(holding.role.name);
+	else {
+		const from = sourceOf(holding);
+		through.set(from, [...through.get(from) ?? [], holding.role.name]);
+	}
+	return {
+		throughEveryone,
+		through: [...through].map(([from, roles]) => ({
+			from,
+			roles
+		}))
+	};
+}
+/** Asks before a principal loses roles, saying exactly what it loses and what it keeps. */
 function RemoveConfirm({ model, removal, saving, onCancel, onConfirm, t }) {
 	const titleId = useId();
 	const cancel = useRef(null);
 	useEffect(() => cancel.current?.focus(), []);
-	const group = model.groupById.get(removal.groupId);
-	if (!group) return null;
-	const everyone = group.kind === "everyone";
+	const principal = model.principalById.get(removal.principalId);
+	if (!principal) return null;
 	const roleNames = removal.roleIds.map((id) => model.roleById.get(id)?.name ?? id);
-	const impact = removalOf(model, removal.groupId, removal.roleIds);
+	const impact = removalOf(model, removal.principalId, removal.roleIds);
 	const own = impact.keep.map((role) => role.name);
-	const throughEveryone = impact.keepThroughEveryone.map((role) => role.name);
+	const { throughEveryone, through } = keptElsewhere(impact.keepElsewhere);
+	const kept = t.keeps(own, throughEveryone, through);
 	return /* @__PURE__ */ jsx("fieldset", {
 		"aria-labelledby": titleId,
-		className: "m-0 min-w-0 border-0 px-4 py-2",
+		className: "m-0 min-w-0 border-0 px-4 py-2 text-sm",
 		onKeyDown: (e) => {
 			if (e.key === "Escape" && !e.defaultPrevented) {
 				e.stopPropagation();
@@ -140,26 +166,33 @@ function RemoveConfirm({ model, removal, saving, onCancel, onConfirm, t }) {
 				/* @__PURE__ */ jsx("p", {
 					id: titleId,
 					className: "m-0 font-semibold text-(--theme-app)",
-					children: removal.all ? t.removeAllTitle(groupLabel(group, t)) : t.removeTitle(groupLabel(group, t), roleNames)
+					children: removal.all ? t.removeAllTitle(principalLabel(principal, t)) : t.removeTitle(principalLabel(principal, t), roleNames)
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "mt-1 text-(--theme-app)",
-					children: impact.lost.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					children: impact.owner ? /* @__PURE__ */ jsx("p", {
+						className: "m-0 text-(--theme-muted-text-color)",
+						children: t.ownerLosesNothing
+					}) : impact.lost.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
 						/* @__PURE__ */ jsx("p", {
 							className: "m-0 text-(--theme-muted-text-color)",
-							children: t.losesIntro(group.memberCount, everyone)
+							children: t.losesIntro(principal.kind, principal.memberCount)
 						}),
 						/* @__PURE__ */ jsx("ul", {
 							className: "my-2 grid list-disc gap-x-6 gap-y-1 ps-5 @min-[30rem]/access:grid-cols-2",
 							children: impact.lost.map((permission) => /* @__PURE__ */ jsx("li", { children: model.permissionLabel(permission) }, permission))
 						}),
-						/* @__PURE__ */ jsx("p", {
+						kept && /* @__PURE__ */ jsx("p", {
 							className: "m-0 text-(--theme-muted-text-color)",
-							children: t.keeps(own, throughEveryone)
+							children: kept
 						})
 					] }) : /* @__PURE__ */ jsx("p", {
 						className: "m-0 text-(--theme-muted-text-color)",
-						children: t.losesNothing(own, throughEveryone)
+						children: t.losesNothing([
+							...own,
+							...through.flatMap((source) => source.roles),
+							...throughEveryone
+						])
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -182,18 +215,51 @@ function RemoveConfirm({ model, removal, saving, onCancel, onConfirm, t }) {
 	});
 }
 /** Marks the button that asked for a removal, so focus can go back to it. */
-var removeKey = (removal) => `${removal.groupId}\u0000${removal.all ? "*" : removal.roleIds.join(",")}`;
-var sameRemoval = (a, groupId, roleId) => a !== void 0 && a.groupId === groupId && (roleId === void 0 ? a.all : !a.all && a.roleIds.includes(roleId));
-/** Who has each role, role by role. */
+var removeKey = (removal) => `${removal.principalId}\u0000${removal.all ? "*" : removal.roleIds.join(",")}`;
+var sameRemoval = (a, principalId, roleId) => a !== void 0 && a.principalId === principalId && (roleId === void 0 ? a.all : !a.all && a.roleIds.includes(roleId));
+/** The hint beside someone holding a role: what else already gives it to them. */
+function overlapHint(overlap, t) {
+	if (overlap.owner) return t.ownerHasAll;
+	if (overlap.coveredBy.length > 0) return t.coveredBy(overlap.coveredBy.map((other) => other.name));
+	const from = [...new Set(overlap.elsewhere.filter((holding) => holding.through?.kind !== "everyone").map((holding) => sourceOf(holding)))];
+	if (from.length > 0) return t.throughToo(from);
+	return overlap.elsewhere.length > 0 ? t.everyoneHasThisToo : void 0;
+}
+/** Who has each role, role by role, after the owner. */
 function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, actions, t, sectionId }) {
 	return order.map((roleId) => {
+		if (roleId === "__owner") {
+			const owner = model.owner;
+			return owner && /* @__PURE__ */ jsx(Section, {
+				id: sectionId(roleId),
+				open: expanded.has(roleId),
+				onOpenChange: (open) => onExpandedChange(roleId, open),
+				title: t.owner,
+				description: t.ownerDescription,
+				aside: principalLabel(owner, t),
+				narrowAside: principalLabel(owner, t),
+				children: /* @__PURE__ */ jsx(Row, {
+					lead: /* @__PURE__ */ jsx(PrincipalTile, {
+						principal: owner,
+						compact: true,
+						className: "hidden @min-[30rem]/access:flex"
+					}),
+					title: principalLabel(owner, t),
+					meta: aboutOf(owner, t),
+					action: /* @__PURE__ */ jsx(Locked, {})
+				})
+			}, roleId);
+		}
 		const role = model.roleById.get(roleId);
 		if (!role) return null;
-		const holders = model.holders.get(roleId) ?? [];
-		const groupIds = shown.get(roleId) ?? [];
-		const everyone = holders.some((group) => group.kind === "everyone");
-		const others = holders.filter((group) => group.kind !== "everyone").length;
-		const count = filtering && groupIds.length !== holders.length ? t.groupsShown(groupIds.length, holders.length) : others > 0 || !everyone ? t.groups(everyone ? others : holders.length) : void 0;
+		const direct = model.holders.get(roleId) ?? [];
+		const inherited = model.inheritedHolders.get(roleId) ?? [];
+		const all = new Map([...direct, ...inherited.map((holder) => holder.principal)].map((p) => [p.id, p]));
+		const principalIds = shown.get(roleId) ?? [];
+		const everyone = [...all.values()].some((principal) => principal.kind === "everyone");
+		const people = [...all.values()].filter((principal) => principal.kind === "user").length;
+		const groups = [...all.values()].filter((principal) => principal.kind === "group").length;
+		const count = filtering && principalIds.length !== all.size ? t.holdersShown(principalIds.length, all.size) : people + groups > 0 ? t.holders(people, groups) : void 0;
 		const everyoneTag = everyone && /* @__PURE__ */ jsxs(StatusBadge, {
 			variant: "info",
 			size: "md",
@@ -207,98 +273,120 @@ function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, ac
 			id: sectionId(roleId),
 			open: expanded.has(roleId),
 			onOpenChange: (open) => onExpandedChange(roleId, open),
-			disabled: holders.length === 0,
+			disabled: all.size === 0,
 			notice: failure,
-			title: /* @__PURE__ */ jsxs(Fragment, { children: [role.name, role.highImpact && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(HighImpact, { t })] })] }),
+			title: role.name,
 			description: role.description,
 			aside: /* @__PURE__ */ jsxs(Fragment, { children: [everyoneTag, count] }),
 			narrowAside: everyoneTag && !count ? /* @__PURE__ */ jsx("span", {
 				className: "mt-1 inline-flex",
 				children: everyoneTag
 			}) : count,
-			children: groupIds.map((groupId) => {
-				const group = model.groupById.get(groupId);
-				if (!group) return null;
-				if (sameRemoval(actions.removal, groupId, roleId) && actions.removal) return /* @__PURE__ */ jsx(RemoveConfirm, {
+			children: principalIds.map((principalId) => {
+				const principal = all.get(principalId);
+				if (!principal) return null;
+				const lead = /* @__PURE__ */ jsx(PrincipalTile, {
+					principal,
+					compact: true,
+					className: "hidden @min-[30rem]/access:flex"
+				});
+				if (!direct.some((holder) => holder.id === principalId)) {
+					const from = inherited.find((holder) => holder.principal.id === principalId)?.from;
+					return /* @__PURE__ */ jsx(Row, {
+						lead,
+						title: principalLabel(principal, t),
+						meta: [aboutOf(principal, t), from !== void 0 && t.inheritedFrom(from)].filter(Boolean).join(" · "),
+						action: /* @__PURE__ */ jsx(Locked, {})
+					}, principalId);
+				}
+				if (sameRemoval(actions.removal, principalId, roleId) && actions.removal) return /* @__PURE__ */ jsx(RemoveConfirm, {
 					model,
 					removal: actions.removal,
 					saving: actions.saving.size > 0,
 					onCancel: actions.onCancelRemove,
 					onConfirm: () => actions.removal && actions.onRemove(actions.removal),
 					t
-				}, groupId);
-				const overlap = overlapOf(model, groupId, role);
-				const hint = overlap.coveredBy.length > 0 ? t.coveredBy(overlap.coveredBy.map((other) => other.name)) : overlap.everyone ? t.everyoneHasThisToo : void 0;
-				const label = t.removeRole(groupLabel(group, t), role.name);
+				}, principalId);
+				const hint = overlapHint(overlapOf(model, principalId, role), t);
+				const label = t.removeRole(principalLabel(principal, t), role.name);
 				return /* @__PURE__ */ jsx(Row, {
-					lead: /* @__PURE__ */ jsx(GroupTile, {
-						everyone: group.kind === "everyone",
-						className: "hidden @min-[30rem]/access:flex"
-					}),
-					title: groupLabel(group, t),
-					meta: [sizeOf(group, t), hint].filter(Boolean).join(" · "),
+					lead,
+					title: principalLabel(principal, t),
+					meta: [aboutOf(principal, t), hint].filter(Boolean).join(" · "),
 					action: !actions.readOnly && /* @__PURE__ */ jsx(RemoveButton, {
 						label,
 						saving: actions.saving.has(key({
-							groupId,
+							principalId,
 							roleId
 						})),
 						removal: {
-							groupId,
+							principalId,
 							roleIds: [roleId],
 							all: false
 						},
 						onAsk: actions.onAskRemove
 					})
-				}, groupId);
+				}, principalId);
 			})
 		}, roleId);
 	});
 }
-/** Which roles each group has, group by group. */
-function ByGroup({ model, shown, order, expanded, onExpandedChange, actions, t, sectionId }) {
-	return order.map((groupId) => {
-		const group = model.groupById.get(groupId);
-		if (!group) return null;
-		const held = model.held.get(groupId) ?? [];
-		const roleIds = new Set(shown.get(groupId) ?? held.map((role) => role.id));
+/** Which roles each person and group has, one by one. */
+function ByPrincipal({ model, shown, order, expanded, onExpandedChange, actions, t, sectionId }) {
+	return order.map((principalId) => {
+		const principal = model.principalById.get(principalId);
+		if (!principal) return null;
+		const owner = isOwner(model, principalId);
+		const held = model.held.get(principalId) ?? [];
+		const ownInherited = model.inherited.get(principalId) ?? [];
+		const roleIds = new Set(shown.get(principalId) ?? [...held, ...ownInherited.map((h) => h.role)].map((r) => r.id));
 		const roles = held.filter((role) => roleIds.has(role.id));
-		const inherited = inheritedRoles(model, groupId).filter((role) => !held.some((own) => own.id === role.id));
-		const everyone = group.kind === "everyone";
-		const failure = actions.failure?.groupId === groupId ? actions.failure.node : void 0;
-		const badges = held.length <= 2 ? held : held.slice(0, 1);
-		const hidden = held.slice(badges.length);
-		const roleBadges = /* @__PURE__ */ jsxs(Fragment, { children: [badges.map((role) => /* @__PURE__ */ jsx(StatusBadge, {
-			size: "md",
-			variant: role.highImpact ? "warning" : "default",
-			children: role.name
-		}, role.id)), hidden.length > 0 && /* @__PURE__ */ jsxs(StatusBadge, {
-			size: "md",
-			children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: t.moreRoles(hidden.length)
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: t.moreRolesLabel(hidden.map((role) => role.name))
-			})]
-		})] });
+		const inherited = ownInherited.filter((holding) => roleIds.has(holding.role.id) && !held.some((role) => role.id === holding.role.id));
+		const through = firstOfEach(alsoHas(model, principalId)).filter((holding) => holding.through !== void 0 && !held.some((role) => role.id === holding.role.id) && !ownInherited.some((own) => own.role.id === holding.role.id));
+		const failure = actions.failure?.principalId === principalId ? actions.failure.node : void 0;
+		const everyone = principal.kind === "everyone";
+		const badgeRoles = [...held, ...ownInherited.map((holding) => holding.role).filter((role) => !held.includes(role))];
+		const room = owner ? 1 : 2;
+		const badges = badgeRoles.length <= room ? badgeRoles : badgeRoles.slice(0, room - 1);
+		const hidden = badgeRoles.slice(badges.length);
+		const roleBadges = /* @__PURE__ */ jsxs(Fragment, { children: [
+			owner && /* @__PURE__ */ jsx(StatusBadge, {
+				size: "md",
+				variant: "info",
+				children: t.owner
+			}),
+			badges.map((role) => /* @__PURE__ */ jsx(StatusBadge, {
+				size: "md",
+				children: role.name
+			}, role.id)),
+			hidden.length > 0 && /* @__PURE__ */ jsxs(StatusBadge, {
+				size: "md",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: t.moreRoles(hidden.length)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: t.moreRolesLabel(hidden.map((role) => role.name))
+				})]
+			})
+		] });
 		return /* @__PURE__ */ jsx(Section, {
-			id: sectionId(groupId),
-			open: expanded.has(groupId),
-			onOpenChange: (open) => onExpandedChange(groupId, open),
-			lead: /* @__PURE__ */ jsx(GroupTile, {
-				everyone,
+			id: sectionId(principalId),
+			open: expanded.has(principalId),
+			onOpenChange: (open) => onExpandedChange(principalId, open),
+			lead: /* @__PURE__ */ jsx(PrincipalTile, {
+				principal,
 				className: "hidden @min-[30rem]/access:flex"
 			}),
 			notice: failure,
-			title: groupLabel(group, t),
-			description: everyone ? t.everyoneJoinLater : sizeOf(group, t),
+			title: principalLabel(principal, t),
+			description: everyone ? t.everyoneJoinLater : aboutOf(principal, t),
 			aside: roleBadges,
 			narrowAside: /* @__PURE__ */ jsx("span", {
 				className: "mt-1 flex flex-wrap gap-1",
 				children: roleBadges
 			}),
-			children: sameRemoval(actions.removal, groupId) && actions.removal ? /* @__PURE__ */ jsx(RemoveConfirm, {
+			children: sameRemoval(actions.removal, principalId) && actions.removal ? /* @__PURE__ */ jsx(RemoveConfirm, {
 				model,
 				removal: actions.removal,
 				saving: actions.saving.size > 0,
@@ -306,7 +394,15 @@ function ByGroup({ model, shown, order, expanded, onExpandedChange, actions, t,
 				onConfirm: () => actions.removal && actions.onRemove(actions.removal),
 				t
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-				roles.map((role) => sameRemoval(actions.removal, groupId, role.id) && actions.removal ? /* @__PURE__ */ jsx(RemoveConfirm, {
+				owner && /* @__PURE__ */ jsx(Row, {
+					title: /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: t.owner
+					}),
+					meta: t.ownerDescription,
+					action: /* @__PURE__ */ jsx(Locked, {})
+				}),
+				roles.map((role) => sameRemoval(actions.removal, principalId, role.id) && actions.removal ? /* @__PURE__ */ jsx(RemoveConfirm, {
 					model,
 					removal: actions.removal,
 					saving: actions.saving.size > 0,
@@ -315,35 +411,43 @@ function ByGroup({ model, shown, order, expanded, onExpandedChange, actions, t,
 					t
 				}, role.id) : /* @__PURE__ */ jsx(RoleRow, {
 					model,
-					group,
+					principal,
 					role,
 					actions,
 					t
 				}, role.id)),
-				inherited.map((role) => /* @__PURE__ */ jsx(Row, {
-					muted: true,
-					title: role.name,
-					meta: t.throughEveryone
+				inherited.map(({ role, from }) => /* @__PURE__ */ jsx(Row, {
+					title: /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: role.name
+					}),
+					meta: t.inheritedFrom(from),
+					action: /* @__PURE__ */ jsx(Locked, {})
 				}, role.id)),
-				!actions.readOnly && /* @__PURE__ */ jsxs("div", {
+				through.map((holding) => /* @__PURE__ */ jsx(Row, {
+					muted: true,
+					title: holding.role.name,
+					meta: holding.through?.kind === "everyone" ? t.throughEveryone : t.through(sourceOf(holding))
+				}, holding.role.id)),
+				!actions.readOnly && (!owner || held.length > 0) && /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap items-center gap-2 ps-11 pe-4 pt-2",
-					children: [/* @__PURE__ */ jsx(Button, {
+					children: [!owner && /* @__PURE__ */ jsx(Button, {
 						variant: "secondary",
 						size: "sm",
 						icon: /* @__PURE__ */ jsx(AddIcon, {}),
-						onClick: () => actions.onGrantMore(groupId),
+						onClick: () => actions.onGrantMore(principalId),
 						children: t.grantMoreRoles
-					}), /* @__PURE__ */ jsx(Button, {
+					}), held.length > 0 && /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "sm",
 						"data-remove": removeKey({
-							groupId,
+							principalId,
 							roleIds: [],
 							all: true
 						}),
 						className: "text-(--theme-error-text)",
 						onClick: () => actions.onAskRemove({
-							groupId,
+							principalId,
 							roleIds: held.map((role) => role.id),
 							all: true
 						}),
@@ -351,26 +455,26 @@ function ByGroup({ model, shown, order, expanded, onExpandedChange, actions, t,
 					})]
 				})
 			] })
-		}, groupId);
+		}, principalId);
 	});
 }
-function RoleRow({ model, group, role, actions, t }) {
-	const overlap = overlapOf(model, group.id, role);
-	const meta = overlap.coveredBy.length > 0 ? t.redundant(overlap.coveredBy.map((other) => other.name)) : role.description;
+function RoleRow({ model, principal, role, actions, t }) {
+	const overlap = overlapOf(model, principal.id, role);
+	const meta = overlap.owner ? t.redundantOwner : overlap.coveredBy.length > 0 ? t.redundant(overlap.coveredBy.map((other) => other.name)) : role.description;
 	return /* @__PURE__ */ jsx(Row, {
-		title: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		title: /* @__PURE__ */ jsx("span", {
 			className: "font-medium",
 			children: role.name
-		}), role.highImpact && /* @__PURE__ */ jsx(HighImpact, { t })] }),
+		}),
 		meta,
 		action: !actions.readOnly && /* @__PURE__ */ jsx(RemoveButton, {
-			label: t.removeRole(groupLabel(group, t), role.name),
+			label: t.removeRole(principalLabel(principal, t), role.name),
 			saving: actions.saving.has(key({
-				groupId: group.id,
+				principalId: principal.id,
 				roleId: role.id
 			})),
 			removal: {
-				groupId: group.id,
+				principalId: principal.id,
 				roleIds: [role.id],
 				all: false
 			},
@@ -379,4 +483,4 @@ function RoleRow({ model, group, role, actions, t }) {
 	});
 }
 //#endregion
-export { ByGroup, ByRole, HighImpact, RemoveConfirm, removeKey };
+export { ByPrincipal, ByRole, OWNER_SECTION, RemoveConfirm, principalLabel, removeKey };

package/dist/access/GrantView.d.ts

@@ -1,24 +1,25 @@
 import { type ReactNode } from 'react';
-import { type DescribeGroup, type DetailsCache, type SearchGroups } from './GroupPicker.js';
 import { type AccessModel } from './model.js';
+import { type DescribeGroup, type DetailsCache, type SearchPrincipals } from './PrincipalPicker.js';
 import type { AccessStrings } from './strings.js';
-import type { AccessChange, AccessGroup } from './types.js';
+import type { AccessChange, AccessPrincipal } from './types.js';
 export interface GrantSelection {
-    groupIds: string[];
+    principalIds: string[];
     roleIds: string[];
 }
 /** The grant form's body and footer, which the drawer lays out in its own body and footer. */
-export declare function useGrantView({ model, selection, onSelectionChange, resourceName, describeGroup, searchGroups, groupCount, recentGroupIds, cache, seen, saving, failure, onGrant, onCancel, focusLater, boundary, t, }: {
+export declare function useGrantView({ model, selection, onSelectionChange, resourceName, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, cache, seen, saving, failure, onGrant, onCancel, focusLater, boundary, t, }: {
     model: AccessModel;
     selection: GrantSelection;
     onSelectionChange: (next: GrantSelection) => void;
     resourceName: string;
     describeGroup?: DescribeGroup | undefined;
-    searchGroups?: SearchGroups | undefined;
+    searchPrincipals?: SearchPrincipals | undefined;
     groupCount?: number | undefined;
-    recentGroupIds?: readonly string[] | undefined;
+    peopleCount?: number | undefined;
+    recentPrincipalIds?: readonly string[] | undefined;
     cache: DetailsCache;
-    seen: Map<string, AccessGroup>;
+    seen: Map<string, AccessPrincipal>;
     saving: boolean;
     /** The failed grant's callout, which stays in the form so the choices can be retried. */
     failure: ReactNode;
@@ -26,7 +27,7 @@ export declare function useGrantView({ model, selection, onSelectionChange, reso
     onCancel: () => void;
     /** Sends focus somewhere once the change it goes with has rendered. */
     focusLater: (find: () => HTMLElement | null | undefined) => void;
-    /** The drawer's body, above its footer, which the open group list fills. */
+    /** The drawer's body, above its footer, which the open list fills. */
     boundary: Element | null;
     t: AccessStrings;
 }): {