@parallelworks/ui 0.77.0 → 0.79.0

package/dist/access/AccessList.d.ts

@@ -1,7 +1,8 @@
 import { type ReactNode } from 'react';
+import type { OpenMenu } from '../components/ContextMenu.js';
 import { type AccessModel } from './model.js';
 import type { AccessStrings } from './strings.js';
-import type { AccessPrincipal } from './types.js';
+import type { AccessPrincipal, AccessRule } 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. */
@@ -20,6 +21,12 @@ export interface ListActions {
     onCancelRemove: () => void;
     onRemove: (removal: PendingRemoval) => void;
     onGrantMore: (principalId: string) => void;
+    /** Gives a principal this one role in place of the ones it holds, where each holds one. */
+    onChangeRole: (principalId: string, roleId: string) => void;
+    /** Each principal holds one role here. */
+    singleRole: boolean;
+    /** Opens a row's own menu on a right-click. */
+    openMenu: OpenMenu;
     /** The failed save's callout, and where it belongs: under the role or principal it was about. */
     failure: {
         node: ReactNode;
@@ -56,4 +63,15 @@ interface ViewProps {
 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)[];
+/** A reason someone has access that no grant here changes, locked ahead of the grants. */
+export declare function RuleRow({ rule, roleName, lead, t, }: {
+    rule: AccessRule;
+    roleName: string | undefined;
+    /** Lines its title up with the rows below: in a chevron's column, in a tile's, or after both. */
+    lead: 'chevron' | 'tile' | 'both';
+    t: AccessStrings;
+}): import("react").JSX.Element;
+/** Person and group one by one where each holds one role: a flat row each, its role picked
+ *  from a list on the row. */
+export declare function ByPrincipalSingle({ model, order, actions, t, sectionId }: ViewProps): (import("react").JSX.Element | null)[];
 export {};

package/dist/access/AccessList.js

@@ -1,15 +1,18 @@
 import { cx } from "../cx.js";
-import { AddIcon, ChevronRightIcon, LockIcon, OrganizationIcon, TrashIcon } from "../icons.js";
+import { AddIcon, ChevronRightIcon, KeyIcon, LockIcon, OrganizationIcon, TrashIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
+import { menuDivider } from "../components/MenuEntries.js";
+import { Avatar } from "../components/Avatar.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 { Select } from "../components/Select.js";
 import { StatusBadge } from "../components/StatusBadge.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/access/AccessList.tsx
 /** The id the owner's section has among the roles' sections. */
@@ -20,6 +23,21 @@ var aboutOf = (principal, t) => principal.kind === "user" ? principal.detail : p
 /** 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. */
+/** A role named where a row's role select would sit, so read-only rows line up with
+*  editable ones: the select's width, border and padding, without the box. */
+function RoleText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "w-36 shrink-0 wrap-anywhere border border-transparent px-2 text-xs text-(--theme-muted-text-color)",
+		children
+	});
+}
+/** Holds the remove button's place on a row that has none. */
+function NoAction() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "size-7 shrink-0"
+	});
+}
 function Locked() {
 	return /* @__PURE__ */ jsx("span", {
 		className: "flex size-7 items-center justify-center text-(--theme-muted-text-color)",
@@ -30,12 +48,13 @@ function Locked() {
 	});
 }
 /** A role or principal whose rows fold under it. */
-function Section({ id, open, onOpenChange, disabled, lead, title, description, aside, narrowAside, notice, children }) {
+function Section({ id, open, onOpenChange, disabled, lead, title, description, aside, narrowAside, notice, onContextMenu, children }) {
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
 		open: open && !disabled,
 		onOpenChange,
 		disabled,
 		className: "border-b border-(--theme-border)",
+		onContextMenu,
 		children: [
 			/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 				id,
@@ -87,9 +106,10 @@ function Section({ id, open, onOpenChange, disabled, lead, title, description, a
 	});
 }
 /** A line under a section: a principal under a role, or a role under a principal. */
-function Row({ lead, title, meta, action, muted }) {
+function Row({ lead, title, meta, action, muted, onContextMenu }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-3 py-1.5 ps-11 pe-4 @min-[30rem]/access:ps-11",
+		onContextMenu,
 		children: [
 			lead,
 			/* @__PURE__ */ jsxs("div", {
@@ -173,7 +193,7 @@ function RemoveConfirm({ model, removal, saving, onCancel, onConfirm, t }) {
 					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: [
+					}) : impact.lost.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 						/* @__PURE__ */ jsx("p", {
 							className: "m-0 text-(--theme-muted-text-color)",
 							children: t.losesIntro(principal.kind, principal.memberCount)
@@ -277,7 +297,7 @@ function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, ac
 			notice: failure,
 			title: role.name,
 			description: role.description,
-			aside: /* @__PURE__ */ jsxs(Fragment, { children: [everyoneTag, count] }),
+			aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [everyoneTag, count] }),
 			narrowAside: everyoneTag && !count ? /* @__PURE__ */ jsx("span", {
 				className: "mt-1 inline-flex",
 				children: everyoneTag
@@ -310,6 +330,11 @@ function ByRole({ model, shown, order, expanded, onExpandedChange, filtering, ac
 				const hint = overlapHint(overlapOf(model, principalId, role), t);
 				const label = t.removeRole(principalLabel(principal, t), role.name);
 				return /* @__PURE__ */ jsx(Row, {
+					onContextMenu: rowMenu(actions, () => rowEntries(model, principal, actions, t, {
+						principalId,
+						roleIds: [roleId],
+						all: false
+					})),
 					lead,
 					title: principalLabel(principal, t),
 					meta: [aboutOf(principal, t), hint].filter(Boolean).join(" · "),
@@ -349,7 +374,7 @@ function ByPrincipal({ model, shown, order, expanded, onExpandedChange, actions,
 		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: [
+		const roleBadges = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			owner && /* @__PURE__ */ jsx(StatusBadge, {
 				size: "md",
 				variant: "info",
@@ -378,6 +403,11 @@ function ByPrincipal({ model, shown, order, expanded, onExpandedChange, actions,
 				principal,
 				className: "hidden @min-[30rem]/access:flex"
 			}),
+			onContextMenu: held.length > 0 ? rowMenu(actions, () => rowEntries(model, principal, actions, t, {
+				principalId,
+				roleIds: held.map((role) => role.id),
+				all: true
+			})) : void 0,
 			notice: failure,
 			title: principalLabel(principal, t),
 			description: everyone ? t.everyoneJoinLater : aboutOf(principal, t),
@@ -393,7 +423,7 @@ function ByPrincipal({ model, shown, order, expanded, onExpandedChange, actions,
 				onCancel: actions.onCancelRemove,
 				onConfirm: () => actions.removal && actions.onRemove(actions.removal),
 				t
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				owner && /* @__PURE__ */ jsx(Row, {
 					title: /* @__PURE__ */ jsx("span", {
 						className: "font-medium",
@@ -482,5 +512,186 @@ function RoleRow({ model, principal, role, actions, t }) {
 		})
 	});
 }
+/** A row's right-click menu, which repeats what its buttons do; none while read-only. */
+function rowMenu(actions, entries) {
+	if (actions.readOnly) return;
+	return (e) => {
+		e.stopPropagation();
+		actions.openMenu(e, entries());
+	};
+}
+/** A principal's row menu: its role, where each holds one, more roles otherwise, then removal. */
+function rowEntries(model, principal, actions, t, removal) {
+	const held = new Set((model.held.get(principal.id) ?? []).map((role) => role.id));
+	const lead = actions.singleRole ? [{
+		label: t.roleMenu,
+		icon: /* @__PURE__ */ jsx(KeyIcon, {}),
+		items: model.grantable.map((role) => ({
+			label: role.name,
+			description: role.description,
+			checked: held.has(role.id),
+			onClick: () => {
+				if (!held.has(role.id) || held.size > 1) actions.onChangeRole(principal.id, role.id);
+			}
+		}))
+	}] : isOwner(model, principal.id) ? [] : [{
+		label: t.grantMoreRoles,
+		icon: /* @__PURE__ */ jsx(AddIcon, {}),
+		onClick: () => actions.onGrantMore(principal.id)
+	}];
+	return [
+		...lead,
+		...lead.length > 0 ? [menuDivider] : [],
+		{
+			label: removal.all || actions.singleRole ? t.removeAccess : t.confirmRemove(removal.roleIds.map((id) => model.roleById.get(id)?.name ?? id)),
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+			destructive: true,
+			onClick: () => actions.onAskRemove(removal)
+		}
+	];
+}
+/** A reason someone has access that no grant here changes, locked ahead of the grants. */
+function RuleRow({ rule, roleName, lead, t }) {
+	const people = rule.people ?? [];
+	const shown = people.slice(0, 4);
+	const more = people.length - shown.length;
+	const icon = rule.icon ?? /* @__PURE__ */ jsx(LockIcon, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3 border-b border-(--theme-border) px-4 py-2.5",
+		children: [
+			lead === "chevron" ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "flex size-4 shrink-0 items-center justify-center text-(--theme-muted-text-color) [&_svg]:size-4",
+				children: icon
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [lead === "both" && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "size-4 shrink-0"
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "hidden size-8 shrink-0 items-center justify-center rounded-md bg-(--theme-muted-panel-bg) text-(--theme-muted-text-color) @min-[30rem]/access:flex [&_svg]:size-4",
+				children: icon
+			})] }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium wrap-anywhere",
+					children: rule.title
+				}), rule.detail && /* @__PURE__ */ jsx("span", {
+					className: "text-xs wrap-anywhere text-(--theme-muted-text-color)",
+					children: rule.detail
+				})]
+			}),
+			shown.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t.ruleMembers(shown.map((person) => person.name), more)
+			}), /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "hidden shrink-0 items-center gap-1 @min-[30rem]/access:flex",
+				children: [shown.map((person, index) => /* @__PURE__ */ jsx(Avatar, {
+					name: person.name,
+					src: person.avatarUrl,
+					size: "md",
+					decorative: true
+				}, `${person.name}-${index.toString()}`)), more > 0 && /* @__PURE__ */ jsx("span", {
+					className: "inline-flex size-7 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) text-[11px] font-medium tabular-nums text-(--theme-muted-text-color)",
+					children: t.moreMembers(more)
+				})]
+			})] }),
+			roleName && (lead === "tile" ? /* @__PURE__ */ jsx(RoleText, { children: roleName }) : /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 text-xs text-(--theme-muted-text-color)",
+				children: roleName
+			})),
+			/* @__PURE__ */ jsx(Locked, {})
+		]
+	});
+}
+/** Person and group one by one where each holds one role: a flat row each, its role picked
+*  from a list on the row. */
+function ByPrincipalSingle({ model, order, 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 inheritedRoles = (model.inherited.get(principalId) ?? []).map((holding) => holding.role);
+		const role = held[0];
+		const name = principalLabel(principal, t);
+		const failure = actions.failure?.principalId === principalId ? actions.failure.node : void 0;
+		const removal = {
+			principalId,
+			roleIds: held.map((r) => r.id),
+			all: held.length > 1
+		};
+		if (actions.removal?.principalId === principalId) return /* @__PURE__ */ jsx("div", {
+			className: "border-b border-(--theme-border)",
+			children: /* @__PURE__ */ jsx(RemoveConfirm, {
+				model,
+				removal: actions.removal,
+				saving: actions.saving.size > 0,
+				onCancel: actions.onCancelRemove,
+				onConfirm: () => actions.removal && actions.onRemove(actions.removal),
+				t
+			})
+		}, principalId);
+		const saving = held.some((r) => actions.saving.has(key({
+			principalId,
+			roleId: r.id
+		})));
+		const options = [...model.grantable, ...role && !model.grantable.includes(role) ? [role] : []].map((r) => ({
+			value: r.id,
+			label: r.name
+		}));
+		const control = owner ? /* @__PURE__ */ jsx(StatusBadge, {
+			size: "md",
+			variant: "info",
+			children: t.owner
+		}) : !role ? /* @__PURE__ */ jsx(RoleText, { children: inheritedRoles.map((r) => r.name).join(", ") }) : actions.readOnly ? /* @__PURE__ */ jsx(RoleText, { children: role.name }) : /* @__PURE__ */ jsx(Select, {
+			size: "sm",
+			"aria-label": t.roleFor(name),
+			items: options,
+			value: role.id,
+			disabled: saving,
+			onValueChange: (next) => {
+				if (next !== null && (next !== role.id || held.length > 1)) actions.onChangeRole(principalId, next);
+			},
+			className: "w-36 shrink-0"
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			id: sectionId(principalId),
+			tabIndex: -1,
+			className: "border-b border-(--theme-border) outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus)",
+			onContextMenu: role && !owner ? rowMenu(actions, () => rowEntries(model, principal, actions, t, removal)) : void 0,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 px-4 py-2.5",
+				children: [
+					/* @__PURE__ */ jsx(PrincipalTile, {
+						principal,
+						className: "hidden @min-[30rem]/access:flex"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium wrap-anywhere",
+							children: name
+						}), aboutOf(principal, t) && /* @__PURE__ */ jsx("span", {
+							className: "text-xs wrap-anywhere text-(--theme-muted-text-color)",
+							children: aboutOf(principal, t)
+						})]
+					}),
+					control,
+					owner || !role ? /* @__PURE__ */ jsx(Locked, {}) : actions.readOnly ? /* @__PURE__ */ jsx(NoAction, {}) : /* @__PURE__ */ jsx(RemoveButton, {
+						label: t.removeRole(name, role.name),
+						saving,
+						removal,
+						onAsk: actions.onAskRemove
+					})
+				]
+			}), failure && /* @__PURE__ */ jsx("div", {
+				className: "px-4 pb-3",
+				children: failure
+			})]
+		}, principalId);
+	});
+}
 //#endregion
