@peers-app/peers-ui 0.23.13 → 0.24.0

package/dist/screens/invites/invite-share.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InviteShare = InviteShare;
+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"));
+function canNativeShare() {
+    return typeof navigator !== "undefined" && typeof navigator.share === "function";
+}
+/**
+ * Presents an issued invite as a QR code plus copyable link and token. The QR encodes the
+ * landing-page URL so phone cameras, the in-app scanner, and the desktop handler all work.
+ */
+function InviteShare(props) {
+    const { invite } = props;
+    const [copied, setCopied] = (0, react_1.useState)(undefined);
+    const expires = new Date(invite.token.expiresAt);
+    const copy = async (what) => {
+        await (0, peers_sdk_1.copyToClipboard)(what === "link" ? invite.url : invite.encoded);
+        setCopied(what);
+        window.setTimeout(() => setCopied(undefined), 1500);
+    };
+    const share = async () => {
+        try {
+            await navigator.share({
+                title: "Peers invite",
+                text: props.shareText ?? "Join me on Peers:",
+                url: invite.url,
+            });
+        }
+        catch {
+            // User dismissed the share sheet; nothing to do.
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", style: { maxWidth: 440, margin: "0 auto" }, children: [props.description ? (0, jsx_runtime_1.jsx)("p", { className: "text-muted", children: props.description }) : null, (0, jsx_runtime_1.jsx)("div", { className: "d-inline-block bg-white rounded p-3 mb-2", children: (0, jsx_runtime_1.jsx)(react_qr_code_1.default, { value: invite.url, size: 200, "aria-label": "Invite QR code" }) }), (0, jsx_runtime_1.jsxs)("p", { className: "small text-muted mb-3", children: ["Expires ", expires.toLocaleString(), invite.token.uses === "unlimited" ? " · reusable" : " · single use"] }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group input-group-sm mb-2", children: [(0, jsx_runtime_1.jsx)("input", { className: "form-control font-monospace", readOnly: true, value: invite.url, "aria-label": "Invite link", onFocus: (event) => event.currentTarget.select() }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => void copy("link"), children: copied === "link" ? "Copied" : "Copy link" })] }), (0, jsx_runtime_1.jsxs)("details", { className: "text-start small mb-3", children: [(0, jsx_runtime_1.jsx)("summary", { className: "text-muted", style: { cursor: "pointer" }, children: "No camera or link? Share the code text instead" }), (0, jsx_runtime_1.jsxs)("div", { className: "input-group input-group-sm mt-2", children: [(0, jsx_runtime_1.jsx)("input", { className: "form-control font-monospace", readOnly: true, value: invite.encoded, "aria-label": "Invite code", onFocus: (event) => event.currentTarget.select() }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: () => void copy("token"), children: copied === "token" ? "Copied" : "Copy" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex gap-2 justify-content-center", children: [canNativeShare() ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-primary", onClick: () => void share(), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-share me-1" }), "Share\u2026"] })) : null, props.onDone ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-secondary", onClick: props.onDone, children: "Done" })) : null] })] }));
+}

package/dist/screens/invites/invites-ipc.d.ts

@@ -0,0 +1,10 @@
+import { type IInvitesConsumer } from "@peers-app/peers-sdk";
+/**
+ * Return the typed local-host consumer for the System Invites contract.
+ *
+ * The consumer is cached per host transport and rebuilt if the transport is replaced
+ * (e.g. after a socket reconnect).
+ */
+export declare function getInvitesConsumer(): Promise<IInvitesConsumer>;
+/** Shorthand for `(await getInvitesConsumer()).tools`. */
+export declare function inviteTools(): Promise<IInvitesConsumer["tools"]>;

