@-reddacted-/react-ui 0.3.1 → 0.4.0

package/dist/components/Tooltip.js

@@ -0,0 +1,76 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { tooltipCss } from "../style/tooltipCss.js";
+import { useStyle } from "../style/useStyle.js";
+import { TooltipEngine } from "../tooltip/tooltipEngine.js";
+import { assignRef, getElementRef } from "../utils/childRef.js";
+import { isDev } from "../utils/isDev.js";
+const INTERACTIVE = "a[href], button, input, select, textarea, [tabindex]";
+export function Tooltip({ content, placement = "top", delay = 300, color, textColor, maxWidth, disabled = false, children, }) {
+    useStyle("tooltip", tooltipCss);
+    const [open, setOpen] = useState(false);
+    const [engine] = useState(() => new TooltipEngine(setOpen));
+    const anchorRef = useRef(null);
+    const child = Children.only(children);
+    const childProps = child.props;
+    const childRef = getElementRef(child);
+    const setAnchor = useCallback((node) => {
+        anchorRef.current = node;
+        assignRef(childRef, node);
+    }, [childRef]);
+    useLayoutEffect(() => {
+        engine.setLook({ placement, color, textColor, maxWidth });
+    }, [engine, placement, color, textColor, maxWidth]);
+    useEffect(() => {
+        if (disabled)
+            engine.hide();
+    }, [engine, disabled]);
+    useEffect(() => () => engine.hide(), [engine]);
+    useEffect(() => {
+        if (isDev() && !anchorRef.current) {
+            console.warn("Tooltip: the child did not receive the ref (use a DOM element or a forwardRef component).");
+        }
+    }, []);
+    useEffect(() => {
+        if (open && isDev() && engine.content.querySelector(INTERACTIVE)) {
+            console.warn("Tooltip: the content holds an interactive element, which can never be reached.");
+        }
+    }, [engine, open, content]);
+    const onPointerEnter = (event) => {
+        childProps.onPointerEnter?.(event);
+        if (!disabled && event.pointerType !== "touch")
+            engine.scheduleShow(event.currentTarget, delay);
+    };
+    const onPointerLeave = (event) => {
+        childProps.onPointerLeave?.(event);
+        if (event.pointerType !== "touch")
+            engine.hide();
+    };
+    const onPointerDown = (event) => {
+        childProps.onPointerDown?.(event);
+        if (!disabled && event.pointerType === "touch")
+            engine.showForTouch(event.currentTarget);
+    };
+    const onFocus = (event) => {
+        childProps.onFocus?.(event);
+        if (!disabled)
+            engine.show(event.currentTarget);
+    };
+    const onBlur = (event) => {
+        childProps.onBlur?.(event);
+        engine.hide();
+    };
+    const describedBy = open
+        ? [childProps["aria-describedby"], engine.id].filter(Boolean).join(" ")
+        : childProps["aria-describedby"];
+    return (_jsxs(_Fragment, { children: [cloneElement(child, {
+                ref: setAnchor,
+                "aria-describedby": describedBy,
+                onPointerEnter,
+                onPointerLeave,
+                onPointerDown,
+                onFocus,
+                onBlur,
+            }), createPortal(content, engine.content)] }));
+}

package/dist/components/drawerStore.d.ts

@@ -0,0 +1,11 @@
+export declare function openDrawer(id: string): void;
+export declare function closeDrawer(id: string): void;
+export declare function toggleDrawer(id: string): void;
+/** Reads whether drawer `id` is open by call, with bound `open` / `close` / `toggle`. */
+export declare function useDrawer(id: string): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+//# sourceMappingURL=drawerStore.d.ts.map

package/dist/components/drawerStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawerStore.d.ts","sourceRoot":"","sources":["../../src/components/drawerStore.ts"],"names":[],"mappings":"AAqBA,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAE3C;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAE5C;AAED,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAE7C;AAED,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG;IAAE,MAAM,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAYlH"}

package/dist/components/drawerStore.js

