Toast Stack React component

Toast Stack shows short notifications that pile up neatly in a corner of the screen. New toasts slide in on top and older ones tuck behind them as a stacked card, and hovering or tabbing into the stack fans them out so each can be read. Each toast can have a title, a description, an icon for its tone, an action button, a close button and a thin bar that counts down until it closes itself; a sideways swipe dismisses one.

The useToastStack hook holds the toasts and gives you push, which adds a toast and returns its id, update, dismiss and clear. Render ToastStack once with its toasts and dismiss. tone picks neutral, success, error, warning, info or loading, and a loading toast stays until you update it to another tone. position picks one of six corners and edges, max limits how many show at once, expand keeps it fanned out with "always", and duration sets the default time before toasts close.

Use Toast Stack for short, non-blocking feedback after something happens: a save, a payment, an upload, a failed sync. Several toasts in a row stay tidy because they stack into one card and only fan out when someone hovers or tabs into them.

Use a loading toast for work that takes a moment and update() it to success or error when it finishes, so the same toast carries the whole story instead of two separate ones.

Use a Modal or an inline Callout instead when the message needs a decision or has to stay on screen next to the thing it's about.