@tristan2828/ui-foundation 3.30.1 → 4.1.0

package/dist/api/contracts.d.ts

@@ -5,9 +5,14 @@ export type Page<T> = {
     pageSize: number;
 };
 export type AppError = {
-    kind: "validation" | "notfound" | "auth" | "server" | "network";
+    kind: "validation" | "notfound" | "auth" | "rate_limited" | "server" | "network";
     message: string;
     fieldErrors?: Record<string, string[]>;
+    /**
+     * kind "rate_limited" (a 429): seconds until another attempt is allowed,
+     * from the response's Retry-After. Absent when the server didn't say.
+     */
+    retryAfterSeconds?: number;
 };
 export type QuerySpec = {
     page: number;

package/dist/api/gateway/auth.d.ts

@@ -2,7 +2,25 @@ import type { components } from "../schema.js";
 type User = components["schemas"]["User"];
 type LoginRequest = components["schemas"]["LoginRequest"];
 type RegisterRequest = components["schemas"]["RegisterRequest"];
-export declare function login(input: LoginRequest): Promise<User>;
+type TotpLoginRequest = components["schemas"]["TotpLoginRequest"];
+/** Signed in (200), or the password was right and a TOTP code is next (202). */
+export type LoginStep = {
+    user: User;
+} | {
+    next: "totp";
+};
+export declare function login(input: LoginRequest): Promise<LoginStep>;
+/**
+ * Signed in, or the pending sign-in is gone (410: expired, or out of tries)
+ * and it starts again from the password, with the server's reason. A wrong
+ * code is an AppError of kind 'auth' (401).
+ */
+export type TotpStep = {
+    user: User;
+} | {
+    restart: string;
+};
+export declare function loginTotp(input: TotpLoginRequest): Promise<TotpStep>;
 export declare function register(input: RegisterRequest): Promise<User>;
 export declare function logout(): Promise<void>;
 export declare function getCurrentUser(): Promise<User>;

package/dist/api/gateway/auth.js

@@ -1,13 +1,31 @@
 import { safeFetch, toAppError } from "./errors.js";
+// A 429 (too many failed attempts) is an AppError of kind 'rate_limited'
+// with the Retry-After seconds, as on every endpoint (toAppError).
 export async function login(input) {
     const res = await safeFetch("/auth/login", {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify(input),
     });
+    if (res.status === 202)
+        return { next: "totp" };
     if (res.status !== 200)
-        throw toAppError(res.status, res.body);
-    return res.body;
+        throw toAppError(res.status, res.body, res.headers);
+    return { user: res.body };
+}
+export async function loginTotp(input) {
+    const res = await safeFetch("/auth/login/totp", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(input),
+    });
+    if (res.status === 410) {
+        const detail = res.body?.detail;
+        return { restart: detail ?? "Your sign-in timed out. Enter your email and password again." };
+    }
+    if (res.status !== 200)
+        throw toAppError(res.status, res.body, res.headers);
+    return { user: res.body };
 }
 // Auto-logs in on success — the backend sets the same session cookie
 // /auth/login does (see backend/app/routers/auth.py's _start_session), so

package/dist/api/gateway/client-errors.d.ts

@@ -0,0 +1,4 @@
+import type { components } from "../schema.js";
+export type ClientErrorReport = components["schemas"]["ClientErrorReport"];
+/** Resolves whatever happens: a report that can't be sent is dropped. */
+export declare function reportClientError(report: ClientErrorReport): Promise<void>;

package/dist/api/gateway/client-errors.js

@@ -0,0 +1,14 @@
+import { safeFetch } from "./errors.js";
+/** Resolves whatever happens: a report that can't be sent is dropped. */
+export async function reportClientError(report) {
+    try {
+        await safeFetch("/client-errors", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify(report),
+        });
+    }
+    catch {
+        // Network down: nothing to do, and nothing to report it to.
+    }
+}

package/dist/api/gateway/errors.d.ts

@@ -1,5 +1,6 @@
 import { type ApiResponse } from "../transport/index.js";
 import type { AppError } from "../contracts.js";
 export declare function safeFetch(path: string, init?: RequestInit): Promise<ApiResponse>;
