quidproquo-web-react 0.0.262 → 0.1.0

package/lib/commonjs/hooks/useQpq.js

@@ -13,6 +13,7 @@ exports.useQpq = useQpq;
 const quidproquo_actionprocessor_web_1 = require("quidproquo-actionprocessor-web");
 const quidproquo_core_1 = require("quidproquo-core");
 const react_1 = require("react");
+const actionProcessor_1 = require("../actionProcessor");
 const QpqContextProvider_1 = require("./asmj/QpqContextProvider");
 function* withVersionCheck(story, versionRef, capturedVersion) {
     let nextValue = undefined;
@@ -37,6 +38,7 @@ const logger = {
 };
 function useQpq(getActionProcessors = () => __awaiter(this, void 0, void 0, function* () { return ({}); })) {
     const qpqContextValues = (0, QpqContextProvider_1.useQpqContextValues)();
+    const contextGetActionProcessors = (0, actionProcessor_1.useActionProcessors)();
     const versionRef = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
         return () => {
@@ -47,7 +49,7 @@ function useQpq(getActionProcessors = () => __awaiter(this, void 0, void 0, func
         depth: 0,
         context: qpqContextValues,
     }, (qpqConfig, dynamicModuleLoader) => __awaiter(this, void 0, void 0, function* () {
-        return (Object.assign(Object.assign({}, (yield (0, quidproquo_actionprocessor_web_1.getWebActionProcessors)(qpqConfig, dynamicModuleLoader))), (yield getActionProcessors(qpqConfig, dynamicModuleLoader))));
+        return (Object.assign(Object.assign(Object.assign({}, (yield (0, quidproquo_actionprocessor_web_1.getWebActionProcessors)(qpqConfig, dynamicModuleLoader))), (yield contextGetActionProcessors(qpqConfig, dynamicModuleLoader))), (yield getActionProcessors(qpqConfig, dynamicModuleLoader))));
     }), () => new Date().toISOString(), logger, `frontend::${'uuid'}`, quidproquo_core_1.QpqRuntimeType.UI, (_runtime) => __awaiter(this, void 0, void 0, function* () {
         // noop
     })), [qpqContextValues]);

package/lib/commonjs/index.d.ts

@@ -1,7 +1,9 @@
 import 'symbol-observable';
+export * from './actionProcessor';
 export * from './api';
 export * from './auth';
 export * from './baseUrl';
+export * from './dateTime';
 export * from './hooks';
 export * from './state';
 export * from './useFieldBinding';

package/lib/commonjs/index.js

@@ -15,9 +15,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 require("symbol-observable");
+__exportStar(require("./actionProcessor"), exports);
 __exportStar(require("./api"), exports);
 __exportStar(require("./auth"), exports);
 __exportStar(require("./baseUrl"), exports);
+__exportStar(require("./dateTime"), exports);
 __exportStar(require("./hooks"), exports);
 __exportStar(require("./state"), exports);
 __exportStar(require("./useFieldBinding"), exports);

package/lib/commonjs/webSocketQueue/hooks/actionProcessor/getServiceRequestActionProcessor.d.ts

@@ -0,0 +1,4 @@
+import { ActionProcessorList } from 'quidproquo-core';
+import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserver';
+import { RefObject } from 'react';
+export declare const getServiceRequestActionProcessor: (sendEventRef: RefObject<((event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, "correlationId">) => Promise<any>) | null>) => ActionProcessorList;

package/lib/commonjs/webSocketQueue/hooks/actionProcessor/getServiceRequestActionProcessor.js

@@ -0,0 +1,25 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getServiceRequestActionProcessor = void 0;
+const quidproquo_core_1 = require("quidproquo-core");
+const quidproquo_webserver_1 = require("quidproquo-webserver");
+const getServiceRequestActionProcessor = (sendEventRef) => ({
+    [quidproquo_webserver_1.ServiceActionType.Request]: (_a) => __awaiter(void 0, [_a], void 0, function* ({ serviceName, method, payload, }) {
+        var _b;
+        const response = yield ((_b = sendEventRef.current) === null || _b === void 0 ? void 0 : _b.call(sendEventRef, { type: `qpq/serviceRequest/${serviceName}/${method}`, payload }));
+        if (response && !response.success) {
+            return (0, quidproquo_core_1.actionResultError)(response.error.errorType, response.error.errorText, response.error.errorStack);
+        }
+        return (0, quidproquo_core_1.actionResult)(response === null || response === void 0 ? void 0 : response.result);
+    }),
+});
+exports.getServiceRequestActionProcessor = getServiceRequestActionProcessor;

package/lib/commonjs/webSocketQueue/hooks/index.d.ts

@@ -1,2 +1,4 @@
+export * from './actionProcessor/getServiceRequestActionProcessor';
+export * from './useQpqWebsocketQueueRuntime';
 export * from './useSubscribeToWebSocketQueueEvent';
 export * from './useWebsocketQueueSendEvent';

package/lib/commonjs/webSocketQueue/hooks/index.js

@@ -14,5 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./actionProcessor/getServiceRequestActionProcessor"), exports);
+__exportStar(require("./useQpqWebsocketQueueRuntime"), exports);
 __exportStar(require("./useSubscribeToWebSocketQueueEvent"), exports);
 __exportStar(require("./useWebsocketQueueSendEvent"), exports);

package/lib/commonjs/webSocketQueue/hooks/useQpqWebsocketQueueRuntime.d.ts

@@ -0,0 +1,11 @@
+import { Story } from 'quidproquo-core';
+import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserver';
+import { QpqRuntimeDefinition } from '../../hooks/asmj/createQpqRuntimeDefinition';
+import { QpqApi, QpqMappedApi } from '../../hooks/asmj/QpqMappedApi';
+import { ActionProcessorListResolverFactory } from '../../hooks/asmj/useQpqRuntime';
+export declare function useQpqWebsocketQueueRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [
+    QpqMappedApi<TApi>,
+    TState,
+    (action: any) => void,
+    (event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, 'correlationId'>) => Promise<any>
+];

package/lib/commonjs/webSocketQueue/hooks/useQpqWebsocketQueueRuntime.js

@@ -0,0 +1,35 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQpqWebsocketQueueRuntime = useQpqWebsocketQueueRuntime;
+const quidproquo_webserver_1 = require("quidproquo-webserver");
+const react_1 = require("react");
+const useQpqRuntime_1 = require("../../hooks/asmj/useQpqRuntime");
+const getServiceRequestActionProcessor_1 = require("./actionProcessor/getServiceRequestActionProcessor");
+const useWebsocketQueueSendEvent_1 = require("./useWebsocketQueueSendEvent");
+function useQpqWebsocketQueueRuntime(atom, mainStory, name, getActionProcessors) {
+    const sendEventRef = (0, react_1.useRef)(null);
+    const mergedFactory = (dispatch, getCurrentState) => {
+        const serviceResolver = () => __awaiter(this, void 0, void 0, function* () { return (0, getServiceRequestActionProcessor_1.getServiceRequestActionProcessor)(sendEventRef); });
+        const callerResolver = getActionProcessors === null || getActionProcessors === void 0 ? void 0 : getActionProcessors(dispatch, getCurrentState);
+        return (qpqConfig, dynamicModuleLoader) => __awaiter(this, void 0, void 0, function* () {
+            return (Object.assign(Object.assign({}, (yield serviceResolver())), (callerResolver ? yield callerResolver(qpqConfig, dynamicModuleLoader) : {})));
+        });
+    };
+    const [api, state, dispatch] = (0, useQpqRuntime_1.useQpqRuntime)(atom, mainStory, name, mergedFactory);
+    const sendEvent = (0, useWebsocketQueueSendEvent_1.useWebsocketQueueSendEvent)((event) => {
+        if (event.type === quidproquo_webserver_1.WebSocketQueueServerMessageEventType.StateDispatch) {
+            dispatch(event.payload);
+        }
+    });
+    sendEventRef.current = sendEvent;
+    return [api, state, dispatch, sendEvent];
+}

package/lib/commonjs/webSocketQueue/hooks/useWebsocketQueueSendEvent.d.ts

@@ -1,2 +1,2 @@
 import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserver';
-export declare const useWebsocketQueueSendEvent: <E extends AnyWebSocketQueueEventMessageWithCorrelation>() => (event: E) => void;
+export declare const useWebsocketQueueSendEvent: <TSend extends AnyWebSocketQueueEventMessageWithCorrelation>(onCorrelatedMessage?: (event: AnyWebSocketQueueEventMessageWithCorrelation) => void) => (event: Omit<TSend, "correlationId">) => Promise<any>;

package/lib/commonjs/webSocketQueue/hooks/useWebsocketQueueSendEvent.js

@@ -1,9 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWebsocketQueueSendEvent = void 0;
+const quidproquo_web_1 = require("quidproquo-web");
+const quidproquo_webserver_1 = require("quidproquo-webserver");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
 const websocket_1 = require("../../websocket");
-const useWebsocketQueueSendEvent = () => {
-    const sendMessage = (0, websocket_1.useWebsocketSendEvent)();
-    return sendMessage;
+const useWebsocketQueueSendEvent = (onCorrelatedMessage) => {
+    const websocketApi = (0, websocket_1.useWebsocketApi)();
+    const activeCorrelationsRef = (0, react_1.useRef)(new Set());
+    const pendingResolversRef = (0, react_1.useRef)(new Map());
+    // Subscribe to ALL messages, filter by active correlationIds
+    const handleMessage = (0, hooks_1.useFastCallback)((_ws, rawEvent) => {
+        if (!rawEvent)
+            return;
+        try {
+            const parsed = JSON.parse(rawEvent.data);
+            if (!parsed.correlationId || !activeCorrelationsRef.current.has(parsed.correlationId)) {
+                return;
+            }
+            if (parsed.type === quidproquo_webserver_1.WebSocketQueueServerMessageEventType.ServiceRequestResponse) {
+                const resolve = pendingResolversRef.current.get(parsed.correlationId);
+                if (resolve) {
+                    resolve(parsed.payload);
+                    pendingResolversRef.current.delete(parsed.correlationId);
+                    activeCorrelationsRef.current.delete(parsed.correlationId);
+                }
+            }
+            else {
+                onCorrelatedMessage === null || onCorrelatedMessage === void 0 ? void 0 : onCorrelatedMessage(parsed);
+            }
+        }
+        catch (_a) {
+            // Not JSON or not a queue message — ignore
+        }
+    });
+    (0, websocket_1.useSubscribeToWebsocket)(quidproquo_web_1.WebsocketServiceEvent.MESSAGE, handleMessage);
+    // Send with auto-generated correlationId, register it as active
+    const sendEvent = (0, hooks_1.useFastCallback)((event) => {
+        if (!websocketApi) {
+            return Promise.resolve(undefined);
+        }
+        const correlationId = crypto.randomUUID();
+        activeCorrelationsRef.current.add(correlationId);
+        const isServiceRequest = event.type.startsWith('qpq/serviceRequest/');
+        if (isServiceRequest) {
+            const promise = new Promise((resolve) => {
+                pendingResolversRef.current.set(correlationId, resolve);
+            });
+            websocketApi.sendEvent(Object.assign(Object.assign({}, event), { correlationId }));
+            return promise;
+        }
+        websocketApi.sendEvent(Object.assign(Object.assign({}, event), { correlationId }));
+        return Promise.resolve(undefined);
+    });
+    return sendEvent;
 };
 exports.useWebsocketQueueSendEvent = useWebsocketQueueSendEvent;

package/lib/commonjs/websocket/WebSocketAuthSync/WebSocketAuthContext.d.ts

@@ -0,0 +1 @@
+export declare const WebSocketAuthContext: import("react").Context<boolean>;

package/lib/commonjs/websocket/WebSocketAuthSync/WebSocketAuthContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebSocketAuthContext = void 0;
+const react_1 = require("react");
+exports.WebSocketAuthContext = (0, react_1.createContext)(false);

package/lib/commonjs/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -4,11 +4,11 @@ exports.WebSocketAuthSync = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("./hooks");
+const WebSocketAuthContext_1 = require("./WebSocketAuthContext");
 const component = ({ children, accessToken }) => {
-    (0, hooks_1.useWebsocketAuthSync)(accessToken);
+    const isAuthenticated = (0, hooks_1.useWebsocketAuthSync)(accessToken);
     // Keep the active websocket alive
     (0, hooks_1.useWebsocketPingPong)();
-    // This fragment is not useless!
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)(WebSocketAuthContext_1.WebSocketAuthContext.Provider, { value: isAuthenticated, children: children }));
 };
 exports.WebSocketAuthSync = (0, react_1.memo)(component);

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useWebsocketAuthSync';
+export * from './useWebSocketIsAuthenticated';
 export * from './useWebsocketPingPong';

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useWebsocketAuthSync"), exports);
+__exportStar(require("./useWebSocketIsAuthenticated"), exports);
 __exportStar(require("./useWebsocketPingPong"), exports);

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/useWebSocketIsAuthenticated.d.ts

@@ -0,0 +1 @@
+export declare const useWebSocketIsAuthenticated: () => boolean;

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/useWebSocketIsAuthenticated.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebSocketIsAuthenticated = void 0;
+const react_1 = require("react");
+const WebSocketAuthContext_1 = require("../WebSocketAuthContext");
+const useWebSocketIsAuthenticated = () => {
+    return (0, react_1.useContext)(WebSocketAuthContext_1.WebSocketAuthContext);
+};
+exports.useWebSocketIsAuthenticated = useWebSocketIsAuthenticated;

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.d.ts

@@ -1,2 +1,2 @@
 import { AuthenticationInfo } from 'quidproquo-core';
-export declare const useWebsocketAuthSync: (accessToken: AuthenticationInfo["accessToken"]) => void;
+export declare const useWebsocketAuthSync: (accessToken: AuthenticationInfo["accessToken"]) => boolean;

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.js

@@ -9,29 +9,32 @@ const hooks_2 = require("../../hooks");
 const useWebsocketAuthSync = (accessToken) => {
     const sendMessage = (0, hooks_2.useWebsocketSendEvent)();
     const websocketApi = (0, hooks_2.useWebsocketApi)();
+    const [isAuthenticated, setIsAuthenticated] = (0, react_1.useState)(false);
     const updateAuthTokens = (0, hooks_1.useFastCallback)(() => {
         if (!(websocketApi === null || websocketApi === void 0 ? void 0 : websocketApi.isConnected())) {
             return;
         }
         if (accessToken) {
-            const authMessage = {
+            sendMessage({
                 type: quidproquo_webserver_1.WebSocketQueueClientMessageEventType.Authenticate,
                 payload: {
                     accessToken: accessToken,
                 },
-            };
-            sendMessage(authMessage);
+            });
         }
-        else {
-            const authMessage = {
+        else if (isAuthenticated) {
+            sendMessage({
                 type: quidproquo_webserver_1.WebSocketQueueClientMessageEventType.Unauthenticate,
-            };
-            sendMessage(authMessage);
+            });
         }
     });
+    (0, hooks_2.useSubscribeToWebSocketEvent)(quidproquo_webserver_1.WebSocketQueueServerMessageEventType.Authenticated, () => setIsAuthenticated(true));
+    (0, hooks_2.useSubscribeToWebSocketEvent)(quidproquo_webserver_1.WebSocketQueueServerMessageEventType.Unauthenticated, () => setIsAuthenticated(false));
     // Sync the tokens in on open
     (0, hooks_2.useSubscribeToWebsocket)(quidproquo_web_1.WebsocketServiceEvent.OPEN, updateAuthTokens);
+    (0, hooks_2.useSubscribeToWebsocket)(quidproquo_web_1.WebsocketServiceEvent.CLOSE, () => setIsAuthenticated(false));
     // Sync the tokens when they change
-    (0, react_1.useEffect)(updateAuthTokens, [accessToken, websocketApi]);
+    (0, react_1.useEffect)(updateAuthTokens, [accessToken, websocketApi, isAuthenticated]);
+    return isAuthenticated;
 };
 exports.useWebsocketAuthSync = useWebsocketAuthSync;

package/lib/commonjs/websocket/WebSocketAuthSync/index.d.ts

@@ -1 +1,2 @@
+export * from './hooks/useWebSocketIsAuthenticated';
 export * from './WebSocketAuthSync';

package/lib/commonjs/websocket/WebSocketAuthSync/index.js

@@ -14,4 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks/useWebSocketIsAuthenticated"), exports);
 __exportStar(require("./WebSocketAuthSync"), exports);

package/lib/commonjs/websocket/hooks/useSubscribeToWebSocketEvent.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSubscribeToWebSocketEvent = void 0;
 const react_1 = require("react");
+const hooks_1 = require("../../hooks");
 const useWebsocketApi_1 = require("./useWebsocketApi");
 const useSubscribeToWebSocketEvent = (subscriptionType, callback) => {
+    const stableCallback = (0, hooks_1.useFastCallback)(callback);
     const websocketService = (0, useWebsocketApi_1.useWebsocketApi)();
     (0, react_1.useEffect)(() => {
-        const subscriptionHandle = websocketService === null || websocketService === void 0 ? void 0 : websocketService.subscribeToEvent(subscriptionType, callback);
+        const subscriptionHandle = websocketService === null || websocketService === void 0 ? void 0 : websocketService.subscribeToEvent(subscriptionType, stableCallback);
         return () => {
             if (subscriptionHandle) {
                 websocketService === null || websocketService === void 0 ? void 0 : websocketService.unsubscribe(subscriptionHandle);
             }
         };
-    }, [websocketService, subscriptionType, callback]);
+    }, [websocketService, subscriptionType, stableCallback]);
 };
 exports.useSubscribeToWebSocketEvent = useSubscribeToWebSocketEvent;

