@parallelworks/ui 0.53.0 → 0.55.0

package/dist/access/GroupPicker.js

@@ -0,0 +1,336 @@
+import { cx } from "../cx.js";
+import { OrganizationIcon, RefreshIcon, UsersIcon } from "../icons.js";
+import { useQueryMatch } from "../components/search.js";
+import { Avatar } from "../components/Avatar.js";
+import { Callout } from "../components/Callout.js";
+import { Combobox } from "../components/Combobox.js";
+import { Skeleton } from "../components/Skeleton.js";
+import { useRelativeTime } from "../components/relativeTime.js";
+import { StatusBadge } from "../components/StatusBadge.js";
+import { covers } from "./model.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+//#region src/access/GroupPicker.tsx
+/** Waits this long on a highlighted group before asking for its details, so arrowing past
+*  groups doesn't ask for each one. */
+var DESCRIBE_DELAY = 120;
+/** Waits this long after the last keystroke before searching. */
+var SEARCH_DELAY = 200;
+/** Faces in a group's details, before the rest are a count. */
+var FACES = 5;
+/** Names in a group's details, before the rest are a count. */
+var NAMES = 3;
+function GroupTile({ everyone, className }) {
+	const Icon = everyone ? OrganizationIcon : UsersIcon;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cx("flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4", everyone ? "bg-(--theme-info-muted) text-(--theme-info-text)" : "bg-(--theme-muted-panel-bg) text-(--theme-muted-text-color)", className),
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+/** The groups field: everyone pinned first, then recent groups, then all of them; a pane beside
+*  the list says who is in the highlighted group and what it holds here. */
+function GroupPicker({ model, value, onValueChange, granting, resourceName, describeGroup, searchGroups, groupCount, recentGroupIds = [], cache, seen, id, describedBy, boundary, t }) {
+	const [highlighted, setHighlighted] = useState(void 0);
+	const details = useDetails(highlighted, describeGroup, cache);
+	const search = useSearch(searchGroups);
+	const match = useQueryMatch();
+	for (const group of [...model.groupById.values(), ...search.results ?? []]) seen.set(group.id, group);
+	const items = useMemo(() => {
+		const roleNames = (groupId) => (model.held.get(groupId) ?? []).map((r) => r.name);
+		const item = (group) => {
+			const everyone = group.kind === "everyone";
+			const held = roleNames(group.id);
+			const size = group.memberCount === void 0 ? void 0 : everyone ? t.people(group.memberCount) : t.members(group.memberCount);
+			return {
+				value: group.id,
+				label: everyone ? t.everyone : group.name,
+				description: [size, held.length > 0 && t.hasRoles(held)].filter(Boolean).join(" · "),
+				accessibleDescription: t.groupSummary(group.memberCount, everyone, cache.get(group.id)?.source, held),
+				icon: /* @__PURE__ */ jsx(GroupTile, {
+					everyone,
+					className: "size-7"
+				})
+			};
+		};
+		const everyone = model.everyone;
+		const recent = recentGroupIds.map((groupId) => seen.get(groupId)).filter((group) => group !== void 0 && group.kind !== "everyone");
+		const listed = search.results ?? [...model.groupById.values()];
+		const pinned = /* @__PURE__ */ new Set([everyone?.id, ...recent.map((group) => group.id)]);
+		const rest = listed.filter((group) => group.kind !== "everyone" && !pinned.has(group.id));
+		const searching = search.results !== void 0;
+		return [
+			...everyone && (!searching || match(search.query, everyone.name, t.everyone)) ? [{
+				label: t.organization,
+				items: [item(everyone)]
+			}] : [],
+			...!searching && recent.length > 0 ? [{
+				label: t.recent,
+				items: recent.map(item)
+			}] : [],
+			{
+				label: t.allGroups,
+				description: (groupCount ?? listed.length).toLocaleString(),
+				items: (searching ? listed.filter((g) => g.kind !== "everyone") : rest).map(item)
+			}
+		].filter((group) => group.items.length > 0);
+	}, [
+		model,
+		recentGroupIds,
+		search.results,
+		search.query,
+		match,
+		groupCount,
+		seen,
+		cache,
+		t,
+		details.details
+	]);
+	const everyoneChosen = model.everyone !== void 0 && value.includes(model.everyone.id);
+	const nameOf = (groupId) => {
+		const group = seen.get(groupId);
+		return group?.kind === "everyone" ? t.everyoneInOrganization : group?.name ?? groupId;
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Combobox, {
+		multiple: true,
+		id,
+		"aria-describedby": describedBy,
+		items,
+		value,
+		onValueChange,
+		itemToStringLabel: nameOf,
+		placeholder: t.addGroup,
+		onQueryChange: searchGroups ? search.setQuery : void 0,
+		loading: search.loading,
+		onItemHighlighted: setHighlighted,
+		collisionBoundary: boundary,
+		details: (groupId) => /* @__PURE__ */ jsx(GroupDetailsPane, {
+			group: groupId === void 0 ? void 0 : seen.get(groupId),
+			state: details,
+			model,
+			granting,
+			resourceName,
+			t
+		}),
+		detailsSummary: () => details.details ? /* @__PURE__ */ jsx(DetailsLine, {
+			details: details.details,
+			t
+		}) : null
+	}), /* @__PURE__ */ jsx("p", {
+		id: describedBy,
+		className: "m-0 mt-1.5 text-xs text-(--theme-muted-text-color)",
+		children: everyoneChosen ? t.everyoneCoversGroups : t.groupsHint(groupCount, model.everyone !== void 0)
+	})] });
+}
+/** The highlighted group's details: from the cache, or asked for once the highlight rests on
+*  it, and the request dropped when it moves on. */
+function useDetails(groupId, describe, cache) {
+	const [failed, setFailed] = useState(void 0);
+	const [, setLoaded] = useState(0);
+	const cached = groupId === void 0 ? void 0 : cache.get(groupId);
+	useEffect(() => {
+		if (groupId === void 0 || !describe || cache.has(groupId)) return;
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			describe(groupId, controller.signal).then((details) => {
+				cache.set(groupId, details);
+				setLoaded((n) => n + 1);
+			}, () => {
+				if (!controller.signal.aborted) setFailed(groupId);
+			});
+		}, DESCRIBE_DELAY);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [
+		groupId,
+		describe,
+		cache
+	]);
+	return {
+		groupId,
+		details: cached,
+		loading: groupId !== void 0 && describe !== void 0 && !cached && failed !== groupId,
+		failed: groupId !== void 0 && failed === groupId
+	};
+}
+/** A search on the host's side, run once typing pauses; a newer query drops the older one's. */
+function useSearch(searchGroups) {
+	const [query, setQuery] = useState("");
+	const [found, setFound] = useState();
+	const trimmed = query.trim();
+	useEffect(() => {
+		if (!searchGroups || trimmed === "") return;
+		const controller = new AbortController();
+		const timer = setTimeout(() => {
+			searchGroups(trimmed, controller.signal).then((groups) => setFound({
+				query: trimmed,
+				groups
+			}), () => {
+				if (!controller.signal.aborted) setFound({
+					query: trimmed,
+					groups: []
+				});
+			});
+		}, SEARCH_DELAY);
+		return () => {
+			clearTimeout(timer);
+			controller.abort();
+		};
+	}, [searchGroups, trimmed]);
+	const active = searchGroups !== void 0 && trimmed !== "";
+	return {
+		query: trimmed,
+		setQuery,
+		results: active ? found?.groups ?? [] : void 0,
+		loading: active && found?.query !== trimmed
+	};
+}
+function PaneHeading({ children }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "m-0 mb-1.5 text-[11px] font-semibold tracking-wide text-(--theme-muted-text-color) uppercase",
+		children
+	});
+}
+function Faces({ details, t }) {
+	const shown = details.members.slice(0, FACES);
+	const more = details.memberCount - shown.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [shown.map((member, index) => /* @__PURE__ */ jsx(Avatar, {
+			src: member.avatarUrl,
+			name: member.name,
+			size: "md"
+		}, `${index}:${member.name}`)), more > 0 && /* @__PURE__ */ jsx("span", {
+			className: "flex h-8 min-w-8 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) px-1.5 text-xs font-medium",
+			children: t.moreMembers(more)
+		})]
+	});
+}
+var memberLine = (details, count, t) => {
+	const names = details.members.slice(0, count).map((member) => member.name);
+	return names.length > 0 ? t.memberNames(names, details.memberCount - names.length) : void 0;
+};
+/** The pane's one-line stand-in, under the highlighted group where the pane has no room. */
+function Updated({ value, t }) {
+	const ago = useRelativeTime(value);
+	return /* @__PURE__ */ jsx("p", {
+		className: "m-0 mt-auto text-xs text-(--theme-muted-text-color)",
+		children: t.updated(ago)
+	});
+}
+function DetailsLine({ details, t }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: [details.source === "synced" && t.syncedShort, memberLine(details, 2, t)].filter(Boolean).join(" · ") });
+}
+function GroupDetailsPane({ group, state, model, granting, resourceName, t }) {
+	if (!group) return /* @__PURE__ */ jsx("p", {
+		className: "m-0 p-4 text-xs text-(--theme-muted-text-color)",
+		children: t.noHighlight
+	});
+	const everyone = group.kind === "everyone";
+	const held = model.held.get(group.id) ?? [];
+	const details = state.groupId === group.id ? state.details : void 0;
+	const count = details?.memberCount ?? group.memberCount;
+	const heldIds = new Set(held.map((role) => role.id));
+	const fresh = granting.filter((role) => !heldIds.has(role.id));
+	const redundant = held.filter((role) => fresh.some((by) => covers(by, role)));
+	const source = everyone ? t.wholeOrganization : details?.source === "synced" ? t.synced : details?.source === "manual" ? t.manual : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-full flex-col gap-4 p-4 text-sm",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-3",
+				children: [/* @__PURE__ */ jsx(GroupTile, { everyone }), /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "m-0 font-semibold wrap-break-word",
+						children: everyone ? t.everyone : group.name
+					}), state.loading && !everyone ? /* @__PURE__ */ jsx(Skeleton, {
+						width: "10rem",
+						className: "mt-1 text-xs"
+					}) : source && /* @__PURE__ */ jsxs("p", {
+						className: "m-0 flex items-start gap-1 text-xs text-(--theme-muted-text-color)",
+						children: [details?.source === "synced" && !everyone && /* @__PURE__ */ jsx(RefreshIcon, { className: "mt-0.5 size-3 shrink-0" }), source]
+					})]
+				})]
+			}),
+			state.loading ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, {
+						count: 2,
+						className: "text-xs"
+					}),
+					/* @__PURE__ */ jsx(Skeleton, {
+						width: "60%",
+						className: "mt-2 text-xs"
+					}),
+					/* @__PURE__ */ jsx(Skeleton, {
+						circle: true,
+						height: 24,
+						width: "9rem",
+						className: "rounded-full"
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				state.failed && /* @__PURE__ */ jsx("p", {
+					className: "m-0 text-xs text-(--theme-error-text)",
+					children: t.detailsFailed
+				}),
+				details?.description && /* @__PURE__ */ jsx("p", {
+					className: "m-0 leading-snug",
+					children: details.description
+				}),
+				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,
+						t
+					}), /* @__PURE__ */ jsx("p", {
+						className: "m-0 mt-1.5 text-xs leading-snug text-(--theme-muted-text-color)",
+						children: memberLine(details, NAMES, t)
+					})] }),
+					everyone && /* @__PURE__ */ jsx("p", {
+						className: "m-0 mt-1.5 text-xs leading-snug text-(--theme-muted-text-color)",
+						children: t.joinLater
+					})
+				] })
+			] }),
+			everyone && fresh.length > 0 && /* @__PURE__ */ jsx(Callout, {
+				tone: "warning",
+				size: "sm",
+				icon: false,
+				children: t.everyoneReach(fresh.map((role) => role.name), count)
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsx(PaneHeading, { children: t.onResource(resourceName) }),
+				held.length > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1",
+					children: held.map((role) => /* @__PURE__ */ jsx(StatusBadge, {
+						size: "md",
+						variant: role.highImpact ? "warning" : "default",
+						children: role.name
+					}, role.id))
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "m-0 text-xs text-(--theme-muted-text-color)",
+					children: t.noRolesHere
+				}),
+				redundant.length > 0 && /* @__PURE__ */ jsx("p", {
+					className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
+					children: t.becomesRedundant(fresh.filter((by) => redundant.some((role) => covers(by, role))).map((r) => r.name), redundant.map((role) => role.name))
+				}),
+				granting.length > 0 && fresh.length === 0 && /* @__PURE__ */ jsx("p", {
+					className: "m-0 mt-2 text-xs leading-snug text-(--theme-muted-text-color)",
+					children: t.alreadyHas(granting.map((role) => role.name))
+				})
+			] }),
+			details?.updatedAt !== void 0 && details.updatedAt !== null && /* @__PURE__ */ jsx(Updated, {
+				value: details.updatedAt,
+				t
+			})
+		]
+	});
+}
+//#endregion
+export { GroupPicker, GroupTile };

