quidproquo-web-react 0.0.263 → 0.1.1

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;

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

@@ -0,0 +1,22 @@
+import { formatTimeAgo, getTimeAgoUpdateIntervalMs } from 'quidproquo-web';
+import { useEffect, useMemo, useState } from 'react';
+/**
+ * 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 const useTimeAgo = (date, locale) => {
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        let timeoutId;
+        const schedule = () => {
+            timeoutId = setTimeout(() => {
+                setNow(new Date());
+                schedule();
+            }, getTimeAgoUpdateIntervalMs(date, new Date()));
+        };
+        schedule();
+        return () => clearTimeout(timeoutId);
+    }, [date]);
+    return useMemo(() => formatTimeAgo(date, now, locale), [date, now, locale]);
+};

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

@@ -0,0 +1,2 @@
+export * from './DateTime';
+export * from './hooks';

package/lib/esm/dateTime/index.js

@@ -0,0 +1,2 @@
+export * from './DateTime';
+export * from './hooks';

package/lib/esm/dateTime/logic/formatTimeAgo.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Formats the distance between `date` and `now` as a relative phrase
+ * (e.g. "5 minutes ago", "in 2 hours") using the native Intl.RelativeTimeFormat.
+ * Past dates are negative, future dates are positive.
+ */
+export declare const formatTimeAgo: (date: Date, now?: Date, locale?: string | string[]) => string;
+/**
+ * How long until the relative phrase could next change, so callers can
+ * re-render no more often than necessary.
+ */
+export declare const getTimeAgoUpdateIntervalMs: (date: Date, now?: Date) => number;

package/lib/esm/dateTime/logic/formatTimeAgo.js

@@ -0,0 +1,44 @@
+// Each amount is "how many of this unit make up one of the next unit".
+const DIVISIONS = [
+    { amount: 60, unit: 'seconds' },
+    { amount: 60, unit: 'minutes' },
+    { amount: 24, unit: 'hours' },
+    { amount: 7, unit: 'days' },
+    { amount: 4.34524, unit: 'weeks' },
+    { amount: 12, unit: 'months' },
+    { amount: Number.POSITIVE_INFINITY, unit: 'years' },
+];
+/**
+ * Formats the distance between `date` and `now` as a relative phrase
+ * (e.g. "5 minutes ago", "in 2 hours") using the native Intl.RelativeTimeFormat.
+ * Past dates are negative, future dates are positive.
+ */
+export const formatTimeAgo = (date, now = new Date(), locale) => {
+    const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+    // Seconds between the two dates; negative for the past.
+    let duration = (date.getTime() - now.getTime()) / 1000;
+    for (const division of DIVISIONS) {
+        if (Math.abs(duration) < division.amount) {
+            return formatter.format(Math.round(duration), division.unit);
+        }
+        duration /= division.amount;
+    }
+    return formatter.format(Math.round(duration), 'years');
+};
+/**
+ * How long until the relative phrase could next change, so callers can
+ * re-render no more often than necessary.
+ */
+export const getTimeAgoUpdateIntervalMs = (date, now = new Date()) => {
+    const seconds = Math.abs((date.getTime() - now.getTime()) / 1000);
+    if (seconds < 60) {
+        return 1000; // seconds tick over
+    }
+    if (seconds < 60 * 60) {
+        return 60 * 1000; // minutes tick over
+    }
+    if (seconds < 60 * 60 * 24) {
+        return 60 * 60 * 1000; // hours tick over
+    }
+    return 60 * 60 * 24 * 1000; // days or coarser
+};

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

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

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

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

package/lib/esm/hooks/asmj/QpqContextProvider.d.ts

@@ -6,5 +6,6 @@ interface QpqContextProviderProps<T> {
     children: ReactNode;
 }
 export declare const useQpqContextValues: () => QpqContext<any>;