package/lib/commonjs/websocket/hooks/useSubscribeToWebsocket.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSubscribeToWebsocket = void 0;
 const react_1 = require("react");
+const hooks_1 = require("../../hooks");
 const useWebsocketApi_1 = require("./useWebsocketApi");
 const useSubscribeToWebsocket = (subscriptionType, callback) => {
+    const stableCallback = (0, hooks_1.useFastCallback)(callback);
     const websocketService = (0, useWebsocketApi_1.useWebsocketApi)();
     (0, react_1.useEffect)(() => {
-        const handle = websocketService === null || websocketService === void 0 ? void 0 : websocketService.subscribe(subscriptionType, callback);
+        const handle = websocketService === null || websocketService === void 0 ? void 0 : websocketService.subscribe(subscriptionType, stableCallback);
         return () => {
             if (handle) {
                 websocketService === null || websocketService === void 0 ? void 0 : websocketService.unsubscribe(handle);
             }
         };
-    }, [websocketService, subscriptionType, callback]);
+    }, [websocketService, subscriptionType, stableCallback]);
 };
 exports.useSubscribeToWebsocket = useSubscribeToWebsocket;

package/lib/esm/actionProcessor/ActionProcessorContext.d.ts

@@ -0,0 +1,2 @@
+import { ActionProcessorListResolver } from 'quidproquo-core';
+export declare const ActionProcessorContext: import("react").Context<ActionProcessorListResolver>;