package/dist/access/focus.d.ts

@@ -0,0 +1,10 @@
+type Find = () => HTMLElement | null | undefined;
+/** Parks focus on the drawer itself before a change takes away the control that has it. When
+ *  the focused control goes away, the drawer pulls focus back to itself, then again a frame
+ *  later, which would undo wherever focus is sent next; parked, nothing is lost and it doesn't. */
+export declare function holdFocus(): void;
+/** Returns a function that sends focus to what `find` returns once the change it goes with
+ *  has rendered. A save resolves on its own time, so the next commit is the moment to look,
+ *  not the next frame. */
+export declare function useFocusAfterRender(): (find: Find) => void;
+export {};

package/dist/access/focus.js

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef } from "react";
+//#region src/access/focus.ts
+/** Parks focus on the drawer itself before a change takes away the control that has it. When
+*  the focused control goes away, the drawer pulls focus back to itself, then again a frame
+*  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;
+	if (dialog && dialog !== active) dialog.focus({ preventScroll: true });
+}
+/** Returns a function that sends focus to what `find` returns once the change it goes with
+*  has rendered. A save resolves on its own time, so the next commit is the moment to look,
+*  not the next frame. */
+function useFocusAfterRender() {
+	const pending = useRef(void 0);
+	useEffect(() => {
+		const find = pending.current;
+		pending.current = void 0;
+		find?.()?.focus();
+	});
+	return useCallback((find) => {
+		holdFocus();
+		pending.current = find;
+	}, []);
+}
+//#endregion
+export { holdFocus, useFocusAfterRender };

