Settings Layout

Change the workspace name: the bar appears and counts what changed, not that something changed. Change it back and the bar goes. There is no dirty prop to pass — the layout holds the working copy and diffs it against initialValues over the declared fields, so a leftover key or a field dropped from the config cannot pin the bar open with nothing on screen to explain it. Save settles in three beats: pending, a transient Saved, then gone. The baseline moves on success, so a caller that never hands back fresh values still ends up with a clean form.

The same form with a handler that rejects. Everything you typed is still there — a save that clears the form on error is the failure this item exists to prevent. The reason lands on the bar, Save becomes Try again, and the fieldset unlocks so the value can be fixed and sent again. Nothing is logged to a console and nothing is delegated to a toast that outlives the form.

The part hand-rolled versions skip. onSave returns { fieldErrors } keyed by field id: each message lands under its own field with aria-invalid and aria-describedby, the summary above lists them in declaration order, every entry moves focus to its field, and the first one is focused for you. This variant runs saveScope="all", so change something in General and something in Billing, then save from Billing — the layout switches back to General, because an error you cannot see is an error you cannot fix. vat_number is rejected too and no field is called that: it is listed as unmapped rather than dropped.

Discard asks first, through @automindz/confirm-dialog rather than a second dialog of our own, and names the fields it is about to throw away. The section rail is the other half: on the default per-section scope, walking away from unsaved changes asks the same question — that is in-app navigation this component can actually intercept, so it does.

saveScope="all". The bar follows you between sections and counts everything unsaved, and the rail stops asking, because nothing is being left behind. Per-section is the default: a count you cannot see on screen is a count you cannot check before pressing Save. This is the same component with one prop changed, not a fork.

A viewer without permission to edit. Every control is really disabled and the reason is stated once at the top, wired to the fieldset with aria-describedby so it is announced on entry rather than buried in a title on each field. The save bar is absent, because there is nothing it could do. Compare the two fields that stay blocked even for an editor: Data region and Purchase order number carry their own disabledReason in the other variants.

Skeletons at the height of the real rows — a label line and a 32px control per field, as many rows as the section has — so the fields land without the page moving under them. The rail keeps rendering: the section list is config and is known before the values are.

Audit log has no fields and no content. That is a state, not an oversight, so it says which plan unlocks it instead of rendering an empty column with a save bar under it. Driven here through activeSection + onActiveSectionChange, which is how a section gets deep-linked from the URL.

beforeunload covers tab close and reload by itself. In-app App Router navigation cannot be intercepted from inside a component, so the seam is exposed instead of faked: onDirtyChange hands you the flag — the strip above is holding it — and ref.requestLeave() opens the same confirmation the rail uses and resolves once the user gives the changes up. Edit a field, then press Back to overview.