@parallelworks/ui 0.53.0 → 0.55.0

package/dist/access/strings.d.ts

@@ -0,0 +1,122 @@
+import { type ReactNode } from 'react';
+import { type UIStrings } from '../components/Provider.js';
+export declare const ACCESS_STRINGS: {
+    title: string;
+    /** Under the title: the resource, and how many groups have a role on it. */
+    summary: (resource: string, groups: number, everyone: boolean) => string;
+    /** Names the switch between the two ways of listing who has access. */
+    arrange: string;
+    byRole: string;
+    byGroup: string;
+    filter: string;
+    grantAccess: string;
+    highImpact: string;
+    loading: string;
+    groups: (n: number) => string;
+    /** How many of a role's groups a filter left. */
+    groupsShown: (shown: number, total: number) => string;
+    members: (n: number) => string;
+    people: (n: number) => string;
+    /** Everyone, where it is short: a tag or a picker row. */
+    everyone: string;
+    /** Everyone, where it stands as a row of its own. */
+    everyoneInOrganization: string;
+    everyoneJoinLater: string;
+    /** Read with the badges a group row folds away: "+2". */
+    moreRoles: (n: number) => string;
+    moreRolesLabel: (roles: readonly string[]) => string;
+    /** Beside a group whose other role gives everything this one does. */
+    coveredBy: (roles: readonly string[]) => string;
+    /** Beside a group that has this through everyone as well. */
+    everyoneHasThisToo: string;
+    /** A role a group holds that another of its roles already gives. */
+    redundant: (roles: readonly string[]) => string;
+    /** A role a group has only because everyone does. */
+    throughEveryone: string;
+    removeRole: (group: string, role: string) => string;
+    grantMoreRoles: string;
+    removeAllAccess: string;
+    removeTitle: (group: string, roles: readonly string[]) => string;
+    removeAllTitle: (group: string) => string;
+    /** Leads the list of what a group loses; `members` is undefined when the count isn't known. */
+    losesIntro: (members: number | undefined, everyone: boolean) => string;
+    /** After the list: why these are lost, and what they keep. */
+    keeps: (own: readonly string[], throughEveryone: readonly string[]) => string;
+    /** When the roles it keeps give everything the removed ones did. */
+    losesNothing: (own: readonly string[], throughEveryone: readonly string[]) => string;
+    confirmRemove: (roles: readonly string[]) => string;
+    removeFailed: (group: string, roles: readonly string[]) => string;
+    grantFailed: (groups: readonly string[], roles: readonly string[]) => string;
+    undoFailed: string;
+    /** Under a failed save; `reason` is the host's error message, when it gave one. */
+    nothingChanged: (reason: string | undefined) => string;
+    /** The toast after a grant. */
+    granted: (groups: readonly string[], roles: readonly string[]) => string;
+    /** The toast after a removal. */
+    removed: (groups: readonly string[], roles: readonly string[]) => string;
+    undone: string;
+    readOnly: string;
+    /** After `readOnly` when the host gives no reason. */
+    readOnlyReason: string;
+    emptyTitle: string;
+    emptyDescription: (resource: string) => string;
+    noMatches: string;
+    clearFilter: string;
+    back: string;
+    groupsLabel: string;
+    addGroup: string;
+    /** Under the groups field; `count` is undefined when the host doesn't say how many there are. */
+    groupsHint: (count: number | undefined, everyone: boolean) => string;
+    everyoneCoversGroups: string;
+    organization: string;
+    recent: string;
+    allGroups: string;
+    /** On a group's row in the picker: the roles it holds here. */
+    hasRoles: (roles: readonly string[]) => string;
+    /** Read with a group's row: its size, where it comes from and its roles here. */
+    groupSummary: (members: number | undefined, everyone: boolean, source: 'synced' | 'manual' | undefined, roles: readonly string[]) => string;
+    rolesLabel: string;
+    searchRoles: string;
+    /** On a role's row in the picker. */
+    alreadyHave: (groups: readonly string[]) => string;
+    alreadyCovered: (roles: readonly string[]) => string;
+    everyoneHasIt: string;
+    /** The footer's account of what pressing Grant does. */
+    grantSummary: (groups: readonly string[], roles: readonly string[]) => ReactNode;
+    /** Why Grant can't be pressed: every group has every role already. */
+    nothingToGrant: (groups: readonly string[], roles: readonly string[]) => string;
+    pickGroupsAndRoles: string;
+    pickGroups: string;
+    pickRoles: string;
+    grant: (roles: readonly string[]) => string;
+    grantToEveryone: string;
+    everyoneWarningTitle: (roles: readonly string[], people: number | undefined) => string;
+    everyoneWarning: (resource: string) => string;
+    confirmEveryoneTitle: (roles: readonly string[], people: number | undefined) => string;
+    synced: string;
+    syncedShort: string;
+    manual: string;
+    wholeOrganization: string;
+    joinLater: string;
+    /** The first few members by name, and how many more there are. */
+    memberNames: (names: readonly string[], more: number) => string;
+    moreMembers: (n: number) => string;
+    onResource: (resource: string) => string;
+    noRolesHere: string;
+    /** When a role being granted gives everything one the group holds does. */
+    becomesRedundant: (granting: readonly string[], held: readonly string[]) => string;
+    alreadyHas: (roles: readonly string[]) => string;
+    everyoneReach: (roles: readonly string[], people: number | undefined) => string;
+    updated: (ago: string) => string;
+    detailsFailed: string;
+    loadingDetails: string;
+    noHighlight: string;
+};
+/** The drawer's own text, which a host translates through UIProvider's `access`. */
+export type AccessText = typeof ACCESS_STRINGS;
+/** The drawer's text with the shared words, such as Cancel and Retry, beside it. */
+export type AccessStrings = AccessText & {
+    common: UIStrings['common'];
+};
+/** The access drawer's strings: the host's translations over the English defaults. */
+export declare function useAccessStrings(): AccessStrings;