package/dist/access/index.d.ts

@@ -0,0 +1,3 @@
+export { type AccessArrangement, AccessDrawer, type AccessDrawerProps } from './AccessDrawer.js';
+export { ACCESS_STRINGS, type AccessStrings, type AccessText, useAccessStrings, } from './strings.js';
+export type { AccessChange, AccessGrant, AccessGroup, AccessGroupDetails, AccessMember, AccessPermission, AccessRole, } from './types.js';

package/dist/access/index.js

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

package/dist/access/model.d.ts

@@ -0,0 +1,49 @@
+import type { AccessChange, AccessGrant, AccessGroup, AccessPermission, AccessRole } from './types.js';
+/** The grants indexed for the questions the drawer asks of them. */
+export interface AccessModel {
+    roles: readonly AccessRole[];
+    roleById: ReadonlyMap<string, AccessRole>;
+    groupById: ReadonlyMap<string, AccessGroup>;
+    everyone: AccessGroup | undefined;
+    /** The roles each group holds itself, in the roles' order. */
+    held: ReadonlyMap<string, readonly AccessRole[]>;
+    /** The groups holding each role, in the order the host gave the groups. */
+    holders: ReadonlyMap<string, readonly AccessGroup[]>;
+    permissionLabel: (id: string) => string;
+}
+export declare function buildModel(roles: readonly AccessRole[], groups: readonly AccessGroup[], grants: readonly AccessGrant[], permissions?: readonly AccessPermission[]): AccessModel;
+export declare const key: (grant: AccessGrant) => string;
+/** Whether `by` gives every permission `role` does. A role with no permissions covers nothing
+ *  and is covered by nothing, so two empty placeholders never read as duplicates. */
+export declare function covers(by: AccessRole, role: AccessRole): boolean;
+/** The roles a group's members have through everyone, which it doesn't hold itself. */
+export declare function inheritedRoles(model: AccessModel, groupId: string): AccessRole[];
+/** Why a role a group holds is redundant: its other roles that already give everything this one
+ *  does, and whether everyone has it already. */
+export interface Overlap {
+    coveredBy: AccessRole[];
+    everyone: boolean;
+}
+export declare function overlapOf(model: AccessModel, groupId: string, role: AccessRole): Overlap;
+/** What taking roles from a group does to its members. */
+export interface Removal {
+    /** The permissions they no longer have from any role, in the order the roles list them. */
+    lost: string[];
+    /** Roles still giving them some of what the removed roles gave: their own others, then
+     *  everyone's. */
+    keep: AccessRole[];
+    keepThroughEveryone: AccessRole[];
+}
+/** What the group loses: the removed roles' permissions that no role it keeps, its own or
+ *  everyone's, still gives. */
+export declare function removalOf(model: AccessModel, groupId: string, roleIds: readonly string[]): Removal;
+/** Granting each role to each group: the grants that add something, and the pairs held already. */
+export declare function grantPlan(model: AccessModel, groupIds: readonly string[], roleIds: readonly string[]): {
+    grant: AccessGrant[];
+    held: AccessGrant[];
+};
+/** The change that takes `change` back. */
+export declare function invert(change: AccessChange): AccessChange;
+/** Warns, in a development build, about props that would make the drawer wrong in a way that
+ *  is easy to miss: a duplicate id shows one of two, and an unknown id shows nothing. */
+export declare function warnAboutMisuse(roles: readonly AccessRole[], groups: readonly AccessGroup[], grants: readonly AccessGrant[], permissions: readonly AccessPermission[] | undefined): void;

