@peers-app/peers-ui 0.23.14 → 0.24.0

package/dist/screens/device-pairing/device-pairing.js

@@ -9,7 +9,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = require("react");
 const react_qr_code_1 = __importDefault(require("react-qr-code"));
+const qr_scanner_1 = require("../../components/qr-scanner");
 const use_device_pairing_state_1 = require("./use-device-pairing-state");
+function isPairingCode(text) {
+    try {
+        (0, peers_sdk_1.parsePairingCode)(text);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+const TERMINAL_PHASES = ["complete", "rejected", "error"];
 function formatCountdown(expiresAt) {
     if (!expiresAt) {
         return "";
@@ -17,17 +28,30 @@ function formatCountdown(expiresAt) {
     const seconds = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000));
     return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
 }
-function PairingProgress({ state }) {
-    const messages = {
-        inviting: "Waiting for the new device…",
-        connecting: "Establishing a secure connection…",
-        "waiting-for-approval": "Waiting for approval on the other device…",
-        transferring: "Installing encrypted account credentials…",
-    };
-    return ((0, jsx_runtime_1.jsxs)("output", { className: "text-center py-4 d-block", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-0", children: messages[state.phase] ?? "Working…" })] }));
+function detectDeviceType() {
+    return /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "browser";
+}
+function useCountdownClock(expiresAt) {
+    const [, setClock] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!expiresAt) {
+            return;
+        }
+        const timer = window.setInterval(() => setClock((value) => value + 1), 1000);
+        return () => window.clearInterval(timer);
+    }, [expiresAt]);
+}
+function PairingProgress(props) {
+    return ((0, jsx_runtime_1.jsxs)("output", { className: "text-center py-4 d-block", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-0", children: props.messages[props.state.phase] ?? "Working…" })] }));
+}
+function ProgressWithCancel(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PairingProgress, { state: props.state, messages: props.messages }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" }) })] }));
+}
+function RemoteDeviceLabel({ state }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.remoteDevice?.deviceName || "Unnamed device", state.remoteDevice?.deviceType ? ` (${state.remoteDevice.deviceType})` : ""] }));
 }
-function PairingComparison(props) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Compare these numbers" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Confirm that both devices show the same number and the expected device before approving." }), (0, jsx_runtime_1.jsx)("div", { className: "display-4 font-monospace text-primary mb-3", style: { letterSpacing: "0.12em" }, children: props.state.sas }), (0, jsx_runtime_1.jsxs)("p", { className: "mb-4", children: [props.state.remoteDevice?.deviceName || "Unnamed device", props.state.remoteDevice?.deviceType ? ` (${props.state.remoteDevice.deviceType})` : ""] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", disabled: props.approving, onClick: props.onApprove, children: props.approving ? "Approving…" : "Numbers match — approve" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger", disabled: props.approving, onClick: props.onReject, children: "Reject" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", disabled: props.approving, onClick: props.onCancel, children: "Cancel" })] })] }));
+function SourceApproval(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h4", { children: "Add this device?" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "The code matched. Approving sends your account credentials to this device so it can sign in as you." }), (0, jsx_runtime_1.jsx)("p", { className: "fs-5 mb-4", children: (0, jsx_runtime_1.jsx)(RemoteDeviceLabel, { state: props.state }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", disabled: props.approving, onClick: props.onApprove, children: props.approving ? "Approving…" : "Approve" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-danger", disabled: props.approving, onClick: props.onReject, children: "Reject" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", disabled: props.approving, onClick: props.onCancel, children: "Cancel" })] })] }));
 }
 function TerminalPanel(props) {
     const complete = props.state.phase === "complete";
@@ -37,15 +61,14 @@ function TerminalPanel(props) {
                         ? "Pairing was rejected. No credentials were installed."
                         : props.state.error || "Pairing could not be completed. No credentials were installed." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onClose, children: complete ? "Done" : "Back" })] }));
 }
-function ProgressWithCancel(props) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PairingProgress, { state: props.state }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" }) })] }));
-}
 function usePairingSessionLifecycle(state) {
     const sessionId = (0, react_1.useRef)(undefined);
     const phase = (0, react_1.useRef)("idle");
     const mounted = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
-        if (state.sessionId && state.sessionId === sessionId.current) {
+        if (state.sessionId) {
+            // The host may rotate to a new session (destination code rotation); follow it.
+            sessionId.current = state.sessionId;
             phase.current = state.phase;
         }
     }, [state.phase, state.sessionId]);