@@ -0,0 +1,40 @@
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+// Drawers opened by call, by id. Kept apart from Drawer.tsx so the component file
+// only exports components (react-refresh rule).
+const openIds = new Set();
+const listeners = new Set();
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+function setDrawerOpen(id, open) {
+    if (openIds.has(id) === open)
+        return;
+    if (open)
+        openIds.add(id);
+    else
+        openIds.delete(id);
+    listeners.forEach(listener => listener());
+}
+export function openDrawer(id) {
+    setDrawerOpen(id, true);
+}
+export function closeDrawer(id) {
+    setDrawerOpen(id, false);
+}
+export function toggleDrawer(id) {
+    setDrawerOpen(id, !openIds.has(id));
+}
+/** Reads whether drawer `id` is open by call, with bound `open` / `close` / `toggle`. */
+export function useDrawer(id) {
+    const getSnapshot = useCallback(() => openIds.has(id), [id]);
+    const isOpen = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    return useMemo(() => ({
+        isOpen,
+        open: () => openDrawer(id),
+        close: () => closeDrawer(id),
+        toggle: () => toggleDrawer(id),
+    }), [id, isOpen]);
+}

package/dist/components/paginationItems.d.ts

@@ -0,0 +1,18 @@
+export type PaginationItem = {
+    type: "page";
+    page: number;
+    current: boolean;
+} | {
+    type: "first" | "previous" | "next" | "last";
+    page: number;
+    disabled: boolean;
+} | {
+    type: "ellipsis";
+};
+/**
+ * Items to render for `page` of `total` (1-based): edges, previous / next, the first and
+ * last pages, `siblings` pages around the current one, and ellipses for the gaps.
+ * A gap of a single page shows that page instead of an ellipsis.
+ */
+export declare function getPaginationItems(page: number, total: number, siblings: number, showEdges: boolean): PaginationItem[];
+//# sourceMappingURL=paginationItems.d.ts.map

package/dist/components/paginationItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paginationItems.d.ts","sourceRoot":"","sources":["../../src/components/paginationItems.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GACtB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GACjF;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAA;AAExB;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,GAAG,cAAc,EAAE,CAyBtH"}

package/dist/components/paginationItems.js

@@ -0,0 +1,32 @@
+/**
+ * Items to render for `page` of `total` (1-based): edges, previous / next, the first and
+ * last pages, `siblings` pages around the current one, and ellipses for the gaps.
+ * A gap of a single page shows that page instead of an ellipsis.
+ */
+export function getPaginationItems(page, total, siblings, showEdges) {
+    const last = Math.max(1, total);
+    const current = Math.min(Math.max(1, page), last);
+    const shown = new Set([1, last]);
+    for (let p = current - siblings; p <= current + siblings; p++) {
+        if (p >= 1 && p <= last)
+            shown.add(p);
+    }
+    const pages = [...shown].sort((a, b) => a - b);
+    const items = [];
+    if (showEdges)
+        items.push({ type: "first", page: 1, disabled: current === 1 });
+    items.push({ type: "previous", page: current - 1, disabled: current === 1 });
+    let previous = 0;
+    for (const p of pages) {
+        if (p - previous === 2)
+            items.push({ type: "page", page: p - 1, current: false });
+        else if (p - previous > 2)
+            items.push({ type: "ellipsis" });
+        items.push({ type: "page", page: p, current: p === current });
+        previous = p;
+    }
+    items.push({ type: "next", page: current + 1, disabled: current === last });
+    if (showEdges)
+        items.push({ type: "last", page: last, disabled: current === last });
+    return items;
+}

package/dist/index.d.ts

@@ -2,21 +2,37 @@ export { default as Modal, openModal, closeModal } from "./components/Modal.js";
 export { default as ColorPicker } from "./components/ColorPicker.js";
 export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton.js";
 export { ColorField } from "./components/ColorField.js";
-export { Button, type ButtonVariant } from "./components/Button.js";
+export { Button, type ButtonVariant, type ThemeColorVar } from "./components/Button.js";
 export { NavBar } from "./components/NavBar.js";