package/lib/esm/actionProcessor/ActionProcessorContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ActionProcessorContext = createContext(async () => ({}));

package/lib/esm/actionProcessor/ActionProcessorProvider.d.ts

@@ -0,0 +1,6 @@
+import { ActionProcessorListResolver } from 'quidproquo-core';
+export type ActionProcessorProviderProps = {
+    children: React.ReactNode;
+    getActionProcessors: ActionProcessorListResolver;
+};
+export declare const ActionProcessorProvider: React.FC<ActionProcessorProviderProps>;

package/lib/esm/actionProcessor/ActionProcessorProvider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ActionProcessorContext } from './ActionProcessorContext';
+export const ActionProcessorProvider = ({ children, getActionProcessors }) => {
+    const parentGetActionProcessors = useContext(ActionProcessorContext);
+    // Merge: parent processors first, then this provider's (so child overrides parent)
+    const mergedGetActionProcessors = async (qpqConfig, dynamicModuleLoader) => ({
+        ...(await parentGetActionProcessors(qpqConfig, dynamicModuleLoader)),
+        ...(await getActionProcessors(qpqConfig, dynamicModuleLoader)),
+    });
+    return _jsx(ActionProcessorContext.Provider, { value: mergedGetActionProcessors, children: children });
+};

package/lib/esm/actionProcessor/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ActionProcessorContext';
+export * from './ActionProcessorProvider';
+export * from './useActionProcessors';