@@ -54,7 +77,7 @@ function usePairingSessionLifecycle(state) {
         return () => {
             mounted.current = false;
             const activeSessionId = sessionId.current;
-            if (activeSessionId && !["idle", "complete", "rejected", "error"].includes(phase.current)) {
+            if (activeSessionId && !["idle", ...TERMINAL_PHASES].includes(phase.current)) {
                 void peers_sdk_1.rpcServerCalls
                     .devicePairingCancel({ sessionId: activeSessionId })
                     .catch(() => undefined);
@@ -63,47 +86,8 @@ function usePairingSessionLifecycle(state) {
     }, []);
     return { sessionId, phase, mounted };
 }
-/** Signed-in source flow opened from Settings. */
-function SourceDevicePairing(props) {
-    const state = (0, use_device_pairing_state_1.useDevicePairingState)();
-    const lifecycle = usePairingSessionLifecycle(state);
-    const started = (0, react_1.useRef)(false);
-    const [invitationUrl, setInvitationUrl] = (0, react_1.useState)("");
-    const [localError, setLocalError] = (0, react_1.useState)("");
+function useCeremonyActions(lifecycle, onLeave, setLocalError) {
     const [approving, setApproving] = (0, react_1.useState)(false);
-    const [, setClock] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        if (started.current) {
-            return;
-        }
-        started.current = true;
-        void peers_sdk_1.rpcServerCalls
-            .devicePairingStartSource()
-            .then(async (result) => {
-            lifecycle.sessionId.current = result.state.sessionId;
-            lifecycle.phase.current = result.state.phase;
-            if (!lifecycle.mounted.current && result.state.sessionId) {
-                await peers_sdk_1.rpcServerCalls
-                    .devicePairingCancel({ sessionId: result.state.sessionId })
-                    .catch(() => undefined);
-                return;
-            }
-            setInvitationUrl(result.invitationUrl);
-        })
-            .catch(() => setLocalError("Could not create a pairing invitation."));
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!state.expiresAt) {
-            return;
-        }
-        const timer = window.setInterval(() => setClock((value) => value + 1), 1000);
-        return () => window.clearInterval(timer);
-    }, [state.expiresAt]);
-    (0, react_1.useEffect)(() => {
-        if (state.phase !== "inviting") {
-            setInvitationUrl("");
-        }
-    }, [state.phase]);
     const act = async (action) => {
         const sessionId = lifecycle.sessionId.current;
         if (!sessionId) {
@@ -131,107 +115,122 @@ function SourceDevicePairing(props) {
         if (sessionId) {
             await peers_sdk_1.rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
         }
-        props.onClose();
+        onLeave();
     };
-    if (localError) {
-        return (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: localError });
-    }
-    if (["complete", "rejected", "error"].includes(state.phase)) {
-        return (0, jsx_runtime_1.jsx)(TerminalPanel, { state: state, onClose: props.onClose });
-    }
-    if (state.phase === "comparing" && state.sas) {
-        return ((0, jsx_runtime_1.jsx)(PairingComparison, { state: state, approving: approving, onApprove: () => void act("approve"), onReject: () => void act("reject"), onCancel: () => void cancel() }));
-    }
-    if (state.phase === "waiting-for-approval" || state.phase === "transferring") {
-        return (0, jsx_runtime_1.jsx)(ProgressWithCancel, { state: state, onCancel: () => void cancel() });
-    }
-    if (invitationUrl) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Scan this on the signed-out device you want to add." }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block bg-white rounded p-3 mb-3", children: (0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: invitationUrl, size: 220, "aria-label": "Device pairing QR code" }) }), (0, jsx_runtime_1.jsxs)("p", { className: "small text-muted", children: ["Expires in ", formatCountdown(state.expiresAt)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => void (0, peers_sdk_1.copyToClipboard)(invitationUrl), children: "Copy pairing link" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: () => void cancel(), children: "Cancel" })] })] }));
-    }
-    return (0, jsx_runtime_1.jsx)(PairingProgress, { state: state });
+    return { approving, act, cancel };
 }