package/dist/screens/invites/invites-ipc.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInvitesConsumer = getInvitesConsumer;
+exports.inviteTools = inviteTools;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const HOST_TRANSPORT_TIMEOUT_MS = 10_000;
+let cached;
+let pending;
+(0, peers_sdk_1.subscribeHostContractTransport)((transport) => {
+    if (cached && cached.transport !== transport) {
+        cached.consumer.dispose();
+        cached = undefined;
+        pending = undefined;
+    }
+}, { emitCurrent: false });
+async function load(transport) {
+    const userContext = await (0, peers_sdk_1.getUserContext)();
+    const consumer = (0, peers_sdk_1.createContractConsumer)((0, peers_sdk_1.getInvitesContractDefinition)(), transport, {
+        dataContextId: userContext.userId,
+    });
+    try {
+        await consumer.loadingPromise;
+        if ((0, peers_sdk_1.getHostContractTransport)() !== transport) {
+            consumer.dispose();
+            return getInvitesConsumer();
+        }
+        cached = { transport, consumer };
+        return consumer;
+    }
+    catch (error) {
+        consumer.dispose();
+        throw error;
+    }
+}
+/**
+ * Return the typed local-host consumer for the System Invites contract.
+ *
+ * The consumer is cached per host transport and rebuilt if the transport is replaced
+ * (e.g. after a socket reconnect).
+ */
+async function getInvitesConsumer() {
+    const transport = (0, peers_sdk_1.getHostContractTransport)() ??
+        (await (0, peers_sdk_1.waitForHostContractTransport)({ timeoutMs: HOST_TRANSPORT_TIMEOUT_MS }));
+    if (cached?.transport === transport) {
+        return cached.consumer;
+    }
+    if (pending) {
+        return pending;
+    }
+    pending = load(transport);
+    try {
+        return await pending;
+    }
+    finally {
+        pending = undefined;
+    }
+}
+/** Shorthand for `(await getInvitesConsumer()).tools`. */
+async function inviteTools() {
+    return (await getInvitesConsumer()).tools;
+}

package/dist/screens/invites/invites-screen.d.ts

@@ -0,0 +1,9 @@
+/** Screen props supplied by the router. */
+export interface InvitesScreenProps {
+    /** When `true`, the Accept panel starts open (the `invites/accept` route). */
+    accept?: boolean;
+}
+/**
+ * Invites hub: accept a pasted/scanned/deep-linked invite and review everything pending.
+ */
+export declare function InvitesScreen(props: InvitesScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/screens/invites/invites-screen.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvitesScreen = InvitesScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const accept_invite_1 = require("./accept-invite");
+const invite_capture_1 = require("./invite-capture");
+const pending_invites_list_1 = require("./pending-invites-list");
+/**
+ * Invites hub: accept a pasted/scanned/deep-linked invite and review everything pending.
+ */
+function InvitesScreen(props) {
+    const [accepting, setAccepting] = (0, react_1.useState)(Boolean(props.accept || (0, invite_capture_1.peekPendingInvite)()));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", style: { maxWidth: 720 }, 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 bi-envelope-paper me-2" }), "Invites"] }), !accepting ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-primary btn-sm", onClick: () => setAccepting(true), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right me-1" }), "Accept an invite"] })) : null] }), accepting ? ((0, jsx_runtime_1.jsx)("div", { className: "card mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body", children: [(0, jsx_runtime_1.jsx)("h6", { className: "card-title", children: "Accept an invite" }), (0, jsx_runtime_1.jsx)(accept_invite_1.AcceptInvite, { onDone: () => setAccepting(false) })] }) })) : null, (0, jsx_runtime_1.jsx)(pending_invites_list_1.PendingInvitesList, { title: "Waiting on you or others" }), (0, jsx_runtime_1.jsxs)("details", { className: "mt-3", children: [(0, jsx_runtime_1.jsx)("summary", { className: "small text-muted", style: { cursor: "pointer" }, children: "Recent history" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: (0, jsx_runtime_1.jsx)(pending_invites_list_1.PendingInvitesList, { statuses: ["accepted", "declined", "expired", "revoked"] }) })] })] }));
+}
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: "00invites0screen000000001",
+    component: InvitesScreen,
+    routes: [
+        {
+            isMatch: (props, context) => {
+                if (context.path === "invites") {
+                    return true;
+                }
+                if (context.path === invite_capture_1.ACCEPT_INVITE_PATH) {
+                    props.accept = true;
+                    return true;
+                }
+                return false;
+            },
+            uiCategory: "screen",
+            priority: 2,
+        },
+    ],
+});

