@parallelworks/ui 0.53.0 → 0.54.0

package/dist/access/AccessList.js

@@ -0,0 +1,382 @@
+import { cx } from "../cx.js";
+import { AddIcon, ChevronRightIcon, 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 { 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
+	});
+}
+/** A role or group 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,
+		onOpenChange,
+		disabled,
+		className: "border-b border-(--theme-border)",
+		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)"),
+				children: [
+					/* @__PURE__ */ jsx(ChevronRightIcon, {
+						"aria-hidden": "true",
+						className: cx("size-4 shrink-0 text-(--theme-muted-text-color) transition-transform group-data-panel-open/section:rotate-90 motion-reduce:transition-none", disabled && "invisible")
+					}),
+					lead,
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [
+							/* @__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",
+									children: title
+								})
+							}),
+							description && /* @__PURE__ */ jsx("span", {
+								className: "hidden text-sm 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",
+								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",
+						children: aside
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Collapsible.Panel, {
+				className: collapsePanelClassName,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pb-3",
+					children
+				})
+			}),
+			notice && /* @__PURE__ */ jsx("div", {
+				className: "px-4 pb-3",
+				children: notice
+			})
+		]
+	});
+}
+/** A line under a section: a group under a role, or a role under a group. */
+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",
+		children: [
+			lead,
+			/* @__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",
+					children: title
+				}), meta && /* @__PURE__ */ jsx("div", {
+					className: "text-sm text-(--theme-muted-text-color)",
+					children: meta
+				})]
+			}),
+			action
+		]
+	});
+}
+function RemoveButton({ label, saving, removal, onAsk }) {
+	return saving ? /* @__PURE__ */ jsx("span", {
+		className: "flex size-7 items-center justify-center",
+		children: /* @__PURE__ */ jsx(Loader, {
+			inline: true,
+			size: "1em",
+			label
+		})
+	}) : /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+		label,
+		"data-remove": removeKey(removal),
+		onClick: () => onAsk(removal)
+	});
+}
+/** Asks before a group 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 roleNames = removal.roleIds.map((id) => model.roleById.get(id)?.name ?? id);
+	const impact = removalOf(model, removal.groupId, removal.roleIds);
+	const own = impact.keep.map((role) => role.name);
+	const throughEveryone = impact.keepThroughEveryone.map((role) => role.name);
+	return /* @__PURE__ */ jsx("fieldset", {
+		"aria-labelledby": titleId,
+		className: "m-0 min-w-0 border-0 px-4 py-2",
+		onKeyDown: (e) => {
+			if (e.key === "Escape" && !e.defaultPrevented) {
+				e.stopPropagation();
+				onCancel();
+			}
+		},
+		children: /* @__PURE__ */ jsxs(Callout, {
+			tone: "error",
+			icon: false,
+			children: [
+				/* @__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)
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-1 text-(--theme-app)",
+					children: 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)
+						}),
+						/* @__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", {
+							className: "m-0 text-(--theme-muted-text-color)",
+							children: t.keeps(own, throughEveryone)
+						})
+					] }) : /* @__PURE__ */ jsx("p", {
+						className: "m-0 text-(--theme-muted-text-color)",
+						children: t.losesNothing(own, throughEveryone)
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex justify-end gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						ref: cancel,
+						variant: "ghost",
+						onClick: onCancel,
+						disabled: saving,
+						children: t.common.cancel
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						loading: saving,
+						onClick: onConfirm,
+						children: removal.all ? t.removeAllAccess : t.confirmRemove(roleNames)
+					})]
+				})
+			]
+		})
+	});
+}
+/** 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. */
+function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, actions, t, sectionId }) {
+	return order.map((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 everyoneTag = everyone && /* @__PURE__ */ jsxs(StatusBadge, {
+			variant: "info",
+			size: "md",
+			children: [/* @__PURE__ */ jsx(OrganizationIcon, {
+				"aria-hidden": "true",
+				className: "size-3"
+			}), t.everyone]
+		});
+		const failure = actions.failure?.roleId === roleId ? actions.failure.node : void 0;
+		return /* @__PURE__ */ jsx(Section, {
+			id: sectionId(roleId),
+			open: expanded.has(roleId),
+			onOpenChange: (open) => onExpandedChange(roleId, open),
+			disabled: holders.length === 0,
+			notice: failure,
+			title: /* @__PURE__ */ jsxs(Fragment, { children: [role.name, role.highImpact && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(HighImpact, { t })] })] }),
+			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, {
+					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);
+				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(" · "),
+					action: !actions.readOnly && /* @__PURE__ */ jsx(RemoveButton, {
+						label,
+						saving: actions.saving.has(key({
+							groupId,
+							roleId
+						})),
+						removal: {
+							groupId,
+							roleIds: [roleId],
+							all: false
+						},
+						onAsk: actions.onAskRemove
+					})
+				}, groupId);
+			})
+		}, 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));
+		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))
+			})]
+		})] });
+		return /* @__PURE__ */ jsx(Section, {
+			id: sectionId(groupId),
+			open: expanded.has(groupId),
+			onOpenChange: (open) => onExpandedChange(groupId, open),
+			lead: /* @__PURE__ */ jsx(GroupTile, {
+				everyone,
+				className: "hidden @min-[30rem]/access:flex"
+			}),
+			notice: failure,
+			title: groupLabel(group, t),
+			description: everyone ? t.everyoneJoinLater : sizeOf(group, 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, {
+				model,
+				removal: actions.removal,
+				saving: actions.saving.size > 0,
+				onCancel: actions.onCancelRemove,
+				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, {
+					model,
+					removal: actions.removal,
+					saving: actions.saving.size > 0,
+					onCancel: actions.onCancelRemove,
+					onConfirm: () => actions.removal && actions.onRemove(actions.removal),
+					t
+				}, role.id) : /* @__PURE__ */ jsx(RoleRow, {
+					model,
+					group,
+					role,
+					actions,
+					t
+				}, role.id)),
+				inherited.map((role) => /* @__PURE__ */ jsx(Row, {
+					muted: true,
+					title: role.name,
+					meta: t.throughEveryone
+				}, role.id)),
+				!actions.readOnly && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2 ps-11 pe-4 pt-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						icon: /* @__PURE__ */ jsx(AddIcon, {}),
+						onClick: () => actions.onGrantMore(groupId),
+						children: t.grantMoreRoles
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						"data-remove": removeKey({
+							groupId,
+							roleIds: [],
+							all: true
+						}),
+						className: "text-(--theme-error-text)",
+						onClick: () => actions.onAskRemove({
+							groupId,
+							roleIds: held.map((role) => role.id),
+							all: true
+						}),
+						children: t.removeAllAccess
+					})]
+				})
+			] })
+		}, groupId);
+	});
+}
+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;
+	return /* @__PURE__ */ jsx(Row, {
+		title: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__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),
+			saving: actions.saving.has(key({
+				groupId: group.id,
+				roleId: role.id
+			})),
+			removal: {
+				groupId: group.id,
+				roleIds: [role.id],
+				all: false
+			},
+			onAsk: actions.onAskRemove
+		})
+	});
+}
+//#endregion
+export { ByGroup, ByRole, HighImpact, RemoveConfirm, removeKey };

