@seedgrid/fe-components 2026.11.2 → 2026.11.4

package/dist/notifications/SgNotificationBell.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { type SgNotification, type SgNotificationPlacement, type SgPollingStats } from "./notificationBellLogic";
+export type { SgNotification, SgNotificationPlacement, SgPollingStats } from "./notificationBellLogic";
+/** Como um tipo de notificacao aparece (icone) e o que faz ao abrir. */
+export type SgNotificationTypeConfig = {
+    icon?: React.ReactNode;
+    onOpen?: (notification: SgNotification) => void;
+};
+export type SgNotificationBellProps = {
+    /** Base das rotas da extension `user-notifications`. Default: `/api/user-notifications` (BFF, mesma origem). */
+    apiUrl?: string;
+    /** Rota que entrega o token do Pulse (usada se nao houver `SgRealtimeProvider` acima). Default: `/api/realtime/connect`. */
+    tokenEndpoint?: string;
+    /** Opcoes do `fetch` (ex.: `headers: { Authorization }` quando nao ha cookie). */
+    requestInit?: RequestInit;
+    /** Substitui o `fetch` (apps sem BFF, testes, demonstracao). Default: `fetch` global. */
+    fetcher?: (input: string, init?: RequestInit) => Promise<Response>;
+    /** Tipo -> icone e acao ao abrir. O sino nao conhece o negocio: relatorio e so um tipo. */
+    types?: Record<string, SgNotificationTypeConfig>;
+    /** Evento do Pulse que dispara a leitura. Default: `user-notification.*`. */
+    eventPattern?: string;
+    /** Intervalo do polling de reserva (so com o Pulse desligado ou fora do ar), preso entre 30 e 60 s. Default: 45000. */
+    pollIntervalMs?: number;
+    /** Maximo de notificacoes na lista. Default e maximo: 100 (uma pagina da rota). */
+    maxVisible?: number;
+    /** De que lado do sino o painel abre (como o `placement` do SgPopup). `auto` escolhe o lado em que cabe. Default: `auto`. */
+    placement?: SgNotificationPlacement;
+    /** Mostra o interruptor "Nao lidas" no topo do painel. `false` esconde so o interruptor (o sino fica) e o painel lista tudo. Default: true. */
+    showUnreadToggle?: boolean;
+    /** O painel abre em "Nao lidas" (ainda nao clicadas). Ignorada com `showUnreadToggle=false`. Nao persiste entre recargas. Default: true. */
+    defaultUnreadOnly?: boolean;
+    /** Chegou uma notificacao nova (aviso do Pulse). */
+    onNotification?: (notification: SgNotification) => void;
+    /** O usuario excluiu uma notificacao. */
+    onNotificationDelete?: (notification: SgNotification) => void;
+    /** O usuario abriu uma notificacao (depois do `onOpen` do tipo). */
+    onOpen?: (notification: SgNotification) => void;
+    /** O polling consultou a API: contador, instante e motivo. Para medir o custo. */
+    onPollingTick?: (stats: SgPollingStats) => void;
+    className?: string;
+};
+/**
+ * Sino de notificacoes do usuario logado (P129). Autonomo: se nao houver `SgRealtimeProvider` acima, abre a propria
+ * conexao com o Pulse (token por `tokenEndpoint`, nunca a apikey no front); com o Pulse desligado ou fora do ar, faz
+ * polling de reserva. Sem regra de negocio: o que cada `type` mostra e faz vem de `types`.
+ */
+export declare function SgNotificationBell(props: Readonly<SgNotificationBellProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgNotificationBell {
+    var displayName: string;
+}
+//# sourceMappingURL=SgNotificationBell.d.ts.map

package/dist/notifications/SgNotificationBell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgNotificationBell.d.ts","sourceRoot":"","sources":["../../src/notifications/SgNotificationBell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EA2BL,KAAK,cAAc,EACnB,KAAK,uBAAuB,EAG5B,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EAAE,cAAc,EAAE,uBAAuB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEvG,wEAAwE;AACxE,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,gHAAgH;IAChH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4HAA4H;IAC5H,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yFAAyF;IACzF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IACnE,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,wBAAwB,CAAC,CAAC;IACjD,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uHAAuH;IACvH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6HAA6H;IAC7H,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,+IAA+I;IAC/I,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4IAA4I;IAC5I,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,yCAAyC;IACzC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9D,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8dF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,uBAAuB,CAAC,2CAoB1E;yBApBe,kBAAkB"}

package/dist/notifications/SgNotificationBell.js

@@ -0,0 +1,348 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Bell, Trash2 } from "lucide-react";
+import { t, useComponentsI18n } from "../i18n";
+import { SgBadge } from "../commons/SgBadge";
+import { SgToggleSwitch } from "../inputs/SgToggleSwitch";
+import { SgRealtimeProvider, useHasSgRealtimeProvider, useSgRealtimeEvent, useSgRealtimeStatus } from "../realtime/SgRealtimeProvider";
+import { DEFAULT_EVENT_PATTERN, EMPTY_POLLING_STATS, NOTIFICATIONS_CHANNEL, badgeText, clampMaxVisible, afterOpen, displayUnread, initialUnreadOnly, listQuery, visibleItems, isValidInstant, markAllRead, newUnread, nextPollDelay, normalizeList, PANEL_MAX_HEIGHT, PANEL_WIDTH, panelPosition, planEvent, pollingReason, recordPollingTick, relativeTime, removeNotification, shouldRefreshOnStatus, viewState } from "./notificationBellLogic";
+const DEFAULT_API_URL = "/api/user-notifications";
+const PAGE_SIZE = 100;
+function reducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function SgNotificationBellInner(props) {
+    const { apiUrl = DEFAULT_API_URL, requestInit, types, eventPattern = DEFAULT_EVENT_PATTERN, pollIntervalMs, placement = "auto", showUnreadToggle = true, className } = props;
+    const maxVisible = clampMaxVisible(props.maxVisible);
+    const i18n = useComponentsI18n();
+    const { status } = useSgRealtimeStatus();
+    const [items, setItems] = React.useState([]);
+    const [total, setTotal] = React.useState(0);
+    /** Contador do servidor (GET /unread-count); a lista local pode estar limitada pelo teto. */
+    const [serverUnread, setServerUnread] = React.useState(null);
+    const [loaded, setLoaded] = React.useState(false);
+    const [failed, setFailed] = React.useState(false);
+    const [actionFailed, setActionFailed] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const [unreadOnly, setUnreadOnly] = React.useState(() => initialUnreadOnly(props.showUnreadToggle, props.defaultUnreadOnly));
+    const unreadOnlyRef = React.useRef(unreadOnly);
+    unreadOnlyRef.current = unreadOnly;
+    const panelRef = React.useRef(null);
+    const [position, setPosition] = React.useState(null);
+    const [announce, setAnnounce] = React.useState("");
+    const loadedRef = React.useRef(false);
+    const notifiedRef = React.useRef(new Set());
+    const itemsRef = React.useRef([]);
+    itemsRef.current = items;
+    const latest = React.useRef(props);
+    latest.current = props;
+    const bellRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const base = apiUrl.replace(/\/+$/, "");
+    /** ETag fraca + corpo de cada pagina da lista (chave: query). Em 304 vale o corpo guardado. */
+    const listCache = React.useRef(new Map());
+    const request = React.useCallback(async (path, method, ifNoneMatch) => {
+        const init = { credentials: "same-origin", ...latest.current.requestInit, method };
+        if (ifNoneMatch) {
+            const headers = new Headers(init.headers);
+            headers.set("If-None-Match", ifNoneMatch);
+            init.headers = headers;
+        }
+        const response = await (latest.current.fetcher ?? fetch)(base + path, init);
+        if (response.status === 304 && ifNoneMatch)
+            return response;
+        if (!response.ok)
+            throw Object.assign(new Error(`HTTP ${response.status}`), { status: response.status });
+        return response;
+    }, [base]);
+    const ring = React.useCallback(() => {
+        const el = bellRef.current;
+        if (!el || reducedMotion() || typeof el.animate !== "function")
+            return;
+        el.animate([{ transform: "rotate(0)" }, { transform: "rotate(14deg)" }, { transform: "rotate(-12deg)" }, { transform: "rotate(8deg)" }, { transform: "rotate(0)" }], { duration: 700, easing: "ease-in-out" });
+    }, []);
+    /** Le a lista (ate maxVisible, em paginas de 100). `announceNew`: chegou por aviso, entao anima e avisa. */
+    const load = React.useCallback(async (opts) => {
+        try {
+            const only = opts?.unreadOnly ?? unreadOnlyRef.current;
+            const wanted = Math.max(1, maxVisible);
+            const collected = [];
+            let reported = 0;
+            for (let page = 0; collected.length < wanted; page += 1) {
+                const size = Math.min(PAGE_SIZE, wanted - collected.length);
+                const query = listQuery(page, size, only);
+                const cached = listCache.current.get(query);
+                const response = await request(query, "GET", cached?.etag);
+                let res;
+                if (response.status === 304 && cached) {
+                    res = cached.body;
+                }
+                else {
+                    res = (await response.json());
+                    const etag = response.headers?.get?.("ETag");
+                    if (etag)
+                        listCache.current.set(query, { etag, body: res });
+                    else
+                        listCache.current.delete(query);
+                }
+                collected.push(...res.items);
+                reported = res.total;
+                if (res.items.length < size || collected.length >= reported)
+                    break;
+            }
+            let unreadFromServer = null;
+            try {
+                const body = (await (await request("/unread-count", "GET")).json());
+                if (typeof body.count === "number")
+                    unreadFromServer = body.count;
+            }
+            catch {
+                // sem o contador do servidor, vale a lista local
+            }
+            const previous = itemsRef.current;
+            const next = normalizeList(collected, maxVisible, new Date().toISOString());
+            const fresh = newUnread(previous, next);
+            const wasLoaded = loadedRef.current;
+            loadedRef.current = true;
+            setServerUnread(unreadFromServer);
+            setItems(next);
+            setTotal(reported);
+            setFailed(false);
+            setLoaded(true);
+            if (opts?.announceNew && wasLoaded && fresh.length > 0) {
+                ring();
+                setAnnounce(t(i18n, "components.notifications.bell.announce", { title: fresh[0]?.title ?? "" }));
+            }
+            if (opts?.notifyId) {
+                const arrived = next.find((n) => n.publicId === opts.notifyId);
+                if (arrived && !notifiedRef.current.has(arrived.publicId) && !previous.some((n) => n.publicId === arrived.publicId)) {
+                    notifiedRef.current.add(arrived.publicId);
+                    latest.current.onNotification?.(arrived);
+                }
+            }
+            return true;
+        }
+        catch {
+            setFailed(true);
+            setLoaded(true);
+            return false;
+        }
+    }, [i18n, maxVisible, request, ring]);
+    // Leitura inicial.
+    React.useEffect(() => {
+        void load();
+    }, [load]);
+    // Aviso do Pulse.
+    useSgRealtimeEvent(NOTIFICATIONS_CHANNEL, eventPattern, (event) => {
+        const plan = planEvent(eventPattern, event.channel, event.event, event.data);
+        if (plan.action === "fetch")
+            void load({ notifyId: plan.publicId, announceNew: true });
+        else if (plan.action === "refresh")
+            void load();
+    });
+    // Ao (re)conectar, le uma vez para recuperar o que passou.
+    const previousStatus = React.useRef(status);
+    React.useEffect(() => {
+        if (shouldRefreshOnStatus(previousStatus.current, status))
+            void load();
+        previousStatus.current = status;
+    }, [status, load]);
+    // Polling de reserva: so com o Pulse desligado ou fora do ar; para com a aba oculta.
+    const reason = pollingReason(status);
+    const stats = React.useRef(EMPTY_POLLING_STATS);
+    React.useEffect(() => {
+        if (!reason || typeof document === "undefined")
+            return undefined;
+        let timer;
+        let failures = 0;
+        let stopped = false;
+        let inFlight = false;
+        const schedule = () => {
+            if (timer)
+                clearTimeout(timer);
+            timer = undefined;
+            if (stopped || document.hidden)
+                return;
+            timer = setTimeout(() => void tick(), nextPollDelay(pollIntervalMs, failures, Math.random()));
+        };
+        // Uma consulta por vez: trocar de aba durante uma consulta nao abre um segundo laco.
+        const tick = async () => {
+            if (inFlight || stopped)
+                return;
+            inFlight = true;
+            if (timer)
+                clearTimeout(timer);
+            timer = undefined;
+            try {
+                stats.current = recordPollingTick(stats.current, new Date().toISOString(), reason);
+                latest.current.onPollingTick?.(stats.current);
+                failures = (await load({ announceNew: true })) ? 0 : failures + 1;
+            }
+            finally {
+                inFlight = false;
+            }
+            schedule();
+        };
+        const onVisibility = () => {
+            if (document.hidden) {
+                if (timer)
+                    clearTimeout(timer);
+                timer = undefined;
+            }
+            else {
+                void tick();
+            }
+        };
+        document.addEventListener("visibilitychange", onVisibility);
+        schedule();
+        return () => {
+            stopped = true;
+            if (timer)
+                clearTimeout(timer);
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }, [reason, pollIntervalMs, request, load]);
+    // Fecha com Esc e com clique fora.
+    React.useEffect(() => {
+        if (!open)
+            return undefined;
+        const onKey = (e) => {
+            if (e.key === "Escape") {
+                setOpen(false);
+                bellRef.current?.focus();
+            }
+        };
+        const onDown = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("keydown", onKey);
+        document.addEventListener("mousedown", onDown);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            document.removeEventListener("mousedown", onDown);
+        };
+    }, [open]);
+    /** 404 em ler/excluir: a notificacao ja nao existe no servidor (outra aba, retencao); sai da lista local. */
+    const act = async (fn, target) => {
+        try {
+            await fn();
+            setActionFailed(false);
+        }
+        catch (error) {
+            if (target && error.status === 404) {
+                setItems((list) => removeNotification(list, target.publicId));
+                setTotal((v) => Math.max(0, v - 1));
+                if (!target.read)
+                    setServerUnread((v) => (v === null ? v : Math.max(0, v - 1)));
+                setActionFailed(false);
+            }
+            else {
+                setActionFailed(true);
+            }
+        }
+    };
+    const openItem = (n) => act(async () => {
+        if (!n.read) {
+            await request(`/${encodeURIComponent(n.publicId)}/read`, "POST");
+            setItems((list) => afterOpen(list, n.publicId, unreadOnlyRef.current, new Date().toISOString()));
+            setServerUnread((v) => (v === null ? v : Math.max(0, v - 1)));
+        }
+        setOpen(false);
+        types?.[n.type]?.onOpen?.(n);
+        latest.current.onOpen?.(n);
+    }, n);
+    const deleteItem = (n) => act(async () => {
+        await request(`/${encodeURIComponent(n.publicId)}`, "DELETE");
+        setItems((list) => removeNotification(list, n.publicId));
+        setTotal((v) => Math.max(0, v - 1));
+        if (!n.read)
+            setServerUnread((v) => (v === null ? v : Math.max(0, v - 1)));
+        latest.current.onNotificationDelete?.(n);
+    }, n);
+    const readAll = () => act(async () => {
+        await request("/read-all", "POST");
+        setItems((list) => markAllRead(list, new Date().toISOString()));
+        setServerUnread(0);
+    });
+    const clearAll = () => act(async () => {
+        await request("", "DELETE");
+        setItems([]);
+        setTotal(0);
+        setServerUnread(0);
+    });
+    const shown = visibleItems(items, unreadOnly);
+    const count = displayUnread(serverUnread, items);
+    const view = viewState({ loaded, failed, count: shown.length, unreadOnly });
+    const changeUnreadOnly = (checked) => {
+        setUnreadOnly(checked);
+        unreadOnlyRef.current = checked;
+        void load({ unreadOnly: checked });
+    };
+    const now = new Date().toISOString();
+    const ageText = (n) => {
+        const r = relativeTime(n.createdAt, now);
+        if (r.unit === "now")
+            return t(i18n, "components.notifications.bell.now");
+        if (r.unit === "minute")
+            return t(i18n, "components.notifications.bell.minutes", { n: r.value });
+        if (r.unit === "hour")
+            return t(i18n, "components.notifications.bell.hours", { n: r.value });
+        if (r.unit === "day")
+            return t(i18n, "components.notifications.bell.days", { n: r.value });
+        return isValidInstant(n.createdAt) ? new Date(n.createdAt).toLocaleDateString(i18n.locale) : "";
+    };
+    const bellLabel = count > 0
+        ? t(i18n, "components.notifications.bell.unread", { count })
+        : t(i18n, "components.notifications.bell.none");
+    // Posicao do painel na janela: o lado vem de `placement`; `auto` escolhe onde cabe. Recalcula ao abrir, ao mudar a
+    // lista, ao redimensionar e ao rolar.
+    React.useLayoutEffect(() => {
+        if (!open) {
+            setPosition(null);
+            return;
+        }
+        const place = () => {
+            const anchor = bellRef.current?.getBoundingClientRect();
+            const panel = panelRef.current;
+            if (!anchor || !panel)
+                return;
+            const height = Math.min(panel.scrollHeight, PANEL_MAX_HEIGHT);
+            setPosition(panelPosition(anchor, { width: Math.min(PANEL_WIDTH, panel.offsetWidth || PANEL_WIDTH), height }, { width: window.innerWidth, height: window.innerHeight }, placement));
+        };
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [open, placement, items.length, loaded, failed]);
+    return (_jsxs("div", { ref: rootRef, className: ["relative inline-block", className].filter(Boolean).join(" "), children: [_jsxs("button", { ref: bellRef, type: "button", "aria-label": bellLabel, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => {
+                    if (!open)
+                        void load();
+                    setOpen((v) => !v);
+                }, className: "relative inline-flex size-11 items-center justify-center rounded-full text-foreground hover:bg-muted/60 focus-visible:outline focus-visible:outline-2", children: [_jsx(Bell, { className: "size-5", "aria-hidden": "true" }), count > 0 ? (_jsx("span", { className: "pointer-events-none absolute right-1 top-1", children: _jsx(SgBadge, { value: badgeText(count), severity: "danger", size: "xs", rounded: true }) })) : null] }), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce }), open ? (_jsxs("div", { ref: panelRef, role: "dialog", "aria-label": t(i18n, "components.notifications.bell.label"), "data-side": position?.side, style: { top: position?.top ?? 0, left: position?.left ?? 0, maxHeight: position?.maxHeight ?? PANEL_MAX_HEIGHT, visibility: position ? "visible" : "hidden" }, className: "fixed z-50 flex w-[min(26rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-xl border border-border bg-background shadow-lg", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-base font-semibold", children: t(i18n, "components.notifications.bell.label") }), count > 0 ? (_jsx("span", { className: "rounded-full bg-muted px-2 py-0.5 text-xs font-semibold", children: t(i18n, "components.notifications.bell.news", { count }) })) : null] }), count > 0 ? (_jsx("button", { type: "button", onClick: () => void readAll(), className: "min-h-11 px-1 text-sm font-medium text-primary", children: t(i18n, "components.notifications.bell.markAll") })) : null] }), showUnreadToggle ? (_jsx("div", { className: "flex items-center border-b border-border px-4 py-1", children: _jsx(SgToggleSwitch, { id: "sg-notification-unread-only", label: t(i18n, "components.notifications.bell.unreadOnly"), checked: unreadOnly, onChange: changeUnreadOnly }) })) : null, actionFailed ? (_jsx("div", { role: "alert", className: "border-b border-border px-4 py-2 text-sm text-destructive", children: t(i18n, "components.notifications.bell.actionFailed") })) : null, _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [view === "loading" ? (_jsx("div", { role: "status", className: "px-4 py-6 text-center text-sm text-muted-foreground", children: t(i18n, "components.notifications.bell.loading") })) : null, view === "error" ? (_jsxs("div", { role: "alert", className: "flex flex-col items-center gap-2 px-4 py-6 text-center text-sm", children: [_jsx("span", { children: t(i18n, "components.notifications.bell.error") }), _jsx("button", { type: "button", onClick: () => void load(), className: "min-h-11 px-3 font-medium text-primary", children: t(i18n, "components.notifications.bell.retry") })] })) : null, view === "empty" ? (_jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-sm font-medium", children: t(i18n, "components.notifications.bell.empty") }), _jsx("div", { className: "mt-1 text-xs text-muted-foreground", children: t(i18n, "components.notifications.bell.emptyHint") })] })) : null, view === "caughtUp" ? (_jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("div", { className: "text-sm font-medium", children: t(i18n, "components.notifications.bell.caughtUp") }), _jsx("button", { type: "button", onClick: () => changeUnreadOnly(false), className: "mt-1 min-h-11 px-3 text-sm font-medium text-primary", children: t(i18n, "components.notifications.bell.seeAll") })] })) : null, view === "list" ? (_jsx("ul", { className: "m-0 list-none p-0", children: shown.map((n) => (_jsxs("li", { "data-unread": n.read ? "false" : "true", className: ["flex items-start gap-3 border-b border-border px-4 py-3", n.read ? "" : "bg-muted/40"].join(" "), children: [_jsx("span", { className: "mt-0.5 inline-flex size-9 shrink-0 items-center justify-center rounded-full border border-border bg-background", children: types?.[n.type]?.icon ?? _jsx(Bell, { className: "size-4", "aria-hidden": "true" }) }), _jsxs("button", { type: "button", onClick: () => void openItem(n), className: "min-w-0 flex-1 text-left", children: [_jsx("span", { className: ["block truncate text-sm", n.read ? "font-medium" : "font-semibold"].join(" "), children: n.title }), n.message ? _jsx("span", { className: "block text-sm text-muted-foreground", children: n.message }) : null, _jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: ageText(n) })] }), _jsx("button", { type: "button", "aria-label": t(i18n, "components.notifications.bell.delete", { title: n.title }), onClick: () => void deleteItem(n), className: "-mr-2 inline-flex size-11 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground", children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }, n.publicId))) })) : null] }), view === "list" ? (_jsxs("div", { className: "flex items-center justify-between border-t border-border px-4", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: t(i18n, "components.notifications.bell.footer", { shown: shown.length, total: Math.max(total, shown.length) }) }), _jsx("button", { type: "button", onClick: () => void clearAll(), className: "min-h-11 px-1 text-sm font-medium text-destructive", children: t(i18n, "components.notifications.bell.clear") })] })) : null] })) : null] }));
+}
+/**
+ * Sino de notificacoes do usuario logado (P129). Autonomo: se nao houver `SgRealtimeProvider` acima, abre a propria
+ * conexao com o Pulse (token por `tokenEndpoint`, nunca a apikey no front); com o Pulse desligado ou fora do ar, faz
+ * polling de reserva. Sem regra de negocio: o que cada `type` mostra e faz vem de `types`.
+ */
+export function SgNotificationBell(props) {
+    const hasProvider = useHasSgRealtimeProvider(NOTIFICATIONS_CHANNEL);
+    const { fetcher, tokenEndpoint = "/api/realtime/connect", requestInit } = props;
+    const fetchToken = React.useMemo(() => fetcher
+        ? async () => {
+            const response = await fetcher(tokenEndpoint, { credentials: "same-origin", ...requestInit, method: "POST" });
+            if (!response.ok)
+                throw new Error(`HTTP ${response.status}`);
+            return (await response.json());
+        }
+        : undefined, [fetcher, tokenEndpoint, requestInit]);
+    if (hasProvider)
+        return _jsx(SgNotificationBellInner, { ...props });
+    return (_jsx(SgRealtimeProvider, { channels: [NOTIFICATIONS_CHANNEL], tokenEndpoint: tokenEndpoint, tokenRequestInit: requestInit, fetchToken: fetchToken, children: _jsx(SgNotificationBellInner, { ...props }) }));
+}
+SgNotificationBell.displayName = "SgNotificationBell";