-export declare function toAppError(status: number, body: unknown): AppError;
+export declare function httpStatusOf(error: AppError): number | undefined;
+export declare function toAppError(status: number, body: unknown, headers?: Headers): AppError;
 export declare function networkError(): AppError;

package/dist/api/gateway/errors.js

@@ -11,7 +11,23 @@ export async function safeFetch(path, init) {
         throw networkError();
     }
 }
-export function toAppError(status, body) {
+/**
+ * Pass the response's `headers` so a 429 carries its Retry-After
+ * (`retryAfterSeconds`); without them it's still `rate_limited`.
+ */
+// The HTTP status each AppError came from, kept beside it rather than on
+// it, so AppError's shape (and every test comparing one) doesn't change.
+// Error reporting reads it (src/error-reporting/reporter.ts).
+const STATUS = new WeakMap();
+export function httpStatusOf(error) {
+    return STATUS.get(error);
+}
+export function toAppError(status, body, headers) {
+    const error = translate(status, body, headers);
+    STATUS.set(error, status);
+    return error;
+}
+function translate(status, body, headers) {
     if (status === 422) {
         // A rule the server enforces (a cap, a status the change needs) is
         // often refused with FastAPI's HTTPException shape: a sentence, not a
@@ -32,8 +48,25 @@ export function toAppError(status, body) {
         return { kind: "notfound", message };
     if (status === 401)
         return { kind: "auth", message };
+    if (status === 429) {
+        const retryAfterSeconds = parseRetryAfter(headers?.get("retry-after") ?? null);
+        return retryAfterSeconds === undefined
+            ? { kind: "rate_limited", message }
+            : { kind: "rate_limited", message, retryAfterSeconds };
+    }
     return { kind: "server", message };
 }
+// Retry-After is either whole seconds or an HTTP date (RFC 9110 10.2.3).
+function parseRetryAfter(value) {
+    if (value === null || value.trim() === "")
+        return undefined;
+    if (/^\d+$/.test(value.trim()))
+        return Number(value.trim());
+    const at = Date.parse(value);
+    if (Number.isNaN(at))
+        return undefined;
+    return Math.max(0, Math.ceil((at - Date.now()) / 1000));
+}
 // The key a form binds a 422 to (react-hook-form's field path):
 // - ["body", "price"] → "price"
 // - ["body", "tags", 0] → "tags": an item of a list of values is the list's

package/dist/api/schema.d.ts

@@ -20,6 +20,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/auth/login/totp": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * The second step of a sign-in, a code from an authenticator app or a recovery code
+         * @description Needs the pending_login cookie a 202 from POST /auth/login set. A right code starts the session as a 200 from /auth/login does.
+         */
+        post: operations["loginTotp"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/auth/register": {
         parameters: {
             query?: never;
@@ -91,6 +111,26 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/client-errors": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * A failure in the browser, for the backend to forward to error reporting
+         * @description Sent by the package when an app turns on FoundationProviders' errorReporting. Needs a session, so the public can't post into it. The backend may drop a report (a duplicate, too many) and still answer 204. The user is the session's; the report never carries request or response bodies, cookies, headers, form values or query strings.
+         */
+        post: operations["reportClientError"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -110,11 +150,41 @@ export interface components {
             email: string;
             password: string;
         };
+        LoginNextStep: {
+            /**
+             * @description The step the sign-in still needs.
+             * @enum {string}
+             */
+            next: "totp";
+        };
+        TotpLoginRequest: {
+            /** @description The 6-digit code from the authenticator app, or a recovery code. */
+            code: string;
+        };
         RegisterRequest: {
             email: components["schemas"]["User"]["email"];
             name: components["schemas"]["User"]["name"];
             password: components["schemas"]["LoginRequest"]["password"];
         };
+        ClientErrorReport: {
+            /**
+             * @description Where the package caught it.
+             * @enum {string}
+             */
+            source: "route" | "window" | "unhandledrejection" | "query" | "mutation";
+            /** @description The error's type (TypeError, ServerError). */
+            type: string;
+            message: string;
+            stack?: string;
+            /** @description The route pattern (/items/:id), never the URL. */
+            route?: string;
+            /** @description The HTTP method of a failed request. */
+            method?: string;
+            /** @description The HTTP status of a failed request. */
+            status?: number;
+            /** @description The frontend build (its commit). */
+            release?: string;
+        };
         /** @description FastAPI's default 422 shape (RequestValidationError). */
         ValidationErrorBody: {
             detail: {
@@ -156,6 +226,26 @@ export interface components {
                 "application/json": components["schemas"]["HTTPErrorBody"];
             };
         };
+        /** @description Too many failed attempts. Try again after Retry-After seconds. */
+        RateLimitedError: {
+            headers: {
+                /** @description Seconds until another attempt is allowed. */
+                "Retry-After"?: number;
+                [name: string]: unknown;
+            };
+            content: {
+                "application/json": components["schemas"]["HTTPErrorBody"];
+            };
+        };
+        /** @description The pending sign-in is missing, expired or out of tries. Start again with POST /auth/login. */
+        SignInExpiredError: {
+            headers: {
+                [name: string]: unknown;
+            };
+            content: {
+                "application/json": components["schemas"]["HTTPErrorBody"];
+            };
+        };
         /** @description Unhandled server error. */
         ServerError: {
             headers: {
@@ -185,6 +275,43 @@ export interface operations {
                 "application/json": components["schemas"]["LoginRequest"];
             };
         };
+        responses: {
+            /** @description Authenticated. Sets the session_id cookie. */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["User"];
+                };
+            };
+            /** @description The password is right and the account has a second step. No session yet: sets a short-lived, single-use pending_login cookie for POST /auth/login/totp. */
+            202: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["LoginNextStep"];
+                };
+            };
+            401: components["responses"]["UnauthorizedError"];
+            422: components["responses"]["ValidationError"];
+            429: components["responses"]["RateLimitedError"];
+            500: components["responses"]["ServerError"];
+        };
+    };
+    loginTotp: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["TotpLoginRequest"];
+            };
+        };
         responses: {
             /** @description Authenticated. Sets the session_id cookie. */
             200: {
@@ -196,7 +323,9 @@ export interface operations {
                 };
             };
             401: components["responses"]["UnauthorizedError"];
+            410: components["responses"]["SignInExpiredError"];
             422: components["responses"]["ValidationError"];
+            429: components["responses"]["RateLimitedError"];
             500: components["responses"]["ServerError"];
         };
     };