package/dist/access/strings.js

@@ -0,0 +1,151 @@
+import { useStrings } from "../components/Provider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+//#region src/access/strings.tsx
+var plural = new Intl.PluralRules("en");
+var list = new Intl.ListFormat("en", { type: "conjunction" });
+/** A count and its noun: "1 group", "1,024 groups". */
+var countOf = (n, one, other) => `${n.toLocaleString()} ${plural.select(n) === "one" ? one : other}`;
+var and = (names) => list.format(names);
+var has = (names) => names.length === 1 ? "has" : "have";
+var ACCESS_STRINGS = {
+	title: "Access",
+	/** Under the title: the resource, and how many groups have a role on it. */
+	summary: (resource, groups, everyone) => everyone ? groups === 0 ? `${resource} · Everyone has access` : `${resource} · Everyone and ${countOf(groups, "group have access", "groups have access")}` : groups === 0 ? `${resource} · No groups have access` : `${resource} · ${countOf(groups, "group has access", "groups have access")}`,
+	/** Names the switch between the two ways of listing who has access. */
+	arrange: "List access",
+	byRole: "By role",
+	byGroup: "By group",
+	filter: "Filter by role or group",
+	grantAccess: "Grant access",
+	highImpact: "High impact",
+	loading: "Loading who has access",
+	groups: (n) => countOf(n, "group", "groups"),
+	/** How many of a role's groups a filter left. */
+	groupsShown: (shown, total) => `${shown.toLocaleString()} of ${countOf(total, "group", "groups")}`,
+	members: (n) => countOf(n, "member", "members"),
+	people: (n) => countOf(n, "person", "people"),
+	/** Everyone, where it is short: a tag or a picker row. */
+	everyone: "Everyone",
+	/** Everyone, where it stands as a row of its own. */
+	everyoneInOrganization: "Everyone in your organization",
+	everyoneJoinLater: "Including people who join later",
+	/** Read with the badges a group row folds away: "+2". */
+	moreRoles: (n) => `+${n.toLocaleString()}`,
+	moreRolesLabel: (roles) => `Also ${and(roles)}`,
+	/** Beside a group whose other role gives everything this one does. */
+	coveredBy: (roles) => `${and(roles)} covers this too`,
+	/** Beside a group that has this through everyone as well. */
+	everyoneHasThisToo: "Everyone has this too",
+	/** A role a group holds that another of its roles already gives. */
+	redundant: (roles) => `Redundant: ${and(roles)} already covers this.`,
+	/** A role a group has only because everyone does. */
+	throughEveryone: "Everyone in your organization has it",
+	removeRole: (group, role) => `Remove ${group} from ${role}`,
+	grantMoreRoles: "Grant more roles",
+	removeAllAccess: "Remove all access",
+	removeTitle: (group, roles) => `Remove ${group} from ${and(roles)}?`,
+	removeAllTitle: (group) => `Remove all of ${group}’s access?`,
+	/** Leads the list of what a group loses; `members` is undefined when the count isn't known. */
+	losesIntro: (members, everyone) => everyone ? "People who have it only through everyone will no longer be able to:" : members === void 0 ? "Its members will no longer be able to:" : `Its ${countOf(members, "member", "members")} will no longer be able to:`,
+	/** After the list: why these are lost, and what they keep. */
+	keeps: (own, throughEveryone) => [
+		"No other role of theirs gives these.",
+		own.length > 0 && `They keep ${and(own)}.`,
+		throughEveryone.length > 0 && `They keep ${and(throughEveryone)}, which everyone has.`
+	].filter(Boolean).join(" "),
+	/** When the roles it keeps give everything the removed ones did. */
+	losesNothing: (own, throughEveryone) => `They lose nothing: ${and([...own, ...throughEveryone])} still ${own.length + throughEveryone.length === 1 ? "gives" : "give"} them all of it.`,
+	confirmRemove: (roles) => roles.length === 1 ? `Remove ${roles[0]}` : "Remove all access",
+	removeFailed: (group, roles) => `Couldn’t remove ${group} from ${and(roles)}`,
+	grantFailed: (groups, roles) => `Couldn’t grant ${and(roles)} to ${and(groups)}`,
+	undoFailed: "Couldn’t undo the change",
+	/** Under a failed save; `reason` is the host's error message, when it gave one. */
+	nothingChanged: (reason) => reason ? `${reason.replace(/\.?$/, ".")} Nothing changed.` : "Nothing changed.",
+	/** The toast after a grant. */
+	granted: (groups, roles) => `Gave ${and(groups)} ${and(roles)}.`,
+	/** The toast after a removal. */
+	removed: (groups, roles) => `Removed ${and(groups)} from ${and(roles)}.`,
+	undone: "Change undone.",
+	readOnly: "You can see who has access.",
+	/** After `readOnly` when the host gives no reason. */
+	readOnlyReason: "Only people who manage access here can change it.",
+	emptyTitle: "No groups have access yet",
+	emptyDescription: (resource) => `Give a group a role so its members can see, use or manage ${resource}.`,
+	noMatches: "No roles or groups match",
+	clearFilter: "Clear filter",
+	back: "Back to who has access",
+	groupsLabel: "Groups",
+	addGroup: "Add a group",
+	/** Under the groups field; `count` is undefined when the host doesn't say how many there are. */
+	groupsHint: (count, everyone) => count === void 0 ? everyone ? "Search groups, or pick Everyone in your organization." : "Search groups." : `Search ${countOf(count, "group", "groups")}${everyone ? ", or pick Everyone in your organization" : ""}.`,
+	everyoneCoversGroups: "Everyone covers every group, so there’s no need to add others.",
+	organization: "Organization",
+	recent: "Recent",
+	allGroups: "All groups",
+	/** On a group's row in the picker: the roles it holds here. */
+	hasRoles: (roles) => `has ${and(roles)}`,
+	/** Read with a group's row: its size, where it comes from and its roles here. */
+	groupSummary: (members, everyone, source, roles) => [
+		members !== void 0 && (everyone ? countOf(members, "person", "people") : countOf(members, "member", "members")),
+		source === "synced" && "synced",
+		roles.length > 0 ? `has ${and(roles)} here` : "no roles here"
+	].filter(Boolean).join(", "),
+	rolesLabel: "Roles",
+	searchRoles: "Search roles",
+	/** On a role's row in the picker. */
+	alreadyHave: (groups) => `${and(groups)} already ${has(groups)} it.`,
+	alreadyCovered: (roles) => `${and(roles)} already covers this.`,
+	everyoneHasIt: "Everyone already has it.",
+	/** The footer's account of what pressing Grant does. */
+	grantSummary: (groups, roles) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("strong", {
+			className: "font-medium text-(--theme-app)",
+			children: and(groups)
+		}),
+		" ",
+		groups.length === 1 ? "gets" : "get",
+		" ",
+		and(roles),
+		"."
+	] }),
+	/** Why Grant can't be pressed: every group has every role already. */
+	nothingToGrant: (groups, roles) => `${and(groups)} already ${has(groups)} ${and(roles)}, so there’s nothing to grant.`,
+	pickGroupsAndRoles: "Pick the groups and the roles to grant.",
+	pickGroups: "Pick a group to grant to.",
+	pickRoles: "Pick a role to grant.",
+	grant: (roles) => roles.length === 0 ? "Grant" : roles.length === 1 ? `Grant ${roles[0]}` : `Grant ${countOf(roles.length, "role", "roles")}`,
+	grantToEveryone: "Grant to everyone",
+	everyoneWarningTitle: (roles, people) => people === void 0 ? `${and(roles)} for everyone` : `${and(roles)} for all ${countOf(people, "person", "people")}`,
+	everyoneWarning: (resource) => `Everyone in your organization, and everyone who joins later, will have it on ${resource}.`,
+	confirmEveryoneTitle: (roles, people) => people === void 0 ? `Grant ${and(roles)} to everyone?` : `Grant ${and(roles)} to all ${countOf(people, "person", "people")}?`,
+	synced: "Synced from your identity provider",
+	syncedShort: "Synced",
+	manual: "Members added by hand",
+	wholeOrganization: "Your whole organization",
+	joinLater: "And anyone who joins later gets it automatically.",
+	/** The first few members by name, and how many more there are. */
+	memberNames: (names, more) => more > 0 ? and([...names, `${more.toLocaleString()} more`]) : and(names),
+	moreMembers: (n) => `+${n.toLocaleString()}`,
+	onResource: (resource) => `On ${resource}`,
+	noRolesHere: "No roles here yet.",
+	/** When a role being granted gives everything one the group holds does. */
+	becomesRedundant: (granting, held) => `${and(granting)} also ${granting.length === 1 ? "gives" : "give"} them ${and(held)}, so ${and(held)} becomes redundant. Nothing is removed.`,
+	alreadyHas: (roles) => `Already has ${and(roles)}.`,
+	everyoneReach: (roles, people) => `${and(roles)} for everyone reaches ${people === void 0 ? "every person" : `all ${countOf(people, "person", "people")}`} in your organization, and anyone who joins later. You’ll be asked to confirm.`,
+	updated: (ago) => `Membership updated ${ago}`,
+	detailsFailed: "Couldn’t load this group’s details.",
+	loadingDetails: "Loading the group’s details",
+	noHighlight: "Highlight a group to see who is in it."
+};
+/** The access drawer's strings: the host's translations over the English defaults. */
+function useAccessStrings() {
+	const { access: overrides, common } = useStrings();
+	return useMemo(() => ({
+		...ACCESS_STRINGS,
+		...overrides,
+		common
+	}), [overrides, common]);
+}
+//#endregion
+export { ACCESS_STRINGS, useAccessStrings };