package/dist/screens/invites/pending-invites-list.d.ts

@@ -0,0 +1,29 @@
+import { type IInvite, type InviteStatus } from "@peers-app/peers-sdk";
+/** Props for {@link PendingInvitesList}. */
+export interface PendingInvitesListProps {
+    /** Only show rows of this type. */
+    type?: IInvite["type"];
+    /** Only show rows for this group. */
+    groupId?: string;
+    /** Statuses to include; defaults to pending only. */
+    statuses?: InviteStatus[];
+    /** Hide the section entirely when there is nothing to show. */
+    hideWhenEmpty?: boolean;
+    title?: string;
+}
+/** Subscribe to the personal `Invites` table and return rows matching the filter, newest first. */
+export declare function useInviteRows(filter: {
+    type?: IInvite["type"];
+    groupId?: string;
+    statuses?: InviteStatus[];
+}): IInvite[] | undefined;
+/** Human summary of what a row is, from the local user's point of view. */
+export declare function describeInviteRow(row: IInvite): {
+    title: string;
+    detail: string;
+};
+/**
+ * Live list of invite rows with the actions each one supports. Subscribes to the `Invites`
+ * table directly, so it updates when replies arrive on any of the user's devices.
+ */
+export declare function PendingInvitesList(props: PendingInvitesListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/screens/invites/pending-invites-list.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInviteRows = useInviteRows;
+exports.describeInviteRow = describeInviteRow;
+exports.PendingInvitesList = PendingInvitesList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
+const invites_ipc_1 = require("./invites-ipc");
+/** Subscribe to the personal `Invites` table and return rows matching the filter, newest first. */
+function useInviteRows(filter) {
+    const [rows, setRows] = (0, react_1.useState)(undefined);
+    const statuses = filter.statuses ?? ["pending"];
+    const statusKey = statuses.join(",");
+    const refresh = (0, react_1.useCallback)(async () => {
+        const userContext = await (0, peers_sdk_1.getUserContext)();
+        const table = (0, peers_sdk_1.Invites)(userContext.userDataContext);
+        const all = await table.list({
+            ...(filter.type ? { type: filter.type } : {}),
+            ...(filter.groupId ? { groupId: filter.groupId } : {}),
+        });
+        const wanted = new Set(statusKey.split(","));
+        setRows(all
+            .filter((row) => wanted.has(row.status))
+            .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()));
+    }, [filter.type, filter.groupId, statusKey]);
+    (0, react_1.useEffect)(() => {
+        let disposed = false;
+        let dispose;
+        void refresh();
+        void (0, peers_sdk_1.getUserContext)().then((userContext) => {
+            if (disposed) {
+                return;
+            }
+            const sub = (0, peers_sdk_1.Invites)(userContext.userDataContext).dataChanged.subscribe(() => void refresh());
+            dispose = () => {
+                sub.unsubscribe();
+            };
+        });
+        return () => {
+            disposed = true;
+            dispose?.();
+        };
+    }, [refresh]);
+    return rows;
+}
+function counterpartLabel(row) {
+    return row.counterpart?.displayName || row.counterpart?.userId || "Someone";
+}
+/** Human summary of what a row is, from the local user's point of view. */
+function describeInviteRow(row) {
+    const who = counterpartLabel(row);
+    const role = row.role !== undefined ? (0, peers_sdk_1.getRoleLabel)(row.role) : undefined;
+    const group = row.groupName ?? "a group";
+    if (row.type === "contact") {
+        if (row.direction === "in") {
+            return { title: `${who} wants to connect`, detail: "Accept to add them as a contact." };
+        }
+        if (row.counterpart) {
+            return { title: `Contact invite to ${who}`, detail: "Waiting for them to accept." };
+        }
+        return {
+            title: row.mode === "profile" ? "Your profile QR" : "Contact invite link",
+            detail: row.mode === "profile" ? "Reusable; regenerate to revoke." : "Not used yet.",
+        };
+    }
+    if (row.direction === "in") {
+        if (row.mode === "direct") {
+            return {
+                title: `${who} invited you to ${group}`,
+                detail: role ? `You would join as ${role}.` : "",
+            };
+        }
+        return { title: `Joining ${group}`, detail: `Waiting for ${who} to approve.` };
+    }
+    if (row.mode === "direct") {
+        return { title: `Invited ${who} to ${group}`, detail: "Waiting for them to accept." };
+    }
+    if (row.counterpart) {
+        return {
+            title: `${who} wants to join ${group}`,
+            detail: role ? `Requested as ${role}. Approve or deny.` : "Approve or deny.",
+        };
+    }
+    return {
+        title: `${group} invite link`,
+        detail: `${row.mode === "open" ? "Open" : "Approval required"}${role ? ` · ${role}` : ""}`,
+    };
+}
+function actionsFor(row) {
+    if (row.status !== "pending") {
+        return [];
+    }
+    if (row.direction === "in") {
+        // Inbound rows I can act on: contact requests and direct group invites.
+        if (row.type === "contact" || row.mode === "direct") {
+            return ["accept", "decline"];
+        }
+        return []; // my own outstanding join request; nothing to do but wait
+    }
+    if (row.counterpart && row.type === "group" && row.mode !== "direct") {
+        return ["approve", "deny"];
+    }
+    return ["revoke"];
+}
+const ACTION_LABELS = {
+    accept: { text: "Accept", className: "btn-primary" },
+    decline: { text: "Decline", className: "btn-outline-secondary" },
+    approve: { text: "Approve", className: "btn-primary" },
+    deny: { text: "Deny", className: "btn-outline-secondary" },
+    revoke: { text: "Revoke", className: "btn-outline-danger" },
+};
+function InviteRow({ row }) {
+    const [busy, setBusy] = (0, react_1.useState)(undefined);
+    const [error, setError] = (0, react_1.useState)("");
+    const { title, detail } = describeInviteRow(row);
+    const run = async (action) => {
+        setBusy(action);
+        setError("");
+        try {
+            const tools = await (0, invites_ipc_1.inviteTools)();
+            const input = { inviteId: row.inviteId };
+            if (action === "accept")
+                await tools.acceptInvite(input);
+            else if (action === "decline")
+                await tools.declineInvite(input);
+            else if (action === "approve")
+                await tools.approveJoinRequest(input);
+            else if (action === "deny")
+                await tools.denyJoinRequest(input);
+            else
+                await tools.revokeInvite(input);
+        }
+        catch (err) {
+            setError(err.message || "Could not update the invite.");
+        }
+        finally {
+            setBusy(undefined);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "list-group-item", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center gap-2 flex-wrap", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: title }), detail ? (0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block", children: detail }) : null, row.deliveryState === "queued" ? ((0, jsx_runtime_1.jsx)("small", { className: "text-warning d-block", children: "Queued until they are reachable" })) : null, row.status !== "pending" ? ((0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block text-capitalize", children: row.status })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex gap-1", children: actionsFor(row).map((action) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: `btn btn-sm ${ACTION_LABELS[action].className}`, disabled: busy !== undefined, onClick: () => void run(action), children: busy === action ? "…" : ACTION_LABELS[action].text }, action))) })] }), error ? (0, jsx_runtime_1.jsx)("div", { className: "alert alert-danger py-1 px-2 small mt-2 mb-0", children: error }) : null] }));
+}
+/**
+ * Live list of invite rows with the actions each one supports. Subscribes to the `Invites`
+ * table directly, so it updates when replies arrive on any of the user's devices.
+ */
+function PendingInvitesList(props) {
+    const rows = useInviteRows(props);
+    if (!rows) {
+        return null;
+    }
+    if (rows.length === 0 && props.hideWhenEmpty) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "mb-3", children: [props.title ? (0, jsx_runtime_1.jsx)("h6", { className: "mb-2", children: props.title }) : null, rows.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { className: "text-muted small mb-0", children: "No pending invites." })) : ((0, jsx_runtime_1.jsx)("div", { className: "list-group", children: rows.map((row) => ((0, jsx_runtime_1.jsx)(InviteRow, { row: row }, row.inviteId))) }))] }));
+}