-export { ByPrincipal, ByRole, OWNER_SECTION, RemoveConfirm, principalLabel, removeKey };
+export { ByPrincipal, ByPrincipalSingle, ByRole, OWNER_SECTION, RemoveConfirm, RuleRow, principalLabel, removeKey };

package/dist/access/GrantView.d.ts

@@ -8,7 +8,7 @@ export interface GrantSelection {
     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, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, 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, singleRole, t, }: {
     model: AccessModel;
     selection: GrantSelection;
     onSelectionChange: (next: GrantSelection) => void;
@@ -29,6 +29,8 @@ export declare function useGrantView({ model, selection, onSelectionChange, reso
     focusLater: (find: () => HTMLElement | null | undefined) => void;
     /** The drawer's body, above its footer, which the open list fills. */
     boundary: Element | null;
+    /** One role each: the form picks one, and granting it takes the role each already holds. */
+    singleRole?: boolean;
     t: AccessStrings;
 }): {
     body: ReactNode;

package/dist/access/GrantView.js

@@ -4,11 +4,11 @@ import { Combobox } from "../components/Combobox.js";
 import { StatusBadge } from "../components/StatusBadge.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";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#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, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, 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, singleRole = false, t }) {
 	const uid = useId();
 	const [confirming, setConfirming] = useState(false);
 	const keepButton = useRef(null);
@@ -61,9 +61,13 @@ function useGrantView({ model, selection, onSelectionChange, resourceName, descr
 	};
 	const grant = () => {
 		setConfirming(false);
+		const revoke = singleRole ? [...new Set(plan.grant.map((granted) => granted.principalId))].flatMap((principalId) => (model.held.get(principalId) ?? []).filter((held) => !roleIds.includes(held.id)).map((held) => ({
+			principalId,
+			roleId: held.id
+		}))) : [];
 		onGrant({
 			grant: plan.grant,
-			revoke: []
+			revoke
 		});
 	};
 	const statusId = `${uid}status`;
@@ -98,7 +102,16 @@ function useGrantView({ model, selection, onSelectionChange, resourceName, descr
 				htmlFor: `${uid}roles`,
 				className: "mb-1.5 block text-sm font-medium",
 				children: t.rolesLabel
-			}), /* @__PURE__ */ jsx(Combobox, {
+			}), singleRole ? /* @__PURE__ */ jsx(Combobox, {
+				id: `${uid}roles`,
+				items: roleItems,
+				value: roleIds[0] ?? null,
+				onValueChange: (next) => onSelectionChange({
+					principalIds,
+					roleIds: next === null ? [] : [next]
+				}),
+				placeholder: t.searchRoles
+			}) : /* @__PURE__ */ jsx(Combobox, {
 				multiple: true,
 				id: `${uid}roles`,
 				items: roleItems,

package/dist/access/PrincipalPicker.js

@@ -9,8 +9,8 @@ import { Combobox } from "../components/Combobox.js";
 import { useRelativeTime } from "../components/relativeTime.js";
 import { StatusBadge } from "../components/StatusBadge.js";
 import { covers, isOwner } from "./model.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#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. */
@@ -124,7 +124,7 @@ function PrincipalPicker({ model, value, onValueChange, granting, describeGroup,
 		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, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Combobox, {
 		multiple: true,
 		id,
 		"aria-describedby": describedBy,
@@ -261,7 +261,7 @@ 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(" · ") });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: [details.source === "synced" && t.syncedShort, memberLine(details, 2, t)].filter(Boolean).join(" · ") });
 }
 /** What the highlighted one holds here, and what granting the picked roles would change. */
 function OnResource({ principalId, model, granting, t }) {
@@ -383,7 +383,7 @@ function GroupDetailsPane({ group, state, model, granting, t }) {
 						className: "rounded-full"
 					})
 				]
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				state.failed && /* @__PURE__ */ jsx("p", {
 					className: "m-0 text-xs text-(--theme-error-text)",
 					children: t.detailsFailed
@@ -394,7 +394,7 @@ function GroupDetailsPane({ group, state, model, granting, t }) {
 				}),
 				count !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
 					/* @__PURE__ */ jsx(PaneHeading, { children: everyone ? t.people(count) : t.members(count) }),
-					details && details.members.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Faces, {
+					details && details.members.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Faces, {
 						details,
 						t
 					}), /* @__PURE__ */ jsx("p", {

package/dist/access/focus.js

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef } from "react";
 *  later, which would undo wherever focus is sent next; parked, nothing is lost and it doesn't. */
 function holdFocus() {
 	const active = document.activeElement;
-	const dialog = active instanceof HTMLElement ? active.closest("[role=\"dialog\"]") : null;
+	const dialog = active instanceof HTMLElement ? active.closest("[role=\"dialog\"], [data-access-panel]") : null;
 	if (dialog && dialog !== active) dialog.focus({ preventScroll: true });
 }
 /** Returns a function that sends focus to what `find` returns once the change it goes with

package/dist/access/index.d.ts

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

package/dist/access/index.js

@@ -1,3 +1,3 @@
 import { ACCESS_STRINGS, useAccessStrings } from "./strings.js";
-import { AccessDrawer } from "./AccessDrawer.js";
-export { ACCESS_STRINGS, AccessDrawer, useAccessStrings };
+import { AccessDrawer, AccessPanel } from "./AccessDrawer.js";
+export { ACCESS_STRINGS, AccessDrawer, AccessPanel, useAccessStrings };

package/dist/access/strings.d.ts

@@ -66,7 +66,9 @@ export declare const ACCESS_STRINGS: {
     removeFailed: (principal: string, roles: readonly string[]) => string;
     grantFailed: (principals: readonly string[], roles: readonly string[]) => string;
     undoFailed: string;
-    /** Under a failed save; `reason` is the host's error message, when it gave one. */
+    /** Why a save failed, when the host gives no `errorMessage`. */
+    failedReason: string;
+    /** Under a failed save; `reason` is the host's `errorMessage`, or `failedReason`. */
     nothingChanged: (reason: string | undefined) => string;
     /** The toast after a grant. */
     granted: (principals: readonly string[], roles: readonly string[]) => string;
@@ -74,8 +76,30 @@ export declare const ACCESS_STRINGS: {
     removed: (principals: readonly string[], roles: readonly string[]) => string;
     undone: string;
     readOnly: string;
+    /** A note atop access set somewhere else, when the host gives no reason. */
+    managedElsewhere: string;
+    /** The note's link to where access is set, when the host doesn't name it. */
+    manageAccess: string;
     /** After `readOnly` when the host gives no reason. */
     readOnlyReason: string;
+    /** Names the switch between open to everyone and only those listed. */
+    visibility: string;
+    /** The switch's choice that limits it to the people and groups listed. */
+    restrictedLabel: string;
+    /** The toast after the switch saves; `choice` is the label now chosen. */
+    visibilityChanged: (choice: string) => string;
+    visibilityFailed: (choice: string) => string;
+    /** Names the role picker on a row where each person or group holds one role. */
+    roleFor: (principal: string) => string;
+    /** A row menu's submenu of roles. */
+    roleMenu: string;
+    /** A row menu's action that takes every role the row holds here. */
+    removeAccess: string;
+    /** The toast after a row's one role is swapped for another. */
+    roleChanged: (principal: string, role: string) => string;
+    roleChangeFailed: (principal: string, role: string) => string;
+    /** Read with a rule's faces: the first few by name, and how many more. */
+    ruleMembers: (names: readonly string[], more: number) => string;
     emptyTitle: string;
     emptyDescription: (resource: string) => string;
     noMatches: string;

package/dist/access/strings.js

@@ -1,6 +1,6 @@
 import { useStrings } from "../components/Provider.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/access/strings.tsx
 var plural = new Intl.PluralRules("en");
 var list = new Intl.ListFormat("en", { type: "conjunction" });
@@ -91,7 +91,9 @@ var ACCESS_STRINGS = {
 	removeFailed: (principal, roles) => `Couldn’t remove ${principal} from ${and(roles)}`,
 	grantFailed: (principals, roles) => `Couldn’t grant ${and(roles)} to ${and(principals)}`,
 	undoFailed: "Couldn’t undo the change",
-	/** Under a failed save; `reason` is the host's error message, when it gave one. */
+	/** Why a save failed, when the host gives no `errorMessage`. */
+	failedReason: "Something went wrong.",
+	/** Under a failed save; `reason` is the host's `errorMessage`, or `failedReason`. */
 	nothingChanged: (reason) => reason ? `${reason.replace(/\.?$/, ".")} Nothing changed.` : "Nothing changed.",
 	/** The toast after a grant. */
 	granted: (principals, roles) => `Granted ${and(roles)} to ${and(principals)}`,
@@ -99,8 +101,30 @@ var ACCESS_STRINGS = {
 	removed: (principals, roles) => `Removed ${and(principals)} from ${and(roles)}`,
 	undone: "Change undone",
 	readOnly: "View only.",
+	/** A note atop access set somewhere else, when the host gives no reason. */
+	managedElsewhere: "Access here is set somewhere else, so it can’t be changed here.",
+	/** The note's link to where access is set, when the host doesn't name it. */
+	manageAccess: "Manage access",
 	/** After `readOnly` when the host gives no reason. */
 	readOnlyReason: "Only people who manage access can make changes.",
+	/** Names the switch between open to everyone and only those listed. */
+	visibility: "Who can see it",
+	/** The switch's choice that limits it to the people and groups listed. */
+	restrictedLabel: "Only people with access",
+	/** The toast after the switch saves; `choice` is the label now chosen. */
+	visibilityChanged: (choice) => `Changed to ${choice}`,
+	visibilityFailed: (choice) => `Couldn’t change to ${choice}`,
+	/** Names the role picker on a row where each person or group holds one role. */
+	roleFor: (principal) => `Role for ${principal}`,
+	/** A row menu's submenu of roles. */
+	roleMenu: "Role",
+	/** A row menu's action that takes every role the row holds here. */
+	removeAccess: "Remove access",
+	/** The toast after a row's one role is swapped for another. */
+	roleChanged: (principal, role) => `Changed ${principal} to ${role}`,
+	roleChangeFailed: (principal, role) => `Couldn’t change ${principal} to ${role}`,
+	/** Read with a rule's faces: the first few by name, and how many more. */
+	ruleMembers: (names, more) => more > 0 ? `Includes ${and([...names, `${more.toLocaleString()} more`])}` : `Includes ${and(names)}`,
 	emptyTitle: "No access granted",
 	emptyDescription: (resource) => `Grant a role to a person or group to give them access to ${resource}.`,
 	noMatches: "No matches",
@@ -132,7 +156,7 @@ var ACCESS_STRINGS = {
 	alreadyCovered: (roles) => `Included in ${and(roles)}`,
 	everyoneHasIt: "Already granted to Everyone",
 	/** The footer's account of what pressing Grant does. */
-	grantSummary: (principals, roles) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("strong", {
+	grantSummary: (principals, roles) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("strong", {
 		className: "font-medium text-(--theme-app)",
 		children: and(roles)
 	}), ` for ${and(principals)}`] }),

package/dist/access/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { TimeValue } from '../format.js';
 /** A named set of permissions. People and groups are granted roles, never permissions one by
  *  one. */
@@ -72,3 +73,28 @@ export interface AccessGroupDetails {
     /** When its membership last changed. */
     updatedAt?: TimeValue;
 }
+/** A reason someone has access that no grant here changes, such as "Workspace admins always
+ *  have access". It shows, locked, ahead of the grants. */
+export interface AccessRule {
+    id: string;
+    /** In the leading column, in place of a section's chevron. */
+    icon?: ReactNode;
+    title: string;
+    /** A line under the title, such as who sets it. */
+    detail?: string | undefined;
+    /** A few of the people it covers, shown as overlapping faces: four, then how many more. */
+    people?: readonly AccessMember[] | undefined;
+    /** The role it gives, when it gives everyone it covers the same one. */
+    roleId?: string | undefined;
+}
+/** Whether a resource is open to everyone who can see what it is in, or only to those listed. */
+export interface AccessVisibility {
+    restricted: boolean;
+    /** Saves the switch, as `onChange` saves a grant: until the promise settles the switch shows
+     *  it is saving, and when it rejects the panel says nothing changed and offers to retry. */
+    onChange: (restricted: boolean) => void | Promise<unknown>;
+    /** The open choice, which names what it is open to: "Everyone in the workspace". */
+    openLabel: string;
+    /** The restricted choice; defaults to the strings' "Only people with access". */
+    restrictedLabel?: string | undefined;
+}

package/dist/ai/components/AllocationSelector.js

@@ -4,8 +4,8 @@ import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
 import { chipClassName } from "../ui/chip.js";
 import { isOrgModel } from "../utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import useSWR from "swr";
 //#region src/ai/components/AllocationSelector.tsx
 var dollars = new Intl.NumberFormat(void 0, {