@ciridae/ui 1.0.2 → 1.0.4

package/dist/app/auth.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/** Renders children for a signed-in session and sends everyone else to the auth service. */
+export declare function RequireSignIn({ children, loading, }: {
+    children: ReactNode;
+    loading?: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+/** Where the auth service returns the reader; finishes sign-in and goes back to where they were. */
+export declare function SignInCallbackPage({ loading }: {
+    loading?: ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null;

package/dist/app/auth.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseSameOriginPath } from "@ciridae/auth/client";
+import { useCiridaeAuth, useCompleteCiridaeSignIn } from "@ciridae/auth/react";
+import { useCallback, useEffect, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { CiridaeMark } from "../components/brand-icons.js";
+import { icon, Spinner } from "../components/icon.js";
+import { Stack } from "../components/layout.js";
+import { EmptyState } from "../components/navigation.js";
+function SignInLoading() {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const timeout = window.setTimeout(() => setVisible(true), 300);
+        return () => window.clearTimeout(timeout);
+    }, []);
+    if (!visible)
+        return null;
+    return (_jsxs(Stack, { role: "status", "aria-label": "Signing in", gap: "16", style: { minHeight: "100dvh", alignItems: "center", justifyContent: "center" }, children: [_jsx(CiridaeMark, { className: icon({ size: "display" }) }), _jsx(Spinner, {})] }));
+}
+/** Renders children for a signed-in session and sends everyone else to the auth service. */
+export function RequireSignIn({ children, loading = _jsx(SignInLoading, {}), }) {
+    const { auth, session } = useCiridaeAuth();
+    const signInUrl = session.status === "signedOut"
+        ? auth.getSignInUrl(window.location.pathname + window.location.search)
+        : null;
+    useEffect(() => {
+        if (signInUrl)
+            window.location.assign(signInUrl);
+    }, [signInUrl]);
+    if (session.status === "signedIn")
+        return children;
+    if (session.status === "unavailable" || (session.status === "signedOut" && !signInUrl)) {
+        return _jsx(EmptyState, { title: "Sign-in unavailable" });
+    }
+    return loading;
+}
+const signInFailures = {
+    failed: "Sign-in failed",
+    missingToken: "No sign-in session found",
+    authUnavailable: "Sign-in unavailable",
+};
+/** Where the auth service returns the reader; finishes sign-in and goes back to where they were. */
+export function SignInCallbackPage({ loading = _jsx(SignInLoading, {}) }) {
+    const navigate = useNavigate();
+    const parameters = new URLSearchParams(useLocation().search);
+    const onComplete = useCallback((path) => void navigate(path, { replace: true }), [navigate]);
+    const state = useCompleteCiridaeSignIn({
+        customToken: parameters.get("customToken"),
+        onComplete,
+        redirectPath: parseSameOriginPath(parameters.get("redirect_path")),
+    });
+    const failure = signInFailures[state.status];
+    useEffect(() => {
+        if (!failure)
+            return;
+        const timeout = window.setTimeout(() => void navigate("/", { replace: true }), 3000);
+        return () => window.clearTimeout(timeout);
+    }, [failure, navigate]);
+    return failure ? _jsx(EmptyState, { title: failure }) : loading;
+}

package/dist/app/error-boundary.d.ts

@@ -0,0 +1,18 @@
+import { CiridaeTelemetryContext } from "@ciridae/telemetry/react";
+import { Component, type ContextType, type ErrorInfo, type ReactNode } from "react";
+type ErrorBoundaryState = {
+    hasError: boolean;
+    errorId: string | null;
+};
+/** Reports a render crash to Sentry and PostHog and offers a reload instead of a blank page. */
+export declare class AppErrorBoundary extends Component<{
+    children: ReactNode;
+}, ErrorBoundaryState> {
+    static contextType: typeof CiridaeTelemetryContext;
+    context: ContextType<typeof CiridaeTelemetryContext>;
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/app/error-boundary.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CiridaeTelemetryContext } from "@ciridae/telemetry/react";
+import { WarningCircleIcon } from "@phosphor-icons/react";
+import { Component } from "react";
+import { Button } from "../components/button.js";
+import { CopyableId } from "../components/copyable-id.js";
+import { icon } from "../components/icon.js";
+import { Cluster, Stack } from "../components/layout.js";
+import { EmptyState } from "../components/navigation.js";
+import { captureExceptionInSentry } from "./sentry.js";
+/** Reports a render crash to Sentry and PostHog and offers a reload instead of a blank page. */
+export class AppErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: false, errorId: null };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true, errorId: null };
+    }
+    componentDidCatch(error, info) {
+        const componentStack = info.componentStack ?? "";
+        void captureExceptionInSentry(error, componentStack).then((errorId) => {
+            if (errorId)
+                this.setState({ errorId });
+        });
+        const telemetry = this.context;
+        if (!telemetry)
+            return;
+        if (telemetry.isInitialized()) {
+            telemetry.captureException(error, { componentStack });
+            return;
+        }
+        // A crash on first render lands before PostHog starts, so it waits until it has.
+        const unsubscribe = telemetry.subscribeToInitialization(() => {
+            unsubscribe();
+            telemetry.captureException(error, { componentStack });
+        });
+    }
+    render() {
+        if (!this.state.hasError)
+            return this.props.children;
+        return (_jsx(EmptyState, { icon: _jsx(WarningCircleIcon, { className: icon({ size: "large", tone: "danger" }), weight: "fill" }), title: "Something went wrong", action: _jsxs(Stack, { gap: "8", children: [this.state.errorId && _jsx(CopyableId, { label: "Error ID", value: this.state.errorId }), _jsxs(Cluster, { gap: "8", children: [_jsx(Button, { onClick: () => window.location.reload(), children: "Reload" }), _jsx(Button, { variant: "ghost", nativeButton: false, render: _jsx("a", { href: "https://statuspage.incident.io/ciridae", target: "_blank", rel: "noreferrer" }), children: "Status page" })] })] }) }));
+    }
+}
+AppErrorBoundary.contextType = CiridaeTelemetryContext;

