@protobase/ui 0.62.1 → 0.62.2

package/dist/app/app.js

@@ -52,6 +52,7 @@ import { actingUser } from "../roles/acting-user.js";
 import { useActiveRole } from "../roles/use-active-role.js";
 import { startAddress } from "./start-address.js";
 import { ProjectLogo } from "./project-logo.js";
+import { CallRings } from "../calls/call-rings.js";
 import { ShellBell } from "./shell-bell.js";
 import { PluginGate, usePluginsOff } from "../plugins/plugin-gate.js";
 import { PluginNotice } from "../plugins/plugin-notice.js";
@@ -291,7 +292,11 @@ const Routes = ({ workspace, sidebarMode, assistant, runtime }) => {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(RightPanel, {})
 		}), assistantPanel] }),
-		children: [content, status.dialog]
+		children: [
+			content,
+			status.dialog,
+			meta.calls && user && !staff && /* @__PURE__ */ jsx(CallRings, {})
+		]
 	});
 };
 const Authenticated = ({ baseUrl, client, sources, workspace, sidebarMode, ui, assistant, runtime }) => {

package/dist/app/current-address.d.ts

@@ -26,6 +26,7 @@ export type CurrentAddress = ListAddress | {
   open?: readonly string[];
   tab?: string;
   standard?: true;
+  call?: 'join';
 } | {
   kind: 'create';
   resource: string;

package/dist/app/current-address.js

@@ -37,7 +37,8 @@ const currentAddress = (read, defaults) => {
 		...read.edit && { edit: true },
 		...read.open && { open: read.open },
 		...read.tab && { tab: read.tab },
-		...read.standard && { standard: true }
+		...read.standard && { standard: true },
+		...read.call && { call: read.call }
 	};
 	if (read?.kind !== "list") return read;
 	return {

package/dist/calls/call-check.js

@@ -0,0 +1,78 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import { Avatar } from "../primitives/avatar.js";
+import { RouteLink } from "../primitives/route-link.js";
+import { hueOf, initialsOf } from "../auth/user-to-shell.js";
+import { text } from "./messages.js";
+import { TrackVideo } from "./track-media.js";
+import { Mic, MicOff, Video, VideoOff } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-check.tsx
+const toggle = (on) => cn("size-10 rounded-full", !on && "bg-danger-soft text-danger-text");
+/**
+* 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", {
+	"aria-label": text("preview"),
+	className: "flex size-full min-h-0 flex-col items-center justify-center gap-3 bg-background p-4",
+	children: [
+		/* @__PURE__ */ jsx("figure", {
+			className: "relative flex aspect-video w-full max-w-md items-center justify-center overflow-hidden rounded-lg bg-neutral-900",
+			children: camera && cameraOn ? /* @__PURE__ */ jsx(TrackVideo, {
+				track: camera,
+				"aria-label": text("preview"),
+				className: "size-full -scale-x-100 object-cover"
+			}) : /* @__PURE__ */ jsx(Avatar, {
+				initials: initialsOf(name),
+				hue: hueOf(member),
+				size: "md",
+				className: "size-16 text-xl ring-0"
+			})
+		}),
+		notices.length > 0 && /* @__PURE__ */ jsx("div", {
+			role: "status",
+			className: "flex w-full max-w-md flex-col gap-1",
+			children: notices.map((notice) => /* @__PURE__ */ jsx("p", {
+				className: "rounded-md bg-warning-soft px-3 py-1.5 text-xs text-foreground",
+				children: notice
+			}, notice))
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					"aria-label": text("microphone"),
+					"aria-pressed": microphoneOn,
+					disabled: !microphone,
+					className: toggle(microphoneOn),
+					onClick: onMicrophone,
+					children: microphoneOn ? /* @__PURE__ */ jsx(Mic, { className: "size-4" }) : /* @__PURE__ */ jsx(MicOff, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					"aria-label": text("camera"),
+					"aria-pressed": cameraOn,
+					disabled: !cameraAvailable,
+					className: toggle(cameraOn),
+					onClick: onCamera,
+					children: cameraOn ? /* @__PURE__ */ jsx(Video, { className: "size-4" }) : /* @__PURE__ */ jsx(VideoOff, { className: "size-4" })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					className: "h-10 rounded-full px-5",
+					onClick: onJoin,
+					children: text("joinCall")
+				}),
+				/* @__PURE__ */ jsx(RouteLink, {
+					to: cancel,
+					className: "px-2 text-sm text-muted-foreground hover:text-foreground",
+					children: text("leave")
+				})
+			]
+		})
+	]
+});
+//#endregion
+export { CallCheck };