package/dist/access/types.d.ts

@@ -0,0 +1,56 @@
+import type { TimeValue } from '../format.js';
+/** A named set of permissions. Groups are granted roles, never permissions one by one. */
+export interface AccessRole {
+    id: string;
+    name: string;
+    /** What it lets someone do, in a sentence. */
+    description?: string | undefined;
+    /** The permissions it gives. Two roles that share some are allowed, and only redundant: the
+     *  drawer works out the overlap from these and says so as a hint. */
+    permissions: readonly string[];
+    /** Marks a role that reaches far, such as root on every node. It carries a tag, and granting
+     *  it to everyone says so before asking to confirm. */
+    highImpact?: boolean | undefined;
+}
+/** A permission's name in words, for what a group loses when a role is taken away. */
+export interface AccessPermission {
+    id: string;
+    /** What it lets someone do, as a phrase that follows "will no longer be able to": "Sign in". */
+    label: string;
+}
+/** Who a role can be granted to. */
+export interface AccessGroup {
+    id: string;
+    name: string;
+    /** How many people are in it; for everyone, the organization's size. */
+    memberCount?: number | undefined;
+    /** `everyone` is the whole organization, people who join later included. At most one group
+     *  is; leave it out where a resource can't be granted to everyone. */
+    kind?: 'everyone' | 'group' | undefined;
+}
+/** A role held by a group. */
+export interface AccessGrant {
+    groupId: string;
+    roleId: string;
+}
+/** What one change grants and takes away; neither list holds a grant that changes nothing. */
+export interface AccessChange {
+    grant: AccessGrant[];
+    revoke: AccessGrant[];
+}
+/** A person, as a group's details show its first few members. */
+export interface AccessMember {
+    name: string;
+    avatarUrl?: string | undefined;
+}
+/** More about a group than the list needs, loaded when it is highlighted in the group picker. */
+export interface AccessGroupDetails {
+    description?: string | undefined;
+    /** `synced` comes from an identity provider; `manual` is kept by hand. */
+    source?: 'synced' | 'manual' | undefined;
+    /** The first few, in the order to show them. */
+    members: readonly AccessMember[];
+    memberCount: number;
+    /** When its membership last changed. */
+    updatedAt?: TimeValue;
+}

