@protobase/ui 0.62.5 → 0.63.1

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/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

package/dist/calls/call-view.js

@@ -1,9 +1,14 @@
 import { useOptionalAuth } from "../auth/auth-provider.js";
+import { useRouter } from "../app/router.js";
 import { text } from "./messages.js";
 import { CallCheck } from "./call-check.js";
+import { CallGuestsPanel } from "./call-guests-panel.js";
+import { CallLobbyNotice } from "./call-lobby-notice.js";
 import { CallMessage } from "./call-message.js";
 import { callPeople } from "./call-people.js";
 import { CallStage } from "./call-stage.js";
+import { CallWaiting } from "./call-waiting.js";
+import { guestCallLink } from "./guest-call-link.js";
 import { useActiveSpeaker } from "./use-audio-levels.js";
 import { useCallSession } from "./use-call-session.js";
 import { useState } from "react";
@@ -19,11 +24,14 @@ const deviceNotices = (devices, refusedSending) => [
 * 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.
 */
-const CallView = ({ url, leave, nameOf = (member) => member, className }) => {
-	const session = useCallSession(url);
+const CallView = ({ url, leave, nameOf = (member) => member, admission, name, className }) => {
+	const session = useCallSession(url, { ...admission && { admission } });
+	const [guestsOpen, setGuestsOpen] = useState(false);
+	const { basePath } = useRouter();
 	const auth = useOptionalAuth();
 	const user = auth?.state.kind === "signed-in" ? auth.state.user : void 0;
 	const self = session.self ?? user?.id ?? "";
@@ -43,8 +51,10 @@ const CallView = ({ url, leave, nameOf = (member) => member, className }) => {
 		reason: phase.reason,
 		onJoinAgain: () => void session.join()
 	});
+	if (phase.kind === "waiting") return /* @__PURE__ */ jsx(CallWaiting, { leave });
 	if (phase.kind === "check") return /* @__PURE__ */ jsx(CallCheck, {
-		name: user?.name ?? text("you"),
+		name: name ?? user?.name ?? text("you"),
+		...admission && { joinLabel: text("askToJoin") },
 		member: self,
 		...devices?.camera && { camera: devices.camera },
 		microphoneOn: session.microphoneOn,
@@ -57,6 +67,11 @@ const CallView = ({ url, leave, nameOf = (member) => member, className }) => {
 		onJoin: () => void session.join(),
 		cancel: leave
 	});
+	const { lobby, guests } = session;
+	const inCall = session.members.filter((member) => member.member.startsWith("guest:")).map((member) => ({
+		guest: member.member.slice(6),
+		name: member.name ?? ""
+	}));
 	const people = callPeople({
 		members: session.members,
 		self,
@@ -73,6 +88,10 @@ const CallView = ({ url, leave, nameOf = (member) => member, className }) => {
 		people,
 		state: phase.kind === "joining" ? "joining" : phase.resuming ? "resuming" : "joined",
 		notices,
+		...lobby && guests && { aside: /* @__PURE__ */ jsx(CallLobbyNotice, {
+			waiting: lobby.guests,
+			guests
+		}) },
 		controls: {
 			microphoneOn: session.microphoneOn && Boolean(devices?.microphone),
 			cameraOn: session.cameraOn && Boolean(devices?.camera),
@@ -80,8 +99,20 @@ const CallView = ({ url, leave, nameOf = (member) => member, className }) => {
 			onMicrophone: session.toggleMicrophone,
 			onCamera: session.toggleCamera,
 			...session.toggleScreen && { onShare: () => void session.toggleScreen() },
+			...lobby && { guests: {
+				waiting: lobby.guests.length,
+				onOpen: () => setGuestsOpen(true)
+			} },
 			leave
-		}
+		},
+		children: lobby && guests && /* @__PURE__ */ jsx(CallGuestsPanel, {
+			lobby,
+			inCall,
+			guests,
+			linkOf: (token) => guestCallLink(`${window.location.origin}${basePath}`, token),
+			open: guestsOpen,
+			onClose: () => setGuestsOpen(false)
+		})
 	});
 };
 //#endregion

package/dist/calls/call-waiting.js

@@ -0,0 +1,20 @@
+import { Spinner } from "../primitives/spinner.js";
+import { RouteLink } from "../primitives/route-link.js";
+import { text } from "./messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-waiting.tsx
+/** A guest's wait in the lobby, until someone in the call lets them in, with Leave. */
+const CallWaiting = ({ leave }) => /* @__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__ */ jsxs("p", {
+		className: "flex items-center gap-2 text-sm text-foreground",
+		children: [/* @__PURE__ */ jsx(Spinner, { className: "size-4" }), text("waiting")]
+	}), /* @__PURE__ */ jsx(RouteLink, {
+		to: leave,
+		className: "px-2 text-sm text-muted-foreground hover:text-foreground",
+		children: text("leave")
+	})]
+});
+//#endregion
+export { CallWaiting };

