@polymorfa/react 0.1.0-dev.20260922094209

package/dist/calls.js

@@ -0,0 +1,944 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Polymorfa Calls UI — React components over `CallsController`.
+//
+// Shaped after the official WhatsApp desktop call windows in a monochrome
+// Material-3 voice: black identity, tonal fills, hairline outlines, 8px
+// radius; the verbs carry the only color (success green answers, danger red
+// declines/hangs up). Cards follow the appearance theme; the call stage — and
+// the incoming card once it carries a camera preview — is always dark, like an
+// OS call screen. Widgets are fluid and never resize when a panel opens;
+// device panels overlay them. Every affordance gates on the snapshot's
+// reported `capabilities`.
+import {} from "@polymorfa/browser";
+import { appearanceToCssVariables } from "@polymorfa/ui";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { usePolymorfa } from "./context.js";
+import { useController, useResolvedController } from "./hooks.js";
+/**
+ * Run a synchronous controller call from a DOM handler.
+ *
+ * The controller's mutators assert it is live and throw once it is disposed,
+ * and a disposed controller keeps its last snapshot — so a surface stays
+ * mounted and its buttons stay clickable. React does not catch throws from
+ * event handlers, so without this the error reaches window.onerror. There is
+ * nothing to report: the call these controls belonged to is gone.
+ */
+function ignoreDisposed(run) {
+    try {
+        run();
+    }
+    catch {
+        // Disposed controller — no snapshot left to change.
+    }
+}
+/** A call this client answered or joined that has not ended. */
+const ANSWERED_STATUSES = new Set([
+    "accepted",
+    "connecting",
+    "connected",
+    "reconnecting",
+]);
+const ACTIVE_STATUSES = new Set([
+    "ringing",
+    "accepted",
+    "connecting",
+    "connected",
+    "reconnecting",
+]);
+function Icon({ children, ...props }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: children }));
+}
+const PhoneIcon = (p) => (_jsx(Icon, { ...p, children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }));
+/** The end-call handset: the phone glyph rotated to point down. */
+const HangupIcon = ({ style, ...p }) => (_jsx(PhoneIcon, { ...p, style: { transform: "rotate(135deg)", ...style } }));
+const MicIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), _jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), _jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), _jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] }));
+const MicOffIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" }), _jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" }), _jsx("path", { d: "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23" }), _jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), _jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] }));
+const VideoIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M23 7l-7 5 7 5V7z" }), _jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })] }));
+const VideoOffIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] }));
+const EraseIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z" }), _jsx("line", { x1: "18", y1: "9", x2: "12", y2: "15" }), _jsx("line", { x1: "12", y1: "9", x2: "18", y2: "15" })] }));
+const UserIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] }));
+const ChevronDownIcon = (p) => (_jsx(Icon, { ...p, children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }));
+const CloseIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+const LeaveIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }), _jsx("polyline", { points: "16 17 21 12 16 7" }), _jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })] }));
+const MoreIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "19", cy: "12", r: "1" }), _jsx("circle", { cx: "5", cy: "12", r: "1" })] }));
+const PopoutIcon = (p) => (_jsxs(Icon, { ...p, children: [_jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }), _jsx("polyline", { points: "15 3 21 3 21 9" }), _jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })] }));
+// ── Root / theming ────────────────────────────────────────────────────
+const STYLE_TAG_ID = "pmfa-calls-styles";
+/**
+ * Inject the calls stylesheet once per document. SSR-safe (no-op without a
+ * `document`) and idempotent.
+ */
+export function injectCallsStyles(target = globalThis.document) {
+    if (target === undefined)
+        return;
+    if (target.getElementById(STYLE_TAG_ID))
+        return;
+    const tag = target.createElement("style");
+    tag.id = STYLE_TAG_ID;
+    tag.textContent = CALLS_STYLES;
+    target.head.appendChild(tag);
+}
+function useCallsRoot() {
+    const configuration = usePolymorfa();
+    const unstyled = configuration.appearance.unstyled === true;
+    useEffect(() => {
+        if (!unstyled)
+            injectCallsStyles();
+    }, [unstyled]);
+    const call = configuration.appearance.elements["call"];
+    const theme = configuration.appearance.theme;
+    const className = [
+        "pmfa-calls",
+        theme === "dark"
+            ? "pmfa-calls-dark"
+            : theme === "system"
+                ? "pmfa-calls-auto"
+                : "",
+        call?.className ?? "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const style = useMemo(() => ({
+        ...appearanceToCssVariables(configuration.appearance),
+        ...call?.styles,
+    }), [configuration.appearance, call]);
+    return {
+        className,
+        style,
+        dir: configuration.locale.direction,
+        locale: configuration.locale,
+    };
+}
+function t(locale, key, values = {}) {
+    return locale.messages[key].replace(/\{(\w+)\}/g, (_, name) => values[name] ?? "");
+}
+// ── Building blocks ───────────────────────────────────────────────────
+function initialsOf(name) {
+    if (name === undefined)
+        return null;
+    const words = name.trim().split(/\s+/).filter(Boolean);
+    const first = words[0];
+    if (first === undefined || /^[+\d(]/.test(first))
+        return null;
+    const last = words.length > 1 ? words[words.length - 1] : undefined;
+    const initials = `${first[0] ?? ""}${last?.[0] ?? ""}`.toUpperCase();
+    return initials.length > 0 ? initials : null;
+}
+/**
+ * Deterministic per-caller avatar color: a stable hash of the peer id picks
+ * one of 8 palette tones, so the same caller always renders the same color.
+ * A resolved profile picture wins.
+ */
+function avatarColorClass(peer) {
+    if (peer === undefined)
+        return "";
+    let h = 5381;
+    for (let i = 0; i < peer.length; i += 1)
+        h = ((h * 33) ^ peer.charCodeAt(i)) >>> 0;
+    return ` pmfa-calls-avatar-c${(h % 8) + 1}`;
+}
+function CallAvatar({ displayName, avatarUrl, peer, }) {
+    const initials = initialsOf(displayName);
+    return (_jsx("div", { className: "pmfa-calls-avatar-wrap", children: _jsx("div", { className: `pmfa-calls-avatar${avatarUrl === undefined ? avatarColorClass(peer) : ""}`, children: avatarUrl !== undefined ? (_jsx("img", { src: avatarUrl, alt: "" })) : initials !== null ? (initials) : (_jsx(UserIcon, { style: { width: 30, height: 30, opacity: 0.9 } })) }) }));
+}
+function usePeerAvatar(peer, resolveAvatar, explicit) {
+    const [resolved, setResolved] = useState({});
+    useEffect(() => {
+        if (peer === undefined || resolveAvatar === undefined || peer in resolved)
+            return;
+        let cancelled = false;
+        void Promise.resolve()
+            .then(() => resolveAvatar(peer))
+            .catch(() => undefined)
+            .then((url) => {
+            if (!cancelled)
+                setResolved((previous) => ({ ...previous, [peer]: url }));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [peer, resolveAvatar, resolved]);
+    return explicit ?? (peer === undefined ? undefined : resolved[peer]);
+}
+/**
+ * A muted, mirrored self-view for the pre-answer preview on video offers.
+ * Null while the camera warms up or when access was denied — callers fall
+ * back to the dark block.
+ */
+function useSelfPreview(enabled, videoInput) {
+    const [stream, setStream] = useState(null);
+    useEffect(() => {
+        const devices = globalThis.navigator?.mediaDevices;
+        if (!enabled ||
+            devices === undefined ||
+            typeof devices.getUserMedia !== "function")
+            return;
+        let cancelled = false;
+        let acquired = null;
+        void devices
+            .getUserMedia({
+            video: videoInput === undefined ? true : { deviceId: { ideal: videoInput } },
+            audio: false,
+        })
+            .then((s) => {
+            acquired = s;
+            if (cancelled)
+                for (const track of s.getTracks())
+                    track.stop();
+            else
+                setStream(s);
+        })
+            .catch(() => undefined);
+        return () => {
+            cancelled = true;
+            if (acquired !== null)
+                for (const track of acquired.getTracks())
+                    track.stop();
+            setStream(null);
+        };
+    }, [enabled, videoInput]);
+    return stream;
+}
+function attach(element, stream) {
+    if (element !== null && stream != null && element.srcObject !== stream)
+        element.srcObject = stream;
+}
+// ── Device panels ─────────────────────────────────────────────────────
+const canSetSink = typeof HTMLMediaElement !== "undefined" &&
+    "setSinkId" in HTMLMediaElement.prototype;
+const DEVICE_KIND = {
+    audioInput: "audioinput",
+    videoInput: "videoinput",
+    audioOutput: "audiooutput",
+};
+const DEVICE_LABEL = {
+    audioInput: "calls.microphone",
+    videoInput: "calls.camera",
+    audioOutput: "calls.speaker",
+};
+/**
+ * One-panel-at-a-time open state plus the label unlock: device labels are
+ * empty until the page holds a media permission, so opening a panel takes
+ * (and immediately releases) a throwaway audio capture so real names show.
+ */
+function useDevicePanels(controller, snapshot) {
+    const [open, setOpen] = useState(null);
+    const toggle = (panel) => {
+        const next = open === panel ? null : panel;
+        setOpen(next);
+        if (next === null)
+            return;
+        void (async () => {
+            const devices = globalThis.navigator?.mediaDevices;
+            if (snapshot.devices.every((d) => d.label.length === 0) &&
+                devices !== undefined &&
+                typeof devices.getUserMedia === "function") {
+                try {
+                    const s = await devices.getUserMedia({ audio: true });
+                    for (const track of s.getTracks())
+                        track.stop();
+                }
+                catch {
+                    // Denied — enumerate anyway; generic labels render.
+                }
+            }
+            await controller.refreshDevices().catch(() => undefined);
+        })();
+    };
+    return { open, toggle };
+}
+/**
+ * Device selects, scoped per panel: the mic dropdown carries microphone +
+ * speaker, the camera dropdown carries the camera only (the official
+ * split-button layout). Selections apply live mid-call.
+ */
+function DeviceFields({ controller, snapshot, fields, locale, }) {
+    const select = (kind, deviceId) => {
+        ignoreDisposed(() => {
+            if (kind === "audioOutput")
+                controller.setPreferredDevices({ audioOutput: deviceId });
+            else if (deviceId.length > 0)
+                void controller.switchDevice(kind, deviceId);
+            else
+                controller.setPreferredDevices({ [kind]: undefined });
+        });
+    };
+    return (_jsx(_Fragment, { children: fields.map((kind) => {
+            if (kind === "audioOutput" && !canSetSink)
+                return null;
+            const group = snapshot.devices.filter((d) => d.kind === DEVICE_KIND[kind]);
+            return (_jsxs("label", { className: "pmfa-calls-field", children: [t(locale, DEVICE_LABEL[kind]), _jsxs("select", { className: "pmfa-calls-select", value: snapshot.selectedDevices[kind] ?? "", onChange: (event) => select(kind, event.currentTarget.value), children: [_jsx("option", { value: "", children: t(locale, "calls.defaultDevice") }), group.map((d, i) => (_jsx("option", { value: d.deviceId, children: d.label.length > 0
+                                    ? d.label
+                                    : `${t(locale, DEVICE_LABEL[kind])} ${i + 1}` }, d.deviceId.length > 0 ? d.deviceId : i)))] })] }, kind));
+        }) }));
+}
+/**
+ * The incoming-call window: name, "WhatsApp audio/video call" subtitle, the
+ * media middle (avatar for audio; a mirrored self-preview with camera/mic
+ * toggles and a ⋯ device menu for video), then Reject / Answer. Answering a
+ * video offer with the camera toggled off still acquires video muted, so the
+ * in-call camera toggle can enable it later.
+ *
+ * A call another participant answered without claiming shows Join instead of
+ * Answer. A call another participant claimed shows only Dismiss: declining it
+ * would end it for the participant who answered. Other waiting calls are
+ * listed below; the card never declines them.
+ */
+export function IncomingCallCard({ controller, createController, displayName, avatarUrl, resolveAvatar, className, exclusive = false, resolveName, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const incoming = snapshot.status === "incoming";
+    // A claimed call is not answered here, so it opens no camera preview.
+    const offersVideo = incoming &&
+        !snapshot.claimedByOther &&
+        snapshot.video &&
+        snapshot.capabilities.video;
+    const [cameraOn, setCameraOn] = useState(true);
+    const [preMuted, setPreMuted] = useState(false);
+    // The card returns null between calls instead of unmounting, so these
+    // toggles would otherwise carry into the next call and mute it with nothing
+    // on screen to explain why. Reset during render, before the preview reads
+    // them, so the camera is never acquired against a stale choice.
+    const [toggledFor, setToggledFor] = useState(snapshot.callId);
+    if (snapshot.callId !== toggledFor) {
+        setToggledFor(snapshot.callId);
+        setCameraOn(true);
+        setPreMuted(false);
+    }
+    const preview = useSelfPreview(offersVideo && cameraOn, snapshot.selectedDevices.videoInput);
+    const previewRef = useRef(null);
+    const peerAvatar = usePeerAvatar(snapshot.peer, resolveAvatar, avatarUrl);
+    const { open, toggle } = useDevicePanels(resolved, snapshot);
+    useEffect(() => attach(previewRef.current, preview), [preview]);
+    if (!incoming)
+        return null;
+    const peer = snapshot.peer ?? "";
+    const name = displayName ?? peer;
+    // A remote hang-up between the click and the call reaching the controller
+    // makes both of these reject: the call is no longer incoming. The snapshot
+    // already shows the call ended, so the rejection only needs absorbing.
+    const claimed = snapshot.claimedByOther;
+    const joinable = !claimed && snapshot.canJoin;
+    // An answer or join is in flight (possibly for another listed call): the
+    // controller refuses these until it settles.
+    const busy = snapshot.answering === true;
+    // A failed answer: this call's own (still ringing), or a previous call's
+    // that gave way to this one.
+    const failure = snapshot.error;
+    const failureKey = failure === undefined ||
+        failure.code === "call_control_failed" ||
+        failure.code === "call_claimed"
+        ? undefined
+        : failure.callId === undefined || failure.callId === snapshot.callId
+            ? "calls.answerFailed"
+            : "calls.previousFailed";
+    const answeredId = snapshot.callId;
+    const applyPreToggles = () => {
+        // The answer can settle without this call becoming active: it ended, was
+        // dismissed, or another call is displayed now. Those choices belong to
+        // this call only.
+        const now = resolved.getSnapshot();
+        if (now.callId !== answeredId || !ANSWERED_STATUSES.has(now.status))
+            return;
+        if (preMuted || (offersVideo && !cameraOn))
+            resolved.setMuted({
+                ...(preMuted ? { audio: true } : {}),
+                ...(offersVideo && !cameraOn ? { video: true } : {}),
+            });
+    };
+    const join = () => void resolved
+        .join({ video: offersVideo })
+        .then(applyPreToggles)
+        .catch(() => undefined);
+    const others = (snapshot.invitations ?? []).filter((invitation) => invitation.callId !== snapshot.callId);
+    const accept = () => void resolved
+        .answer({ video: offersVideo, exclusive })
+        .then(applyPreToggles)
+        .catch(() => undefined);
+    const micToggle = (_jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-mini${preMuted ? " pmfa-calls-on" : ""}`, onClick: () => setPreMuted((v) => !v), 
+        // The pending answer applies the value from when it was pressed.
+        disabled: busy, "aria-label": t(locale, preMuted ? "calls.answerUnmuted" : "calls.answerMuted"), "aria-pressed": preMuted, children: preMuted ? _jsx(MicOffIcon, {}) : _jsx(MicIcon, {}) }));
+    return (_jsx("div", { className: root.className, style: root.style, dir: root.dir, "data-pmfa": "call", children: _jsxs("div", { className: `pmfa-calls-card pmfa-calls-incoming${className === undefined ? "" : ` ${className}`}`, role: "alertdialog", "aria-label": t(locale, "calls.incomingFrom", { peer: name }), children: [_jsx("div", { className: "pmfa-calls-name", children: name }), _jsx("div", { className: "pmfa-calls-subtitle", role: snapshot.error?.code === "call_control_failed" ||
+                        failureKey !== undefined ||
+                        claimed ||
+                        joinable
+                        ? "status"
+                        : undefined, children: t(locale, snapshot.error?.code === "call_control_failed"
+                        ? "calls.controlFailed"
+                        : failureKey !== undefined
+                            ? failureKey
+                            : claimed
+                                ? "calls.answeredElsewhere"
+                                : joinable
+                                    ? "calls.joinable"
+                                    : offersVideo
+                                        ? "calls.videoCall"
+                                        : "calls.audioCall") }), offersVideo ? (_jsxs("div", { className: "pmfa-calls-media", children: [cameraOn && preview !== null ? (_jsx("video", { ref: previewRef, className: "pmfa-calls-preview", autoPlay: true, playsInline: true, muted: true })) : null, _jsx("div", { className: "pmfa-calls-more", children: _jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-mini${open === "more" ? " pmfa-calls-on" : ""}`, onClick: () => toggle("more"), "aria-label": t(locale, "calls.deviceSettings"), "aria-expanded": open === "more", children: _jsx(MoreIcon, {}) }) }), _jsxs("div", { className: "pmfa-calls-media-ctrls", children: [_jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-mini${cameraOn ? "" : " pmfa-calls-on"}`, onClick: () => setCameraOn((v) => !v), disabled: busy, "aria-label": t(locale, cameraOn
+                                        ? "calls.answerWithoutCamera"
+                                        : "calls.answerWithCamera"), "aria-pressed": !cameraOn, children: cameraOn ? _jsx(VideoIcon, {}) : _jsx(VideoOffIcon, {}) }), micToggle] })] })) : (_jsx("div", { className: "pmfa-calls-media pmfa-calls-media-audio", children: _jsx(CallAvatar, { displayName: displayName, avatarUrl: peerAvatar, peer: peer }) })), open === "more" && (_jsx("div", { className: "pmfa-calls-pop pmfa-calls-pop-float", role: "group", "aria-label": t(locale, "calls.deviceSettings"), children: _jsx(DeviceFields, { controller: resolved, snapshot: snapshot, fields: ["audioInput", "videoInput", "audioOutput"], locale: locale }) })), _jsxs("div", { className: "pmfa-calls-actions", children: [claimed || joinable ? (_jsxs("div", { className: "pmfa-calls-action", children: [_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-dismiss", onClick: () => ignoreDisposed(() => resolved.dismiss()), "aria-label": t(locale, "calls.dismiss"), children: _jsx(CloseIcon, {}) }), t(locale, "calls.dismiss")] })) : (_jsxs("div", { className: "pmfa-calls-action", children: [_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-decline", onClick: () => void resolved.reject().catch(() => undefined), disabled: busy, "aria-label": t(locale, "calls.reject"), children: _jsx(HangupIcon, {}) }), t(locale, "calls.reject")] })), joinable ? (_jsxs("div", { className: "pmfa-calls-action", children: [_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-answer", onClick: join, disabled: busy, "aria-label": t(locale, "calls.join"), children: offersVideo && cameraOn ? _jsx(VideoIcon, {}) : _jsx(PhoneIcon, {}) }), t(locale, "calls.join")] })) : claimed ? null : (_jsxs("div", { className: "pmfa-calls-action", children: [_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-answer", onClick: accept, disabled: busy, "aria-label": t(locale, "calls.answer"), children: offersVideo && cameraOn ? _jsx(VideoIcon, {}) : _jsx(PhoneIcon, {}) }), t(locale, "calls.answer")] }))] }), others.length > 0 && (_jsxs("div", { className: "pmfa-calls-others", children: [_jsx("div", { className: "pmfa-calls-others-title", children: t(locale, "calls.otherIncoming") }), _jsx("ul", { "aria-label": t(locale, "calls.otherIncoming"), children: others.map((invitation) => (_jsxs("li", { children: [_jsx("span", { children: resolveName?.(invitation.from) ?? invitation.from }), _jsx("span", { className: "pmfa-calls-others-state", children: invitation.claimedByOther
+                                            ? t(locale, "calls.answeredElsewhere")
+                                            : invitation.canJoin
+                                                ? t(locale, "calls.join")
+                                                : t(locale, invitation.video
+                                                    ? "calls.videoCall"
+                                                    : "calls.audioCall") }), _jsx("button", { type: "button", className: "pmfa-calls-chip", onClick: () => ignoreDisposed(() => resolved.select(invitation.callId)), children: t(locale, "calls.show") })] }, invitation.callId))) })] }))] }) }));
+}
+// ── Duration ──────────────────────────────────────────────────────────
+/**
+ * Seconds since the call connected, ticking once a second (0 before that).
+ * A call that drops to `reconnecting` keeps counting: the controller holds
+ * `connectedAt` across the flap, and the call it measures is the same one.
+ */
+export function useCallDuration(snapshot) {
+    const connectedAt = snapshot.status === "connected" || snapshot.status === "reconnecting"
+        ? snapshot.connectedAt
+        : undefined;
+    const [seconds, setSeconds] = useState(0);
+    useEffect(() => {
+        if (connectedAt === undefined) {
+            setSeconds(0);
+            return;
+        }
+        const tick = () => setSeconds(Math.max(0, Math.floor((Date.now() - connectedAt) / 1000)));
+        tick();
+        const timer = setInterval(tick, 1000);
+        return () => clearInterval(timer);
+    }, [connectedAt]);
+    return seconds;
+}
+/** Format seconds as `m:ss` (or `h:mm:ss` past an hour). */
+export function formatDuration(totalSeconds) {
+    const h = Math.floor(totalSeconds / 3600);
+    const m = Math.floor((totalSeconds % 3600) / 60);
+    const s = totalSeconds % 60;
+    const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+    const ss = String(s).padStart(2, "0");
+    return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+/**
+ * Name with the line under it: "Ringing +number…" while an outgoing call
+ * rings, the peer number until an incoming call connects, then alternating
+ * number ⇄ duration on the 5-second cadence (crossfaded via keyed remount).
+ */
+function CallIdentity({ name, peer, live, ringingLine, errorLine, flashPeer, seconds, }) {
+    const line = errorLine ??
+        (live
+            ? peer !== null && flashPeer
+                ? peer
+                : formatDuration(seconds)
+            : (ringingLine ?? peer));
+    const lineKey = errorLine !== null
+        ? "error"
+        : live && !(peer !== null && flashPeer)
+            ? "duration"
+            : "peer";
+    return (_jsxs("div", { children: [_jsx("div", { className: "pmfa-calls-name", children: name }), line !== null && (_jsx("div", { className: "pmfa-calls-peer pmfa-calls-flash", role: errorLine === null ? undefined : "status", children: line }, lineKey))] }));
+}
+/**
+ * The in-call stage: one tile per remote participant video when anyone sends
+ * video, the centered avatar hero otherwise, the local preview as a
+ * picture-in-picture tile, and the identity (name + flashing number/duration
+ * line). The merged call audio plays through a hidden element. Always dark by
+ * design.
+ */
+export function CallStage({ controller, createController, displayName, avatarUrl, resolveAvatar, className, labelVideo, renderMedia, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const remoteRef = useRef(null);
+    const localRef = useRef(null);
+    // Snapshots from custom controllers may omit the newer arrays.
+    const remoteVideos = snapshot.remoteVideos ?? [];
+    const remoteHasVideo = remoteVideos.length > 0;
+    const seconds = useCallDuration(snapshot);
+    const peerAvatar = usePeerAvatar(snapshot.peer, resolveAvatar, avatarUrl);
+    const live = snapshot.status === "connected";
+    const localStream = resolved.localStream;
+    const remoteStream = resolved.remoteStream;
+    const [flashPeer, setFlashPeer] = useState(false);
+    useEffect(() => {
+        if (!live) {
+            setFlashPeer(false);
+            return;
+        }
+        const timer = setInterval(() => setFlashPeer((v) => !v), 5000);
+        return () => clearInterval(timer);
+    }, [live]);
+    useEffect(() => attach(remoteRef.current, remoteStream), [remoteStream, snapshot.revision]);
+    useEffect(() => attach(localRef.current, localStream), [localStream, snapshot.revision]);
+    const sink = snapshot.selectedDevices.audioOutput;
+    useEffect(() => {
+        const element = remoteRef.current;
+        if (element?.setSinkId !== undefined && sink !== undefined)
+            void element.setSinkId(sink).catch(() => undefined);
+    }, [sink, snapshot.revision]);
+    if (!ACTIVE_STATUSES.has(snapshot.status))
+        return null;
+    const peer = snapshot.peer ?? "";
+    const showLocalVideo = snapshot.video && !snapshot.videoMuted;
+    // `live` is false while reconnecting, but the call is established and its
+    // layout should stay put — the pre-answer hero preview belongs to a call
+    // that has not connected yet.
+    const preAccept = showLocalVideo && !live && snapshot.status !== "reconnecting";
+    const ringingLine = snapshot.status === "reconnecting"
+        ? `${t(locale, "calls.reconnecting")}…`
+        : // A placed call rings until the controller reports the answer.
+            snapshot.status === "ringing" && snapshot.direction === "outgoing"
+                ? t(locale, "calls.ringingTo", { peer })
+                : null;
+    const identity = (_jsx(CallIdentity, { name: displayName ?? peer, peer: displayName === undefined ? null : peer, live: live, ringingLine: ringingLine, errorLine: snapshot.error?.code === "call_control_failed"
+            ? t(locale, "calls.controlFailed")
+            : null, flashPeer: flashPeer, seconds: seconds }));
+    return (_jsx("div", { className: root.className, style: root.style, dir: root.dir, "data-pmfa": "call", children: _jsx("div", { className: `pmfa-calls-stage${className === undefined ? "" : ` ${className}`}`, children: renderMedia !== undefined ? (renderMedia({
+                ...(localStream === undefined ? {} : { local: localStream }),
+                ...(remoteStream === undefined ? {} : { remote: remoteStream }),
+                videos: remoteVideos.flatMap((info) => {
+                    const stream = resolved.remoteVideos.find((video) => video.key === info.key)?.stream;
+                    return stream === undefined
+                        ? []
+                        : [{ key: info.key, info, stream }];
+                }),
+            })) : (_jsxs(_Fragment, { children: [_jsx("video", { ref: remoteRef, className: "pmfa-calls-audio-sink", autoPlay: true, playsInline: true, "aria-hidden": "true" }), remoteHasVideo && (_jsx(ParticipantVideoGrid, { controller: resolved, ...(labelVideo === undefined ? {} : { labelVideo }) })), !remoteHasVideo ? (preAccept ? (_jsxs("div", { className: "pmfa-calls-hero-preview", children: [identity, _jsx("div", { className: "pmfa-calls-inset", children: _jsx("video", { ref: localRef, className: "pmfa-calls-preview", autoPlay: true, playsInline: true, muted: true }) })] })) : (_jsxs("div", { className: "pmfa-calls-audio-hero", children: [_jsx(CallAvatar, { displayName: displayName, avatarUrl: peerAvatar, peer: peer }), identity] }))) : (_jsx("div", { className: "pmfa-calls-stage-id", children: identity })), showLocalVideo && !preAccept && (_jsx("div", { className: "pmfa-calls-pip", children: _jsx("video", { ref: localRef, autoPlay: true, playsInline: true, muted: true }) }))] })) }) }));
+}
+function defaultVideoLabel(video, locale) {
+    return (video.participant?.phoneNumber ??
+        video.participant?.id ??
+        video.connectionParticipant ??
+        t(locale, "calls.participant"));
+}
+function VideoTile({ stream, label, locale, }) {
+    const ref = useRef(null);
+    useEffect(() => attach(ref.current, stream), [stream]);
+    return (_jsxs("li", { className: "pmfa-calls-tile", children: [_jsx("video", { ref: ref, autoPlay: true, playsInline: true, 
+                // Audio is the merged call stream; tiles carry video only.
+                muted: true, "aria-label": t(locale, "calls.videoFrom", { name: label }) }), _jsx("span", { className: "pmfa-calls-tile-label", children: label })] }));
+}
+/**
+ * One tile per remote participant video, keyed by participant or
+ * connection so a tile survives source changes. Videos are separate
+ * streams; nothing is composed. Renders nothing without remote video.
+ */
+export function ParticipantVideoGrid({ controller, createController, className, labelVideo, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const videos = snapshot.remoteVideos ?? [];
+    if (videos.length === 0)
+        return null;
+    const count = videos.length;
+    return (_jsx("ul", { className: `pmfa-calls-grid${className === undefined ? "" : ` ${className}`}`, "data-count": count > 4 ? "many" : String(count), "aria-label": t(locale, "calls.participantVideos"), children: videos.map((video) => (_jsx(VideoTile, { stream: resolved.remoteVideos.find((remote) => remote.key === video.key)
+                ?.stream, label: labelVideo?.(video) ?? defaultVideoLabel(video, locale), locale: locale }, video.key))) }));
+}
+const PARTICIPANT_STATE = {
+    invited: "calls.participantInvited",
+    ringing: "calls.participantRinging",
+    connected: "calls.participantConnected",
+    left: undefined,
+};
+/** The displayed call's WhatsApp participants and their state. */
+export function ParticipantList({ controller, createController, className, resolveName, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const participants = (snapshot.participants ?? []).filter((p) => p.state !== "left");
+    if (participants.length === 0)
+        return null;
+    return (_jsx("div", { className: root.className, style: root.style, dir: root.dir, "data-pmfa": "call", children: _jsxs("div", { className: `pmfa-calls-card pmfa-calls-people${className === undefined ? "" : ` ${className}`}`, children: [_jsx("div", { className: "pmfa-calls-others-title", id: `pmfa-people-${snapshot.callId ?? ""}`, children: t(locale, "calls.participants") }), _jsx("ul", { "aria-labelledby": `pmfa-people-${snapshot.callId ?? ""}`, children: participants.map((participant) => {
+                        const state = PARTICIPANT_STATE[participant.state];
+                        return (_jsxs("li", { children: [_jsx("span", { children: resolveName?.(participant) ??
+                                        participant.phoneNumber ??
+                                        participant.id }), _jsx("span", { className: "pmfa-calls-others-state", children: [
+                                        state === undefined ? undefined : t(locale, state),
+                                        participant.audioMuted
+                                            ? t(locale, "calls.participantMuted")
+                                            : undefined,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" · ") })] }, participant.id));
+                    }) })] }) }));
+}
+/**
+ * The in-call dock, after the official window: the camera split group
+ * ([toggle|⌄] — the dropdown picks the camera) and the mic split group
+ * ([toggle|⌄] — the dropdown picks microphone + speaker) on the left, the
+ * red hang-up pill on the right. The camera group renders whenever the line
+ * can carry video (unless `disableVideo`) and is disabled until the call
+ * connects. Video is per direction: the camera controls only the outgoing
+ * stream.
+ */
+export function CallControls({ controller, createController, className, disableVideo, showLeave, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const { open, toggle } = useDevicePanels(resolved, snapshot);
+    if (!ACTIVE_STATUSES.has(snapshot.status))
+        return null;
+    const live = snapshot.status === "connected";
+    // Leaving a call this client placed before it connected would keep the
+    // callee ringing; only ending it is offered.
+    const placing = snapshot.direction === "outgoing" &&
+        !live &&
+        snapshot.connectedAt === undefined;
+    const leaveShown = !placing && (showLeave ?? !snapshot.exclusive);
+    const showCamera = snapshot.capabilities.video && disableVideo !== true;
+    // The affordance stays visible on an audio call (the settled design) and is
+    // disabled until it can act: connected, and either already a video call or
+    // an upgrade the media session can actually perform. A session that cannot
+    // renegotiate therefore shows the same disabled button as a call that has
+    // not connected yet, instead of a live one that does nothing.
+    const cameraReady = live && (snapshot.video || resolved.canEnableVideo);
+    const cameraOff = !snapshot.video || snapshot.videoMuted;
+    const onCamera = () => {
+        // On a video call the button mutes/unmutes the outgoing track; on an
+        // audio call it upgrades to video (camera + re-offer on the same
+        // connection) through the controller.
+        if (snapshot.video)
+            ignoreDisposed(() => resolved.setMuted({ video: !snapshot.videoMuted }));
+        // A denied camera, a failed re-offer, or a call that ended mid-upgrade all
+        // reject here. The upgrade rolls itself back, so the audio call carries on
+        // and the button stays live for another try; swallowing the rejection just
+        // keeps a declined camera from surfacing as an unhandled error.
+        else
+            void resolved.enableVideo().catch(() => undefined);
+    };
+    return (_jsx("div", { className: root.className, style: root.style, dir: root.dir, "data-pmfa": "call", children: _jsxs("div", { className: "pmfa-calls-dock-col", children: [open === "mic" && (_jsx("div", { className: "pmfa-calls-pop", role: "group", "aria-label": t(locale, "calls.microphoneSettings"), children: _jsx(DeviceFields, { controller: resolved, snapshot: snapshot, fields: ["audioInput", "audioOutput"], locale: locale }) })), open === "cam" && (_jsx("div", { className: "pmfa-calls-pop", role: "group", "aria-label": t(locale, "calls.cameraSettings"), children: _jsx(DeviceFields, { controller: resolved, snapshot: snapshot, fields: ["videoInput"], locale: locale }) })), _jsxs("div", { className: `pmfa-calls-dock${className === undefined ? "" : ` ${className}`}`, children: [showCamera && (_jsxs("div", { className: `pmfa-calls-group${cameraReady ? "" : " pmfa-calls-disabled"}`, children: [_jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-btn-ctrl${cameraOff ? " pmfa-calls-on" : ""}`, onClick: onCamera, disabled: !cameraReady, "aria-label": t(locale, cameraOff ? "calls.cameraOn" : "calls.cameraOff"), "aria-pressed": cameraOff, children: cameraOff ? _jsx(VideoOffIcon, {}) : _jsx(VideoIcon, {}) }), _jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-btn-acc${open === "cam" ? " pmfa-calls-open" : ""}`, onClick: () => toggle("cam"), disabled: !live, "aria-label": t(locale, "calls.cameraSettings"), "aria-expanded": open === "cam", children: _jsx(ChevronDownIcon, {}) })] })), snapshot.capabilities.mute && (_jsxs("div", { className: "pmfa-calls-group", children: [_jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-btn-ctrl${snapshot.audioMuted ? " pmfa-calls-on" : ""}`, onClick: () => ignoreDisposed(() => resolved.setMuted({ audio: !snapshot.audioMuted })), "aria-label": t(locale, snapshot.audioMuted ? "calls.unmute" : "calls.mute"), "aria-pressed": snapshot.audioMuted, children: snapshot.audioMuted ? _jsx(MicOffIcon, {}) : _jsx(MicIcon, {}) }), _jsx("button", { type: "button", className: `pmfa-calls-btn pmfa-calls-btn-acc${open === "mic" ? " pmfa-calls-open" : ""}`, onClick: () => toggle("mic"), "aria-label": t(locale, "calls.microphoneSettings"), "aria-expanded": open === "mic", children: _jsx(ChevronDownIcon, {}) })] })), leaveShown && (_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-ctrl pmfa-calls-btn-leave", onClick: () => void resolved.leave().catch(() => undefined), "aria-label": t(locale, "calls.leave"), title: t(locale, "calls.leave"), children: _jsx(LeaveIcon, {}) })), _jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-hangup", 
+                            // Rejects on a disposed controller, which a mounted surface
+                            // holding an application-supplied one can still be clicked
+                            // against; the call is over either way.
+                            onClick: () => void resolved.hangup().catch(() => undefined), "aria-label": t(locale, leaveShown ? "calls.end" : "calls.hangup"), title: t(locale, leaveShown ? "calls.end" : "calls.hangup"), children: _jsx(HangupIcon, {}) })] })] }) }));
+}
+// ── DialPad ───────────────────────────────────────────────────────────
+const KEYS = [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "+",
+    "0",
+    "#",
+];
+/**
+ * A dial pad card: E.164 entry plus place-call buttons — audio always, and a
+ * video-call button unless `allowVideo` is false.
+ */
+export function DialPad({ controller, createController, defaultValue = "", allowVideo = true, onPlaced, className, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const [value, setValue] = useState(defaultValue);
+    const busy = snapshot.status === "incoming" || ACTIVE_STATUSES.has(snapshot.status);
+    const canVideo = allowVideo;
+    const dial = (video) => {
+        const to = value.trim();
+        // The buttons are disabled while a call is up, but the input keeps focus
+        // and its value, so Enter would otherwise place a second call — and
+        // `place()` aborts the current operation, tearing down the live call.
+        if (busy || to.length === 0)
+            return;
+        // `place()` resolves even when the placement failed — the controller
+        // reports that through the snapshot — so the snapshot is what says
+        // whether there is now a call to announce.
+        void resolved
+            .place(to, { video })
+            .then(() => {
+            if (ACTIVE_STATUSES.has(resolved.getSnapshot().status))
+                onPlaced?.(to);
+        })
+            // A placement failure lands in the snapshot, not here, but `place()`
+            // does reject on a disposed controller — which a mounted pad holding a
+            // shared one can still be dialled against.
+            .catch(() => undefined);
+    };
+    return (_jsx("div", { className: root.className, style: root.style, dir: root.dir, "data-pmfa": "call", children: _jsxs("div", { className: `pmfa-calls-card pmfa-calls-dialpad${className === undefined ? "" : ` ${className}`}`, children: [_jsx("input", { className: "pmfa-calls-input", type: "tel", inputMode: "tel", placeholder: "+1 555 000 0000", value: value, onChange: (event) => setValue(event.currentTarget.value), onKeyDown: (event) => {
+                        if (event.key === "Enter")
+                            dial(false);
+                    }, "aria-label": t(locale, "calls.dialPlaceholder") }), _jsx("div", { className: "pmfa-calls-keys", children: KEYS.map((digit) => (_jsx("button", { type: "button", className: "pmfa-calls-key", onClick: () => setValue((v) => v + digit), "aria-label": digit, children: _jsx("span", { className: "pmfa-calls-key-digit", children: digit }) }, digit))) }), _jsxs("div", { className: "pmfa-calls-dial-actions", children: [_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-answer", onClick: () => dial(false), disabled: busy || value.trim().length === 0, "aria-label": t(locale, "calls.placeAudioCall"), children: _jsx(PhoneIcon, {}) }), canVideo && (_jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-btn-answer", onClick: () => dial(true), disabled: busy || value.trim().length === 0, "aria-label": t(locale, "calls.placeVideoCall"), children: _jsx(VideoIcon, {}) })), _jsx("button", { type: "button", className: "pmfa-calls-key pmfa-calls-key-erase", onClick: () => setValue((v) => v.slice(0, -1)), disabled: value.length === 0, "aria-label": t(locale, "calls.deleteDigit"), children: _jsx(EraseIcon, {}) })] })] }) }));
+}
+/**
+ * Owns a separate, freely resizable call window (like the desktop client's)
+ * and hands back a container to portal the stage + controls into. Media
+ * streams keep playing across same-origin windows, so portal'd `<video>`
+ * elements just work.
+ */
+/**
+ * @param title Window title. `CallSurface` passes the localized
+ * `calls.popoutTitle`; the default keeps the hook usable on its own.
+ */
+export function useCallPopout(title = "Call") {
+    const windowRef = useRef(null);
+    const [container, setContainer] = useState(null);
+    const close = useCallback(() => {
+        windowRef.current?.close();
+        windowRef.current = null;
+        setContainer(null);
+    }, []);
+    const open = useCallback(() => {
+        if (typeof window === "undefined" || windowRef.current !== null)
+            return;
+        const popup = window.open("", "pmfa-call", "popup=yes,width=420,height=600");
+        if (popup === null)
+            return; // popup blocked — the call stays inline
+        const doc = popup.document;
+        doc.title = title;
+        const style = doc.createElement("style");
+        style.textContent = `html,body{margin:0;height:100%;background:oklch(0.15 0 0);}${CALLS_STYLES}`;
+        doc.head.appendChild(style);
+        const root = doc.createElement("div");
+        root.style.height = "100%";
+        doc.body.appendChild(root);
+        windowRef.current = popup;
+        setContainer(root);
+    }, [title]);
+    useEffect(() => {
+        if (container === null)
+            return;
+        const timer = setInterval(() => {
+            if (windowRef.current?.closed === true) {
+                windowRef.current = null;
+                setContainer(null);
+            }
+        }, 500);
+        return () => clearInterval(timer);
+    }, [container]);
+    useEffect(() => () => windowRef.current?.close(), []);
+    return { popped: container !== null, open, close, container };
+}
+/**
+ * The whole call experience in one component: a fixed overlay that shows the
+ * incoming-call card while ringing and the stage + control dock during a
+ * call. The ↗ button pops the call into its own resizable browser window;
+ * closing that window (or the call ending) pops it back inline.
+ */
+export function CallSurface({ controller, createController, resolveName, resolveAvatar, disableVideo, popout: allowPopout = true, renderMedia, exclusive = false, showParticipants = true, showLeave, labelVideo, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const root = useCallsRoot();
+    const { locale } = root;
+    const popout = useCallPopout(t(locale, "calls.popoutTitle"));
+    const peer = snapshot.peer;
+    const displayName = peer === undefined ? undefined : resolveName?.(peer);
+    const active = ACTIVE_STATUSES.has(snapshot.status);
+    const incoming = snapshot.status === "incoming";
+    const { popped, close } = popout;
+    useEffect(() => {
+        if (!active && popped)
+            close();
+    }, [active, popped, close]);
+    if (!incoming && !active)
+        return null;
+    const overlay = {
+        position: "fixed",
+        right: 20,
+        bottom: 20,
+        zIndex: 2147483000,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 12,
+        width: 340,
+        maxWidth: "calc(100vw - 40px)",
+    };
+    const stageProps = {
+        controller: resolved,
+        ...(displayName === undefined ? {} : { displayName }),
+        ...(resolveAvatar === undefined ? {} : { resolveAvatar }),
+        ...(renderMedia === undefined ? {} : { renderMedia }),
+        ...(labelVideo === undefined ? {} : { labelVideo }),
+    };
+    const callUi = (_jsxs(_Fragment, { children: [_jsx(CallStage, { ...stageProps }), _jsx(CallControls, { controller: resolved, ...(disableVideo === undefined ? {} : { disableVideo }), ...(showLeave === undefined ? {} : { showLeave }) }), showParticipants && _jsx(ParticipantList, { controller: resolved })] }));
+    return (_jsxs("div", { style: overlay, "data-pmfa": "call-surface", children: [_jsx(IncomingCallCard, { controller: resolved, exclusive: exclusive, ...(displayName === undefined ? {} : { displayName }), ...(resolveAvatar === undefined ? {} : { resolveAvatar }), ...(resolveName === undefined ? {} : { resolveName }) }), active &&
+                (popout.popped && popout.container !== null ? (_jsxs(_Fragment, { children: [createPortal(_jsx("div", { className: `${root.className} pmfa-calls-popout`, style: root.style, dir: root.dir, children: callUi }), popout.container), _jsx("div", { className: root.className, style: root.style, dir: root.dir, children: _jsxs("div", { className: "pmfa-calls-popbar", children: [t(locale, "calls.popOut"), _jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-mini", onClick: popout.close, "aria-label": t(locale, "calls.popIn"), children: _jsx(PopoutIcon, { style: { transform: "scaleX(-1)" } }) })] }) })] })) : (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [callUi, allowPopout && (_jsx("div", { className: root.className, style: root.style, dir: root.dir, children: _jsx("div", { className: "pmfa-calls-more", children: _jsx("button", { type: "button", className: "pmfa-calls-btn pmfa-calls-mini", onClick: popout.open, "aria-label": t(locale, "calls.popOut"), children: _jsx(PopoutIcon, {}) }) }) }))] })))] }));
+}
+// ── Stylesheet ────────────────────────────────────────────────────────
+/**
+ * One injected `<style>` tag, scoped under `.pmfa-calls` so nothing leaks into
+ * the host app, inside the `polymorfa` cascade layer so unlayered host CSS
+ * wins. Colors derive from the shared `--pmfa-*` appearance variables
+ * with the monochrome Material-3 palette as fallbacks; the verbs use
+ * `--pmfa-color-success` / `--pmfa-color-danger`. All motion is disabled under
+ * `prefers-reduced-motion: reduce`.
+ */
+export const CALLS_STYLES = `
+@layer polymorfa {
+.pmfa-calls {
+  --pmfa-calls-accent: var(--pmfa-color-foreground, oklch(0.15 0 0));
+  --pmfa-calls-accent-soft: oklch(0.96 0 0);
+  --pmfa-calls-answer: var(--pmfa-color-success, oklch(0.76 0.19 150));
+  --pmfa-calls-answer-strong: oklch(0.68 0.18 150);
+  --pmfa-calls-danger: var(--pmfa-color-danger, oklch(0.5 0.19 28));
+  --pmfa-calls-danger-strong: oklch(0.44 0.18 28);
+  --pmfa-calls-card: var(--pmfa-color-background, oklch(1 0 0));
+  --pmfa-calls-fg: var(--pmfa-color-foreground, oklch(0.17 0 0));
+  --pmfa-calls-muted: var(--pmfa-color-muted, oklch(0.49 0.008 250));
+  --pmfa-calls-border: var(--pmfa-color-border, oklch(0.91 0 0));
+  --pmfa-calls-stage: oklch(0.15 0 0);
+  --pmfa-calls-stage-fg: oklch(0.985 0 0);
+  --pmfa-calls-stage-muted: oklch(0.75 0 0);
+  --pmfa-calls-stage-line: oklch(1 0 0 / 0.12);
+  --pmfa-calls-avatar-1: oklch(0.55 0.09 200);
+  --pmfa-calls-avatar-2: oklch(0.55 0.12 255);
+  --pmfa-calls-avatar-3: oklch(0.55 0.14 292);
+  --pmfa-calls-avatar-4: oklch(0.58 0.14 10);
+  --pmfa-calls-avatar-5: oklch(0.6 0.11 70);
+  --pmfa-calls-avatar-6: oklch(0.55 0.11 150);
+  --pmfa-calls-avatar-7: oklch(0.5 0.13 275);
+  --pmfa-calls-avatar-8: oklch(0.55 0.14 330);
+  --pmfa-calls-radius: var(--pmfa-radius-medium, 0.5rem);
+  --pmfa-calls-font: var(--pmfa-font-family, "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
+  font-family: var(--pmfa-calls-font);
+  color: var(--pmfa-calls-fg);
+  font-size: 14px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+}
+.pmfa-calls *, .pmfa-calls *::before, .pmfa-calls *::after { box-sizing: border-box; }
+.pmfa-calls :focus-visible { outline: 2px solid var(--pmfa-calls-accent); outline-offset: 2px; }
+.pmfa-calls.pmfa-calls-dark {
+  --pmfa-calls-accent: oklch(0.92 0 0);
+  --pmfa-calls-accent-soft: oklch(1 0 0 / 0.08);
+  --pmfa-calls-card: oklch(0.21 0 0);
+  --pmfa-calls-fg: oklch(0.985 0 0);
+  --pmfa-calls-muted: oklch(0.74 0 0);
+  --pmfa-calls-border: oklch(1 0 0 / 0.12);
+}
+@media (prefers-color-scheme: dark) {
+  .pmfa-calls.pmfa-calls-auto {
+    --pmfa-calls-accent: oklch(0.92 0 0);
+    --pmfa-calls-accent-soft: oklch(1 0 0 / 0.08);
+    --pmfa-calls-card: oklch(0.21 0 0);
+    --pmfa-calls-fg: oklch(0.985 0 0);
+    --pmfa-calls-muted: oklch(0.74 0 0);
+    --pmfa-calls-border: oklch(1 0 0 / 0.12);
+  }
+}
+.pmfa-calls-card { background: var(--pmfa-calls-card); border: 1px solid var(--pmfa-calls-border); border-radius: var(--pmfa-calls-radius); }
+.pmfa-calls-incoming { position: relative; width: 100%; padding: 22px 16px 18px; display: flex; flex-direction: column; text-align: center; background: var(--pmfa-calls-stage); color: var(--pmfa-calls-stage-fg); border-color: var(--pmfa-calls-stage-line); animation: pmfa-calls-rise 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
+.pmfa-calls-incoming .pmfa-calls-name { font-size: 19px; font-weight: 600; }
+.pmfa-calls-subtitle { margin-top: 3px; font-size: 13px; color: var(--pmfa-calls-stage-muted); }
+.pmfa-calls-media { position: relative; width: 100%; margin-top: 16px; border-radius: var(--pmfa-calls-radius); overflow: hidden; aspect-ratio: 16 / 10; background: oklch(0.08 0 0); }
+.pmfa-calls-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
+.pmfa-calls-media-audio { overflow: visible; background: transparent; display: flex; align-items: center; justify-content: center; }
+.pmfa-calls-media-audio .pmfa-calls-avatar-wrap { margin-bottom: 0; }
+.pmfa-calls-mini { width: 36px; height: 36px; background: oklch(1 0 0 / 0.14); color: oklch(0.985 0 0); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
+.pmfa-calls-mini:hover { background: oklch(1 0 0 / 0.22); }
+.pmfa-calls-mini svg { width: 16px; height: 16px; }
+.pmfa-calls-mini.pmfa-calls-on { background: oklch(0.985 0 0); color: oklch(0.2 0 0); }
+.pmfa-calls-more { position: absolute; top: 10px; right: 10px; z-index: 2; }
+.pmfa-calls-media-ctrls { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 2; }
+.pmfa-calls-pop-float { position: absolute; left: 50%; transform: translateX(-50%); top: 96px; z-index: 4; }
+.pmfa-calls-avatar-wrap { position: relative; width: 72px; height: 72px; margin-bottom: 14px; }
+.pmfa-calls-avatar { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; color: oklch(0.985 0 0); font-size: 24px; font-weight: 500; letter-spacing: 0.01em; background: oklch(0.22 0 0); }
+.pmfa-calls-audio-hero .pmfa-calls-avatar { border: 1.5px solid var(--pmfa-calls-stage-line); }
+.pmfa-calls-avatar-c1 { background: var(--pmfa-calls-avatar-1); }
+.pmfa-calls-avatar-c2 { background: var(--pmfa-calls-avatar-2); }
+.pmfa-calls-avatar-c3 { background: var(--pmfa-calls-avatar-3); }
+.pmfa-calls-avatar-c4 { background: var(--pmfa-calls-avatar-4); }
+.pmfa-calls-avatar-c5 { background: var(--pmfa-calls-avatar-5); }
+.pmfa-calls-avatar-c6 { background: var(--pmfa-calls-avatar-6); }
+.pmfa-calls-avatar-c7 { background: var(--pmfa-calls-avatar-7); }
+.pmfa-calls-avatar-c8 { background: var(--pmfa-calls-avatar-8); }
+.pmfa-calls-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.pmfa-calls-name { font-size: 16px; font-weight: 500; letter-spacing: 0.01em; text-wrap: balance; }
+.pmfa-calls-peer { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--pmfa-calls-muted); letter-spacing: 0.01em; }
+.pmfa-calls-flash { animation: pmfa-calls-swap 0.35s ease; }
+@keyframes pmfa-calls-swap { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+.pmfa-calls-btn { appearance: none; border: none; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; color: oklch(0.985 0 0); transition: background-color 0.14s ease; }
+.pmfa-calls-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.pmfa-calls-btn svg { width: 22px; height: 22px; }
+.pmfa-calls-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 22px; width: 100%; }
+.pmfa-calls-action { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; color: var(--pmfa-calls-stage-muted); }
+.pmfa-calls-btn-answer { width: 56px; height: 56px; background: var(--pmfa-calls-answer); animation: pmfa-calls-beckon 2s ease-in-out infinite; }
+.pmfa-calls-btn-answer:hover { background: var(--pmfa-calls-answer-strong); }
+.pmfa-calls-btn-decline { width: 56px; height: 56px; background: var(--pmfa-calls-danger); }
+.pmfa-calls-btn-decline:hover { background: var(--pmfa-calls-danger-strong); }
+@keyframes pmfa-calls-beckon { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.76 0.19 150 / 0.4); } 50% { box-shadow: 0 0 0 10px oklch(0.76 0.19 150 / 0); } }
+@keyframes pmfa-calls-fade { from { opacity: 0; } to { opacity: 1; } }
+.pmfa-calls-pop { width: 236px; padding: 12px; display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--pmfa-calls-card); color: var(--pmfa-calls-fg); border: 1px solid var(--pmfa-calls-border); border-radius: calc(var(--pmfa-calls-radius) + 4px); animation: pmfa-calls-fade 0.16s ease; }
+.pmfa-calls-field { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pmfa-calls-muted); }
+.pmfa-calls-select { width: 100%; padding: 7px 8px; font: inherit; font-family: var(--pmfa-calls-font); font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--pmfa-calls-fg); background: transparent; border: 1px solid var(--pmfa-calls-border); border-radius: var(--pmfa-calls-radius); }
+.pmfa-calls-select:focus { outline: none; border-color: var(--pmfa-calls-accent); }
+.pmfa-calls-select option { color: initial; background: initial; }
+.pmfa-calls-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--pmfa-calls-radius); overflow: hidden; background: radial-gradient(130% 90% at 50% 0%, oklch(1 0 0 / 0.06) 0%, transparent 62%), var(--pmfa-calls-stage); color: var(--pmfa-calls-stage-fg); }
+.pmfa-calls-audio-sink { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.pmfa-calls-grid { position: absolute; inset: 0; margin: 0; padding: 4px; list-style: none; display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); grid-auto-rows: 1fr; background: var(--pmfa-calls-stage); }
+.pmfa-calls-grid[data-count="1"] { grid-template-columns: 1fr; padding: 0; }
+.pmfa-calls-tile { position: relative; min-height: 0; overflow: hidden; border-radius: var(--pmfa-calls-radius); background: oklch(0.08 0 0); }
+.pmfa-calls-grid[data-count="1"] .pmfa-calls-tile { border-radius: 0; }
+.pmfa-calls-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.pmfa-calls-tile-label { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 6px; border-radius: 4px; font-size: 11.5px; color: var(--pmfa-calls-stage-fg); background: oklch(0.1 0 0 / 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pmfa-calls-btn-dismiss { width: 56px; height: 56px; background: oklch(1 0 0 / 0.14); }
+.pmfa-calls-btn-dismiss:hover { background: oklch(1 0 0 / 0.22); }
+.pmfa-calls-btn-leave { width: 46px; }
+.pmfa-calls-others, .pmfa-calls-people { width: 100%; margin-top: 14px; text-align: left; }
+.pmfa-calls-people { margin-top: 0; padding: 12px 14px; }
+.pmfa-calls-others ul, .pmfa-calls-people ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.pmfa-calls-others li, .pmfa-calls-people li { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
+.pmfa-calls-others li > span:first-child, .pmfa-calls-people li > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pmfa-calls-others-title { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pmfa-calls-muted); }
+.pmfa-calls-incoming .pmfa-calls-others-title, .pmfa-calls-others-state { color: var(--pmfa-calls-stage-muted); }
+.pmfa-calls-people .pmfa-calls-others-state { color: var(--pmfa-calls-muted); }
+.pmfa-calls-others-state { font-size: 12px; white-space: nowrap; }
+.pmfa-calls-chip { appearance: none; border: 1px solid var(--pmfa-calls-stage-line); background: transparent; color: inherit; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
+.pmfa-calls-chip:hover { background: oklch(1 0 0 / 0.12); }
+.pmfa-calls-audio-hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
+.pmfa-calls-audio-hero .pmfa-calls-name { font-size: 19px; }
+.pmfa-calls-audio-hero .pmfa-calls-peer { color: var(--pmfa-calls-stage-muted); }
+.pmfa-calls-hero-preview { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; text-align: center; }
+.pmfa-calls-hero-preview .pmfa-calls-peer { color: var(--pmfa-calls-stage-muted); }
+.pmfa-calls-inset { position: relative; width: 82%; aspect-ratio: 16 / 10; border-radius: var(--pmfa-calls-radius); overflow: hidden; background: oklch(0.08 0 0); }
+.pmfa-calls-pip { position: absolute; right: 14px; bottom: 14px; width: 96px; aspect-ratio: 3 / 4; border-radius: var(--pmfa-calls-radius); overflow: hidden; border: 1.5px solid var(--pmfa-calls-stage-line); background: oklch(0.24 0 0); }
+.pmfa-calls-pip video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
+.pmfa-calls-stage-id { position: absolute; top: 0; left: 0; right: 0; padding: 16px 18px 30px; background: linear-gradient(oklch(0.1 0 0 / 0.6), transparent); color: var(--pmfa-calls-stage-fg); }
+.pmfa-calls-stage-id .pmfa-calls-peer { color: var(--pmfa-calls-stage-muted); }
+.pmfa-calls-dock-col { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
+.pmfa-calls-dock-col > .pmfa-calls-pop { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 5; }
+.pmfa-calls-dock { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--pmfa-calls-stage-line); background: oklch(0.17 0 0 / 0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); animation: pmfa-calls-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
+.pmfa-calls-btn-ctrl { width: 46px; height: 46px; background: oklch(1 0 0 / 0.1); color: oklch(0.985 0 0); }
+.pmfa-calls-btn-ctrl:hover { background: oklch(1 0 0 / 0.18); }
+.pmfa-calls-group { display: inline-flex; align-items: stretch; border-radius: 999px; background: oklch(1 0 0 / 0.1); overflow: hidden; }
+.pmfa-calls-group.pmfa-calls-disabled { opacity: 0.45; }
+.pmfa-calls-group .pmfa-calls-btn-ctrl { background: transparent; border-radius: 0; }
+.pmfa-calls-group .pmfa-calls-btn-ctrl:hover { background: oklch(1 0 0 / 0.12); }
+.pmfa-calls-group .pmfa-calls-btn-ctrl.pmfa-calls-on { background: oklch(0.985 0 0); }
+.pmfa-calls-btn-acc { width: 30px; height: 46px; border-radius: 0; background: transparent; color: oklch(0.985 0 0 / 0.8); border-left: 1px solid oklch(1 0 0 / 0.12); }
+.pmfa-calls-btn-acc:hover { background: oklch(1 0 0 / 0.12); transform: none; }
+.pmfa-calls-btn-acc svg { width: 14px; height: 14px; transition: transform 0.18s ease; }
+.pmfa-calls-btn-acc.pmfa-calls-open svg { transform: rotate(180deg); }
+.pmfa-calls-btn-ctrl.pmfa-calls-on { background: oklch(0.985 0 0); color: oklch(0.2 0 0); }
+.pmfa-calls-btn-hangup { width: 64px; height: 46px; border-radius: 999px; background: var(--pmfa-calls-danger); }
+.pmfa-calls-btn-hangup:hover { background: var(--pmfa-calls-danger-strong); }
+.pmfa-calls-dialpad { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.pmfa-calls-input { width: 100%; border: none; background: transparent; color: var(--pmfa-calls-fg); font-variant-numeric: tabular-nums; font-size: 22px; text-align: center; letter-spacing: 0.03em; padding: 6px 2px 10px; border-bottom: 1px solid var(--pmfa-calls-border); }
+.pmfa-calls-input:focus { outline: none; border-bottom-color: var(--pmfa-calls-accent); }
+.pmfa-calls-input::placeholder { color: var(--pmfa-calls-muted); opacity: 0.6; }
+.pmfa-calls-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }
+.pmfa-calls-key { appearance: none; border: none; margin: 0; width: 62px; height: 48px; border-radius: var(--pmfa-calls-radius); background: transparent; color: var(--pmfa-calls-fg); font-family: var(--pmfa-calls-font); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.12s ease; }
+.pmfa-calls-key:hover { background: var(--pmfa-calls-accent-soft); }
+.pmfa-calls-key-digit { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
+.pmfa-calls-dial-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
+.pmfa-calls-dialpad .pmfa-calls-btn-answer { animation: none; }
+.pmfa-calls-key-erase { color: var(--pmfa-calls-muted); }
+.pmfa-calls-key-erase:hover { color: var(--pmfa-calls-fg); background: var(--pmfa-calls-accent-soft); }
+.pmfa-calls-key-erase svg { width: 20px; height: 20px; }
+.pmfa-calls-popout { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: 12px; background: var(--pmfa-calls-stage); }
+.pmfa-calls-popout .pmfa-calls-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
+.pmfa-calls-popbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 8px 8px 14px; border-radius: var(--pmfa-calls-radius); border: 1px solid var(--pmfa-calls-stage-line); background: var(--pmfa-calls-stage); color: var(--pmfa-calls-stage-fg); font-size: 13px; }
+@keyframes pmfa-calls-rise { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@media (prefers-reduced-motion: reduce) {
+  .pmfa-calls *, .pmfa-calls *::before, .pmfa-calls *::after { animation: none !important; transition: none !important; }
+}
+}
+`;