package/dist/ai/components/SlashMenu.js

@@ -83,7 +83,7 @@ function SlashMenu({ label, listId, matches, active, onChoose }) {
 		role: "listbox",
 		"aria-label": label,
 		"data-testid": "slash-menu",
-		className: cx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden py-1", panelClassName),
+		className: cx("absolute bottom-full left-0 right-0 z-20 mb-2 overflow-hidden", "p-1", panelClassName),
 		children: matches.map((c, i) => /* @__PURE__ */ jsxs("div", {
 			id: optionId(listId, i),
 			role: "option",

package/dist/components/Combobox.d.ts

@@ -46,6 +46,25 @@ export type ComboboxProps<Value = string> = FieldProps & SelectionProps<Value> &
     trigger?: ReactElement | undefined;
     /** A hint on the trigger button. */
     triggerTooltip?: ReactNode;
+    /** A pane beside the list about the highlighted item, such as who is in a group; it gets
+     *  undefined while nothing is highlighted. It follows the highlight from the keyboard and
+     *  the pointer alike, and is hidden from assistive technology, so each item's
+     *  `accessibleDescription` must say what matters in it. Where the list is narrower than
+     *  30rem the pane has no room, and `detailsSummary` shows under the highlighted item. */
+    details?: ((value: Value | undefined) => ReactNode) | undefined;
+    /** Called as the highlight moves, from the keyboard or the pointer, such as to load what
+     *  `details` shows; undefined once nothing is highlighted. */
+    onItemHighlighted?: ((value: Value | undefined) => void) | undefined;
+    /** A line about the highlighted item, under it, where the list has no room for `details`. */
+    detailsSummary?: ((value: Value) => ReactNode) | undefined;
+    /** Called as the typed text changes. With it, the host does the filtering: the list shows
+     *  `items` as given, such as the results of a search on the server. */
+    onQueryChange?: ((query: string) => void) | undefined;
+    /** The host's search is under way. */
+    loading?: boolean | undefined;
+    /** The area the open list stays inside, such as a drawer's body above its footer; by
+     *  default, the viewport. With `details`, the list grows to fill it. */
+    collisionBoundary?: Element | null | undefined;
 };
 export interface AutocompleteProps extends FieldProps {
     /** Suggestions; any typed text is also a valid value. */

package/dist/components/Combobox.js

@@ -1,11 +1,13 @@
 import { cx } from "../cx.js";
 import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
+import { Loader } from "./Loader.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
 import { fieldBox } from "./fieldBox.js";
-import { isComboboxGroup, pickerItemClassName } from "./comboboxItems.js";
+import { isComboboxGroup, optionNaming, pickerItemClassName } from "./comboboxItems.js";
+import { OptionDescription } from "./OptionDescription.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { dequal } from "dequal";
@@ -79,13 +81,14 @@ var triggerClassName = "flex shrink-0 items-center self-stretch px-2 text-(--the
 var popupInputClassName = fieldBox({ size: "sm" });
 /** A pick-from-the-list field: one value, or several with `multiple`. Typing filters the list. */
 function Combobox$1(props) {
-	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip, size = "md" } = props;
+	const { items, isItemEqualToValue = dequal, itemToStringLabel = String, className, placeholder, disabled, required, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, trigger, triggerTooltip, size = "md", details, detailsSummary, onItemHighlighted, onQueryChange, loading = false, collisionBoundary } = props;
 	const entries = useEntries(items);
 	const filter = useEntryFilter();
 	const t = useStrings().dropdown;
 	const list = useRef(null);
 	const uid = useId();
 	const [inputValue, setInputValue] = useState(null);
+	const [highlighted, setHighlighted] = useState(void 0);
 	const entryOf = (value) => entries.flat.find((entry) => isItemEqualToValue(entry.value, value)) ?? {
 		value,
 		label: itemToStringLabel(value)
@@ -125,15 +128,21 @@ function Combobox$1(props) {
 		autoComplete: "off",
 		className: trigger ? popupInputClassName : inputClassName(size)
 	});
+	const isHighlighted = (entry) => highlighted !== void 0 && !entry.created && !highlighted.created && isItemEqualToValue(entry.value, highlighted.value);
 	const itemRow = (entry, rowProps) => /* @__PURE__ */ jsxs(Combobox.Item, {
 		value: entry,
 		disabled: entry.disabled || full && !isChosen(entry),
 		...rowProps.props,
-		...optionNaming(uid, rowProps.props.index, entry),
+		...optionNaming(`${uid}${rowProps.props.index}`, entry),
 		className: pickerItemClassName,
 		children: [/* @__PURE__ */ jsx(ItemContent, {
 			entry,
-			id: `${uid}${rowProps.props.index}`
+			id: `${uid}${rowProps.props.index}`,
+			children: detailsSummary && isHighlighted(entry) && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "mt-0.5 text-xs leading-snug text-(--theme-muted-text-color) @min-[30rem]/picker:hidden",
+				children: detailsSummary(entry.value)
+			})
 		}), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 			className: "ml-auto flex shrink-0 items-center",
 			children: /* @__PURE__ */ jsx(CheckIcon, {
@@ -162,7 +171,10 @@ function Combobox$1(props) {
 			className: "border-b border-(--theme-border) p-1.5",
 			children: input
 		}),
-		className: "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		className: details ? "w-[min(36rem,var(--available-width))]" : "w-max min-w-(--anchor-width) max-w-[min(28rem,var(--available-width))]",
+		loading: loading ? t.searching : void 0,
+		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
+		collisionBoundary,
 		renderItem: itemRow
 	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Combobox.InputGroup, {
 		"data-testid": "combobox",
@@ -198,15 +210,25 @@ function Combobox$1(props) {
 		empty: t.noOptionsFound,
 		statusGroups: entries.statusGroups,
 		query: inputValue ?? "",
+		loading: loading ? t.searching : void 0,
+		details: details?.(highlighted?.created ? void 0 : highlighted?.value),
+		collisionBoundary,
 		renderItem: itemRow
 	})] });
 	const root = {
 		items: listItems,
-		filter,
 		isItemEqualToValue: (a, b) => isItemEqualToValue(a.value, b.value),
 		itemToStringLabel: entryLabel,
-		onInputValueChange: setInputValue,
-		onItemHighlighted: (_, { index, reason }) => list.current?.reveal(index, reason),
+		filter: onQueryChange ? null : filter,
+		onInputValueChange: (next) => {
+			setInputValue(next);
+			onQueryChange?.(next);
+		},
+		onItemHighlighted: (entry, { index, reason }) => {
+			if (details || detailsSummary) setHighlighted(entry);
+			onItemHighlighted?.(entry && !entry.created ? entry.value : void 0);
+			list.current?.reveal(index, reason);
+		},
 		disabled,
 		required,
 		virtualized: true,
@@ -218,7 +240,12 @@ function Combobox$1(props) {
 		multiple: true,
 		value: toEntries(props.value),
 		defaultValue: toEntries(props.defaultValue),
-		onValueChange: (next) => {
+		onValueChange: (next, details) => {
+			if (details.reason === "escape-key") {
+				details.cancel();
+				details.allowPropagation();
+				return;
+			}
 			setUncontrolledCount(next.length);
 			props.onValueChange?.(next.map((entry) => entry.value));
 		}
@@ -275,7 +302,7 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 				value: entry,
 				disabled: entry.disabled,
 				...rowProps.props,
-				...optionNaming(uid, rowProps.props.index, entry),
+				...optionNaming(`${uid}${rowProps.props.index}`, entry),
 				className: pickerItemClassName,
 				children: /* @__PURE__ */ jsx(ItemContent, {
 					entry,
@@ -285,33 +312,31 @@ function Autocomplete$1({ items, value, defaultValue, onValueChange, className,
 		})]
 	});
 }
-/** An option is named by its label, with its description read after it rather than as part of
-*  its name. */
-function optionNaming(uid, index, entry) {
-	return {
-		"aria-labelledby": `${uid}${index}label`,
-		"aria-describedby": entry.description ? `${uid}${index}description` : void 0
-	};
-}
-function ItemContent({ entry, id }) {
+function ItemContent({ entry, id, children }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [entry.icon && /* @__PURE__ */ jsx("span", {
 		className: "flex shrink-0 items-center",
 		children: entry.icon
 	}), /* @__PURE__ */ jsxs("span", {
 		className: "flex min-w-0 flex-col",
-		children: [/* @__PURE__ */ jsx(Tooltip, {
-			content: entry.label,
-			overflowOnly: true,
-			children: /* @__PURE__ */ jsx("span", {
-				id: `${id}label`,
-				className: "truncate",
-				children: entry.label
-			})
-		}), entry.description && /* @__PURE__ */ jsx("span", {
-			id: `${id}description`,
-			className: "text-xs leading-snug text-(--theme-muted-text-color)",
-			children: entry.description
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Tooltip, {
+					content: entry.label,
+					overflowOnly: true,
+					children: /* @__PURE__ */ jsx("span", {
+						id: `${id}label`,
+						className: "truncate",
+						children: entry.label
+					})
+				}), entry.badge]
+			}),
+			/* @__PURE__ */ jsx(OptionDescription, {
+				id: `${id}description`,
+				item: entry
+			}),
+			children
+		]
 	})] });
 }
 function GroupHeading({ group }) {
@@ -335,26 +360,52 @@ function GroupHeading({ group }) {
 	] });
 }
 /** Portal, positioner and popup shared by Combobox and Autocomplete; both use the same parts. */