package/dist/notifications/SgNotificationBell.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgNotificationBell.meta.d.ts.map

package/dist/notifications/SgNotificationBell.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgNotificationBell.meta.d.ts","sourceRoot":"","sources":["../../src/notifications/SgNotificationBell.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAsDpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAoBrB,CAAC"}

package/dist/notifications/SgNotificationBell.meta.js

@@ -0,0 +1,75 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "feedback.notification-bell",
+    package: "@seedgrid/fe-components",
+    exportName: "SgNotificationBell",
+    slug: "sg-notification-bell",
+    displayName: "SgNotificationBell",
+    category: "feedback",
+    subcategory: "notification",
+    description: "Sino de notificacoes do usuario logado: contador de nao lidas, lista de ate 100 notificacoes com titulo, texto, data e estado lida/nao lida, marcar como lida, excluir, marcar todas e limpar. Autonomo: conecta-se sozinho ao Pulse (token vindo do backend, sem apikey no front) e reaproveita o SgRealtimeProvider se houver; com o Pulse desligado faz polling de reserva. Sem regra de negocio: cada tipo de notificacao tem icone e acao ao abrir.",
+    tags: ["notification", "bell", "inbox", "alert", "realtime", "pulse", "badge", "feedback"],
+    capabilities: ["realtime", "polling-fallback", "unread-count", "mark-as-read", "delete", "reduced-motion", "aria-live"],
+    fieldSemantics: ["notification", "inbox", "userNotice"],
+    props: [
+        { name: "apiUrl", type: "string", default: "/api/user-notifications", description: "Base das rotas da extension user-notifications (BFF, mesma origem).", semanticRole: "data", bindable: true },
+        { name: "tokenEndpoint", type: "string", default: "/api/realtime/connect", description: "Rota que entrega o token do Pulse; usada quando nao ha SgRealtimeProvider acima.", semanticRole: "behavior", bindable: true },
+        { name: "requestInit", type: "RequestInit", description: "Opcoes do fetch (ex.: headers com Authorization quando nao ha cookie).", semanticRole: "behavior", bindable: false },
+        { name: "fetcher", type: "(input: string, init?: RequestInit) => Promise<Response>", description: "Substitui o fetch (apps sem BFF, testes, demonstracao).", semanticRole: "behavior", bindable: false },
+        { name: "types", type: "Record<string, SgNotificationTypeConfig>", description: "Tipo da notificacao -> icone e acao ao abrir (onOpen). O sino nao conhece o negocio.", semanticRole: "data", bindable: true },
+        { name: "eventPattern", type: "string", default: "user-notification.*", description: "Evento do Pulse que dispara a leitura.", semanticRole: "behavior", bindable: true },
+        { name: "pollIntervalMs", type: "number", default: 45000, description: "Intervalo do polling de reserva (so com o Pulse desligado ou fora do ar), preso entre 30 e 60 s, com jitter e backoff em erro.", semanticRole: "behavior", bindable: true },
+        { name: "maxVisible", type: "number", default: 100, description: "Maximo de notificacoes na lista; as mais antigas saem.", semanticRole: "behavior", bindable: true },
+        { name: "placement", type: "\"auto\" | \"top\" | \"right\" | \"bottom\" | \"left\"", default: "auto", description: "De que lado do sino o painel abre (como o placement do SgPopup); auto escolhe o lado em que cabe.", semanticRole: "behavior", bindable: true },
+        { name: "showUnreadToggle", type: "boolean", default: "true", description: "Mostra o interruptor Não lidas no topo do painel; false esconde só o interruptor (o sino fica) e o painel lista tudo.", semanticRole: "behavior", bindable: true },
+        { name: "defaultUnreadOnly", type: "boolean", default: "true", description: "O painel abre em Não lidas (ainda não clicadas); ignorada com showUnreadToggle=false e não persiste entre recargas.", semanticRole: "behavior", bindable: true },
+        { name: "onNotification", type: "(notification: SgNotification) => void", description: "Chegou uma notificacao nova (aviso do Pulse).", semanticRole: "event", bindable: false },
+        { name: "onNotificationDelete", type: "(notification: SgNotification) => void", description: "O usuario excluiu uma notificacao.", semanticRole: "event", bindable: false },
+        { name: "onOpen", type: "(notification: SgNotification) => void", description: "O usuario abriu uma notificacao (depois do onOpen do tipo).", semanticRole: "event", bindable: false },
+        { name: "onPollingTick", type: "(stats: SgPollingStats) => void", description: "O polling consultou a API: contador, instante da ultima consulta e motivo (disabled ou unavailable).", semanticRole: "event", bindable: false }
+    ],
+    states: ["loading", "empty", "list", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-notification-bell/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "types",
+            title: "Tipos com icone e acao",
+            file: "apps/showcase/src/app/components/sg-notification-bell/samples/tipos.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-notification-bell/sg-notification-bell.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: { route: "/components/sg-notification-bell", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "feedback.notification-bell", acceptsDataBinding: true, defaultProps: {} }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Avisar o usuario logado de algo que terminou ou aconteceu (relatorio pronto, backup, importacao, convite) com historico e contador de nao lidas.",
+        "Barra superior de um app com caixa de notificacoes que atualiza sozinha.",
+        "Qualquer aviso persistente ao usuario que nao deve sumir sozinho."
+    ],
+    avoidUseCases: [
+        "Mensagem rapida que some sozinha (toast): use o feedback de toast.",
+        "Chat ou mensagens entre usuarios.",
+        "Mostrar notificacoes sem a extension user-notifications no backend."
+    ],
+    synonyms: ["sino", "notificacoes", "notification bell", "inbox", "avisos do usuario", "caixa de notificacoes", "alerts"],
+    relatedEntityFields: ["notification", "alert", "unread", "report", "backup"],
+    compositionHints: [
+        "Pôr no cabecalho do layout autenticado; sem SgRealtimeProvider acima ele abre a propria conexao.",
+        "Use types para mapear cada tipo de notificacao a um icone e a acao de abrir (ex.: baixar o relatorio).",
+        "O payload da notificacao so tem identificadores: a acao de abrir busca o arquivo ou registro pela API do dono."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0, date: 0, number: 0.2, denseLayout: 0.2 }
+};

