@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/globals.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.groups = exports.isDesktop = exports.windowHeight = exports.windowWidth = exports.me = exports.threadViewOpen = exports.openThreads = exports.mainContentPath = exports._mainContentPath = exports.packageReloaded = void 0;
+exports.groups = exports.isDesktop = exports.windowHeight = exports.windowWidth = exports.me = exports.mainContentPath = exports._mainContentPath = exports.packageReloaded = void 0;
 exports.queryParam = queryParam;
 exports.openThread = openThread;
 exports.openThreadInTab = openThreadInTab;
@@ -9,7 +9,7 @@ const peers_sdk_1 = require("@peers-app/peers-sdk");
 const tabs_state_1 = require("./tabs-layout/tabs-state");
 const utils_1 = require("./utils");
 exports.packageReloaded = (0, peers_sdk_1.observable)(0);
-exports._mainContentPath = (0, peers_sdk_1.groupUserVar)('mainContentPath', { defaultValue: '' });
+exports._mainContentPath = (0, peers_sdk_1.groupUserVar)("mainContentPath", { defaultValue: "" });
 exports.mainContentPath = (0, peers_sdk_1.computed)({
     read: () => {
         return (0, exports._mainContentPath)();
@@ -24,7 +24,7 @@ exports.mainContentPath = (0, peers_sdk_1.computed)({
 });
 const queryParams = (0, peers_sdk_1.computed)({
     read: () => {
-        const queryStr = (0, exports.mainContentPath)()?.split('?')[1] || '';
+        const queryStr = (0, exports.mainContentPath)()?.split("?")[1] || "";
         const params = new URLSearchParams(queryStr);
         const obj = {};
         for (const [key, value] of params.entries()) {
@@ -33,12 +33,12 @@ const queryParams = (0, peers_sdk_1.computed)({
         return obj;
     },
     write: (value) => {
-        const queryStr = (0, exports.mainContentPath)().split('?')[1] || '';
+        const queryStr = (0, exports.mainContentPath)().split("?")[1] || "";
         const params = new URLSearchParams(queryStr);
         for (const key in value) {
             params.set(key, value[key]);
         }
-        (0, exports.mainContentPath)((0, exports.mainContentPath)().split('?')[0] + '?' + params.toString());
+        (0, exports.mainContentPath)(`${(0, exports.mainContentPath)().split("?")[0]}?${params.toString()}`);
     },
 });
 function queryParam(name, value) {
@@ -47,7 +47,7 @@ function queryParam(name, value) {
         if (params[name] === value) {
             return value;
         }
-        if (value === null || value === '') {
+        if (value === null || value === "") {
             delete params[name];
         }
         else {
@@ -57,25 +57,14 @@ function queryParam(name, value) {
     }
     return params[name];
 }
-exports.openThreads = (0, peers_sdk_1.groupUserVar)('openThreads', { defaultValue: [] });
-exports.threadViewOpen = (0, peers_sdk_1.groupUserVar)('threadViewOpen', { defaultValue: false });
 async function openThread(thread) {
     openThreadInTab(thread);
-    // let threadId = typeof thread === 'string' ? thread : thread.messageId;
-    // const message = await Messages().get(threadId);
-    // if (message) {
-    //   thread = message.messageParentId || message.messageId;
-    // }
-    // const threadsWithout = openThreads().filter(t => (typeof t === 'string' && t !== threadId) || (typeof t === 'object' && t.messageId !== threadId));
-    // openThreads([thread, ...threadsWithout]);
-    // threadViewOpen(true);
 }
-// Thread opening function for tabs system
 async function openThreadInTab(thread) {
-    let threadId = typeof thread === 'string' ? thread : thread.messageId;
+    const threadId = typeof thread === "string" ? thread : thread.messageId;
     const message = await (0, peers_sdk_1.Messages)().get(threadId);
     if (!message) {
-        console.warn('Thread message not found:', threadId);
+        console.warn("Thread message not found:", threadId);
         return;
     }
     // Use parent message ID if this is a reply, otherwise use the message itself
@@ -83,27 +72,27 @@ async function openThreadInTab(thread) {
     // Generate thread title from message content (strip mentions and clean formatting)
     const cleanMessage = (0, utils_1.stripMentions)(message.message);
     const messagePreview = cleanMessage.slice(0, 30);
-    const threadTitle = `${messagePreview}${cleanMessage.length > 30 ? '...' : ''}` || `Thread`;
+    const threadTitle = `${messagePreview}${cleanMessage.length > 30 ? "..." : ""}` || `Thread`;
     // // Import openNewTab dynamically to avoid circular dependency
     // const { openNewTab } = await import('./tabs-layout/tabs-layout');
     (0, tabs_state_1.openNewTab)({
-        packageId: 'system-apps',
+        packageId: "system-apps",
         path: `threads/${actualThreadId}`,
         title: threadTitle,
-        iconClassName: 'bi-chat-dots',
+        iconClassName: "bi-chat-dots",
     });
 }
 peers_sdk_1.rpcClientCalls.setClientPath = async (url) => {
-    (0, exports.mainContentPath)(url && String(url).trim() || '');
+    (0, exports.mainContentPath)((url && String(url).trim()) || "");
 };
 peers_sdk_1.rpcClientCalls.openThread = async (threadId) => {
-    console.warn('Opening thread:', threadId);
+    console.warn("Opening thread:", threadId);
     openThread(threadId);
 };
 exports.me = null;
 exports.windowWidth = (0, peers_sdk_1.observable)(window.innerWidth); //.extend({ rateLimit: 500 });
 exports.windowHeight = (0, peers_sdk_1.observable)(window.innerHeight); //.extend({ rateLimit: 500 });
-window.addEventListener("resize", (ev) => {
+window.addEventListener("resize", (_ev) => {
     (0, exports.windowWidth)(window.innerWidth);
     (0, exports.windowHeight)(window.innerHeight);
 });
@@ -121,18 +110,18 @@ async function loadGlobals() {
     exports.me = await (0, peers_sdk_1.getMe)();
     await peers_sdk_1.reloadPackagesOnPageRefresh.loadingPromise;
     if ((0, peers_sdk_1.reloadPackagesOnPageRefresh)()) {
-        await peers_sdk_1.rpcServerCalls.addOrUpdatePackage('updateAll');
+        await peers_sdk_1.rpcServerCalls.addOrUpdatePackage("updateAll");
     }
     await Promise.all([
-        (0, peers_sdk_1.Groups)().list().then(r => (0, exports.groups)(r)),
+        (0, peers_sdk_1.Groups)()
+            .list()
+            .then((r) => (0, exports.groups)(r)),
         exports._mainContentPath.loadingPromise,
-        exports.openThreads.loadingPromise,
-        exports.threadViewOpen.loadingPromise,
         (0, peers_sdk_1.sleep)(100),
     ]);
     function updateWindowHash() {
         const currentPath = window.location.hash.substring(1);
-        const expectedPath = (0, exports.mainContentPath)() || '';
+        const expectedPath = (0, exports.mainContentPath)() || "";
         // console.log({ expectedPath, currentPath });
         if (currentPath !== expectedPath) {
             window.location.hash = expectedPath;
@@ -141,10 +130,10 @@ async function loadGlobals() {
     }
     exports.mainContentPath.subscribe(updateWindowHash);
     updateWindowHash();
-    window.addEventListener('hashchange', () => (0, exports.mainContentPath)(window.location.hash.substring(1)));
+    window.addEventListener("hashchange", () => (0, exports.mainContentPath)(window.location.hash.substring(1)));
     return true;
 }
-if (typeof window !== 'undefined') {
-    // @ts-ignore
+if (typeof window !== "undefined") {
+    // @ts-expect-error
     window.globals = module.exports;
 }

package/dist/hooks.d.ts

@@ -1,5 +1,5 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from 'react';
+import { type Observable } from "@peers-app/peers-sdk";
+import type 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.
@@ -31,6 +31,6 @@ export declare function useObservableState<T = undefined>(initialValue?: T, doNo
  * The handler will be called immediately and whenever the subscribable changes.
  * @param subscribable The observable to subscribe to
  * @param onChange The function to call with the new value when the observable changes
-  */
-export declare function useSubscription<T>(subscribable: Observable<T>, onChange: (value: T) => any, doNotCallOnChangeDuringSetup?: boolean): void;
-export declare function useOnScreen(ref: React.RefObject<any>): boolean;
+ */
+export declare function useSubscription<T>(subscribable: Observable<T>, onChange: (value: T) => void, doNotCallOnChangeDuringSetup?: boolean): void;
+export declare function useOnScreen(ref: React.RefObject<Element | null>): boolean;

package/dist/hooks.js

@@ -47,12 +47,13 @@ function useObservable(sub, deps = []) {
  */
 function usePromise(p, initialValue, deps = []) {
     const [data, setData] = (0, react_1.useState)(initialValue);
+    // `deps` drives when the effect re-runs; callers include `p` when it changes. Omitting `p` avoids duplicate tracking with `[...deps]`.
     (0, react_1.useEffect)(() => {
         let disposed = false;
-        if (typeof p === 'function') {
+        if (typeof p === "function") {
             p = p();
         }
-        p.then(newData => {
+        p.then((newData) => {
             // if (!_.isEqual(newData, data) && !disposed) {
             if (!disposed) {
                 setData(newData);
@@ -61,12 +62,13 @@ function usePromise(p, initialValue, deps = []) {
         return () => {
             disposed = true;
         };
-    }, deps);
+    }, [...deps]);
     return data;
 }
 function useObservableState(initialValue, doNotSubscribe) {
     const [obs] = (0, react_1.useState)(() => initialValue !== undefined ? (0, peers_sdk_1.observable)(initialValue) : (0, peers_sdk_1.observable)());
     if (!doNotSubscribe) {
+        // biome-ignore lint/correctness/useHookAtTopLevel: when doNotSubscribe, caller keeps a stable observable without React-driven subscription (see docstring).
         useObservable(obs);
     }
     return obs;
@@ -76,23 +78,31 @@ function useObservableState(initialValue, doNotSubscribe) {
  * The handler will be called immediately and whenever the subscribable changes.
  * @param subscribable The observable to subscribe to
  * @param onChange The function to call with the new value when the observable changes
-  */
+ */
 function useSubscription(subscribable, onChange, doNotCallOnChangeDuringSetup) {
-    if (!doNotCallOnChangeDuringSetup) {
-        (0, react_1.useEffect)(() => onChange(subscribable()), []);
-    }
     (0, react_1.useEffect)(() => {
+        if (!doNotCallOnChangeDuringSetup) {
+            onChange(subscribable());
+        }
         const subscription = subscribable.subscribe(() => onChange(subscribable()));
         return () => subscription.dispose();
-    }, [subscribable, onChange]);
+    }, [subscribable, onChange, doNotCallOnChangeDuringSetup]);
 }
 function useOnScreen(ref) {
     const [isIntersecting, setIntersecting] = (0, react_1.useState)(false);
-    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+    // Read ref.current once on mount (ref object identity is stable).
     (0, react_1.useEffect)(() => {
-        observer.observe(ref.current);
-        // Remove the observer as soon as the component is unmounted
-        return () => { observer.disconnect(); };
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            setIntersecting(entry.isIntersecting);
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
     }, []);
     return isIntersecting;
 }

package/dist/hooks.test.js

@@ -1,111 +1,102 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("@testing-library/react");
 const hooks_1 = require("./hooks");
 // Helper component to test useObservable
-function TestComponent({ obs, testId = 'value' }) {
+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")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": testId, children: JSON.stringify(value) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-testid": "setter", onClick: () => setValue("new-value"), children: "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)));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": "array-value", children: JSON.stringify(value) }), (0, jsx_runtime_1.jsx)("span", { "data-testid": "array-length", children: 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")));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": "state-value", children: value }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-testid": "increment", onClick: () => obs(obs() + 1), children: "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');
+describe("useObservable", () => {
+    describe("basic functionality", () => {
+        it("should return the current value of an observable", () => {
+            const obs = (0, peers_sdk_1.observable)("hello");
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("value")).toHaveTextContent('"hello"');
+        });
+        it("should return the value when passed a plain value (non-observable)", () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { obs: "plain-value" }));
+            expect(react_1.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_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("value")).toHaveTextContent('"initial"');
+            (0, react_1.act)(() => {
+                obs("updated");
             });
-            await (0, react_2.waitFor)(() => {
-                expect(react_2.screen.getByTestId('value')).toHaveTextContent('"updated"');
+            await (0, react_1.waitFor)(() => {
+                expect(react_1.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();
+        it("should update the observable when setter is called", async () => {
+            const obs = (0, peers_sdk_1.observable)("initial");
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { obs: obs }));
+            (0, react_1.act)(() => {
+                react_1.screen.getByTestId("setter").click();
             });
-            await (0, react_2.waitFor)(() => {
-                expect(obs()).toBe('new-value');
-                expect(react_2.screen.getByTestId('value')).toHaveTextContent('"new-value"');
+            await (0, react_1.waitFor)(() => {
+                expect(obs()).toBe("new-value");
+                expect(react_1.screen.getByTestId("value")).toHaveTextContent('"new-value"');
             });
         });
-        it('should handle undefined values', () => {
+        it("should handle undefined values", () => {
             const obs = (0, peers_sdk_1.observable)(undefined);
-            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(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 });
+            expect(react_1.screen.getByTestId("value")).toHaveTextContent("");
+        });
+        it("should handle object values", async () => {
+            const obs = (0, peers_sdk_1.observable)({ name: "test", count: 5 });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("value")).toHaveTextContent('{"name":"test","count":5}');
+            (0, react_1.act)(() => {
+                obs({ name: "updated", count: 10 });
             });
-            await (0, react_2.waitFor)(() => {
-                expect(react_2.screen.getByTestId('value')).toHaveTextContent('{"name":"updated","count":10}');
+            await (0, react_1.waitFor)(() => {
+                expect(react_1.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
+    describe("array handling", () => {
+        it("should handle array values", () => {
+            const obs = (0, peers_sdk_1.observable)(["a", "b", "c"]);
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ArrayTestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("array-value")).toHaveTextContent('["a","b","c"]');
+            expect(react_1.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_1.render)((0, jsx_runtime_1.jsx)(ArrayTestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("array-length")).toHaveTextContent("2");
+            (0, react_1.act)(() => {
+                obs(["a", "b", "c"]); // New array reference
             });
-            await (0, react_2.waitFor)(() => {
-                expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+            await (0, react_1.waitFor)(() => {
+                expect(react_1.screen.getByTestId("array-length")).toHaveTextContent("3");
             });
         });
-        it('should NOT re-render when array is mutated in place (requires immutable updates)', async () => {
+        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: 
+            // 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.
@@ -113,97 +104,95 @@ describe('useObservable', () => {
             // 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)(() => {
+            const obs = (0, peers_sdk_1.observable)(["a", "b"]);
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ArrayTestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("array-length")).toHaveTextContent("2");
+            (0, react_1.act)(() => {
                 // Mutate the array in place (BAD PRACTICE - don't do this!)
                 const arr = obs();
-                arr.push('c');
+                arr.push("c");
                 obs.notifySubscribers();
             });
             // The observable itself has the mutated value
-            expect(obs()).toEqual(['a', 'b', 'c']);
+            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');
+            expect(react_1.screen.getByTestId("array-length")).toHaveTextContent("2");
         });
-        it('should re-render when array is properly updated with spread', async () => {
+        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
+            const obs = (0, peers_sdk_1.observable)(["a", "b"]);
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ArrayTestComponent, { obs: obs }));
+            expect(react_1.screen.getByTestId("array-length")).toHaveTextContent("2");
+            (0, react_1.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"]');
+            await (0, react_1.waitFor)(() => {
+                expect(react_1.screen.getByTestId("array-length")).toHaveTextContent("3");
+                expect(react_1.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');
+    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 }));
+            const { unmount } = (0, react_1.render)((0, jsx_runtime_1.jsx)(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');
+        it("should handle multiple components subscribing to same observable", async () => {
+            const obs = (0, peers_sdk_1.observable)("shared");
+            (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(TestComponent, { obs: obs, testId: "value1" }), (0, jsx_runtime_1.jsx)(TestComponent, { obs: obs, testId: "value2" })] }));
+            expect(react_1.screen.getByTestId("value1")).toHaveTextContent('"shared"');
+            expect(react_1.screen.getByTestId("value2")).toHaveTextContent('"shared"');
+            (0, react_1.act)(() => {
+                obs("updated");
             });
-            await (0, react_2.waitFor)(() => {
-                expect(react_2.screen.getByTestId('value1')).toHaveTextContent('"updated"');
-                expect(react_2.screen.getByTestId('value2')).toHaveTextContent('"updated"');
+            await (0, react_1.waitFor)(() => {
+                expect(react_1.screen.getByTestId("value1")).toHaveTextContent('"updated"');
+                expect(react_1.screen.getByTestId("value2")).toHaveTextContent('"updated"');
             });
         });
     });
-    describe('rapid updates', () => {
-        it('should handle rapid sequential updates correctly', async () => {
+    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);
+                return (0, jsx_runtime_1.jsx)("span", { "data-testid": "counter", children: value });
             }
-            (0, react_2.render)(react_1.default.createElement(CounterComponent, null));
-            (0, react_2.act)(() => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(CounterComponent, {}));
+            (0, react_1.act)(() => {
                 for (let i = 1; i <= 10; i++) {
                     obs(i);
                 }
             });
-            await (0, react_2.waitFor)(() => {
-                expect(react_2.screen.getByTestId('counter')).toHaveTextContent('10');
+            await (0, react_1.waitFor)(() => {
+                expect(react_1.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');
+describe("useObservableState", () => {
+    it("should create an observable with the initial value", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ObservableStateTestComponent, { initialValue: 42 }));
+        expect(react_1.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();
+    it("should re-render when the observable is updated", async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ObservableStateTestComponent, { initialValue: 0 }));
+        expect(react_1.screen.getByTestId("state-value")).toHaveTextContent("0");
+        (0, react_1.act)(() => {
+            react_1.screen.getByTestId("increment").click();
         });
-        await (0, react_2.waitFor)(() => {
-            expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('1');
+        await (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByTestId("state-value")).toHaveTextContent("1");
         });
     });
-    it('should maintain the same observable instance across re-renders', async () => {
+    it("should maintain the same observable instance across re-renders", async () => {
         let capturedObs = null;
         function CaptureObsComponent() {
             const obs = (0, hooks_1.useObservableState)(0);
@@ -211,37 +200,32 @@ describe('useObservableState', () => {
                 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")));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": "value", children: value }), (0, jsx_runtime_1.jsx)("span", { "data-testid": "same-obs", children: obs === capturedObs ? "same" : "different" }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-testid": "update", onClick: () => obs(obs() + 1), children: "Update" })] }));
         }
-        (0, react_2.render)(react_1.default.createElement(CaptureObsComponent, null));
-        expect(react_2.screen.getByTestId('same-obs')).toHaveTextContent('same');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CaptureObsComponent, {}));
+        expect(react_1.screen.getByTestId("same-obs")).toHaveTextContent("same");
         // Trigger a re-render by updating the observable
-        (0, react_2.act)(() => {
-            react_2.screen.getByTestId('update').click();
+        (0, react_1.act)(() => {
+            react_1.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');
+        await (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByTestId("value")).toHaveTextContent("1");
+            expect(react_1.screen.getByTestId("same-obs")).toHaveTextContent("same");
         });
     });
-    it('should not subscribe when doNotSubscribe is true', () => {
+    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")));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": "value", children: obs() }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-testid": "update", onClick: () => obs(obs() + 1), children: "Update" })] }));
         }
-        (0, react_2.render)(react_1.default.createElement(NoSubscribeComponent, null));
-        expect(react_2.screen.getByTestId('value')).toHaveTextContent('0');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(NoSubscribeComponent, {}));
+        expect(react_1.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();
+        (0, react_1.act)(() => {
+            react_1.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');
+        expect(react_1.screen.getByTestId("value")).toHaveTextContent("0");
     });
 });