-/** Signed-out destination flow opened by a QR link or manual invitation paste. */
-function DestinationDevicePairing(props) {
+const SOURCE_PROGRESS_MESSAGES = {
+    connecting: "Connecting to the new device…",
+    authenticating: "Verifying the pairing code…",
+    transferring: "Sending encrypted account credentials…",
+};
+/** Signed-in source flow opened from Settings: type the code shown on the new device, then approve. */
+function SourceDevicePairing(props) {
     const state = (0, use_device_pairing_state_1.useDevicePairingState)();
     const lifecycle = usePairingSessionLifecycle(state);
-    const [invitation, setInvitation] = (0, react_1.useState)(props.initialInvitation ?? "");
+    const [code, setCode] = (0, react_1.useState)("");
+    const [scanning, setScanning] = (0, react_1.useState)(false);
+    const [starting, setStarting] = (0, react_1.useState)(false);
     const [localError, setLocalError] = (0, react_1.useState)("");
-    const [approving, setApproving] = (0, react_1.useState)(false);
-    const autoStarted = (0, react_1.useRef)(false);
-    const start = async (value = invitation) => {
+    const { approving, act, cancel } = useCeremonyActions(lifecycle, props.onClose, setLocalError);
+    useCountdownClock(state.expiresAt);
+    const start = async (rawCode = code) => {
         setLocalError("");
+        setStarting(true);
         try {
-            const result = await peers_sdk_1.rpcServerCalls.devicePairingStartDestination({
-                invitation: value.trim(),
-                deviceType: /Mobi|Android/i.test(navigator.userAgent) ? "mobile" : "browser",
-            });
+            const result = await peers_sdk_1.rpcServerCalls.devicePairingStartSource({ code: rawCode.trim() });
             lifecycle.sessionId.current = result.sessionId;
             lifecycle.phase.current = result.phase;
             if (!lifecycle.mounted.current && result.sessionId) {
                 await peers_sdk_1.rpcServerCalls
                     .devicePairingCancel({ sessionId: result.sessionId })
                     .catch(() => undefined);
-                return;
             }
-            setInvitation("");
-            props.onInvitationConsumed?.();
         }
         catch {
-            setLocalError("That pairing invitation is invalid, expired, or unavailable.");
+            setLocalError("That code was not recognized or the new device is no longer waiting.");
+        }
+        finally {
+            setStarting(false);
         }
     };
+    if (TERMINAL_PHASES.includes(state.phase)) {
+        return (0, jsx_runtime_1.jsx)(TerminalPanel, { state: state, onClose: props.onClose });
+    }
+    if (state.phase === "waiting-for-approval") {
+        return ((0, jsx_runtime_1.jsx)(SourceApproval, { state: state, approving: approving, onApprove: () => void act("approve"), onReject: () => void act("reject"), onCancel: () => void cancel() }));
+    }
+    if (state.phase === "connecting" ||
+        state.phase === "authenticating" ||
+        state.phase === "transferring") {
+        return ((0, jsx_runtime_1.jsx)(ProgressWithCancel, { state: state, messages: SOURCE_PROGRESS_MESSAGES, onCancel: () => void cancel() }));
+    }
+    if (scanning) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Point the camera at the code on the new device." }), (0, jsx_runtime_1.jsx)(qr_scanner_1.QrScanner, { accept: isPairingCode, onScan: (scanned) => {
+                        setScanning(false);
+                        setCode(scanned);
+                        void start(scanned);
+                    }, onError: (message) => {
+                        setScanning(false);
+                        setLocalError(message);
+                    } }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary mt-3", onClick: () => setScanning(false), children: "Type it instead" })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("form", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, onSubmit: (event) => {
+            event.preventDefault();
+            void start();
+        }, children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-muted", children: ["On the new device, open Peers and choose ", (0, jsx_runtime_1.jsx)("strong", { children: "Sign in from another device" }), ". Scan the code it shows, or type it here."] }), (0, qr_scanner_1.canScanQr)() ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-primary mb-3", disabled: starting, onClick: () => setScanning(true), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-qr-code-scan me-1" }), "Scan code"] })) : null, (0, jsx_runtime_1.jsx)("input", { className: "form-control form-control-lg font-monospace text-center mb-3", placeholder: "7-guitar-revenge-tunnel", value: code, onChange: (event) => setCode(event.target.value), autoComplete: "off", autoCapitalize: "none", spellCheck: false, "aria-label": "Pairing code", disabled: starting }), localError ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: localError }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "submit", className: "btn btn-primary", disabled: starting || code.trim().split(/[\s-]+/).length < 4, children: starting ? "Connecting…" : "Connect" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", disabled: starting, onClick: props.onClose, children: "Cancel" })] })] }));
+}
+const DESTINATION_PROGRESS_MESSAGES = {
+    idle: "Preparing a pairing code…",
+    connecting: "Connecting to your other device…",
+    authenticating: "Verifying the pairing code…",
+    "waiting-for-approval": "Waiting for approval on your other device…",
+    transferring: "Installing encrypted account credentials…",
+};
+function ShowingCode(props) {
+    const code = props.state.code ?? "";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 480, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Sign in from another device" }), (0, jsx_runtime_1.jsxs)("p", { className: "text-muted", children: ["On a device already signed in to Peers, open Settings \u2192 ", (0, jsx_runtime_1.jsx)("strong", { children: "Add another device" }), " ", "and type this code or scan it."] }), props.state.notice ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", children: props.state.notice }) : null, (0, jsx_runtime_1.jsx)("output", { className: "d-block fs-3 font-monospace text-primary mb-3", style: { letterSpacing: "0.04em", wordBreak: "break-word" }, "aria-label": "Pairing code", children: code }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block bg-white rounded p-3 mb-3", children: (0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: code, size: 200, "aria-label": "Pairing code QR" }) }), (0, jsx_runtime_1.jsxs)("p", { className: "small text-muted", children: ["Expires in ", formatCountdown(props.state.expiresAt)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => void (0, peers_sdk_1.copyToClipboard)(code), children: "Copy code" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" })] })] }));
+}
+/** Signed-out destination flow: shows a code and QR, then installs credentials after approval. */
+function DestinationDevicePairing(props) {
+    const state = (0, use_device_pairing_state_1.useDevicePairingState)();
+    const lifecycle = usePairingSessionLifecycle(state);
+    const [localError, setLocalError] = (0, react_1.useState)("");
+    const started = (0, react_1.useRef)(false);
+    const { cancel } = useCeremonyActions(lifecycle, props.onBack, setLocalError);
+    useCountdownClock(state.expiresAt);
     (0, react_1.useEffect)(() => {
-        if (!props.initialInvitation || autoStarted.current) {
+        if (started.current) {
             return;
         }
-        autoStarted.current = true;
-        void start(props.initialInvitation);
-    }, [props.initialInvitation]);
+        started.current = true;
+        void peers_sdk_1.rpcServerCalls
+            .devicePairingStartDestination({ deviceType: detectDeviceType() })
+            .then(async (result) => {
+            lifecycle.sessionId.current = result.sessionId;
+            lifecycle.phase.current = result.phase;
+            if (!lifecycle.mounted.current && result.sessionId) {
+                await peers_sdk_1.rpcServerCalls
+                    .devicePairingCancel({ sessionId: result.sessionId })
+                    .catch(() => undefined);
+            }
+        })
+            .catch(() => setLocalError("Could not reach the pairing service. Check your connection."));
+    }, []);
     (0, react_1.useEffect)(() => {
         if (state.phase !== "complete") {
             return;
         }
         window.setTimeout(() => window.location.reload(), 750);
     }, [state.phase]);
