@parallelworks/ui 0.54.0 → 0.56.0

package/dist/access/strings.js

@@ -4,86 +4,118 @@ import { useMemo } from "react";
 //#region src/access/strings.tsx
 var plural = new Intl.PluralRules("en");
 var list = new Intl.ListFormat("en", { type: "conjunction" });
+/** Counts side by side, as a label lists them: "Everyone, 3 people, 7 groups". */
+var units = new Intl.ListFormat("en", {
+	type: "unit",
+	style: "short"
+});
 /** 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 who = (people, groups, everyone = false) => [
+	everyone && "Everyone",
+	people > 0 && countOf(people, "person", "people"),
+	groups > 0 && countOf(groups, "group", "groups")
+].filter((part) => typeof part === "string");
 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")}`,
+	/** Under the title: the resource, and who has a role on it. */
+	summary: (resource, people, groups, everyone) => {
+		const parts = who(people, groups, everyone);
+		return `${resource} · ${parts.length === 0 ? "No access granted" : units.format(parts)}`;
+	},
 	/** 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",
+	byPrincipal: "By person or group",
+	filter: "Filter by role, person 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")}`,
+	privileged: "Privileged",
+	loading: "Loading access",
+	/** Who holds a role: "1 person, 2 groups". */
+	holders: (people, groups) => units.format(who(people, groups)),
+	/** How many of a role's holders a filter left. */
+	holdersShown: (shown, total) => `${shown.toLocaleString()} of ${total.toLocaleString()}`,
 	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". */
