Sticky Bottom Pill Banner Block for React

Add sticky bottom-4 to the pill (the section named "Unsaved changes"). A sticky element stays inside its parent, so render the pill as the last child of the container that holds the whole form, not inside a short wrapper of its own: remove the block's wrapper padding and the page-width column, and place the pill after the form's fields. For a pill pinned to the viewport instead, use fixed inset-x-4 bottom-4 z-50 mx-auto. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))].

The count is the count state, and settle is where Save and Discard act. Derive the count from your form state (the number of dirty fields) and pass it in; call your save in save and your reset in discard, and let the pill settle when the promise resolves instead of after a fixed 700 ms. Show the pill only while the count is above 0 if you'd rather it came and went.

The digits change in place instead of rolling, and the pill settles after the same short wait. Nothing else moves: the saved and discarded messages replace the count in the same cell without any shift.

While the count rolls, both buttons are aria-disabled and the handler ignores presses, so a second click does nothing and focus stays where it was. When the pill settles, focus moves to Edit again, and Edit again moves it back to Save, so a keyboard user is never left on a button that went away.

The pill's text is plain text, so it reads like any line. A polite status line, empty when the page loads, speaks "All changes saved" or "Changes discarded" when the pill settles and "1 unsaved change" after Edit again. Nothing is announced while the digits roll.

Below sm the pill is a rounded card: the message on top and the two buttons under it, sharing the width. From sm it is one row, up to 36rem wide, with the count at the start and the buttons at the end. At 320 pixels nothing scrolls sideways, and in a right-to-left layout it mirrors.