-    const act = async (action) => {
-        const sessionId = lifecycle.sessionId.current;
-        if (!sessionId) {
-            return;
-        }
-        setApproving(true);
-        try {
-            if (action === "approve") {
-                await peers_sdk_1.rpcServerCalls.devicePairingApprove({ sessionId });
-            }
-            else {
-                await peers_sdk_1.rpcServerCalls.devicePairingReject({ sessionId });
-            }
-        }
-        catch {
-            setLocalError("Could not update the pairing ceremony.");
-        }
-        finally {
-            setApproving(false);
-        }
-    };
-    const cancel = async () => {
-        const sessionId = lifecycle.sessionId.current;
-        lifecycle.phase.current = "idle";
-        if (sessionId) {
-            await peers_sdk_1.rpcServerCalls.devicePairingCancel({ sessionId }).catch(() => undefined);
-        }
-        props.onBack();
-    };
-    if (["complete", "rejected", "error"].includes(state.phase)) {
-        return (0, jsx_runtime_1.jsx)(TerminalPanel, { state: state, onClose: props.onBack });
+    if (localError) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: localError }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onBack, children: "Back" })] }));
     }
-    if (state.phase === "comparing" && state.sas) {
-        return ((0, jsx_runtime_1.jsx)(PairingComparison, { state: state, approving: approving, onApprove: () => void act("approve"), onReject: () => void act("reject"), onCancel: () => void cancel() }));
+    if (TERMINAL_PHASES.includes(state.phase)) {
+        return (0, jsx_runtime_1.jsx)(TerminalPanel, { state: state, onClose: props.onBack });
     }
-    if (state.phase === "connecting" ||
-        state.phase === "waiting-for-approval" ||
-        state.phase === "transferring") {
-        return (0, jsx_runtime_1.jsx)(ProgressWithCancel, { state: state, onCancel: () => void cancel() });
+    if (state.phase === "showing-code" && state.code) {
+        return (0, jsx_runtime_1.jsx)(ShowingCode, { state: state, onCancel: () => void cancel() });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 500, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Sign in using another device" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "On a device already signed in to Peers, choose Add another device. Scan its QR code, or paste the complete pairing link or token below." }), (0, jsx_runtime_1.jsx)("textarea", { className: "form-control font-monospace mb-3", rows: 4, placeholder: "Paste pairing link or token", value: invitation, onChange: (event) => setInvitation(event.target.value), autoComplete: "off", "aria-label": "Device pairing invitation" }), localError ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: localError }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-lg", disabled: !invitation.trim(), onClick: () => void start(), children: "Connect securely" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onBack, children: "Back" })] })] }));
+    return ((0, jsx_runtime_1.jsx)(ProgressWithCancel, { state: state, messages: DESTINATION_PROGRESS_MESSAGES, onCancel: () => void cancel() }));
 }