-export declare const QpqContextProvider: <T>({ contextIdentifier, value, children }: QpqContextProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const useQpqContextValue: <T>(contextIdentifier: QpqContextIdentifier<T>) => T;
+export declare const QpqContextProvider: <T>({ contextIdentifier, value, children }: QpqContextProviderProps<T>) => import("react").JSX.Element;
 export {};

package/lib/esm/hooks/asmj/QpqContextProvider.js

@@ -5,6 +5,10 @@ const qpqReactContext = createContext({});
 export const useQpqContextValues = () => {
     return useContext(qpqReactContext);
 };
+export const useQpqContextValue = (contextIdentifier) => {
+    const context = useQpqContextValues();
+    return contextIdentifier.uniqueName in context ? context[contextIdentifier.uniqueName] : contextIdentifier.defaultValue;
+};
 export const QpqContextProvider = ({ contextIdentifier, value, children }) => {
     // Get the parent context value
     const parentContext = useContext(qpqReactContext);

package/lib/esm/hooks/asmj/QpqRuntimeEffectCatcher.d.ts

@@ -7,8 +7,8 @@ type QpqRuntimeEffectCatcher = {
 };
 export declare const QpqRuntimeEffectCatcherComponent: <TState, TAction, TApi extends QpqApi>({ children, runtime, name, }: QpqRuntimeEffectCatcher & {
     children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const QpqRuntimeEffectCatcher: import("react").MemoExoticComponent<(<TState, TAction, TApi extends QpqApi>({ children, runtime, name, }: QpqRuntimeEffectCatcher & {
     children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element)>;
+}) => import("react").JSX.Element)>;
 export {};

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

@@ -1,5 +1,6 @@
 export * from './asmj';
 export * from './useAsyncEffect';
+export * from './useComputed';
 export * from './useEffectCallback';
 export * from './useFastCallback';
 export * from './useMetadata';

package/lib/esm/hooks/index.js

@@ -1,5 +1,6 @@
 export * from './asmj';
 export * from './useAsyncEffect';
+export * from './useComputed';
 export * from './useEffectCallback';
 export * from './useFastCallback';
 export * from './useMetadata';

package/lib/esm/hooks/useComputed.d.ts

@@ -0,0 +1 @@
+export declare function useComputed<TState extends object, T>(state: TState, selector: (state: TState) => T): T;

package/lib/esm/hooks/useComputed.js

@@ -0,0 +1,4 @@
+export function useComputed(state, selector) {
+    // TODO: use proxies to resolve deps and only return updated values when the deps change.
+    return selector(state);
+}

package/lib/esm/index.d.ts

@@ -3,6 +3,7 @@ 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/esm/index.js

@@ -3,6 +3,7 @@ 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/esm/websocket/WebSocketAuthSync/WebSocketAuthContext.d.ts

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

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

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

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -1,11 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { useWebsocketAuthSync, useWebsocketPingPong } from './hooks';
+import { WebSocketAuthContext } from './WebSocketAuthContext';
 const component = ({ children, accessToken }) => {
-    useWebsocketAuthSync(accessToken);
+    const isAuthenticated = useWebsocketAuthSync(accessToken);
     // Keep the active websocket alive
     useWebsocketPingPong();
-    // This fragment is not useless!
-    return _jsx(_Fragment, { children: children });
+    return (_jsx(WebSocketAuthContext.Provider, { value: isAuthenticated, children: children }));
 };
 export const WebSocketAuthSync = memo(component);

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { WebSocketAuthContext } from '../WebSocketAuthContext';
+export const useWebSocketIsAuthenticated = () => {
+    return useContext(WebSocketAuthContext);
+};

package/lib/esm/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/esm/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.js

@@ -1,33 +1,36 @@
 import { WebsocketServiceEvent } from 'quidproquo-web';
-import { WebSocketQueueClientMessageEventType, } from 'quidproquo-webserver';
-import { useEffect } from 'react';
+import { WebSocketQueueClientMessageEventType, WebSocketQueueServerMessageEventType, } from 'quidproquo-webserver';
+import { useEffect, useState } from 'react';
 import { useFastCallback } from '../../../hooks';
-import { useSubscribeToWebsocket, useWebsocketApi, useWebsocketSendEvent } from '../../hooks';
+import { useSubscribeToWebsocket, useSubscribeToWebSocketEvent, useWebsocketApi, useWebsocketSendEvent } from '../../hooks';
 export const useWebsocketAuthSync = (accessToken) => {
     const sendMessage = useWebsocketSendEvent();
     const websocketApi = useWebsocketApi();
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
     const updateAuthTokens = useFastCallback(() => {
         if (!websocketApi?.isConnected()) {
             return;
         }
         if (accessToken) {
-            const authMessage = {
+            sendMessage({
                 type: WebSocketQueueClientMessageEventType.Authenticate,
                 payload: {
                     accessToken: accessToken,
                 },
-            };
-            sendMessage(authMessage);
+            });
         }
-        else {
-            const authMessage = {
+        else if (isAuthenticated) {
+            sendMessage({
                 type: WebSocketQueueClientMessageEventType.Unauthenticate,
-            };
-            sendMessage(authMessage);
+            });
         }
     });
+    useSubscribeToWebSocketEvent(WebSocketQueueServerMessageEventType.Authenticated, () => setIsAuthenticated(true));
+    useSubscribeToWebSocketEvent(WebSocketQueueServerMessageEventType.Unauthenticated, () => setIsAuthenticated(false));
     // Sync the tokens in on open
     useSubscribeToWebsocket(WebsocketServiceEvent.OPEN, updateAuthTokens);
+    useSubscribeToWebsocket(WebsocketServiceEvent.CLOSE, () => setIsAuthenticated(false));
     // Sync the tokens when they change
-    useEffect(updateAuthTokens, [accessToken, websocketApi]);
+    useEffect(updateAuthTokens, [accessToken, websocketApi, isAuthenticated]);
+    return isAuthenticated;
 };

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

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

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

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

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

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
+import { useFastCallback } from '../../hooks';
 import { useWebsocketApi } from './useWebsocketApi';
 export const useSubscribeToWebSocketEvent = (subscriptionType, callback) => {
+    const stableCallback = useFastCallback(callback);
     const websocketService = useWebsocketApi();
     useEffect(() => {
-        const subscriptionHandle = websocketService?.subscribeToEvent(subscriptionType, callback);
+        const subscriptionHandle = websocketService?.subscribeToEvent(subscriptionType, stableCallback);
         return () => {
             if (subscriptionHandle) {
                 websocketService?.unsubscribe(subscriptionHandle);
             }
         };
-    }, [websocketService, subscriptionType, callback]);
+    }, [websocketService, subscriptionType, stableCallback]);
 };

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

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
+import { useFastCallback } from '../../hooks';
 import { useWebsocketApi } from './useWebsocketApi';
 export const useSubscribeToWebsocket = (subscriptionType, callback) => {
+    const stableCallback = useFastCallback(callback);
     const websocketService = useWebsocketApi();
     useEffect(() => {
-        const handle = websocketService?.subscribe(subscriptionType, callback);
+        const handle = websocketService?.subscribe(subscriptionType, stableCallback);
         return () => {
             if (handle) {
                 websocketService?.unsubscribe(handle);
             }
         };
-    }, [websocketService, subscriptionType, callback]);
+    }, [websocketService, subscriptionType, stableCallback]);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-react",
-  "version": "0.0.263",
+  "version": "0.1.1",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -32,8 +32,10 @@
   },
   "homepage": "https://github.com/joe-coady/quidproquo#readme",
   "devDependencies": {
-    "quidproquo-core": "0.0.263",
-    "quidproquo-tsconfig": "0.0.263",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "quidproquo-core": "0.1.1",
+    "quidproquo-tsconfig": "0.1.1",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {
@@ -41,10 +43,10 @@
   },
   "dependencies": {
     "jotai": "^2.12.1",
-    "symbol-observable": "^4.0.0",
-    "quidproquo-web": "0.0.263",
-    "quidproquo-webserver": "0.0.263",
-    "quidproquo-actionprocessor-node": "0.0.263",
-    "quidproquo-actionprocessor-web": "0.0.263"
+    "quidproquo-actionprocessor-node": "0.1.1",
+    "quidproquo-actionprocessor-web": "0.1.1",
+    "quidproquo-web": "0.1.1",
+    "quidproquo-webserver": "0.1.1",
+    "symbol-observable": "^4.0.0"
   }
 }