package/dist/calls/guest-admission.js

@@ -0,0 +1,40 @@
+//#region src/calls/guest-admission.ts
+/** Why a guest is not let into the call: turned away, the link or call is over, or the lobby cannot be reached now. */
+var NotLetIn = class extends Error {
+	reason;
+	constructor(reason) {
+		super(`Not let into the call: ${reason}`);
+		this.reason = reason;
+		this.name = "NotLetIn";
+	}
+};
+/** How often a waiting guest asks after their wait. */
+const waitEveryMs = 1e3;
+const later = (ms, signal) => new Promise((resolve) => {
+	const timer = setTimeout(resolve, ms);
+	signal.addEventListener("abort", () => (clearTimeout(timer), resolve()), { once: true });
+});
+/**
+* A guest's way into the call: they wait in the lobby of the link, by their name, asking once a second, until a member
+* lets them in, with the guest's token for `joinCall`, or turns them away, or the link or call is over. Aborting leaves
+* the lobby.
+*/
+const guestAdmission = async (lobby, link, name, signal) => {
+	const { LobbyRefused } = await import("@protobase/client/calls");
+	const refusal = (error) => {
+		if (!(error instanceof LobbyRefused)) return error;
+		return new NotLetIn(error.status === 404 ? "refused" : error.status === 429 ? "unavailable" : "ended");
+	};
+	const { token } = await lobby.enter(link, name).catch((error) => Promise.reject(refusal(error)));
+	while (!signal.aborted) {
+		const wait = await lobby.wait(token).catch((error) => Promise.reject(refusal(error)));
+		if (wait.state === "admitted") return token;
+		if (wait.state === "denied") throw new NotLetIn("denied");
+		if (wait.state === "ended") throw new NotLetIn("ended");
+		await later(waitEveryMs, signal);
+	}
+	await lobby.leave(token);
+	throw new NotLetIn("ended");
+};
+//#endregion
+export { NotLetIn, guestAdmission, waitEveryMs };

package/dist/calls/guest-call-link.js

@@ -0,0 +1,19 @@
+import { useRouter } from "../app/router.js";
+import { useMemo } from "react";
+//#region src/calls/guest-call-link.ts
+/** The path a guest link opens, below the app's base path: its token follows in the fragment, which no server sees. */
+const guestCallLinkPath = "/-/call-guest";
+/** The guest link of a token, at the app's base, such as `https://chat.example.com`. */
+const guestCallLink = (base, token) => `${base}${guestCallLinkPath}#${token}`;
+/** The guest link of this path and fragment: its token, or `undefined` for any other page. */
+const readGuestCallLink = (path, hash) => {
+	const token = hash.replace(/^#/, "");
+	return path === "/-/call-guest" && token ? { token } : void 0;
+};
+/** The guest link the address shows, `/-/call-guest#<token>`, as logical values; `undefined` on any other page. */
+const useGuestCallAddress = () => {
+	const { path } = useRouter();
+	return useMemo(() => readGuestCallLink(path, globalThis.location?.hash ?? ""), [path]);
+};
+//#endregion
+export { guestCallLink, guestCallLinkPath, readGuestCallLink, useGuestCallAddress };