+	everyoneJoinLater: "Includes people who join later",
+	owner: "Owner",
+	/** Under the owner section and row. */
+	ownerDescription: "All permissions, can’t be removed",
+	/** Read with the badges a 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",
+	/** Beside someone whose other role gives everything this one does. */
+	coveredBy: (roles) => `Included in ${and(roles)}`,
+	/** Beside the owner, who has every role's permissions anyway. */
+	ownerHasAll: "Included in Owner",
+	/** Beside someone who has this through everyone as well. */
+	everyoneHasThisToo: "Also via Everyone",
+	/** Beside someone who has this through their groups, or an inherited role, as well. */
+	throughToo: (from) => `Also via ${and(from)}`,
+	/** A role someone holds that another of their roles already gives. */
+	redundant: (roles) => `Redundant, included in ${and(roles)}`,
+	redundantOwner: "Redundant, included in Owner",
+	/** A role someone has only because everyone does. */
+	throughEveryone: "Via Everyone",
+	/** A role someone has through one of their groups, or an inherited role. */
+	through: (from) => `Via ${from}`,
+	/** A role granted somewhere else, which can't be removed here. */
+	inheritedFrom: (from) => `Inherited from ${from}`,
+	removeRole: (principal, role) => `Remove ${principal} from ${role}`,
+	grantMoreRoles: "Grant 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.`,
+	removeTitle: (principal, roles) => `Remove ${principal} from ${and(roles)}?`,
+	removeAllTitle: (principal) => `Remove all access for ${principal}?`,
+	/** Heads the list of what is lost; `members` is undefined when a group's size isn't known. */
+	losesIntro: (kind, members) => kind === "everyone" ? "Permissions lost by people without other access" : kind === "group" && members !== void 0 ? `Permissions lost by ${countOf(members, "member", "members")}` : "Permissions lost",
+	/** After the list: what they keep, their own roles and those through their groups, inherited
+	*  roles or everyone. Empty when they keep nothing. */
+	keeps: (own, throughEveryone, through) => {
+		const kept = [
+			...own,
+			...through.flatMap(({ from, roles }) => roles.map((role) => `${role} via ${from}`)),
+			...throughEveryone.map((role) => `${role} via Everyone`)
+		];
+		return kept.length > 0 ? `Still has ${and(kept)}` : "";
+	},
+	/** When the roles they keep give everything the removed ones did. */
+	losesNothing: (roles) => `No permissions lost. Still covered by ${and(roles)}.`,
+	ownerLosesNothing: "No permissions lost. Owners have all permissions.",
 	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)}`,
+	removeFailed: (principal, roles) => `Couldn’t remove ${principal} from ${and(roles)}`,
+	grantFailed: (principals, roles) => `Couldn’t grant ${and(roles)} to ${and(principals)}`,
 	undoFailed: "Couldn’t undo the change",
 	/** Under a failed save; `reason` is the host's error message, when it gave one. */
 	nothingChanged: (reason) => reason ? `${reason.replace(/\.?$/, ".")} Nothing changed.` : "Nothing changed.",
 	/** The toast after a grant. */
-	granted: (groups, roles) => `Gave ${and(groups)} ${and(roles)}.`,
+	granted: (principals, roles) => `Granted ${and(roles)} to ${and(principals)}`,
 	/** The toast after a removal. */
-	removed: (groups, roles) => `Removed ${and(groups)} from ${and(roles)}.`,
-	undone: "Change undone.",
-	readOnly: "You can see who has access.",
+	removed: (principals, roles) => `Removed ${and(principals)} from ${and(roles)}`,
+	undone: "Change undone",
+	readOnly: "View only.",
 	/** 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",
+	readOnlyReason: "Only people who manage access can make changes.",
+	emptyTitle: "No access granted",
+	emptyDescription: (resource) => `Grant a role to a person or group to give them access to ${resource}.`,
+	noMatches: "No matches",
 	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.",
+	back: "Back to access",
+	principalsLabel: "People and groups",
+	addPrincipal: "Add people or groups",
+	/** Under the people and groups field; a count is undefined when the host doesn't give it. */
+	pickerHint: (people, groups, everyone) => `Search ${and([people === void 0 ? "people" : countOf(people, "person", "people"), groups === void 0 ? "groups" : countOf(groups, "group", "groups")])}${everyone ? ", or choose Everyone" : ""}`,
+	everyoneCoversGroups: "Everyone includes all people and groups",
 	organization: "Organization",
 	recent: "Recent",
-	allGroups: "All groups",
-	/** On a group's row in the picker: the roles it holds here. */
+	peopleSection: "People",
+	groupsSection: "Groups",
+	/** On a 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) => [
@@ -91,52 +123,50 @@ var ACCESS_STRINGS = {
 		source === "synced" && "synced",
 		roles.length > 0 ? `has ${and(roles)} here` : "no roles here"
 	].filter(Boolean).join(", "),
+	/** Read with a person's row: what tells them apart, and their roles here. */
+	personSummary: (detail, owner, roles) => [detail, owner ? "owner" : 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.",
+	alreadyHave: (principals) => `Already granted to ${and(principals)}`,
+	alreadyCovered: (roles) => `Included in ${and(roles)}`,
+	everyoneHasIt: "Already granted to Everyone",
 	/** 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.",
+	grantSummary: (principals, roles) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("strong", {
+		className: "font-medium text-(--theme-app)",
+		children: and(roles)
+	}), ` for ${and(principals)}`] }),
+	/** Why Grant can't be pressed: everyone picked has every role picked already. */
+	nothingToGrant: (principals, roles) => `${and(principals)} already ${has(principals)} ${and(roles)}`,
+	pickPrincipalsAndRoles: "Choose people or groups and roles",
+	pickPrincipals: "Choose people or groups",
+	pickRoles: "Choose roles",
 	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}.`,
+	everyoneWarning: (resource) => `Everyone in your organization gets access to ${resource}, including people who join later.`,
 	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",
+	synced: "Synced from identity provider",
 	syncedShort: "Synced",
-	manual: "Members added by hand",
-	wholeOrganization: "Your whole organization",
-	joinLater: "And anyone who joins later gets it automatically.",
+	manual: "Managed manually",
+	wholeOrganization: "Entire organization",
+	joinLater: "Includes people who join later",
+	/** Heads the groups a person is in that hold a role here. */
+	inGroups: "Groups with access",
 	/** 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.`,
+	/** Heads the roles the highlighted one holds on this resource. */
+	currentRoles: "Current roles",
+	noRolesHere: "No roles",
+	/** When a role being granted gives everything one already held does. */
+	becomesRedundant: (granting, held) => `${and(held)} will be redundant, included in ${and(granting)}`,
+	alreadyHas: (roles) => `Already has ${and(roles)}`,
+	everyoneReach: (roles, people) => `Grants ${and(roles)} to ${people === void 0 ? "everyone" : `all ${countOf(people, "person", "people")}`}, including people who join later. Requires confirmation.`,
 	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."