package/dist/calls/call-controls.js

@@ -0,0 +1,50 @@
+import { cn } from "../lib/cn.js";
+import { Button, buttonClass } from "../primitives/button.js";
+import { RouteLink } from "../primitives/route-link.js";
+import { text } from "./messages.js";
+import { Mic, MicOff, MonitorUp, MonitorX, PhoneOff, 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", {
+	role: "toolbar",
+	"aria-label": text("joinCall"),
+	className: "flex shrink-0 items-center justify-center gap-2 py-2",
+	children: [
+		/* @__PURE__ */ jsx(Button, {
+			size: "icon",
+			"aria-label": text("microphone"),
+			"aria-pressed": microphoneOn,
+			title: text("microphone"),
+			className: toggle(microphoneOn),
+			onClick: onMicrophone,
+			children: microphoneOn ? /* @__PURE__ */ jsx(Mic, { className: "size-4" }) : /* @__PURE__ */ jsx(MicOff, { className: "size-4" })
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			size: "icon",
+			"aria-label": text("camera"),
+			"aria-pressed": cameraOn,
+			title: text("camera"),
+			className: toggle(cameraOn),
+			onClick: onCamera,
+			children: cameraOn ? /* @__PURE__ */ jsx(Video, { className: "size-4" }) : /* @__PURE__ */ jsx(VideoOff, { className: "size-4" })
+		}),
+		onShare && /* @__PURE__ */ jsx(Button, {
+			size: "icon",
+			"aria-label": sharing ? text("stopSharing") : text("shareScreen"),
+			"aria-pressed": Boolean(sharing),
+			title: sharing ? text("stopSharing") : text("shareScreen"),
+			className: "size-10 rounded-full",
+			onClick: onShare,
+			children: sharing ? /* @__PURE__ */ jsx(MonitorX, { className: "size-4" }) : /* @__PURE__ */ jsx(MonitorUp, { className: "size-4" })
+		}),
+		/* @__PURE__ */ jsxs(RouteLink, {
+			to: leave,
+			className: cn(buttonClass({ variant: "danger" }), "h-10 rounded-full px-4"),
+			children: [/* @__PURE__ */ jsx(PhoneOff, { className: "size-4" }), text("leave")]
+		})
+	]
+});
+//#endregion
+export { CallControls };

package/dist/calls/call-layout.js