package/lib/esm/actionProcessor/index.js

@@ -0,0 +1,3 @@
+export * from './ActionProcessorContext';
+export * from './ActionProcessorProvider';
+export * from './useActionProcessors';

package/lib/esm/actionProcessor/useActionProcessors.d.ts

@@ -0,0 +1 @@
+export declare const useActionProcessors: () => import("quidproquo-core").ActionProcessorListResolver;

package/lib/esm/actionProcessor/useActionProcessors.js

@@ -0,0 +1,3 @@
+import { useContext } from 'react';
+import { ActionProcessorContext } from './ActionProcessorContext';
+export const useActionProcessors = () => useContext(ActionProcessorContext);

package/lib/esm/api/hooks/index.d.ts

@@ -1,2 +1,3 @@
+export * from './useApiRequestActionProcessor';
 export * from './useAuthenticatedNetworkRequest';
 export * from './useNetworkRequest';

package/lib/esm/api/hooks/index.js

@@ -1,2 +1,3 @@
+export * from './useApiRequestActionProcessor';
 export * from './useAuthenticatedNetworkRequest';
 export * from './useNetworkRequest';

package/lib/esm/api/hooks/useApiRequestActionProcessor.d.ts

@@ -0,0 +1,5 @@
+import { ActionProcessorListResolver } from 'quidproquo-core';
+export type UseApiRequestActionProcessorOptions = {
+    resolveServiceBaseUrl?: (service: string) => string;
+};
+export declare const useApiRequestActionProcessor: (options?: UseApiRequestActionProcessorOptions) => ActionProcessorListResolver;