+	detailsFailed: "Couldn’t load group details",
+	loadingDetails: "Loading group details",
+	noHighlight: "Highlight a person or group to see details"
 };
 /** The access drawer's strings: the host's translations over the English defaults. */
 function useAccessStrings() {

package/dist/access/types.d.ts

@@ -1,5 +1,6 @@
 import type { TimeValue } from '../format.js';
-/** A named set of permissions. Groups are granted roles, never permissions one by one. */
+/** A named set of permissions. People and groups are granted roles, never permissions one by
+ *  one. */
 export interface AccessRole {
     id: string;
     name: string;
@@ -8,31 +9,48 @@ export interface AccessRole {
     /** 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;
+    /** Marks a role with administrative or root-level control. The role picker labels it, and
+     *  granting it to everyone confirms with a destructive button. */
+    privileged?: boolean | undefined;
+    /** False for a role held here only through somewhere else, such as an organization's
+     *  administrator role: it shows where someone holds it, and isn't offered to grant. */
+    grantable?: boolean | undefined;
 }
-/** A permission's name in words, for what a group loses when a role is taken away. */
+/** A permission's name in words, for what someone 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 {
+/** Who a role can be granted to: a person, a group, or everyone. */
+export interface AccessPrincipal {
     id: string;
     name: string;
-    /** How many people are in it; for everyone, the organization's size. */
+    /** `everyone` is the whole organization, people who join later included. At most one
+     *  principal is; leave it out where a resource can't be granted to everyone. */
+    kind: 'user' | 'group' | 'everyone';
+    /** For a group, 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;
+    /** For a person, their picture. Until it loads, their initials show. */
+    avatarUrl?: string | undefined;
+    /** For a person, what tells them apart from someone with the same name: an email address. */
+    detail?: string | undefined;
+    /** For a person, the groups they are in. Only groups holding a role here matter, so a host
+     *  may pass just those; with them, taking a role from the person says what they keep through
+     *  their groups. */
+    groupIds?: readonly string[] | undefined;
 }
-/** A role held by a group. */
+/** A role held by a person or group. */
 export interface AccessGrant {
-    groupId: string;
+    principalId: string;
     roleId: string;
 }
+/** A role held through something the resource is part of, such as its organization. It shows,
+ *  and counts toward what someone keeps, but changes only where it was granted. */
+export interface AccessInheritedGrant extends AccessGrant {
+    /** Where it was granted, as a phrase that follows "through": "the organization". */
+    from: string;
+}
 /** What one change grants and takes away; neither list holds a grant that changes nothing. */
 export interface AccessChange {
     grant: AccessGrant[];
@@ -43,7 +61,7 @@ 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. */
+/** More about a group than the list needs, loaded when it is highlighted in the picker. */
 export interface AccessGroupDetails {
     description?: string | undefined;
     /** `synced` comes from an identity provider; `manual` is kept by hand. */

package/dist/ai/adapter/mock/mockAdapter.js

@@ -1,7 +1,7 @@
 import { createMemoryConversationStore } from "../memoryStore.js";
 //#region src/ai/adapter/mock/mockAdapter.ts
 var CANNED_REPLIES = [
-	"Here's a canned reply from the mock adapter. It streams word by word so the typewriter animation, cancel behavior, and background streams all exercise the same code paths as a real backend.\n\n- No network requests are made\n- Conversations persist in localStorage\n- Try cancelling mid-stream: the partial reply is kept",
+	"Here's a canned reply from the mock adapter. It streams word by word so the typewriter animation, cancel behavior, and background streams all exercise the same code paths as a real backend.\n\n- No network requests are made\n- Conversations persist in localStorage\n- Try canceling mid-stream: the partial reply is kept",
 	"Everything you see is generated locally. The mock adapter implements the same `ChatAdapter` interface as the OpenAI-compatible adapter and any backend's own, so the UI can't tell the difference.\n\n```ts\nconst adapter = createMockChatAdapter()\n```\n\nMarkdown, `inline code`, and code blocks render through the same pipeline.",
 	"Branching works too: edit one of your earlier messages or hit regenerate on a reply, then use the arrows to flip between branches."
 ];

package/dist/ai/core/useSSEStream.d.ts

@@ -26,7 +26,7 @@ interface UseSSEStreamResult {
     streamingConversationIdRef: React.MutableRefObject<string | null>;
     /** Per-conversation background stream storage */
     backgroundStreamsRef: React.MutableRefObject<Map<string, BackgroundStream>>;
-    /** AbortController ref for cancelling fetch requests */
+    /** AbortController ref for canceling fetch requests */
     abortControllerRef: React.MutableRefObject<AbortController | null>;
 }
 export declare function useSSEStream(dispatch: React.Dispatch<ChatAction>): UseSSEStreamResult;

package/dist/components/Checkbox.js

@@ -11,7 +11,7 @@ import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		...props,
-		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-accent) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-accent) data-indeterminate:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		className: cx("flex size-4 shrink-0 items-center justify-center rounded border border-(--theme-border-strong) bg-(--theme-input-bg) text-(--theme-accent-text) cursor-pointer transition-colors motion-reduce:transition-none", focusOutline, "data-checked:border-(--theme-focus) data-checked:bg-(--theme-accent)", "data-indeterminate:border-(--theme-focus) data-indeterminate:bg-(--theme-accent)", "aria-invalid:border-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: "flex",
 			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {

package/dist/components/Combobox.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { AddIcon, CheckIcon, ChevronDownIcon, RemoveIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { Loader } from "./Loader.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
@@ -361,6 +362,7 @@ 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)", loading, details, collisionBoundary, renderItem }) {
+	const fullscreen = useFullscreenContainer();
 	const withDetails = details !== void 0;
 	const list = /* @__PURE__ */ jsxs(Fragment, { children: [
 		loading && /* @__PURE__ */ jsxs("div", {
@@ -387,27 +389,30 @@ function ListPopup({ listRef, empty, statusGroups = [], query = "", header, clas
 			})
 		})
 	] });
-	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", withDetails && "@container/picker flex h-[min(40rem,var(--available-height))] flex-col", className, panelClassName),
-			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]
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		container: fullscreen,
+		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			align: "start",
+			sideOffset: 4,
+			className: positionerClassName,
+			...collisionBoundary && { collisionBoundary },
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				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]
+			})
 		})