package/dist/access/GrantView.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type DescribeGroup, type DetailsCache, type SearchGroups } from './GroupPicker.js';
+import { type AccessModel } from './model.js';
+import type { AccessStrings } from './strings.js';
+import type { AccessChange, AccessGroup } from './types.js';
+export interface GrantSelection {
+    groupIds: 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, }: {
+    model: AccessModel;
+    selection: GrantSelection;
+    onSelectionChange: (next: GrantSelection) => void;
+    resourceName: string;
+    describeGroup?: DescribeGroup | undefined;
+    searchGroups?: SearchGroups | undefined;
+    groupCount?: number | undefined;
+    recentGroupIds?: readonly string[] | undefined;
+    cache: DetailsCache;
+    seen: Map<string, AccessGroup>;
+    saving: boolean;
+    /** The failed grant's callout, which stays in the form so the choices can be retried. */
+    failure: ReactNode;
+    onGrant: (change: AccessChange) => void;
+    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. */
+    boundary: Element | null;
+    t: AccessStrings;
+}): {
+    body: ReactNode;
+    footer: ReactNode;
+};

package/dist/access/GrantView.js

@@ -0,0 +1,188 @@
+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 { 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 }) {
+	const uid = useId();
+	const [confirming, setConfirming] = useState(false);
+	const keepButton = useRef(null);
+	const grantId = `${uid}grant`;
+	const { groupIds, 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 plan = grantPlan(model, groupIds, roleIds);
+	const everyone = model.everyone;
+	const toEveryone = everyone !== void 0 && groupIds.includes(everyone.id);
+	const people = everyone?.memberCount;
+	const roleItems = model.roles.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 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 hints = [
+			holders.length > 0 && t.alreadyHave(holders.map(groupName)),
+			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
+		};
+	});
+	const getting = [...new Set(plan.grant.map((grant) => grant.groupId))].map(groupName);
+	const status = groupIds.length === 0 && roleIds.length === 0 ? {
+		text: t.pickGroupsAndRoles,
+		ready: false
+	} : groupIds.length === 0 ? {
+		text: t.pickGroups,
+		ready: false
+	} : roleIds.length === 0 ? {
+		text: t.pickRoles,
+		ready: false
+	} : plan.grant.length === 0 ? {
+		text: t.nothingToGrant(groupIds.map(groupName), roleNames),
+		ready: false
+	} : {
+		text: t.grantSummary(getting, [...new Set(plan.grant.map((grant) => grant.roleId))].map((id) => model.roleById.get(id)?.name ?? id)),
+		ready: true
+	};
+	const grant = () => {
+		setConfirming(false);
+		onGrant({
+			grant: plan.grant,
+			revoke: []
+		});
+	};
+	const statusId = `${uid}status`;
+	const body = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-5 p-4",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: `${uid}groups`,
+				className: "mb-1.5 block text-sm font-medium",
+				children: t.groupsLabel
+			}), /* @__PURE__ */ jsx(GroupPicker, {
+				id: `${uid}groups`,
+				describedBy: `${uid}groupsHint`,
+				model,
+				value: groupIds,
+				onValueChange: (next) => onSelectionChange({
+					groupIds: next,
+					roleIds
+				}),
+				granting: roles,
+				resourceName,
+				describeGroup,
+				searchGroups,
+				groupCount,
+				recentGroupIds,
+				cache,
+				seen,
+				boundary,
+				t
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("label", {
+				htmlFor: `${uid}roles`,
+				className: "mb-1.5 block text-sm font-medium",
+				children: t.rolesLabel
+			}), /* @__PURE__ */ jsx(Combobox, {
+				multiple: true,
+				id: `${uid}roles`,
+				items: roleItems,
+				value: roleIds,
+				onValueChange: (next) => onSelectionChange({
+					groupIds,
+					roleIds: next
+				}),
+				placeholder: t.searchRoles
+			})] }),
+			toEveryone && roles.length > 0 && /* @__PURE__ */ jsx(Callout, {
+				tone: "warning",
+				title: t.everyoneWarningTitle(roleNames, people),
+				children: t.everyoneWarning(resourceName)
+			}),
+			failure
+		]
+	});
+	const stopConfirming = () => {
+		setConfirming(false);
+		focusLater(() => document.getElementById(grantId));
+	};
+	return {
+		body,
+		footer: confirming ? /* @__PURE__ */ jsxs("fieldset", {
+			"aria-labelledby": statusId,
+			className: "m-0 flex w-full min-w-0 flex-wrap items-center gap-x-4 gap-y-2 border-0 p-0",
+			onKeyDown: (e) => {
+				if (e.key === "Escape") {
+					e.stopPropagation();
+					stopConfirming();
+				}
+			},
+			children: [/* @__PURE__ */ jsx("p", {
+				id: statusId,
+				className: "m-0 min-w-0 flex-1 basis-48 text-sm font-medium",
+				children: t.confirmEveryoneTitle(roleNames, people)
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "ms-auto flex shrink-0 gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					ref: keepButton,
+					variant: "secondary",
+					onClick: stopConfirming,
+					disabled: saving,
+					children: t.common.cancel
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: roles.some((role) => role.highImpact) ? "danger" : "primary",
+					loading: saving,
+					onClick: grant,
+					children: t.grantToEveryone
+				})]
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-wrap items-center gap-x-4 gap-y-2",
+			children: [/* @__PURE__ */ jsx("p", {
+				id: statusId,
+				className: "m-0 min-w-0 flex-1 basis-48 text-sm text-(--theme-muted-text-color)",
+				children: status.text
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "ms-auto flex shrink-0 gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: onCancel,
+					children: t.common.cancel
+				}), /* @__PURE__ */ jsx(Button, {
+					id: grantId,
+					variant: "primary",
+					focusableWhenDisabled: true,
+					disabled: !status.ready,
+					"aria-describedby": statusId,
+					loading: saving,
+					onClick: () => {
+						if (toEveryone) {
+							setConfirming(true);
+							focusLater(() => keepButton.current);
+						} else grant();
+					},
+					children: toEveryone ? t.grantToEveryone : t.grant(roleNames)
+				})]
+			})]
+		})
+	};
+}
+//#endregion
+export { useGrantView };

