@protobase/ui 0.62.4 → 0.63.0

package/dist/account/account-page.js

@@ -18,11 +18,13 @@ const useAccountPage = () => {
 	const auth = useAuth();
 	const { mcp, accountDeletion } = auth;
 	const linkable = linkableProviders(auth).length > 0;
+	const mailboxes = auth.personalMail.length > 0;
 	return useMemo(() => {
 		if (!account) return void 0;
 		const hidden = /* @__PURE__ */ new Set([
 			...mcp ? [] : ["ConnectedApps"],
 			...linkable ? [] : ["ConnectedAccounts"],
+			...mailboxes ? [] : ["PersonalMail"],
 			...accountDeletion ? [] : ["DeleteAccount"]
 		]);
 		return {
@@ -33,6 +35,7 @@ const useAccountPage = () => {
 		account,
 		mcp,
 		linkable,
+		mailboxes,
 		accountDeletion
 	]);
 };

package/dist/account/blocks/connected-accounts-block.js

@@ -34,4 +34,4 @@ const ConnectedAccountsBlock = () => {
 	return linkable.length > 0 ? /* @__PURE__ */ jsx(Linked, { providers: linkable }) : null;
 };
 //#endregion
-export { ConnectedAccountsBlock, linkableProviders };
+export { ConnectedAccountsBlock, linkableProviders, takeLinkError };

package/dist/account/blocks/personal-mail-block.js

@@ -0,0 +1,36 @@
+import { text } from "../messages.js";
+import { useAuth } from "../../auth/auth-provider.js";
+import { providerMessage } from "../../auth/auth-messages.js";
+import { SignInProvidersSection } from "../sign-in-providers-section.js";
+import { AccountLoading } from "./account-loading.js";
+import { useAccountData } from "./use-account-data.js";
+import { takeLinkError } from "./connected-accounts-block.js";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/account/blocks/personal-mail-block.tsx
+const Mailboxes = ({ links }) => {
+	const { session, linkPersonalMail } = useAuth();
+	const { account } = session;
+	const [linkError] = useState(takeLinkError);
+	const { data: linked, error } = useAccountData(useCallback(() => account.linkedPersonalMail(links), [account, links]), text("couldNotReadMethods"));
+	if (!linked) return /* @__PURE__ */ jsx(AccountLoading, { error });
+	const connect = (id) => linkPersonalMail(links.find((link) => link.id === id));
+	return /* @__PURE__ */ jsx(SignInProvidersSection, {
+		title: text("mailbox"),
+		description: text("mailboxDescription"),
+		providers: links.map(({ id, name }) => ({
+			id,
+			name
+		})),
+		linked,
+		onConnect: connect,
+		error: linkError && providerMessage(linkError, links.length === 1 ? links[0].name : text("theProvider"))
+	});
+};
+/** The `PersonalMail` block: the mailboxes the signed-in person can link for the app to send mail from, hidden when the app has none. */
+const PersonalMailBlock = () => {
+	const { personalMail } = useAuth();
+	return personalMail.length > 0 ? /* @__PURE__ */ jsx(Mailboxes, { links: personalMail }) : null;
+};
+//#endregion
+export { PersonalMailBlock };

package/dist/account/messages.js

@@ -71,6 +71,8 @@ const text = defineMessages({
 		connectedAccountsDescription: "Sign in with these instead of your password. Connecting one asks you to sign in there; its address may differ from yours here.",
 		connected: "Connected",
 		connect: (name) => `Connect ${name}`,
+		mailbox: "Mailbox",
+		mailboxDescription: "Mail this app sends for you goes out from your own mailbox. Connecting one asks you to sign in there and allow sending mail; it cannot read your mail.",
 		stopped: (time) => `Stopped ${time}`,
 		ended: (time) => `Ended ${time}`,
 		signedInUntil: (time) => `Signed in until ${time}`,
@@ -234,6 +236,8 @@ const text = defineMessages({
 		connectedAccountsDescription: "Log hiermee in in plaats van met je wachtwoord. Koppelen vraagt je daar in te loggen; het adres daar kan anders zijn dan hier.",
 		connected: "Gekoppeld",
 		connect: (name) => `${name} koppelen`,
+		mailbox: "Mailbox",
+		mailboxDescription: "Mail die deze app voor je verstuurt, gaat uit vanuit je eigen mailbox. Koppelen vraagt je daar in te loggen en het versturen van mail toe te staan; je mail lezen kan de app niet.",
 		stopped: (time) => `Gestopt ${time}`,
 		ended: (time) => `Afgelopen ${time}`,
 		signedInUntil: (time) => `Ingelogd tot ${time}`,

package/dist/account/sign-in-providers-section.js

@@ -9,7 +9,7 @@ import { AuthError } from "@protobase/client";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/account/sign-in-providers-section.tsx
 /** The providers someone can sign in with besides a password, and a way to connect one whatever address it has. */
-const SignInProvidersSection = ({ providers, linked, onConnect, error: returned }) => {
+const SignInProvidersSection = ({ providers, linked, onConnect, error: returned, title = text("connectedAccounts"), description = text("connectedAccountsDescription") }) => {
 	const [busy, setBusy] = useState();
 	const [error, setError] = useState(returned);
 	const connect = async (provider) => {
@@ -24,8 +24,8 @@ const SignInProvidersSection = ({ providers, linked, onConnect, error: returned
 		}
 	};
 	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: text("connectedAccounts"),
-		description: text("connectedAccountsDescription"),
+		title,
+		description,
 		children: [/* @__PURE__ */ jsx(SectionError, { message: error }), /* @__PURE__ */ jsx("ul", {
 			className: "divide-y rounded-md border",
 			children: providers.map((provider) => /* @__PURE__ */ jsxs("li", {

package/dist/app/app.d.ts

@@ -35,7 +35,7 @@ export type AppProps = {
   nativeBridge?: NativeBridge;
 };
 /**
- * The admin: a public form at `/-/forms/<name>` for anyone, the sign-in route first, `/-/sign-in`, or browsing as a
+ * The admin: a public form at `/-/forms/<name>` for anyone, a guest link's call at `/-/call-guest` for its guest, the sign-in route first, `/-/sign-in`, or browsing as a
  * visitor when the project's anonymous role reads, then a sidebar from `/meta`, `/:page` composed pages, `/:resource`
  * lists and `/:resource/:key` records. Fills its parent, in the theme this browser chose, light, dark or the system's.
  */

package/dist/app/app.js

@@ -32,6 +32,8 @@ import { useLiveUpdates } from "../data/use-live-updates.js";
 import { useOpenedRecord } from "../data/use-record.js";
 import { PublicFormPage } from "../forms/public-form-page.js";
 import { useFormAddress } from "../forms/use-form-address.js";
+import { useGuestCallAddress } from "../calls/guest-call-link.js";
+import { GuestCallPage } from "../calls/guest-call-page.js";
 import { ThemeProvider, useTheme } from "../theme/theme-provider.js";
 import { AssistantButton, AssistantPanel } from "./assistant-shell.js";
 import { bottomBarFromMeta } from "./bottom-bar-from-meta.js";
@@ -332,8 +334,20 @@ const PublicFormGate = ({ baseUrl, client, ui, children }) => {
 		})
 	});
 };
+const GuestCallGate = ({ baseUrl, children }) => {
+	const address = useGuestCallAddress();
+	const { basePath } = useRouter();
+	if (!address) return children;
+	const api = new URL(baseUrl ?? "/api/v1", window.location.href);
+	const systemPath = `${api.origin}${api.pathname.slice(0, api.pathname.lastIndexOf("/"))}`;
+	return /* @__PURE__ */ jsx(GuestCallPage, {
+		link: address.token,
+		systemPath,
+		base: `${window.location.origin}${basePath}`
+	});
+};
 /**
-* The admin: a public form at `/-/forms/<name>` for anyone, the sign-in route first, `/-/sign-in`, or browsing as a
+* The admin: a public form at `/-/forms/<name>` for anyone, a guest link's call at `/-/call-guest` for its guest, the sign-in route first, `/-/sign-in`, or browsing as a
 * visitor when the project's anonymous role reads, then a sidebar from `/meta`, `/:page` composed pages, `/:resource`
 * lists and `/:resource/:key` records. Fills its parent, in the theme this browser chose, light, dark or the system's.
 */
@@ -356,11 +370,14 @@ const App = ({ auth, workspace, basePath, initialUrl, pluginLoader, locale, nati
 						baseUrl: rest.baseUrl,
 						client: rest.client,
 						ui: rest.ui,
-						children: /* @__PURE__ */ jsx(AuthGate, {
-							workspace,
-							children: /* @__PURE__ */ jsx(Authenticated, {
+						children: /* @__PURE__ */ jsx(GuestCallGate, {
+							...rest.baseUrl && { baseUrl: rest.baseUrl },
+							children: /* @__PURE__ */ jsx(AuthGate, {
 								workspace,
-								...rest
+								children: /* @__PURE__ */ jsx(Authenticated, {
+									workspace,
+									...rest
+								})
 							})
 						})
 					}) })

package/dist/app/pages/render-node.js

@@ -23,6 +23,7 @@ import { TableBlock } from "./blocks/table.js";
 import { TabBlock, TabsBlock } from "./blocks/tabs.js";
 import { UsersBlock } from "../../users/users-block.js";
 import { ConnectedAccountsBlock } from "../../account/blocks/connected-accounts-block.js";
+import { PersonalMailBlock } from "../../account/blocks/personal-mail-block.js";
 import { ConnectedAppsBlock } from "../../account/blocks/connected-apps-block.js";
 import { DeleteAccountBlock } from "../../account/blocks/delete-account-block.js";
 import { DevicesBlock } from "../../account/blocks/devices-block.js";
@@ -61,6 +62,7 @@ const blocks = {
 	Passkeys: PasskeysBlock,
 	TwoFactor: TwoFactorBlock,
 	ConnectedAccounts: ConnectedAccountsBlock,
+	PersonalMail: PersonalMailBlock,
 	Devices: DevicesBlock,
 	ConnectedApps: ConnectedAppsBlock,
 	DeleteAccount: DeleteAccountBlock

package/dist/auth/auth-provider.js

@@ -31,6 +31,7 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 	const [passkeyDomains, setPasskeyDomains] = useState([]);
 	const [socialProviders, setSocialProviders] = useState([]);
 	const [platformSignIn, setPlatformSignIn] = useState();
+	const [personalMail, setPersonalMail] = useState([]);
 	const [samlProviders, setSamlProviders] = useState([]);
 	const [staffSignIn, setStaffSignIn] = useState();
 	const [organizations, setOrganizations] = useState();
@@ -117,6 +118,7 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 			setPasskeyDomains(status.passkeyDomains ?? []);
 			setSocialProviders(status.socialProviders);
 			setPlatformSignIn(status.platformSignIn);
+			setPersonalMail(status.personalMail ?? []);
 			setSamlProviders(status.samlProviders);
 			setStaffSignIn(status.staffSignIn);
 			setOrganizations(status.organizations);
@@ -183,6 +185,10 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 		linkProvider: async (provider) => {
 			window.location.assign(await session.account.linkProvider(provider, new URL(withoutSignInLink(window.location.href), window.location.href).href));
 		},
+		personalMail,
+		linkPersonalMail: async (link) => {
+			window.location.assign(await session.account.linkPersonalMail(link, new URL(withoutSignInLink(window.location.href), window.location.href).href));
+		},
 		stopStaffSession: async () => {
 			await push.forget();
 			await session.staff.stop();
@@ -213,6 +219,7 @@ const AuthProvider = ({ session: given, origin, nativeBridge, children }) => {
 		passkeyDomains,
 		socialProviders,
 		platformSignIn,
+		personalMail,
 		samlProviders,
 		staffSignIn,
 		organizations,

package/dist/calls/call-check.js

@@ -13,7 +13,7 @@ const toggle = (on) => cn("size-10 rounded-full", !on && "bg-danger-soft text-da
 * The check of the microphone and camera before joining: the member's own camera as the others will see it, or their
 * initials, microphone and camera on and off, plain messages for a blocked or missing device, and Join.
 */
-const CallCheck = ({ name, member, camera, microphoneOn, cameraOn, microphone, cameraAvailable, notices, onMicrophone, onCamera, onJoin, cancel }) => /* @__PURE__ */ jsxs("section", {
+const CallCheck = ({ name, member, camera, microphoneOn, cameraOn, microphone, cameraAvailable, notices, onMicrophone, onCamera, onJoin, cancel, joinLabel = text("joinCall") }) => /* @__PURE__ */ jsxs("section", {
 	"aria-label": text("preview"),
 	className: "flex size-full min-h-0 flex-col items-center justify-center gap-3 bg-background p-4",
 	children: [
@@ -63,7 +63,7 @@ const CallCheck = ({ name, member, camera, microphoneOn, cameraOn, microphone, c
 					variant: "primary",
 					className: "h-10 rounded-full px-5",
 					onClick: onJoin,
-					children: text("joinCall")
+					children: joinLabel
 				}),
 				/* @__PURE__ */ jsx(RouteLink, {
 					to: cancel,

package/dist/calls/call-controls.js

@@ -1,16 +1,17 @@
 import { cn } from "../lib/cn.js";
 import { Button, buttonClass } from "../primitives/button.js";
 import { RouteLink } from "../primitives/route-link.js";
+import { CountBadge } from "../primitives/count-badge.js";
 import { text } from "./messages.js";
-import { Mic, MicOff, MonitorUp, MonitorX, PhoneOff, Video, VideoOff } from "lucide-react";
+import { Mic, MicOff, MonitorUp, MonitorX, PhoneOff, UserPlus, Video, VideoOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/calls/call-controls.tsx
 const toggle = (on) => cn("size-10 rounded-full", !on && "bg-danger-soft text-danger-text");
-/** The member's controls: microphone, camera and screen share on and off, and Leave, a link out of the call. */
-const CallControls = ({ microphoneOn, cameraOn, sharing, onMicrophone, onCamera, onShare, leave }) => /* @__PURE__ */ jsxs("div", {
+/** The member's controls: microphone, camera and screen share on and off, the guests, and Leave, a link out of the call. */
+const CallControls = ({ microphoneOn, cameraOn, sharing, onMicrophone, onCamera, onShare, guests, leave }) => /* @__PURE__ */ jsxs("div", {
 	role: "toolbar",
 	"aria-label": text("joinCall"),
-	className: "flex shrink-0 items-center justify-center gap-2 py-2",
+	className: "flex shrink-0 flex-wrap items-center justify-center gap-2 py-2",
 	children: [
 		/* @__PURE__ */ jsx(Button, {
 			size: "icon",
@@ -39,6 +40,17 @@ const CallControls = ({ microphoneOn, cameraOn, sharing, onMicrophone, onCamera,
 			onClick: onShare,
 			children: sharing ? /* @__PURE__ */ jsx(MonitorX, { className: "size-4" }) : /* @__PURE__ */ jsx(MonitorUp, { className: "size-4" })
 		}),
+		guests && /* @__PURE__ */ jsxs(Button, {
+			size: "icon",
+			"aria-label": text("guests"),
+			title: text("guests"),
+			className: "relative size-10 rounded-full",
+			onClick: guests.onOpen,
+			children: [/* @__PURE__ */ jsx(UserPlus, { className: "size-4" }), /* @__PURE__ */ jsx(CountBadge, {
+				count: guests.waiting,
+				className: "absolute -top-1 -right-1"
+			})]
+		}),
 		/* @__PURE__ */ jsxs(RouteLink, {
 			to: leave,
 			className: cn(buttonClass({ variant: "danger" }), "h-10 rounded-full px-4"),

package/dist/calls/call-guests-panel.js

@@ -0,0 +1,200 @@
+import { Button } from "../primitives/button.js";
+import { ResponsiveDialog } from "../primitives/responsive-dialog.js";
+import { Input } from "../primitives/input.js";
+import { Segmented } from "../primitives/segmented.js";
+import { text } from "./messages.js";
+import { useGuestRequest } from "./use-guest-request.js";
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-guests-panel.tsx
+const sends = {
+	all: [
+		"camera",
+		"microphone",
+		"screen",
+		"screen-audio"
+	],
+	camera: ["camera", "microphone"],
+	microphone: ["microphone"]
+};
+const lasting = {
+	call: void 0,
+	hour: 36e5
+};
+const Row = ({ name, children }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex items-center justify-between gap-2 py-1.5",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate text-sm text-foreground",
+		children: name
+	}), /* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 gap-1.5",
+		children
+	})]
+});
+/**
+* A member's guests of the call: who waits in the lobby, to let in or turn away; the guests in the call, to remove; and
+* the guest links, to make, copy and revoke, with what their guests may send. Names show as the guests wrote them.
+*/
+const CallGuestsPanel = ({ lobby, inCall, guests, linkOf, open, onClose }) => {
+	const [send, setSend] = useState("camera");
+	const [lasts, setLasts] = useState("call");
+	const [made, setMade] = useState();
+	const [copied, setCopied] = useState(false);
+	const { run, refused } = useGuestRequest();
+	const create = () => run(async () => {
+		const ms = lasting[lasts];
+		const { link, token } = await guests.link({
+			publish: sends[send],
+			...ms !== void 0 && { expiresAt: new Date(Date.now() + ms) }
+		});
+		setMade({
+			id: link.id,
+			url: linkOf(token)
+		});
+	});
+	const copy = (url) => void navigator.clipboard.writeText(url).then(() => {
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2e3);
+	});
+	return /* @__PURE__ */ jsx(ResponsiveDialog, {
+		title: text("guests"),
+		description: text("addressesVisible"),
+		open,
+		onClose,
+		actions: /* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: text("close")
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [
+				refused && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "rounded-md bg-warning-soft px-3 py-1.5 text-xs text-foreground",
+					children: text("guestRefused")
+				}),
+				lobby.guests.length > 0 && /* @__PURE__ */ jsxs("section", {
+					"aria-label": text("inLobby"),
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-xs font-medium text-muted-foreground",
+						children: text("inLobby")
+					}), /* @__PURE__ */ jsx("ul", { children: lobby.guests.map(({ guest, name }) => /* @__PURE__ */ jsxs(Row, {
+						name,
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "primary",
+							onClick: () => run(() => guests.admit(guest)),
+							children: text("admit")
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							onClick: () => run(() => guests.deny(guest)),
+							children: text("deny")
+						})]
+					}, guest)) })]
+				}),
+				inCall.length > 0 && /* @__PURE__ */ jsxs("section", {
+					"aria-label": text("guestsInCall"),
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-xs font-medium text-muted-foreground",
+						children: text("guestsInCall")
+					}), /* @__PURE__ */ jsx("ul", { children: inCall.map(({ guest, name }) => /* @__PURE__ */ jsx(Row, {
+						name,
+						children: /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "danger",
+							onClick: () => run(() => guests.remove(guest)),
+							children: text("remove")
+						})
+					}, guest)) })]
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					"aria-label": text("guestLinks"),
+					className: "flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-xs font-medium text-muted-foreground",
+							children: text("guestLinks")
+						}),
+						lobby.links.length === 0 && /* @__PURE__ */ jsx("p", {
+							className: "text-sm text-muted-foreground",
+							children: text("noLinks")
+						}),
+						/* @__PURE__ */ jsx("ul", { children: lobby.links.map((link) => /* @__PURE__ */ jsxs("li", {
+							className: "flex flex-col gap-1.5 py-1.5",
+							children: [made?.id === link.id && /* @__PURE__ */ jsx(Input, {
+								readOnly: true,
+								value: made.url,
+								"aria-label": text("copyLink"),
+								onFocus: (event) => event.currentTarget.select(),
+								trailing: /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": copied ? text("copied") : text("copyLink"),
+									onClick: () => copy(made.url),
+									className: "inline-flex size-8 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted pointer-coarse:size-11",
+									children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
+								})
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center justify-between gap-2 text-xs text-muted-foreground",
+								children: [link.expires_at ? text("linkUntil", new Date(link.expires_at).toLocaleString()) : text("linkUntilEnd"), /* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									onClick: () => run(() => guests.revoke(link.id)),
+									children: text("revoke")
+								})]
+							})]
+						}, link.id)) }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-start gap-2",
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+									children: [text("guestsMaySend"), /* @__PURE__ */ jsx(Segmented, {
+										label: text("guestsMaySend"),
+										value: send,
+										onChange: setSend,
+										options: [
+											{
+												value: "all",
+												label: text("sendAll")
+											},
+											{
+												value: "camera",
+												label: text("sendCamera")
+											},
+											{
+												value: "microphone",
+												label: text("sendMicrophone")
+											}
+										]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+									children: [text("linkLasts"), /* @__PURE__ */ jsx(Segmented, {
+										label: text("linkLasts"),
+										value: lasts,
+										onChange: setLasts,
+										options: [{
+											value: "call",
+											label: text("linkUntilEnd")
+										}, {
+											value: "hour",
+											label: text("forAnHour")
+										}]
+									})]
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									variant: "primary",
+									onClick: create,
+									children: text("newLink")
+								})
+							]
+						})
+					]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { CallGuestsPanel };

package/dist/calls/call-lobby-notice.js

@@ -0,0 +1,34 @@
+import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
+import { useGuestRequest } from "./use-guest-request.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-lobby-notice.tsx
+/** Who waits first in the lobby, with Let in and Turn away, so a member sees it without opening the guests. */
+const CallLobbyNotice = ({ waiting, guests }) => {
+	const { run, refused } = useGuestRequest();
+	const first = waiting[0];
+	if (!first) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: "flex shrink-0 flex-wrap items-center gap-2 rounded-md bg-primary-soft px-3 py-1.5 text-xs text-foreground",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: refused ? text("guestRefused") : text("waitingGuest", first.name)
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "primary",
+				onClick: () => run(() => guests.admit(first.guest)),
+				children: text("admit")
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: () => run(() => guests.deny(first.guest)),
+				children: text("deny")
+			})
+		]
+	});
+};
+//#endregion
+export { CallLobbyNotice };

package/dist/calls/call-message.js

@@ -7,16 +7,17 @@ const said = {
 	removed: "removed",
 	full: "full",
 	refused: "refused",
-	unavailable: "unavailable"
+	unavailable: "unavailable",
+	denied: "denied"
 };
-/** Why the member is not in the call, in plain words, and, unless they were removed, a way to join again. */
+/** Why the member is not in the call, in plain words, and, unless they were removed or refused, a way to join again. */
 const CallMessage = ({ reason, onJoinAgain }) => /* @__PURE__ */ jsxs("section", {
 	role: "status",
 	className: "flex size-full min-h-0 flex-col items-center justify-center gap-3 bg-background p-4 text-center",
 	children: [/* @__PURE__ */ jsx("p", {
 		className: "text-sm text-foreground",
 		children: text(reason === "rejoin" ? "ended" : said[reason])
-	}), onJoinAgain && reason !== "removed" && reason !== "refused" && /* @__PURE__ */ jsx(Button, {
+	}), onJoinAgain && reason !== "removed" && reason !== "refused" && reason !== "denied" && /* @__PURE__ */ jsx(Button, {
 		onClick: onJoinAgain,
 		children: text("callAgain")
 	})]

package/dist/calls/call-people.js

@@ -1,3 +1,4 @@
+import { text } from "./messages.js";
 import { cannotConnect, connectionQuality } from "./call-layout.js";
 //#region src/calls/call-people.ts
 const received = (tracks, source) => tracks.find((track) => track.source === source && track.track);
@@ -6,10 +7,10 @@ const callPeople = ({ members, self, tracks, own, nameOf, speaker, connections,
 	return (members.some((member) => member.member === self) ? members : [{
 		member: self,
 		joined_at: ""
-	}, ...members]).map(({ member }) => {
+	}, ...members]).map(({ member, name }) => {
 		const shared = {
 			member,
-			name: nameOf(member),
+			name: member.startsWith("guest:") ? text("guestName", name ?? "") : name ?? nameOf(member),
 			...speaker === member && { speaking: true }
 		};
 		if (member === self) return {

package/dist/calls/call-stage.js

@@ -64,7 +64,7 @@ const Tiles = ({ layout, people, narrow }) => {
 * share large with the people beside it, or under it on a phone; the member alone; then the controls. The others'
 * sound plays unseen.
 */
-const CallStage = ({ people, state, notices = [], controls, className }) => {
+const CallStage = ({ people, state, notices = [], controls, aside, children, className }) => {
 	const { ref, width } = useWidth();
 	const narrow = width > 0 && width < 640;
 	const layout = callLayout({
@@ -87,6 +87,7 @@ const CallStage = ({ people, state, notices = [], controls, className }) => {
 					children: [message === text("reconnecting") && /* @__PURE__ */ jsx(Spinner, { className: "size-3" }), message]
 				}, message))
 			}),
+			aside,
 			/* @__PURE__ */ jsx("div", {
 				className: "min-h-0 flex-1",
 				children: state === "joining" ? /* @__PURE__ */ jsxs("p", {
@@ -103,7 +104,8 @@ const CallStage = ({ people, state, notices = [], controls, className }) => {
 			people.filter((person) => !person.self).flatMap((person) => [["microphone", person.microphone], ["screen-audio", person.screenAudio]].map(([source, track]) => track && {
 				key: `${person.member} ${source}`,
 				track
-			})).filter((audio) => audio !== void 0).map(({ key, track }) => /* @__PURE__ */ jsx(TrackAudio, { track }, key))
+			})).filter((audio) => audio !== void 0).map(({ key, track }) => /* @__PURE__ */ jsx(TrackAudio, { track }, key)),
+			children
 		]
 	});
 };

package/dist/calls/call-view.d.ts

@@ -1,4 +1,5 @@
 import { RouteTarget } from "../primitives/route-link.js";
+import { CallSessionOptions } from "./use-call-session.js";
 //#region src/calls/call-view.d.ts
 export type CallViewProps = {
   /** The socket of the app's function that admits the member, as `joinCall` takes it, such as `/api/functions/call?conversation=7`. */
@@ -7,14 +8,19 @@ export type CallViewProps = {
   leave: RouteTarget;
   /** A member's name, by the member the app's function admits them as, such as a user id; the member itself by default. */
   nameOf?: (member: string) => string;
+  /** For a guest: their wait in the lobby after Join, which resolves with their token; see `GuestCallPage`. */
+  admission?: CallSessionOptions['admission'];
+  /** The member's own name before joining, when no one is signed in, as a guest's. */
+  name?: string;
   className?: string;
 };
 /**
  * A call, ready-made, that fills its parent, such as a column beside a conversation's messages: a check of the
  * microphone and camera first, then, after Join, everyone in the call with the one speaking ringed, a screen share
  * large, microphone, camera, screen share and Leave, the quality of each connection, Reconnecting while the link is
- * restored, and plain words for a full call, a blocked device or someone the browser cannot connect to. Made for small
- * peer-to-peer calls, at a desktop's width or a phone's.
+ * restored, and plain words for a full call, a blocked device or someone the browser cannot connect to. A member the app
+ * lets invite also gets the call's guests: who waits in the lobby, and its guest links. Made for small peer-to-peer
+ * calls, at a desktop's width or a phone's.
  */
-export declare const CallView: ({ url, leave, nameOf, className }: CallViewProps) => import("react").JSX.Element;
+export declare const CallView: ({ url, leave, nameOf, admission, name, className }: CallViewProps) => import("react").JSX.Element;
 //#endregion