package/dist/screens/settings/settings-page.js

@@ -149,7 +149,7 @@ const ProfileSection = () => {
 };
 const AddDeviceSection = () => {
     const [open, setOpen] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("section", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { children: "Add another device" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "Create a five-minute invitation, compare the same number on both devices, and approve on each one before account access is transferred." }), open ? ((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: () => setOpen(false) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => setOpen(true), children: "Add another device" }))] }));
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "mt-4 pt-3 border-top", children: [(0, jsx_runtime_1.jsx)("h6", { children: "Add another device" }), (0, jsx_runtime_1.jsx)("p", { className: "small text-muted", children: "On the new device choose \u201CSign in from another device\u201D, then type the code it shows here and approve. Account access is transferred only after you approve." }), open ? ((0, jsx_runtime_1.jsx)(device_pairing_1.SourceDevicePairing, { onClose: () => setOpen(false) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary", onClick: () => setOpen(true), children: "Add another device" }))] }));
 };
 const PackagesRootDirectory = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Packages Directory:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: "form-control" })] }));

package/dist/screens/setup-user.js

@@ -10,8 +10,7 @@ const color_mode_dropdown_1 = require("./settings/color-mode-dropdown");
 const SetupUser = () => {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const [step, _setStep] = (0, react_1.useState)("select-user-type");
-    const [pairingInvitation, setPairingInvitation] = (0, react_1.useState)(() => (0, device_pairing_1.consumePendingDevicePairingInvite)());
-    const [showPairing, setShowPairing] = (0, react_1.useState)(() => Boolean(pairingInvitation));
+    const [showPairing, setShowPairing] = (0, react_1.useState)(false);
     const [isExistingUser, setIsExistingUser] = (0, react_1.useState)(null);
     const [userId, setUserId] = (0, react_1.useState)("");
     const [secretKey, setSecretKey] = (0, react_1.useState)("");
@@ -19,16 +18,6 @@ const SetupUser = () => {
     const [isValidating, setIsValidating] = (0, react_1.useState)(false);
     document.getElementById("appLoadingDiv")?.remove();
     const isDark = _colorMode === "dark";
-    (0, react_1.useEffect)(() => {
-        const capture = (event) => {
-            const invitation = event.detail;
-            setPairingInvitation(invitation);
-            (0, device_pairing_1.consumePendingDevicePairingInvite)();
-            setShowPairing(true);
-        };
-        window.addEventListener(device_pairing_1.DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
-        return () => window.removeEventListener(device_pairing_1.DEVICE_PAIRING_INVITE_CAPTURED_EVENT, capture);
-    }, []);
     const handleNewUser = async () => {
         setError("");
         setIsValidating(true);
@@ -83,10 +72,7 @@ const SetupUser = () => {
                     maxWidth: "560px",
                     width: "100%",
                     backgroundColor: isDark ? "#2d3238" : "#ffffff",
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-4 p-md-5", children: (0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { initialInvitation: pairingInvitation, onInvitationConsumed: () => setPairingInvitation(undefined), onBack: () => {
-                            setPairingInvitation(undefined);
-                            setShowPairing(false);
-                        } }) }) }) }));
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: "card-body p-4 p-md-5", children: (0, jsx_runtime_1.jsx)(device_pairing_1.DestinationDevicePairing, { onBack: () => setShowPairing(false) }) }) }) }));
     }
     // Step 1: Select User Type
     if (step === "select-user-type" && isExistingUser === null) {
@@ -94,7 +80,7 @@ const SetupUser = () => {
                     maxWidth: "500px",
                     width: "100%",
                     backgroundColor: isDark ? "#2d3238" : "#ffffff",
-                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: "Welcome to Peers" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Let's get you set up" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg btn-primary py-3", onClick: () => setIsExistingUser(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-plus fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "I'm a New User" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Create a new account" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setIsExistingUser(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "I'm an Existing User" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Sign in with your credentials" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setShowPairing(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-phone fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "Use Another Device" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Sign in with a device already on Peers" })] })] }) })] })] }) }) }));
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: "Welcome to Peers" }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Let's get you set up" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "btn btn-lg btn-primary py-3", onClick: () => setIsExistingUser(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-person-plus fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "New account" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Create a new account on this device" })] })] }) }), (0, jsx_runtime_1.jsx)("button", { className: `btn btn-lg py-3 ${isDark ? "btn-outline-light" : "btn-outline-primary"}`, onClick: () => setShowPairing(true), children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-phone fs-4 me-2" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-semibold", children: "Sign in from another device" }), (0, jsx_runtime_1.jsx)("small", { className: "opacity-75", children: "Show a code to a device that is already signed in" })] })] }) }), (0, jsx_runtime_1.jsxs)("details", { className: "text-center mt-2", children: [(0, jsx_runtime_1.jsx)("summary", { className: `small ${isDark ? "text-light opacity-75" : "text-muted"}`, style: { cursor: "pointer" }, children: "Advanced" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: `btn btn-sm mt-2 ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`, onClick: () => setIsExistingUser(true), children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-key me-1" }), "Enter a user ID and secret key"] })] })] })] }) }) }));
     }
     // Step 2: New User Confirmation
     if (isExistingUser === false) {
@@ -110,7 +96,7 @@ const SetupUser = () => {
                     maxWidth: "500px",
                     width: "100%",
                     backgroundColor: isDark ? "#2d3238" : "#ffffff",
-                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-2", children: [(0, jsx_runtime_1.jsxs)("h3", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { children: "Sign In" }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right text-primary" })] }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Enter your existing credentials" })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: (e) => {
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "card-body p-4 p-md-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-2", children: [(0, jsx_runtime_1.jsxs)("h3", { className: `fw-bold mb-2 ${isDark ? "text-light" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { children: "Sign In" }), "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("i", { className: "bi bi-box-arrow-in-right text-primary" })] }), (0, jsx_runtime_1.jsx)("p", { className: isDark ? "text-light opacity-75" : "text-muted", children: "Paste your user ID and secret key. If you have another signed-in device, \u201CSign in from another device\u201D is easier and safer." })] }), error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger", role: "alert", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: (e) => {
                                 e.preventDefault();
                                 handleExistingUser();
                             }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "userId", className: "form-label fw-semibold", children: "User ID" }), (0, jsx_runtime_1.jsx)("input", { id: "userId", type: "text", className: "form-control form-control-lg", placeholder: "Enter your user ID", value: userId, onChange: (e) => setUserId(e.target.value), disabled: isValidating })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "secretKey", className: "form-label fw-semibold", children: "Secret Key" }), (0, jsx_runtime_1.jsx)("input", { id: "secretKey", type: "password", className: "form-control form-control-lg", placeholder: "Enter your secret key", value: secretKey, onChange: (e) => setSecretKey(e.target.value), disabled: isValidating })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-grid gap-2", children: [(0, jsx_runtime_1.jsx)("button", { type: "submit", className: "btn btn-lg btn-primary", disabled: isValidating, children: isValidating ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "spinner-border spinner-border-sm me-2" }), "Signing In..."] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-check-circle me-2" }), "Sign In"] })) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn btn-outline-secondary", onClick: () => setIsExistingUser(null), disabled: isValidating, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-arrow-left me-2" }), "Back"] })] })] })] }) }) }));

package/dist/system-apps/index.d.ts

@@ -6,7 +6,7 @@ export { consoleLogsApp } from "./console-logs.app";
 export { contactsApp } from "./contacts.app";
 export { dataExplorerApp } from "./data-explorer.app";
 export { groupsApp } from "./groups.app";
-export { joinGroupApp } from "./join-group.app";
+export { invitesApp } from "./invites.app";
 export { mobileSettingsApp } from "./mobile-settings.app";
 export { networkViewerApp } from "./network-viewer.app";
 export { packagesApp } from "./packages.app";

package/dist/system-apps/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.systemPackage = exports.systemApps = exports.workflowsApp = exports.variablesApp = exports.typesApp = exports.toolsApp = exports.threadsApp = exports.settingsApp = exports.searchApp = exports.packagesApp = exports.networkViewerApp = exports.mobileSettingsApp = exports.joinGroupApp = exports.groupsApp = exports.dataExplorerApp = exports.contactsApp = exports.consoleLogsApp = exports.assistantsApp = exports.accountApp = void 0;
+exports.systemPackage = exports.systemApps = exports.workflowsApp = exports.variablesApp = exports.typesApp = exports.toolsApp = exports.threadsApp = exports.settingsApp = exports.searchApp = exports.packagesApp = exports.networkViewerApp = exports.mobileSettingsApp = exports.invitesApp = exports.groupsApp = exports.dataExplorerApp = exports.contactsApp = exports.consoleLogsApp = exports.assistantsApp = exports.accountApp = void 0;
 var account_app_1 = require("./account.app");
 Object.defineProperty(exports, "accountApp", { enumerable: true, get: function () { return account_app_1.accountApp; } });
 var assistants_app_1 = require("./assistants.app");
@@ -13,8 +13,8 @@ var data_explorer_app_1 = require("./data-explorer.app");
 Object.defineProperty(exports, "dataExplorerApp", { enumerable: true, get: function () { return data_explorer_app_1.dataExplorerApp; } });
 var groups_app_1 = require("./groups.app");
 Object.defineProperty(exports, "groupsApp", { enumerable: true, get: function () { return groups_app_1.groupsApp; } });
-var join_group_app_1 = require("./join-group.app");
-Object.defineProperty(exports, "joinGroupApp", { enumerable: true, get: function () { return join_group_app_1.joinGroupApp; } });
+var invites_app_1 = require("./invites.app");
+Object.defineProperty(exports, "invitesApp", { enumerable: true, get: function () { return invites_app_1.invitesApp; } });
 var mobile_settings_app_1 = require("./mobile-settings.app");
 Object.defineProperty(exports, "mobileSettingsApp", { enumerable: true, get: function () { return mobile_settings_app_1.mobileSettingsApp; } });
 var network_viewer_app_1 = require("./network-viewer.app");
@@ -42,7 +42,7 @@ const console_logs_app_2 = require("./console-logs.app");
 const contacts_app_2 = require("./contacts.app");
 const data_explorer_app_2 = require("./data-explorer.app");
 const groups_app_2 = require("./groups.app");
-const join_group_app_2 = require("./join-group.app");
+const invites_app_2 = require("./invites.app");
 const mobile_settings_app_2 = require("./mobile-settings.app");
 const network_viewer_app_2 = require("./network-viewer.app");
 const packages_app_2 = require("./packages.app");
@@ -76,7 +76,7 @@ exports.systemApps = [
     packages_app_2.packagesApp,
     contacts_app_2.contactsApp,
     groups_app_2.groupsApp,
-    join_group_app_2.joinGroupApp,
+    invites_app_2.invitesApp,
     // User & Settings Apps
     account_app_2.accountApp,
     settings_app_2.settingsApp,

package/dist/system-apps/{join-group.app.d.ts → invites.app.d.ts}

@@ -1,2 +1,2 @@
 import type { IAppNav } from "@peers-app/peers-sdk";
-export declare const joinGroupApp: IAppNav;
+export declare const invitesApp: IAppNav;

package/dist/system-apps/invites.app.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.invitesApp = void 0;
+exports.invitesApp = {
+    name: "Invites",
+    displayName: "Invites",
+    iconClassName: "bi-envelope-paper",
+    navigationPath: "invites",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.23.13",
+  "version": "0.24.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.23.13",
+    "@peers-app/peers-sdk": "^0.24.0",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.23.13",
+    "@peers-app/peers-sdk": "0.24.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -89,6 +89,7 @@
     "dotenv": "^16.4.5",
     "fast-json-stable-stringify": "^2.1.0",
     "js-sha256": "^0.11.0",
+    "jsqr": "^1.4.0",
     "keytar": "^7.9.0",
     "langchain": "^0.1.36",
     "lexical": "^0.41.0",