-function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", renderItem }) {
+function ListPopup({ listRef, empty, statusGroups = [], query = "", header, className = "w-(--anchor-width) max-w-(--available-width)", loading, details, collisionBoundary, renderItem }) {
+	const withDetails = details !== void 0;
+	const list = /* @__PURE__ */ jsxs(Fragment, { children: [
+		loading && /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			className: "flex items-center gap-2 px-3 py-2 text-(--theme-muted-text-color)",
+			children: [/* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: "1em"
+			}), loading]
+		}),
+		empty && !loading && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
+			className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
+			children: empty
+		}),
+		/* @__PURE__ */ jsx(Combobox.List, {
+			className: cx(withDetails && "min-h-0 flex-1"),
+			children: /* @__PURE__ */ jsx(VirtualList, {
+				ref: listRef,
+				statusGroups,
+				query,
+				tall: withDetails,
+				renderItem
+			})
+		})
+	] });
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 		align: "start",
 		sideOffset: 4,
 		className: positionerClassName,
+		...collisionBoundary && { collisionBoundary },
 		children: /* @__PURE__ */ jsxs(Combobox.Popup, {
-			className: cx("overflow-hidden", className, panelClassName),
-			children: [
-				header,
-				empty && statusGroups.length === 0 && /* @__PURE__ */ jsx(Combobox.Empty, {
-					className: "px-3 py-2 text-(--theme-muted-text-color) empty:hidden",
-					children: empty
-				}),
-				/* @__PURE__ */ jsx(Combobox.List, { children: /* @__PURE__ */ jsx(VirtualList, {
-					ref: listRef,
-					statusGroups,
-					query,
-					renderItem
-				}) })
-			]
+			className: cx("overflow-hidden", withDetails && "@container/picker flex h-[min(40rem,var(--available-height))] flex-col", className, panelClassName, !empty && !loading && statusGroups.length === 0 && !header && "data-empty:hidden"),
+			children: [header, withDetails ? /* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-0 flex-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-1 flex-col",
+					children: list
+				}), /* @__PURE__ */ jsxs("div", {
+					"aria-hidden": "true",
+					"data-testid": "combobox-details",
+					className: "hidden w-1/2 shrink-0 overflow-y-auto overscroll-contain border-l border-(--theme-border) bg-(--theme-panel-bg) @min-[30rem]/picker:block",
+					children: [details, /* @__PURE__ */ jsx("div", { className: "pointer-events-none sticky bottom-0 -mt-6 h-6 bg-linear-to-t from-(--theme-panel-bg) to-transparent" })]
+				})]
+			}) : list]
 		})
 	}) });
 }