@@ -0,0 +1,31 @@
+/** The columns a grid of `count` tiles takes in a view `width` pixels wide: as square as fits, fewer on a phone. */
+const gridColumns = (count, width) => {
+	if (width < 640) return count <= 2 ? 1 : 2;
+	return Math.min(4, Math.ceil(Math.sqrt(count)));
+};
+/** The layout for these people, the member included, and the member sharing their screen, the first of them if several do. */
+const callLayout = ({ people, sharers, width }) => {
+	if (sharers[0] !== void 0) return {
+		kind: "share",
+		sharer: sharers[0]
+	};
+	if (people <= 1) return { kind: "alone" };
+	return {
+		kind: "grid",
+		columns: gridColumns(people, width)
+	};
+};
+/** How a connection fares, as its tile shows it: poor past a round trip of 400 ms or a loss of 5% of the media. */
+const connectionQuality = ({ roundTripMs, lostRatio }) => (roundTripMs ?? 0) > 400 || (lostRatio ?? 0) > .05 ? "poor" : "good";
+/** How long a connection may stay unconnected before its tile says the browser cannot connect to that person. */
+const connectGiveUpMs = 15e3;
+/** Whether the browser cannot connect to someone: their connection failed, or is not up `connectGiveUpMs` after they came. */
+const cannotConnect = (state, since, now) => state === "failed" || state !== "connected" && now - since >= 15e3;
+/** The loudest of these levels, from 0 to 1, when one is loud enough to be someone speaking. */
+const activeSpeaker = (levels, threshold = .05) => {
+	let loudest;
+	for (const [member, level] of levels) if (level >= threshold && (!loudest || level > loudest[1])) loudest = [member, level];
+	return loudest?.[0];
+};
+//#endregion
+export { activeSpeaker, callLayout, cannotConnect, connectGiveUpMs, connectionQuality, gridColumns };

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

@@ -0,0 +1,13 @@
+//#region src/calls/call-mark.d.ts
+export type CallMarkProps = {
+  resource: string;
+  recordKey: string;
+  className?: string;
+};
+/**
+ * A record's call, for the app to place where it wants, such as a conversation's header: Start call while there is
+ * none, and "Call in progress · 3 · Join" while one goes on, live. Start call and Join are links to the record's page
+ * that joins its call (`call=join`); on that page itself, Join is left out.
+ */
+export declare const CallMark: ({ resource, recordKey, className }: CallMarkProps) => import("react").JSX.Element | null;
+//#endregion

package/dist/calls/call-mark.js

@@ -0,0 +1,57 @@
+import { cn } from "../lib/cn.js";
+import { buttonClass } from "../primitives/button.js";
+import { RouteLink } from "../primitives/route-link.js";
+import { text } from "./messages.js";
+import { useRecordCallAddress } from "./use-record-call-address.js";
+import { useRecordCalls } from "./use-record-calls.js";
+import { Phone } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-mark.tsx
+/**
+* A record's call, for the app to place where it wants, such as a conversation's header: Start call while there is
+* none, and "Call in progress · 3 · Join" while one goes on, live. Start call and Join are links to the record's page
+* that joins its call (`call=join`); on that page itself, Join is left out.
+*/
+const CallMark = ({ resource, recordKey, className }) => {
+	const { ongoing, isPending } = useRecordCalls(resource, recordKey);
+	const { joining, join } = useRecordCallAddress(resource, recordKey);
+	if (isPending) return null;
+	if (!ongoing) {
+		if (joining) return null;
+		return /* @__PURE__ */ jsxs(RouteLink, {
+			to: join,
+			className: cn(buttonClass({ size: "sm" }), className),
+			children: [/* @__PURE__ */ jsx(Phone, { className: "size-3.5" }), text("startCall")]
+		});
+	}
+	const count = ongoing.members.length;
+	return /* @__PURE__ */ jsxs("span", {
+		role: "status",
+		className: cn("inline-flex items-center gap-1.5 rounded-md bg-success-soft px-2 py-0.5 text-body text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx(Phone, { className: "size-3.5 text-success" }),
+			text("inProgress"),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: "·"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-label": text("people", count),
+				children: count
+			}),
+			!joining && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: "·"
+			}), /* @__PURE__ */ jsx(RouteLink, {
+				to: join,
+				className: buttonClass({
+					variant: "primary",
+					size: "sm"
+				}),
+				children: text("join")
+			})] })
+		]
+	});
+};
+//#endregion
+export { CallMark };

package/dist/calls/call-message.js

