feat: production-harden app and finalize merge-ready UX/theme baseline

- complete tokenized theme preset system and admin style guide visibility
- refine dashboard layout/scroll behavior and shared async/request UI states
- add user nav-visibility settings across API, migration, and frontend stores
- harden security headers/CSP handling and related test coverage
- enforce CI repository hygiene + frontend contract/theme/build quality gates
- update docs/env references and make migration smoke test head-aware

frontend/src/components/patterns/AsyncStateGate.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import AppEmptyState from "@/components/ui/AppEmptyState.vue";
+import AppSkeleton from "@/components/ui/AppSkeleton.vue";
+
+const props = withDefaults(
+  defineProps<{
+    loading: boolean;
+    loadingLines?: number;
+    empty?: boolean;
+    emptyTitle?: string;
+    emptyBody?: string;
+    showEmpty?: boolean;
+  }>(),
+  {
+    loadingLines: 6,
+    empty: false,
+    emptyTitle: "No data available",
+    emptyBody: "No records matched this request.",
+    showEmpty: true,
+  },
+);
+</script>
+
+<template>
+  <AppSkeleton v-if="props.loading" :lines="props.loadingLines" />
+  <AppEmptyState
+    v-else-if="props.showEmpty && props.empty"
+    :title="props.emptyTitle"
+    :body="props.emptyBody"
+  >
+    <slot name="empty" />
+  </AppEmptyState>
+  <slot v-else />
+</template>