package/lib/esm/api/hooks/useApiRequestActionProcessor.js

@@ -0,0 +1,15 @@
+import { createApiRequestActionProcessor } from 'quidproquo-actionprocessor-web';
+import { useMemo, useRef } from 'react';
+import { useAuthAccessToken } from '../../auth/hooks';
+import { useBaseUrlResolvers } from '../../baseUrl/hooks';
+export const useApiRequestActionProcessor = (options) => {
+    const accessToken = useAuthAccessToken();
+    const { getApiUrl } = useBaseUrlResolvers();
+    // Hold the token in a ref so the processor closure always reads the current value.
+    const tokenRef = useRef(accessToken);
+    tokenRef.current = accessToken;
+    return useMemo(() => createApiRequestActionProcessor({
+        getHeaders: () => (tokenRef.current ? { Authorization: `Bearer ${tokenRef.current}` } : {}),
+        resolveServiceBaseUrl: options?.resolveServiceBaseUrl ?? (() => getApiUrl()),
+    }), [options?.resolveServiceBaseUrl, getApiUrl]);
+};

package/lib/esm/api/hooks/useAuthenticatedNetworkRequest.js

@@ -1,4 +1,4 @@
-import { preformNetworkRequest } from 'quidproquo-web';
+import { preformNetworkRequest } from 'quidproquo-webserver';
 import { useAuthAccessToken } from '../../auth';
 import { useFastCallback } from '../../hooks';
 export const useAuthenticatedNetworkRequest = (payload) => {

package/lib/esm/api/hooks/useNetworkRequest.js

@@ -1,4 +1,4 @@
-import { preformNetworkRequest } from 'quidproquo-web';
+import { preformNetworkRequest } from 'quidproquo-webserver';
 import { useFastCallback } from '../../hooks';
 export const useNetworkRequest = (payload) => {
     const requeser = useFastCallback(() => preformNetworkRequest(payload));

package/lib/esm/auth/hooks/useRefreshTokens.js

@@ -1,5 +1,7 @@
 import { useEffect } from 'react';
+import { useFastCallback } from '../../hooks/useFastCallback';
 export const useRefreshTokens = (authenticationInfo, refreshTokens) => {
+    const stableRefreshTokens = useFastCallback(refreshTokens);
     const refresh = () => {
         if (authenticationInfo && authenticationInfo.refreshToken && authenticationInfo.expiresAt) {
             const now = new Date().toISOString();
@@ -9,12 +11,12 @@ export const useRefreshTokens = (authenticationInfo, refreshTokens) => {
             const refreshTime = timeToExpire - bufferTime;
             if (refreshTime > 0) {
                 return setTimeout(() => {
-                    refreshTokens(authenticationInfo);
+                    stableRefreshTokens(authenticationInfo);
                 }, refreshTime);
             }
             else {
                 // If the token is already expired or very close to expiration, refresh immediately
-                refreshTokens(authenticationInfo);
+                stableRefreshTokens(authenticationInfo);
             }
         }
         return null;
@@ -27,5 +29,11 @@ export const useRefreshTokens = (authenticationInfo, refreshTokens) => {
                 clearTimeout(timerId);
             }
         };
-    }, [authenticationInfo, refreshTokens]);
+        // Key on the stable primitives that actually drive a refresh, not the
+        // authenticationInfo object itself. Callers commonly derive that object
+        // fresh on every render (e.g. an unmemoized selector), so depending on its
+        // reference would re-run this effect every render — and when the token is
+        // expired/near-expiry the "refresh immediately" branch would then fire a
+        // network refresh on every render, an unbounded loop.
+    }, [authenticationInfo?.expiresAt, authenticationInfo?.refreshToken]);
 };

