[Morialkar]

Follow-up to #55, which guarded the schema builder's structure tab. The layout tab was still unguarded.

Problem

The route-level useBlocker compared the field draft against savedSnapshot, which only describes the structure tab. The layout tab renders CardLayoutBuilder, which keeps its own working layout and persists it through an explicit Save (PUT /views/{id}). Unsaved layout edits — reordered fields, moved columns, changed column count, toggled labels — were still discarded silently on navigation.

Approach

CardLayoutBuilder gains an optional onDirtyChange prop; the route ORs that into the existing blocker, so both tabs share one guard and one UnsavedChangesModal. No new i18n keys — the existing unsaved.* set covers it.

snapshotLayout serializes exactly what handleSave persists (columnCount, columns, hiddenLabels) and normalizes hiddenLabels to the ids genuinely hidden, so toggling a label on and back off — which leaves an explicit false — still reads as clean. Unassigned fields are excluded, since their order is not part of the saved config.

The baseline is rebased wherever the saved layout changes:

• on load, from the same normalized data the working copy is built from, so fields dropped for no longer existing and columns padded/truncated to columnCount do not register as user edits;
• on save, from the mutation payload rather than waiting for the refetch, so the guard releases the moment the save lands.

The signal resets on unmount: the working layout lives in the component, so once it is gone there is nothing left to warn about.

Two incidental cleanups fall out of this: the sync effect's three duplicated fallback branches collapse into one while computing the baseline, and columnsOf replaces the column-flattening logic that was repeated across the snapshot, handleSave, and the render path.

Known gap

This does not cover switching between the Structure and Layout tabs, which still discards layout edits silently. CardLayoutBuilder unmounts on tab switch and its state goes with it, so by the time any navigation happens there is nothing left to save and no blocker can intervene — which is also why the dirty signal resets on unmount rather than persisting a stale true. Closing it properly means lifting the layout state into the route (or keeping the component mounted and hidden); that felt like a larger change than this fix warranted, but it is the remaining hole in "no silent data loss" on this page.

Tests

Five cases in CardLayoutBuilder.test.tsx cover the dirty state directly: clean on load, dirty on field removal, dirty on column-count change, clean again after save, and clean on unmount. One case in builder-unsaved-guard.test.tsx covers the wiring end to end — switch to the layout tab, edit, and assert shouldBlockFn() and enableBeforeUnload() both flip to true. That last one was confirmed to fail when the onDirtyChange wiring is removed.

Full client suite passes (69 tests, 17 files); tsc -b, oxlint, and Prettier clean.

🤖 Generated with Claude Code