@-reddacted-/react-ui 0.2.3 → 0.3.0

package/dist/index.d.ts

@@ -11,10 +11,11 @@ export { defaultPalette } from "./theme/palette.js";
 export { createLocalThemeStore, createHttpThemeStore, type ThemeStore } from "./theme/store.js";
 export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard.js";
 export type { ThemeColors, ThemeDefinition, ThemeCatalog, ThemeDraft } from "./theme/types.js";
-export { PopupProvider } from "./popup/PopupProvider.js";
+export { PopupProvider, type InterceptFetchMode } from "./popup/PopupProvider.js";
+export { usePopup, type PopupApi } from "./popup/usePopup.js";
 export { PopupHost } from "./popup/PopupHost.js";
 export { createInterceptedFetch, type InterceptorHandlers } from "./popup/fetchInterceptor.js";
-export { createErrorRules, defaultMessages, type ErrorRules, type ErrorRulesOptions, type PopupMessages, } from "./popup/errorRules.js";
+export { createErrorRules, createGraphqlErrorRules, defaultMessages, type ErrorRules, type ErrorRulesOptions, type GraphqlError, type GraphqlErrorRulesOptions, type PopupMessages, type FetchErrorReport, } from "./popup/errorRules.js";
 export { fetchJson } from "./net/fetchJson.js";
 export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey } from "@-reddacted-/react-hooks";
 export type { AsyncStatus, AsyncStatus as LoadStatus, AsyncResult, ElementSize } from "@-reddacted-/react-hooks";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAEtF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC/F,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC1F,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAC9F,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,wBAAwB,EAC7B,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACpH,YAAY,EAAE,WAAW,EAAE,WAAW,IAAI,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.js

@@ -11,9 +11,10 @@ export { defaultPalette } from "./theme/palette.js";
 export { createLocalThemeStore, createHttpThemeStore } from "./theme/store.js";
 export { serializeColors, parseColors, isHexColor, randomHex } from "./theme/clipboard.js";
 export { PopupProvider } from "./popup/PopupProvider.js";
+export { usePopup } from "./popup/usePopup.js";
 export { PopupHost } from "./popup/PopupHost.js";
 export { createInterceptedFetch } from "./popup/fetchInterceptor.js";
-export { createErrorRules, defaultMessages, } from "./popup/errorRules.js";
+export { createErrorRules, createGraphqlErrorRules, defaultMessages, } from "./popup/errorRules.js";
 export { fetchJson } from "./net/fetchJson.js";
 // Réexportés depuis react-hooks : les appelants n'ont pas à connaître le découpage.
 export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey } from "@-reddacted-/react-hooks";

package/dist/popup/PopupProvider.d.ts

@@ -1,9 +1,19 @@
 import type { ReactNode } from "react";
