@peers-app/peers-ui 0.8.4 → 0.8.6

package/dist/components/left-bar.js

@@ -47,9 +47,7 @@ const LeftBarContent = () => {
                     react_1.default.createElement("i", { className: "bi bi-three-dots-vertical", style: { fontSize: '12pt' } })),
                 react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end dropdown-menu-dark text-small shadow", style: { border: '1px grey solid' }, "aria-labelledby": "dropdownUser1" },
                     react_1.default.createElement("li", null,
-                        react_1.default.createElement("a", { className: "dropdown-item", href: "#profile" }, "Profile")),
-                    react_1.default.createElement("li", null,
-                        react_1.default.createElement("a", { className: "dropdown-item", href: "#settings" }, "Settings"))))),
+                        react_1.default.createElement("a", { className: "dropdown-item", href: "#settings" }, "Profile & Settings"))))),
         react_1.default.createElement("hr", { className: 'p-0' }),
         react_1.default.createElement(MenuSection, { menuItems: [
                 // { text: "Shell", icon: "bi bi-robot" },

package/dist/components/router.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import "../screens/console-logs/console-logs-list";
 import "../screens/groups";
 import "../screens/contacts";
+import "../screens/join-group";
 import "../screens/network-viewer";
 import "../screens/data-explorer";
 export declare function Router({ path: providedPath }?: {

package/dist/components/router.js

@@ -41,7 +41,6 @@ const react_1 = __importDefault(require("react"));
 const globals = __importStar(require("../globals"));
 const assistant_details_1 = require("../screens/assistants/assistant-details");
 const assistant_list_1 = require("../screens/assistants/assistant-list");
-const profile_1 = require("../screens/profile");
 // import { TaskDetails } from "../screens/tasks/task-details";
 // import { TaskList } from "../screens/tasks/task-list";
 const tool_details_1 = require("../screens/tools/tool-details");
@@ -73,6 +72,7 @@ const global_search_1 = require("../screens/search/global-search");
 require("../screens/console-logs/console-logs-list");
 require("../screens/groups");
 require("../screens/contacts");
+require("../screens/join-group");
 require("../screens/network-viewer");
 require("../screens/data-explorer");
 function Router({ path: providedPath } = {}) {
@@ -94,12 +94,9 @@ function Router({ path: providedPath } = {}) {
         if (path === 'search') {
             return react_1.default.createElement(global_search_1.GlobalSearch, null);
         }
-        if (path === 'settings') {
+        if (path === 'settings' || path === 'profile') {
             return react_1.default.createElement(settings_page_1.SettingsPage, null);
         }
-        if (path === 'profile') {
-            return react_1.default.createElement(profile_1.Profile, null);
-        }
         if (path === 'threads' || path === '') {
             return react_1.default.createElement(channel_view_1.ChannelMessages, null);
         }

package/dist/hooks.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
 import { Observable } from "@peers-app/peers-sdk";
+import React from 'react';
 /**
  * Use this to subscribe to an observable or computed in a functional component.
+ * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
  * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @param deps an array of dependencies that will cause re-subscription when changed
  * @returns the current value of the observable or computed and a function to set the value
  */
 export declare function useObservable<T>(sub: Observable<T> | T, deps?: React.DependencyList): [T, (value: T) => void];

package/dist/hooks.js

@@ -5,46 +5,38 @@ exports.usePromise = usePromise;
 exports.useObservableState = useObservableState;
 exports.useSubscription = useSubscription;
 exports.useOnScreen = useOnScreen;
-const react_1 = require("react");
-const lodash_1 = require("lodash");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
 /**
  * Use this to subscribe to an observable or computed in a functional component.
+ * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
  * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @param deps an array of dependencies that will cause re-subscription when changed
  * @returns the current value of the observable or computed and a function to set the value
  */
 function useObservable(sub, deps = []) {
-    const [data, setData] = (0, react_1.useState)(() => (0, peers_sdk_1.unwrapObservable)(sub));
-    (0, react_1.useEffect)(() => {
+    // Create memoized subscribe function that adapts Observable's subscribe API to useSyncExternalStore's expected signature
+    const subscribe = (0, react_1.useCallback)((onStoreChange) => {
         if (!(0, peers_sdk_1.isSubscribable)(sub)) {
-            return;
-        }
-        const subscription = sub.subscribe(() => {
-            const newData = sub();
-            // @ts-ignore
-            if ((0, lodash_1.isArray)(newData) && newData === data) {
-                // @ts-ignore
-                setData([...newData]);
-            }
-            else {
-                setData(newData);
-            }
-        });
-        // the data might change _after_ useObservable is called but _before_ the subscription has been created
-        // this checks for that and updates the state with the new data if necessary
-        const newData = sub();
-        if (!(0, lodash_1.isEqual)(data, newData)) {
-            setData(newData);
+            // If not subscribable, return a no-op unsubscribe
+            return () => { };
         }
+        const subscription = sub.subscribe(onStoreChange);
         return () => subscription.dispose();
-    }, deps);
-    return [data, newData => {
-            setData(newData);
-            if ((0, peers_sdk_1.isSubscribable)(sub)) {
-                sub(newData);
-            }
-        }];
+    }, [sub, ...deps]);
+    // getSnapshot returns the current value from the observable
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        return (0, peers_sdk_1.unwrapObservable)(sub);
+    }, [sub, ...deps]);
+    // Use useSyncExternalStore for concurrent-safe subscription
+    const data = (0, react_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    // Create setter that updates both local understanding and the observable
+    const setter = (0, react_1.useCallback)((newData) => {
+        if ((0, peers_sdk_1.isSubscribable)(sub)) {
+            sub(newData);
+        }
+    }, [sub]);
+    return [data, setter];
 }
 /**
  * Use this to easily wait for a promise in a functional component.
@@ -104,26 +96,3 @@ function useOnScreen(ref) {
     }, []);
     return isIntersecting;
 }
-// /**
-//  * This creates an observable that will automatically persist its value between page reloads using localStorage.
-//  * If localStorage is not available, the observable will not persist its value.
-//  * @param initialValue the initial value of the observable
-//  * @param globalName the name to use when storing the value in localStorage
-//  * @returns the observable that will persist between page reloads
-//  */
-// export function persistentValue<T>(initialValue: T, globalName: string): Observable<T | undefined> {
-//   let q = observable<T>();
-//   if (typeof localStorage === 'undefined') {
-//     return q;
-//   }
-//   q.subscribe(newVal => {
-//     localStorage.setItem(globalName, JSON.stringify(toJSON(newVal)))
-//   })
-//   const existing = localStorage.getItem(globalName);
-//   if (existing) {
-//     q(fromJSON(JSON.parse(existing)))
-//   } else {
-//     q(initialValue);
-//   }
-//   return q;
-// }

package/dist/hooks.test.d.ts

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

package/dist/hooks.test.js

@@ -0,0 +1,247 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("./hooks");
+// Helper component to test useObservable
+function TestComponent({ obs, testId = 'value' }) {
+    const [value, setValue] = (0, hooks_1.useObservable)(obs);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("span", { "data-testid": testId }, JSON.stringify(value)),
+        react_1.default.createElement("button", { "data-testid": "setter", onClick: () => setValue('new-value') }, "Set")));
+}
+// Helper component to test array behavior
+function ArrayTestComponent({ obs }) {
+    const [value] = (0, hooks_1.useObservable)(obs);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("span", { "data-testid": "array-value" }, JSON.stringify(value)),
+        react_1.default.createElement("span", { "data-testid": "array-length" }, value.length)));
+}
+// Helper component to test useObservableState
+function ObservableStateTestComponent({ initialValue }) {
+    const obs = (0, hooks_1.useObservableState)(initialValue);
+    const [value] = (0, hooks_1.useObservable)(obs);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("span", { "data-testid": "state-value" }, value),
+        react_1.default.createElement("button", { "data-testid": "increment", onClick: () => obs(obs() + 1) }, "Increment")));
+}
+describe('useObservable', () => {
+    describe('basic functionality', () => {
+        it('should return the current value of an observable', () => {
+            const obs = (0, peers_sdk_1.observable)('hello');
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('"hello"');
+        });
+        it('should return the value when passed a plain value (non-observable)', () => {
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: "plain-value" }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('"plain-value"');
+        });
+        it('should re-render when observable value changes', async () => {
+            const obs = (0, peers_sdk_1.observable)('initial');
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('"initial"');
+            (0, react_2.act)(() => {
+                obs('updated');
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('value')).toHaveTextContent('"updated"');
+            });
+        });
+        it('should update the observable when setter is called', async () => {
+            const obs = (0, peers_sdk_1.observable)('initial');
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            (0, react_2.act)(() => {
+                react_2.screen.getByTestId('setter').click();
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(obs()).toBe('new-value');
+                expect(react_2.screen.getByTestId('value')).toHaveTextContent('"new-value"');
+            });
+        });
+        it('should handle undefined values', () => {
+            const obs = (0, peers_sdk_1.observable)(undefined);
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            // undefined serializes to empty string in JSON.stringify, but actually shows as nothing
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('');
+        });
+        it('should handle object values', async () => {
+            const obs = (0, peers_sdk_1.observable)({ name: 'test', count: 5 });
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('{"name":"test","count":5}');
+            (0, react_2.act)(() => {
+                obs({ name: 'updated', count: 10 });
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('value')).toHaveTextContent('{"name":"updated","count":10}');
+            });
+        });
+    });
+    describe('array handling', () => {
+        it('should handle array values', () => {
+            const obs = (0, peers_sdk_1.observable)(['a', 'b', 'c']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-value')).toHaveTextContent('["a","b","c"]');
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+        });
+        it('should re-render when array is replaced with new reference', async () => {
+            const obs = (0, peers_sdk_1.observable)(['a', 'b']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+            (0, react_2.act)(() => {
+                obs(['a', 'b', 'c']); // New array reference
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+            });
+        });
+        it('should NOT re-render when array is mutated in place (requires immutable updates)', async () => {
+            // This tests the case where an array is mutated in place and notifySubscribers is called.
+            // 
+            // IMPORTANT BEHAVIORAL NOTE:
+            // The OLD implementation (useState + useEffect) had special handling that would 
+            // spread the array when it detected same-reference mutation: 
+            //   if (isArray(newData) && newData === data) setData([...newData])
+            // 
+            // The NEW implementation (useSyncExternalStore) does NOT do this.
+            // useSyncExternalStore uses Object.is() comparison on getSnapshot results.
+            // If the reference is the same, React won't re-render.
+            //
+            // This is actually the CORRECT behavior - it encourages immutable data patterns
+            // which are required for React 18 concurrent rendering to work correctly.
+            // Mutating data in place can cause tearing in concurrent mode.
+            const obs = (0, peers_sdk_1.observable)(['a', 'b']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+            (0, react_2.act)(() => {
+                // Mutate the array in place (BAD PRACTICE - don't do this!)
+                const arr = obs();
+                arr.push('c');
+                obs.notifySubscribers();
+            });
+            // The observable itself has the mutated value
+            expect(obs()).toEqual(['a', 'b', 'c']);
+            // But the component did NOT re-render because the reference didn't change
+            // This is expected with useSyncExternalStore - it requires immutable updates
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+        });
+        it('should re-render when array is properly updated with spread', async () => {
+            // This is the recommended pattern for updating arrays
+            const obs = (0, peers_sdk_1.observable)(['a', 'b']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+            (0, react_2.act)(() => {
+                obs([...obs(), 'c']); // Proper immutable update
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+                expect(react_2.screen.getByTestId('array-value')).toHaveTextContent('["a","b","c"]');
+            });
+        });
+    });
+    describe('subscription management', () => {
+        it('should unsubscribe when component unmounts', () => {
+            const obs = (0, peers_sdk_1.observable)('test');
+            const initialSubscriberCount = obs.subscriberCount();
+            const { unmount } = (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            // Should have subscribed
+            expect(obs.subscriberCount()).toBeGreaterThan(initialSubscriberCount);
+            unmount();
+            // Should have unsubscribed
+            expect(obs.subscriberCount()).toBe(initialSubscriberCount);
+        });
+        it('should handle multiple components subscribing to same observable', async () => {
+            const obs = (0, peers_sdk_1.observable)('shared');
+            (0, react_2.render)(react_1.default.createElement("div", null,
+                react_1.default.createElement(TestComponent, { obs: obs, testId: "value1" }),
+                react_1.default.createElement(TestComponent, { obs: obs, testId: "value2" })));
+            expect(react_2.screen.getByTestId('value1')).toHaveTextContent('"shared"');
+            expect(react_2.screen.getByTestId('value2')).toHaveTextContent('"shared"');
+            (0, react_2.act)(() => {
+                obs('updated');
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('value1')).toHaveTextContent('"updated"');
+                expect(react_2.screen.getByTestId('value2')).toHaveTextContent('"updated"');
+            });
+        });
+    });
+    describe('rapid updates', () => {
+        it('should handle rapid sequential updates correctly', async () => {
+            const obs = (0, peers_sdk_1.observable)(0);
+            function CounterComponent() {
+                const [value] = (0, hooks_1.useObservable)(obs);
+                return react_1.default.createElement("span", { "data-testid": "counter" }, value);
+            }
+            (0, react_2.render)(react_1.default.createElement(CounterComponent, null));
+            (0, react_2.act)(() => {
+                for (let i = 1; i <= 10; i++) {
+                    obs(i);
+                }
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('counter')).toHaveTextContent('10');
+            });
+        });
+    });
+});
+describe('useObservableState', () => {
+    it('should create an observable with the initial value', () => {
+        (0, react_2.render)(react_1.default.createElement(ObservableStateTestComponent, { initialValue: 42 }));
+        expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('42');
+    });
+    it('should re-render when the observable is updated', async () => {
+        (0, react_2.render)(react_1.default.createElement(ObservableStateTestComponent, { initialValue: 0 }));
+        expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('0');
+        (0, react_2.act)(() => {
+            react_2.screen.getByTestId('increment').click();
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('1');
+        });
+    });
+    it('should maintain the same observable instance across re-renders', async () => {
+        let capturedObs = null;
+        function CaptureObsComponent() {
+            const obs = (0, hooks_1.useObservableState)(0);
+            if (!capturedObs) {
+                capturedObs = obs;
+            }
+            const [value] = (0, hooks_1.useObservable)(obs);
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { "data-testid": "value" }, value),
+                react_1.default.createElement("span", { "data-testid": "same-obs" }, obs === capturedObs ? 'same' : 'different'),
+                react_1.default.createElement("button", { "data-testid": "update", onClick: () => obs(obs() + 1) }, "Update")));
+        }
+        (0, react_2.render)(react_1.default.createElement(CaptureObsComponent, null));
+        expect(react_2.screen.getByTestId('same-obs')).toHaveTextContent('same');
+        // Trigger a re-render by updating the observable
+        (0, react_2.act)(() => {
+            react_2.screen.getByTestId('update').click();
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('1');
+            expect(react_2.screen.getByTestId('same-obs')).toHaveTextContent('same');
+        });
+    });
+    it('should not subscribe when doNotSubscribe is true', () => {
+        function NoSubscribeComponent() {
+            const obs = (0, hooks_1.useObservableState)(0, true); // doNotSubscribe = true
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { "data-testid": "value" }, obs()),
+                react_1.default.createElement("button", { "data-testid": "update", onClick: () => obs(obs() + 1) }, "Update")));
+        }
+        (0, react_2.render)(react_1.default.createElement(NoSubscribeComponent, null));
+        expect(react_2.screen.getByTestId('value')).toHaveTextContent('0');
+        // Update won't cause re-render since we're not subscribed
+        (0, react_2.act)(() => {
+            react_2.screen.getByTestId('update').click();
+        });
+        // Value in DOM should still show 0 since component didn't re-render
+        // But the observable itself has been updated
+        expect(react_2.screen.getByTestId('value')).toHaveTextContent('0');
+    });
+});

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

