feat(frontend): mobile primitives + bottom-nav chrome (0.56.0)

Phase 1 of the mobile redesign: add the reusable primitives every
later phase plugs into, and switch the layout to a 4-tab bottom nav
+ compact AppBar on phone viewports while leaving the desktop header
untouched above 640px.

- New primitives: BottomNav, Sheet, AppBar, SegmentedControl, all
  with vitest unit tests.
- Layout swaps the desktop header for AppBar + BottomNav under the
  existing 640px breakpoint. Login / register / reader routes opt
  out of the mobile chrome.
- Library tab currently points at /bookmarks; the curated /library
  wrapper lands in Phase 5.
- Independent ResizeObservers publish --app-header-h,
  --mobile-app-bar-h, --app-bottom-nav-h, with a zero-height skip so
  hidden bars don't clobber the visible one's value.
- viewport-fit=cover + env(safe-area-inset-*) tokens for notched
  devices and the iOS home indicator.
- Playwright spec covers visibility at 390px / 1280px viewports and
  tab navigation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/SegmentedControl.svelte.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/svelte';
+import SegmentedControl from './SegmentedControl.svelte';
+
+afterEach(() => cleanup());
+
+const opts = [
+    { label: 'Bookmarks', value: 'bookmarks' as const },
+    { label: 'Collections', value: 'collections' as const },
+    { label: 'History', value: 'history' as const }
+];
+
+describe('SegmentedControl', () => {
+    it('marks the active option with aria-checked=true and a single .active class', () => {
+        render(SegmentedControl, {
+            props: {
+                options: opts,
+                value: 'collections',
+                onchange: () => {},
+                ariaLabel: 'Library tab'
+            }
+        });
+        const active = screen.getByRole('radio', { name: 'Collections' });
+        expect(active.getAttribute('aria-checked')).toBe('true');
+        const inactive = screen.getByRole('radio', { name: 'Bookmarks' });
+        expect(inactive.getAttribute('aria-checked')).toBe('false');
+    });
+
+    it('fires onchange with the new value when an inactive option is clicked', () => {
+        const onchange = vi.fn();
+        render(SegmentedControl, {
+            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
+        });
+        screen.getByRole('radio', { name: 'History' }).click();
+        expect(onchange).toHaveBeenCalledWith('history');
+    });
+
+    it('does not fire onchange when the currently active option is clicked again', () => {
+        const onchange = vi.fn();
+        render(SegmentedControl, {
+            props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
+        });
+        screen.getByRole('radio', { name: 'Bookmarks' }).click();
+        expect(onchange).not.toHaveBeenCalled();
+    });
+
+    it('exposes the group with the provided aria-label', () => {
+        render(SegmentedControl, {
+            props: { options: opts, value: 'bookmarks', onchange: () => {}, ariaLabel: 'Library tab' }
+        });
+        expect(screen.getByRole('radiogroup', { name: 'Library tab' })).toBeTruthy();
+    });
+});