@parallelworks/ui 0.77.0 → 0.79.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,33 @@ 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.
+
+A run's warnings and the workflow editor's problems may carry a problem `code`, `params` and
+`type`, as a server's problem details do. Bind `data.useProblemMessage` to `useCodeMessage` from
+`@parallelworks/problem/react`, and they read in the app's language: the message at
+`apiErrors.<code>` in the app's use-intl catalog, or the shared one. It gets each one's `type` too:
+for a type that names an application, such as `/problems/workflow/undefined_input`, the message at
+`apiErrors.workflow.undefined_input` comes first. The app's own codes can stay at the top level of
+`apiErrors`; another registry's go under its name, so a code both use keeps each one's message and
+params. A code with no message, or no `useProblemMessage`, shows the `message` the server sent.
+
+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 +86,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 +121,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 +364,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.
 
@@ -781,7 +815,9 @@ each linking to its job or step: the link opens the subworkflows, matrix and job
 it and what it is in into view below the graph's view bar, readable, and moves focus to it. Each job and step a warning is about, and each one it sits
 inside, carries a mark that lists the warnings on hover, so one skipped without a log is still
 flagged. A job name a matrix ran as several jobs marks each of them. `dag.warningCount` words the
-count.
+count. A warning with a `code` reads as the host's `useProblemMessage` words it, and one whose `type`
+names a page, such as `/problems/workflow/undefined_input`, links to that page in a new tab
+(`dag.warningAbout`); the editor's problems list does the same (`problemAbout`).
 
 The editor checks YAML against the schemas a host registers with `configureEditorYaml` from
 `@parallelworks/ui/editor`. The job, step, input and settings dialogs edit their YAML at their own

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,59 @@ 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;
+    /** Why a save failed, in the reader's words, under "Couldn’t grant…": a fixed sentence, or
+     *  one made from what `onChange` rejected with, such as a localized message for its error
+     *  code. Without it, a generic sentence; the error's own message never shows, as a
+     *  server's words aren't the reader's. */
+    errorMessage?: string | ((error: unknown) => string | undefined) | undefined;
+    /** Access here is set somewhere else, such as on what the resource is part of: the list
+     *  shows, read-only, under a note that says where, with a link there. */
+    managedElsewhere?: AccessManagedElsewhere | undefined;
+}
+export interface AccessManagedElsewhere {
+    /** Where access is set and why: "This team follows the workspace’s access." Without it, a
+     *  generic sentence. */
+    reason?: ReactNode;
+    /** Where to change it, through the host's router. */
+    href?: string | undefined;
+    /** The link's text, which says where it goes: "Workspace access". Without it, "Manage
+     *  access". */
+    linkLabel?: string | 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;
+    /** Under the list, inside the frame and ruled off from it: a note or actions about access
+     *  as a whole. The grant form takes its place while it shows. */
+    footer?: ReactNode;
+}
 /** 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, footer, ...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 { dialogFooterClassName } from "../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, errorMessage, managedElsewhere }, 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,9 +89,12 @@ 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;
+	const editable = !readOnly && !managedElsewhere && onChange !== void 0;
+	const messageOf = (error) => (typeof errorMessage === "function" ? errorMessage(error) : errorMessage) || t.failedReason;
 	const sectionId = (id) => `${uid}${arrangement}${id}`;
 	const names = (changed) => {
 		const all = [...changed.grant, ...changed.revoke];
@@ -99,10 +109,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 +124,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 +132,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 +205,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 +240,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 +263,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,10 +281,92 @@ 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: [
-			readOnly && /* @__PURE__ */ jsx("div", {
+			managedElsewhere ? /* @__PURE__ */ jsx("div", {
+				className: cx("px-4 pt-3", empty && !visibility && "pb-3"),
+				children: /* @__PURE__ */ jsx(Callout, {
+					tone: "info",
+					icon: /* @__PURE__ */ jsx(LockIcon, {}),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-start gap-2 @min-[30rem]/access:flex-row @min-[30rem]/access:gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 flex-1",
+							children: managedElsewhere.reason ?? t.managedElsewhere
+						}), managedElsewhere.href !== void 0 && /* @__PURE__ */ jsx("div", {
+							className: "flex shrink-0 items-center @min-[30rem]/access:h-5",
+							children: /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "secondary",
+								href: managedElsewhere.href,
+								children: managedElsewhere.linkLabel ?? t.manageAccess
+							})
+						})]
+					})
+				})
+			}) : readOnly && /* @__PURE__ */ jsx("div", {
 				className: "px-4 pt-3",
 				children: /* @__PURE__ */ jsxs(Callout, {
 					tone: "info",
@@ -239,10 +378,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 +398,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 +406,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 +415,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 && managedElsewhere ? ruleRows : 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 +435,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 +449,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 +470,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,32 +486,94 @@ 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, footer, ...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: dialogFooterClassName,
+				children: editor.footer
+			}) : footer !== void 0 && footer !== null && footer !== false && /* @__PURE__ */ jsx("div", {
+				className: "border-t border-(--theme-border) px-4 py-3 text-sm text-(--theme-muted-text-color)",
+				children: footer
+			})
+		]
 	});
 }
-var messageOf = (error) => error instanceof Error && error.message ? error.message : void 0;
 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). */
@@ -467,4 +672,4 @@ function RowsSkeleton() {
 	}, row));
 }
 //#endregion
-export { AccessDrawer, filterAccess };
+export { AccessDrawer, AccessPanel, filterAccess };