package/lib/esm/dateTime/DateTime.d.ts

@@ -0,0 +1,28 @@
+type DateInput = {
+    isoDateTime: string;
+} | {
+    unixTimestampMs: number;
+} | {
+    date: Date;
+};
+export type DateTimeProps = DateInput & {
+    /** Locale(s) for both the absolute and relative formatting. Defaults to the runtime locale. */
+    locale?: string | string[];
+    /** Options for the absolute date/time. Defaults to a short date + time. */
+    dateTimeFormatOptions?: Intl.DateTimeFormatOptions;
+    /** Show the "x minutes ago" label alongside the absolute time. Defaults to true. */
+    showTimeAgo?: boolean;
+    /** Hide the date portion of the absolute time. Defaults to false. */
+    hideDate?: boolean;
+    /** Hide the time portion of the absolute time. Defaults to false. */
+    hideTime?: boolean;
+    /** Hide the "x minutes ago" label. Takes precedence over showTimeAgo. Defaults to false. */
+    hideTimeAgo?: boolean;
+    /** Render each part on its own line instead of inline. Defaults to true. */
+    isMultiline?: boolean;
+    /** What to render when the date is missing/invalid (e.g. an empty isoDateTime). Defaults to "—". */
+    placeholder?: React.ReactNode;
+    className?: string;
+};
+export declare const DateTime: import("react").NamedExoticComponent<DateTimeProps>;
+export {};

