@peers-app/peers-ui 0.20.4 → 0.20.6

package/dist/screens/contacts/user-connect.js

@@ -1,51 +1,245 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserConnect = UserConnect;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Connect-to-user screen: QR invite, link share, manual code entry, and trust confirmation.
+ */
 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 globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
+const user_connect_invite_1 = require("./user-connect-invite");
+const ERROR_COPY = {
+    "invalid-code": {
+        title: "That invite isn’t valid",
+        body: "Check the link or code and try again, or create a new invite.",
+    },
+    "no-route": {
+        title: "This device isn’t connected yet",
+        body: "Connect this device to the internet or another Peers device, then try again.",
+    },
+    "not-found-or-expired": {
+        title: "Invite not found or expired",
+        body: "Ask the other person to create a new invite, or enter a fresh code.",
+    },
+    "remote-not-waiting": {
+        title: "The other device stopped waiting",
+        body: "Ask them to open Connect again and create a new invite.",
+    },
+    canceled: {
+        title: "Connection canceled",
+        body: "You can create a new invite or enter another code whenever you’re ready.",
+    },
+    "protocol-error": {
+        title: "Something went wrong",
+        body: "Try again in a moment. If it keeps failing, create a new invite.",
+    },
+};
+function errorMessage(error) {
+    const base = ERROR_COPY[error.code];
+    if (error.code === "protocol-error" && error.detail) {
+        return { title: base.title, body: base.body };
+    }
+    return base;
+}
+function formatCountdown(remainingMs) {
+    const clamped = Math.max(0, remainingMs);
+    const totalSeconds = Math.ceil(clamped / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+function canShare() {
+    return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+/**
+ * Polished Connect to user screen. Creating an invite is the default path;
+ * inbound links open a review state before connecting.
+ */
 function UserConnect() {
-    const [mode, setMode] = (0, react_1.useState)("select");
-    const [status, setStatus] = (0, react_1.useState)("idle");
+    const [phase, setPhase] = (0, react_1.useState)("offer");
     const [connectionCode, setConnectionCode] = (0, react_1.useState)("");
+    const [inviteUrl, setInviteUrl] = (0, react_1.useState)("");
+    const [expiresAt, setExpiresAt] = (0, react_1.useState)(null);
+    const [remainingMs, setRemainingMs] = (0, react_1.useState)(peers_sdk_1.USER_CONNECT_TTL_MS);
     const [inputCode, setInputCode] = (0, react_1.useState)("");
+    const [reviewCode, setReviewCode] = (0, react_1.useState)("");
     const [result, setResult] = (0, react_1.useState)(null);
-    const [error, setError] = (0, react_1.useState)("");
-    const [copied, setCopied] = (0, react_1.useState)(false);
-    // Subscribe to userConnectStatus from the device layer
+    const [localError, setLocalError] = (0, react_1.useState)(null);
+    const [feedback, setFeedback] = (0, react_1.useState)("");
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const [hasRoute, setHasRoute] = (0, react_1.useState)(null);
     const [connectStatus] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectStatus);
-    const handleConnectStatusChange = (0, react_1.useCallback)(async (connectStatusValue) => {
-        if (!connectStatusValue || status === "success")
+    const [answerCode] = (0, hooks_1.useObservable)(peers_sdk_1.userConnectCodeAnswer);
+    const completedRef = (0, react_1.useRef)(false);
+    const offerStartedRef = (0, react_1.useRef)(false);
+    const answerWasActiveRef = (0, react_1.useRef)(false);
+    const protocolActiveRef = (0, react_1.useRef)(false);
+    const ceremonyGenerationRef = (0, react_1.useRef)(0);
+    const clearCeremony = (0, react_1.useCallback)((options) => {
+        ceremonyGenerationRef.current += 1;
+        completedRef.current = false;
+        answerWasActiveRef.current = false;
+        protocolActiveRef.current = false;
+        (0, peers_sdk_1.userConnectCodeOffer)("");
+        (0, peers_sdk_1.userConnectCodeAnswer)("");
+        (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
+        if (!options?.preservePendingIntent) {
+            (0, user_connect_invite_1.clearUserConnectPendingIntent)();
+        }
+    }, []);
+    const startOffer = (0, react_1.useCallback)(() => {
+        completedRef.current = false;
+        clearCeremony();
+        const code = (0, peers_sdk_1.generateConnectionCode)();
+        const formatted = (0, peers_sdk_1.formatConnectionCode)(code.code);
+        setConnectionCode(formatted);
+        setInviteUrl((0, user_connect_invite_1.buildUserConnectInviteUrl)(code.code));
+        setExpiresAt(Date.now() + peers_sdk_1.USER_CONNECT_TTL_MS);
+        setRemainingMs(peers_sdk_1.USER_CONNECT_TTL_MS);
+        setLocalError(null);
+        setResult(null);
+        setFeedback("");
+        setSubmitting(false);
+        setPhase("offer");
+        (0, peers_sdk_1.userConnectCodeOffer)(code.code);
+    }, [clearCeremony]);
+    const showError = (0, react_1.useCallback)((error) => {
+        answerWasActiveRef.current = false;
+        protocolActiveRef.current = false;
+        setLocalError(error);
+        setSubmitting(false);
+        setPhase("error");
+    }, []);
+    const applyPendingInvite = (0, react_1.useCallback)(() => {
+        const pending = (0, user_connect_invite_1.readUserConnectPendingIntent)();
+        if (!pending.ok && pending.reason === "none") {
+            return false;
+        }
+        clearCeremony({ preservePendingIntent: true });
+        offerStartedRef.current = true;
+        setConnectionCode("");
+        setInviteUrl("");
+        setExpiresAt(null);
+        setLocalError(null);
+        setResult(null);
+        setFeedback("");
+        setSubmitting(false);
+        if (!pending.ok && pending.reason === "invalid") {
+            setReviewCode("");
+            setInputCode("");
+            setLocalError({ code: "invalid-code" });
+            setPhase("error");
+            return true;
+        }
+        if (!pending.ok && pending.reason === "expired") {
+            setReviewCode("");
+            setInputCode("");
+            setPhase("expired");
+            return true;
+        }
+        if (pending.ok) {
+            const formatted = (0, peers_sdk_1.formatConnectionCode)(pending.intent.code);
+            setReviewCode(formatted);
+            setInputCode(formatted);
+            setPhase("review");
+        }
+        return true;
+    }, [clearCeremony]);
+    const refreshRouteStatus = (0, react_1.useCallback)(async () => {
+        try {
+            const devices = await peers_sdk_1.rpcServerCalls.listConnectedDevices();
+            setHasRoute(devices.length > 0);
+        }
+        catch {
+            // If the RPC is unavailable, do not block entry — route may appear shortly.
+            setHasRoute(null);
+        }
+    }, []);
+    // Capture inbound intent once on mount; otherwise auto-start an offer.
+    (0, react_1.useEffect)(() => {
+        if (applyPendingInvite()) {
+            return;
+        }
+        if (!offerStartedRef.current) {
+            offerStartedRef.current = true;
+            startOffer();
+        }
+    }, [applyPendingInvite, startOffer]);
+    // A second invite can arrive while this screen is already mounted.
+    (0, react_1.useEffect)(() => {
+        const captureInboundInvite = () => {
+            const path = window.location.hash.slice(1).split("?")[0];
+            if (path !== "contacts/connect") {
+                return;
+            }
+            const captured = (0, user_connect_invite_1.captureUserConnectInviteFromLocation)();
+            if (captured.ok || captured.reason !== "none") {
+                applyPendingInvite();
+            }
+        };
+        window.addEventListener("hashchange", captureInboundInvite);
+        return () => window.removeEventListener("hashchange", captureInboundInvite);
+    }, [applyPendingInvite]);
+    (0, react_1.useEffect)(() => {
+        void refreshRouteStatus();
+    }, [refreshRouteStatus]);
+    // Countdown while an offer is active.
+    (0, react_1.useEffect)(() => {
+        if (phase !== "offer" || expiresAt === null) {
             return;
-        if (connectStatusValue.startsWith("Error:")) {
-            // Error status
-            setError(connectStatusValue.replace("Error: ", ""));
-            setStatus("error");
-        }
-        else if (connectStatusValue.length > 0) {
-            // Success - connectStatus is the remote userId
-            const remoteUserId = connectStatusValue;
+        }
+        const tick = () => {
+            const remaining = expiresAt - Date.now();
+            setRemainingMs(remaining);
+            if (remaining <= 0) {
+                clearCeremony();
+                setPhase("expired");
+            }
+        };
+        tick();
+        const id = window.setInterval(tick, 1000);
+        return () => window.clearInterval(id);
+    }, [phase, expiresAt, clearCeremony]);
+    const handleProtocolStatus = (0, react_1.useCallback)(async (status) => {
+        if (!status || completedRef.current) {
+            return;
+        }
+        if (status.kind === "connecting") {
+            protocolActiveRef.current = true;
+            return;
+        }
+        if (status.kind === "connected") {
+            const generation = ceremonyGenerationRef.current;
+            completedRef.current = true;
             try {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
                 const me = await (0, peers_sdk_1.getMe)();
-                const remoteUser = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(remoteUserId);
+                const remoteUser = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(status.remoteUserId);
+                if (generation !== ceremonyGenerationRef.current) {
+                    return;
+                }
                 if (!remoteUser) {
-                    setError("Could not find connected user");
-                    setStatus("error");
+                    showError({ code: "protocol-error", detail: "Could not find connected user" });
+                    return;
+                }
+                const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).get(status.remoteDeviceId);
+                if (generation !== ceremonyGenerationRef.current) {
                     return;
                 }
-                const remoteDevice = await (0, peers_sdk_1.Devices)(userContext.userDataContext).findOne({
-                    userId: remoteUserId,
-                });
                 if (!remoteDevice) {
-                    setError("Could not find connected device but connection was successful");
-                    setStatus("error");
+                    showError({
+                        code: "protocol-error",
+                        detail: "Could not find connected device",
+                    });
                     return;
                 }
-                // Build user connect info for confirmation hash
                 const myInfo = {
                     userId: me.userId,
                     publicKey: me.publicKey,
@@ -58,136 +252,192 @@ function UserConnect() {
                     publicBoxKey: remoteUser.publicBoxKey,
                     deviceId: remoteDevice.deviceId,
                 };
-                const confirmationHash = (0, peers_sdk_1.generateConfirmationHash)(myInfo, remoteInfo);
-                setResult({ remoteUser, confirmationHash });
-                setStatus("success");
-                // Clear the codes
+                setResult({
+                    remoteUser,
+                    confirmationHash: (0, peers_sdk_1.generateConfirmationHash)(myInfo, remoteInfo),
+                });
+                (0, user_connect_invite_1.clearUserConnectPendingIntent)();
                 (0, peers_sdk_1.userConnectCodeOffer)("");
                 (0, peers_sdk_1.userConnectCodeAnswer)("");
+                setSubmitting(false);
+                setPhase("success");
             }
             catch (err) {
-                setError(err instanceof Error ? err.message : String(err));
-                setStatus("error");
+                if (generation !== ceremonyGenerationRef.current) {
+                    return;
+                }
+                showError({
+                    code: "protocol-error",
+                    detail: err instanceof Error ? err.message : String(err),
+                });
             }
+            return;
         }
-    }, [status]);
-    // Also set up a direct subscription after loading is complete
+        if (status.kind === "error") {
+            showError({ code: status.code, detail: status.detail });
+        }
+    }, [showError]);
     (0, react_1.useEffect)(() => {
-        let disposed = false;
-        let subscription;
-        peers_sdk_1.userConnectStatus.loadingPromise.then(() => {
-            if (disposed)
-                return;
-            subscription = peers_sdk_1.userConnectStatus.subscribe(() => {
-                // Force a re-render by checking the current value
-                const currentStatus = (0, peers_sdk_1.userConnectStatus)();
-                if (currentStatus && typeof currentStatus === "string") {
-                    handleConnectStatusChange(currentStatus);
-                }
-            });
-        });
-        return () => {
-            disposed = true;
-            subscription?.dispose();
-        };
-    }, [handleConnectStatusChange]);
-    // React to userConnectStatus changes from useObservable
+        void handleProtocolStatus(connectStatus);
+    }, [connectStatus, handleProtocolStatus]);
     (0, react_1.useEffect)(() => {
-        if (connectStatus && typeof connectStatus === "string") {
-            handleConnectStatusChange(connectStatus);
+        if (phase !== "connecting" ||
+            !connectStatus ||
+            connectStatus.kind !== "idle" ||
+            (answerCode && !protocolActiveRef.current) ||
+            (!answerCode && !answerWasActiveRef.current)) {
+            return;
         }
-    }, [connectStatus, handleConnectStatusChange]);
-    // Clean up on unmount
+        // Terminal handlers publish error/connected immediately after clearing the
+        // answer. Defer idle recovery one turn so those statuses win.
+        const timeout = window.setTimeout(() => {
+            const latestStatus = (0, peers_sdk_1.userConnectStatus)();
+            const latestAnswer = (0, peers_sdk_1.userConnectCodeAnswer)();
+            if (latestStatus.kind !== "idle") {
+                return;
+            }
+            if (latestAnswer) {
+                if (protocolActiveRef.current) {
+                    clearCeremony();
+                    showError({ code: "canceled" });
+                }
+                return;
+            }
+            if (answerWasActiveRef.current) {
+                clearCeremony();
+                setSubmitting(false);
+                setPhase("expired");
+            }
+        }, 0);
+        return () => window.clearTimeout(timeout);
+    }, [answerCode, clearCeremony, connectStatus, phase, showError]);
     (0, react_1.useEffect)(() => {
         return () => {
-            if (mode === "initiate" && status === "waiting") {
-                (0, peers_sdk_1.userConnectCodeOffer)("");
-                (0, peers_sdk_1.userConnectCodeAnswer)("");
+            // Leaving the screen cancels an in-flight offer/answer.
+            (0, peers_sdk_1.userConnectCodeOffer)("");
+            (0, peers_sdk_1.userConnectCodeAnswer)("");
+            (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
+            const path = window.location.hash.slice(1).split("?")[0];
+            if (path !== "contacts/connect") {
+                (0, user_connect_invite_1.clearUserConnectPendingIntent)();
             }
         };
-    }, [mode, status]);
-    const handleInitiate = (0, react_1.useCallback)(async () => {
-        setMode("initiate");
-        setStatus("waiting");
-        setError("");
-        (0, peers_sdk_1.userConnectStatus)(""); // Clear any previous status
-        // Generate the connection code
-        const code = (0, peers_sdk_1.generateConnectionCode)();
-        (0, peers_sdk_1.userConnectCodeOffer)(code.code);
-        const formattedCode = (0, peers_sdk_1.formatConnectionCode)(code.code);
-        setConnectionCode(formattedCode);
     }, []);
-    const handleRespond = (0, react_1.useCallback)(async () => {
-        if (inputCode.replace(/[^0-9A-Za-z]/g, "").length !== 12) {
-            setError("Please enter a valid 12-character connection code");
+    const handleConfirmReview = (0, react_1.useCallback)(async () => {
+        if (submitting)
+            return;
+        const pending = (0, user_connect_invite_1.readUserConnectPendingIntent)();
+        if (!pending.ok) {
+            if (pending.reason === "invalid" || pending.reason === "expired") {
+                applyPendingInvite();
+            }
+            else {
+                showError({ code: "canceled" });
+            }
             return;
         }
-        setStatus("waiting");
-        setError("");
-        (0, peers_sdk_1.userConnectStatus)(""); // Clear any previous status
-        (0, peers_sdk_1.userConnectCodeAnswer)(inputCode);
-    }, [inputCode]);
-    const handleCancel = (0, react_1.useCallback)(async () => {
-        (0, peers_sdk_1.userConnectCodeOffer)("");
-        (0, peers_sdk_1.userConnectCodeAnswer)("");
-        (0, peers_sdk_1.userConnectStatus)("");
-        setMode("select");
-        setStatus("idle");
-        setConnectionCode("");
-        setError("");
-    }, []);
-    const handleReset = (0, react_1.useCallback)(() => {
-        (0, peers_sdk_1.userConnectCodeOffer)("");
-        (0, peers_sdk_1.userConnectCodeAnswer)("");
-        (0, peers_sdk_1.userConnectStatus)("");
-        setMode("select");
-        setStatus("idle");
-        setConnectionCode("");
-        setInputCode("");
+        const normalized = (0, user_connect_invite_1.normalizeUserConnectCode)(reviewCode);
+        if (!normalized || normalized !== pending.intent.code) {
+            showError({ code: "invalid-code" });
+            return;
+        }
+        ceremonyGenerationRef.current += 1;
+        completedRef.current = false;
+        answerWasActiveRef.current = true;
+        protocolActiveRef.current = false;
+        setSubmitting(true);
+        setPhase("connecting");
+        setLocalError(null);
+        (0, user_connect_invite_1.clearUserConnectPendingIntent)();
+        (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
+        (0, peers_sdk_1.userConnectCodeAnswer)(normalized);
+    }, [applyPendingInvite, reviewCode, showError, submitting]);
+    const handleManualConnect = (0, react_1.useCallback)(async () => {
+        if (submitting)
+            return;
+        const normalized = (0, user_connect_invite_1.normalizeUserConnectCode)(inputCode);
+        if (!normalized) {
+            setLocalError({ code: "invalid-code" });
+            return;
+        }
+        ceremonyGenerationRef.current += 1;
+        completedRef.current = false;
+        answerWasActiveRef.current = true;
+        protocolActiveRef.current = false;
+        setSubmitting(true);
+        setPhase("connecting");
+        setLocalError(null);
+        (0, user_connect_invite_1.clearUserConnectPendingIntent)();
+        (0, peers_sdk_1.userConnectStatus)(peers_sdk_1.USER_CONNECT_IDLE_STATUS);
+        (0, peers_sdk_1.userConnectCodeAnswer)(normalized);
+    }, [inputCode, submitting]);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        clearCeremony();
+        setSubmitting(false);
+        setLocalError(null);
         setResult(null);
-        setError("");
-        setCopied(false);
-    }, []);
-    const handleSaveContact = (0, react_1.useCallback)(async () => {
+        (0, globals_1.mainContentPath)("contacts");
+    }, [clearCeremony]);
+    const handleEnterManual = (0, react_1.useCallback)(() => {
+        clearCeremony();
+        setSubmitting(false);
+        setLocalError(null);
+        setInputCode("");
+        setPhase("manual");
+    }, [clearCeremony]);
+    const handleCopyLink = (0, react_1.useCallback)(async () => {
+        if (!inviteUrl)
+            return;
+        const ok = await (0, peers_sdk_1.copyToClipboard)(inviteUrl);
+        setFeedback(ok ? "Link copied" : "Could not copy link");
+        window.setTimeout(() => setFeedback(""), 2000);
+    }, [inviteUrl]);
+    const handleShareLink = (0, react_1.useCallback)(async () => {
+        if (!inviteUrl || !canShare()) {
+            await handleCopyLink();
+            return;
+        }
+        try {
+            await navigator.share({
+                title: "Connect on Peers",
+                text: (0, user_connect_invite_1.buildUserConnectShareText)(inviteUrl),
+                url: inviteUrl,
+            });
+            setFeedback("Share sheet opened");
+            window.setTimeout(() => setFeedback(""), 2000);
+        }
+        catch (err) {
+            // User cancel is neutral.
+            if (err instanceof DOMException && err.name === "AbortError") {
+                return;
+            }
+            await handleCopyLink();
+        }
+    }, [handleCopyLink, inviteUrl]);
+    const handleTrustAndView = (0, react_1.useCallback)(async () => {
         if (!result)
             return;
         try {
             const userContext = await (0, peers_sdk_1.getUserContext)();
-            // Contact is already saved by the device layer, just set trust level
             await (0, peers_sdk_1.setUserTrustLevel)(result.remoteUser.userId, peers_sdk_1.TrustLevel.Trusted, userContext.userDataContext);
-            // Navigate to contact details
+            clearCeremony();
             (0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
+            showError({
+                code: "protocol-error",
+                detail: err instanceof Error ? err.message : String(err),
+            });
         }
-    }, [result]);
-    // Copy connection code to clipboard
-    const handleCopyCode = (0, react_1.useCallback)(async () => {
-        if (!connectionCode)
+    }, [clearCeremony, result, showError]);
+    const handleViewWithoutTrust = (0, react_1.useCallback)(() => {
+        if (!result)
             return;
-        try {
-            await navigator.clipboard.writeText(connectionCode);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-        catch (_err) {
-            // Fallback for older browsers
-            const textArea = document.createElement("textarea");
-            textArea.value = connectionCode;
-            document.body.appendChild(textArea);
-            textArea.select();
-            document.execCommand("copy");
-            document.body.removeChild(textArea);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
-        }
-    }, [connectionCode]);
-    // Format input code as user types
+        clearCeremony();
+        (0, globals_1.mainContentPath)(`contacts/${result.remoteUser.userId}`);
+    }, [clearCeremony, result]);
     const handleCodeInput = (value) => {
-        // Remove non-alphanumeric characters
         const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, "");
-        // Format as XXXX-YYYY-ZZZZ
         let formatted = "";
         for (let i = 0; i < cleaned.length && i < 12; i++) {
             if (i === 4 || i === 8)
@@ -195,8 +445,34 @@ function UserConnect() {
             formatted += cleaned[i];
         }
         setInputCode(formatted);
+        setLocalError(null);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-4", children: [(0, jsx_runtime_1.jsxs)("h4", { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus-fill me-2" }), "Connect to New User"] }), mode !== "select" && ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-outline-secondary btn-sm", onClick: handleReset, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-left me-1" }), "Back"] }))] }), mode === "select" && ((0, jsx_runtime_1.jsxs)("div", { className: "row g-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "col-md-6", children: (0, jsx_runtime_1.jsx)("div", { className: "card h-100 border-primary", style: { cursor: "pointer" }, onClick: handleInitiate, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body text-center p-4", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-qr-code display-4 text-primary mb-3" }), (0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Create Connection Code" }), (0, jsx_runtime_1.jsx)("p", { className: "card-text text-muted", children: "Generate a code to share with someone who wants to connect with you" })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "col-md-6", children: (0, jsx_runtime_1.jsx)("div", { className: "card h-100 border-success", style: { cursor: "pointer" }, onClick: () => setMode("respond"), children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body text-center p-4", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-keyboard display-4 text-success mb-3" }), (0, jsx_runtime_1.jsx)("h5", { className: "card-title", children: "Enter Connection Code" }), (0, jsx_runtime_1.jsx)("p", { className: "card-text text-muted", children: "Enter a code that someone shared with you to connect" })] }) }) })] })), mode === "initiate" && status === "waiting" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Share this code with the person you want to connect with:" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-group", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", value: connectionCode || "XXXX-YYYY-ZZZZ", readOnly: true, style: { letterSpacing: "0.15em", fontSize: "1.5rem" } }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-primary", onClick: handleCopyCode, title: "Copy to clipboard", children: (0, jsx_runtime_1.jsx)("i", { className: copied ? "bi-check-lg" : "bi-clipboard" }) })] }), copied && (0, jsx_runtime_1.jsx)("small", { className: "text-success mt-1 d-block", children: "Copied!" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }), (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Waiting for connection..." })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small", children: "This code will expire in 10 minutes" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary", onClick: handleCancel, children: "Cancel" })] })), mode === "respond" && status !== "success" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: "Enter the connection code shared with you:" }) }), (0, jsx_runtime_1.jsx)("div", { className: "mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-lg text-center font-monospace", placeholder: "XXXX-YYYY-ZZZZ", value: inputCode, onChange: (e) => handleCodeInput(e.target.value), maxLength: 14, style: { letterSpacing: "0.15em", fontSize: "1.5rem" } }) }), error && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", style: { maxWidth: "400px", margin: "0 auto 1rem" }, children: error })), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-lg", onClick: handleRespond, disabled: status === "waiting" || inputCode.replace(/[^0-9A-Z]/gi, "").length !== 12, children: status === "waiting" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }), "Connecting..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-link-45deg me-2" }), "Connect"] })) })] })), status === "success" && result && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("i", { className: "bi-check-circle-fill text-success display-3" }) }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-4", children: "Connection Successful!" }), (0, jsx_runtime_1.jsx)("div", { className: "card mb-4", style: { maxWidth: "400px", margin: "0 auto" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-2", children: "Verify with the other person that you both see:" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: "0.2em" }, children: result.confirmationHash }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "Name:" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-2", children: result.remoteUser.name }), (0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: "User ID:" }), (0, jsx_runtime_1.jsx)("p", { className: "font-monospace small mb-0", children: result.remoteUser.userId })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [(0, jsx_runtime_1.jsxs)("button", { className: "btn btn-primary", onClick: handleSaveContact, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-lg me-2" }), "Trust & View Contact"] }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-outline-secondary", onClick: handleReset, children: "Connect Another" })] })] })), status === "error" && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4", children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x-circle-fill text-danger display-3" }) }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-4", children: "Connection Failed" }), (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", style: { maxWidth: "400px", margin: "0 auto 1rem" }, children: error }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary", onClick: handleReset, children: "Try Again" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "mb-0", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus-fill me-2", "aria-hidden": "true" }), "Connect to user"] }), phase !== "offer" && phase !== "success" && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-secondary btn-sm", onClick: handleCancel, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-arrow-left me-1", "aria-hidden": "true" }), "Back"] }))] }), hasRoute === false && phase !== "success" && ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-warning", role: "status", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-start gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsx)("div", { children: "This device isn\u2019t connected to the internet or another Peers device yet. You can still prepare an invite; connection will work once a route appears." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm btn-outline-warning", onClick: () => void refreshRouteStatus(), children: "Check again" })] }) })), (0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", className: "visually-hidden", children: feedback }), phase === "offer" && ((0, jsx_runtime_1.jsx)(OfferPanel, { connectionCode: connectionCode, inviteUrl: inviteUrl, remainingMs: remainingMs, feedback: feedback, onShare: () => void handleShareLink(), onCopy: () => void handleCopyLink(), onEnterManual: handleEnterManual, onCancel: handleCancel })), phase === "manual" && ((0, jsx_runtime_1.jsx)(ManualEntryPanel, { inputCode: inputCode, localError: localError, submitting: submitting, onChange: handleCodeInput, onConnect: () => void handleManualConnect() })), phase === "review" && ((0, jsx_runtime_1.jsx)(ReviewPanel, { reviewCode: reviewCode, submitting: submitting, onConfirm: () => void handleConfirmReview(), onEnterManual: handleEnterManual })), phase === "connecting" && (0, jsx_runtime_1.jsx)(ConnectingPanel, {}), phase === "success" && result && ((0, jsx_runtime_1.jsx)(SuccessPanel, { result: result, onTrust: () => void handleTrustAndView(), onViewWithoutTrust: handleViewWithoutTrust })), phase === "error" && localError && ((0, jsx_runtime_1.jsx)(ErrorPanel, { error: localError, onNewInvite: startOffer, onEnterCode: handleEnterManual })), phase === "expired" && ((0, jsx_runtime_1.jsx)(ExpiredPanel, { onNewInvite: startOffer, onEnterCode: handleEnterManual }))] }));
+}
+function OfferPanel(props) {
+    const shareAvailable = canShare();
+    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 mb-3", children: "Ask the other person to scan this with their camera" }), (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block p-3 mb-3 rounded", style: { background: "#ffffff" }, "aria-label": "Connection QR code", children: props.inviteUrl ? ((0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: props.inviteUrl, size: 220, bgColor: "#FFFFFF", fgColor: "#000000", style: { height: "auto", maxWidth: "100%", width: "min(70vw, 220px)" }, viewBox: "0 0 256 256" })) : ((0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary", role: "status", "aria-label": "Preparing invite" })) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm text-primary me-2", role: "status" }), (0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Waiting for connection\u2026" })] }), (0, jsx_runtime_1.jsxs)("p", { className: "text-muted small mb-3", "aria-live": "polite", children: ["Expires in ", formatCountdown(props.remainingMs)] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2 mb-3", children: [shareAvailable ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-primary", onClick: props.onShare, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-share me-2", "aria-hidden": "true" }), "Share link"] })) : null, (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-primary", onClick: props.onCopy, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-clipboard me-2", "aria-hidden": "true" }), "Copy link"] }), props.feedback ? (0, jsx_runtime_1.jsx)("small", { className: "text-success", children: props.feedback }) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { className: "form-label small text-muted mb-1", htmlFor: "user-connect-fallback-code", children: "Or share this code" }), (0, jsx_runtime_1.jsx)("input", { id: "user-connect-fallback-code", type: "text", className: "form-control form-control-lg text-center font-monospace", value: props.connectionCode, readOnly: true, "aria-label": "Connection code" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center flex-wrap", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link", onClick: props.onEnterManual, children: "Enter a code instead" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onCancel, children: "Cancel" })] })] }));
+}
+function ManualEntryPanel(props) {
+    const ready = props.inputCode.replace(/[^0-9A-Z]/gi, "").length === 12;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 400, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-3", children: "Enter the connection code shared with you" }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: "form-control form-control-lg text-center font-monospace mb-3", placeholder: "XXXX-YYYY-ZZZZ", value: props.inputCode, onChange: (e) => props.onChange(e.target.value), maxLength: 14, "aria-label": "Connection code", autoComplete: "off" }), props.localError ? ((0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger", children: errorMessage(props.localError).body })) : null, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-lg", onClick: props.onConnect, disabled: props.submitting || !ready, children: props.submitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }), "Connecting\u2026"] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-link-45deg me-2", "aria-hidden": "true" }), "Connect"] })) })] }));
+}
+function ReviewPanel(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 400, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-2", children: "You opened a connection invite" }), (0, jsx_runtime_1.jsx)("p", { className: "font-monospace fs-4 mb-3", children: props.reviewCode }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted small mb-4", children: "Both of you need Peers open. Confirm to connect with the person who shared this invite." }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary btn-lg mb-2", onClick: props.onConfirm, disabled: props.submitting, children: props.submitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2", role: "status" }), "Connecting\u2026"] })) : ("Connect") }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link", onClick: props.onEnterManual, children: "Enter a different code" }) })] }));
+}
+function ConnectingPanel() {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-primary mb-3", role: "status", "aria-label": "Connecting" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-0", children: "Connecting\u2026" })] }));
+}
+function SuccessPanel(props) {
+    const [showDetails, setShowDetails] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 420, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-check-circle-fill text-success display-3 mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Connected" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-2", children: "Verify with the other person that you both see:" }), (0, jsx_runtime_1.jsx)("h3", { className: "font-monospace text-primary mb-3", style: { letterSpacing: "0.15em" }, children: props.result.confirmationHash }), (0, jsx_runtime_1.jsxs)("p", { className: "mb-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-muted", children: "Name: " }), props.result.remoteUser.name || "Unnamed"] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-link btn-sm mb-3", onClick: () => setShowDetails((v) => !v), "aria-expanded": showDetails, children: showDetails ? "Hide details" : "Show details" }), showDetails ? ((0, jsx_runtime_1.jsx)("p", { className: "font-monospace small text-muted mb-3", children: props.result.remoteUser.userId })) : 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", onClick: props.onTrust, children: "Trust and view contact" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onViewWithoutTrust, children: "View without trusting" })] })] }));
+}
+function ErrorPanel(props) {
+    const copy = errorMessage(props.error);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 420, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-x-circle-fill text-danger display-3 mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-2", children: copy.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-4", children: copy.body }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center flex-wrap", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: props.onNewInvite, children: "Create a new invite" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onEnterCode, children: "Enter another code" })] })] }));
+}
+function ExpiredPanel(props) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 420, margin: "0 auto" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-hourglass-bottom text-warning display-3 mb-3", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("h5", { className: "mb-2", children: "Invite expired" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted mb-4", children: "Create a new invite or enter a fresh code from the other person." }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center flex-wrap", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-primary", onClick: props.onNewInvite, children: "Create a new invite" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onEnterCode, children: "Enter another code" })] })] }));
 }
 (0, ui_loader_1.registerInternalPeersUI)({
     peersUIId: "000user00connect0screen01",

package/dist/screens/contacts/user-connect.test.d.ts

@@ -0,0 +1 @@
+export {};