@parallelworks/ui 0.55.0 → 0.57.0

package/README.md

@@ -14,7 +14,7 @@ so an application ships only what it imports:
 | `./editor` | Monaco editor (`monaco-editor` is an optional peer), loaded on first mount with the languages it needs; YAML validation, completion and hover run in a bundled worker |
 | `./logviewer` | log viewer with ANSI color and search |
 | `./file-explorer` | object storage explorer over a host-supplied provider |
-| `./access` | `AccessDrawer`: who has access to a resource, and granting roles to groups |
+| `./access` | `AccessDrawer`: who has access to a resource, and granting roles to people and groups |
 | `./ai`, `./ai/openai`, `./ai/mock` | chat interface and adapters |
 | `./theme.css`, `./base.css`, `./fonts.css`, `./styles.css`, `./logviewer.css`, `./ai.css` | stylesheets |
 
@@ -272,9 +272,26 @@ until it reaches its target against every surface it sits on.
 | Secondary text, links, status text, syntax and terminal colors | 4.5 / 4.5 / 7 | 60 / 70 / 85 |
 | Placeholders | 3 / 3 / 4.5 | 45 / 50 / 65 |
 | Focus ring, status icons, dots, borders and bars | 3 / 3 / 4.5 | |
-| Control borders | 1.6 / 2.2 / 3 | |
+| Control edges | 3 / 3 / 4.5 | |
+| Text field edges | 1.3 / 1.5 / 3 | |
 | Text on the accent, white text on a solid status fill | 4.5 | |
 
+Lines come in three tokens. `--theme-border` is decorative: card outlines,
+dividers and table lines, which stay quiet. `--theme-border-strong` is a
+control's edge: the box of a checkbox, the ring of a radio, and the off track of
+a switch or slider. It is all that shows where the control is, so it is solved
+to WCAG 1.4.11's 3:1 on the page, the panels and the input fill. A checked
+control's edge, an on switch's track and a slider's filled part take
+`--theme-focus`: the accent as picked when it reaches 3:1, and otherwise the
+accent solved to secondary text's contrast, so on always reads heavier than the
+off track. `--theme-border-field` is a text field's resting edge: inputs,
+selects, textareas and pickers. A field is also found by its label, its size and
+the text inside it, and a form of 3:1 boxes reads heavy, so its edge sits
+between the other two and reaches 3:1 at contrast 100. Pointing at a field
+raises its edge to `--theme-border-strong`. A host that sets
+`--theme-border-strong` itself sets it to a color that keeps 3:1 against its
+surfaces.
+
 Status colors (success, error, warning, info, favorite) and terminal colors keep
 fixed hues, so red means the same thing in every theme.
 
@@ -477,11 +494,13 @@ into a tone. Pass an `id` to replace a toast rather than stack another.
 ## Access
 
 `AccessDrawer` shows who holds which role on one resource, and grants and takes