-import type { ErrorRulesOptions } from "./errorRules.js";
-type PopupProviderProps = ErrorRulesOptions & {
+import type { FetchErrorReport, GraphqlErrorRulesOptions } from "./errorRules.js";
+/** Which `window.fetch` failures raise a popup on their own; `false` leaves fetch untouched. */
+export type InterceptFetchMode = false | "rest" | "graphql";
+type PopupProviderProps = GraphqlErrorRulesOptions & {
     children: ReactNode;
     closeLabel?: string;
+    /**
+     * Installs a `window.fetch` interceptor that raises popups by itself: `"rest"` reads HTTP
+     * statuses, `"graphql"` also reads the `errors` array on `graphqlPaths`. Off by default.
+     * Intercepted messages clear as soon as the next request starts; pushed ones stay.
+     */
+    interceptFetch?: InterceptFetchMode;
+    /** Called for every intercepted failure, with the method, URL and status behind it. */
+    onReport?: (report: FetchErrorReport) => void;
 };
-export declare function PopupProvider({ children, closeLabel, ...ruleOptions }: PopupProviderProps): import("react").JSX.Element;
+export declare function PopupProvider({ children, closeLabel, interceptFetch, onReport, ...ruleOptions }: PopupProviderProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=PopupProvider.d.ts.map

package/dist/popup/PopupProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupProvider.d.ts","sourceRoot":"","sources":["../../src/popup/PopupProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,iBAAiB,CAAA;AAMpE,KAAK,kBAAkB,GAAG,iBAAiB,GAAG;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,EAAE,kBAAkB,+BAkCzF"}
+{"version":3,"file":"PopupProvider.d.ts","sourceRoot":"","sources":["../../src/popup/PopupProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AAOjF,gGAAgG;AAChG,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAE3D,KAAK,kBAAkB,GAAG,wBAAwB,GAAG;IACnD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC9C,CAAA;AAKD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAsB,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,EAAE,kBAAkB,+BAyD3H"}

package/dist/popup/PopupProvider.js

@@ -1,28 +1,47 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { createErrorRules } from "./errorRules.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createErrorRules, createGraphqlErrorRules } from "./errorRules.js";
 import { createInterceptedFetch } from "./fetchInterceptor.js";
 import { PopupHost } from "./PopupHost.js";
-export function PopupProvider({ children, closeLabel, ...ruleOptions }) {
-    const [messages, setMessages] = useState([]);
-    // Les options arrivent en littéraux : les garder dans un ref évite de réinstaller
-    // l'interception à chaque rendu du parent.
-    const rulesRef = useRef(null);
-    if (rulesRef.current === null)
-        rulesRef.current = createErrorRules(ruleOptions);
+import { PopupContext } from "./usePopup.js";
+const addMessage = (message) => (current) => current.includes(message) ? current : [...current, message];
+export function PopupProvider({ children, closeLabel, interceptFetch = false, onReport, ...ruleOptions }) {
+    const [fetchMessages, setFetchMessages] = useState([]);
+    const [pushedMessages, setPushedMessages] = useState([]);
+    // L'interception ne s'installe qu'une fois : le callback, lui, peut changer d'un rendu à
+    // l'autre sans avoir à la réinstaller.
+    const reportRef = useRef(onReport);
+    reportRef.current = onReport;
+    // Options arrive as literals: reading them through a ref keeps the interceptor from being
+    // reinstalled on every parent render.
+    const ruleOptionsRef = useRef(ruleOptions);
+    ruleOptionsRef.current = ruleOptions;
     useEffect(() => {
+        if (!interceptFetch)
+            return;
         const original = window.fetch;
         if (original.__popupIntercepted)
             return;
+        const rules = interceptFetch === "graphql"
+            ? createGraphqlErrorRules(ruleOptionsRef.current)
+            : createErrorRules(ruleOptionsRef.current);
         const intercepted = createInterceptedFetch(original, {
-            onRequestStart: () => setMessages(current => (current.length === 0 ? current : [])),
-            onError: message => setMessages(current => (current.includes(message) ? current : [...current, message])),
-        }, rulesRef.current);
+            onRequestStart: () => setFetchMessages(current => (current.length === 0 ? current : [])),
+            onError: message => setFetchMessages(addMessage(message)),
+            onReport: report => reportRef.current?.(report),
+        }, rules);
         intercepted.__popupIntercepted = true;
         window.fetch = intercepted;
         return () => {
             window.fetch = original;
         };
+    }, [interceptFetch]);
+    const pushError = useCallback((message) => setPushedMessages(addMessage(message)), []);
+    const dismiss = useCallback(() => {
+        setFetchMessages([]);
+        setPushedMessages([]);
     }, []);
-    return (_jsxs(_Fragment, { children: [children, _jsx(PopupHost, { messages: messages, onDismiss: () => setMessages([]), closeLabel: closeLabel })] }));
+    const api = useMemo(() => ({ pushError, dismiss }), [pushError, dismiss]);
+    const messages = useMemo(() => [...new Set([...pushedMessages, ...fetchMessages])], [pushedMessages, fetchMessages]);
+    return (_jsxs(PopupContext.Provider, { value: api, children: [children, _jsx(PopupHost, { messages: messages, onDismiss: dismiss, closeLabel: closeLabel })] }));
 }

package/dist/popup/errorRules.d.ts

@@ -6,6 +6,17 @@ export type PopupMessages = {
     requestFailed: (status: number) => string;
 };
 export declare const defaultMessages: PopupMessages;
+/** What a failed request carried, for callers that record failures instead of only showing them. */
+export type FetchErrorReport = {
+    /** The message shown to the user, already humanised by the rules. */
+    message: string;
+    method: string;
+    url: string;
+    /** Absent when the request never reached a response. */
+    status?: number;
+    /** The thrown cause, when the failure was a network one. */
+    cause?: unknown;
+};
 export type ErrorRulesOptions = {
     /** Statuses that never raise a popup. Form input errors by default. */
     ignoredStatuses?: number[];
@@ -15,9 +26,26 @@ export type ErrorRulesOptions = {
 };
 export type ErrorRules = {
     networkFailureMessage: string;
-    shouldReportResponse: (res: Response) => boolean;
     shouldReportFailure: (cause: unknown) => boolean;
-    describeResponse: (res: Response) => Promise<string>;
+    /** The messages a response should raise; empty when it is not worth a popup. */
+    inspectResponse: (res: Response) => Promise<string[]>;
 };
 export declare function createErrorRules(options?: ErrorRulesOptions): ErrorRules;
+/** One entry of a GraphQL response's `errors` array. */
+export type GraphqlError = {
+    message: string;
+    path?: ReadonlyArray<string | number>;
+    extensions?: Record<string, unknown>;
+};
+export type GraphqlErrorRulesOptions = ErrorRulesOptions & {
+    /** Paths whose responses are read for a GraphQL `errors` array. */
+    graphqlPaths?: string[];
+    /** Turns one GraphQL error into the popup sentence; `null` keeps it silent. Defaults to its message. */
+    describeGraphqlError?: (error: GraphqlError) => string | null;
+};
+/**
+ * GraphQL reports failures in the body, usually with a 200: on the GraphQL paths the `errors`
+ * array wins over the status, and the HTTP rules only take over when the body carries none.
+ */
+export declare function createGraphqlErrorRules(options?: GraphqlErrorRulesOptions): ErrorRules;
 //# sourceMappingURL=errorRules.d.ts.map

package/dist/popup/errorRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorRules.d.ts","sourceRoot":"","sources":["../../src/popup/errorRules.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,aAM7B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,oBAAoB,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,OAAO,CAAA;IAChD,mBAAmB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAA;IAChD,gBAAgB,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,CAAC,CAAA;CACrD,CAAA;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,iBAAsB,GAAG,UAAU,CAkC5E"}
+{"version":3,"file":"errorRules.d.ts","sourceRoot":"","sources":["../../src/popup/errorRules.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,aAM7B,CAAA;AAED,oGAAoG;AACpG,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qEAAqE;IACrE,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,mBAAmB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAA;IAChD,gFAAgF;IAChF,eAAe,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;CACtD,CAAA;AAED,wBAAgB,gBAAgB,CAAC,OAAO,GAAE,iBAAsB,GAAG,UAAU,CA0B5E;AAED,wDAAwD;AACxD,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG,iBAAiB,GAAG;IACzD,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,wGAAwG;IACxG,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,GAAG,IAAI,CAAA;CAC9D,CAAA;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,OAAO,GAAE,wBAA6B,GAAG,UAAU,CAmB1F"}

package/dist/popup/errorRules.js

@@ -9,36 +9,79 @@ export function createErrorRules(options = {}) {
     const ignoredStatuses = options.ignoredStatuses ?? [400, 422];
     const authProbePaths = options.authProbePaths ?? ["/auth/me"];
     const messages = { ...defaultMessages, ...options.messages };
-    const isAuthProbe = (url) => {
-        const matches = (path) => {
-            try {
-                return new URL(url).pathname.endsWith(path);
-            }
-            catch {
-                return url.includes(path);
-            }
-        };
-        return authProbePaths.some(matches);
+    const isAuthProbe = (url) => matchesPath(url, authProbePaths);
+    const shouldReportResponse = (res) => {
+        if (res.ok)
+            return false;
+        if (ignoredStatuses.includes(res.status))
+            return false;
+        if (res.status === 401 && isAuthProbe(res.url))
+            return false;
+        return true;
     };
     return {
         networkFailureMessage: messages.networkFailure,
-        shouldReportResponse(res) {
-            if (res.ok)
-                return false;
-            if (ignoredStatuses.includes(res.status))
-                return false;
-            if (res.status === 401 && isAuthProbe(res.url))
-                return false;
-            return true;
-        },
         shouldReportFailure(cause) {
             return !(cause instanceof Error && cause.name === "AbortError");
         },
-        async describeResponse(res) {
-            return (await readBodyMessage(res)) ?? genericMessage(res.status, messages);
+        async inspectResponse(res) {
+            if (!shouldReportResponse(res))
+                return [];
+            return [(await readBodyMessage(res)) ?? genericMessage(res.status, messages)];
         },
     };
 }
+/**
+ * GraphQL reports failures in the body, usually with a 200: on the GraphQL paths the `errors`
+ * array wins over the status, and the HTTP rules only take over when the body carries none.
+ */
+export function createGraphqlErrorRules(options = {}) {
+    const httpRules = createErrorRules(options);
+    const graphqlPaths = options.graphqlPaths ?? ["/graphql"];
+    const describe = options.describeGraphqlError ?? (error => error.message);
+    return {
+        ...httpRules,
+        async inspectResponse(res) {
+            if (!matchesPath(res.url, graphqlPaths))
+                return httpRules.inspectResponse(res);
+            const errors = await readGraphqlErrors(res);
+            if (errors === null)
+                return httpRules.inspectResponse(res);
+            // An error the caller chose to silence must not resurface as a generic message.
+            const messages = errors.map(describe).map(message => message?.trim() ?? "").filter(message => message !== "");
+            return [...new Set(messages)];
+        },
+    };
+}
+function matchesPath(url, paths) {
+    return paths.some(path => {
+        try {
+            return new URL(url).pathname.endsWith(path);
+        }
+        catch {
+            return url.includes(path);
+        }
+    });
+}
+/** The errors a GraphQL body carries, or `null` when it carries none (or is not GraphQL JSON). */
+async function readGraphqlErrors(res) {
+    try {
+        const body = await res.clone().json();
+        // A server that accepts batching answers with an array of results.
+        const results = Array.isArray(body) ? body : [body];
+        const errors = results.flatMap(result => {
+            const list = result?.errors;
+            return Array.isArray(list) ? list.filter(isGraphqlError) : [];
+        });
+        return errors.length > 0 ? errors : null;
+    }
+    catch {
+        return null;
+    }
+}
+function isGraphqlError(value) {
+    return typeof value === "object" && value !== null && typeof value.message === "string";
+}
 async function readBodyMessage(res) {
     try {
         const body = (await res.clone().json());

package/dist/popup/fetchInterceptor.d.ts

@@ -1,7 +1,12 @@
-import type { ErrorRules } from "./errorRules.js";
+import type { ErrorRules, FetchErrorReport } from "./errorRules.js";
 export type InterceptorHandlers = {
     onRequestStart: () => void;
     onError: (message: string) => void;
+    /**
+     * Called for the same failures as `onError`, with what the request itself carried. A popup only
+     * needs a sentence; a caller that records failures needs the method, the URL and the status.
+     */
+    onReport?: (report: FetchErrorReport) => void;
 };
 export declare function createInterceptedFetch(original: typeof fetch, handlers: InterceptorHandlers, rules: ErrorRules): typeof fetch;
 //# sourceMappingURL=fetchInterceptor.d.ts.map

package/dist/popup/fetchInterceptor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetchInterceptor.d.ts","sourceRoot":"","sources":["../../src/popup/fetchInterceptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,OAAO,KAAK,EACtB,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,UAAU,GAChB,OAAO,KAAK,CAYd"}
+{"version":3,"file":"fetchInterceptor.d.ts","sourceRoot":"","sources":["../../src/popup/fetchInterceptor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAEnE,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC9C,CAAA;AAQD,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,OAAO,KAAK,EACtB,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,UAAU,GAChB,OAAO,KAAK,CAkBd"}

package/dist/popup/fetchInterceptor.js

@@ -1,15 +1,26 @@
+function describeRequest(input, init) {
+    if (typeof input === "string")
+        return { url: input, method: init?.method ?? "GET" };
+    if (input instanceof URL)
+        return { url: input.href, method: init?.method ?? "GET" };
+    return { url: input.url, method: init?.method ?? input.method ?? "GET" };
+}
 export function createInterceptedFetch(original, handlers, rules) {
     return async (input, init) => {
         handlers.onRequestStart();
         try {
             const res = await original(input, init);
-            if (rules.shouldReportResponse(res))
-                handlers.onError(await rules.describeResponse(res));
+            for (const message of await rules.inspectResponse(res)) {
+                handlers.onError(message);
+                handlers.onReport?.({ ...describeRequest(input, init), message, status: res.status });
+            }
             return res;
         }
         catch (cause) {
-            if (rules.shouldReportFailure(cause))
+            if (rules.shouldReportFailure(cause)) {
                 handlers.onError(rules.networkFailureMessage);
+                handlers.onReport?.({ ...describeRequest(input, init), message: rules.networkFailureMessage, cause });
+            }
             throw cause;
         }
     };

package/dist/popup/usePopup.d.ts

@@ -0,0 +1,9 @@
+export type PopupApi = {
+    /** Shows a message until the user closes the popup. Identical messages are shown once. */
+    pushError: (message: string) => void;
+    /** Closes the popup and forgets every message. */
+    dismiss: () => void;
+};
+export declare const PopupContext: import("react").Context<PopupApi | null>;
+export declare function usePopup(): PopupApi;
+//# sourceMappingURL=usePopup.d.ts.map

package/dist/popup/usePopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../src/popup/usePopup.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAAG;IACrB,0FAA0F;IAC1F,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,kDAAkD;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,0CAAuC,CAAA;AAEhE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}

package/dist/popup/usePopup.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+export const PopupContext = createContext(null);
+export function usePopup() {
+    const ctx = useContext(PopupContext);
+    if (!ctx)
+        throw new Error("usePopup must be used within PopupProvider");
+    return ctx;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@-reddacted-/react-ui",
-  "version": "0.2.3",
-  "description": "Theming system, Modal, Button, ColorPicker, NavBar and fetch error popups for React",
+  "version": "0.3.0",
+  "description": "Theming system, Modal, Button, ColorPicker, NavBar and error popups (imperative, REST or GraphQL fetch) for React",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/ColorPicker.d.ts

@@ -1,9 +0,0 @@
-import "./ColorPicker.css";
-interface ColorPickerProps {
-    value: string;
-    onChange: (value: string) => void;
-    className?: string;
-}
-export default function ColorPicker({ value, onChange, className }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/ColorPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,mBAAmB,CAAA;AAE1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA2FnF"}

package/dist/ColorPicker.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useLayoutEffect } from "react";
-import { HexColorPicker } from "react-colorful";
-import "./ColorPicker.css";
-const HEX_RE = /^#[0-9a-fA-F]{6}$/;
-const safe = (v) => (HEX_RE.test(v) ? v : "#000000");
-export default function ColorPicker({ value, onChange, className }) {
-    const [open, setOpen] = useState(false);
-    const [inputValue, setInputValue] = useState(value);
-    const [pos, setPos] = useState({ top: 0, left: 0 });
-    const [positioned, setPositioned] = useState(false);
-    const swatchRef = useRef(null);
-    const popoverRef = useRef(null);
-    useEffect(() => { setInputValue(value); }, [value]);
-    useLayoutEffect(() => {
-        if (!open || !popoverRef.current || !swatchRef.current) {
-            setPositioned(false);
-            return;
-        }
-        const pr = popoverRef.current.getBoundingClientRect();
-        const sr = swatchRef.current.getBoundingClientRect();
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const gap = 6;
-        const top = sr.bottom + gap + pr.height > vh
-            ? Math.max(4, sr.top - pr.height - gap)
-            : sr.bottom + gap;
-        const left = sr.left + pr.width > vw
-            ? Math.max(4, vw - pr.width - 8)
-            : sr.left;
-        setPos({ top, left });
-        setPositioned(true);
-    }, [open]);
-    const toggle = () => {
-        if (!open)
-            setInputValue(value);
-        setOpen(o => !o);
-    };
-    useEffect(() => {
-        if (!open)
-            return;
-        const handleMouseDown = (e) => {
-            if (!popoverRef.current?.contains(e.target) &&
-                !swatchRef.current?.contains(e.target))
-                setOpen(false);
-        };
-        document.addEventListener("mousedown", handleMouseDown);
-        return () => document.removeEventListener("mousedown", handleMouseDown);
-    }, [open]);
-    const handleHexInput = (e) => {
-        const v = e.target.value;
-        setInputValue(v);
-        if (HEX_RE.test(v))
-            onChange(v);
-    };
-    return (_jsxs("div", { className: `color-picker${className ? ` ${className}` : ""}`, children: [_jsx("button", { ref: swatchRef, type: "button", className: "color-picker__swatch", style: { background: safe(value) }, onClick: toggle, "aria-label": `Color: ${value}` }), open && (_jsxs("div", { ref: popoverRef, className: "color-picker__popover", style: {
-                    position: "fixed",
-                    top: pos.top,
-                    left: pos.left,
-                    visibility: positioned ? "visible" : "hidden",
-                }, onMouseDown: e => e.stopPropagation(), children: [_jsx(HexColorPicker, { color: safe(value), onChange: onChange }), _jsx("input", { type: "text", className: "color-picker__hex-input", value: inputValue, onChange: handleHexInput, maxLength: 7, spellCheck: false })] }))] }));
-}

package/dist/ConfirmDeleteButton.d.ts

@@ -1,11 +0,0 @@
-type Props = {
-    onConfirm: () => void;
-    label?: string;
-    confirmLabel?: string;
-    className?: string;
-    /** Delay in ms before the confirm state auto-resets (default: 10000) */
-    resetDelay?: number;
-};
-export default function ConfirmDeleteButton({ onConfirm, label, confirmLabel, className, resetDelay, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ConfirmDeleteButton.d.ts.map

package/dist/ConfirmDeleteButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfirmDeleteButton.d.ts","sourceRoot":"","sources":["../src/ConfirmDeleteButton.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,EACT,KAAgB,EAChB,YAA8B,EAC9B,SAAS,EACT,UAAmB,GACpB,EAAE,KAAK,2CA4BP"}

package/dist/ConfirmDeleteButton.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-export default function ConfirmDeleteButton({ onConfirm, label = "Delete", confirmLabel = "Are you sure?", className, resetDelay = 10000, }) {
-    const [confirming, setConfirming] = useState(false);
-    useEffect(() => {
-        if (!confirming)
-            return;
-        const timer = setTimeout(() => setConfirming(false), resetDelay);
-        return () => clearTimeout(timer);
-    }, [confirming, resetDelay]);
-    const handleClick = () => {
-        if (!confirming) {
-            setConfirming(true);
-            return;
-        }
-        onConfirm();
-    };
-    return (_jsx("button", { type: "button", onClick: handleClick, className: className, style: {
-            color: "var(--confirm-delete-danger-color, #e55)",
-            borderColor: "var(--confirm-delete-danger-color, #e55)",
-            background: confirming ? "var(--confirm-delete-danger-bg, rgba(220,50,50,0.15))" : undefined,
-        }, children: confirming ? confirmLabel : label }));
-}

package/dist/Modal.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-export declare function openModal(id: string): void;
-export declare function closeModal(id: string): void;
-type ModalProps = {
-    id: string;
-    width?: string | number;
-    height?: string | number;
-    children: ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    preventClose?: boolean;
-    ariaLabelledBy?: string;
-    ariaDescribedBy?: string;
-};
-export default function Modal({ id, width, height, children, className, style, preventClose, ariaLabelledBy, ariaDescribedBy, }: ModalProps): React.ReactPortal | null;
-export {};
-//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAgBtC,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,QAGnC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,QAEpC;AAED,KAAK,UAAU,GAAG;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAoB,EACpB,cAAc,EACd,eAAe,GAChB,EAAE,UAAU,4BA+KZ"}

package/dist/Modal.js

@@ -1,162 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-const listeners = new Map();
-function on(event, cb) {
-    if (!listeners.has(event))
-        listeners.set(event, new Set());
-    listeners.get(event).add(cb);
-    return () => listeners.get(event).delete(cb);
-}
-function emit(event, payload) {
-    listeners.get(event)?.forEach(cb => cb(payload));
-}
-export function openModal(id) {
-    emit("modal:closeAll");
-    emit("modal:open", id);
-}
-export function closeModal(id) {
-    emit("modal:close", id);
-}
-export default function Modal({ id, width, height, children, className, style, preventClose = false, ariaLabelledBy, ariaDescribedBy, }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const contentRef = useRef(null);
-    const lastFocusedEl = useRef(null);
-    const portalTarget = useRef(null);
-    useEffect(() => {
-        const offOpen = on("modal:open", (targetId) => {
-            if (targetId === id) {
-                lastFocusedEl.current = document.activeElement ?? null;
-                setIsOpen(true);
-            }
-        });
-        const offClose = on("modal:close", (targetId) => {
-            if (targetId === id)
-                setIsOpen(false);
-        });
-        const offCloseAll = on("modal:closeAll", () => setIsOpen(false));
-        return () => { offOpen(); offClose(); offCloseAll(); };
-    }, [id]);
-    useEffect(() => {
-        let el = document.getElementById("__modal-root__");
-        if (!el) {
-            el = document.createElement("div");
-            el.id = "__modal-root__";
-            document.body.appendChild(el);
-        }
-        portalTarget.current = el;
-    }, []);
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const prevOverflow = document.body.style.overflow;
-        const prevPadRight = document.body.style.paddingRight;
-        const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarW > 0)
-            document.body.style.paddingRight = `${scrollbarW}px`;
-        document.body.style.overflow = "hidden";
-        const to = setTimeout(() => {
-            const container = contentRef.current;
-            if (!container)
-                return;
-            const focusables = container.querySelectorAll('a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])');
-            (focusables[0] ?? container).focus();
-        }, 0);
-        const onKeyDown = (e) => {
-            if (e.key === "Escape" && !preventClose) {
-                closeModal(id);
-                return;
-            }
-            if (e.key !== "Tab")
-                return;
-            const container = contentRef.current;
-            if (!container)
-                return;
-            const focusables = Array.from(container.querySelectorAll('a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(el => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden"));
-            if (focusables.length === 0)
-                return;
-            const first = focusables[0];
-            const last = focusables[focusables.length - 1];
-            const active = document.activeElement;
-            if (e.shiftKey) {
-                if (active === first || !container.contains(active)) {
-                    last.focus();
-                    e.preventDefault();
-                }
-            }
-            else {
-                if (active === last || !container.contains(active)) {
-                    first.focus();
-                    e.preventDefault();
-                }
-            }
-        };
-        const onFocusIn = (e) => {
-            const container = contentRef.current;
-            if (!container)
-                return;
-            if (!container.contains(e.target))
-                container.focus();
-        };
-        document.addEventListener("keydown", onKeyDown);
-        document.addEventListener("focusin", onFocusIn);
-        return () => {
-            document.body.style.overflow = prevOverflow;
-            document.body.style.paddingRight = prevPadRight;
-            clearTimeout(to);
-            document.removeEventListener("keydown", onKeyDown);
-            document.removeEventListener("focusin", onFocusIn);
-            lastFocusedEl.current?.focus?.();
-            lastFocusedEl.current = null;
-        };
-    }, [isOpen, id, preventClose]);
-    if (!isOpen || !portalTarget.current)
-        return null;
-    const w = typeof width === "number" ? `${width}px` : width ?? undefined;
-    const h = typeof height === "number" ? `${height}px` : height ?? undefined;
-    const prefersReducedMotion = typeof window !== "undefined" &&
-        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
-    const contentStyles = {
-        position: "fixed",
-        inset: 0,
-        display: "grid",
-        placeItems: "center",
-        zIndex: 9999,
-        backdropFilter: "blur(2px)",
-        background: "rgba(0,0,0,0.35)",
-        animation: prefersReducedMotion ? "none" : "modalFade 150ms ease-out",
-    };
-    const cardStyles = {
-        maxWidth: "95vw",
-        maxHeight: "95vh",
-        width: w,
-        height: h,
-        overflow: "auto",
-        outline: "none",
-        background: "var(--modal-background, #1a1a1a)",
-        borderRadius: "10px",
-    };
-    const overlayStyles = {
-        position: "fixed",
-        inset: 0,
-        backdropFilter: "blur(2px)",
-        background: "rgba(0,0,0,0.35)",
-        zIndex: 9998,
-        animation: prefersReducedMotion ? "none" : "modalPop 160ms ease-out",
-    };
-    const innerWrapper = {
-        animation: prefersReducedMotion ? "none" : "modalPop 160ms ease-out",
-    };
-    const keyframes = (_jsx("style", { children: `
-      @keyframes modalFade {
-        from { opacity: 0; } to { opacity: 1; }
-      }
-      @keyframes modalPop {
-        from { opacity: 0; transform: translateY(4px) scale(0.98); }
-        to   { opacity: 1; transform: translateY(0) scale(1); }
-      }
-    ` }));
-    return createPortal(_jsxs(_Fragment, { children: [keyframes, _jsx("div", { "aria-hidden": "true", style: overlayStyles, onClick: () => { if (!preventClose)
-                    closeModal(id); } }), _jsx("div", { style: contentStyles, "aria-hidden": !isOpen, onMouseDown: e => { if (!preventClose && e.target === e.currentTarget)
-                    closeModal(id); }, children: _jsx("div", { style: innerWrapper, children: _jsx("div", { ref: contentRef, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, tabIndex: -1, className: className ?? "", style: { ...cardStyles, ...style }, onMouseDown: e => e.stopPropagation(), children: children }) }) })] }), portalTarget.current);
-}

package/dist/net/useDocumentTitle.d.ts

@@ -1,2 +0,0 @@
-export declare function useDocumentTitle(title: string | undefined, siteName: string, fallback?: string): void;
-//# sourceMappingURL=useDocumentTitle.d.ts.map

package/dist/net/useDocumentTitle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDocumentTitle.d.ts","sourceRoot":"","sources":["../../src/net/useDocumentTitle.ts"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,QAI9F"}

package/dist/net/useDocumentTitle.js

@@ -1,8 +0,0 @@
-import { useEffect } from "react";
-// Without this every page shares the title of index.html in the tab, the history
-// and the search results.
-export function useDocumentTitle(title, siteName, fallback) {
-    useEffect(() => {
-        document.title = title ? `${title} — ${siteName}` : (fallback ?? siteName);
-    }, [title, siteName, fallback]);
-}