feat: integrate accessible journey world and controls

src/components/SiteNavigation.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import { watch } from "vue";
 import type { SectionId } from "@/content/types";
-import { useJourneySections } from "@/composables/useJourneySections";
-import { useKeyboardNavigation } from "@/composables/useKeyboardNavigation";
+import type { JourneySnapshot } from '@/journey/types';
 
 const props = defineProps<{
   items: ReadonlyArray<{ id: SectionId; label: string }>;
+  journey: JourneySnapshot;
+  onSectionLinkClick: (event: MouseEvent) => void;
 }>();
-const canonicalIds = props.items.map((item) => item.id);
-const navigation = useKeyboardNavigation(canonicalIds);
-const journey = useJourneySections(canonicalIds, navigation.state);
-
-watch(
-  () => journey.value.activeSectionId,
-  (id) => navigation.notePassiveSection(id),
-);
 </script>
 
 <template>
@@ -24,9 +16,9 @@ watch(
         <a
           :href="`#${item.id}`"
           :aria-current="
-            journey.activeSectionId === item.id ? 'page' : undefined
+            props.journey.activeSectionId === item.id ? 'page' : undefined
           "
-          @click="navigation.onSectionLinkClick"
+          @click="props.onSectionLinkClick"
           >{{ item.label }}</a
         >
       </li>