feat(ui): error & state UX — error surface, view states, map selection, sheet gestures (F4)

- lib/error/: classify any caught error into a stable ErrorKind from the
  transport signal (HTTP status / Connect Code / fetch TypeError /
  navigator.onLine); map to translated error.* messages via reportError
  (sticky Retry toast for retryable kinds) or errorMessageKey (inline).
  Mail compose now surfaces the translated 403/error inline.
- lib/ui/view-state.svelte: shared loading/empty/error placeholder with
  the right live-region role + optional action; entity tables
  (races/sciences/ship-classes) migrated, rest adopt incrementally.
- map/selection-ring.ts: accent ring around the selected planet, fed into
  the map buildExtras alongside the reach circles.
- lib/ui/sheet-dismiss.ts: tap-outside + drag-handle swipe-down dismissal
  for the planet/ship-group bottom-sheets (hand-rolled pointer events).

Tests: error, view-state, selection-ring, sheet-dismiss (761 total).
Docs: ui/docs/error-state-ux.md (+ index); F4 marked done.

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

ui/frontend/src/lib/active-view/table-races.svelte

@@ -34,6 +34,7 @@ data fetching is performed here — the layout is responsible.
 		OrderDraftStore,
 	} from "../../sync/order-draft.svelte";
 	import type { Relation } from "../../sync/order-types";
+	import ViewState from "$lib/ui/view-state.svelte";
 
 	type SortColumn =
 		| "name"
@@ -227,13 +228,17 @@ data fetching is performed here — the layout is responsible.
 	</header>
 
 	{#if !reportLoaded}
-		<p class="status" data-testid="races-loading">
-			{i18n.t("game.table.races.loading")}
-		</p>
+		<ViewState
+			kind="loading"
+			testid="races-loading"
+			message={i18n.t("game.table.races.loading")}
+		/>
 	{:else if races.length === 0}
-		<p class="status" data-testid="races-empty">
-			{i18n.t("game.table.races.empty")}
-		</p>
+		<ViewState
+			kind="empty"
+			testid="races-empty"
+			message={i18n.t("game.table.races.empty")}
+		/>
 	{:else}
 		<table class="grid" data-testid="races-table">
 			<thead>
@@ -388,11 +393,6 @@ data fetching is performed here — the layout is responsible.
 		flex: 1 1 12rem;
 		min-width: 8rem;
 	}
-	.status {
-		margin: 0;
-		color: var(--color-text-muted);
-		font-size: 0.9rem;
-	}
 	.grid {
 		border-collapse: collapse;
 		width: 100%;