@@ -382,7 +433,7 @@ function toRows(filtered, statusGroups) {
 		rowOfItem
 	};
 }
-function VirtualList({ ref, statusGroups, query, renderItem }) {
+function VirtualList({ ref, statusGroups, query, tall, renderItem }) {
 	const filtered = Combobox.useFilteredItems();
 	const match = useQueryMatch();
 	const { rows, rowOfItem } = useMemo(() => {
@@ -420,7 +471,7 @@ function VirtualList({ ref, statusGroups, query, renderItem }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "presentation",
 		ref: scrollerRef,
-		className: "max-h-[min(15rem,var(--available-height))] overflow-auto overscroll-contain",
+		className: cx("overflow-auto overscroll-contain px-1", tall ? "max-h-full" : "max-h-[min(15rem,var(--available-height))]"),
 		style: { height: total },
 		children: /* @__PURE__ */ jsx("div", {
 			role: "presentation",
@@ -441,7 +492,7 @@ function VirtualList({ ref, statusGroups, query, renderItem }) {
 					"data-index": virtual.index,
 					ref: virtualizer.measureElement,
 					style,
-					className: "flex items-center gap-1.5 px-3 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
+					className: "flex items-center gap-1.5 px-2 pt-2 pb-1 text-xs text-(--theme-muted-text-color)",
 					children: /* @__PURE__ */ jsx(GroupHeading, { group: row.group })
 				}, virtual.key);
 				return renderItem(row.entry, {