-export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
+export { Spinner } from "./components/Spinner.js";
+export { Skeleton } from "./components/Skeleton.js";
+export { Card } from "./components/Card.js";
+export { Stack } from "./components/Stack.js";
+export { Badge, type BadgeVariant } from "./components/Badge.js";
+export { Tag } from "./components/Tag.js";
+export { Tabs } from "./components/Tabs.js";
+export { Tooltip } from "./components/Tooltip.js";
+export { DropdownMenu } from "./components/DropdownMenu.js";
+export { Table, type TableColumn, type SortState } from "./components/Table.js";
+export type { TooltipPlacement } from "./tooltip/tooltipEngine.js";
+export { Drawer, type DrawerSide, type DrawerMode } from "./components/Drawer.js";
+export { openDrawer, closeDrawer, toggleDrawer, useDrawer } from "./components/drawerStore.js";
+export { PageStatus } from "./components/PageStatus.js";
+export { Pagination } from "./components/Pagination.js";
+export { Accordion } from "./components/Accordion.js";
+export type { PaginationItem } from "./components/paginationItems.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";
 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, type InterceptFetchMode } from "./popup/PopupProvider.js";
-export { usePopup, type PopupApi } from "./popup/usePopup.js";
-export { PopupHost } from "./popup/PopupHost.js";
+export { PopupProvider, type InterceptFetchMode, type ToastGroupConfig } from "./popup/PopupProvider.js";
+export { usePopup, type PopupApi, type PushOptions } from "./popup/usePopup.js";
+export { PopupHost, type ToastBox } from "./popup/PopupHost.js";
 export { createInterceptedFetch, type InterceptorHandlers } from "./popup/fetchInterceptor.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 { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey, useFocusTrap, useScrollLock, useOverlayStack, } from "@-reddacted-/react-hooks";
 export type { AsyncStatus, AsyncStatus as LoadStatus, AsyncResult, ElementSize } from "@-reddacted-/react-hooks";
 //# sourceMappingURL=index.d.ts.map

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,MAAM,wBAAwB,CAAA;AAC/C,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -4,7 +4,21 @@ export { default as ConfirmDeleteButton } from "./components/ConfirmDeleteButton
 export { ColorField } from "./components/ColorField.js";
 export { Button } from "./components/Button.js";
 export { NavBar } from "./components/NavBar.js";
-export { PageMessage, LoadingMessage, ErrorMessage } from "./components/PageStatus.js";
+export { Spinner } from "./components/Spinner.js";
+export { Skeleton } from "./components/Skeleton.js";
+export { Card } from "./components/Card.js";
+export { Stack } from "./components/Stack.js";
+export { Badge } from "./components/Badge.js";
+export { Tag } from "./components/Tag.js";
+export { Tabs } from "./components/Tabs.js";
+export { Tooltip } from "./components/Tooltip.js";
+export { DropdownMenu } from "./components/DropdownMenu.js";
+export { Table } from "./components/Table.js";
+export { Drawer } from "./components/Drawer.js";
+export { openDrawer, closeDrawer, toggleDrawer, useDrawer } from "./components/drawerStore.js";
+export { PageStatus } from "./components/PageStatus.js";
+export { Pagination } from "./components/Pagination.js";
+export { Accordion } from "./components/Accordion.js";
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
 export { ThemeSelect } from "./theme/ThemeSelect.js";
 export { defaultPalette } from "./theme/palette.js";
@@ -17,4 +31,4 @@ export { createInterceptedFetch } from "./popup/fetchInterceptor.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";
+export { useDocumentTitle, useAsync, useElementSize, useClickOutside, useEscapeKey, useFocusTrap, useScrollLock, useOverlayStack, } from "@-reddacted-/react-hooks";

package/dist/popup/PopupHost.d.ts

@@ -1,8 +1,24 @@
+import type { CSSProperties, ReactNode } from "react";
+/** One group's box: every message of the group, stacked. */
+export type ToastBox = {
+    group: string;
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. */
+    color: string;
+    className?: string;
+    items: {
+        id: number | string;
+        content: ReactNode;
+    }[];
+};
 type PopupHostProps = {
-    messages: string[];
-    onDismiss: () => void;
+    boxes: ToastBox[];
+    /** Called with the group of the box whose × was clicked. */
+    onDismiss: (group: string) => void;
     closeLabel?: string;
+    /** Set on the `.rui-toasts` container. */
+    className?: string;
+    style?: CSSProperties;
 };