package/lib/esm/dateTime/DateTime.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { useTimeAgo } from './hooks';
+const DEFAULT_DATE_OPTIONS = {
+    day: '2-digit',
+    month: '2-digit',
+    year: '2-digit',
+};
+const DEFAULT_TIME_OPTIONS = {
+    hour: '2-digit',
+    minute: '2-digit',
+};
+const DATE_OPTION_KEYS = ['weekday', 'era', 'year', 'month', 'day'];
+const TIME_OPTION_KEYS = ['hour', 'minute', 'second', 'dayPeriod', 'timeZoneName'];
+const pickOptions = (options, keys) => {
+    if (!options) {
+        return undefined;
+    }
+    const picked = keys.reduce((acc, key) => {
+        if (options[key] !== undefined) {
+            acc[key] = options[key];
+        }
+        return acc;
+    }, {});
+    return Object.keys(picked).length > 0 ? picked : undefined;
+};
+const toDate = (props) => {
+    if ('isoDateTime' in props) {
+        return new Date(props.isoDateTime);
+    }
+    if ('unixTimestampMs' in props) {
+        return new Date(props.unixTimestampMs);
+    }
+    return props.date;
+};
+const component = (props) => {
+    const { locale, dateTimeFormatOptions, showTimeAgo = true, hideDate = false, hideTime = false, hideTimeAgo = false, isMultiline = true, placeholder = '—', className } = props;
+    // Stable primitive key so a fresh props object doesn't churn the memo.
+    const dateKey = 'isoDateTime' in props ? props.isoDateTime : 'unixTimestampMs' in props ? props.unixTimestampMs : props.date.getTime();
+    const date = useMemo(() => toDate(props), [dateKey]);
+    const isValidDate = !Number.isNaN(date.getTime());
+    const formattedDate = useMemo(() => (hideDate ? '' : date.toLocaleDateString(locale, pickOptions(dateTimeFormatOptions, DATE_OPTION_KEYS) ?? DEFAULT_DATE_OPTIONS)), [date, locale, dateTimeFormatOptions, hideDate]);
+    const formattedTime = useMemo(() => (hideTime ? '' : date.toLocaleTimeString(locale, pickOptions(dateTimeFormatOptions, TIME_OPTION_KEYS) ?? DEFAULT_TIME_OPTIONS)), [date, locale, dateTimeFormatOptions, hideTime]);
+    const timeAgo = useTimeAgo(date, locale);
+    const formattedDateTime = [formattedDate, formattedTime].filter(Boolean).join(' ');
+    const displayTimeAgo = showTimeAgo && !hideTimeAgo;
+    // A missing/invalid date (e.g. an empty isoDateTime) renders the placeholder instead of
+    // an "Invalid Date" string or crashing the relative-time formatter.
+    if (!isValidDate) {
+        return _jsx("time", { className: className, children: placeholder });
+    }
+    return (_jsx("time", { dateTime: date.toISOString(), title: date.toLocaleString(locale), className: className, children: isMultiline ? (_jsxs(_Fragment, { children: [formattedDateTime ? _jsx("div", { children: formattedDateTime }) : null, displayTimeAgo ? _jsx("div", { children: timeAgo }) : null] })) : (_jsxs(_Fragment, { children: [formattedDateTime, displayTimeAgo ? ` (${timeAgo})` : ''] })) }));
+};
+export const DateTime = memo(component);

package/lib/esm/dateTime/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useTimeAgo';

package/lib/esm/dateTime/hooks/index.js

@@ -0,0 +1 @@
+export * from './useTimeAgo';

package/lib/esm/dateTime/hooks/useTimeAgo.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a relative time phrase for `date` (e.g. "5 minutes ago") that
+ * updates itself over time. The re-render cadence adapts to the age of the
+ * date, so recent times tick every second and older ones only update hourly.
+ */
+export declare const useTimeAgo: (date: Date, locale?: string | string[]) => string;