@seedgrid/fe-components 2026.6.8 → 2026.7.1

package/dist/commons/SgToaster.d.ts

@@ -14,6 +14,8 @@ export type SgToasterProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childre
     closeButton?: boolean;
     richColors?: boolean;
     transparency?: number;
+    /** Arredonda os cantos de cada toast (rounded-md). Desligue para cantos retos. */
+    rounded?: boolean;
     customColors?: SgToasterCustomColors;
 };
 /** @internal — used by SgToastHost to skip the host-presence check */

package/dist/commons/SgToaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgToaster.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAQlF,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAgGF,sEAAsE;AACtE,eAAO,MAAM,oBAAoB,wBAA6B,CAAC;AAE/D,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,kDA8I9C"}
+{"version":3,"file":"SgToaster.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAQlF,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAgGF,sEAAsE;AACtE,eAAO,MAAM,oBAAoB,wBAA6B,CAAC;AAE/D,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,kDAgJ9C"}

package/dist/commons/SgToaster.js

@@ -97,7 +97,7 @@ function resolveToastColors(type, richColors, customColors) {
 export const SgToasterHostContext = React.createContext(false);
 export function SgToaster(props) {
     const renderedByHost = React.useContext(SgToasterHostContext);
-    const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, transparency = 0, customColors, className, style, ...rest } = props;
+    const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, transparency = 0, rounded = true, customColors, className, style, ...rest } = props;
     const i18n = useComponentsI18n();
     const [toasts, setToasts] = React.useState([]);
     const timersRef = React.useRef({});