@@ -288,4 +417,29 @@ export interface operations {
             500: components["responses"]["ServerError"];
         };
     };
+    reportClientError: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ClientErrorReport"];
+            };
+        };
+        responses: {
+            /** @description Received (forwarded, or dropped as a duplicate). */
+            204: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            401: components["responses"]["UnauthorizedError"];
+            422: components["responses"]["ValidationError"];
+            500: components["responses"]["ServerError"];
+        };
+    };
 }

package/dist/api/transport/index.d.ts

@@ -1,5 +1,7 @@
 export type ApiResponse = {
     status: number;
     body: unknown;
+    /** The response's headers (a 429's Retry-After, for one). */
+    headers: Headers;
 };
 export declare function apiFetch(path: string, init?: RequestInit): Promise<ApiResponse>;

package/dist/api/transport/index.js

@@ -7,8 +7,8 @@ const BASE_URL = "/api";
 export async function apiFetch(path, init) {
     const response = await fetch(`${BASE_URL}${path}`, init);
     if (response.status === 204) {
-        return { status: response.status, body: undefined };
+        return { status: response.status, body: undefined, headers: response.headers };
     }
     const body = await response.json().catch(() => undefined);
-    return { status: response.status, body };
+    return { status: response.status, body, headers: response.headers };
 }

package/dist/auth/auth-context.d.ts

@@ -5,6 +5,24 @@ export type AuthUser = {
     email: string;
 };
 export type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated' | 'unavailable';