@@ -0,0 +1,25 @@
+import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-message.tsx
+const said = {
+	ended: "ended",
+	removed: "removed",
+	full: "full",
+	refused: "refused",
+	unavailable: "unavailable"
+};
+/** Why the member is not in the call, in plain words, and, unless they were removed, 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, {
+		onClick: onJoinAgain,
+		children: text("callAgain")
+	})]
+});
+//#endregion
+export { CallMessage };

package/dist/calls/call-people.js

@@ -0,0 +1,46 @@
+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);
+/** Everyone in the call as the view draws them, in the order they came, the member among them as `self`. */
+const callPeople = ({ members, self, tracks, own, nameOf, speaker, connections, seen, now }) => {
+	return (members.some((member) => member.member === self) ? members : [{
+		member: self,
+		joined_at: ""
+	}, ...members]).map(({ member }) => {
+		const shared = {
+			member,
+			name: nameOf(member),
+			...speaker === member && { speaking: true }
+		};
+		if (member === self) return {
+			...shared,
+			self: true,
+			...own.camera && { camera: own.camera },
+			...own.microphone && { microphone: own.microphone },
+			...own.screen && { screen: own.screen },
+			microphoneOff: !own.microphone || !own.microphoneOn,
+			cameraOff: !own.camera || !own.cameraOn
+		};
+		const theirs = tracks.filter((track) => track.member === member);
+		const [camera, microphone, screen, screenAudio] = [
+			"camera",
+			"microphone",
+			"screen",
+			"screen-audio"
+		].map((source) => received(theirs, source));
+		const link = connections.find((connection) => connection.member === member);
+		const connection = cannotConnect(link?.state, seen.get(member) ?? now, now) ? "failed" : link?.state === "connected" ? connectionQuality(link) : void 0;
+		return {
+			...shared,
+			...camera && { camera: camera.track },
+			...microphone && { microphone: microphone.track },
+			...screen && { screen: screen.track },
+			...screenAudio && { screenAudio: screenAudio.track },
+			microphoneOff: !microphone || microphone.muted,
+			cameraOff: !camera || camera.muted,
+			...connection && { connection }
+		};
+	});
+};
+//#endregion
+export { callPeople };

package/dist/calls/call-rings.js

@@ -0,0 +1,78 @@
+import { useToast } from "../toasts/toast-provider.js";
+import { useAppAddress } from "../app/use-app-address.js";
+import { text } from "./messages.js";
+import { useRingTone } from "./ring-tone.js";
+import { useRings } from "./use-rings.js";
+import { useEffect, useRef } from "react";
+//#region src/calls/call-rings.tsx
+/** A ring as a sticky toast: Decline, and Accept, a link to the record's page that joins its call on this device. */
+const ringToast = (ring, accept, decline) => ({
+	state: "call",
+	sticky: true,
+	title: ring.title,
+	...ring.body !== null && { description: ring.body },
+	actions: [{
+		label: text("decline"),
+		onClick: () => decline(ring.call)
+	}, {
+		label: text("accept"),
+		...accept
+	}]
+});
+/**
+* Rings the signed-in user on whatever page of the app they have open, over the live stream the page already holds:
+* each call ringing them is a toast with Decline and Accept, with a ring tone, until they answer, here or on another
+* device, decline, or the call ends or stops ringing. Accept opens the record's page, which joins the call after the
+* click on this device only. Someone on do not disturb is not rung; the call is in their bell.
+*/
+const CallRings = () => {
+	const { ringing, decline, hide } = useRings(true);
+	const toast = useToast();
+	const { href, open } = useAppAddress();
+	const shown = useRef(/* @__PURE__ */ new Map());
+	useRingTone(ringing.length > 0);
+	useEffect(() => {
+		const now = new Set(ringing.map((ring) => ring.call));
+		for (const [call, id] of shown.current) {
+			if (now.has(call)) continue;
+			toast.dismiss(id);
+			shown.current.delete(call);
+		}
+		for (const ring of ringing) {
+			if (shown.current.has(ring.call)) continue;
+			const accept = {
+				href: href({
+					kind: "record",
+					resource: ring.resource,
+					key: ring.key,
+					call: "join"
+				}),
+				onNavigate: (target) => {
+					hide(ring.call);
+					open(target);
+				}
+			};
+			shown.current.set(ring.call, toast.show({
+				...ringToast(ring, accept, decline),
+				onClose: () => decline(ring.call)
+			}));
+		}
+	}, [
+		ringing,
+		toast,
+		href,
+		open,
+		decline,
+		hide
+	]);
+	useEffect(() => {
+		const own = shown.current;
+		return () => {
+			for (const id of own.values()) toast.dismiss(id);
+			own.clear();
+		};
+	}, [toast]);
+	return null;
+};
+//#endregion
+export { CallRings };

