@phreshos/react 0.1.2 → 0.1.4

package/README.md

@@ -20,13 +20,14 @@ It provides two kinds of adapter:
   `provide` prop, then exposes them synchronously through `useProgram()`,
   `useProcess()`, and `useParent()`.
 - `HostProvider` subscribes before reading exactly the host values named by its
-  required `provide` prop. `useHostTheme()`, `useSurfaceSize()`, and
+  required `provide` prop. `useHostTheme()`, `useDesktopSize()`, and
   `usePointerPosition()` expose those values synchronously after resolution.
 - `useSubscribe()` and `useObserve()` own persistent ordinary-event
   registrations for one mounted React consumer.
-- `useProgramState(program)`, `useProcessState(process)`, and
-  `useWindowState(window)` explicitly compose existing reads with future live
-  events for one mounted consumer. They add no state operation to another SDK.
+- `useProgramState(program)`, `useProcessState(process)`,
+  `useServiceState(service)`, and `useWindowState(window)` explicitly compose
+  existing reads with future live events for one mounted consumer. They add no
+  state operation to another SDK.
 - `useObserveAsks()` adapts an Endpoint traffic surface's question observation,
   while `useObserveAnswers()` adapts a Server traffic surface's answer
   observation.
@@ -48,6 +49,9 @@ useProgramState(program)
 useProcessState(process)
 // { exited, serverExists, clientExists } | undefined
 
+useServiceState(service)
+// { disabled } | undefined
+
 useWindowState(window)
 // WindowState | undefined
 ```
@@ -86,7 +90,7 @@ The ordinary-event and traffic hooks retain the latest value returned by their p
 import { host } from "@phreshos/client"
 import { useSubscribe } from "@phreshos/react"
 
-const surface = useSubscribe(host.surface, "resize")
+const desktop = useSubscribe(host.desktop, "resize")
 ```
 
 Host reads are asynchronous while subscriptions are live-only. `HostProvider`