+/**
+ * Where a sign-in stands after `login` or `submitTotp`:
+ * - `signed-in`: the session started.
+ * - `totp`: the password was right; the account wants a code next
+ *   (`submitTotp`), and no session exists yet.
+ * - `restart`: the sign-in waiting for its code is gone (it expired, or
+ *   ran out of tries); start again from the password. `message` says why.
+ * Anything else (a wrong password or code, too many attempts, the server
+ * down) rejects with an AppError.
+ */
+export type SignInResult = {
+    status: 'signed-in';
+} | {
+    status: 'totp';
+} | {
+    status: 'restart';
+    message: string;
+};
 export type AuthContextValue = {
     user: AuthUser | null;
     status: AuthStatus;
@@ -12,7 +30,9 @@ export type AuthContextValue = {
     error: AppError | null;
     /** Re-runs the session check (the 'unavailable' state's retry). */
     retry: () => void;
-    login: (email: string, password: string) => Promise<void>;
+    login: (email: string, password: string) => Promise<SignInResult>;
+    /** The second step, after `login` answered `totp`: an authenticator code or a recovery code. */
+    submitTotp: (code: string) => Promise<SignInResult>;
     logout: () => Promise<void>;
     register: (email: string, name: string, password: string) => Promise<void>;
 };

package/dist/auth/auth-context.js

@@ -6,7 +6,8 @@ export const AuthContext = createContext({
     status: 'loading',
     error: null,
     retry: () => { },
-    login: async () => { },
+    login: async () => ({ status: 'signed-in' }),
+    submitTotp: async () => ({ status: 'signed-in' }),
     logout: async () => { },
     register: async () => { },
 });

package/dist/auth/auth-provider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { getCurrentUser, login as loginRequest, logout as logoutRequest, register as registerRequest, } from '../api/gateway/auth.js';
+import { getCurrentUser, login as loginRequest, loginTotp as loginTotpRequest, logout as logoutRequest, register as registerRequest, } from '../api/gateway/auth.js';
 import { DATA_LABEL_QUERY_KEY } from '../hooks/use-data-label.js';
 import { AuthContext } from './auth-context.js';
 // TanStack Query, not useEffect — AGENTS.md's "NEVER fetch in useEffect"
@@ -83,8 +83,21 @@ export function AuthProvider({ children }) {
                 : error
                     ? 'unavailable'
                     : 'unauthenticated';
+    // With TOTP on, the password alone starts nothing: the server holds a
+    // pending sign-in (its own short-lived cookie) until the code arrives.
     async function login(email, password) {
-        startSession(queryClient, await loginRequest({ email, password }));
+        const step = await loginRequest({ email, password });
+        if ('next' in step)
+            return { status: 'totp' };
+        startSession(queryClient, step.user);
+        return { status: 'signed-in' };
+    }
+    async function submitTotp(code) {
+        const step = await loginTotpRequest({ code });
+        if ('restart' in step)
+            return { status: 'restart', message: step.restart };
+        startSession(queryClient, step.user);
+        return { status: 'signed-in' };
     }
     // Logged out on screen even when the request fails (network down): the
     // person asked to leave, and a shell that still shows them signed in is
@@ -106,6 +119,7 @@ export function AuthProvider({ children }) {
             error: status === 'unavailable' ? error : null,
             retry: () => void refetch(),
             login,
+            submitTotp,
             logout,
             register,
         }, children: children }));

package/dist/components/app/app-shell.js

@@ -6,6 +6,8 @@ import { Link, Navigate, Outlet, useLocation } from 'react-router';
 import { useAuth } from '../../auth/use-auth.js';
 import { activeNavTo, navGroups } from './app-shell-nav.js';
 import { ErrorState } from './error-state.js';
+import { useErrorReporter } from '../../error-reporting/error-reporting-context.js';
+import { ReportRoutePattern } from '../../error-reporting/error-reporting-provider.js';
 import { Button } from '../ui/button.js';
 import { Skeleton } from '../ui/skeleton.js';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