package/dist/screens/device-pairing/device-pairing.test.js

@@ -28,17 +28,19 @@ describe("device pairing UI lifecycle", () => {
         mockPairingState = { phase: "idle" };
         mockRpc.cancel.mockResolvedValue({ phase: "idle" });
     });
-    it("uses the host-owned invitation URL and cancels a source that resolves after unmount", async () => {
+    it("starts the destination on mount and cancels when it resolves after unmount", async () => {
         let resolveStart;
-        mockRpc.startSource.mockReturnValue(new Promise((resolve) => {
+        mockRpc.startDestination.mockReturnValue(new Promise((resolve) => {
             resolveStart = resolve;
         }));
-        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: jest.fn() }));
-        expect(mockRpc.startSource).toHaveBeenCalledWith();
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { onBack: jest.fn() }));
+        expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" });
         view.unmount();
         resolveStart({
-            state: { sessionId: "00mh0wlipkdbeaw8tests0001", role: "source", phase: "inviting" },
-            invitationUrl: "https://peers.app/?app#pair=token",
+            sessionId: "00mh0wlipkdbeaw8tests0001",
+            role: "destination",
+            phase: "showing-code",
+            code: "7-aardvark-adroitness-absurd",
         });
         await (0, react_1.waitFor)(() => {
             expect(mockRpc.cancel).toHaveBeenCalledWith({
@@ -46,23 +48,56 @@ describe("device pairing UI lifecycle", () => {
             });
         });
     });
-    it("keeps source cancellation available while waiting for remote approval", async () => {
-        const onClose = jest.fn();
+    it("shows the destination code and QR while waiting for a source", () => {
+        mockPairingState = {
+            sessionId: "00mh0wlipkdbeaw8tests0004",
+            role: "destination",
+            phase: "showing-code",
+            code: "7-aardvark-adroitness-absurd",
+            notice: "Pairing code did not match. Try the new code.",
+            expiresAt: Date.now() + 60_000,
+        };
+        mockRpc.startDestination.mockResolvedValue(mockPairingState);
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { onBack: jest.fn() }));
+        expect(view.getByLabelText("Pairing code")).toHaveTextContent("7-aardvark-adroitness-absurd");
+        expect(view.getByLabelText("Pairing code QR")).toBeInTheDocument();
+        expect(view.getByText("Pairing code did not match. Try the new code.")).toBeInTheDocument();
+    });
+    it("sends the typed code to the host and only approves from the source", async () => {
+        mockRpc.startSource.mockResolvedValue({
+            sessionId: "00mh0wlipkdbeaw8tests0002",
+            role: "source",
+            phase: "connecting",
+        });
+        const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: jest.fn() }));
+        react_1.fireEvent.change(view.getByLabelText("Pairing code"), {
+            target: { value: " 7 aardvark adroitness absurd " },
+        });
+        react_1.fireEvent.click(view.getByRole("button", { name: "Connect" }));
+        await (0, react_1.waitFor)(() => expect(mockRpc.startSource).toHaveBeenCalledWith({ code: "7 aardvark adroitness absurd" }));
         mockPairingState = {
             sessionId: "00mh0wlipkdbeaw8tests0002",
             role: "source",
             phase: "waiting-for-approval",
+            remoteDevice: { deviceName: "New phone", deviceType: "mobile" },
+        };
+        view.rerender((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: jest.fn() }));
+        expect(view.getByText("New phone (mobile)")).toBeInTheDocument();
+        react_1.fireEvent.click(view.getByRole("button", { name: "Approve" }));
+        await (0, react_1.waitFor)(() => expect(mockRpc.approve).toHaveBeenCalledWith({ sessionId: "00mh0wlipkdbeaw8tests0002" }));
+    });
+    it("keeps source cancellation available while transferring", async () => {
+        const onClose = jest.fn();
+        mockPairingState = {
+            sessionId: "00mh0wlipkdbeaw8tests0003",
+            role: "source",
+            phase: "transferring",
         };
-        mockRpc.startSource.mockResolvedValue({
-            state: mockPairingState,
-            invitationUrl: "https://peers.app/?app#pair=token",
-        });
         const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: onClose }));