-	}) });
+	});
 }
 function toRows(filtered, statusGroups) {
 	const nodes = statusGroups.length ? [...filtered, ...statusGroups].sort((a, b) => ("order" in a ? a.order : 0) - ("order" in b ? b.order : 0)) : filtered;

package/dist/components/DatePicker.js

@@ -2,9 +2,10 @@ import { cx } from "../cx.js";
 import { buttonClasses } from "./buttonClasses.js";
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { panelClassName, positionerClassName } from "./floating.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { useStrings } from "./Provider.js";
 import { fieldBox } from "./fieldBox.js";
-import { useFieldControl, useFieldLabelId } from "./Field.js";
+import { useFieldLabelledControl } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Popover } from "@base-ui/react/popover";
@@ -74,10 +75,10 @@ var triggerClassName = (size) => cx(fieldBox({ size }), "flex flex-1 cursor-poin
 * and the shown date follow the reader's locale.
 */
 function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, size = "md", className }) {
+	const fullscreen = useFullscreenContainer();
 	const t = useStrings().datePicker;
 	const { common } = useStrings();
-	const field = useFieldControl();
-	const fieldLabelId = useFieldLabelId();
+	const field = useFieldLabelledControl();
 	const [open, setOpen] = useState(false);
 	const [weekStartsOn] = useState(firstWeekday);
 	const day = parseDay(value);
@@ -104,10 +105,10 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 			open,
 			onOpenChange: setOpen,
 			children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
-				id,
+				id: id ?? field?.id,
 				disabled,
 				"aria-label": ariaLabel,
-				"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : fieldLabelId),
+				"aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : field?.["aria-labelledby"]),
 				"aria-describedby": ariaDescribedBy ?? field?.["aria-describedby"],
 				"aria-invalid": ariaInvalid || field?.["aria-invalid"],
 				"aria-required": ariaRequired || field?.["aria-required"],
@@ -119,61 +120,64 @@ function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep
 					className: cx("truncate", !day && "text-(--theme-placeholder)"),
 					children: day ? shownDay.format(day) : placeholder ?? t.pickDate
 				})]