package/dist/access/GroupPicker.d.ts

@@ -0,0 +1,35 @@
+import { type AccessModel } from './model.js';
+import type { AccessStrings } from './strings.js';
+import type { AccessGroup, AccessGroupDetails, AccessRole } from './types.js';
+export type DescribeGroup = (groupId: string, signal: AbortSignal) => Promise<AccessGroupDetails>;
+export type SearchGroups = (query: string, signal: AbortSignal) => Promise<readonly AccessGroup[]>;
+/** Details already loaded, kept for as long as the drawer is open. */
+export type DetailsCache = Map<string, AccessGroupDetails>;
+export declare function GroupTile({ everyone, className }: {
+    everyone: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+interface GroupPickerProps {
+    model: AccessModel;
+    value: readonly string[];
+    onValueChange: (ids: string[]) => void;
+    /** The roles being granted, which the details weigh against what the group holds. */
+    granting: readonly AccessRole[];
+    resourceName: string;
+    describeGroup?: DescribeGroup | undefined;
+    searchGroups?: SearchGroups | undefined;
+    groupCount?: number | undefined;
+    recentGroupIds?: readonly string[] | undefined;
+    cache: DetailsCache;
+    /** Every group the picker has seen, by id, so a chosen one found by a search keeps its name. */
+    seen: Map<string, AccessGroup>;
+    id: string;
+    describedBy: string;
+    /** The drawer's body, above its footer, which the open list fills. */
+    boundary: Element | null;
+    t: AccessStrings;
+}
+/** 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. */
+export declare function GroupPicker({ model, value, onValueChange, granting, resourceName, describeGroup, searchGroups, groupCount, recentGroupIds, cache, seen, id, describedBy, boundary, t, }: GroupPickerProps): import("react").JSX.Element;
+export {};