package/dist/calls/call-stage.js

@@ -0,0 +1,111 @@
+import { cn } from "../lib/cn.js";
+import { Spinner } from "../primitives/spinner.js";
+import { text } from "./messages.js";
+import { TrackAudio } from "./track-media.js";
+import { callLayout } from "./call-layout.js";
+import { CallControls } from "./call-controls.js";
+import { CallTile } from "./call-tile.js";
+import { useWidth } from "./use-width.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-stage.tsx
+const stripMax = 4;
+const Grid = ({ people, columns }) => /* @__PURE__ */ jsx("div", {
+	className: "grid size-full min-h-0 gap-2",
+	style: {
+		gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+		gridTemplateRows: `repeat(${Math.ceil(people.length / columns)}, minmax(0, 1fr))`
+	},
+	children: people.map((person) => /* @__PURE__ */ jsx(CallTile, { person }, person.member))
+});
+const Share = ({ people, sharer, narrow }) => {
+	const shown = people.slice(0, stripMax);
+	const more = people.length - shown.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex size-full min-h-0 gap-2", narrow ? "flex-col" : "flex-row"),
+		children: [/* @__PURE__ */ jsx(CallTile, {
+			person: sharer,
+			screen: true,
+			className: "min-h-0 flex-1"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("flex shrink-0 gap-2", narrow ? "h-20 flex-row" : "w-40 flex-col"),
+			children: [shown.map((person) => /* @__PURE__ */ jsx(CallTile, {
+				person,
+				className: narrow ? "aspect-video h-full" : "aspect-video w-full"
+			}, person.member)), more > 0 && /* @__PURE__ */ jsxs("p", {
+				className: "flex items-center justify-center rounded-lg bg-muted px-2 text-xs text-muted-foreground",
+				children: ["+", more]
+			})]
+		})]
+	});
+};
+const Tiles = ({ layout, people, narrow }) => {
+	if (layout.kind === "share") return /* @__PURE__ */ jsx(Share, {
+		people,
+		sharer: people.find((person) => person.member === layout.sharer),
+		narrow
+	});
+	if (layout.kind === "grid") return /* @__PURE__ */ jsx(Grid, {
+		people,
+		columns: layout.columns
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative size-full min-h-0",
+		children: [/* @__PURE__ */ jsx(CallTile, {
+			person: people[0],
+			className: "size-full"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "absolute inset-x-0 top-3 text-center text-sm text-white drop-shadow",
+			children: text("alone")
+		})]
+	});
+};
+/**
+* A call as the member sees it, filling its parent: everyone at the same size, with the one speaking ringed; a screen
+* 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 { ref, width } = useWidth();
+	const narrow = width > 0 && width < 640;
+	const layout = callLayout({
+		people: people.length,
+		sharers: people.filter((person) => person.screen).map((person) => person.member),
+		width
+	});
+	const messages = [...state === "resuming" ? [text("reconnecting")] : [], ...notices];
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		"aria-label": text("joinCall"),
+		"data-layout": layout.kind,
+		className: cn("flex size-full min-h-0 flex-col gap-2 bg-background p-2", className),
+		children: [
+			messages.length > 0 && /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: "flex shrink-0 flex-col gap-1",
+				children: messages.map((message) => /* @__PURE__ */ jsxs("p", {
+					className: "flex items-center gap-2 rounded-md bg-warning-soft px-3 py-1.5 text-xs text-foreground",
+					children: [message === text("reconnecting") && /* @__PURE__ */ jsx(Spinner, { className: "size-3" }), message]
+				}, message))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1",
+				children: state === "joining" ? /* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "flex size-full items-center justify-center gap-2 text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(Spinner, { className: "size-4" }), text("connecting")]
+				}) : /* @__PURE__ */ jsx(Tiles, {
+					layout,
+					people,
+					narrow
+				})
+			}),
+			/* @__PURE__ */ jsx(CallControls, { ...controls }),
+			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))
+		]
+	});
+};
+//#endregion
+export { CallStage };