@@ -94,17 +98,17 @@ subscribes before requesting each selected snapshot and prevents an older read
 from overwriting a newer event:
 
 ```tsx
-import { HostProvider, useHostTheme, useSurfaceSize } from "@phreshos/react"
+import { HostProvider, useDesktopSize, useHostTheme } from "@phreshos/react"
 
 function Content() {
   const theme = useHostTheme()
-  const surface = useSurfaceSize()
+  const desktop = useDesktopSize()
 
-  return <p style={{ color: theme.foreground }}>{surface.width} × {surface.height}</p>
+  return <p style={{ color: theme.foreground }}>{desktop.width} × {desktop.height}</p>
 }
 
 function App() {
-  return <HostProvider provide={["theme", "surfaceSize"]} fallback={<p>Loading…</p>}>
+  return <HostProvider provide={["theme", "desktopSize"]} fallback={<p>Loading…</p>}>
     <Content />
   </HostProvider>
 }

package/dist/host-provider.d.ts

@@ -1,12 +1,12 @@
 import { type ReactNode } from "react";
-import { type PointerPosition, type Surface, type ThemeProperties } from "@phreshos/client";
-declare const provisionNames: readonly ["theme", "surfaceSize", "pointerPosition"];
+import { type DesktopSize, type PointerPosition, type ThemeProperties } from "@phreshos/client";
+declare const provisionNames: readonly ["theme", "desktopSize", "pointerPosition"];
 /** Requests and follows only the host values explicitly selected by the program. */
 export default function HostProvider(properties: HostProviderProperties): import("react").FunctionComponentElement<SelectedHostProviderProperties>;
 /** Returns the selected Theme snapshot and follows future change events. */
 export declare function useHostTheme(): Readonly<ThemeProperties>;
-/** Returns the selected Surface size and follows future resize events. */
-export declare function useSurfaceSize(): Surface;
+/** Returns the selected desktop size and follows future resize events. */
+export declare function useDesktopSize(): DesktopSize;
 /** Returns the selected Pointer position and follows future move events. */
 export declare function usePointerPosition(): PointerPosition | null;
 /** Values that HostProvider can request and follow. */

package/dist/host-provider.js

@@ -1,7 +1,7 @@
 import { createContext, createElement, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { host } from "@phreshos/client";
 import LiveSnapshot from "./live-snapshot.js";
-const provisionNames = ["theme", "surfaceSize", "pointerPosition"];
+const provisionNames = ["theme", "desktopSize", "pointerPosition"];
 const HostContext = createContext(null);
 /** Requests and follows only the host values explicitly selected by the program. */
 export default function HostProvider(properties) {
@@ -41,9 +41,9 @@ function SelectedHostProvider({ children, fallback, selection }) {
 export function useHostTheme() {
     return useProvided("theme");
 }
-/** Returns the selected Surface size and follows future resize events. */
-export function useSurfaceSize() {
-    return useProvided("surfaceSize");
+/** Returns the selected desktop size and follows future resize events. */
+export function useDesktopSize() {
+    return useProvided("desktopSize");
 }
 /** Returns the selected Pointer position and follows future move events. */
 export function usePointerPosition() {
@@ -65,8 +65,8 @@ function createStores(selection) {
             case "theme":
                 stores.theme = new LiveSnapshot(() => host.theme.snapshot(), subscriber => host.theme.subscribe("change", subscriber));
                 break;
-            case "surfaceSize":
-                stores.surfaceSize = new LiveSnapshot(() => host.surface.size(), subscriber => host.surface.subscribe("resize", subscriber));
+            case "desktopSize":
+                stores.desktopSize = new LiveSnapshot(() => host.desktop.size(), subscriber => host.desktop.subscribe("resize", subscriber));
                 break;
             case "pointerPosition":
                 stores.pointerPosition = new LiveSnapshot(() => host.pointer.position(), subscriber => host.pointer.subscribe("move", subscriber));
@@ -90,6 +90,6 @@ function normalizeProvision(provide) {
 }
 const hookNames = {
     theme: "useHostTheme",
-    surfaceSize: "useSurfaceSize",
+    desktopSize: "useDesktopSize",
     pointerPosition: "usePointerPosition"
 };

package/dist/main.d.ts

@@ -1,11 +1,12 @@
 export { default as CurrentProvider, useParent, useProcess, useProgram, type CurrentProvision, type CurrentProvisionName, type CurrentProviderProperties } from "./current-provider.js";
-export { default as HostProvider, usePointerPosition, useSurfaceSize, useHostTheme, type HostProvision, type HostProvisionName, type HostProviderProperties } from "./host-provider.js";
+export { default as HostProvider, usePointerPosition, useDesktopSize, useHostTheme, type HostProvision, type HostProvisionName, type HostProviderProperties } from "./host-provider.js";
 export { default as useSubscribe } from "./use-subscribe.js";
 export { default as useObserve } from "./use-observe.js";
 export { default as useScale } from "./use-scale.js";
 export { default as useColor } from "./use-color.js";
 export { default as useProgramState, type ProgramState } from "./use-program-state.js";
 export { default as useProcessState, type ProcessState } from "./use-process-state.js";
+export { default as useServiceState, type ServiceState } from "./use-service-state.js";
 export { default as useWindowState } from "./use-window-state.js";
 export { default as useObserveAsks, type AskObservable } from "./use-observe-asks.js";
 export { default as useObserveAnswers, type AnswerObservable } from "./use-observe-answers.js";

package/dist/main.js

@@ -1,11 +1,12 @@
 export { default as CurrentProvider, useParent, useProcess, useProgram } from "./current-provider.js";
-export { default as HostProvider, usePointerPosition, useSurfaceSize, useHostTheme } from "./host-provider.js";
+export { default as HostProvider, usePointerPosition, useDesktopSize, useHostTheme } from "./host-provider.js";
 export { default as useSubscribe } from "./use-subscribe.js";
 export { default as useObserve } from "./use-observe.js";
 export { default as useScale } from "./use-scale.js";
 export { default as useColor } from "./use-color.js";
 export { default as useProgramState } from "./use-program-state.js";
 export { default as useProcessState } from "./use-process-state.js";
+export { default as useServiceState } from "./use-service-state.js";
 export { default as useWindowState } from "./use-window-state.js";
 export { default as useObserveAsks } from "./use-observe-asks.js";
 export { default as useObserveAnswers } from "./use-observe-answers.js";

package/dist/use-service-state.d.ts

@@ -0,0 +1,7 @@
+import type { ServiceHandler } from "@phreshos/client";
+/** Live availability of one exact service identity. */
+export type ServiceState = Readonly<{
+    disabled: boolean;
+}>;
+/** Explicitly reads and follows one service while this hook is mounted. */
+export default function useServiceState(service: ServiceHandler): ServiceState | undefined;

package/dist/use-service-state.js

@@ -0,0 +1,10 @@
+import { useMemo, useSyncExternalStore } from "react";
+import LiveState, { combineCleanups } from "./live-state.js";
+/** Explicitly reads and follows one service while this hook is mounted. */
+export default function useServiceState(service) {
+    const state = useMemo(() => new LiveState(async () => ({ disabled: await service.disabled() }), reduce => combineCleanups(service.subscribe("enable", () => reduce(current => setDisabled(current, false))), service.subscribe("disable", () => reduce(current => setDisabled(current, true))))), [service]);
+    return useSyncExternalStore(state.subscribe, state.snapshot, state.snapshot);
+}
+function setDisabled(state, disabled) {
+    return state.disabled === disabled ? state : { disabled };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React adapters for the Client SDK.",
   "type": "module",
   "main": "dist/main.js",
@@ -47,13 +47,13 @@
     "prepack": "node --run test && node --run build"
   },
   "peerDependencies": {
-    "@phreshos/client": "^0.1.2",
-    "@phreshos/core": "^0.1.2",
+    "@phreshos/client": "^0.1.7",
+    "@phreshos/core": "^0.1.6",
     "react": "^19.2.0"
   },
   "devDependencies": {
-    "@phreshos/client": "^0.1.2",
-    "@phreshos/core": "^0.1.2",
+    "@phreshos/client": "^0.1.7",
+    "@phreshos/core": "^0.1.6",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",