-        await (0, react_1.waitFor)(() => expect(mockRpc.startSource).toHaveBeenCalled());
         react_1.fireEvent.click(view.getByRole("button", { name: "Cancel" }));
         await (0, react_1.waitFor)(() => {
             expect(mockRpc.cancel).toHaveBeenCalledWith({
-                sessionId: "00mh0wlipkdbeaw8tests0002",
+                sessionId: "00mh0wlipkdbeaw8tests0003",
             });
             expect(onClose).toHaveBeenCalled();
         });
@@ -70,10 +105,11 @@ describe("device pairing UI lifecycle", () => {
     it("does not clear the destination success reload when Done unmounts the flow", () => {
         jest.useFakeTimers();
         mockPairingState = {
-            sessionId: "00mh0wlipkdbeaw8tests0003",
+            sessionId: "00mh0wlipkdbeaw8tests0005",
             role: "destination",
             phase: "complete",
         };
+        mockRpc.startDestination.mockResolvedValue(mockPairingState);
         const setTimeoutSpy = jest.spyOn(window, "setTimeout");
         const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
         const view = (0, react_1.render)((0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { onBack: jest.fn() }));

package/dist/screens/device-pairing/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./device-pairing";
-export * from "./device-pairing-invite";
 export * from "./use-device-pairing-state";

package/dist/screens/device-pairing/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./device-pairing"), exports);
-__exportStar(require("./device-pairing-invite"), exports);
 __exportStar(require("./use-device-pairing-state"), exports);

package/dist/screens/groups/group-details.js

@@ -73,8 +73,6 @@ const ShareButton = ({ groupId }) => {
         try {
             // Generate the group share data
             const groupShare = await (0, peers_sdk_1.generateGroupShare)(groupId);
-            // Check QR code compatibility
-            const qrInfo = (0, peers_sdk_1.checkQRCodeCompatibility)(groupShare, 20);
             // Convert to JSON
             const groupShareJson = JSON.stringify(groupShare, null, 2);
             // Copy to clipboard
@@ -82,15 +80,13 @@ const ShareButton = ({ groupId }) => {
             if (copied) {
                 setShareResult({
                     success: true,
-                    message: `Group share data copied to clipboard! (${qrInfo.size} chars, ${qrInfo.memberCount} admin members)`,
-                    qrInfo,
+                    message: `Group share data copied to clipboard! (${groupShareJson.length} chars, ${groupShare.groupMembers.length} admin members)`,
                 });
             }
             else {
                 setShareResult({
                     success: false,
                     message: "Failed to copy to clipboard. Please copy manually from the modal.",
-                    qrInfo,
                 });
             }
         }
@@ -104,7 +100,7 @@ const ShareButton = ({ groupId }) => {
             setIsSharing(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm", onClick: handleShare, disabled: isSharing, title: "Share group with admin members", children: isSharing ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Sharing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-share me-1" }), "Share"] })) }), shareResult && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center", style: { backgroundColor: "rgba(0,0,0,0.5)", zIndex: 1050 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card", style: { maxWidth: "500px", width: "90%" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: `bi-${shareResult.success ? "check-circle text-success" : "exclamation-triangle text-warning"} me-2` }), "Group Share ", shareResult.success ? "Ready" : "Error"] }), (0, jsx_runtime_1.jsx)("button", { className: "btn-close", onClick: () => setShareResult(null), "aria-label": "Close" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-3", children: shareResult.message }), shareResult.qrInfo && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("h6", { children: "QR Code Compatibility" }), (0, jsx_runtime_1.jsxs)("div", { className: "row g-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-6", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "Size:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("strong", { children: [shareResult.qrInfo.size, " chars"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-6", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "QR Version 20:" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)("span", { className: `badge bg-${shareResult.qrInfo.fits ? "success" : "warning"}`, children: [shareResult.qrInfo.fits ? "✓ Fits" : "⚠ Too Large", " (", shareResult.qrInfo.usagePercent, "%)"] })] })] }), !shareResult.qrInfo.fits && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning mt-2 mb-0", children: (0, jsx_runtime_1.jsxs)("small", { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-exclamation-triangle me-1" }), "Data may be too large for standard QR codes. Consider reducing admin members or use text sharing."] }) }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "text-end", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary me-2", onClick: () => setShareResult(null), children: "Close" }), shareResult.success && ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary", onClick: handleShare, children: "Copy Again" }))] })] })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm", onClick: handleShare, disabled: isSharing, title: "Share group with admin members", children: isSharing ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }), "Sharing..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-share me-1" }), "Share"] })) }), shareResult && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center", style: { backgroundColor: "rgba(0,0,0,0.5)", zIndex: 1050 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card", style: { maxWidth: "500px", width: "90%" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "card-header d-flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("h6", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: `bi-${shareResult.success ? "check-circle text-success" : "exclamation-triangle text-warning"} me-2` }), "Group Share ", shareResult.success ? "Ready" : "Error"] }), (0, jsx_runtime_1.jsx)("button", { className: "btn-close", onClick: () => setShareResult(null), "aria-label": "Close" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-3", children: shareResult.message }), (0, jsx_runtime_1.jsxs)("div", { className: "text-end", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary me-2", onClick: () => setShareResult(null), children: "Close" }), shareResult.success && ((0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary", onClick: handleShare, children: "Copy Again" }))] })] })] }) }))] }));
 };
 const GroupMembersWrapper = (props) => {
     const userContext = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.getUserContext)());

package/dist/screens/groups/group-invite-panel.d.ts

@@ -0,0 +1,14 @@
+import { GroupMemberRole } from "@peers-app/peers-sdk";
+/** Props for {@link GroupInvitePanel}. */
+export interface GroupInvitePanelProps {
+    groupId: string;
+    /** Users who are already members; hidden from the contact picker. */
+    excludeUserIds: string[];
+    /** The local user's role; caps the roles offered. */
+    myRole: GroupMemberRole;
+}
+/**
+ * Admin controls for growing a group: invite existing contacts first, share a link second,
+ * and act on pending join requests. Membership changes land when the other side accepts.
+ */
+export declare function GroupInvitePanel(props: GroupInvitePanelProps): import("react/jsx-runtime").JSX.Element;