@slidev/client 0.27.17 → 0.28.0

package/builtin/AutoFitText.vue

@@ -2,7 +2,7 @@
 [Expiremental]
 
 Think this component as the TextBox you that will see
-in PowerPoint or Keynote. It will automaitcally resize
+in PowerPoint or Keynote. It will automatically resize
 the font size based on it's content to fit them in.
 
 Usage:
@@ -18,7 +18,9 @@ or
 import { useElementSize, useVModel } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-const emit = defineEmits<{}>()
+const emit = defineEmits<{
+  (e: any): void
+}>()
 const props = defineProps({
   modelValue: {
     default: '',
@@ -34,7 +36,6 @@ const props = defineProps({
 const container = ref<HTMLDivElement>()
 const inner = ref<HTMLDivElement>()
 const size = ref(100)
-// @ts-ignore
 const fontSize = computed(() => `${size.value}px`)
 const value = useVModel(props, 'modelValue', emit)
 

package/builtin/CodeHighlightController.vue

@@ -15,7 +15,7 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 import { range, remove } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue'
-import { injectionClicks, injectionClicksElements, injectionClicksDisabled, CLASS_VCLICK_TARGET } from '../constants'
+import { CLASS_VCLICK_TARGET, injectionClicks, injectionClicksDisabled, injectionClicksElements } from '../constants'
 
 const props = defineProps({
   ranges: {

package/builtin/Mermaid.vue

@@ -51,5 +51,5 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div ref="el" class="mermaid" v-html="html"></div>
+  <div ref="el" class="mermaid" v-html="html" />
 </template>

package/builtin/Monaco.vue

@@ -12,11 +12,11 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <template>
-  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }"></iframe>
+  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }" />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watchEffect, computed } from 'vue'
+import { computed, onMounted, ref, watchEffect } from 'vue'
 import { useEventListener } from '@vueuse/core'
 import { decode } from 'js-base64'
 import { nanoid } from 'nanoid'

package/builtin/PlantUml.vue

@@ -11,7 +11,7 @@ Alice -> Bob : Hello!
 ```
 -->
 <template>
-  <img alt="PlantUML diagram" :src="uri" :style="{scale}" />
+  <img alt="PlantUML diagram" :src="uri" :style="{scale}">
 </template>
 
 <script setup lang="ts">

package/builtin/Toc.vue

@@ -0,0 +1,83 @@
+<!--
+Table Of content
+
+`mode` can be either 'all', 'onlyCurrentTree' or 'onlySiblings'
+
+Usage:
+
+<Toc columns='2' maxDepth='3' mode='onlySiblings'/>
+-->
+<script setup lang='ts'>
+import { computed } from 'vue'
+import type { TocItem } from '../logic/nav'
+import { tree } from '../logic/nav'
+
+const props = withDefaults(
+  defineProps<{
+    columns?: string | number
+    maxDepth?: string | number
+    minDepth?: string | number
+    mode?: 'all' | 'onlyCurrentTree' | 'onlySiblings'
+  }>(),
+  {
+    columns: 1,
+    maxDepth: Infinity,
+    minDepth: 1,
+    mode: 'all',
+  },
+)
+
+function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
+  if (level > Number(props.maxDepth)) {
+    return []
+  }
+  else if (level < Number(props.minDepth)) {
+    const activeItem = tree.find((item: TocItem) => item.active || item.activeParent)
+    return activeItem ? filterTreeDepth(activeItem.children, level + 1) : []
+  }
+  return tree
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterTreeDepth(item.children, level + 1),
+    }))
+}
+
+function filterOnlyCurrentTree(tree: TocItem[]): TocItem[] {
+  return tree
+    .filter(
+      (item: TocItem) =>
+        item.active || item.activeParent || item.hasActiveParent,
+    )
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterOnlyCurrentTree(item.children),
+    }))
+}
+
+function filterOnlySiblings(tree: TocItem[]): TocItem[] {
+  const treehasActiveItem = tree.some(
+    (item: TocItem) => item.active || item.activeParent || item.hasActiveParent,
+  )
+  return tree
+    .filter(() => treehasActiveItem)
+    .map((item: TocItem) => ({
+      ...item,
+      children: filterOnlySiblings(item.children),
+    }))
+}
+
+const toc = computed(() => {
+  let tocTree = filterTreeDepth(tree.value)
+  if (props.mode === 'onlyCurrentTree')
+    tocTree = filterOnlyCurrentTree(tocTree)
+  else if (props.mode === 'onlySiblings')
+    tocTree = filterOnlySiblings(tocTree)
+  return tocTree
+})
+</script>
+
+<template>
+  <div :style="`column-count:${columns}`">
+    <TocList :level="1" :list="toc" />
+  </div>
+</template>

package/builtin/TocList.vue

@@ -0,0 +1,27 @@
+<!--
+TOC list
+(used by Toc component, you don't need to use this component directly)
+
+Usage:
+
+<TocList :list="list"/>
+-->
+<script setup lang="ts">
+import type { TocItem } from '../logic/nav'
+
+withDefaults(defineProps<{
+  level: number
+  list: TocItem[]
+}>(), { level: 1 })
+</script>
+
+<template>
+  <ul v-if="list && list.length > 0" :class="['toc', `toc-level-${level}`]">
+    <li v-for="item in list" :key="item.path" :class="['toc-item', {'toc-item-active': item.active}, {'toc-item-parent-active': item.activeParent}]">
+      <RouterLink :to="item.path">
+        {{ item.title }}
+      </RouterLink>
+      <TocList :level="level + 1" :list="item.children" />
+    </li>
+  </ul>
+</template>

package/builtin/Tweet.vue

@@ -1,5 +1,5 @@
 <!--
-A simple wrapper for embeded Tweet
+A simple wrapper for embedded Tweet
 
 Usage:
 
@@ -23,7 +23,7 @@ const vm = getCurrentInstance()!
 const loaded = ref(false)
 
 async function create() {
-  // @ts-ignore
+  // @ts-expect-error global
   await window.twttr.widgets.createTweet(
     props.id.toString(),
     tweet.value,
@@ -35,7 +35,7 @@ async function create() {
   loaded.value = true
 }
 
-// @ts-ignore
+// @ts-expect-error global
 if (window?.twttr?.widgets) {
   onMounted(create)
 }

package/builtin/VAfter.ts

@@ -5,7 +5,8 @@
  */
 
 import { toArray } from '@antfu/utils'
-import { defineComponent, Directive, h, resolveDirective, VNode, withDirectives } from 'vue'
+import type { Directive, VNode } from 'vue'
+import { defineComponent, h, resolveDirective, withDirectives } from 'vue'
 
 export default defineComponent({
   render() {

package/builtin/VClicks.ts

@@ -5,7 +5,8 @@
  */
 
 import { toArray } from '@antfu/utils'
-import { defineComponent, Directive, h, isVNode, resolveDirective, VNode, VNodeArrayChildren, withDirectives } from 'vue'
+import type { Directive, VNode, VNodeArrayChildren } from 'vue'
+import { defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
 
 export default defineComponent({
   props: {

package/builtin/Youtube.vue

@@ -23,5 +23,5 @@ defineProps<{
     frameborder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen
-  ></iframe>
+  />
 </template>

package/constants.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
 export const injectionClicks: InjectionKey<Ref<number>> = Symbol('v-click-clicks')
 export const injectionClicksElements: InjectionKey<Ref<(Element | string)[]>> = Symbol('v-click-clicks-elements')

package/env.ts

@@ -1,7 +1,7 @@
-import { SlidevConfig } from '@slidev/types'
+import type { SlidevConfig } from '@slidev/types'
 import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
-// @ts-expect-error
+// @ts-expect-error missing types
 import _configs from '/@slidev/configs'
 import _serverState from 'server-reactive:nav'
 import _serverDrawingState from 'server-reactive:drawings?diff'

package/internals/Controls.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { showOverview, showRecordingDialog, showInfoDialog } from '../state'
+import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
 import SlidesOverview from './SlidesOverview.vue'
 import InfoDialog from './InfoDialog.vue'

package/internals/DevicesList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { currentCamera, currentMic } from '../state'
-import { cameras, microphones, ensureDevicesListPermissions } from '../logic/recording'
+import { cameras, ensureDevicesListPermissions, microphones } from '../logic/recording'
 import SelectList from './SelectList.vue'
 import type { SelectionItem } from './types'
 

package/internals/Draggable.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useStorage, useDraggable } from '@vueuse/core'
+import { useDraggable, useStorage } from '@vueuse/core'
 
 const props = defineProps<{
   storageKey?: string
-  initial?: {x: number; y: number}
+  initial?: { x: number; y: number }
 }>()
 
 const el = ref<HTMLElement | null>(null)

package/internals/DrawingControls.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-  drawingMode, drauu, brush,
-  brushColors, drawingEnabled, drawingPinned,
-  canUndo, canRedo, canClear, clearDrauu,
+  brush, brushColors, canClear,
+  canRedo, canUndo, clearDrauu,
+  drauu, drawingEnabled, drawingMode, drawingPinned,
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
@@ -36,7 +36,7 @@ function setBrushColor(color: typeof brush.color) {
     </button>
     <button class="icon-btn" :class="{ shallow: drawingMode != 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
-        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor"></path>
+        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
     </button>
     <button class="icon-btn" :class="{ shallow: drawingMode != 'arrow' }" @click="setDrawingMode('arrow')">

package/internals/DrawingLayer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, inject, onBeforeUnmount } from 'vue'
+import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { drauu, loadCanvas } from '../logic/drawings'
 import { injectionSlideScale } from '../constants'
 
@@ -21,5 +21,5 @@ onBeforeUnmount(() => {
   <svg
     ref="svg"
     class="w-full h-full absolute top-0 pointer-events-none"
-  ></svg>
+  />
 </template>

package/internals/DrawingPreview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { drawingState } from '../logic/drawings'
 
-defineProps<{page: number}>()
+defineProps<{ page: number }>()
 </script>
 
 <template>
@@ -10,5 +10,5 @@ defineProps<{page: number}>()
     ref="svg"
     class="w-full h-full absolute top-0 pointer-events-none"
     v-html="drawingState[page]"
-  ></svg>
+  />
 </template>

package/internals/Editor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useEventListener, throttledWatch } from '@vueuse/core'
-import { computed, watch, ref, onMounted } from 'vue'
-import { activeElement, showEditor, editorWidth, isInputting } from '../state'
+import { throttledWatch, useEventListener } from '@vueuse/core'
+import { computed, onMounted, ref, watch } from 'vue'
+import { activeElement, editorWidth, isInputting, showEditor } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
@@ -66,7 +66,7 @@ onMounted(() => {
     {
       mode: 'markdown',
       lineWrapping: true,
-      // @ts-ignore
+      // @ts-expect-error missing types
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
     },
@@ -84,7 +84,7 @@ onMounted(() => {
     {
       mode: 'markdown',
       lineWrapping: true,
-      // @ts-ignore
+      // @ts-expect-error missing types
       highlightFormatting: true,
       fencedCodeBlockDefaultMode: 'javascript',
     },
@@ -100,7 +100,7 @@ function updateWidth(v: number) {
 }
 function switchTab(newTab: typeof tab.value) {
   tab.value = newTab
-  // @ts-expect-error
+  // @ts-expect-error force cast
   document.activeElement?.blur?.()
 }
 useEventListener('pointermove', (e) => {
@@ -130,7 +130,7 @@ throttledWatch(
     :class="{'!opacity-30': handlerDown}"
     :style="{right: `${editorWidth - 5}px`, cursor: 'col-resize'}"
     @pointerdown="onHandlerDown"
-  ></div>
+  />
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content,1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
     :style="{width: `${editorWidth}px`}"
@@ -147,7 +147,7 @@ throttledWatch(
       <span class="text-2xl pt-1">
         {{ tab === 'content' ? 'Slide' : 'Notes' }}
       </span>
-      <div class="flex-auto"></div>
+      <div class="flex-auto" />
       <button class="icon-btn" @click="openInEditor()">
         <carbon:launch />
       </button>

package/internals/Goto.vue

@@ -46,7 +46,7 @@ whenever(showGotoDialog, async() => {
       @keydown.enter="goTo"
       @keydown.escape="close"
       @blur="close"
-    />
+    >
   </div>
 </template>
 

package/internals/InfoDialog.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { configs } from '../env'
 import Modal from './Modal.vue'
 
-const emit = defineEmits<{(name: 'modelValue', v: boolean): void}>()
+const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const props = defineProps({
   modelValue: {
     default: false,
@@ -34,7 +34,7 @@ const hasInfo = computed(() => typeof configs.info === 'string')
             class="w-5 h-5"
             src="../assets/logo.png"
             alt="Slidev"
-          />
+          >
           <div style="color: #2082A6">
             <b>Sli</b>dev
           </div>

package/internals/Modal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 
-const emit = defineEmits<{(name: 'modelValue', v: boolean): void}>()
+const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const props = defineProps({
   modelValue: {
     default: false,

package/internals/NavControls.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isDark, toggleDark, isColorSchemaConfigured } from '../logic/dark'
-import { hasNext, hasPrev, prev, next, total, isPresenter, currentPage, downloadPDF, isEmbedded } from '../logic/nav'
-import { toggleOverview, showEditor, showInfoDialog, fullscreen, breakpoints, activeElement, showPresenterCursor } from '../state'
-import { drawingEnabled, brush } from '../logic/drawings'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, prev, total } from '../logic/nav'
+import { activeElement, breakpoints, fullscreen, showEditor, showInfoDialog, showPresenterCursor, toggleOverview } from '../state'
+import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
@@ -101,7 +101,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
             :style="{ background: brush.color }"
-          ></div>
+          />
         </button>
         <VerticalDivider />
       </template>

package/internals/NoteEditor.vue

@@ -66,14 +66,14 @@ onClickOutside(input, () => {
       :class="props.class"
       @click="switchNoteEdit"
       v-html="info?.notesHTML"
-    ></div>
+    />
     <div
       v-else
       class="prose overflow-auto outline-none"
       :class="props.class"
       @click="switchNoteEdit"
       v-text="note"
-    ></div>
+    />
   </template>
   <textarea
     v-else

package/internals/Play.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, shallowRef } from 'vue'
-import { showEditor, windowSize, isScreenVertical, slideScale } from '../state'
-import { isPrintMode, next, prev, useSwipeControls, isEmbedded } from '../logic/nav'
+import { computed, ref, shallowRef } from 'vue'
+import { isScreenVertical, showEditor, slideScale, windowSize } from '../state'
+import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
-import { themeVars, configs } from '../env'
+import { configs, themeVars } from '../env'
 import Controls from './Controls.vue'
 import SlideContainer from './SlideContainer.vue'
 import NavControls from './NavControls.vue'
@@ -18,7 +18,7 @@ function onClick(e: MouseEvent) {
     return
 
   if ((e.target as HTMLElement)?.id === 'slide-container') {
-    // click right to next, left to previouse
+    // click right to next, left to previous
     if ((e.screenX / window.innerWidth) > 0.6)
       next()
     else
@@ -28,7 +28,7 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 
-const presistNav = computed(() => isScreenVertical.value || showEditor.value)
+const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const Editor = shallowRef<any>()
 if (__DEV__)
@@ -55,11 +55,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <div
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
           :class="[
-            presistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2',
+            persistNav ? 'opacity-100 right-0' : 'oapcity-0 p-2',
             isDrawing ? 'pointer-events-none': ''
           ]"
         >
-          <NavControls class="m-auto" :persist="presistNav" />
+          <NavControls class="m-auto" :persist="persistNav" />
         </div>
         <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded && DrawingControls">
           <DrawingControls class="ml-0" />

package/internals/Presenter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useHead } from '@vueuse/head'
-import { ref, computed, reactive, watch, onMounted } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { total, currentPage, currentRoute, nextRoute, clicks, useSwipeControls, clicksTotal, hasNext } from '../logic/nav'
+import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
 import { showOverview, showPresenterCursor } from '../state'
-import { configs, themeVars, serverState } from '../env'
+import { configs, serverState, themeVars } from '../env'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
@@ -82,7 +82,7 @@ onMounted(() => {
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container">
       <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto" />
+        <img src="../assets/logo-title-horizontal.png" class="h-14 ml-2 py-2 my-auto">
         <div class="flex-auto" />
         <div
           class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
@@ -133,7 +133,7 @@ onMounted(() => {
       <div
         class="progress h-2px bg-primary transition-all"
         :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
-      ></div>
+      />
     </div>
   </div>
   <Goto />

package/internals/RecordingDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
-import { recorder, recordingName, recordCamera, getFilename } from '../logic/recording'
+import { getFilename, recordCamera, recorder, recordingName } from '../logic/recording'
 import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'
 
@@ -42,7 +42,7 @@ async function start() {
             name="title"
             type="text"
             placeholder="Enter the title..."
-          />
+          >
           <div class="text-xs w-full opacity-50 py-2">
             <div>This will be used in the output filename that might <br>help you better orangize your recording chips.</div>
           </div>
@@ -52,12 +52,12 @@ async function start() {
             v-model="recordCamera"
             name="record-camera"
             type="checkbox"
-          />
+          >
           <label for="record-camera" @click="recordCamera = !recordCamera">Record camera separately</label>
         </div>
         <div class="text-xs w-full opacity-50">
           <div class="mt-2 opacity-50">
-            Enumated filenames
+            Enumerated filenames
           </div>
           <div class="font-mono">
             {{ getFilename('screen') }}
@@ -73,7 +73,7 @@ async function start() {
       <button class="cancel" @click="close">
         Cancel
       </button>
-      <div class="flex-auto"></div>
+      <div class="flex-auto" />
       <button @click="start">
         Start
       </button>

package/internals/SlideContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
 import { computed, provide, ref, watchEffect } from 'vue'
-import { slideAspect, slideWidth, slideHeight, configs } from '../env'
+import { configs, slideAspect, slideHeight, slideWidth } from '../env'
 import { injectionSlideScale } from '../constants'
 
 const props = defineProps({

package/internals/SlideWrapper.ts

@@ -1,5 +1,5 @@
 import { useVModel } from '@vueuse/core'
-import { provide, defineComponent, h } from 'vue'
+import { defineComponent, h, provide } from 'vue'
 import { injectionClicks, injectionClicksDisabled, injectionClicksElements, injectionOrderMap } from '../constants'
 
 export default defineComponent({

package/internals/SlidesShow.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { shallowRef, watch } from 'vue'
-import { currentRoute, clicks, rawRoutes, nextRoute, isPresenter } from '../logic/nav'
+import { clicks, currentRoute, isPresenter, nextRoute, rawRoutes } from '../logic/nav'
 import { getSlideClass } from '../utils'
 import SlideWrapper from './SlideWrapper'
-// @ts-ignore
+// @ts-expect-error virtual module
 import GlobalTop from '/@slidev/global-components/top'
-// @ts-ignore
+// @ts-expect-error virtual module
 import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'