package/dist/access/model.js

@@ -0,0 +1,129 @@
+import { isDev } from "../dev.js";
+//#region src/access/model.ts
+function buildModel(roles, groups, grants, permissions = []) {
+	const roleById = new Map(roles.map((role) => [role.id, role]));
+	const groupById = new Map(groups.map((group) => [group.id, group]));
+	const granted = new Set(grants.map(key));
+	const held = /* @__PURE__ */ new Map();
+	const holders = /* @__PURE__ */ new Map();
+	for (const group of groups) {
+		const own = roles.filter((role) => granted.has(key({
+			groupId: group.id,
+			roleId: role.id
+		})));
+		if (own.length > 0) held.set(group.id, own);
+		for (const role of own) holders.set(role.id, [...holders.get(role.id) ?? [], group]);
+	}
+	const labels = new Map(permissions.map((p) => [p.id, p.label]));
+	return {
+		roles,
+		roleById,
+		groupById,
+		everyone: groups.find((group) => group.kind === "everyone"),
+		held,
+		holders,
+		permissionLabel: (id) => labels.get(id) ?? id
+	};
+}
+var key = (grant) => `${grant.groupId}\u0000${grant.roleId}`;
+var permissionsOf = (roles) => new Set(roles.flatMap((role) => role.permissions));
+/** Whether `by` gives every permission `role` does. A role with no permissions covers nothing
+*  and is covered by nothing, so two empty placeholders never read as duplicates. */
+function covers(by, role) {
+	if (by.id === role.id || role.permissions.length === 0) return false;
+	const given = new Set(by.permissions);
+	return role.permissions.every((p) => given.has(p));
+}
+var isEveryone = (model, groupId) => model.everyone?.id === groupId;
+/** The roles a group's members have through everyone, which it doesn't hold itself. */
+function inheritedRoles(model, groupId) {
+	if (!model.everyone || isEveryone(model, groupId)) return [];
+	const own = new Set((model.held.get(groupId) ?? []).map((role) => role.id));
+	return (model.held.get(model.everyone.id) ?? []).filter((role) => !own.has(role.id));
+}
+function overlapOf(model, groupId, role) {
+	const own = (model.held.get(groupId) ?? []).filter((other) => other.id !== role.id);
+	const everyoneRoles = model.everyone && !isEveryone(model, groupId) ? model.held.get(model.everyone.id) ?? [] : [];
+	return {
+		coveredBy: own.filter((other) => covers(other, role)),
+		everyone: everyoneRoles.some((other) => other.id === role.id || covers(other, role))
+	};
+}
+/** What the group loses: the removed roles' permissions that no role it keeps, its own or
+*  everyone's, still gives. */
+function removalOf(model, groupId, roleIds) {
+	const removing = new Set(roleIds);
+	const removed = (model.held.get(groupId) ?? []).filter((role) => removing.has(role.id));
+	const keep = (model.held.get(groupId) ?? []).filter((role) => !removing.has(role.id));
+	const throughEveryone = inheritedRoles(model, groupId);
+	const still = permissionsOf([...keep, ...throughEveryone]);
+	const taken = permissionsOf(removed);
+	const lost = [...taken].filter((p) => !still.has(p));
+	const share = new Map([...keep, ...throughEveryone].map((role) => [role.id, new Set(role.permissions.filter((p) => taken.has(p)))]));
+	const worth = (role) => {
+		const mine = share.get(role.id) ?? /* @__PURE__ */ new Set();
+		return mine.size > 0 && ![...share].some(([id, theirs]) => id !== role.id && [...mine].every((p) => theirs.has(p)) && (theirs.size > mine.size || id < role.id));
+	};
+	return {
+		lost,
+		keep: keep.filter(worth),
+		keepThroughEveryone: throughEveryone.filter(worth)
+	};
+}
+/** Granting each role to each group: the grants that add something, and the pairs held already. */
+function grantPlan(model, groupIds, roleIds) {
+	const grant = [];
+	const held = [];
+	for (const groupId of groupIds) {
+		const own = new Set((model.held.get(groupId) ?? []).map((role) => role.id));
+		for (const roleId of roleIds) (own.has(roleId) ? held : grant).push({
+			groupId,
+			roleId
+		});
+	}
+	return {
+		grant,
+		held
+	};
+}
+/** The change that takes `change` back. */
+function invert(change) {
+	return {
+		grant: change.revoke,
+		revoke: change.grant
+	};
+}
+/** Warns, in a development build, about props that would make the drawer wrong in a way that
+*  is easy to miss: a duplicate id shows one of two, and an unknown id shows nothing. */
+function warnAboutMisuse(roles, groups, grants, permissions) {
+	if (!isDev()) return;
+	const warn = (message) => console.warn(`AccessDrawer: ${message}`);
+	for (const id of duplicates(roles.map((role) => role.id))) warn(`two roles share the id "${id}"; ids must be unique.`);
+	for (const id of duplicates(groups.map((group) => group.id))) warn(`two groups share the id "${id}"; ids must be unique.`);
+	if (groups.filter((group) => group.kind === "everyone").length > 1) warn("more than one group is everyone; only the first counts.");
+	const roleIds = new Set(roles.map((role) => role.id));
+	const groupIds = new Set(groups.map((group) => group.id));
+	for (const grant of grants) {
+		if (!roleIds.has(grant.roleId)) warn(`a grant names the unknown role "${grant.roleId}"; it isn't shown.`);
+		if (!groupIds.has(grant.groupId)) warn(`a grant names the unknown group "${grant.groupId}"; pass every granted group.`);
+	}
+	for (const k of duplicates(grants.map(key))) {
+		const [groupId, roleId] = k.split("\0");
+		warn(`the grant of "${roleId}" to "${groupId}" is listed twice.`);
+	}
+	if (permissions) {
+		const known = new Set(permissions.map((p) => p.id));
+		for (const role of roles) for (const p of role.permissions.filter((id) => !known.has(id))) warn(`the role "${role.id}" names the unknown permission "${p}"; it reads as its id.`);
+	}
+}
+function duplicates(ids) {
+	const seen = /* @__PURE__ */ new Set();
+	const repeated = /* @__PURE__ */ new Set();
+	for (const id of ids) {
+		if (seen.has(id)) repeated.add(id);
+		seen.add(id);
+	}
+	return [...repeated];
+}
+//#endregion
+export { buildModel, covers, grantPlan, inheritedRoles, invert, key, overlapOf, removalOf, warnAboutMisuse };