feat(ui): restyle unsaved-changes bar as a compact inverted card (#893)

* feat(ui): restyle unsaved-changes bar as a compact inverted card

Show Page.SettingsActions only when the form is dirty, as a centered
dark card with a secondary Discard button and a primary Save button.

Co-authored-by: best <best@classroomio.com>

* fix(ui): announce settings actions from a persistent live region

Keep role=status mounted outside the dirty-state card so screen readers
still hear the status when the bar appears, without live-region wrapping
the Discard/Save buttons.

Co-authored-by: best <best@classroomio.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

packages/storybook/src/molecules/page/page.stories.svelte

@@ -428,7 +428,9 @@
       </Page.Header>
       <Page.Body>
         {#snippet child()}
-          <div class="text-muted-foreground rounded-lg border border-dashed p-6 text-sm">All changes saved.</div>
+          <div class="text-muted-foreground rounded-lg border border-dashed p-6 text-sm">
+            All changes saved. The compact save card stays hidden until the form is dirty.
+          </div>
         {/snippet}
       </Page.Body>
       <Page.SettingsActions