@@ -0,0 +1,15 @@
+/**
+ * Component for admins to prepare group invitations and manage join requests.
+ *
+ * Shows in the group details Members tab for users with Admin role or above.
+ *
+ * Communicates with device layer through pvars (not direct imports).
+ */
+import React from "react";
+import { UserContext } from "@peers-app/peers-sdk";
+interface GroupInviteListenerProps {
+    groupId: string;
+    userContext: UserContext;
+}
+export declare const GroupInviteListener: (props: GroupInviteListenerProps) => React.JSX.Element;
+export {};

package/dist/screens/groups/group-invite-listener.js

@@ -0,0 +1,189 @@
+"use strict";
+/**
+ * Component for admins to prepare group invitations and manage join requests.
+ *
+ * Shows in the group details Members tab for users with Admin role or above.
+ *
+ * Communicates with device layer through pvars (not direct imports).
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupInviteListener = void 0;
+const react_1 = __importStar(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("../../hooks");
+const GroupInviteListener = (props) => {
+    const { groupId } = props;
+    // State
+    const [password, setPassword] = (0, react_1.useState)("");
+    const [isListening, setIsListening] = (0, react_1.useState)(false);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [approvalRole, setApprovalRole] = (0, react_1.useState)(peers_sdk_1.GroupMemberRole.Reader);
+    const [processingRequestId, setProcessingRequestId] = (0, react_1.useState)(null);
+    // Observables
+    const [listeners] = (0, hooks_1.useObservable)(peers_sdk_1.groupInviteListeners);
+    const [requests] = (0, hooks_1.useObservable)(peers_sdk_1.groupInviteRequests);
+    const [status] = (0, hooks_1.useObservable)(peers_sdk_1.groupInviteStatus);
+    // Check if we're currently listening for this group
+    const currentListener = listeners?.[groupId];
+    const pendingRequests = (requests || []).filter(r => r.groupId === groupId);
+    // Sync local state with listener state
+    (0, react_1.useEffect)(() => {
+        if (currentListener) {
+            setPassword(currentListener.password);
+            setIsListening(true);
+        }
+        else {
+            setIsListening(false);
+        }
+    }, [currentListener]);
+    // Generate a new password
+    const handleGeneratePassword = (0, react_1.useCallback)(() => {
+        const newPassword = (0, peers_sdk_1.generateInvitePassword)();
+        setPassword(newPassword);
+    }, []);
+    // Start listening for invitations (set pvar, device layer reacts)
+    const handleStartListening = (0, react_1.useCallback)(() => {
+        if (!password.trim() || password.length < 4) {
+            alert("Password must be at least 4 characters");
+            return;
+        }
+        // Set the action pvar - device layer will process it
+        (0, peers_sdk_1.groupInviteStartListening)({ groupId, password });
+    }, [groupId, password]);
+    // Stop listening (set pvar, device layer reacts)
+    const handleStopListening = (0, react_1.useCallback)(() => {
+        // Set the action pvar - device layer will process it
+        (0, peers_sdk_1.groupInviteStopListening)(groupId);
+    }, [groupId]);
+    // Copy password to clipboard
+    const handleCopyPassword = (0, react_1.useCallback)(async () => {
+        const success = await (0, peers_sdk_1.copyToClipboard)(password);
+        if (success) {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+    }, [password]);
+    // Approve a join request (set pvar, device layer reacts)
+    const handleApprove = (0, react_1.useCallback)((request) => {
+        setProcessingRequestId(request.requestId);
+        // Set the action pvar - device layer will process it
+        (0, peers_sdk_1.groupInviteProcessRequest)({
+            requestId: request.requestId,
+            approved: true,
+            role: approvalRole
+        });
+        // Clear processing state after a short delay
+        setTimeout(() => setProcessingRequestId(null), 1000);
+    }, [approvalRole]);
+    // Deny a join request (set pvar, device layer reacts)
+    const handleDeny = (0, react_1.useCallback)((request) => {
+        setProcessingRequestId(request.requestId);
+        // Set the action pvar - device layer will process it
+        (0, peers_sdk_1.groupInviteProcessRequest)({
+            requestId: request.requestId,
+            approved: false,
+            role: peers_sdk_1.GroupMemberRole.None
+        });
+        // Clear processing state after a short delay
+        setTimeout(() => setProcessingRequestId(null), 1000);
+    }, []);
+    return (react_1.default.createElement("div", { className: "card mb-3" },
+        react_1.default.createElement("div", { className: "card-header" },
+            react_1.default.createElement("h6", { className: "mb-0" },
+                react_1.default.createElement("i", { className: "bi-person-plus-fill me-2" }),
+                "Invite New Members")),
+        react_1.default.createElement("div", { className: "card-body" },
+            react_1.default.createElement("div", { className: "mb-3" },
+                react_1.default.createElement("label", { className: "form-label small text-muted" }, "Invitation Password"),
+                react_1.default.createElement("div", { className: "input-group" },
+                    react_1.default.createElement("input", { type: "text", className: "form-control font-monospace", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "Enter or generate a password...", disabled: isListening }),
+                    react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleGeneratePassword, disabled: isListening, title: "Generate random password" },
+                        react_1.default.createElement("i", { className: "bi-shuffle" })),
+                    react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: handleCopyPassword, disabled: !password, title: "Copy password" },
+                        react_1.default.createElement("i", { className: copied ? "bi-check-lg text-success" : "bi-clipboard" }))),
+                react_1.default.createElement("small", { className: "text-muted" }, "Share this password with people you want to invite. They can enter it in the \"Join Group\" screen.")),
+            react_1.default.createElement("div", { className: "d-flex gap-2" }, !isListening ? (react_1.default.createElement("button", { className: "btn btn-primary", onClick: handleStartListening, disabled: !password || password.length < 4 },
+                react_1.default.createElement("i", { className: "bi-broadcast me-2" }),
+                "Start Listening")) : (react_1.default.createElement("button", { className: "btn btn-danger", onClick: handleStopListening },
+                react_1.default.createElement("i", { className: "bi-stop-circle me-2" }),
+                "Stop Listening"))),
+            isListening && (react_1.default.createElement("div", { className: "alert alert-success mt-3 mb-0 d-flex align-items-center" },
+                react_1.default.createElement("div", { className: "spinner-border spinner-border-sm me-2", role: "status" },
+                    react_1.default.createElement("span", { className: "visually-hidden" }, "Listening...")),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("strong", null, "Listening for join requests"),
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement("small", null,
+                        "Password: ",
+                        react_1.default.createElement("code", null, password))))),
+            status && (react_1.default.createElement("div", { className: "alert alert-info mt-3 mb-0" },
+                react_1.default.createElement("i", { className: "bi-info-circle me-2" }),
+                status)),
+            pendingRequests.length > 0 && (react_1.default.createElement("div", { className: "mt-3" },
+                react_1.default.createElement("h6", { className: "mb-2" },
+                    react_1.default.createElement("i", { className: "bi-inbox-fill me-2" }),
+                    "Pending Requests (",
+                    pendingRequests.length,
+                    ")"),
+                react_1.default.createElement("div", { className: "mb-2" },
+                    react_1.default.createElement("label", { className: "form-label small text-muted" }, "Role for new members:"),
+                    react_1.default.createElement("select", { className: "form-select form-select-sm", value: approvalRole, onChange: (e) => setApprovalRole(Number(e.target.value)), style: { width: "auto" } },
+                        react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Reader }, "Reader"),
+                        react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Writer }, "Writer"),
+                        react_1.default.createElement("option", { value: peers_sdk_1.GroupMemberRole.Admin }, "Admin"))),
+                react_1.default.createElement("div", { className: "list-group" }, pendingRequests.map((request) => (react_1.default.createElement("div", { key: request.requestId, className: "list-group-item" },
+                    react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                                react_1.default.createElement("i", { className: "bi-person-fill me-2" }),
+                                react_1.default.createElement("div", null,
+                                    react_1.default.createElement("strong", null, request.requester.name || request.requester.userId),
+                                    request.requester.name && (react_1.default.createElement("small", { className: "text-muted d-block" }, request.requester.userId)))),
+                            react_1.default.createElement("small", { className: "text-muted" },
+                                "Device: ",
+                                request.requester.deviceId.slice(0, 8),
+                                "...",
+                                " | ",
+                                "Received: ",
+                                new Date(request.receivedAt).toLocaleTimeString())),
+                        react_1.default.createElement("div", { className: "d-flex gap-2" },
+                            react_1.default.createElement("button", { className: "btn btn-success btn-sm", onClick: () => handleApprove(request), disabled: processingRequestId === request.requestId }, processingRequestId === request.requestId ? (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm" })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("i", { className: "bi-check-lg me-1" }),
+                                "Approve"))),
+                            react_1.default.createElement("button", { className: "btn btn-outline-danger btn-sm", onClick: () => handleDeny(request), disabled: processingRequestId === request.requestId },
+                                react_1.default.createElement("i", { className: "bi-x-lg" })))))))))))));
+};
+exports.GroupInviteListener = GroupInviteListener;

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

@@ -10,6 +10,7 @@ const loading_indicator_1 = require("../../components/loading-indicator");
 const trust_level_badge_1 = require("../../components/trust-level-badge");
 const typeahead_1 = require("../../components/typeahead");
 const hooks_1 = require("../../hooks");
+const group_invite_listener_1 = require("./group-invite-listener");
 const GroupMembersUI = (props) => {
     const { groupId, userContext } = props;
     // Get the group's data context and tables
@@ -231,9 +232,10 @@ const GroupMembersUI = (props) => {
                     react_1.default.createElement("strong", null,
                         "Founder: ",
                         founderData.founderUser?.name || founderData.founderUserId))))),
+        canEdit && (react_1.default.createElement(group_invite_listener_1.GroupInviteListener, { groupId: groupId, userContext: userContext })),
         canEdit && (react_1.default.createElement("div", { className: "card mb-3" },
             react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("h6", { className: "card-title" }, "Add Member"),
+                react_1.default.createElement("h6", { className: "card-title" }, "Add Existing Contact as Member"),
                 react_1.default.createElement("div", { className: "row g-2" },
                     react_1.default.createElement("div", { className: "col-md-6" },
                         react_1.default.createElement(typeahead_1.Typeahead, { placeholder: "Search contacts to add...", searchFn: searchContacts, onSelectionChange: (items) => setSelectedContacts(items), renderItem: renderContactItem, renderBadge: renderContactBadge, selectedItems: selectedContacts.map(contact => ({ ...contact, id: contact.userId })), multiSelect: true, disabled: addingMember })),

package/dist/screens/join-group/index.d.ts

@@ -0,0 +1,2 @@
+import './join-group';
+export * from './join-group';