-them away. A role is a named set of permissions; groups are granted roles, never
-permissions one by one. Two roles may overlap: the drawer works the overlap out
-from each role's `permissions` and says so as a hint ("Sudo covers this too"),
-and before a role is taken away it lists exactly what the group loses, the
-permissions no role it keeps still gives, and what it keeps.
+them away. A role is a named set of permissions; people and groups are granted
+roles, never permissions one by one. Two roles may overlap: the drawer works the
+overlap out from each role's `permissions` and says so as a hint ("Sudo covers
+this too"), and before a role is taken away it lists exactly what is lost, the
+permissions nothing they keep still gives, and what they keep: their other
+roles, a person's groups' roles, everyone's, and roles granted above the
+resource.
 
 ```tsx
 import { AccessDrawer, type AccessChange } from '@parallelworks/ui/access'
@@ -492,11 +511,17 @@ import { AccessDrawer, type AccessChange } from '@parallelworks/ui/access'
   resourceName={cluster.name}
   roles={[{ id: 'login', name: 'Login', description: 'Sign in.', permissions: ['cluster:login'] }]}
   permissions={[{ id: 'cluster:login', label: 'Sign in' }]}
-  groups={[{ id: 'org', name: 'Everyone', kind: 'everyone', memberCount: 214 }, ...granted]}
-  grants={grants} // { groupId, roleId }[]
+  principals={[
+    { id: 'org', name: 'Everyone', kind: 'everyone', memberCount: 214 },
+    { id: 'u-ana', name: 'Ana Ruiz', kind: 'user', detail: 'ana@example.com', groupIds: ['g-data'] },
+    { id: 'g-data', name: 'data-eng', kind: 'group', memberCount: 24 },
+  ]}
+  grants={grants} // { principalId, roleId }[]
+  owner="u-ana"
+  inherited={[{ principalId: 'g-admins', roleId: 'org-admin', from: 'the organization' }]}
   onChange={(change: AccessChange) => api.patch(change)} // { grant, revoke }
   describeGroup={(id, signal) => api.group(id, { signal })}
-  searchGroups={(query, signal) => api.groups({ query, signal })}
+  searchPrincipals={(query, signal) => api.principals({ query, signal })}
   readOnly={!canManage}
   readOnlyReason="Only people with the Admin role can change it."
 />
@@ -507,18 +532,29 @@ import { AccessDrawer, type AccessChange } from '@parallelworks/ui/access'
   and when it rejects the drawer says that nothing changed and offers Retry. A
   saved change offers Undo in a toast. Pass the new grants back through
   `grants`; the drawer never keeps its own copy.
-- `groups` holds every group that has a role here, and everyone if the resource
-  can be granted to everyone (`kind: 'everyone'`, at most one). Without
-  `searchGroups` it is also the list to grant to; with it, the picker asks the
-  host as the reader types.
-- `describeGroup` fills the pane beside the group picker for the highlighted
-  group: where it comes from, its first members and when it last changed. It is
-  asked once per group while the drawer is mounted, and aborted when the
-  highlight moves on.
-- `highImpact` roles carry a tag, and granting anything to everyone says how
-  many people it reaches and asks to confirm.
-- A development build warns about duplicate ids and grants that name unknown
-  roles or groups.
+- `principals` holds every person and group that holds a role here or owns it,
+  the groups those people are in, and everyone if the resource can be granted
+  to everyone (`kind: 'everyone'`, at most one). Without `searchPrincipals` it
+  is also the list to grant to; with it, the picker asks the host as the reader
+  types, and lists people and groups apart.
+- A person's `groupIds` name the groups they are in. Only groups holding a role
+  here matter, and with them, taking a role from the person says what they keep
+  through those groups.
+- `owner` names the principal who owns the resource. It has every permission,
+  shows first, and can't be removed; granting it a role adds nothing.
+- `inherited` holds roles granted above the resource, such as to the whole
+  organization. They show locked, "through" where they were granted, and count
+  toward what someone keeps. A role held only that way takes
+  `grantable: false`, so it isn't offered to grant here.
+- `describeGroup` fills the pane beside the picker for the highlighted group:
+  where it comes from, its first members and when it last changed. It is asked
+  once per group while the drawer is mounted, and aborted when the highlight
+  moves on. A person's pane comes from the principal itself.
+- `privileged` roles are labeled in the role picker. Granting anything to
+  everyone says how many people it reaches and asks to confirm, with a
+  destructive button when a privileged role is among them.
+- A development build warns about duplicate ids, and grants, inherited grants
+  or an owner that name unknown roles or principals.
 
 ## Host chrome
 
@@ -587,8 +623,8 @@ meaning across the apps.
   `DisableUserIcon` turns off their account. `ChangesRequestedIcon` asks for
   changes to something sent, while `FlaggedIcon` marks an item for attention.
   `ProjectIcon` is a project, while `FolderIcon` is a folder of files.
-  `LibraryIcon` is a collection of write-ups to browse, while `NotebookIcon`
-  is one notebook.
+  `LibraryIcon` is a collection of write-ups to browse, `ArticleIcon` one
+  write-up to read, such as a case study, and `NotebookIcon` one notebook.
   `PendingIcon` is a requirement not met yet and `NotRunningIcon` a run not
   started; they share the empty circle, so keep them out of the same list.
 - **Adding an icon:** pick the [Lucide glyph](https://lucide.dev/icons) and add

package/dist/access/AccessDrawer.d.ts

@@ -1,21 +1,30 @@
 import { type ReactNode } from 'react';
 import { type AccessModel } from './model.js';
+import type { SearchPrincipals } from './PrincipalPicker.js';
 import { type AccessStrings } from './strings.js';
-import type { AccessChange, AccessGrant, AccessGroup, AccessGroupDetails, AccessPermission, AccessRole } from './types.js';
-export type AccessArrangement = 'role' | 'group';
+import type { AccessChange, AccessGrant, AccessGroupDetails, AccessInheritedGrant, AccessPermission, AccessPrincipal, AccessRole } from './types.js';
+export type AccessArrangement = 'role' | 'principal';
 export interface AccessDrawerProps {
     open: boolean;
     onClose: () => void;
     /** What access is to, as the reader knows it: "gpu-cluster-east". */
     resourceName: string;
-    /** Every role that can be granted here, in the order to list them. */
+    /** Every role that can be granted here, in the order to list them, and any held here only
+     *  through somewhere else (`grantable: false`). */
     roles: readonly AccessRole[];
-    /** Every group that holds a role here, and everyone when the resource can be granted to
-     *  everyone. Without `searchGroups`, also every group that can be granted one. */
-    groups: readonly AccessGroup[];
+    /** Every person and group that holds a role here or owns it, the groups those people are in,
+     *  and everyone when the resource can be granted to everyone. Without `searchPrincipals`,
+     *  also everyone who can be granted one. */
+    principals: readonly AccessPrincipal[];
     /** Who holds which role. The drawer shows these and never changes them itself. */
     grants: readonly AccessGrant[];
-    /** Names the permissions roles list, for what a group loses when it loses a role. */
+    /** The principal who owns it, among `principals`: it has every permission, always, and can't
+     *  be removed. */
+    owner?: string | undefined;
+    /** Roles held through something the resource is part of, such as its organization: they
+     *  show, locked, and count toward what someone keeps. */
+    inherited?: readonly AccessInheritedGrant[] | undefined;
+    /** Names the permissions roles list, for what someone loses when they lose a role. */
     permissions?: readonly AccessPermission[] | undefined;
     /** Saves a change. Return a promise that settles once it is saved: until then its rows show
      *  that they are saving, and when it rejects the drawer says that nothing changed and offers
@@ -27,26 +36,28 @@ export interface AccessDrawerProps {
     readOnly?: boolean | undefined;
     /** Who can change it, said in read-only mode: "Only people with the Admin role can change it." */
     readOnlyReason?: ReactNode;
-    /** More about a group, asked for when it is highlighted in the group picker and kept while the
+    /** More about a group, asked for when it is highlighted in the picker and kept while the
      *  drawer is mounted. A highlight that moves on aborts `signal`. */
     describeGroup?: ((groupId: string, signal: AbortSignal) => Promise<AccessGroupDetails>) | undefined;
-    /** Finds groups to grant to, for an organization with too many to pass in `groups`. A newer
-     *  query aborts `signal`. Without it, the picker filters `groups`. */
-    searchGroups?: ((query: string, signal: AbortSignal) => Promise<readonly AccessGroup[]>) | undefined;
+    /** Finds people and groups to grant to, for an organization with too many to pass in
+     *  `principals`. A newer query aborts `signal`. Without it, the picker filters `principals`. */
+    searchPrincipals?: SearchPrincipals | undefined;
     /** How many groups the organization has, for the picker's hint and heading. */
     groupCount?: number | undefined;
-    /** Groups the reader granted to lately, listed first in the picker. */
-    recentGroupIds?: readonly string[] | undefined;
-    /** How the list starts out: role by role, or group by group. */
+    /** How many people the organization has, for the picker's hint and heading. */
+    peopleCount?: number | undefined;
+    /** People and groups the reader granted to lately, listed first in the picker. */
+    recentPrincipalIds?: readonly string[] | undefined;
+    /** How the list starts out: role by role, or person and group one by one. */
     defaultArrangement?: AccessArrangement | undefined;
     /** As `Drawer`'s. */
     width?: number | string | undefined;
 }
-/** Who has access to one resource, and the place to change it: roles granted to groups.
- *  Overlapping roles are allowed and only redundant, which the drawer points out; taking a
- *  role away first says exactly what the group loses. Each change is saved as it is made, with
- *  Undo in a toast. */
-export declare function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, permissions, onChange, loading, readOnly, readOnlyReason, describeGroup, searchGroups, groupCount, recentGroupIds, defaultArrangement, width, }: AccessDrawerProps): import("react").JSX.Element;
+/** Who has access to one resource, and the place to change it: roles granted to people and
+ *  groups. Overlapping roles are allowed and only redundant, which the drawer points out; taking
+ *  a role away first says exactly what is lost. The owner and roles granted above the resource
+ *  show, locked. Each change is saved as it is made, with Undo in a toast. */
+export declare function AccessDrawer({ open, onClose, resourceName, roles, principals, grants, owner, inherited, permissions, onChange, loading, readOnly, readOnlyReason, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, defaultArrangement, width, }: AccessDrawerProps): import("react").JSX.Element;
 type Match = (query: string, ...texts: (string | undefined)[]) => boolean;
 export declare function filterAccess(model: AccessModel, arrangement: AccessArrangement, query: string, match: Match, t: AccessStrings): {
     shown: Map<string, readonly string[]>;

package/dist/access/AccessDrawer.js

@@ -8,8 +8,8 @@ import { Drawer } from "../components/Drawer.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { SearchInput } from "../components/SearchInput.js";
 import { SegmentedControl } from "../components/SegmentedControl.js";
-import { buildModel, invert, key, warnAboutMisuse } from "./model.js";
-import { ByGroup, ByRole, removeKey } from "./AccessList.js";
+import { buildModel, invert, key, principalsWithAccess, warnAboutMisuse } from "./model.js";
+import { ByPrincipal, ByRole, OWNER_SECTION, principalLabel, removeKey } from "./AccessList.js";
 import { holdFocus, useFocusAfterRender } from "./focus.js";
 import { useGrantView } from "./GrantView.js";
 import { useAccessStrings } from "./strings.js";
@@ -17,29 +17,47 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/access/AccessDrawer.tsx
 var EMPTY_SELECTION = {
-	groupIds: [],
+	principalIds: [],
 	roleIds: []
 };
-/** Who has access to one resource, and the place to change it: roles granted to groups.
-*  Overlapping roles are allowed and only redundant, which the drawer points out; taking a
-*  role away first says exactly what the group loses. Each change is saved as it is made, with
-*  Undo in a toast. */
-function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, permissions, onChange, loading = false, readOnly = false, readOnlyReason, describeGroup, searchGroups, groupCount, recentGroupIds, defaultArrangement = "role", width = 560 }) {
+/** Who has access to one resource, and the place to change it: roles granted to people and
+*  groups. Overlapping roles are allowed and only redundant, which the drawer points out; taking
+*  a role away first says exactly what is lost. The owner and roles granted above the resource
+*  show, locked. Each change is saved as it is made, with Undo in a toast. */
+function AccessDrawer({ open, onClose, resourceName, roles, principals, grants, owner, inherited, permissions, onChange, loading = false, readOnly = false, readOnlyReason, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, defaultArrangement = "role", width = 560 }) {
 	const t = useAccessStrings();
 	const uid = useId();
-	const model = useMemo(() => buildModel(roles, groups, grants, permissions), [
+	const model = useMemo(() => buildModel({
 		roles,
-		groups,
+		principals,
 		grants,
-		permissions
+		permissions,
+		inherited,
+		owner
+	}), [
+		roles,
+		principals,
+		grants,
+		permissions,
+		inherited,
+		owner
 	]);
 	useEffect(() => {
-		if (!loading) warnAboutMisuse(roles, groups, grants, permissions);
+		if (!loading) warnAboutMisuse({
+			roles,
+			principals,
+			grants,
+			permissions,
+			inherited,
+			owner
+		});
 	}, [
 		roles,
-		groups,
+		principals,
 		grants,
 		permissions,
+		inherited,
+		owner,
 		loading
 	]);
 	const [view, setView] = useState("list");
@@ -48,7 +66,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 	const [query, setQuery] = useState("");
 	const [expanded, setExpanded] = useState({
 		role: /* @__PURE__ */ new Set(),
-		group: /* @__PURE__ */ new Set()
+		principal: /* @__PURE__ */ new Set()
 	});
 	const [removal, setRemoval] = useState();
 	const [saving, setSaving] = useState();
@@ -71,9 +89,9 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 	const names = (changed) => {
 		const all = [...changed.grant, ...changed.revoke];
 		return {
-			groupNames: [...new Set(all.map((grant) => grant.groupId))].map((id) => {
-				const group = seen.get(id) ?? model.groupById.get(id);
-				return group?.kind === "everyone" ? t.everyone : group?.name ?? id;
+			principalNames: [...new Set(all.map((grant) => grant.principalId))].map((id) => {
+				const principal = seen.get(id) ?? model.principalById.get(id);
+				return principal?.kind === "everyone" ? t.everyone : principal?.name ?? id;
 			}),
 			roleNames: [...new Set(all.map((grant) => grant.roleId))].map((id) => model.roleById.get(id)?.name ?? id)
 		};
@@ -84,7 +102,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 	/** Saves a change and reports how it went; resolves true once saved. */
 	const save = async (next, where) => {
 		if (!onChange || next.grant.length === 0 && next.revoke.length === 0) return false;
-		const { groupNames, roleNames } = names(next);
+		const { principalNames, roleNames } = names(next);
 		setSaving(next);
 		setFailure(void 0);
 		try {
@@ -92,7 +110,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		} catch (error) {
 			setFailure({
 				change: next,
-				title: next.grant.length > 0 ? t.grantFailed(groupNames, roleNames) : t.removeFailed(groupNames[0] ?? "", roleNames),
+				title: next.grant.length > 0 ? t.grantFailed(principalNames, roleNames) : t.removeFailed(principalNames[0] ?? "", roleNames),
 				message: messageOf(error),
 				...where
 			});
@@ -100,7 +118,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		} finally {
 			setSaving(void 0);
 		}
-		toast.success(next.grant.length > 0 ? t.granted(groupNames, roleNames) : t.removed(groupNames, roleNames), { action: {
+		toast.success(next.grant.length > 0 ? t.granted(principalNames, roleNames) : t.removed(principalNames, roleNames), { action: {
 			label: t.common.undo,
 			onClick: () => undo(next)
 		} });
@@ -111,9 +129,9 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		setFailure((current) => current?.inGrant ? void 0 : current);
 		focusLater(() => visible(body.current?.querySelectorAll("[data-grant-access]")));
 	};
-	const toGrant = (groupIds = []) => {
+	const toGrant = (principalIds = []) => {
 		setSelection({
-			groupIds,
+			principalIds,
 			roleIds: []
 		});
 		setRemoval(void 0);
@@ -123,11 +141,11 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 	const grant = async (next) => {
 		if (await save(next, {
 			inGrant: true,
-			groupId: next.grant[0]?.groupId ?? ""
+			principalId: next.grant[0]?.principalId ?? ""
 		})) {
 			setExpanded((current) => ({
 				role: /* @__PURE__ */ new Set([...current.role, ...next.grant.map((g) => g.roleId)]),
-				group: /* @__PURE__ */ new Set([...current.group, ...next.grant.map((g) => g.groupId)])
+				principal: /* @__PURE__ */ new Set([...current.principal, ...next.grant.map((g) => g.principalId)])
 			}));
 			toList();
 		}
@@ -136,22 +154,22 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		const next = {
 			grant: [],
 			revoke: pending.roleIds.map((roleId) => ({
-				groupId: pending.groupId,
+				principalId: pending.principalId,
 				roleId
 			}))
 		};
 		const anchor = arrangement === "role" && !pending.all ? pending.roleIds[0] : void 0;
 		await save(next, {
 			inGrant: false,
-			groupId: pending.groupId,
+			principalId: pending.principalId,
 			roleId: anchor
 		});
 		setRemoval(void 0);
-		focusLater(() => document.getElementById(sectionId(anchor ?? pending.groupId)) ?? body.current?.querySelector("input[type=\"search\"]"));
+		focusLater(() => document.getElementById(sectionId(anchor ?? pending.principalId)) ?? body.current?.querySelector("input[type=\"search\"]"));
 	};
 	const retry = (failed) => failed.inGrant ? grant(failed.change) : save(failed.change, {
 		inGrant: false,
-		groupId: failed.groupId,
+		principalId: failed.principalId,
 		roleId: failed.roleId
 	});
 	const failureNode = failure && /* @__PURE__ */ jsx(Callout, {
@@ -179,9 +197,10 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		onSelectionChange: setSelection,
 		resourceName,
 		describeGroup,
-		searchGroups,
+		searchPrincipals,
 		groupCount,
-		recentGroupIds,
+		peopleCount,
+		recentPrincipalIds,
 		cache,
 		seen,
 		saving: saving !== void 0,
@@ -193,8 +212,9 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		t
 	});
 	const savingKeys = useMemo(() => new Set(saving?.revoke.map(key) ?? []), [saving]);
-	const empty = !loading && model.held.size === 0;
-	const View = arrangement === "role" ? ByRole : ByGroup;
+	const withAccess = principalsWithAccess(model);
+	const empty = !loading && withAccess.length === 0;
+	const View = arrangement === "role" ? ByRole : ByPrincipal;
 	const grantButton = (className) => /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
 		icon: /* @__PURE__ */ jsx(AddIcon, {}),
@@ -233,11 +253,12 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 								value: "role",
 								label: t.byRole
 							}, {
-								value: "group",
-								label: t.byGroup
+								value: "principal",
+								label: t.byPrincipal
 							}]
 						})
 					}),
+					editable && grantButton("ms-auto hidden @min-[30rem]/access:inline-flex"),
 					/* @__PURE__ */ jsx(SearchInput, {
 						label: t.filter,
 						value: query,
@@ -245,9 +266,8 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 							setQuery(next);
 							setExpanded(expandedFor(model, next.trim(), match, t));
 						},
-						className: "min-w-0 flex-1 basis-full @min-[30rem]/access:basis-0"
-					}),
-					editable && grantButton("hidden @min-[30rem]/access:inline-flex")
+						className: "min-w-0 basis-full"
+					})
 				]
 			}),
 			failure && !failure.inGrant && !filtered.order.includes(anchorOf(failure, arrangement)) && /* @__PURE__ */ jsx("div", {
@@ -307,10 +327,10 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 							if (asked) focusLater(() => body.current?.querySelector(`[data-remove="${CSS.escape(removeKey(asked))}"]`));
 						},
 						onRemove: remove,
-						onGrantMore: (groupId) => toGrant([groupId]),
+						onGrantMore: (principalId) => toGrant([principalId]),
 						failure: failure && !failure.inGrant ? {
 							node: failureNode,
-							groupId: failure.groupId,
+							principalId: failure.principalId,
 							roleId: failure.roleId
 						} : void 0
 					}
@@ -329,7 +349,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 		width,
 		padded: false,
 		title: granting ? t.grantAccess : t.title,
-		description: granting ? resourceName : loading ? resourceName : t.summary(resourceName, [...model.held.keys()].filter((id) => id !== model.everyone?.id).length, model.everyone !== void 0 && model.held.has(model.everyone.id)),
+		description: granting ? resourceName : loading ? resourceName : t.summary(resourceName, withAccess.filter((principal) => principal.kind === "user").length, withAccess.filter((principal) => principal.kind === "group").length, withAccess.some((principal) => principal.kind === "everyone")),
 		onBack: granting ? toList : void 0,
 		backLabel: t.back,
 		footer: granting ? grantView.footer : void 0,
@@ -349,18 +369,21 @@ function AccessDrawer({ open, onClose, resourceName, roles, groups, grants, perm
 	});
 }
 var messageOf = (error) => error instanceof Error && error.message ? error.message : void 0;
-var anchorOf = (failure, arrangement) => arrangement === "role" ? failure.roleId ?? "" : failure.groupId;
-/** The first of several elements that is laid out, such as the one of two buttons a width shows. */
-/** The one of `elements` that is laid out, or the first where nothing is (as in tests). */
+var anchorOf = (failure, arrangement) => arrangement === "role" ? failure.roleId ?? "" : failure.principalId;
+/** The one of `elements` that is laid out, such as the one of two buttons a width shows, or the
+*  first where nothing is (as in tests). */
 function visible(elements) {
 	const all = [...elements ?? []];
 	return all.find((element) => element.getClientRects().length > 0) ?? all[0];
 }
-var groupNames = (group, t) => group.kind === "everyone" ? [
-	group.name,
-	t.everyone,
-	t.everyoneInOrganization
-] : [group.name];
+/** What a principal can be found by. */
+var principalTexts = (model, principal, t) => [
+	principalLabel(principal, t),
+	principal.name,
+	principal.detail,
+	...principal.kind === "everyone" ? [t.everyone] : [],
+	...model.owner?.id === principal.id ? [t.owner] : []
+];
 /** The sections in view and the rows under each. A section named by the query shows all its
 *  rows; otherwise only the rows the query names, and no section when none are. */
 function useFiltered(model, arrangement, query, match, t) {
@@ -375,27 +398,29 @@ function useFiltered(model, arrangement, query, match, t) {
 function filterAccess(model, arrangement, query, match, t) {
 	const shown = /* @__PURE__ */ new Map();
 	const order = [];
-	if (arrangement === "role") for (const role of model.roles) {
-		const holders = model.holders.get(role.id) ?? [];
-		const rows = !query || match(query, role.name, role.description) ? holders : holders.filter((group) => match(query, ...groupNames(group, t)));
-		if (!query || rows.length > 0) {
-			order.push(role.id);
-			shown.set(role.id, rows.map((group) => group.id));
+	const found = (principal) => match(query, ...principalTexts(model, principal, t));
+	if (arrangement === "role") {
+		const owner = model.owner;
+		if (owner && (!query || match(query, t.owner) || found(owner))) {
+			order.push(OWNER_SECTION);
+			shown.set(OWNER_SECTION, [owner.id]);
 		}
-	}
-	else {
-		const everyone = model.everyone;
-		const holders = [...model.held.keys()].sort((a, b) => a === everyone?.id ? -1 : b === everyone?.id ? 1 : 0);
-		for (const groupId of holders) {
-			const group = model.groupById.get(groupId);
-			const held = model.held.get(groupId) ?? [];
-			if (!group) continue;
-			const rows = !query || match(query, ...groupNames(group, t)) ? held : held.filter((role) => match(query, role.name, role.description));
+		for (const role of model.roles) {
+			const holders = [...new Map([...model.holders.get(role.id) ?? [], ...(model.inheritedHolders.get(role.id) ?? []).map((holder) => holder.principal)].map((principal) => [principal.id, principal])).values()];
+			if (role.grantable === false && holders.length === 0) continue;
+			const rows = !query || match(query, role.name, role.description) ? holders : holders.filter(found);
 			if (!query || rows.length > 0) {
-				order.push(groupId);
-				shown.set(groupId, rows.map((role) => role.id));
+				order.push(role.id);
+				shown.set(role.id, rows.map((principal) => principal.id));
 			}
 		}
+	} else for (const principal of principalsWithAccess(model)) {
+		const roles = [.../* @__PURE__ */ new Set([...model.held.get(principal.id) ?? [], ...(model.inherited.get(principal.id) ?? []).map((holding) => holding.role)])];
+		const rows = !query || found(principal) ? roles : roles.filter((role) => match(query, role.name, role.description));
+		if (!query || rows.length > 0 || model.owner?.id === principal.id && found(principal)) {
+			order.push(principal.id);
+			shown.set(principal.id, rows.map((role) => role.id));
+		}
 	}
 	return {
 		shown,
@@ -406,7 +431,7 @@ function filterAccess(model, arrangement, query, match, t) {
 function expandedFor(model, query, match, t) {
 	if (!query) return {
 		role: /* @__PURE__ */ new Set(),
-		group: /* @__PURE__ */ new Set()
+		principal: /* @__PURE__ */ new Set()
 	};
 	const open = (arrangement) => {
 		const { shown } = filterAccess(model, arrangement, query, match, t);
@@ -414,7 +439,7 @@ function expandedFor(model, query, match, t) {
 	};
 	return {
 		role: open("role"),
-		group: open("group")
+		principal: open("principal")
 	};
 }
 function RowsSkeleton() {

package/dist/access/AccessList.d.ts

@@ -1,11 +1,14 @@
 import { type ReactNode } from 'react';
 import { type AccessModel } from './model.js';
 import type { AccessStrings } from './strings.js';
-/** A removal waiting on the reader: one role, or every role the group holds. */
+import type { AccessPrincipal } from './types.js';
+/** The id the owner's section has among the roles' sections. */
+export declare const OWNER_SECTION = "__owner";
+/** A removal waiting on the reader: one role, or every role a principal holds here. */
 export interface PendingRemoval {
-    groupId: string;
+    principalId: string;
     roleIds: string[];
-    /** Every role the group holds, from its "Remove all access". */
+    /** Every role it holds, from its "Remove all access". */
     all: boolean;
 }
 export interface ListActions {
@@ -16,18 +19,16 @@ export interface ListActions {
     onAskRemove: (removal: PendingRemoval) => void;
     onCancelRemove: () => void;
     onRemove: (removal: PendingRemoval) => void;
-    onGrantMore: (groupId: string) => void;
-    /** The failed save's callout, and where it belongs: under the role or group it was about. */
+    onGrantMore: (principalId: string) => void;
+    /** The failed save's callout, and where it belongs: under the role or principal it was about. */
     failure: {
         node: ReactNode;
         roleId?: string | undefined;
-        groupId: string;
+        principalId: string;
     } | undefined;
 }
-export declare function HighImpact({ t }: {
-    t: AccessStrings;
-}): import("react").JSX.Element;
-/** Asks before a group loses roles, saying exactly what it loses and what it keeps. */
+export declare const principalLabel: (principal: AccessPrincipal, t: AccessStrings) => string;
+/** Asks before a principal loses roles, saying exactly what it loses and what it keeps. */
 export declare function RemoveConfirm({ model, removal, saving, onCancel, onConfirm, t, }: {
     model: AccessModel;
     removal: PendingRemoval;
@@ -40,9 +41,9 @@ export declare function RemoveConfirm({ model, removal, saving, onCancel, onConf
 export declare const removeKey: (removal: PendingRemoval) => string;
 interface ViewProps {
     model: AccessModel;
-    /** What the filter left: each role's groups, or each group's roles. */
+    /** What the filter left: each role's principals, or each principal's roles. */
     shown: ReadonlyMap<string, readonly string[]>;
-    /** The rows in view, in order. */
+    /** The sections in view, in order. */
     order: readonly string[];
     expanded: ReadonlySet<string>;
     onExpandedChange: (id: string, open: boolean) => void;
@@ -51,8 +52,8 @@ interface ViewProps {
     t: AccessStrings;
     sectionId: (id: string) => string;
 }
-/** Who has each role, role by role. */
-export declare function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, actions, t, sectionId, }: ViewProps): (import("react").JSX.Element | null)[];
-/** Which roles each group has, group by group. */
-export declare function ByGroup({ model, shown, order, expanded, onExpandedChange, actions, t, sectionId, }: ViewProps): (import("react").JSX.Element | null)[];
+/** Who has each role, role by role, after the owner. */
+export declare function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, actions, t, sectionId, }: ViewProps): (import("react").JSX.Element | null | undefined)[];
+/** Which roles each person and group has, one by one. */
+export declare function ByPrincipal({ model, shown, order, expanded, onExpandedChange, actions, t, sectionId, }: ViewProps): (import("react").JSX.Element | null)[];
 export {};