package/dist/notifications/notificationBellLogic.d.ts

@@ -0,0 +1,148 @@
+/** Item da caixa do usuario, como a API devolve. `payload` so tem identificadores. */
+export type SgNotification = {
+    publicId: string;
+    /** Livre (ex.: `report.ready`); o sino nao interpreta, so mapeia para icone e acao. */
+    type: string;
+    title: string;
+    message?: string | null;
+    payload?: Record<string, unknown> | null;
+    read: boolean;
+    readAt?: string | null;
+    /** ISO-8601 com offset. */
+    createdAt: string;
+    expiresAt?: string | null;
+};
+export declare const NOTIFICATIONS_CHANNEL = "user-notifications";
+export declare const DEFAULT_EVENT_PATTERN = "user-notification.*";
+export declare const DEFAULT_MAX_VISIBLE = 100;
+export declare const BADGE_MAX = 99;
+export declare const DEFAULT_POLL_INTERVAL_MS = 45000;
+export declare const MIN_POLL_INTERVAL_MS = 30000;
+export declare const MAX_POLL_INTERVAL_MS = 60000;
+export declare const MAX_POLL_BACKOFF_MS = 300000;
+/** Mais nova primeiro; empate pelo `publicId` decrescente (como o servidor: ORDER BY created_at DESC, id DESC). */
+export declare function sortNotifications(items: readonly SgNotification[]): SgNotification[];
+/** Teto da lista: de 1 a 100 (uma pagina da rota); sem valor ou invalido, 100. */
+export declare function clampMaxVisible(value?: number | null): number;
+/** Vencida (`expiresAt` ate agora): o servidor nao as lista, o sino tambem nao as mostra. */
+export declare function isExpired(item: SgNotification, now: string): boolean;
+/** Lista que o sino mostra: sem repetidos (vale o ultimo), sem vencidas (se `now` vier), ordenada, no maximo `max` itens. */
+export declare function normalizeList(items: readonly SgNotification[], max?: number, now?: string): SgNotification[];
+/** Contador mostrado: o do servidor (`GET /unread-count`) quando se sabe, senao as nao lidas da lista local. */
+export declare function displayUnread(serverCount: number | null | undefined, items: readonly SgNotification[]): number;
+/** So conta as nao lidas. */
+export declare function unreadCount(items: readonly SgNotification[]): number;
+/** Texto do contador: vazio com zero, `99+` acima de 99. */
+export declare function badgeText(count: number): string;
+export declare function markRead(items: readonly SgNotification[], publicId: string, readAt: string): SgNotification[];
+export declare function markAllRead(items: readonly SgNotification[], readAt: string): SgNotification[];
+export declare function removeNotification(items: readonly SgNotification[], publicId: string): SgNotification[];
+/**
+ * Itens nao lidos que chegaram de verdade: desconhecidos e mais novos que o mais novo da lista anterior (uma nao lida
+ * antiga que so apareceu agora, por teto ou por reler, nao e noticia). Sao eles que fazem o sino animar.
+ */
+export declare function newUnread(previous: readonly SgNotification[], next: readonly SgNotification[]): SgNotification[];
+/** `user-notification.*` casa `user-notification.created` e `user-notification.changed`. */
+export declare function matchesEventPattern(pattern: string, event: string): boolean;
+/** O que fazer com um aviso do Pulse. */
+export type SgNotificationEventPlan = {
+    action: "fetch";
+    publicId: string;
+} | {
+    action: "refresh";
+} | {
+    action: "ignore";
+};
+/**
+ * `created` com o identificador: busca so a nova. `created` sem identificador e `changed` (ler, excluir, limpar em
+ * outra aba): le a lista de novo. Outro canal ou evento fora do padrao: ignora.
+ */
+export declare function planEvent(pattern: string, channel: string, event: string, data: unknown): SgNotificationEventPlan;
+/** Estado da conexao em tempo real (o mesmo do `SgRealtimeProvider`). */
+export type SgNotificationStatus = "idle" | "disabled" | "connecting" | "connected" | "reconnecting" | "unavailable" | "auth-error";
+/** Por que o polling foi acionado: realtime desligado na configuracao, ou Pulse fora do ar. */
+export type SgPollingReason = "disabled" | "unavailable";
+/**
+ * Polling so quando nao ha tempo real nem esperanca de ter logo: `disabled` (enabled:false) e `unavailable` /
+ * `auth-error` (Pulse fora do ar). Conectando ou reconectando, o SDK resolve sozinho.
+ */
+export declare function pollingReason(status: SgNotificationStatus): SgPollingReason | null;
+/** Ao (re)conectar, le a lista uma vez para recuperar o que passou enquanto estava fora. */
+export declare function shouldRefreshOnStatus(previous: SgNotificationStatus, next: SgNotificationStatus): boolean;
+/** Intervalo pedido, preso entre 30 e 60 s (padrao 45 s). */
+export declare function clampPollInterval(ms?: number | null): number;
+/**
+ * Espera ate a proxima consulta: intervalo, dobrado a cada falha seguida (ate 5 min), com jitter de -10% a +10%, e nunca acima de 5 min (o teto vale depois do jitter).
+ * `random` entra de fora (0 a 1) para o resultado ser testavel.
+ */
+export declare function nextPollDelay(baseMs: number | null | undefined, failures: number, random: number): number;
+/** Metrica do polling, exposta por `onPollingTick`. */
+export type SgPollingStats = {
+    count: number;
+    lastAt: string | null;
+    reason: SgPollingReason | null;
+};
+export declare const EMPTY_POLLING_STATS: SgPollingStats;
+export declare function recordPollingTick(stats: SgPollingStats, at: string, reason: SgPollingReason): SgPollingStats;
+export type SgNotificationViewState = "loading" | "error" | "empty" | "caughtUp" | "list";
+/**
+ * Qual das telas mostrar. Com erro e lista ja carregada, a lista continua (a falha vira aviso); sem nada para
+ * mostrar, erro vence vazio.
+ */
+export declare function viewState(input: {
+    loaded: boolean;
+    failed: boolean;
+    count: number;
+    unreadOnly?: boolean;
+}): SgNotificationViewState;
+/** O que a lista mostra: em "Nao lidas" so as ainda nao clicadas; em "Todas", tudo. */
+export declare function visibleItems(items: readonly SgNotification[], unreadOnly: boolean): SgNotification[];
+/** Query da lista: em "Nao lidas" pede so as nao lidas ao servidor (`unreadOnly=true`, que ja entra na ETag). */
+export declare function listQuery(page: number, size: number, unreadOnly: boolean): string;
+/** Clicou numa notificacao: em "Nao lidas" ela sai da lista; em "Todas" so perde o destaque. */
+export declare function afterOpen(items: readonly SgNotification[], publicId: string, unreadOnly: boolean, readAt: string): SgNotification[];
+/** Valor inicial do interruptor: sem interruptor, o painel mostra tudo; com ele, vale `defaultUnreadOnly` (padrao true). */
+export declare function initialUnreadOnly(showUnreadToggle?: boolean | null, defaultUnreadOnly?: boolean | null): boolean;
+export type SgRelativeTime = {
+    unit: "now";
+} | {
+    unit: "minute" | "hour" | "day";
+    value: number;
+} | {
+    unit: "date";
+};
+/** Idade da notificacao em partes; o texto ("ha 5 min") e do i18n de cada plataforma. */
+/** Data que da para mostrar (um `createdAt` invalido nao vira 1970 na tela). */
+export declare function isValidInstant(iso: string): boolean;
+export declare function relativeTime(createdAt: string, now: string): SgRelativeTime;
+/** De que lado do sino o painel abre (os mesmos valores do SgPopup). `auto` escolhe o lado em que cabe. */
+export type SgNotificationPlacement = "auto" | "top" | "right" | "bottom" | "left";
+export type SgPanelSide = Exclude<SgNotificationPlacement, "auto">;
+export type SgPanelPosition = {
+    top: number;
+    left: number;
+    side: SgPanelSide;
+    maxHeight: number;
+};
+/** Largura do painel (26rem) e altura maxima (32rem), em px. */
+export declare const PANEL_WIDTH = 416;
+export declare const PANEL_MAX_HEIGHT = 512;
+/**
+ * Onde o painel fica, em coordenadas da janela, sem sair dela. `auto` tenta embaixo, em cima, a direita e a esquerda
+ * (nessa ordem) e fica com o primeiro lado em que o painel cabe inteiro; se nenhum couber, usa embaixo ou em cima,
+ * o que tiver mais espaco. O lado forcado (`top`, `right`...) e respeitado. O painel se alinha ao fim do sino e e
+ * empurrado para dentro da janela. `panelHeight` e a altura real do painel (ate PANEL_MAX_HEIGHT).
+ */
+export declare function panelPosition(anchor: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}, panel: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, placement?: SgNotificationPlacement, offset?: number, padding?: number): SgPanelPosition;
+//# sourceMappingURL=notificationBellLogic.d.ts.map