@seedgrid/fe-components 2026.11.1 → 2026.11.3

package/dist/layout/SgTreeView.js

@@ -12,7 +12,7 @@ export function sgTreeFromJson(json, iconRegistry) {
     const walk = (list) => list.map((n) => ({
         id: n.id,
         label: n.label,
-        disabled: n.disabled,
+        disabled: n.enabled === false,
         icon: n.icon ? iconRegistry?.[n.icon] : undefined,
         children: n.children?.length ? walk(n.children) : undefined,
         meta: n.meta
@@ -27,7 +27,7 @@ export function sgTreeFromJsonWithChecked(json, iconRegistry) {
         return {
             id: n.id,
             label: n.label,
-            disabled: n.disabled,
+            disabled: n.enabled === false,
             icon: n.icon ? iconRegistry?.[n.icon] : undefined,
             children: n.children?.length ? walk(n.children) : undefined,
             meta: n.meta
@@ -309,7 +309,7 @@ export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
         }
     }, [checkMode, setCheckedIdsLive]);
     const toggleCheck = React.useCallback((node) => {
-        if (!checkable || node.disabled)
+        if (!checkable || (node.enabled === false))
             return;
         const next = new Set(checkedSet);
         const st = computeCheckedState(node.id, maps.childrenById, checkedSet);
@@ -365,7 +365,7 @@ export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
     const renderNode = (node, depth) => {
         const hasChildren = !!node.children?.length;
         const isOpen = expandedSet.has(node.id);
-        const isDisabled = !!node.disabled;
+        const isDisabled = node.enabled === false;
         const checkedState = checkable ? computeCheckedState(node.id, maps.childrenById, checkedSet) : "unchecked";
         return (_jsxs("div", { children: [_jsxs("div", { className: cn("flex items-center rounded-md", DY.rowPx, DY.rowPy, DY.gap, T.rowHover, isDisabled && "opacity-60"), style: { paddingLeft: 8 + depth * DY.indent }, children: [_jsx("button", { type: "button", className: cn(DY.caret, "shrink-0 rounded-md flex items-center justify-center", "hover:bg-sg-hover2 hover:bg-foreground/10", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", !hasChildren && "opacity-0 pointer-events-none"), onClick: () => hasChildren && !isDisabled && toggleExpand(node), "aria-label": isOpen ? t(i18n, "components.actions.collapse") : t(i18n, "components.actions.expand"), disabled: isDisabled, children: _jsx("span", { className: cn("transition-transform", isOpen && "rotate-90"), children: ">" }) }), checkable &&
                             (() => {
@@ -380,7 +380,7 @@ export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
                             if (track.kind === "custom") {
                                 return (_jsx("div", { className: cn(TRACK_CELL_CLASS, "flex items-center gap-1"), style: trackCellWidth(track), children: track.render(node) }, track.id));
                             }
-                            const trackDisabled = isDisabled || !!track.disabled?.(node);
+                            const trackDisabled = isDisabled || track.enabled?.(node) === false;
                             const adornment = track.adornment?.(node) ?? null;
                             if (track.kind === "boolean") {
                                 const checkedSetTrack = data.checkedSet;
@@ -415,6 +415,6 @@ export const SgTreeView = React.forwardRef(function SgTreeView(props, ref) {
                             }, disabled: isDisabled, children: node.label })] }), hasChildren && isOpen && _jsx("div", { children: node.children.map((c) => renderNode(c, depth + 1)) })] }, node.id));
     };
     const hasAny = filtered.length > 0;
-    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [searchable && (_jsx(SgInputText, { id: searchId, labelText: searchPlaceholder, placeholder: searchPlaceholder, prefixIcon: _jsx(Search, { size: 16 }), clearButton: true, filled: true, inputProps: { value: search }, onChange: (value) => setSearch(value) })), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: expandAll, leftIcon: _jsx(ChevronDown, { className: "size-4" }), children: t(i18n, "components.actions.expandAll") }), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: collapseAll, leftIcon: _jsx(ChevronUp, { className: "size-4" }), children: t(i18n, "components.actions.collapseAll") }), checkable && (_jsx(SgButton, { severity: "danger", appearance: "outline", size: "sm", shape: "rounded", onClick: clearChecked, title: t(i18n, "components.actions.clearSelection"), children: t(i18n, "components.actions.clear") }))] }), _jsxs("div", { className: cn("rounded-sg border border-sg-border", T.panelBg, "text-sg-text"), children: [hasTracks && (_jsxs("div", { className: cn("flex items-center border-b border-sg-border", DY.rowPx, DY.rowPy, DY.gap, SZ.text, "font-semibold text-sg-muted"), children: [_jsx("span", { className: cn(DY.caret, "shrink-0") }), checkable && (_jsx("div", { className: cn(TRACK_CELL_CLASS, "truncate"), style: trackCellWidth({}), title: props.checkableLabel, children: props.checkableLabel })), (tracks ?? []).map((track) => (_jsx("div", { className: cn(TRACK_CELL_CLASS, "truncate"), style: trackCellWidth(track), title: track.label, children: track.label }, track.id)))] })), _jsx("div", { className: cn("overflow-auto", maxHeightClassName), children: _jsx("div", { className: "p-2", children: !hasAny ? (_jsx("div", { className: cn("p-6 text-center", SZ.text, T.subtle), children: emptyText })) : (filtered.map((n) => renderNode(n, 0))) }) }), confirmEnabled && confirmCfg && (_jsx("div", { className: cn("border-t border-sg-border px-3 py-2", (confirmCfg.sticky ?? true) && "sticky bottom-0 bg-sg-surface/95 bg-background/95 backdrop-blur"), children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn("text-xs", T.subtle), children: confirmCfg.hint ?? (_jsxs(_Fragment, { children: [t(i18n, "components.tree.selected", { count: confirmSelectedIds.length }), confirmSelection === "leafOnly" ? t(i18n, "components.tree.selectedLeafs") : ""] })) }), _jsxs("div", { className: "flex items-center gap-2", children: [(confirmCfg.showCancel ?? false) && (_jsx("button", { type: "button", onClick: onCancel, className: cn("rounded-md border border-sg-border", T.panelBg, "text-sg-text hover:bg-sg-hover", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", SZ.btn), children: confirmCfg.cancelLabel ?? t(i18n, "components.actions.cancel") })), _jsx(SgButton, { severity: "secondary", appearance: "outline", size: "md", shape: "rounded", onClick: clearChecked, disabled: !!confirmDisabled, children: t(i18n, "components.actions.clear") }), _jsx(SgButton, { severity: "primary", appearance: "solid", elevation: "sm", size: "md", shape: "rounded", disabled: !!confirmDisabled, onClick: onConfirm, children: confirmCfg.label ?? t(i18n, "components.actions.confirm") })] })] }) }))] })] }));
+    return (_jsxs("div", { className: cn("w-full", className), style: style, children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [searchable && (_jsx(SgInputText, { id: searchId, labelText: searchPlaceholder, placeholder: searchPlaceholder, prefixIcon: _jsx(Search, { size: 16 }), clearButton: true, filled: true, inputProps: { value: search }, onChange: (value) => setSearch(value) })), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: expandAll, leftIcon: _jsx(ChevronDown, { className: "size-4" }), children: t(i18n, "components.actions.expandAll") }), _jsx(SgButton, { severity: "secondary", appearance: "ghost", size: "sm", shape: "rounded", onClick: collapseAll, leftIcon: _jsx(ChevronUp, { className: "size-4" }), children: t(i18n, "components.actions.collapseAll") }), checkable && (_jsx(SgButton, { severity: "danger", appearance: "outline", size: "sm", shape: "rounded", onClick: clearChecked, title: t(i18n, "components.actions.clearSelection"), children: t(i18n, "components.actions.clear") }))] }), _jsxs("div", { className: cn("rounded-sg border border-sg-border", T.panelBg, "text-sg-text"), children: [hasTracks && (_jsxs("div", { className: cn("flex items-center border-b border-sg-border", DY.rowPx, DY.rowPy, DY.gap, SZ.text, "font-semibold text-sg-muted"), children: [_jsx("span", { className: cn(DY.caret, "shrink-0") }), checkable && (_jsx("div", { className: cn(TRACK_CELL_CLASS, "truncate"), style: trackCellWidth({}), title: props.checkableLabel, children: props.checkableLabel })), (tracks ?? []).map((track) => (_jsx("div", { className: cn(TRACK_CELL_CLASS, "truncate"), style: trackCellWidth(track), title: track.label, children: track.label }, track.id)))] })), _jsx("div", { className: cn("overflow-auto", maxHeightClassName), children: _jsx("div", { className: "p-2", children: !hasAny ? (_jsx("div", { className: cn("p-6 text-center", SZ.text, T.subtle), children: emptyText })) : (filtered.map((n) => renderNode(n, 0))) }) }), confirmEnabled && confirmCfg && (_jsx("div", { className: cn("border-t border-sg-border px-3 py-2", (confirmCfg.sticky ?? true) && "sticky bottom-0 bg-sg-surface/95 bg-background/95 backdrop-blur"), children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn("text-xs", T.subtle), children: confirmCfg.hint ?? (_jsxs(_Fragment, { children: [t(i18n, "components.tree.selected", { count: confirmSelectedIds.length }), confirmSelection === "leafOnly" ? t(i18n, "components.tree.selectedLeafs") : ""] })) }), _jsxs("div", { className: "flex items-center gap-2", children: [(confirmCfg.showCancel ?? false) && (_jsx("button", { type: "button", onClick: onCancel, className: cn("rounded-md border border-sg-border", T.panelBg, "text-sg-text hover:bg-sg-hover", "focus:outline-none focus:ring-2 focus:ring-sg-focus/30", SZ.btn), children: confirmCfg.cancelLabel ?? t(i18n, "components.actions.cancel") })), _jsx(SgButton, { severity: "secondary", appearance: "outline", size: "md", shape: "rounded", onClick: clearChecked, enabled: !(!!confirmDisabled), children: t(i18n, "components.actions.clear") }), _jsx(SgButton, { severity: "primary", appearance: "solid", elevation: "sm", size: "md", shape: "rounded", enabled: !(!!confirmDisabled), onClick: onConfirm, children: confirmCfg.label ?? t(i18n, "components.actions.confirm") })] })] }) }))] })] }));
 });
 SgTreeView.displayName = "SgTreeView";

package/dist/menus/SgDockMenu.d.ts

@@ -11,7 +11,7 @@ export type SgDockMenuItem = {
     /** Click handler */
     onClick?: () => void;
     /** Disabled state */
-    disabled?: boolean;
+    enabled?: boolean;
     /** Badge content */
     badge?: string | number;
     /** Custom class name */

package/dist/menus/SgDockMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA0BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAyf1D"}
+{"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA0BD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA2f1D"}

package/dist/menus/SgDockMenu.js

@@ -265,7 +265,7 @@ export function SgDockMenu(props) {
         dragMoved.current = false;
     }, [clearStoredPosition, dragId, enableDragDrop, storageKey]);
     const handleItemClick = React.useCallback((item) => {
-        if (item.disabled)
+        if ((item.enabled === false))
             return;
         if (dragMoved.current) {
             dragMoved.current = false;
@@ -282,6 +282,8 @@ export function SgDockMenu(props) {
     });
     return (_jsxs(_Fragment, { children: [_jsx("div", { ref: containerRef, id: id, className: `sg-dock ${className} ${ELEV_CLS[elevation]}`, style: {
                     ...containerStyleState.style,
+                    // A sombra (ELEV_CLS) fica neste wrapper: sem o raio ela desenhava um retangulo quadrado atras do dock (P140).
+                    borderRadius: `${borderRadius}px`,
                     ...style,
                     transform: containerStyleState.transform,
                     cursor: enableDragDrop ? (isDragging ? "grabbing" : "grab") : "default",
@@ -329,8 +331,8 @@ export function SgDockMenu(props) {
                                 transformOrigin: motion.transformOrigin,
                                 transition: "transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1)",
                                 willChange: "transform",
-                                cursor: item.disabled ? "not-allowed" : "pointer",
-                                opacity: item.disabled ? 0.5 : 1,
+                                cursor: (item.enabled === false) ? "not-allowed" : "pointer",
+                                opacity: (item.enabled === false) ? 0.5 : 1,
                                 zIndex: motion.zIndex,
                             }, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), children: [_jsx("button", { type: "button", className: "sg-dock-item-icon focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", style: {
                                         width: "100%",
@@ -346,7 +348,7 @@ export function SgDockMenu(props) {
                                         e.currentTarget.style.backgroundColor = itemSurfaceHoverColor;
                                     }, onMouseLeave: (e) => {
                                         e.currentTarget.style.backgroundColor = itemSurfaceColor;
-                                    }, onClick: () => handleItemClick(item), "aria-label": item.label, title: item.label, disabled: item.disabled, children: item.icon }), item.badge && (_jsx("div", { className: "sg-dock-item-badge", style: {
+                                    }, onClick: () => handleItemClick(item), "aria-label": item.label, title: item.label, disabled: item.enabled === false, children: item.icon }), item.badge && (_jsx("div", { className: "sg-dock-item-badge", style: {
                                         position: "absolute",
                                         top: -4,
                                         right: -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 }
+};