@@ -155,7 +155,7 @@ export function SgToaster(props) {
     return (_jsx("div", { className: cn("pointer-events-none fixed z-[1100] flex max-h-screen w-full flex-col gap-2 p-4 sm:w-auto", POSITION_CLASS[position], className), style: style, ...rest, children: visible.map((toast) => {
             const typeColors = resolveToastColors(toast.type, richColors, customColors);
             const canClose = toast.closeButton ?? closeButton;
-            return (_jsxs("div", { className: cn("pointer-events-auto flex min-w-[260px] max-w-[420px] items-start gap-3 rounded-md border px-3 py-2 shadow-lg", toast.className), style: {
+            return (_jsxs("div", { className: cn("pointer-events-auto flex min-w-[260px] max-w-[420px] items-start gap-3 border px-3 py-2 shadow-lg", rounded ? "rounded-md" : "rounded-none", toast.className), style: {
                     borderColor: typeColors.border,
                     backgroundColor: typeColors.bg,
                     color: typeColors.fg,

package/dist/commons/SgToaster.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgToaster.meta.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA4BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}
+{"version":3,"file":"SgToaster.meta.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA6BpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/commons/SgToaster.meta.js

@@ -16,7 +16,8 @@ export const sgMeta = {
         { name: "duration", type: "number", default: 4000, description: "Duracao padrao dos toasts em milissegundos.", semanticRole: "behavior", bindable: true },
         { name: "visibleToasts", type: "number", default: 6, description: "Quantidade maxima de toasts visiveis simultaneamente.", semanticRole: "behavior", bindable: true },
         { name: "closeButton", type: "boolean", default: true, description: "Exibe botao de fechar em cada toast.", semanticRole: "appearance", bindable: true },
-        { name: "richColors", type: "boolean", default: true, description: "Ativa paleta visual rica por tipo de toast.", semanticRole: "appearance", bindable: true }
+        { name: "richColors", type: "boolean", default: true, description: "Ativa paleta visual rica por tipo de toast.", semanticRole: "appearance", bindable: true },
+        { name: "rounded", type: "boolean", default: true, description: "Arredonda os cantos de cada toast (desligue para cantos retos).", semanticRole: "appearance", bindable: true }
     ],
     states: ["idle", "showing-toasts"],
     examples: [

package/dist/commons/SgWhistleHost.d.ts

@@ -1,16 +1,17 @@
-import React from "react";
-import { type SgWhistleSeverity } from "./SgWhistle";
-type SgWhistleColors = {
-    bg: string;
-    fg: string;
-    border: string;
-};
-export type SgWhistleHostProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    max?: number;
-    newestOnTop?: boolean;
-    gap?: number;
-    customColors?: Partial<Record<SgWhistleSeverity, SgWhistleColors>>;
-};
-export declare function SgWhistleHost(props: SgWhistleHostProps): import("react/jsx-runtime").JSX.Element;
-export {};
+import { type SgWhistlerProps } from "./SgWhistler";
+export type SgWhistleHostProps = SgWhistlerProps;
+/**
+ * SgWhistleHost — marca o local onde os whistles vao aparecer.
+ *
+ * Monte em qualquer ponto da arvore. Se existirem varios hosts ao mesmo tempo
+ * (ex.: um no topo e outro embaixo do layout), o mais profundo na arvore React
+ * (ultimo a montar) tem prioridade. Quando ele desmonta, o host montado mais
+ * recentemente antes dele volta a ficar ativo automaticamente.
+ *
+ * Quando qualquer SgWhistleHost esta presente, o SgWhistler "solto" cede a vez
+ * e para de renderizar, para os dois coexistirem sem duplicar.
+ *
+ * Aceita os mesmos props do SgWhistler (max, newestOnTop, gap, roundBorder, etc.).
+ */
+export declare function SgWhistleHost(props: SgWhistleHostProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SgWhistleHost.d.ts.map

package/dist/commons/SgWhistleHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgWhistleHost.d.ts","sourceRoot":"","sources":["../../src/commons/SgWhistleHost.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAMrB,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACxF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;CACpE,CAAC;AA2GF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA+HtD"}
+{"version":3,"file":"SgWhistleHost.d.ts","sourceRoot":"","sources":["../../src/commons/SgWhistleHost.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAavF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kDAiCtD"}

package/dist/commons/SgWhistleHost.js

@@ -1,154 +1,45 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { t, useComponentsI18n } from "../i18n";
-import { dismissSgWhistle, subscribeSgWhistles } from "./SgWhistle";
-function cn(...parts) {
-    return parts.filter(Boolean).join(" ");
-}
-const DEFAULT_COLORS = {
-    default: {
-        bg: "hsl(var(--background))",
-        fg: "hsl(var(--foreground))",
-        border: "hsl(var(--border))"
-    },
-    success: {
-        bg: "#f0fdf4",
-        fg: "#14532d",
-        border: "#86efac"
-    },
-    info: {
-        bg: "#eff6ff",
-        fg: "#1e3a8a",
-        border: "#93c5fd"
-    },
-    warning: {
-        bg: "#fffbeb",
-        fg: "#78350f",
-        border: "#fcd34d"
-    },
-    error: {
-        bg: "#fef2f2",
-        fg: "#7f1d1d",
-        border: "#fca5a5"
-    },
-    loading: {
-        bg: "#eff6ff",
-        fg: "#1d4ed8",
-        border: "#60a5fa"
-    }
-};
-function clampOpacity(value) {
-    if (value === undefined || Number.isNaN(value)) {
-        return 1;
-    }
-    return Math.max(0, Math.min(1, value));
-}
-function resolveColors(severity, customColors) {
-    const base = DEFAULT_COLORS[severity];
-    const custom = customColors?.[severity];
-    return {
-        bg: custom?.bg ?? base.bg,
-        fg: custom?.fg ?? base.fg,
-        border: custom?.border ?? base.border
-    };
-}
-function buildBorderStyle(borderStyle, colors) {
-    if (borderStyle === "none") {
-        return {
-            borderWidth: 0
-        };
-    }
-    if (borderStyle === "left-accent") {
-        return {
-            borderWidth: 1,
-            borderColor: colors.border,
-            borderLeftWidth: 4
-        };
-    }
-    if (borderStyle === "full-accent") {
-        return {
-            borderWidth: 1,
-            borderColor: colors.border,
-            boxShadow: `inset 0 0 0 1px ${colors.border}`
-        };
-    }
-    if (borderStyle === "soft") {
-        return {
-            borderWidth: 1,
-            borderColor: colors.border,
-            boxShadow: "0 1px 2px rgba(15, 23, 42, 0.06)"
-        };
-    }
-    return {
-        borderWidth: 1,
-        borderColor: colors.border
-    };
-}
-function renderWhistleContent(whistle) {
-    if (whistle.renderer !== undefined) {
-        return whistle.renderer;
-    }
-    return (_jsxs("div", { className: "min-w-0 flex-1", children: [whistle.title ? _jsx("div", { className: "text-sm font-semibold", children: whistle.title }) : null, whistle.message ? _jsx("div", { className: cn(whistle.title ? "mt-0.5" : undefined, "text-sm"), children: whistle.message }) : null] }));
-}
+import { SgWhistler, SgWhistlerHostContext } from "./SgWhistler";
+import { registerWhistleHost, unregisterWhistleHost, getActiveWhistleHostId, subscribeWhistleHostRegistry, nextWhistleHostId } from "./sgWhistleHostRegistry";
+/**
+ * SgWhistleHost — marca o local onde os whistles vao aparecer.
+ *
+ * Monte em qualquer ponto da arvore. Se existirem varios hosts ao mesmo tempo
+ * (ex.: um no topo e outro embaixo do layout), o mais profundo na arvore React
+ * (ultimo a montar) tem prioridade. Quando ele desmonta, o host montado mais
+ * recentemente antes dele volta a ficar ativo automaticamente.
+ *
+ * Quando qualquer SgWhistleHost esta presente, o SgWhistler "solto" cede a vez
+ * e para de renderizar, para os dois coexistirem sem duplicar.
+ *
+ * Aceita os mesmos props do SgWhistler (max, newestOnTop, gap, roundBorder, etc.).
+ */
 export function SgWhistleHost(props) {
-    const { max = 4, newestOnTop = false, gap = 12, customColors, className, style, ...rest } = props;
-    const i18n = useComponentsI18n();
-    const [whistles, setWhistles] = React.useState([]);
-    const timersRef = React.useRef({});
-    React.useEffect(() => subscribeSgWhistles(setWhistles), []);
-    const visible = React.useMemo(() => {
-        if (max <= 0) {
-            return [];
-        }
-        const items = whistles.slice(-max);
-        return newestOnTop ? [...items].reverse() : items;
-    }, [whistles, max, newestOnTop]);
-    React.useEffect(() => {
-        const activeIds = new Set();
-        visible.forEach((whistle) => {
-            activeIds.add(whistle.id);
-            if (timersRef.current[whistle.id]) {
-                return;
-            }
-            if (whistle.severity === "loading") {
-                return;
-            }
-            const timeout = whistle.duration ?? 5000;
-            if (timeout <= 0) {
-                return;
-            }
-            timersRef.current[whistle.id] = setTimeout(() => {
-                dismissSgWhistle(whistle.id);
-                delete timersRef.current[whistle.id];
-            }, timeout);
-        });
-        Object.entries(timersRef.current).forEach(([id, timeoutRef]) => {
-            if (activeIds.has(id)) {
-                return;
-            }
-            clearTimeout(timeoutRef);
-            delete timersRef.current[id];
-        });
-    }, [visible]);
+    // ID estavel entre re-renders, gerado uma vez por instancia.
+    const idRef = React.useRef(null);
+    if (idRef.current === null) {
+        idRef.current = nextWhistleHostId();
+    }
+    const id = idRef.current;
+    // Comeca inativo para evitar mismatch de hidratacao no SSR.
+    const [isActive, setIsActive] = React.useState(false);
+    // Registra no mount, desregistra no unmount.
     React.useEffect(() => {
+        registerWhistleHost(id);
+        setIsActive(getActiveWhistleHostId() === id);
         return () => {
-            Object.values(timersRef.current).forEach((timeoutRef) => clearTimeout(timeoutRef));
-            timersRef.current = {};
+            unregisterWhistleHost(id);
         };
-    }, []);
-    return (_jsx("div", { className: cn("flex flex-col", className), style: { gap, ...style }, ...rest, children: visible.map((whistle) => {
-            const colors = resolveColors(whistle.severity, customColors);
-            const dismissible = whistle.dismissible ?? true;
-            return (_jsxs("div", { className: cn("flex items-start gap-3 rounded-lg px-3 py-2", whistle.borderStyle === "none" ? undefined : "border", whistle.className), style: {
-                    backgroundColor: colors.bg,
-                    color: colors.fg,
-                    opacity: clampOpacity(whistle.opacity),
-                    ...buildBorderStyle(whistle.borderStyle ?? "solid", colors),
-                    ...whistle.style
-                }, role: "status", "aria-live": "polite", children: [whistle.icon ? _jsx("div", { className: "shrink-0 pt-0.5", children: whistle.icon }) : null, renderWhistleContent(whistle), whistle.action ? (_jsx("button", { type: "button", className: "shrink-0 rounded border border-current/25 px-2 py-1 text-xs font-medium", onClick: () => {
-                            whistle.action?.onClick();
-                            dismissSgWhistle(whistle.id);
-                        }, children: whistle.action.label })) : null, dismissible ? (_jsx("button", { type: "button", className: "shrink-0 rounded px-1 py-0.5 text-sm leading-none opacity-80", "aria-label": t(i18n, "components.toaster.close"), onClick: () => dismissSgWhistle(whistle.id), children: "x" })) : null] }, whistle.id));
-        }) }));
+    }, [id]);
+    // Reage a outros hosts registrando / desregistrando.
+    React.useEffect(() => {
+        return subscribeWhistleHostRegistry(() => {
+            setIsActive(getActiveWhistleHostId() === id);
+        });
+    }, [id]);
+    if (!isActive)
+        return null;
+    return (_jsx(SgWhistlerHostContext.Provider, { value: true, children: _jsx(SgWhistler, { ...props }) }));
 }

package/dist/commons/SgWhistleHost.meta.d.ts.map

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

package/dist/commons/SgWhistleHost.meta.js

@@ -7,39 +7,41 @@ export const sgMeta = {
     displayName: "SgWhistleHost",
     category: "feedback",
     subcategory: "whistle-host",
-    description: "Host de avisos persistentes ou semi-persistentes em pilha, com cores por severidade, acao opcional e controle de maximo visivel.",
-    tags: ["feedback", "alerts", "host", "inline-notifications"],
-    capabilities: ["alert-stacking", "severity-colors", "dismissible-items", "timed-dismiss"],
+    description: "Marca o local onde os whistles aparecem. Suporta varios hosts simultaneos (ex.: topo e rodape) via registry: apenas o ultimo montado fica ativo, e o SgWhistler solto cede a vez quando qualquer host esta presente.",
+    tags: ["feedback", "alerts", "host", "inline-notifications", "registry"],
+    capabilities: ["alert-stacking", "severity-colors", "dismissible-items", "timed-dismiss", "multi-host-registry"],
     fieldSemantics: ["alertHost", "persistentFeedback", "stackedAlerts"],
     props: [
-        { name: "max", type: "number", default: 4, description: "Quantidade maxima de whistle items visiveis.", semanticRole: "behavior", bindable: true },
+        { name: "max", type: "number", default: 4, description: "Quantidade maxima de whistle items visiveis neste host.", semanticRole: "behavior", bindable: true },
         { name: "newestOnTop", type: "boolean", default: false, description: "Inverte a ordem visual para mostrar os mais novos primeiro.", semanticRole: "behavior", bindable: true },
-        { name: "gap", type: "number", default: 12, description: "Espacamento entre os avisos renderizados.", semanticRole: "appearance", bindable: true }
+        { name: "gap", type: "number", default: 12, description: "Espacamento entre os avisos renderizados.", semanticRole: "appearance", bindable: true },
+        { name: "rounded", type: "boolean", default: true, description: "Arredonda os cantos de cada whistle (desligue para cantos retos).", semanticRole: "appearance", bindable: true }
     ],
-    states: ["idle", "showing-alerts"],
+    states: ["idle", "showing-alerts", "inactive"],
     examples: [
-        { id: "basic", title: "Basico", file: "apps/showcase/src/app/components/sg-whistle-host/samples/basico.tsx.sample", kind: "sample" },
+        { id: "basic", title: "Basico", file: "apps/showcase/src/app/components/sg-whistle-host/samples/base-setup.tsx.sample", kind: "sample" },
         { id: "playground", title: "Playground", file: "apps/showcase/src/app/components/sg-whistle-host/sg-whistle-host.tsx.playground", kind: "playground" }
     ],
     showcase: { route: "/components/sg-whistle-host", hasPlayground: true, hasPropsTable: true },
-    sdui: { rendererType: "feedback.whistle-host", acceptsDataBinding: false, defaultProps: { max: 4, newestOnTop: false } }
+    sdui: { rendererType: "feedback.whistle-host", acceptsDataBinding: false, defaultProps: { max: 4, newestOnTop: false, rounded: true } }
 };
 export const aiHints = {
     version: "0.1",
     preferredUseCases: [
-        "Exibir avisos empilhados mais persistentes do que um toast.",
-        "Comunicar erros, warnings e mensagens operacionais inline em uma area fixa.",
-        "Agrupar alertas com acao e dismiss local."
+        "Definir um ou mais pontos fixos onde os avisos empilhados devem aparecer.",
+        "Layouts com hosts em zonas diferentes (ex.: um no topo e outro embaixo), com prioridade automatica ao ultimo montado.",
+        "Comunicar erros, warnings e mensagens operacionais inline em area fixa."
     ],
     avoidUseCases: [
-        "Feedback ultraleve e efemero; nesses casos prefira toaster.",
-        "Modais de confirmacao.",
-        "Indicadores compactos como badge."
+        "Um unico ponto de exibicao sem necessidade de registry; ai o SgWhistler basta.",
+        "Feedback ultraleve e efemero; prefira toaster.",
+        "Modais de confirmacao."
     ],
-    synonyms: ["alert host", "message stack", "persistent notifications"],
+    synonyms: ["alert host", "message stack host", "persistent notifications host"],
     relatedEntityFields: ["alerts", "warnings", "inlineMessages", "systemMessages"],
     compositionHints: [
         "Usar com a API `sgWhistle` para publicar avisos.",
+        "Espelha o par SgToaster/SgToastHost: SgWhistler e o renderizador, SgWhistleHost e o host com registry.",
         "Combinar com SgCard ou SgPanel em dashboards operacionais."
     ],
     rankingSignals: { freeText: 0, structuredChoice: 0, date: 0, number: 0, denseLayout: 0.7 }

package/dist/commons/SgWhistler.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { type SgWhistleSeverity } from "./SgWhistle";
+type SgWhistleColors = {
+    bg: string;
+    fg: string;
+    border: string;
+};
+export type SgWhistlerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    max?: number;
+    newestOnTop?: boolean;
+    gap?: number;
+    /** Arredonda os cantos de cada whistle (rounded-lg). Desligue para cantos retos. */
+    rounded?: boolean;
+    customColors?: Partial<Record<SgWhistleSeverity, SgWhistleColors>>;
+};
+/** @internal — usado por SgWhistleHost para pular a checagem de presenca de host. */
+export declare const SgWhistlerHostContext: React.Context<boolean>;
+export declare function SgWhistler(props: SgWhistlerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SgWhistler.d.ts.map

package/dist/commons/SgWhistler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgWhistler.d.ts","sourceRoot":"","sources":["../../src/commons/SgWhistler.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAKL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAOrB,KAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;CACpE,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,wBAA6B,CAAC;AA2GhE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,kDA6IhD"}

package/dist/commons/SgWhistler.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { t, useComponentsI18n } from "../i18n";
+import { dismissSgWhistle, subscribeSgWhistles } from "./SgWhistle";
+import { hasAnyWhistleHost, subscribeWhistleHostRegistry } from "./sgWhistleHostRegistry";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+/** @internal — usado por SgWhistleHost para pular a checagem de presenca de host. */
+export const SgWhistlerHostContext = React.createContext(false);
+const DEFAULT_COLORS = {
+    default: {
+        bg: "hsl(var(--background))",
+        fg: "hsl(var(--foreground))",
+        border: "hsl(var(--border))"
+    },
+    success: {
+        bg: "#f0fdf4",
+        fg: "#14532d",
+        border: "#86efac"
+    },
+    info: {
+        bg: "#eff6ff",
+        fg: "#1e3a8a",
+        border: "#93c5fd"
+    },
+    warning: {
+        bg: "#fffbeb",
+        fg: "#78350f",
+        border: "#fcd34d"
+    },
+    error: {
+        bg: "#fef2f2",
+        fg: "#7f1d1d",
+        border: "#fca5a5"
+    },
+    loading: {
+        bg: "#eff6ff",
+        fg: "#1d4ed8",
+        border: "#60a5fa"
+    }
+};
+function clampOpacity(value) {
+    if (value === undefined || Number.isNaN(value)) {
+        return 1;
+    }
+    return Math.max(0, Math.min(1, value));
+}
+function resolveColors(severity, customColors) {
+    const base = DEFAULT_COLORS[severity];
+    const custom = customColors?.[severity];
+    return {
+        bg: custom?.bg ?? base.bg,
+        fg: custom?.fg ?? base.fg,
+        border: custom?.border ?? base.border
+    };
+}
+function buildBorderStyle(borderStyle, colors) {
+    if (borderStyle === "none") {
+        return {
+            borderWidth: 0
+        };
+    }
+    if (borderStyle === "left-accent") {
+        return {
+            borderWidth: 1,
+            borderColor: colors.border,
+            borderLeftWidth: 4
+        };
+    }
+    if (borderStyle === "full-accent") {
+        return {
+            borderWidth: 1,
+            borderColor: colors.border,
+            boxShadow: `inset 0 0 0 1px ${colors.border}`
+        };
+    }
+    if (borderStyle === "soft") {
+        return {
+            borderWidth: 1,
+            borderColor: colors.border,
+            boxShadow: "0 1px 2px rgba(15, 23, 42, 0.06)"
+        };
+    }
+    return {
+        borderWidth: 1,
+        borderColor: colors.border
+    };
+}
+function renderWhistleContent(whistle) {
+    if (whistle.renderer !== undefined) {
+        return whistle.renderer;
+    }
+    return (_jsxs("div", { className: "min-w-0 flex-1", children: [whistle.title ? _jsx("div", { className: "text-sm font-semibold", children: whistle.title }) : null, whistle.message ? _jsx("div", { className: cn(whistle.title ? "mt-0.5" : undefined, "text-sm"), children: whistle.message }) : null] }));
+}
+export function SgWhistler(props) {
+    const renderedByHost = React.useContext(SgWhistlerHostContext);
+    const { max = 4, newestOnTop = false, gap = 12, rounded = true, customColors, className, style, ...rest } = props;
+    const i18n = useComponentsI18n();
+    const [whistles, setWhistles] = React.useState([]);
+    const timersRef = React.useRef({});
+    // Se houver algum SgWhistleHost montado, o SgWhistler "solto" cede a vez (evita duplicar).
+    const [hostPresent, setHostPresent] = React.useState(() => !renderedByHost && hasAnyWhistleHost());
+    React.useEffect(() => subscribeSgWhistles(setWhistles), []);
+    React.useEffect(() => {
+        if (renderedByHost)
+            return;
+        setHostPresent(hasAnyWhistleHost());
+        return subscribeWhistleHostRegistry(() => setHostPresent(hasAnyWhistleHost()));
+    }, [renderedByHost]);
+    const visible = React.useMemo(() => {
+        if (max <= 0) {
+            return [];
+        }
+        const items = whistles.slice(-max);
+        return newestOnTop ? [...items].reverse() : items;
+    }, [whistles, max, newestOnTop]);
+    React.useEffect(() => {
+        const activeIds = new Set();
+        visible.forEach((whistle) => {
+            activeIds.add(whistle.id);
+            if (timersRef.current[whistle.id]) {
+                return;
+            }
+            if (whistle.severity === "loading") {
+                return;
+            }
+            const timeout = whistle.duration ?? 5000;
+            if (timeout <= 0) {
+                return;
+            }
+            timersRef.current[whistle.id] = setTimeout(() => {
+                dismissSgWhistle(whistle.id);
+                delete timersRef.current[whistle.id];
+            }, timeout);
+        });
+        Object.entries(timersRef.current).forEach(([id, timeoutRef]) => {
+            if (activeIds.has(id)) {
+                return;
+            }
+            clearTimeout(timeoutRef);
+            delete timersRef.current[id];
+        });
+    }, [visible]);
+    React.useEffect(() => {
+        return () => {
+            Object.values(timersRef.current).forEach((timeoutRef) => clearTimeout(timeoutRef));
+            timersRef.current = {};
+        };
+    }, []);
+    if (hostPresent)
+        return null;
+    return (_jsx("div", { className: cn("flex flex-col", className), style: { gap, ...style }, ...rest, children: visible.map((whistle) => {
+            const colors = resolveColors(whistle.severity, customColors);
+            const dismissible = whistle.dismissible ?? true;
+            return (_jsxs("div", { className: cn("flex items-start gap-3 px-3 py-2", rounded ? "rounded-lg" : "rounded-none", whistle.borderStyle === "none" ? undefined : "border", whistle.className), style: {
+                    backgroundColor: colors.bg,
+                    color: colors.fg,
+                    opacity: clampOpacity(whistle.opacity),
+                    ...buildBorderStyle(whistle.borderStyle ?? "solid", colors),
+                    ...whistle.style
+                }, role: "status", "aria-live": "polite", children: [whistle.icon ? _jsx("div", { className: "shrink-0 pt-0.5", children: whistle.icon }) : null, renderWhistleContent(whistle), whistle.action ? (_jsx("button", { type: "button", className: "shrink-0 rounded border border-current/25 px-2 py-1 text-xs font-medium", onClick: () => {
+                            whistle.action?.onClick();
+                            dismissSgWhistle(whistle.id);
+                        }, children: whistle.action.label })) : null, dismissible ? (_jsx("button", { type: "button", className: "shrink-0 rounded px-1 py-0.5 text-sm leading-none opacity-80", "aria-label": t(i18n, "components.toaster.close"), onClick: () => dismissSgWhistle(whistle.id), children: "x" })) : null] }, whistle.id));
+        }) }));
+}

package/dist/commons/SgWhistler.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=SgWhistler.meta.d.ts.map

package/dist/commons/SgWhistler.meta.d.ts.map

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

package/dist/commons/SgWhistler.meta.js

@@ -0,0 +1,47 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "feedback.whistler",
+    package: "@seedgrid/fe-components",
+    exportName: "SgWhistler",
+    slug: "sg-whistler",
+    displayName: "SgWhistler",
+    category: "feedback",
+    subcategory: "whistler",
+    description: "Renderizador de avisos persistentes ou semi-persistentes em pilha, com cores por severidade, acao opcional e controle de maximo visivel. Cede a vez quando um SgWhistleHost esta presente.",
+    tags: ["feedback", "alerts", "renderer", "inline-notifications"],
+    capabilities: ["alert-stacking", "severity-colors", "dismissible-items", "timed-dismiss"],
+    fieldSemantics: ["alertRenderer", "persistentFeedback", "stackedAlerts"],
+    props: [
+        { name: "max", type: "number", default: 4, description: "Quantidade maxima de whistle items visiveis.", semanticRole: "behavior", bindable: true },
+        { name: "newestOnTop", type: "boolean", default: false, description: "Inverte a ordem visual para mostrar os mais novos primeiro.", semanticRole: "behavior", bindable: true },
+        { name: "gap", type: "number", default: 12, description: "Espacamento entre os avisos renderizados.", semanticRole: "appearance", bindable: true },
+        { name: "rounded", type: "boolean", default: true, description: "Arredonda os cantos de cada whistle (desligue para cantos retos).", semanticRole: "appearance", bindable: true }
+    ],
+    states: ["idle", "showing-alerts"],
+    examples: [
+        { id: "basic", title: "Basico", file: "apps/showcase/src/app/components/sg-whistler/samples/base-setup.tsx.sample", kind: "sample" },
+        { id: "playground", title: "Playground", file: "apps/showcase/src/app/components/sg-whistler/sg-whistler.tsx.playground", kind: "playground" }
+    ],
+    showcase: { route: "/components/sg-whistler", hasPlayground: true, hasPropsTable: true },
+    sdui: { rendererType: "feedback.whistler", acceptsDataBinding: false, defaultProps: { max: 4, newestOnTop: false, rounded: true } }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Exibir avisos empilhados mais persistentes do que um toast em uma area fixa.",
+        "Comunicar erros, warnings e mensagens operacionais inline.",
+        "Agrupar alertas com acao e dismiss local, sem precisar de multiplos pontos de montagem."
+    ],
+    avoidUseCases: [
+        "Precisar de varios pontos de montagem coexistindo; nesses casos use SgWhistleHost.",
+        "Feedback ultraleve e efemero; prefira toaster.",
+        "Modais de confirmacao."
+    ],
+    synonyms: ["alert renderer", "message stack", "persistent notifications"],
+    relatedEntityFields: ["alerts", "warnings", "inlineMessages", "systemMessages"],
+    compositionHints: [
+        "Usar com a API `sgWhistle` para publicar avisos.",
+        "Para varios locais de exibicao no layout, prefira SgWhistleHost (host com registry)."
+    ],
+    rankingSignals: { freeText: 0, structuredChoice: 0, date: 0, number: 0, denseLayout: 0.7 }
+};

package/dist/commons/sgWhistleHostRegistry.d.ts

@@ -0,0 +1,7 @@
+export declare function registerWhistleHost(id: string): void;
+export declare function unregisterWhistleHost(id: string): void;
+export declare function getActiveWhistleHostId(): string | null;
+export declare function hasAnyWhistleHost(): boolean;
+export declare function subscribeWhistleHostRegistry(fn: () => void): () => void;
+export declare function nextWhistleHostId(): string;
+//# sourceMappingURL=sgWhistleHostRegistry.d.ts.map

package/dist/commons/sgWhistleHostRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgWhistleHostRegistry.d.ts","sourceRoot":"","sources":["../../src/commons/sgWhistleHostRegistry.ts"],"names":[],"mappings":"AAgBA,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,MAAM,QAK7C;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,QAM/C;AAED,wBAAgB,sBAAsB,IAAI,MAAM,GAAG,IAAI,CAEtD;AAED,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED,wBAAgB,4BAA4B,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKvE;AAED,wBAAgB,iBAAiB,IAAI,MAAM,CAG1C"}