@phreshos/react 0.1.33 → 0.1.34

package/dist/desktop-provider.d.ts

@@ -1,16 +1,16 @@
 import { type ReactNode } from "react";
-import type { Connection, Desktop, DesktopPreferences, DesktopViewportSnapshot } from "@phreshos/core";
+import type { Connection, Desktop, DesktopPreferences, DesktopViewportState } from "@phreshos/core";
 import LiveSnapshot from "./live-snapshot.js";
 /** Provides one complete Client Desktop environment to a React tree. */
 export default function DesktopProvider({ children, desktop, fallback }: DesktopProviderProperties): string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").FunctionComponentElement<import("react").ProviderProps<Readonly<{
     desktop: Desktop;
-    viewport: LiveSnapshot<DesktopViewportSnapshot>;
+    viewport: LiveSnapshot<DesktopViewportState>;
     preferences: LiveSnapshot<DesktopPreferences>;
 }> | null>> | null;
 /** Returns the complete Desktop supplied by the nearest provider. */
 export declare function useDesktop(): Desktop;
-/** Resolves and follows the current Desktop viewport. */
-export declare function useDesktopViewport(): DesktopViewportSnapshot;
+/** Resolves and follows the current Desktop viewport: its size and its offset together. */
+export declare function useDesktopViewport(): DesktopViewportState;
 /** Resolves and follows the effective Desktop preferences. */
 export declare function useDesktopPreferences(): DesktopPreferences;
 /** Resolves the browser Connection carrying this Desktop when explicitly used. */

package/dist/desktop-provider.js

@@ -7,7 +7,7 @@ const DesktopContext = createContext(null);
 export default function DesktopProvider({ children, desktop, fallback = null }) {
     const value = useMemo(() => ({
         desktop,
-        viewport: new LiveSnapshot(() => desktop.viewport.snapshot(), subscriber => desktop.viewport.subscribe("resize", subscriber)),
+        viewport: viewportState(desktop),
         preferences: new LiveSnapshot(() => desktop.preferences.snapshot(), subscriber => desktop.preferences.subscribe("change", subscriber))
     }), [desktop]);
     const stores = useMemo(() => [value.viewport, value.preferences], [value]);
@@ -18,7 +18,7 @@ export default function DesktopProvider({ children, desktop, fallback = null })
 export function useDesktop() {
     return useValue().desktop;
 }
-/** Resolves and follows the current Desktop viewport. */
+/** Resolves and follows the current Desktop viewport: its size and its offset together. */
 export function useDesktopViewport() {
     const store = useValue().viewport;
     return useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot);
@@ -40,3 +40,19 @@ function useValue() {
         throw new Error("useDesktop must be used inside DesktopProvider");
     return value;
 }
+/** One state from the viewport's two values: each event replaces its own value and keeps the other. */
+function viewportState(desktop) {
+    let latest = {};
+    const complete = () => latest.size && latest.offset ? Object.freeze({ size: latest.size, offset: latest.offset }) : null;
+    return new LiveSnapshot(async () => {
+        const [size, offset] = await Promise.all([desktop.viewport.size(), desktop.viewport.offset()]);
+        latest = { size, offset };
+        return complete();
+    }, subscriber => {
+        const publish = () => { const state = complete(); if (state)
+            subscriber(state); };
+        const stopResize = desktop.viewport.subscribe("resize", size => { latest = { ...latest, size }; publish(); });
+        const stopMove = desktop.viewport.subscribe("move", offset => { latest = { ...latest, offset }; publish(); });
+        return () => { stopResize(); stopMove(); };
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "Runtime-neutral React adapters for PhreshOS contracts.",
   "type": "module",
   "main": "dist/main.js",
@@ -46,11 +46,11 @@
     "prepack": "node --run build"
   },
   "peerDependencies": {
-    "@phreshos/core": "^0.1.63",
+    "@phreshos/core": "^0.1.64",
     "react": "^19.2.0"
   },
   "devDependencies": {
-    "@phreshos/core": "^0.1.63",
+    "@phreshos/core": "^0.1.64",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.18",