-export declare function PopupHost({ messages, onDismiss, closeLabel }: PopupHostProps): import("react").JSX.Element | null;
+export declare function PopupHost({ boxes, onDismiss, closeLabel, className, style }: PopupHostProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=PopupHost.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopupHost.d.ts","sourceRoot":"","sources":["../../src/popup/PopupHost.tsx"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAoB,EAAE,EAAE,cAAc,sCAiBtF"}
+{"version":3,"file":"PopupHost.d.ts","sourceRoot":"","sources":["../../src/popup/PopupHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrD,4DAA4D;AAC5D,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,OAAO,EAAE,SAAS,CAAA;KAAE,EAAE,CAAA;CACrD,CAAA;AAED,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,4DAA4D;IAC5D,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAoB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,cAAc,sCA6BrG"}

package/dist/popup/PopupHost.js

@@ -1,46 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function PopupHost({ messages, onDismiss, closeLabel = "Close" }) {
-    if (messages.length === 0)
+import { resolveColor } from "../style/resolveColor.js";
+import { useStyle } from "../style/useStyle.js";
+export function PopupHost({ boxes, onDismiss, closeLabel = "Close", className, style }) {
+    useStyle("toast", toastCss);
+    if (boxes.length === 0)
         return null;
-    return (_jsxs("div", { role: "alert", "aria-live": "assertive", style: hostStyle, children: [_jsx("div", { style: bodyStyle, children: messages.map(message => (_jsx("p", { style: messageStyle, children: message }, message))) }), _jsx("button", { type: "button", "aria-label": closeLabel, onClick: onDismiss, style: closeStyle, children: "\u00D7" })] }));
-}
-const hostStyle = {
-    position: "fixed",
-    top: "1rem",
-    left: "50%",
-    transform: "translateX(-50%)",
-    zIndex: 2000,
-    display: "flex",
-    alignItems: "flex-start",
-    gap: "0.75rem",
-    maxWidth: "min(32rem, calc(100vw - 2rem))",
-    padding: "0.75rem 0.75rem 0.75rem 1rem",
-    borderRadius: "8px",
-    border: "1px solid var(--color-danger)",
-    backgroundColor: "var(--color-danger-soft)",
-    boxShadow: "0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent)",
-};
-const bodyStyle = {
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.25rem",
-};
-const messageStyle = {
-    margin: 0,
-    fontSize: "0.875rem",
-    lineHeight: 1.4,
-    color: "var(--color-text)",
-};
-const closeStyle = {
-    flexShrink: 0,
-    padding: 0,
-    width: "1.5rem",
-    height: "1.5rem",
-    lineHeight: 1,
-    fontSize: "1.125rem",
-    cursor: "pointer",
-    border: "none",
-    borderRadius: "4px",
-    backgroundColor: "transparent",
-    color: "var(--color-danger)",
-};
+    return (_jsx("div", { className: className ? `rui-toasts ${className}` : "rui-toasts", style: style, children: boxes.map(box => (_jsxs("div", { role: "alert", "aria-live": "assertive", className: box.className ? `rui-toast ${box.className}` : "rui-toast", "data-group": box.group || undefined, style: { "--rui-toast-color": resolveColor(box.color) }, children: [_jsx("div", { className: "rui-toast-body", children: box.items.map(item => (_jsx("div", { className: "rui-toast-message", children: item.content }, item.id))) }), _jsx("button", { type: "button", className: "rui-toast-close", "aria-label": closeLabel, onClick: () => onDismiss(box.group), children: "\u00D7" })] }, box.group))) }));
+}
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+// Above the overlay stack (modals start at 1000) so errors stay visible over a modal.
+const toastCss = `
+:where(.rui-toasts) {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2000;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: max-content;
+  max-width: min(32rem, calc(100vw - 2rem));
+}
+:where(.rui-toast) {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 0.75rem 0.75rem 1rem;
+  border: 1px solid var(--rui-toast-color);
+  border-radius: 8px;
+  background-color: color-mix(in srgb, var(--rui-toast-color) 12%, var(--color-surface));
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent);
+}
+:where(.rui-toast-body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+:where(.rui-toast-message) {
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: var(--color-text);
+}
+:where(.rui-toast-close) {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background-color: transparent;
+  color: var(--rui-toast-color);
+  font-size: 1.125rem;
+  line-height: 1;
+  cursor: pointer;
+}
+:where(.rui-toast-close:hover) {
+  background-color: color-mix(in srgb, var(--rui-toast-color) 12%, transparent);
+}
+:where(.rui-toast-close:focus-visible) {
+  outline: 2px solid var(--rui-toast-color);
+  outline-offset: 1px;
+}
+`;

package/dist/popup/PopupProvider.d.ts

@@ -1,19 +1,36 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 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";
+export type ToastGroupConfig = {
+    /** `"--color-x"` reads the theme variable; anything else is a raw CSS color. Defaults to the provider's `color`. */
+    color?: string;
+    /** Closes the group's box this many ms after its last message. Absent or 0: stays until closed. */
+    duration?: number;
+    /** Added to the group's `.rui-toast` box. */
+    className?: string;
+};
 type PopupProviderProps = GraphqlErrorRulesOptions & {
     children: ReactNode;
     closeLabel?: string;
+    /** Groups the project uses, by name. Undeclared groups are accepted with the defaults. */
+    groups?: Record<string, ToastGroupConfig>;
+    /** Default color of every box. `"--color-x"` reads the theme variable. Defaults to `"--color-primary"`. */
+    color?: 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;
+    /** Group of intercepted fetch failures. Omitted: the anonymous default group. */
+    fetchGroup?: string;
     /** Called for every intercepted failure, with the method, URL and status behind it. */
     onReport?: (report: FetchErrorReport) => void;
+    /** Set on the `.rui-toasts` container, e.g. to move it. */
+    className?: string;
+    style?: CSSProperties;
 };
-export declare function PopupProvider({ children, closeLabel, interceptFetch, onReport, ...ruleOptions }: PopupProviderProps): import("react").JSX.Element;
+export declare function PopupProvider({ children, closeLabel, groups: groupConfigs, color, interceptFetch, fetchGroup, onReport, className, style, ...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,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"}
+{"version":3,"file":"PopupProvider.d.ts","sourceRoot":"","sources":["../../src/popup/PopupProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAA;AASjF,gGAAgG;AAChG,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oHAAoH;IACpH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,kBAAkB,GAAG,wBAAwB,GAAG;IACnD,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IACzC,2GAA2G;IAC3G,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC7C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAwBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,MAAM,EAAE,YAAY,EACpB,KAAyB,EACzB,cAAsB,EACtB,UAA0B,EAC1B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,WAAW,EACf,EAAE,kBAAkB,+BA0GpB"}

package/dist/popup/PopupProvider.js

@@ -4,18 +4,63 @@ import { createErrorRules, createGraphqlErrorRules } from "./errorRules.js";
 import { createInterceptedFetch } from "./fetchInterceptor.js";
 import { PopupHost } from "./PopupHost.js";
 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([]);
+// Anonymous group used by push() without `group` and by fetch without `fetchGroup`.
+const DEFAULT_GROUP = "";
+let nextItemId = 0;
+function addItem(groups, name, item) {
+    const group = groups.find(g => g.name === name);
+    if (!group)
+        return [...groups, { name, items: [item] }];
+    if (item.dedupKey !== null && group.items.some(i => i.dedupKey === item.dedupKey))
+        return groups;
+    return groups.map(g => (g === group ? { name, items: [...g.items, item] } : g));
+}
+function removeFetchItems(groups) {
+    if (!groups.some(g => g.items.some(i => i.fromFetch)))
+        return groups;
+    return groups
+        .map(g => ({ name: g.name, items: g.items.filter(i => !i.fromFetch) }))
+        .filter(g => g.items.length > 0);
+}
+export function PopupProvider({ children, closeLabel, groups: groupConfigs, color = "--color-primary", interceptFetch = false, fetchGroup = DEFAULT_GROUP, onReport, className, style, ...ruleOptions }) {
+    const [groups, setGroups] = 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.
+    // Options arrive as literals: reading them through refs keeps the interceptor from being
+    // reinstalled, and push() stable, on every parent render.
     const ruleOptionsRef = useRef(ruleOptions);
     ruleOptionsRef.current = ruleOptions;
+    const groupConfigsRef = useRef(groupConfigs);
+    groupConfigsRef.current = groupConfigs;
+    const fetchGroupRef = useRef(fetchGroup);
+    fetchGroupRef.current = fetchGroup;
+    const timers = useRef(new Map());
+    const dismiss = useCallback((group) => {
+        if (group === undefined) {
+            timers.current.forEach(clearTimeout);
+            timers.current.clear();
+            setGroups([]);
+            return;
+        }
+        clearTimeout(timers.current.get(group));
+        timers.current.delete(group);
+        setGroups(current => (current.some(g => g.name === group) ? current.filter(g => g.name !== group) : current));
+    }, []);
+    const add = useCallback((group, content, dedupKey, fromFetch) => {
+        setGroups(current => addItem(current, group, { id: nextItemId++, dedupKey, content, fromFetch }));
+        // The group's timer restarts with every message.
+        const duration = groupConfigsRef.current?.[group]?.duration;
+        if (duration) {
+            clearTimeout(timers.current.get(group));
+            timers.current.set(group, setTimeout(() => dismiss(group), duration));
+        }
+    }, [dismiss]);
+    useEffect(() => {
+        const pending = timers.current;
+        return () => pending.forEach(clearTimeout);
+    }, []);
     useEffect(() => {
         if (!interceptFetch)
             return;
@@ -26,8 +71,8 @@ export function PopupProvider({ children, closeLabel, interceptFetch = false, on
             ? createGraphqlErrorRules(ruleOptionsRef.current)
             : createErrorRules(ruleOptionsRef.current);
         const intercepted = createInterceptedFetch(original, {
-            onRequestStart: () => setFetchMessages(current => (current.length === 0 ? current : [])),
-            onError: message => setFetchMessages(addMessage(message)),
+            onRequestStart: () => setGroups(removeFetchItems),
+            onError: message => add(fetchGroupRef.current, message, message, true),
             onReport: report => reportRef.current?.(report),
         }, rules);
         intercepted.__popupIntercepted = true;
@@ -35,13 +80,20 @@ export function PopupProvider({ children, closeLabel, interceptFetch = false, on
         return () => {
             window.fetch = original;
         };
-    }, [interceptFetch]);
-    const pushError = useCallback((message) => setPushedMessages(addMessage(message)), []);
-    const dismiss = useCallback(() => {
-        setFetchMessages([]);
-        setPushedMessages([]);
-    }, []);
-    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 })] }));
+    }, [interceptFetch, add]);
+    const push = useCallback((content, options) => {
+        const dedupKey = options?.id ?? (typeof content === "string" ? content : null);
+        add(options?.group ?? DEFAULT_GROUP, content, dedupKey, false);
+    }, [add]);
+    const api = useMemo(() => ({ push, dismiss }), [push, dismiss]);
+    const boxes = groups.map(group => {
+        const config = groupConfigs?.[group.name];
+        return {
+            group: group.name,
+            color: config?.color ?? color,
+            className: config?.className,
+            items: group.items.map(item => ({ id: item.id, content: item.content })),
+        };
+    });
+    return (_jsxs(PopupContext.Provider, { value: api, children: [children, _jsx(PopupHost, { boxes: boxes, onDismiss: dismiss, closeLabel: closeLabel, className: className, style: style })] }));
 }

