@slidev/client 0.48.0-beta.20 → 0.48.0-beta.21

package/builtin/SlidevVideo.vue

@@ -22,7 +22,7 @@ const ended = ref(false)
 const matchRoute = computed(() => {
   if (!video.value || currentContext?.value !== 'slide')
     return false
-  return route === $slidev?.nav.currentRoute
+  return route && route.no === $slidev?.nav.currentSlideNo
 })
 
 const matchClick = computed(() => {

package/builtin/Toc.vue

@@ -74,7 +74,7 @@ function filterOnlySiblings(tree: TocItem[]): TocItem[] {
 }
 
 const toc = computed(() => {
-  const tree = $slidev?.nav.tree
+  const tree = $slidev?.nav.tocTree
   if (!tree)
     return []
   let tocTree = filterTreeDepth(tree)

package/builtin/TocList.vue

@@ -48,7 +48,7 @@ const styles = computed(() => {
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
       <Link :to="item.path">
-        <Titles :no="item.path" />
+        <Titles :no="item.no" />
       </Link>
       <TocList
         v-if="item.children.length > 0"

package/composables/useClicks.ts

@@ -1,11 +1,11 @@
 import { sum } from '@antfu/utils'
-import type { ClicksContext } from '@slidev/types'
+import type { ClicksContext, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
 import { computed, ref, shallowReactive } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import { currentRoute, isPrintMode, isPrintWithClicks, queryClicks, routeForceRefresh } from '../logic/nav'
+import { currentSlideNo, isPrintMode, isPrintWithClicks } from '../logic/nav'
 import { normalizeAtProp } from '../logic/utils'
 import { CLICKS_MAX } from '../constants'
+import { routeForceRefresh, useRouteQuery } from '../logic/route'
 
 function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): ClicksContext {
   const relativeOffsets: ClicksContext['relativeOffsets'] = new Map()
@@ -63,27 +63,28 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
   }
 }
 
-export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksContext {
+const queryClicksRaw = useRouteQuery('clicks', '0')
+
+export function usePrimaryClicks(route: SlideRoute): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
-  const thisPath = +(route?.path ?? Number.NaN)
+  const thisNo = route.no
   const current = computed({
     get() {
-      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
-      if (!currentPath || Number.isNaN(currentPath))
-        return 0
-      if (currentPath === thisPath)
-        return queryClicks.value
-      else if (currentPath > thisPath)
+      // eslint-disable-next-line ts/no-use-before-define
+      if (context.disabled)
+        return CLICKS_MAX
+      if (currentSlideNo.value === thisNo)
+        return +(queryClicksRaw.value || 0) || 0
+      else if (currentSlideNo.value > thisNo)
         return CLICKS_MAX
       else
         return 0
     },
     set(v) {
-      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
-      if (currentPath === thisPath) {
+      if (currentSlideNo.value === thisNo) {
         // eslint-disable-next-line ts/no-use-before-define
-        queryClicks.value = Math.min(v, context.total)
+        queryClicksRaw.value = Math.min(v, context.total).toString()
       }
     },
   })
@@ -96,6 +97,6 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   return context
 }
 
-export function useFixedClicks(route?: RouteRecordRaw | undefined, currentInit = 0): ClicksContext {
+export function useFixedClicks(route?: SlideRoute | undefined, currentInit = 0): ClicksContext {
   return useClicksContextBase(ref(currentInit), route?.meta?.clicks)
 }

package/composables/useContext.ts

@@ -1,16 +1,11 @@
-import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import type { SlidevContext } from '../modules/context'
 import { configs } from '../env'
-import { useNav } from './useNav'
+import type { SlidevContext } from '../modules/context'
+import * as nav from '../logic/nav'
 
-export function useContext(
-  route: ComputedRef<RouteLocationNormalizedLoaded>,
-): SlidevContext {
-  const nav = useNav(route)
+export function useContext(): SlidevContext {
   return {
-    nav,
+    nav: { ...nav }, // Convert the module to a plain object
     configs,
     themeConfigs: computed(() => configs.themeConfig),
   }

package/composables/useNav.ts

@@ -1,55 +1,193 @@
-import type { ComputedRef } from 'vue'
-import { computed } from 'vue'
-import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
-import type { TocItem } from '@slidev/types'
-import type { SlidevContextNav } from '../modules/context'
-import { addToTree, clicks, clicksContext, clicksTotal, downloadPDF, filterTree, getPath, getTreeWithActiveStatuses, go, next, nextSlide, openInEditor, prev, prevSlide } from '../logic/nav'
-import { rawRoutes } from '../routes'
-
-export function useNav(route: ComputedRef<RouteRecordRaw | RouteLocationNormalizedLoaded>): SlidevContextNav {
-  const path = computed(() => route.value.path)
-  const total = computed(() => rawRoutes.length)
-
-  const currentPage = computed(() => Number.parseInt(path.value.split(/\//g).slice(-1)[0]) || 1)
-  const currentPath = computed(() => getPath(currentPage.value))
-  const currentRoute = computed(() => rawRoutes.find(i => i.path === `${currentPage.value}`) ?? rawRoutes.at(-1) ?? rawRoutes[0])
-  const currentSlideId = computed(() => currentRoute.value?.meta?.slide?.id)
-  const currentLayout = computed(() => currentRoute.value?.meta?.layout || (currentPage.value === 1 ? 'cover' : 'default'))
-
-  const nextRoute = computed(() => rawRoutes.find(i => i.path === `${Math.min(rawRoutes.length, currentPage.value + 1)}`))
-
-  const rawTree = computed(() => rawRoutes
-    .filter((route: RouteRecordRaw) => route.meta?.slide?.title)
-    .reduce((acc: TocItem[], route: RouteRecordRaw) => {
-      addToTree(acc, route)
-      return acc
-    }, []))
-  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentRoute.value))
-  const tree = computed(() => filterTree(treeWithActiveStatuses.value))
+import type { ClicksContext, SlideRoute, TocItem } from '@slidev/types'
+import type { ComputedRef, Ref, TransitionGroupProps } from 'vue'
+import { computed, ref, watch } from 'vue'
+import type { Router } from 'vue-router'
+import { getCurrentTransition } from '../logic/transition'
+import { getSlidePath } from '../logic/slides'
+import { useTocTree } from './useTocTree'
+import { skipTransition } from './hmr'
+import { slides } from '#slidev/slides'
+
+export interface SlidevContextNav {
+  slides: Ref<SlideRoute[]>
+  total: ComputedRef<number>
+
+  currentPath: ComputedRef<string>
+  currentPage: ComputedRef<number>
+  currentSlideNo: ComputedRef<number>
+  currentSlideRoute: ComputedRef<SlideRoute>
+  currentTransition: ComputedRef<TransitionGroupProps | undefined>
+  currentLayout: ComputedRef<string>
+
+  nextRoute: ComputedRef<SlideRoute>
+  prevRoute: ComputedRef<SlideRoute>
+  hasNext: ComputedRef<boolean>
+  hasPrev: ComputedRef<boolean>
+
+  clicksContext: ComputedRef<ClicksContext>
+  clicks: ComputedRef<number>
+  clicksTotal: ComputedRef<number>
+
+  /** The table of content tree */
+  tocTree: ComputedRef<TocItem[]>
+  /** The direction of the navigation, 1 for forward, -1 for backward */
+  navDirection: Ref<number>
+  /** The direction of the clicks, 1 for forward, -1 for backward */
+  clicksDirection: Ref<number>
+  /** Utility function for open file in editor, only avaible in dev mode  */
+  openInEditor: (url?: string) => Promise<boolean>
+
+  /** Go to next click */
+  next: () => Promise<void>
+  /** Go to previous click */
+  prev: () => Promise<void>
+  /** Go to next slide */
+  nextSlide: () => Promise<void>
+  /** Go to previous slide */
+  prevSlide: (lastClicks?: boolean) => Promise<void>
+  /** Go to slide */
+  go: (page: number | string, clicks?: number) => Promise<void>
+  /** Go to the first slide */
+  goFirst: () => Promise<void>
+  /** Go to the last slide */
+  goLast: () => Promise<void>
+}
+
+export function useNavBase(
+  currentSlideRoute: ComputedRef<SlideRoute>,
+  clicksContext: ComputedRef<ClicksContext>,
+  queryClicks: Ref<number> = ref(0),
+  router?: Router,
+): SlidevContextNav {
+  const total = computed(() => slides.value.length)
+
+  const navDirection = ref(0)
+  const clicksDirection = ref(0)
+
+  const currentPath = computed(() => getSlidePath(currentSlideRoute.value))
+  const currentSlideNo = computed(() => currentSlideRoute.value.no)
+  const currentLayout = computed(() => currentSlideRoute.value.meta?.layout || (currentSlideNo.value === 1 ? 'cover' : 'default'))
+
+  const clicks = computed(() => clicksContext.value.current)
+  const clicksTotal = computed(() => clicksContext.value.total)
+  const nextRoute = computed(() => slides.value[Math.min(slides.value.length, currentSlideNo.value + 1) - 1])
+  const prevRoute = computed(() => slides.value[Math.max(1, currentSlideNo.value - 1) - 1])
+  const hasNext = computed(() => currentSlideNo.value < slides.value.length || clicks.value < clicksTotal.value)
+  const hasPrev = computed(() => currentSlideNo.value > 1 || clicks.value > 0)
+
+  const currentTransition = computed(() => getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
+
+  watch(currentSlideRoute, (next, prev) => {
+    navDirection.value = next.no - prev.no
+  })
+
+  async function openInEditor(url?: string) {
+    if (!__DEV__)
+      return false
+    if (url == null) {
+      const slide = currentSlideRoute.value?.meta?.slide
+      if (!slide)
+        return false
+      url = `${slide.filepath}:${slide.start}`
+    }
+    await fetch(`/__open-in-editor?file=${encodeURIComponent(url)}`)
+    return true
+  }
+
+  const tocTree = useTocTree(slides)
+
+  async function next() {
+    clicksDirection.value = 1
+    if (clicksTotal.value <= queryClicks.value)
+      await nextSlide()
+    else
+      queryClicks.value += 1
+  }
+
+  async function prev() {
+    clicksDirection.value = -1
+    if (queryClicks.value <= 0)
+      await prevSlide()
+    else
+      queryClicks.value -= 1
+  }
+
+  async function nextSlide() {
+    clicksDirection.value = 1
+    if (currentSlideNo.value < slides.value.length)
+      await go(currentSlideNo.value + 1)
+  }
+
+  async function prevSlide(lastClicks = true) {
+    clicksDirection.value = -1
+    const next = Math.max(1, currentSlideNo.value - 1)
+    await go(next)
+    if (lastClicks && clicksTotal.value) {
+      router?.replace({
+        query: { ...router.currentRoute.value.query, clicks: clicksTotal.value },
+      })
+    }
+  }
+
+  function goFirst() {
+    return go(1)
+  }
+
+  function goLast() {
+    return go(total.value)
+  }
+
+  async function go(page: number | string, clicks?: number) {
+    skipTransition.value = false
+    await router?.push({
+      path: getSlidePath(page),
+      query: { ...router.currentRoute.value.query, clicks },
+    })
+  }
 
   return {
-    rawRoutes,
-    route,
-    path,
+    slides,
     total,
-    clicksContext,
-    clicks,
-    clicksTotal,
-    currentPage,
     currentPath,
-    currentRoute,
-    currentSlideId,
+    currentSlideNo,
+    currentPage: currentSlideNo,
+    currentSlideRoute,
     currentLayout,
+    currentTransition,
+    clicksDirection,
     nextRoute,
-    rawTree,
-    treeWithActiveStatuses,
-    tree,
-    go,
-    downloadPDF,
-    next,
-    nextSlide,
+    prevRoute,
+    clicksContext,
+    clicks,
+    clicksTotal,
+    hasNext,
+    hasPrev,
+    tocTree,
+    navDirection,
     openInEditor,
+    next,
     prev,
+    go,
+    goLast,
+    goFirst,
+    nextSlide,
     prevSlide,
   }
 }
+
+export function useFixedNav(
+  currentSlideRoute: SlideRoute,
+  clicksContext: ClicksContext,
+): SlidevContextNav {
+  const noop = async () => { }
+  return {
+    ...useNavBase(computed(() => currentSlideRoute), computed(() => clicksContext)),
+    next: noop,
+    prev: noop,
+    nextSlide: noop,
+    prevSlide: noop,
+    goFirst: noop,
+    goLast: noop,
+    go: noop,
+  }
+}

package/composables/useSwipeControls.ts

@@ -0,0 +1,40 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import { timestamp, usePointerSwipe } from '@vueuse/core'
+import { isDrawing } from '../logic/drawings'
+import { next, nextSlide, prev, prevSlide } from '../logic/nav'
+
+export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
+  const swipeBegin = ref(0)
+  const { direction, distanceX, distanceY } = usePointerSwipe(root, {
+    pointerTypes: ['touch'],
+    onSwipeStart() {
+      if (isDrawing.value)
+        return
+      swipeBegin.value = timestamp()
+    },
+    onSwipeEnd() {
+      if (!swipeBegin.value)
+        return
+      if (isDrawing.value)
+        return
+
+      const x = Math.abs(distanceX.value)
+      const y = Math.abs(distanceY.value)
+      if (x / window.innerWidth > 0.3 || x > 75) {
+        if (direction.value === 'left')
+          next()
+
+        else
+          prev()
+      }
+      else if (y / window.innerHeight > 0.4 || y > 200) {
+        if (direction.value === 'down')
+          prevSlide()
+
+        else
+          nextSlide()
+      }
+    },
+  })
+}

package/composables/useTocTree.ts

@@ -0,0 +1,63 @@
+import type { SlideRoute, TocItem } from '@slidev/types'
+import type { ComputedRef, Ref } from 'vue'
+import { computed } from 'vue'
+import { currentSlideNo, currentSlideRoute, getSlidePath } from '../logic/nav'
+
+function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
+  const titleLevel = route.meta?.slide?.level
+  if (titleLevel && titleLevel > level && tree.length > 0) {
+    addToTree(tree[tree.length - 1].children, route, level + 1)
+  }
+  else {
+    tree.push({
+      no: route.no,
+      children: [],
+      level,
+      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no),
+      hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
+      title: route.meta?.slide?.title,
+    })
+  }
+}
+
+function getTreeWithActiveStatuses(
+  tree: TocItem[],
+  currentRoute?: SlideRoute,
+  hasActiveParent = false,
+  parent?: TocItem,
+): TocItem[] {
+  return tree.map((item: TocItem) => {
+    const clone = {
+      ...item,
+      active: item.no === currentSlideNo.value,
+      hasActiveParent,
+    }
+    if (clone.children.length > 0)
+      clone.children = getTreeWithActiveStatuses(clone.children, currentRoute, clone.active || clone.hasActiveParent, clone)
+    if (parent && (clone.active || clone.activeParent))
+      parent.activeParent = true
+    return clone
+  })
+}
+
+function filterTree(tree: TocItem[], level = 1): TocItem[] {
+  return tree
+    .filter((item: TocItem) => !item.hideInToc)
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterTree(item.children, level + 1),
+    }))
+}
+
+export function useTocTree(slides: Ref<SlideRoute[]>): ComputedRef<TocItem[]> {
+  const rawTree = computed(() => slides.value
+    .filter((route: SlideRoute) => route.meta?.slide?.title)
+    .reduce((acc: TocItem[], route: SlideRoute) => {
+      addToTree(acc, route)
+      return acc
+    }, []))
+
+  const treeWithActiveStatuses = computed(() => getTreeWithActiveStatuses(rawTree.value, currentSlideRoute.value))
+
+  return computed(() => filterTree(treeWithActiveStatuses.value))
+}

package/constants.ts

@@ -1,6 +1,5 @@
 import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
-import type { RouteRecordRaw } from 'vue-router'
-import type { ClicksContext, RenderContext } from '@slidev/types'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import type { SlidevContext } from './modules/context'
 
 // Here we use string literal instead of symbols to make HMR more stable
@@ -9,7 +8,7 @@ export const injectionClicksContext = '$$slidev-clicks-context' as unknown as In
 export const injectionCurrentPage = '$$slidev-page' as unknown as InjectionKey<Ref<number>>
 export const injectionSlideScale = '$$slidev-slide-scale' as unknown as InjectionKey<ComputedRef<number>>
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
-export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<RouteRecordRaw>
+export const injectionRoute = '$$slidev-route' as unknown as InjectionKey<SlideRoute>
 export const injectionRenderContext = '$$slidev-render-context' as unknown as InjectionKey<Ref<RenderContext>>
 export const injectionActive = '$$slidev-active' as unknown as InjectionKey<Ref<boolean>>
 export const injectionFrontmatter = '$$slidev-fontmatter' as unknown as InjectionKey<Record<string, any>>

package/context.ts

@@ -51,7 +51,7 @@ export function provideFrontmatter(frontmatter: Record<string, any>) {
   } = useSlideContext()
 
   // update frontmatter in router to make HMR work better
-  const route = $slidev.nav.rawRoutes.find(i => i.path === String($page.value))
+  const route = $slidev.nav.slides.find(i => i.no === $page.value)
   if (route?.meta?.slide?.frontmatter) {
     for (const key of Object.keys(route.meta.slide.frontmatter)) {
       if (!(key in frontmatter))

package/internals/Goto.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import Fuse from 'fuse.js'
-import { go, rawRoutes } from '../logic/nav'
+import { go, slides } from '../logic/nav'
 import { activeElement, showGotoDialog } from '../state'
 import Titles from '#slidev/titles.md'
 
@@ -16,7 +16,7 @@ function notNull<T>(value: T | null | undefined): value is T {
   return value !== null && value !== undefined
 }
 
-const fuse = computed(() => new Fuse(rawRoutes.map(i => i.meta?.slide).filter(notNull), {
+const fuse = computed(() => new Fuse(slides.value.map(i => i.meta?.slide).filter(notNull), {
   keys: ['no', 'title'],
   threshold: 0.3,
   shouldSort: true,

package/internals/NavControls.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, presenterPassword, prev, showPresenter, total } from '../logic/nav'
+import { downloadPDF } from '../utils'
+import { currentRoute, currentSlideNo, getSlidePath, hasNext, hasPrev, isEmbedded, isPresenter, isPresenterAvailable, next, prev, total } from '../logic/nav'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
@@ -21,9 +22,10 @@ const props = defineProps({
 const md = breakpoints.smaller('md')
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
+const presenterPassword = computed(() => currentRoute.value.query.password)
 const query = computed(() => presenterPassword.value ? `?password=${presenterPassword.value}` : '')
-const presenterLink = computed(() => `/presenter/${currentPage.value}${query.value}`)
-const nonPresenterLink = computed(() => `/${currentPage.value}${query.value}`)
+const presenterLink = computed(() => `${getSlidePath(currentSlideNo.value, true)}${query.value}`)
+const nonPresenterLink = computed(() => `${getSlidePath(currentSlideNo.value, false)}${query.value}`)
 
 const root = ref<HTMLDivElement>()
 function onMouseLeave() {
@@ -107,7 +109,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="slidev-icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
-        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && showPresenter" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
+        <RouterLink v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" :to="presenterLink" class="slidev-icon-btn" title="Presenter Mode">
           <carbon:user-speaker />
         </RouterLink>
 
@@ -156,7 +158,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
       <div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
         <div class="my-auto">
-          {{ currentPage }}
+          {{ currentSlideNo }}
           <span class="opacity-50">/ {{ total }}</span>
         </div>
       </div>

package/internals/NoteStatic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ClicksContext } from 'packages/types'
+import type { ClicksContext } from '@slidev/types'
 import { useSlideInfo } from '../logic/note'
 import NoteDisplay from './NoteDisplay.vue'
 

package/internals/PrintContainer.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import { configs, slideAspect, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
-import { route as currentRoute, rawRoutes } from '../logic/nav'
+import { currentRoute, slides } from '../logic/nav'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{
@@ -22,7 +22,8 @@ const scale = computed(() => {
   return (height.value * slideAspect) / slideWidth
 })
 
-let routes = rawRoutes
+// In print mode, the routes will never change. So we don't need reactivity here.
+let routes = slides.value
 if (currentRoute.value.query.range) {
   const r = parseRangeString(routes.length, currentRoute.value.query.range as string)
   routes = r.map(i => routes[i - 1])
@@ -38,7 +39,7 @@ provideLocal(injectionSlideScale, scale)
 <template>
   <div id="print-container" :class="className">
     <div id="print-content">
-      <PrintSlide v-for="route of routes" :key="route.path" :route="route" />
+      <PrintSlide v-for="route of routes" :key="route.no" :route="route" />
     </div>
     <slot name="controls" />
   </div>

package/internals/PrintSlide.vue

@@ -1,30 +1,23 @@
 <script setup lang="ts">
-import type { RouteRecordRaw } from 'vue-router'
-import { computed } from 'vue'
-import { useNav } from '../composables/useNav'
+import type { SlideRoute } from '@slidev/types'
+import { useFixedNav } from '../composables/useNav'
 import { useFixedClicks } from '../composables/useClicks'
 import PrintSlideClick from './PrintSlideClick.vue'
 
-const props = defineProps<{ route: RouteRecordRaw }>()
-
-const route = computed(() => props.route)
-const nav = useNav(route)
-const clicks0 = useFixedClicks(route.value, 0)
+const { route } = defineProps<{ route: SlideRoute }>()
+const clicks0 = useFixedClicks(route, 0)
 </script>
 
 <template>
   <PrintSlideClick
     :clicks-context="clicks0"
-    :nav="nav"
-    :route="route"
+    :nav="useFixedNav(route, clicks0)"
   />
   <template v-if="!clicks0.disabled">
     <PrintSlideClick
       v-for="i of clicks0.total"
       :key="i"
-      :clicks-context="useFixedClicks(route, i)"
-      :nav="nav"
-      :route="route"
+      :nav="useFixedNav(route, useFixedClicks(route, i))"
     />
   </template>
 </template>