@@ -41,6 +43,7 @@ function AppShellSkeleton() {
 export function AppShell({ title, nav, sidebarExtra, defaultSidebarOpen = true }) {
     const { user, status, error, retry, logout } = useAuth();
     const location = useLocation();
+    const reporter = useErrorReporter();
     // Set before logout starts, so the redirect below knows this was a
     // deliberate logout. It can't be a follow-up navigate() after logout
     // resolves: that runs before React re-renders, and the <Navigate> this
@@ -66,7 +69,7 @@ export function AppShell({ title, nav, sidebarExtra, defaultSidebarOpen = true }
         return _jsx(Navigate, { to: "/login", replace: true, state: isLoggingOut ? undefined : { from } });
     }
     const activeTo = activeNavTo(nav, location.pathname);
-    return (_jsxs(TooltipProvider, { children: [_jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [navGroups(nav).map((group, groupIndex) => (_jsxs(SidebarGroup, { children: [group.label !== undefined && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: group.items.map(({ to, label, icon: Icon }) => {
+    return (_jsxs(TooltipProvider, { children: [reporter && _jsx(ReportRoutePattern, { reporter: reporter }), _jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [navGroups(nav).map((group, groupIndex) => (_jsxs(SidebarGroup, { children: [group.label !== undefined && _jsx(SidebarGroupLabel, { children: group.label }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: group.items.map(({ to, label, icon: Icon }) => {
                                                             // A plain Link, not NavLink: NavLink marks every
                                                             // matching entry current, and only the most specific
                                                             // one should be (activeNavTo).

package/dist/components/app/error-state.js

@@ -18,6 +18,7 @@ const TITLE_BY_KIND = {
     server: 'Something went wrong',
     notfound: 'Not found',
     auth: 'Not authorized',
+    rate_limited: 'Too many attempts',
     validation: 'Check the form',
 };
 export function ErrorState({ error, onRetry, size = 'default', className, }) {

package/dist/components/app/foundation-providers.d.ts

@@ -1,9 +1,17 @@
 import { type QueryClient } from '@tanstack/react-query';
 import { type ReactNode } from 'react';
-export declare function FoundationProviders({ mockMode, queryClient, children, }: {
+import { type ErrorReportingOptions } from '../../error-reporting/reporter.js';
+export declare function FoundationProviders({ mockMode, queryClient, errorReporting, children, }: {
     /** Whether the API is served by MSW — the app's own IS_MOCK_MODE. */
     mockMode: boolean;
     /** Defaults to createQueryClient(); pass one to share it with code outside React. */
     queryClient?: QueryClient;
+    /**
+     * Off by default. On, crashes, uncaught errors and server failures are
+     * posted to the app's own POST /api/client-errors (while signed in),
+     * which forwards them; see docs/deploy.md "Error reporting" for what a
+     * report holds and never holds. `{ release }` names the build.
+     */
+    errorReporting?: boolean | ErrorReportingOptions;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/app/foundation-providers.js

@@ -5,13 +5,16 @@ import { createQueryClient } from '../../api/query-client.js';
 import { AuthProvider } from '../../auth/use-auth.js';
 import { MockModeBanner } from './mock-mode-banner.js';
 import { ThemeProvider } from '../theme-provider.js';
+import { ErrorReportingProvider } from '../../error-reporting/error-reporting-provider.js';
+import { resolveErrorReporting } from '../../error-reporting/reporter.js';
 // Everything an app's root needs around its router, in the order that
 // works: the theme outermost, the mock-mode banner above the router so it
 // shows on every route (/login included), and AuthProvider inside
 // QueryClientProvider because it queries /auth/me through TanStack Query.
 // An app's DataEnvironmentBanner goes first among the children, before its
 // router: it queries too, and shows on every route like the mock banner.
-export function FoundationProviders({ mockMode, queryClient, children, }) {
+export function FoundationProviders({ mockMode, queryClient, errorReporting, children, }) {
     const [client] = useState(() => queryClient ?? createQueryClient());
-    return (_jsxs(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: [_jsx(MockModeBanner, { active: mockMode }), _jsx(QueryClientProvider, { client: client, children: _jsx(AuthProvider, { children: children }) })] }));
+    const reporting = resolveErrorReporting(errorReporting);
+    return (_jsxs(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: [_jsx(MockModeBanner, { active: mockMode }), _jsx(QueryClientProvider, { client: client, children: _jsx(AuthProvider, { children: reporting ? _jsx(ErrorReportingProvider, { options: reporting, children: children }) : children }) })] }));
 }

package/dist/components/app/route-error-boundary.js

@@ -1,9 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TriangleAlertIcon } from 'lucide-react';
+import { useEffect } from 'react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
+import { useErrorReporter, useRoutePattern } from '../../error-reporting/error-reporting-context.js';
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from '../ui/empty.js';
 export function RouteErrorBoundary() {
     const error = useRouteError();
+    const reporter = useErrorReporter();
+    const route = useRoutePattern();
+    useEffect(() => {
+        // A crash, or a loader's 5xx; never a 404 (no such page) or other 4xx.
+        if (!reporter || (isRouteErrorResponse(error) && error.status < 500))
+            return;
+        reporter.setRoute(route);
+        reporter.report('route', error, isRouteErrorResponse(error) ? { status: error.status } : undefined);
+    }, [reporter, error, route]);
     const message = isRouteErrorResponse(error)
         ? `${error.status} ${error.statusText}`
         : error instanceof Error

package/dist/error-reporting/error-reporting-context.d.ts

@@ -0,0 +1,6 @@
+import { type ErrorReporter } from './reporter.js';
+export declare const ErrorReportingContext: import("react").Context<ErrorReporter | null>;
+/** The reporter, or null when the app hasn't turned reporting on. */
+export declare function useErrorReporter(): ErrorReporter | null;
+/** The current route's pattern (`/widgets/:id`), from a data router's matches. */
+export declare function useRoutePattern(): string | null;

package/dist/error-reporting/error-reporting-context.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import { useMatches } from 'react-router';
+import { routePattern } from './reporter.js';
+// Null unless FoundationProviders' errorReporting is on
+// (./error-reporting-provider.tsx), so every use of it does nothing then.
+export const ErrorReportingContext = createContext(null);
+/** The reporter, or null when the app hasn't turned reporting on. */
+export function useErrorReporter() {
+    return useContext(ErrorReportingContext);
+}
+/** The current route's pattern (`/widgets/:id`), from a data router's matches. */
+export function useRoutePattern() {
+    const matches = useMatches();
+    const last = matches[matches.length - 1];
+    return last ? routePattern(last.pathname, last.params) : null;
+}

package/dist/error-reporting/error-reporting-provider.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type ErrorReporter, type ErrorReportingOptions } from './reporter.js';
+export declare function ErrorReportingProvider({ options, children }: {
+    options: ErrorReportingOptions;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Keeps the reporter's route current, for reports that don't know theirs.
+ * AppShell renders it only while reporting is on: the router's matches
+ * need a data router (createBrowserRouter), which reporting then needs too.
+ */
+export declare function ReportRoutePattern({ reporter }: {
+    reporter: ErrorReporter;
+}): null;

package/dist/error-reporting/error-reporting-provider.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The React side of error reporting (./reporter.ts): FoundationProviders
+// mounts this inside AuthProvider when `errorReporting` is on. Off, there's
+// no provider, the context is null, and nothing here runs.
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { reportClientError } from '../api/gateway/client-errors.js';
+import { useAuth } from '../auth/use-auth.js';
+import { ErrorReportingContext, useRoutePattern } from './error-reporting-context.js';
+import { createErrorReporter } from './reporter.js';
+export function ErrorReportingProvider({ options, children }) {
+    const queryClient = useQueryClient();
+    const { status } = useAuth();
+    const [reporter] = useState(() => createErrorReporter({ options, send: (report) => void reportClientError(report) }));
+    useEffect(() => reporter.setSignedIn(status === 'authenticated'), [reporter, status]);
+    useEffect(() => reporter.install(queryClient, window), [reporter, queryClient]);
+    return _jsx(ErrorReportingContext.Provider, { value: reporter, children: children });
+}
+/**
+ * Keeps the reporter's route current, for reports that don't know theirs.
+ * AppShell renders it only while reporting is on: the router's matches
+ * need a data router (createBrowserRouter), which reporting then needs too.
+ */
+export function ReportRoutePattern({ reporter }) {
+    const pattern = useRoutePattern();
+    useEffect(() => reporter.setRoute(pattern), [reporter, pattern]);
+    return null;
+}