@parallelworks/ui 0.76.0 → 0.78.0

package/README.md

@@ -24,7 +24,7 @@ Hosts bind strings, navigation, data hooks and the workflow engine through
 ```tsx
 <UIProvider
   strings={{ common: { save: 'Speichern' }, fileExplorer: { preview: { open: 'Öffnen' } } }}
-  navigation={{ goTo: navigate }}
+  navigation={{ goTo: navigate, goBack: router.history.back, canGoBack: router.history.canGoBack }}
   data={{ useRunFile, usePersistedState }}
   slots={{ link: RouterLink }}
   engine={() => import('./engine').then((m) => m.engine)}
@@ -47,6 +47,24 @@ rule a select or scroll area would inject ships in `theme.css`. A host that
 renders on the server passes its policy's `nonce`, which the few components
 that emit a script to place themselves before hydration put on it.
 
+Pass `locale`, the app's language as a BCP 47 tag such as `de-DE`, so relative
+times, exact times, durations and the date picker read as the app's own text
+does. Without it they follow the date library's default locale, or the browser's.
+`useLocale()` reads it, for a host formatting with `formatDateTime`.
+
+Pass `avatarColoring="kind"` for avatars that tell people from agents at a
+glance: every person shares one tint and every agent another, with two initials
+even for a one-word name. The host sets the tints with `--avatar-person`,
+`--avatar-person-text`, `--avatar-agent`, `--avatar-agent-text` and the agent's
+edge `--avatar-agent-ring`. An agent's avatar (`kind="agent"`) is a rounded
+square under either coloring, so its shape and not only its color sets it apart.
+
+Menus, selects, pickers, popovers, tooltips and hover cards open over the page,
+or over the fullscreen element while there is one. Opened inside a `<dialog>`
+shown with `showModal()`, they open inside that dialog instead: the browser
+draws a modal dialog above everything else and leaves the page behind it inert,
+so a popup over the page would open under it, out of reach.
+
 ## Which component?
 
 Each need has one component. Reach for it before styling markup by hand.
@@ -59,6 +77,8 @@ Each need has one component. Reach for it before styling markup by hand.
 | A link out of the app | `ExternalLink` |
 | Work under way | `Loader`; `Skeleton` in a `LoadingRegion` for the shape of content still loading |
 | Nothing to show yet, or nothing matches | `EmptyState` |
+| A page, card or section that couldn't show what it was asked for, such as a 404 | `ErrorPage`, its words chosen by the status |
+| A list page's toolbar and its loading, error, empty and no-match states | `ListToolbar` in `ListPage` with `total`, `matches`, `empty` and `noMatches` (from `./list`) |
 | A text field | `Input`, `Textarea`, or a control framed by `Field`, whose `actions` hold buttons that act on it |
 | A number, a date, a color | `NumberInput`, `DatePicker`, `ColorInput` |
 | A one-time code, such as a sign-in check | `OneTimeCodeInput` |
@@ -92,11 +112,15 @@ Each need has one component. Reach for it before styling markup by hand.
 | How full something is, how far a task has come | `Meter`, `ProgressBar` |
 | Pages of a long list | `Pagination` |
 | A grouped page of settings | `SettingsCard` with `SettingRow`s |
-| A person | `Avatar`, colored by name without a picture |
+| A person or an agent | `Avatar`, colored by name without a picture, or by kind; `AvatarGroup` for an overlapping stack with a "+N" chip |
 | A status in words | `StatusBadge`, or `StatusDot` beside text that says it |
+| A thing's tags or labels | `Tag`; `TagList` for several, wrapped or on one line ending in "+N" |
+| Keys to press | `Kbd`, with `Mod` for Command or Control; `ariaKeyShortcuts` for the control the keys press |
+| A chart's colors, legend and tooltip | `seriesColors`, `ChartLegendList`, `ChartTooltipContent` and `useSeriesHighlight`, around a chart drawn by hand or by a library |
 | A run's, job's or step's status beside its name | `RunStatusIcon`; `StatusBadge` with `runStatusTone` to say it in words |
-| A copy action | `CopyButton`; `CopyCodeBlock` for a command or snippet; `useCopy` for a menu row or a control of your own |
-| A live relative time or duration | `RelativeTime`, `Elapsed` |
+| A copy action | `CopyButton`; `CopyCodeBlock` for a command or snippet, with `secret` for a value shown once; `SelectionCopy` to copy part of a block by selecting it; `useCopy` for a menu row or a control of your own |
+| A live relative time or duration | `RelativeTime` (with a `fallback`, an `exact` style for its tooltip, or `show="absolute"`), `Elapsed` |
+| Fetching again on demand | `RefreshButton`; `variant="inline"` in a line of details; `loading` on an `ActionToolbar` action |
 | Rendered Markdown | `Markdown` |
 | Code or YAML to read or edit | `Editor` from `./editor`; `EditorField` as a form field, `FormCodePanel` for a form's values as JSON |
 | A run's jobs, steps, logs, annotations and warnings | `DependencyGraph` from `./graph`, as a graph or a list |
@@ -331,7 +355,8 @@ all at one lightness and chroma so none reads louder, and each
 `--theme-category-N-text` is solved to secondary text's targets on its fill. An
 `Avatar` without a picture takes one, picked by an FNV-1a hash of its name (or
 its `colorKey`), so the same name has the same color on every page; a nameless
-one keeps the accent. `categoryOf(key)` gives the same pick, 1–8, and
+one keeps the accent. Under `avatarColoring="kind"` it takes its kind's tint
+instead. `categoryOf(key)` gives the same pick, 1–8, and
 `categoryClasses(key)` its fill and text classes, for anything else drawn
 beside a name, such as a group's icon.
 

package/dist/access/AccessDrawer.d.ts

@@ -2,11 +2,10 @@ 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, AccessGroupDetails, AccessInheritedGrant, AccessPermission, AccessPrincipal, AccessRole } from './types.js';
+import type { AccessChange, AccessGrant, AccessGroupDetails, AccessInheritedGrant, AccessPermission, AccessPrincipal, AccessRole, AccessRule, AccessVisibility } from './types.js';
 export type AccessArrangement = 'role' | 'principal';
-export interface AccessDrawerProps {
-    open: boolean;
-    onClose: () => void;
+/** What the drawer and the inline panel share: everything but where they sit. */
+export interface AccessEditorProps {
     /** 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, and any held here only
@@ -48,16 +47,38 @@ export interface AccessDrawerProps {
     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. */
+    /** How the list starts out: role by role, or person and group one by one. Person by person
+     *  where each holds one role, role by role otherwise. */
     defaultArrangement?: AccessArrangement | undefined;
+    /** A switch above the list between open to everyone who can see what the resource is in
+     *  and only those listed. It saves as a grant does, with Undo in a toast. */
+    visibility?: AccessVisibility | undefined;
+    /** Reasons someone has access that no grant here changes, such as admins who always do:
+     *  locked rows ahead of the grants. */
+    rules?: readonly AccessRule[] | undefined;
+    /** Each person and group holds one role here. Their row picks it from a list, a change
+     *  swaps the old role for the new one in a single change, and the grant form picks one. */
+    singleRole?: boolean | undefined;
+}
+export interface AccessDrawerProps extends AccessEditorProps {
+    open: boolean;
+    onClose: () => void;
     /** As `Drawer`'s. */
     width?: number | string | undefined;
 }
+export interface AccessPanelProps extends AccessEditorProps {
+    /** On the panel's frame. */
+    className?: string | undefined;
+}
 /** 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;
+ *  show, locked. Each change is saved as it is made, with Undo in a toast. `AccessPanel` is the
+ *  same editor inline on a page. */
+export declare function AccessDrawer({ open, onClose, width, ...props }: AccessDrawerProps): import("react").JSX.Element;
+/** The access editor inline on a page, such as a settings section, rather than in a drawer: the
+ *  list in a frame, which the grant form takes over with a back arrow in its own header. */
+export declare function AccessPanel({ className, ...props }: AccessPanelProps): 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

@@ -1,32 +1,37 @@
-import { AddIcon, LockIcon, UsersIcon } from "../icons.js";
-import { toast } from "../components/Toast.js";
+import { cx } from "../cx.js";
 import { EmptyState } from "../components/EmptyState.js";
+import { AddIcon, ArrowLeftIcon, LockIcon, UsersIcon } from "../icons.js";
+import { useOpenMenu } from "../components/ContextMenu.js";
+import { Loader } from "../components/Loader.js";
+import { toast } from "../components/Toast.js";
 import { useQueryMatch } from "../components/search.js";
 import { LoadingRegion, Skeleton } from "../components/Skeleton.js";
 import { Button } from "../components/Button.js";
+import { IconButton } from "../components/IconButton.js";
 import { Callout } from "../components/Callout.js";
+import "../components/dismiss.js";
 import { Drawer } from "../components/Drawer.js";
+import { Select } from "../components/Select.js";
 import { SearchInput } from "../components/SearchInput.js";
 import { SegmentedControl } from "../components/SegmentedControl.js";
 import { buildModel, invert, key, principalsWithAccess, warnAboutMisuse } from "./model.js";
-import { ByPrincipal, ByRole, OWNER_SECTION, principalLabel, removeKey } from "./AccessList.js";
+import { ByPrincipal, ByPrincipalSingle, ByRole, OWNER_SECTION, RuleRow, principalLabel, removeKey } from "./AccessList.js";
 import { holdFocus, useFocusAfterRender } from "./focus.js";
 import { useGrantView } from "./GrantView.js";
 import { useAccessStrings } from "./strings.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/access/AccessDrawer.tsx
 var EMPTY_SELECTION = {
 	principalIds: [],
 	roleIds: []
 };
-/** 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 }) {
+/** The list and the grant form, and the saving, failing and undoing they share, for the drawer
+*  and the inline panel to lay out. */
+function useAccessEditor({ resourceName, roles, principals, grants, owner, inherited, permissions, onChange, loading = false, readOnly = false, readOnlyReason, describeGroup, searchPrincipals, groupCount, peopleCount, recentPrincipalIds, singleRole = false, defaultArrangement = singleRole ? "principal" : "role", visibility, rules }, inline) {
 	const t = useAccessStrings();
 	const uid = useId();
+	const openMenu = useOpenMenu();
 	const model = useMemo(() => buildModel({
 		roles,
 		principals,
@@ -71,6 +76,8 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 	const [removal, setRemoval] = useState();
 	const [saving, setSaving] = useState();
 	const [failure, setFailure] = useState();
+	const [visibilitySaving, setVisibilitySaving] = useState(false);
+	const [visibilityFailure, setVisibilityFailure] = useState();
 	const cache = useRef(/* @__PURE__ */ new Map()).current;
 	const seen = useRef(/* @__PURE__ */ new Map()).current;
 	const body = useRef(null);
@@ -82,6 +89,8 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 	const focusLater = useFocusAfterRender();
 	const change = useRef(onChange);
 	change.current = onChange;
+	const visibilityChange = useRef(visibility?.onChange);
+	visibilityChange.current = visibility?.onChange;
 	const match = useQueryMatch();
 	const filtered = useFiltered(model, arrangement, query.trim(), match, t);
 	const editable = !readOnly && onChange !== void 0;
@@ -99,10 +108,14 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 	const undo = (done) => {
 		Promise.resolve(change.current?.(invert(done))).then(() => toast.info(t.undone), (error) => toast.error(t.nothingChanged(messageOf(error)), { title: t.undoFailed }));
 	};
+	/** One role swapped for another, as a row's role picker sends it. */
+	const swapped = (next) => next.grant.length === 1 && next.revoke.length > 0 && next.revoke.every((revoked) => revoked.principalId === next.grant[0]?.principalId);
 	/** 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 { principalNames, roleNames } = names(next);
+		const swap = swapped(next);
+		const newRole = model.roleById.get(next.grant[0]?.roleId ?? "")?.name ?? "";
 		setSaving(next);
 		setFailure(void 0);
 		try {
@@ -110,7 +123,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		} catch (error) {
 			setFailure({
 				change: next,
-				title: next.grant.length > 0 ? t.grantFailed(principalNames, roleNames) : t.removeFailed(principalNames[0] ?? "", roleNames),
+				title: swap ? t.roleChangeFailed(principalNames[0] ?? "", newRole) : next.grant.length > 0 ? t.grantFailed(principalNames, roleNames) : t.removeFailed(principalNames[0] ?? "", roleNames),
 				message: messageOf(error),
 				...where
 			});
@@ -118,12 +131,36 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		} finally {
 			setSaving(void 0);
 		}
-		toast.success(next.grant.length > 0 ? t.granted(principalNames, roleNames) : t.removed(principalNames, roleNames), { action: {
+		toast.success(swap ? t.roleChanged(principalNames[0] ?? "", newRole) : next.grant.length > 0 ? t.granted(principalNames, roleNames) : t.removed(principalNames, roleNames), { action: {
 			label: t.common.undo,
 			onClick: () => undo(next)
 		} });
 		return true;
 	};
+	const openLabel = visibility?.openLabel ?? "";
+	const restrictedLabel = visibility?.restrictedLabel ?? t.restrictedLabel;
+	const choiceLabel = (restricted) => restricted ? restrictedLabel : openLabel;
+	const saveVisibility = async (restricted) => {
+		const save = visibilityChange.current;
+		if (!save) return;
+		setVisibilitySaving(true);
+		setVisibilityFailure(void 0);
+		try {
+			await save(restricted);
+		} catch (error) {
+			setVisibilityFailure({
+				restricted,
+				message: messageOf(error)
+			});
+			return;
+		} finally {
+			setVisibilitySaving(false);
+		}
+		toast.success(t.visibilityChanged(choiceLabel(restricted)), { action: {
+			label: t.common.undo,
+			onClick: () => Promise.resolve(visibilityChange.current?.(!restricted)).then(() => toast.info(t.undone), (error) => toast.error(t.nothingChanged(messageOf(error)), { title: t.undoFailed }))
+		} });
+	};
 	const toList = () => {
 		setView("list");
 		setFailure((current) => current?.inGrant ? void 0 : current);
@@ -167,6 +204,23 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		setRemoval(void 0);
 		focusLater(() => document.getElementById(sectionId(anchor ?? pending.principalId)) ?? body.current?.querySelector("input[type=\"search\"]"));
 	};
+	const changeRole = (principalId, roleId) => {
+		const held = (model.held.get(principalId) ?? []).filter((role) => role.id !== roleId);
+		const has = (model.held.get(principalId) ?? []).some((role) => role.id === roleId);
+		save({
+			grant: has ? [] : [{
+				principalId,
+				roleId
+			}],
+			revoke: held.map((role) => ({
+				principalId,
+				roleId: role.id
+			}))
+		}, {
+			inGrant: false,
+			principalId
+		});
+	};
 	const retry = (failed) => failed.inGrant ? grant(failed.change) : save(failed.change, {
 		inGrant: false,
 		principalId: failed.principalId,
@@ -185,11 +239,10 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		onDismiss: () => setFailure(void 0),
 		children: t.nothingChanged(failure.message)
 	});
-	const close = () => {
+	const reset = () => {
 		setView("list");
 		setRemoval(void 0);
 		setQuery("");
-		onClose();
 	};
 	const grantView = useGrantView({
 		model,
@@ -209,12 +262,15 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		onCancel: toList,
 		focusLater,
 		boundary: bodyElement,
+		singleRole,
 		t
 	});
 	const savingKeys = useMemo(() => new Set(saving?.revoke.map(key) ?? []), [saving]);
 	const withAccess = principalsWithAccess(model);
 	const empty = !loading && withAccess.length === 0;
-	const View = arrangement === "role" ? ByRole : ByPrincipal;
+	const View = arrangement === "role" ? ByRole : singleRole ? ByPrincipalSingle : ByPrincipal;
+	const needle = query.trim();
+	const shownRules = (rules ?? []).filter((rule) => !needle || match(needle, rule.title, rule.detail));
 	const grantButton = (className) => /* @__PURE__ */ jsx(Button, {
 		variant: "primary",
 		icon: /* @__PURE__ */ jsx(AddIcon, {}),
@@ -224,6 +280,67 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		className,
 		children: t.grantAccess
 	});
+	const visibilityValue = visibility?.restricted ? "restricted" : "open";
+	const visibilityOptions = [{
+		value: "open",
+		label: openLabel
+	}, {
+		value: "restricted",
+		label: restrictedLabel
+	}];
+	const visibilityRow = visibility && /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3 border-b border-(--theme-border) px-4 py-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "hidden @min-[30rem]/access:block",
+					children: /* @__PURE__ */ jsx(SegmentedControl, {
+						label: t.visibility,
+						value: visibilityValue,
+						disabled: !editable || visibilitySaving,
+						onValueChange: (next) => {
+							saveVisibility(next === "restricted");
+						},
+						options: visibilityOptions
+					})
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					"aria-label": t.visibility,
+					items: visibilityOptions,
+					value: visibilityValue,
+					disabled: !editable || visibilitySaving,
+					onValueChange: (next) => {
+						if (next !== null && next !== visibilityValue) saveVisibility(next === "restricted");
+					},
+					className: "min-w-0 flex-1 @min-[30rem]/access:hidden"
+				}),
+				visibilitySaving && /* @__PURE__ */ jsx(Loader, {
+					inline: true,
+					size: "1em",
+					label: t.common.loading
+				})
+			]
+		}), visibilityFailure && /* @__PURE__ */ jsx(Callout, {
+			tone: "error",
+			live: true,
+			title: t.visibilityFailed(choiceLabel(visibilityFailure.restricted)),
+			action: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "secondary",
+				onClick: () => saveVisibility(visibilityFailure.restricted),
+				children: t.common.retry
+			}),
+			onDismiss: () => setVisibilityFailure(void 0),
+			children: t.nothingChanged(visibilityFailure.message)
+		})]
+	});
+	const ruleRows = shownRules.map((rule) => /* @__PURE__ */ jsx(RuleRow, {
+		lead: arrangement === "role" ? "chevron" : singleRole ? "tile" : "both",
+		rule,
+		roleName: rule.roleId ? model.roleById.get(rule.roleId)?.name : void 0,
+		t
+	}, rule.id));
 	const list = /* @__PURE__ */ jsxs("div", {
 		className: "@container/access flex min-h-0 flex-1 flex-col",
 		children: [
@@ -239,10 +356,11 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 					]
 				})
 			}),
+			visibilityRow,
 			!empty && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2 border-b border-(--theme-border) px-4 py-3",
 				children: [
-					/* @__PURE__ */ jsx("div", {
+					!singleRole && /* @__PURE__ */ jsx("div", {
 						className: "w-full @min-[30rem]/access:w-auto",
 						children: /* @__PURE__ */ jsx(SegmentedControl, {
 							fill: true,
@@ -258,7 +376,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 							}]
 						})
 					}),
-					editable && grantButton("ms-auto hidden @min-[30rem]/access:inline-flex"),
+					editable && grantButton(singleRole ? "order-last hidden @min-[30rem]/access:inline-flex" : "ms-auto hidden @min-[30rem]/access:inline-flex"),
 					/* @__PURE__ */ jsx(SearchInput, {
 						label: t.filter,
 						value: query,
@@ -266,7 +384,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 							setQuery(next);
 							setExpanded(expandedFor(model, next.trim(), match, t));
 						},
-						className: "min-w-0 basis-full"
+						className: singleRole ? "min-w-0 flex-1" : "min-w-0 basis-full"
 					})
 				]
 			}),
@@ -275,18 +393,18 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 				children: failureNode
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "min-h-0 flex-1 overflow-y-auto",
+				className: cx("min-h-0 flex-1", inline ? "[&>:last-child]:border-b-0" : "overflow-y-auto"),
 				children: loading ? /* @__PURE__ */ jsx(LoadingRegion, {
 					label: t.loading,
 					children: /* @__PURE__ */ jsx(RowsSkeleton, {})
-				}) : empty ? /* @__PURE__ */ jsx(EmptyState, {
+				}) : empty ? /* @__PURE__ */ jsxs(Fragment$1, { children: [ruleRows, /* @__PURE__ */ jsx(EmptyState, {
 					variant: "bare",
 					icon: /* @__PURE__ */ jsx(UsersIcon, {}),
 					title: t.emptyTitle,
 					description: t.emptyDescription(resourceName),
 					action: editable && grantButton(""),
-					className: "py-16"
-				}) : filtered.order.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+					className: ruleRows.length > 0 ? "py-8" : "py-16"
+				})] }) : filtered.order.length === 0 && shownRules.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 					variant: "bare",
 					title: t.noMatches,
 					action: /* @__PURE__ */ jsx(Button, {
@@ -295,7 +413,7 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 						onClick: () => setQuery(""),
 						children: t.clearFilter
 					})
-				}) : /* @__PURE__ */ jsx(View, {
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [ruleRows, /* @__PURE__ */ jsx(View, {
 					model,
 					shown: filtered.shown,
 					order: filtered.order,
@@ -309,13 +427,15 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 							[arrangement]: next
 						};
 					}),
-					filtering: query.trim() !== "",
+					filtering: needle !== "",
 					sectionId,
 					t,
 					actions: {
 						readOnly: !editable,
 						saving: savingKeys,
 						removal,
+						singleRole,
+						openMenu,
 						onAskRemove: (next) => {
 							holdFocus();
 							setFailure(void 0);
@@ -328,13 +448,14 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 						},
 						onRemove: remove,
 						onGrantMore: (principalId) => toGrant([principalId]),
+						onChangeRole: changeRole,
 						failure: failure && !failure.inGrant ? {
 							node: failureNode,
 							principalId: failure.principalId,
 							roleId: failure.roleId
 						} : void 0
 					}
-				})
+				})] })
 			}),
 			editable && !empty && /* @__PURE__ */ jsx("div", {
 				className: "border-t border-(--theme-border) p-4 @min-[30rem]/access:hidden",
@@ -343,29 +464,89 @@ function AccessDrawer({ open, onClose, resourceName, roles, principals, grants,
 		]
 	});
 	const granting = view === "grant";
-	return /* @__PURE__ */ jsx(Drawer, {
-		open,
-		onClose: close,
-		width,
-		padded: false,
+	return {
+		granting,
 		title: granting ? t.grantAccess : t.title,
-		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,
+		description: granting || 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")),
+		toList,
+		reset,
 		footer: granting ? grantView.footer : void 0,
 		onKeyDown: (e) => {
 			const target = e.target;
 			if (granting && e.key === "Escape" && !e.defaultPrevented && target.getAttribute("aria-expanded") !== "true") {
 				e.stopPropagation();
-				e.preventBaseUIHandler();
+				e.preventBaseUIHandler?.();
 				toList();
 			}
 		},
-		children: /* @__PURE__ */ jsx("div", {
+		body: /* @__PURE__ */ jsx("div", {
 			ref: bodyRef,
 			className: "flex min-h-0 flex-1 flex-col",
 			children: granting ? grantView.body : list
 		})
+	};
+}
+/** 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. `AccessPanel` is the
+*  same editor inline on a page. */
+function AccessDrawer({ open, onClose, width = 560, ...props }) {
+	const t = useAccessStrings();
+	const editor = useAccessEditor(props, false);
+	return /* @__PURE__ */ jsx(Drawer, {
+		open,
+		onClose: () => {
+			editor.reset();
+			onClose();
+		},
+		width,
+		padded: false,
+		title: editor.title,
+		description: editor.description,
+		onBack: editor.granting ? editor.toList : void 0,
+		backLabel: t.back,
+		footer: editor.footer,
+		onKeyDown: editor.onKeyDown,
+		children: editor.body
+	});
+}
+/** The access editor inline on a page, such as a settings section, rather than in a drawer: the
+*  list in a frame, which the grant form takes over with a back arrow in its own header. */
+function AccessPanel({ className, ...props }) {
+	const t = useAccessStrings();
+	const editor = useAccessEditor(props, true);
+	return /* @__PURE__ */ jsxs("section", {
+		"data-access-panel": "",
+		tabIndex: -1,
+		"aria-label": editor.granting ? t.grantAccess : t.title,
+		onKeyDown: editor.onKeyDown,
+		className: cx("flex min-w-0 flex-col overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) outline-none", className),
+		children: [
+			editor.granting && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-start gap-3 border-b border-(--theme-border) px-4 py-3",
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+					label: t.back,
+					onClick: editor.toList,
+					className: "-my-1 -ms-1.5"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "m-0 text-sm font-semibold wrap-break-word",
+						children: editor.title
+					}), /* @__PURE__ */ jsx("p", {
+						className: "m-0 mt-0.5 text-xs text-(--theme-muted-text-color)",
+						children: editor.description
+					})]
+				})]
+			}),
+			editor.body,
+			editor.footer && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+				children: editor.footer
+			})
+		]
 	});
 }
 var messageOf = (error) => error instanceof Error && error.message ? error.message : void 0;
@@ -467,4 +648,4 @@ function RowsSkeleton() {
 	}, row));
 }
 //#endregion
-export { AccessDrawer, filterAccess };
+export { AccessDrawer, AccessPanel, filterAccess };

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 {};