-			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
-				align: "start",
-				sideOffset: 4,
-				className: positionerClassName,
-				children: /* @__PURE__ */ jsxs(Popover.Popup, {
-					className: panelClassName,
-					children: [/* @__PURE__ */ jsx(DayPicker, {
-						...required ? {
-							mode: "single",
-							required: true,
-							selected: day,
-							onSelect: pick
-						} : {
-							mode: "single",
-							selected: day,
-							onSelect: pick
-						},
-						...opensOn && { defaultMonth: opensOn },
-						...earliest && { startMonth: earliest },
-						...latest && { endMonth: latest },
-						disabled: outOfRange,
-						weekStartsOn,
-						autoFocus: true,
-						showOutsideDays: true,
-						fixedWeeks: true,
-						classNames: calendarClassNames,
-						formatters: {
-							formatCaption: (month) => caption.format(month),
-							formatWeekdayName: (date) => weekday.format(date)
-						},
-						labels: {
-							labelDayButton: (date) => longDay.format(date),
-							labelPrevious: () => t.previousMonth,
-							labelNext: () => t.nextMonth,
-							labelGrid: (month) => caption.format(month),
-							labelWeekday: (date) => longWeekday.format(date)
-						},
-						components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
-					}), !required && day && /* @__PURE__ */ jsx("div", {
-						className: "flex justify-end border-t border-(--theme-border) px-3 py-2",
-						children: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: buttonClasses({
-								variant: "ghost",
-								size: "xs"
-							}),
-							onClick: () => {
-								emit(void 0);
-								setOpen(false);
+			}), /* @__PURE__ */ jsx(Popover.Portal, {
+				container: fullscreen,
+				children: /* @__PURE__ */ jsx(Popover.Positioner, {
+					align: "start",
+					sideOffset: 4,
+					className: positionerClassName,
+					children: /* @__PURE__ */ jsxs(Popover.Popup, {
+						className: panelClassName,
+						children: [/* @__PURE__ */ jsx(DayPicker, {
+							...required ? {
+								mode: "single",
+								required: true,
+								selected: day,
+								onSelect: pick
+							} : {
+								mode: "single",
+								selected: day,
+								onSelect: pick
 							},
-							children: common.clear
-						})
-					})]
+							...opensOn && { defaultMonth: opensOn },
+							...earliest && { startMonth: earliest },
+							...latest && { endMonth: latest },
+							disabled: outOfRange,
+							weekStartsOn,
+							autoFocus: true,
+							showOutsideDays: true,
+							fixedWeeks: true,
+							classNames: calendarClassNames,
+							formatters: {
+								formatCaption: (month) => caption.format(month),
+								formatWeekdayName: (date) => weekday.format(date)
+							},
+							labels: {
+								labelDayButton: (date) => longDay.format(date),
+								labelPrevious: () => t.previousMonth,
+								labelNext: () => t.nextMonth,
+								labelGrid: (month) => caption.format(month),
+								labelWeekday: (date) => longWeekday.format(date)
+							},
+							components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
+						}), !required && day && /* @__PURE__ */ jsx("div", {
+							className: "flex justify-end border-t border-(--theme-border) px-3 py-2",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: buttonClasses({
+									variant: "ghost",
+									size: "xs"
+								}),
+								onClick: () => {
+									emit(void 0);
+									setOpen(false);
+								},
+								children: common.clear
+							})
+						})]
+					})
 				})
-			}) })]
+			})]
 		}), withTime && /* @__PURE__ */ jsx("input", {
 			type: "time",
 			"aria-label": t.time,

package/dist/components/Drawer.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { ArrowLeftIcon, CloseIcon } from "../icons.js";
+import { useFullscreenContainer } from "./fullscreen.js";
 import { useStrings } from "./Provider.js";
 import { IconButton } from "./IconButton.js";
 import { closeHandler } from "./dismiss.js";
@@ -16,6 +17,7 @@ import { Drawer } from "@base-ui/react/drawer";
 *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
 *  on the document root. */
 function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
+	const fullscreen = useFullscreenContainer();
 	const { common } = useStrings();
 	const container = useRef(null);
 	const viewport = useRef(null);
@@ -42,7 +44,7 @@ function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer
 			ref: container,
 			className: "contents"
 		}), /* @__PURE__ */ jsxs(Drawer.Portal, {
-			...contained ? { container } : {},
+			container: contained ? container : fullscreen,
 			keepMounted,
 			className: contained ? "contents" : void 0,
 			children: [modal !== false && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: cx(area, "z-(--layer-drawer) bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none") }), /* @__PURE__ */ jsx(Drawer.Viewport, {