package/dist/calls/call-tile.js

@@ -0,0 +1,60 @@
+import { cn } from "../lib/cn.js";
+import { Avatar } from "../primitives/avatar.js";
+import { hueOf, initialsOf } from "../auth/user-to-shell.js";
+import { text } from "./messages.js";
+import { TrackVideo } from "./track-media.js";
+import { MicOff, WifiOff } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/calls/call-tile.tsx
+/**
+* One person in a call: their camera, or their initials while it sends nothing; their name, a mark while their
+* microphone is off or their connection is poor, a ring while they speak, and a plain message when the member's
+* browser cannot connect to them. `screen` draws their screen share instead, whole.
+*/
+const CallTile = ({ person, screen = false, className }) => {
+	const track = screen ? person.screen : person.cameraOff ? void 0 : person.camera;
+	const label = screen ? person.self ? text("youAreSharing") : text("sharing", person.name) : person.self ? `${person.name} (${text("you")})` : person.name;
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-member": person.member,
+		"data-speaking": person.speaking ? "true" : void 0,
+		"aria-label": label,
+		className: cn("relative flex min-h-0 min-w-0 items-center justify-center overflow-hidden rounded-lg bg-neutral-900 ring-offset-2 ring-offset-background", person.speaking && !screen && "ring-2 ring-success", className),
+		children: [
+			track ? /* @__PURE__ */ jsx(TrackVideo, {
+				track,
+				className: cn("size-full", screen ? "object-contain" : "object-cover", person.self && !screen && "-scale-x-100")
+			}) : /* @__PURE__ */ jsx(Avatar, {
+				initials: initialsOf(person.name),
+				hue: hueOf(person.member),
+				size: "md",
+				className: "size-16 text-xl ring-0"
+			}),
+			person.connection === "failed" && !person.self && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "absolute inset-x-1 top-1 truncate rounded bg-black/70 px-2 py-1 text-center text-xs text-white",
+				children: text("cannotConnect", person.name)
+			}),
+			/* @__PURE__ */ jsxs("figcaption", {
+				className: "absolute bottom-1.5 left-1.5 flex max-w-[calc(100%-0.75rem)] items-center gap-1 rounded bg-black/60 px-1.5 py-0.5 text-xs text-white",
+				children: [
+					!screen && person.microphoneOff && /* @__PURE__ */ jsx(MicOff, {
+						role: "img",
+						"aria-label": text("muted"),
+						className: "size-3 shrink-0"
+					}),
+					!screen && person.connection === "poor" && /* @__PURE__ */ jsx(WifiOff, {
+						role: "img",
+						"aria-label": text("poorConnection"),
+						className: "size-3 shrink-0 text-warning"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: label
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { CallTile };

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

@@ -0,0 +1,20 @@
+import { RouteTarget } from "../primitives/route-link.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`. */
+  url: string;
+  /** Where Leave goes; leaving the page leaves the call. */
+  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;
+  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.
+ */
+export declare const CallView: ({ url, leave, nameOf, className }: CallViewProps) => import("react").JSX.Element;
+//#endregion