package/dist/popup/usePopup.d.ts

@@ -1,8 +1,15 @@
+import type { ReactNode } from "react";
+export type PushOptions = {
+    /** Group whose box shows the message. Omitted: the anonymous default group. */
+    group?: string;
+    /** Dedup key within the group. Strings dedup by value; other content only through `id`. */
+    id?: string;
+};
 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;
+    /** Shows `content` in its group's box until closed (× or the group's `duration`). */
+    push: (content: ReactNode, options?: PushOptions) => void;
+    /** Closes one group's box, or every box when called without a group. */
+    dismiss: (group?: string) => void;
 };
 export declare const PopupContext: import("react").Context<PopupApi | null>;
 export declare function usePopup(): PopupApi;

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

@@ -1 +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"}
+{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../src/popup/usePopup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,WAAW,GAAG;IACxB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,qFAAqF;IACrF,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACzD,wEAAwE;IACxE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY,0CAAuC,CAAA;AAEhE,wBAAgB,QAAQ,IAAI,QAAQ,CAInC"}

package/dist/style/accordionCss.d.ts

@@ -0,0 +1,2 @@
+export declare const accordionCss = "\n:where(.rui-accordion:not([data-variant=\"separated\"])) {\n  border: 1px solid var(--rui-accordion-border, var(--color-border));\n  border-radius: 12px;\n  background-color: var(--rui-accordion-bg, var(--color-surface));\n  overflow: hidden;\n}\n:where(.rui-accordion:not([data-variant=\"separated\"])) > :where(details + details) {\n  border-top: 1px solid var(--rui-accordion-border, var(--color-border));\n}\n:where(.rui-accordion[data-variant=\"separated\"]) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--rui-accordion-gap, 0.5rem);\n}\n:where(.rui-accordion[data-variant=\"separated\"]) > :where(details) {\n  border: 1px solid var(--rui-accordion-border, var(--color-border));\n  border-radius: 12px;\n  background-color: var(--rui-accordion-bg, var(--color-surface));\n  overflow: hidden;\n}\n\n:where(.rui-accordion) :where(summary) {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: var(--rui-accordion-padding, 0.875rem 1rem);\n  color: var(--color-text);\n  font-weight: 500;\n  list-style: none;\n  cursor: pointer;\n}\n:where(.rui-accordion) :where(summary)::-webkit-details-marker {\n  display: none;\n}\n:where(.rui-accordion) :where(summary:hover) {\n  background-color: color-mix(in srgb, var(--color-text) 4%, transparent);\n}\n:where(.rui-accordion) :where(summary:focus-visible) {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n}\n:where(.rui-accordion) :where(details) > :where(:not(summary)) {\n  padding: var(--rui-accordion-padding, 0.875rem 1rem);\n  color: var(--color-text);\n}\n\n:where(.rui-accordion:not([data-chevron=\"start\"], [data-chevron=\"none\"])) :where(summary)::after {\n  \n  content: \"\";\n  flex-shrink: 0;\n  width: 0.45em;\n  height: 0.45em;\n  border-right: 2px solid var(--color-text-muted);\n  border-bottom: 2px solid var(--color-text-muted);\n  transform: translateY(-25%) rotate(45deg);\n  transition: transform 150ms ease-out;\n\n  margin-left: auto;\n}\n:where(.rui-accordion:not([data-chevron=\"start\"], [data-chevron=\"none\"])) :where(details[open] > summary)::after {\n  transform: translateY(25%) rotate(-135deg);\n}\n:where(.rui-accordion[data-chevron=\"start\"]) :where(summary)::before {\n  \n  content: \"\";\n  flex-shrink: 0;\n  width: 0.45em;\n  height: 0.45em;\n  border-right: 2px solid var(--color-text-muted);\n  border-bottom: 2px solid var(--color-text-muted);\n  transform: translateY(-25%) rotate(45deg);\n  transition: transform 150ms ease-out;\n\n}\n:where(.rui-accordion[data-chevron=\"start\"]) :where(details[open] > summary)::before {\n  transform: translateY(25%) rotate(-135deg);\n}\n\n/* Progressive enhancement: animated where the browser can transition to height: auto. */\n@supports (interpolate-size: allow-keywords) {\n  :where(.rui-accordion) {\n    interpolate-size: allow-keywords;\n  }\n  :where(.rui-accordion details)::details-content {\n    height: 0;\n    overflow: hidden;\n    transition: height 200ms ease-out, content-visibility 200ms allow-discrete;\n  }\n  :where(.rui-accordion details[open])::details-content {\n    height: auto;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :where(.rui-accordion) :where(summary)::before,\n  :where(.rui-accordion) :where(summary)::after,\n  :where(.rui-accordion details)::details-content {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=accordionCss.d.ts.map

package/dist/style/accordionCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordionCss.d.ts","sourceRoot":"","sources":["../../src/style/accordionCss.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,YAAY,6wGAkFxB,CAAA"}