package/dist/app/feedback.d.ts

@@ -0,0 +1,12 @@
+/** The Crucible project environment whose feedback inbox receives this app's feedback. */
+export type FeedbackScope = {
+    apiUrl: string;
+    projectId: string;
+    environment: string;
+};
+/** Sends feedback about the app and follows up on earlier submissions. */
+export declare function FeedbackDialog({ scope, open, onOpenChange, }: {
+    scope: FeedbackScope;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element | null;

package/dist/app/feedback.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCiridaeAuth } from "@ciridae/auth/react";
+import { useCiridaeTelemetry } from "@ciridae/telemetry/react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { CopyableId } from "../components/copyable-id.js";
+import { FeedbackSheet, formatFeedbackDescription, } from "../components/feedback-sheet.js";
+import { useToast } from "../components/toast.js";
+import { createFeedbackClient } from "../feedback/client.js";
+import { feedbackMaxLengths } from "../feedback/contract.js";
+import { errorTraceId, reportedInlineMeta } from "./request-errors.js";
+const feedbackTypeByKind = {
+    wrong: "bug",
+    idea: "feature",
+    question: "general",
+};
+/** Sends feedback about the app and follows up on earlier submissions. */
+export function FeedbackDialog({ scope, open, onOpenChange, }) {
+    const { auth, session } = useCiridaeAuth();
+    const user = session.status === "signedIn" || session.status === "signingOut" ? session.user : null;
+    const { apiUrl, projectId, environment } = scope;
+    const client = useMemo(() => createFeedbackClient({
+        baseUrl: `${apiUrl.replace(/\/$/, "")}/v1/projects/${encodeURIComponent(projectId)}/environments/${encodeURIComponent(environment)}`,
+        getBearerToken: async () => {
+            const token = await auth.getAccessToken();
+            if (!token)
+                throw new Error("Sign in again to send feedback.");
+            return token;
+        },
+    }), [auth, apiUrl, projectId, environment]);
+    const queryClient = useQueryClient();
+    const toast = useToast();
+    const telemetry = useCiridaeTelemetry();
+    const [idempotencyKey, setIdempotencyKey] = useState(() => crypto.randomUUID());
+    const [openItemId, setOpenItemId] = useState(null);
+    const queryKey = ["feedback", user?.uid ?? ""];
+    const items = useQuery({
+        meta: reportedInlineMeta,
+        queryKey,
+        queryFn: ({ signal }) => client.list({ signal }),
+        enabled: open && user !== null,
+        retry: false,
+    });
+    const item = useQuery({
+        meta: reportedInlineMeta,
+        queryKey: [...queryKey, openItemId],
+        queryFn: ({ signal }) => client.get(openItemId ?? "", { signal }),
+        enabled: openItemId !== null,
+        retry: false,
+    });
+    // Resolves once the refetched list and item carry the change, so the sheet never shows stale.
+    const refresh = () => queryClient.invalidateQueries({ queryKey });
+    const create = useMutation({
+        meta: reportedInlineMeta,
+        mutationFn: (values) => {
+            const type = feedbackTypeByKind[values.kind];
+            return client.create({
+                type,
+                subject: subjectFromMessage(values.whatHappened),
+                description: formatFeedbackDescription(values),
+                urgency: "normal",
+            }, { idempotencyKey, files: values.attachments });
+        },
+        onSuccess: (createdFeedback, values) => {
+            telemetry.capture("feedback_submitted", {
+                source: "app_shell",
+                type: feedbackTypeByKind[values.kind],
+                urgency: createdFeedback.urgency,
+            });
+            void refresh();
+            toast.add({ variant: "success", title: "Feedback sent" });
+            setIdempotencyKey(crypto.randomUUID());
+        },
+    });
+    const reply = useMutation({
+        meta: reportedInlineMeta,
+        mutationFn: ({ feedbackId, body }) => client.createMessage(feedbackId, body),
+        onSuccess: () => {
+            toast.add({ variant: "success", title: "Reply sent" });
+            return refresh();
+        },
+    });
+    const withdraw = useMutation({
+        meta: reportedInlineMeta,
+        mutationFn: (feedbackId) => client.withdraw(feedbackId),
+        onSuccess: () => refresh(),
+    });
+    if (!user)
+        return null;
+    return (_jsx(FeedbackSheet, { open: open, onOpenChange: onOpenChange, 
+        // The page the sheet is over; it cannot change while the sheet is open.
+        where: {
+            label: document.title || "This page",
+            detail: window.location.href,
+            href: window.location.href,
+        }, onSubmit: async (values) => {
+            const createdFeedback = await create.mutateAsync(values);
+            return { reference: createdFeedback.id };
+        }, errorDetail: (error) => {
+            const traceId = errorTraceId(error);
+            return traceId && _jsx(CopyableId, { label: "Error ID", value: traceId });
+        }, sent: {
+            items: loadState(items),
+            onOpenItem: setOpenItemId,
+            item: openItemId === null ? undefined : loadState(item),
+            onReply: async (feedbackId, body) => {
+                await reply.mutateAsync({ feedbackId, body });
+            },
+            onWithdraw: async (feedbackId) => {
+                await withdraw.mutateAsync(feedbackId);
+            },
+        } }));
+}
+/** The query as the sheet reads it: loading until its first answer, then its data or failure. */
+function loadState(query) {
+    if (query.isPending)
+        return { status: "loading" };
+    if (query.isError)
+        return { status: "error", error: query.error, retry: () => void query.refetch() };
+    return { status: "loaded", data: query.data };
+}
+/** The message's first line, within the contract's subject length. */
+function subjectFromMessage(message) {
+    const firstLine = message.split("\n", 1)[0] ?? message;
+    return firstLine.length > feedbackMaxLengths.subject
+        ? `${firstLine.slice(0, feedbackMaxLengths.subject - 1)}…`
+        : firstLine;
+}

package/dist/app/index.d.ts

@@ -0,0 +1,8 @@
+/** Opt-in integrations for Ciridae apps. The standalone UI/frame does not load these peers. */
+export { RequireSignIn, SignInCallbackPage } from "./auth.js";
+export { AppErrorBoundary } from "./error-boundary.js";
+export { FeedbackDialog, type FeedbackScope } from "./feedback.js";
+export { errorMessage, errorStatus, errorTraceId, QueryContent, reportedInline, reportedInlineMeta, requestErrorDescription, RequestErrorToasts, RequestFieldError, requestErrorToast, withResponseDetails, } from "./request-errors.js";
+export { initializeSentry, setSentryOrganization } from "./sentry.js";
+export { AppTelemetryProvider } from "./telemetry.js";
+export { PageTrail } from "./trail.js";

package/dist/app/index.js

@@ -0,0 +1,8 @@
+/** Opt-in integrations for Ciridae apps. The standalone UI/frame does not load these peers. */
+export { RequireSignIn, SignInCallbackPage } from "./auth.js";
+export { AppErrorBoundary } from "./error-boundary.js";
+export { FeedbackDialog } from "./feedback.js";
+export { errorMessage, errorStatus, errorTraceId, QueryContent, reportedInline, reportedInlineMeta, requestErrorDescription, RequestErrorToasts, RequestFieldError, requestErrorToast, withResponseDetails, } from "./request-errors.js";
+export { initializeSentry, setSentryOrganization } from "./sentry.js";
+export { AppTelemetryProvider } from "./telemetry.js";
+export { PageTrail } from "./trail.js";

package/dist/app/request-errors.d.ts

@@ -0,0 +1,63 @@
+import { type ReactNode } from "react";
+import { type ToastOptions } from "../components/toast.js";
+/** Normalize an unvalidated generated-client failure at the HTTP boundary. */
+export declare function withResponseDetails(error: unknown, response: Response | undefined): Error;
+/** The failed request's HTTP status, when it got a response. */
+export declare function errorStatus(error: unknown): number | null;
+/** The failed request's trace ID, which support looks the request up by. */
+export declare function errorTraceId(error: unknown): string | null;
+/** Human-readable message from a normalized request failure or another Error. */
+export declare function errorMessage(error: unknown, fallback: string): string;
+/**
+ * What a failed request's notice says under its title: the request's message when the title does
+ * not already say it, and its error ID to copy for support.
+ */
+export declare function requestErrorDescription(error: unknown, title?: string): ReactNode;
+/** An error toast for a failed request, carrying its error ID to copy for support. */
+export declare function requestErrorToast(error: unknown, title?: string): ToastOptions;
+/**
+ * The `meta` of a query or mutation whose failure is reported where it is used: a banner or field
+ * error on screen names it, so `RequestErrorToasts` does not toast it as well.
+ */
+export declare const reportedInlineMeta: {
+    reportedInline: boolean;
+};
+/** Built options, such as a generated client's, marked with `reportedInlineMeta`. */
+export declare function reportedInline<Options extends {
+    meta?: Record<string, unknown>;
+}>(options: Options): Options;
+/**
+ * Toasts a failed query or mutation with the request's error ID, unless something on screen
+ * reports it: a mounted query or a mutation whose options are wrapped in `reportedInline`. A page
+ * shows its own query failures in place and a form its own save failures, so the toast is only for
+ * a failure nothing on screen owns. An app can also exempt expected query errors such as an empty
+ * metrics state.
+ */
+export declare function RequestErrorToasts({ isExpectedQueryError, }: {
+    isExpectedQueryError?: (error: unknown) => boolean;
+}): null;
+/**
+ * A query's three states in place: its loading placeholder, an error banner titled
+ * `unavailableTitle` with the request's message and error ID, or its loaded data. Build the query
+ * with `reportedInline` so the failure is not toasted as well. Data loaded before a failed refetch
+ * stays shown under the banner.
+ */
+export declare function QueryContent<Data>({ query, loading, unavailableTitle, children, }: {
+    query: {
+        data: Data | undefined;
+        isError: boolean;
+        error: unknown;
+    };
+    /** Drawn at the loaded content's size, such as a table or list with its `loading` prop. */
+    loading: ReactNode;
+    unavailableTitle: string;
+    children: (data: Data) => ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+/**
+ * A failed request's message, or `fallback` when it has none, as a form's field error, with its
+ * error ID to copy for support. For a mutation built with `reportedInline`.
+ */
+export declare function RequestFieldError({ error, fallback }: {
+    error: unknown;
+    fallback: string;
+}): import("react").JSX.Element;

package/dist/app/request-errors.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
+import { CopyableId } from "../components/copyable-id.js";
+import { FieldError } from "../components/form-layout.js";
+import { Stack } from "../components/layout.js";
+import { StatusBanner } from "../components/status-banner.js";
+import { useToast } from "../components/toast.js";
+class RequestError extends Error {
+    constructor(message, status, traceId) {
+        super(message);
+        this.status = status;
+        this.traceId = traceId;
+    }
+}
+function messageFromResponse(error) {
+    if (error instanceof Error)
+        return error.message;
+    if (typeof error === "string")
+        return error;
+    if (!error || typeof error !== "object")
+        return "";
+    // OAuth endpoints answer with `{error, error_description}` rather than `detail`.
+    if ("error_description" in error && typeof error.error_description === "string")
+        return error.error_description;
+    if (!("detail" in error))
+        return "";
+    if (typeof error.detail === "string")
+        return error.detail;
+    // Domain conflicts answer with `detail: {error, message}`.
+    if (error.detail &&
+        typeof error.detail === "object" &&
+        "message" in error.detail &&
+        typeof error.detail.message === "string")
+        return error.detail.message;
+    if (!Array.isArray(error.detail))
+        return "";
+    return error.detail
+        .map((item) => item && typeof item === "object" && "msg" in item && typeof item.msg === "string"
+        ? item.msg
+        : "")
+        .filter(Boolean)
+        .join("; ");
+}
+/** Normalize an unvalidated generated-client failure at the HTTP boundary. */
+export function withResponseDetails(error, response) {
+    if (!response && error instanceof Error)
+        return error;
+    return new RequestError(messageFromResponse(error), response?.status ?? null, response?.headers.get("X-Trace-ID") ?? null);
+}
+/** The failed request's HTTP status, when it got a response. */
+export function errorStatus(error) {
+    if (error instanceof RequestError)
+        return error.status;
+    return error instanceof Error && "status" in error && typeof error.status === "number"
+        ? error.status
+        : null;
+}
+/** The failed request's trace ID, which support looks the request up by. */
+export function errorTraceId(error) {
+    if (error instanceof RequestError)
+        return error.traceId;
+    return error instanceof Error && "errorId" in error && typeof error.errorId === "string"
+        ? error.errorId
+        : null;
+}
+/** Human-readable message from a normalized request failure or another Error. */
+export function errorMessage(error, fallback) {
+    return error instanceof Error && error.message ? error.message : fallback;
+}
+/**
+ * What a failed request's notice says under its title: the request's message when the title does
+ * not already say it, and its error ID to copy for support.
+ */
+export function requestErrorDescription(error, title) {
+    const traceId = errorTraceId(error);
+    const message = errorMessage(error, "");
+    const description = message && message !== title ? message : null;
+    return description || traceId ? (_jsxs(_Fragment, { children: [description, description && traceId && _jsx("br", {}), traceId && _jsx(CopyableId, { label: "Error ID", value: traceId })] })) : undefined;
+}
+/** An error toast for a failed request, carrying its error ID to copy for support. */
+export function requestErrorToast(error, title) {
+    const shownTitle = title ?? errorMessage(error, "Request failed.");
+    return {
+        variant: "error",
+        title: shownTitle,
+        description: requestErrorDescription(error, shownTitle),
+    };
+}
+/**
+ * The `meta` of a query or mutation whose failure is reported where it is used: a banner or field
+ * error on screen names it, so `RequestErrorToasts` does not toast it as well.
+ */
+export const reportedInlineMeta = { reportedInline: true };
+/** Built options, such as a generated client's, marked with `reportedInlineMeta`. */
+export function reportedInline(options) {
+    return { ...options, meta: { ...options.meta, ...reportedInlineMeta } };
+}
+function isReportedInline(meta) {
+    return meta?.reportedInline === true;
+}
+/**
+ * Toasts a failed query or mutation with the request's error ID, unless something on screen
+ * reports it: a mounted query or a mutation whose options are wrapped in `reportedInline`. A page
+ * shows its own query failures in place and a form its own save failures, so the toast is only for
+ * a failure nothing on screen owns. An app can also exempt expected query errors such as an empty
+ * metrics state.
+ */
+export function RequestErrorToasts({ isExpectedQueryError, }) {
+    // useToast returns a new object each render; a ref keeps the subscription from restarting.
+    const toastApi = useToast();
+    const toast = useRef(toastApi);
+    useEffect(() => {
+        toast.current = toastApi;
+    });
+    const queryClient = useQueryClient();
+    useEffect(() => {
+        const showError = (error) => {
+            toast.current.add(requestErrorToast(error));
+        };
+        // A polled query that keeps failing toasts once, when it starts failing, not on every poll.
+        const failingQueries = new Set();
+        const stopQueries = queryClient.getQueryCache().subscribe((event) => {
+            if (event.type !== "updated")
+                return;
+            if (event.action.type === "error" && !failingQueries.has(event.query.queryHash)) {
+                failingQueries.add(event.query.queryHash);
+                if (isExpectedQueryError?.(event.action.error))
+                    return;
+                // Any mounted reader that reports the failure in place owns it.
+                if (event.query.observers.some((observer) => isReportedInline(observer.options.meta)))
+                    return;
+                showError(event.action.error);
+            }
+            else if (event.action.type === "success") {
+                failingQueries.delete(event.query.queryHash);
+            }
+        });
+        const stopMutations = queryClient.getMutationCache().subscribe((event) => {
+            if (event.type !== "updated" || event.action.type !== "error")
+                return;
+            if (isReportedInline(event.mutation.options.meta))
+                return;
+            showError(event.action.error);
+        });
+        return () => {
+            stopQueries();
+            stopMutations();
+        };
+    }, [queryClient, isExpectedQueryError]);
+    return null;
+}
+/**
+ * A query's three states in place: its loading placeholder, an error banner titled
+ * `unavailableTitle` with the request's message and error ID, or its loaded data. Build the query
+ * with `reportedInline` so the failure is not toasted as well. Data loaded before a failed refetch
+ * stays shown under the banner.
+ */
+export function QueryContent({ query, loading, unavailableTitle, children, }) {
+    const failure = query.isError && (_jsx(StatusBanner, { tone: "danger", title: unavailableTitle, description: requestErrorDescription(query.error, unavailableTitle) }));
+    if (query.data === undefined)
+        return failure || loading;
+    return (_jsxs(_Fragment, { children: [failure, children(query.data)] }));
+}
+/**
+ * A failed request's message, or `fallback` when it has none, as a form's field error, with its
+ * error ID to copy for support. For a mutation built with `reportedInline`.
+ */
+export function RequestFieldError({ error, fallback }) {
+    const traceId = errorTraceId(error);
+    return (_jsxs(Stack, { gap: "4", children: [_jsx(FieldError, { children: errorMessage(error, fallback) }), traceId && _jsx(CopyableId, { label: "Error ID", value: traceId })] }));
+}

package/dist/app/sentry.d.ts

@@ -0,0 +1,18 @@
+import type { TelemetryUser } from "@ciridae/telemetry/client";
+export type SentryConfiguration = {
+    /** Reporting is off when the build has no DSN. */
+    dsn: string | undefined;
+    environment: string | undefined;
+    /** The commit the bundle was built from, so an error names the build it came from. */
+    release: string | undefined;
+    /** The API origin that receives trace headers. */
+    backendUrl: string | undefined;
+};
+/** Start Sentry before the first render so a crash during it is still reported. */
+export declare function initializeSentry(configuration: SentryConfiguration): void;
+export declare function setSentryUser(user: TelemetryUser | null): void;
+export declare function setSentryOrganization(organization: {
+    id: string;
+    displayName: string;
+} | null): void;
+export declare function captureExceptionInSentry(error: unknown, componentStack: string): Promise<string | null>;

package/dist/app/sentry.js

@@ -0,0 +1,52 @@
+let sentryModule = null;
+let enabled = false;
+/** Start Sentry before the first render so a crash during it is still reported. */
+export function initializeSentry(configuration) {
+    if (!configuration.dsn)
+        return;
+    enabled = true;
+    const { dsn, environment, release, backendUrl } = configuration;
+    withSentry((sentry) => {
+        const isProduction = environment === "prod";
+        sentry.init({
+            dsn,
+            environment,
+            release,
+            integrations: [
+                sentry.browserTracingIntegration(),
+                sentry.replayIntegration(),
+                sentry.httpClientIntegration(),
+            ],
+            replaysOnErrorSampleRate: 1,
+            replaysSessionSampleRate: isProduction ? 0 : 1,
+            tracesSampleRate: isProduction ? 0.1 : 1,
+            tracePropagationTargets: backendUrl
+                ? [new URL(backendUrl, window.location.origin).origin]
+                : [],
+        });
+    });
+}
+export function setSentryUser(user) {
+    withSentry((sentry) => sentry.setUser(user
+        ? { id: user.id, email: user.email ?? undefined, username: user.name ?? undefined }
+        : null));
+}
+export function setSentryOrganization(organization) {
+    withSentry((sentry) => {
+        sentry.setContext("organization", organization);
+        sentry.setTag("organization_id", organization?.id);
+    });
+}
+export function captureExceptionInSentry(error, componentStack) {
+    return withSentry((sentry) => sentry.captureException(error, { contexts: { react: { componentStack } } }));
+}
+// Sentry loads on first use so it stays out of the first paint.
+function withSentry(use) {
+    if (!enabled)
+        return Promise.resolve(null);
+    sentryModule ?? (sentryModule = import("@sentry/react"));
+    return sentryModule.then(use).catch((error) => {
+        console.error("Sentry failed to load", error);
+        return null;
+    });
+}

package/dist/app/telemetry.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+import type { CiridaeTelemetry } from "@ciridae/telemetry/client";
+/** Identifies the signed-in reader to PostHog and Sentry, and clears them on sign-out. */
+export declare function AppTelemetryProvider({ telemetry, children, }: {
+    telemetry: CiridaeTelemetry;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/app/telemetry.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCiridaeAuth } from "@ciridae/auth/react";
+import { CiridaeTelemetryProvider } from "@ciridae/telemetry/react";
+import { useEffect, useMemo } from "react";
+import { useLocation } from "react-router-dom";
+import { setSentryUser } from "./sentry.js";
+/** Identifies the signed-in reader to PostHog and Sentry, and clears them on sign-out. */
+export function AppTelemetryProvider({ telemetry, children, }) {
+    const { session } = useCiridaeAuth();
+    const { pathname } = useLocation();
+    const user = useMemo(() => {
+        if (session.status === "signedIn" || session.status === "signingOut") {
+            return {
+                id: session.user.uid,
+                name: session.user.displayName,
+                email: session.user.email,
+                emailVerified: session.user.emailVerified,
+            };
+        }
+        // Auth that failed to load leaves no one signed in, so an earlier identity is cleared too.
+        return session.status === "signedOut" || session.status === "unavailable" ? null : undefined;
+    }, [session]);
+    useEffect(() => {
+        if (user !== undefined)
+            setSentryUser(user);
+    }, [user]);
+    return (_jsx(CiridaeTelemetryProvider, { pathname: pathname, telemetry: telemetry, user: user, children: children }));
+}

package/dist/app/trail.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/** A page's breadcrumbs for `AppFrame`'s title: links to where it sits, then the page itself. */
+export declare function PageTrail({ parents, children, }: {
+    parents?: readonly {
+        label: string;
+        to: string;
+    }[];
+    children: ReactNode;
+}): import("react").JSX.Element;