From e2ea04145a35fd675bdc556b64e2f727b2d9fffd Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 24 Apr 2024 14:26:02 +0800
Subject: [PATCH 1/4] refactor: DOM structure

---
 packages/client/composables/useNav.ts         | 19 +++--
 packages/client/constants.ts                  |  1 -
 packages/client/env.ts                        |  2 +
 packages/client/internals/Controls.vue        | 10 +++
 packages/client/internals/DrawingControls.vue |  2 +-
 packages/client/internals/DrawingLayer.vue    |  2 +-
 packages/client/internals/DrawingPreview.vue  |  2 +-
 packages/client/internals/NavControls.vue     |  2 +-
 packages/client/internals/NoteDisplay.vue     |  2 +-
 packages/client/internals/QuickOverview.vue   |  8 +-
 packages/client/internals/Settings.vue        |  2 +-
 packages/client/internals/SlideContainer.vue  | 74 +++++++------------
 packages/client/internals/SlideWrapper.vue    | 48 +++++-------
 packages/client/internals/SlidesShow.vue      |  9 ++-
 packages/client/pages/entry.vue               | 42 +++++------
 packages/client/pages/notes.vue               | 19 ++---
 packages/client/pages/overview.vue            | 15 +---
 packages/client/pages/play.vue                | 28 ++-----
 packages/client/pages/presenter.vue           | 34 +++------
 packages/client/setup/root.ts                 | 10 +--
 packages/client/styles/index.css              |  4 +
 packages/types/src/types.ts                   |  4 +-
 test/_tutils.ts                               |  4 -
 23 files changed, 143 insertions(+), 200 deletions(-)

diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 0460069c65..86e2de5da3 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/composables/useNav.ts
@@ -55,7 +55,7 @@ export interface SlidevContextNav {
   /** Go to previous slide */
   prevSlide: (lastClicks?: boolean) => Promise<void>
   /** Go to slide */
-  go: (page: number | string, clicks?: number) => Promise<void>
+  go: (page: number | string, clicks?: number, force?: boolean) => Promise<void>
   /** Go to the first slide */
   goFirst: () => Promise<void>
   /** Go to the last slide */
@@ -181,14 +181,14 @@ export function useNavBase(
     return go(total.value)
   }
 
-  async function go(page: number | string, clicks: number = 0) {
+  async function go(page: number | string, clicks: number = 0, force = false) {
     skipTransition.value = false
     const pageChanged = currentSlideNo.value !== page
     const clicksChanged = clicks !== queryClicks.value
     const meta = getSlide(page)?.meta
     const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
-    if (pageChanged || clicksChanged) {
+    if (force || pageChanged || clicksChanged) {
       await router?.push({
         path: getSlidePath(page, isPresenter.value),
         query: {
@@ -379,9 +379,16 @@ export const useNav = createSharedComposable((): SlidevContextNavFull => {
   watch(
     [nav.total, state.currentRoute],
     async () => {
-      if (state.hasPrimarySlide.value && !getSlide(state.currentRoute.value.params.no as string)) {
-        // The current slide may has been removed. Redirect to the last slide.
-        await nav.goLast()
+      const no = state.currentRoute.value.params.no as string
+      if (state.hasPrimarySlide.value && !getSlide(no)) {
+        if (no && no !== 'index.html') {
+          // The current slide may has been removed. Redirect to the last slide.
+          await nav.go(nav.total.value, 0, true)
+        }
+        else {
+          // Redirect to the first slide
+          await nav.go(1, 0, true)
+        }
       }
     },
     { flush: 'pre', immediate: true },
diff --git a/packages/client/constants.ts b/packages/client/constants.ts
index 0284c72506..3acfacc867 100644
--- a/packages/client/constants.ts
+++ b/packages/client/constants.ts
@@ -11,7 +11,6 @@ export const injectionSlideScale = '$$slidev-slide-scale' as unknown as Injectio
 export const injectionSlidevContext = '$$slidev-context' as unknown as InjectionKey<UnwrapNestedRefs<SlidevContext>>
 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>>
 export const injectionSlideZoom = '$$slidev-slide-zoom' as unknown as InjectionKey<ComputedRef<number>>
 
diff --git a/packages/client/env.ts b/packages/client/env.ts
index fc9de7674b..59dad897df 100644
--- a/packages/client/env.ts
+++ b/packages/client/env.ts
@@ -16,3 +16,5 @@ export const slideHeight = computed(() => Math.ceil(slideWidth.value / slideAspe
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
+
+export const slidesTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
diff --git a/packages/client/internals/Controls.vue b/packages/client/internals/Controls.vue
index 8c0e716ece..f914fa504b 100644
--- a/packages/client/internals/Controls.vue
+++ b/packages/client/internals/Controls.vue
@@ -2,11 +2,18 @@
 import { shallowRef } from 'vue'
 import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
+import { useNav } from '../composables/useNav'
 import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 import ContextMenu from './ContextMenu.vue'
 
+const { isEmbedded } = useNav()
+const drawingEnabled = __SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded.value
+const DrawingControls = shallowRef<any>()
+if (drawingEnabled)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
+
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__) {
@@ -16,6 +23,9 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
+  <template v-if="drawingEnabled && DrawingControls">
+    <DrawingControls class="ml-0" />
+  </template>
   <QuickOverview v-model="showOverview" />
   <Goto />
   <WebCamera v-if="WebCamera" />
diff --git a/packages/client/internals/DrawingControls.vue b/packages/client/internals/DrawingControls.vue
index 083e35b993..85f6296df6 100644
--- a/packages/client/internals/DrawingControls.vue
+++ b/packages/client/internals/DrawingControls.vue
@@ -136,4 +136,4 @@ function setBrushColor(color: typeof brush.color) {
 .v-popper--theme-menu .v-popper__arrow-inner {
   --uno: border-main;
 }
-</style>../composables/drawings
+</style>
diff --git a/packages/client/internals/DrawingLayer.vue b/packages/client/internals/DrawingLayer.vue
index 31fdc23a48..bb910ca508 100644
--- a/packages/client/internals/DrawingLayer.vue
+++ b/packages/client/internals/DrawingLayer.vue
@@ -25,4 +25,4 @@ onBeforeUnmount(() => {
     class="w-full h-full absolute top-0"
     :class="{ 'pointer-events-none': !drawingEnabled, 'touch-none': drawingEnabled }"
   />
-</template>../composables/drawings
+</template>
diff --git a/packages/client/internals/DrawingPreview.vue b/packages/client/internals/DrawingPreview.vue
index 36612c7a9e..c21fe541d0 100644
--- a/packages/client/internals/DrawingPreview.vue
+++ b/packages/client/internals/DrawingPreview.vue
@@ -12,4 +12,4 @@ const { drawingState } = useDrawings()
     class="w-full h-full absolute top-0 pointer-events-none"
     v-html="drawingState[page]"
   />
-</template>../composables/drawings
+</template>
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index d531eb6651..b3e7b5c0d8 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/internals/NavControls.vue
@@ -179,4 +179,4 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       <CustomNavControls />
     </div>
   </nav>
-</template>../composables/drawings
+</template>
diff --git a/packages/client/internals/NoteDisplay.vue b/packages/client/internals/NoteDisplay.vue
index 51627293ea..0f0baf20f0 100644
--- a/packages/client/internals/NoteDisplay.vue
+++ b/packages/client/internals/NoteDisplay.vue
@@ -17,7 +17,7 @@ const emit = defineEmits<{
   (type: 'markerClick', e: MouseEvent, clicks: number): void
 }>()
 
-const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
+const withClicks = computed(() => props.clicksContext != null && props.noteHtml?.includes('slidev-note-click-mark'))
 const noteDisplay = ref<HTMLElement | null>(null)
 
 const CLASS_FADE = 'slidev-note-fade'
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index fad425ebaf..a74d41d1f9 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -4,7 +4,6 @@ import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
-import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
 import SlideContainer from './SlideContainer.vue'
@@ -119,7 +118,7 @@ setTimeout(() => {
     <div
       v-if="value || activeSlidesLoaded"
       v-show="value"
-      class="bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)]"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
       @click="close()"
     >
       <div
@@ -142,10 +141,7 @@ setTimeout(() => {
               class="pointer-events-none"
             >
               <SlideWrapper
-                :is="route.component"
-                v-if="route?.component"
                 :clicks-context="createFixedClicks(route, CLICKS_MAX)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
@@ -168,7 +164,7 @@ setTimeout(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+  <div v-if="value" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
       <carbon:close />
     </IconButton>
diff --git a/packages/client/internals/Settings.vue b/packages/client/internals/Settings.vue
index 7eb72d88a2..f2640eb7ec 100644
--- a/packages/client/internals/Settings.vue
+++ b/packages/client/internals/Settings.vue
@@ -16,7 +16,7 @@ const items: SelectionItem<number>[] = [
 </script>
 
 <template>
-  <div class="text-sm">
+  <div class="text-sm select-none">
     <SelectList v-model="slideScale" title="Scale" :items="items" />
   </div>
 </template>
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index 9ee65faf6c..435bd17561 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/internals/SlideContainer.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, ref, watchEffect } from 'vue'
-import { configs, slideAspect, slideHeight, slideWidth } from '../env'
+import { computed, ref } from 'vue'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
+import { slideAspect, slideHeight, slideWidth } from '../env'
 import { useNav } from '../composables/useNav'
+import { slideScale } from '../state'
 
 const props = defineProps({
   width: {
@@ -12,83 +13,64 @@ const props = defineProps({
   meta: {
     default: () => ({}) as any,
   },
-  scale: {
-    type: [Number, String],
-  },
   isMain: {
     type: Boolean,
     default: false,
   },
 })
 
-const { clicksDirection, isPrintMode } = useNav()
+const { isPrintMode } = useNav()
 
-const root = ref<HTMLDivElement | null>(null)
-const rootSize = useElementSize(root)
+const container = ref<HTMLDivElement | null>(null)
+const containerSize = useElementSize(container)
 const slideElement = ref<HTMLElement | null>(null)
 
-const width = computed(() => props.width ? props.width : rootSize.width.value)
-const height = computed(() => props.width ? props.width / slideAspect.value : rootSize.height.value)
-
-if (props.width) {
-  watchEffect(() => {
-    if (root.value) {
-      root.value.style.width = `${width.value}px`
-      root.value.style.height = `${height.value}px`
-    }
-  })
-}
-
-const screenAspect = computed(() => width.value / height.value)
+const width = computed(() => props.width ?? containerSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : containerSize.height.value)
 
 const scale = computed(() => {
-  if (props.scale && !isPrintMode.value)
-    return +props.scale
-  if (screenAspect.value < slideAspect.value)
-    return width.value / slideWidth.value
-  return height.value * slideAspect.value / slideWidth.value
+  if (slideScale.value && !isPrintMode.value)
+    return +slideScale.value
+  return Math.min(width.value / slideWidth.value, height.value / slideHeight.value)
 })
 
-const style = computed(() => ({
+const contentStyle = computed(() => ({
   'height': `${slideHeight.value}px`,
   'width': `${slideWidth.value}px`,
   'transform': `translate(-50%, -50%) scale(${scale.value})`,
   '--slidev-slide-scale': scale.value,
 }))
 
-const className = computed(() => ({
-  'select-none': !configs.selectable,
-  'slidev-nav-go-forward': clicksDirection.value > 0,
-  'slidev-nav-go-backward': clicksDirection.value < 0,
-}))
-
-if (props.isMain) {
-  useStyleTag(computed(() => `
-    :root {
-      --slidev-slide-scale: ${scale.value};
+const containerStyle = computed(() => props.width
+  ? {
+      width: `${props.width}px`,
+      height: `${props.width / slideAspect.value}px`,
     }
-  `))
-}
+  : {},
+)
+
+if (props.isMain)
+  useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 </script>
 
 <template>
-  <div id="slide-container" ref="root" class="slidev-slides-container" :class="className">
-    <div id="slide-content" ref="slideElement" class="slidev-slide-content" :style="style">
+  <div :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
+    <div :id="isMain ? 'slide-content' : undefined" ref="slideElement" class="slidev-slide-content" :style="contentStyle">
       <slot />
     </div>
     <slot name="controls" />
   </div>
 </template>
 
-<style lang="postcss">
-#slide-container {
-  @apply relative overflow-hidden break-after-page;
+<style scoped lang="postcss">
+.slidev-slide-container {
+  @apply relative w-full h-full overflow-hidden;
 }
 
-#slide-content {
-  @apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
+.slidev-slide-content {
+  @apply absolute left-1/2 top-1/2 overflow-hidden bg-main;
 }
 </style>
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index 047566cdcb..6b9c5dc8e0 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toRef } from 'vue'
-import type { PropType } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
-import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import { getSlideClass } from '../utils'
+import { configs } from '../env'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -16,14 +17,6 @@ const props = defineProps({
     type: String as PropType<RenderContext>,
     default: 'slide',
   },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  is: {
-    type: Function as PropType<() => any>,
-    required: true,
-  },
   route: {
     type: Object as PropType<SlideRoute>,
     required: true,
@@ -34,12 +27,11 @@ const zoom = computed(() => props.route.meta?.slide?.frontmatter.zoom ?? 1)
 
 provideLocal(injectionRoute, props.route)
 provideLocal(injectionCurrentPage, ref(props.route.no))
-provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
-provideLocal(injectionActive, toRef(props, 'active'))
+provideLocal(injectionRenderContext, ref(props.renderContext))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
-const style = computed(() => {
+const zoomStyle = computed(() => {
   return zoom.value === 1
     ? undefined
     : {
@@ -49,32 +41,33 @@ const style = computed(() => {
         transform: `scale(${zoom.value})`,
       }
 })
+const style = computed<CSSProperties>(() => ({
+  ...zoomStyle.value,
+  'user-select': configs.selectable ? undefined : 'none',
+}))
 
-const SlideComponent = defineAsyncComponent({
+const SlideComponent = computed(() => props.route && defineAsyncComponent({
   loader: async () => {
-    const component = await props.is()
+    const component = await props.route.component()
     return defineComponent({
       setup(_, { attrs }) {
-        onMounted(() => {
-          props.clicksContext?.onMounted?.()
-        })
+        onMounted(() => props.clicksContext?.onMounted?.())
         return () => h(component.default, attrs)
       },
     })
   },
   delay: 300,
   loadingComponent: SlideLoading,
-})
+}))
 </script>
 
 <template>
-  <div :class="getSlideClass(route)">
-    <component
-      :is="SlideComponent"
-      :style="style"
-      :data-slidev-no="props.route.no"
-      :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
-    />
+  <div
+    :data-slidev-no="props.route.no"
+    :class="getSlideClass(route, ['slide', 'presenter'].includes(props.renderContext) ? '' : 'disable-view-transition')"
+    :style="style"
+  >
+    <SlideComponent />
   </div>
 </template>
 
@@ -85,7 +78,6 @@ const SlideComponent = defineAsyncComponent({
 
 .slidev-page {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 }
 </style>
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index 4cc6fb4819..7e9c5f6850 100644
--- a/packages/client/internals/SlidesShow.vue
+++ b/packages/client/internals/SlidesShow.vue
@@ -8,7 +8,6 @@ import { createFixedClicks } from '../composables/useClicks'
 import { activeDragElement } from '../state'
 import { CLICKS_MAX } from '../constants'
 import SlideWrapper from './SlideWrapper.vue'
-import PresenterMouse from './PresenterMouse.vue'
 import DragControl from './DragControl.vue'
 
 import GlobalTop from '#slidev/global-components/top'
@@ -22,11 +21,11 @@ const {
   currentSlideRoute,
   currentTransition,
   getPrimaryClicks,
-  isPresenter,
   nextRoute,
   slides,
   isPrintMode,
   isPrintWithClicks,
+  clicksDirection,
 } = useNav()
 
 // preload next route
@@ -64,10 +63,13 @@ function onAfterLeave() {
     v-bind="skipTransition ? {} : currentTransition"
     id="slideshow"
     tag="div"
+    :class="{
+      'slidev-nav-go-forward': clicksDirection > 0,
+      'slidev-nav-go-backward': clicksDirection < 0,
+    }"
     @after-leave="onAfterLeave"
   >
     <SlideWrapper
-      :is="route.component!"
       v-for="route of loadedRoutes"
       v-show="route === currentSlideRoute"
       :key="route.no"
@@ -87,7 +89,6 @@ function onAfterLeave() {
   <template v-if="(__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__) && DrawingLayer">
     <DrawingLayer />
   </template>
-  <PresenterMouse v-if="!isPresenter" />
 </template>
 
 <style scoped>
diff --git a/packages/client/pages/entry.vue b/packages/client/pages/entry.vue
index 921380245e..ec6ff7279e 100644
--- a/packages/client/pages/entry.vue
+++ b/packages/client/pages/entry.vue
@@ -1,32 +1,26 @@
 <template>
   <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
-    <RouterLink
-      to="/"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:presentation-file class="text-3em op50" />
-      Slides
+    <RouterLink to="/" class="page-link">
+      <carbon:presentation-file /> Slides
     </RouterLink>
-    <RouterLink
-      to="/presenter"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:user-speaker class="text-3em op50" />
-      Presenter
+    <RouterLink to="/presenter" class="page-link">
+      <carbon:user-speaker /> Presenter
     </RouterLink>
-    <RouterLink
-      to="/notes"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:catalog class="text-3em op50" />
-      Notes
+    <RouterLink to="/notes" class="page-link">
+      <carbon:catalog /> Notes
     </RouterLink>
-    <RouterLink
-      to="/overview"
-      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
-    >
-      <carbon:list-boxes class="text-3em op50" />
-      Overview
+    <RouterLink to="/overview" class="page-link">
+      <carbon:list-boxes /> Overview
     </RouterLink>
   </div>
 </template>
+
+<style scoped lang="postcss">
+.page-link {
+  @apply flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20;
+}
+
+.page-link > svg {
+  @apply text-3em op50;
+}
+</style>
diff --git a/packages/client/pages/notes.vue b/packages/client/pages/notes.vue
index 90f83b4f89..7849f1943c 100644
--- a/packages/client/pages/notes.vue
+++ b/packages/client/pages/notes.vue
@@ -2,7 +2,7 @@
 import { useHead } from '@unhead/vue'
 import { computed, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { configs } from '../env'
+import { slidesTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
 
@@ -10,10 +10,7 @@ import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
 import { useNav } from '../composables/useNav'
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-useHead({
-  title: `Notes - ${slideTitle}`,
-})
+useHead({ title: `Notes - ${slidesTitle}` })
 
 const { slides, total } = useNav()
 const { isFullscreen, toggle: toggleFullscreen } = fullscreen
@@ -39,20 +36,20 @@ function decreaseFontSize() {
 
 <template>
   <div
-    class="fixed top-0 left-0 h-2px bg-teal-500 transition-all duration-500"
-    :style="{ width: `${(pageNo - 1) / total * 100}%` }"
+    class="fixed top-0 left-0 h-3px bg-primary transition-all duration-500"
+    :style="{ width: `${(pageNo - 1) / (total - 1) * 100 + 1}%` }"
   />
-  <div class="h-full flex flex-col">
+  <div class="h-full pt-2 flex flex-col">
     <div
       ref="scroller"
       class="px-5 flex-auto h-full overflow-auto"
       :style="{ fontSize: `${fontSize}px` }"
     >
       <NoteDisplay
-        :note="currentRoute?.meta?.slide?.note"
-        :note-html="currentRoute?.meta?.slide?.noteHTML"
+        :note="currentRoute?.meta.slide.note"
+        :note-html="currentRoute?.meta.slide.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
-        :clicks-context="currentRoute?.meta?.__clicksContext"
+        :clicks-context="currentRoute?.meta.__clicksContext"
         :auto-scroll="true"
       />
     </div>
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 74a1fbcc35..160d5e604e 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -2,11 +2,10 @@
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { configs } from '../env'
+import { slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
@@ -18,10 +17,7 @@ import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-useHead({
-  title: `Overview - ${slideTitle}`,
-})
+useHead({ title: `Overview - ${slidesTitle}` })
 
 const { openInEditor, slides } = useNav()
 
@@ -102,7 +98,7 @@ onMounted(() => {
   <div class="h-screen w-screen of-hidden flex">
     <nav class="grid grid-rows-[auto_max-content] border-r border-main select-none max-h-full h-full">
       <div class="relative">
-        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-scroll" style="direction:rtl">
+        <div class="absolute left-0 top-0 bottom-0 w-200 flex flex-col flex-auto items-end group p2 gap-1 max-h-full of-x-visible of-y-auto" style="direction:rtl">
           <div
             v-for="(route, idx) of slides"
             :key="route.no"
@@ -180,9 +176,7 @@ onMounted(() => {
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper
-                :is="route.component!"
                 :clicks-context="getClicksContext(route)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
@@ -191,9 +185,8 @@ onMounted(() => {
           </div>
           <ClicksSlider
             v-if="getSlideClicks(route)"
-            mt-2
             :clicks-context="getClicksContext(route)"
-            class="w-full"
+            class="w-full mt-2"
             @dblclick="getClicksContext(route).current = CLICKS_MAX"
           />
         </div>
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index 8a0eddfc57..a49af9330e 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
+import { isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs } from '../env'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
@@ -12,10 +11,9 @@ import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import PresenterMouse from '../internals/PresenterMouse.vue'
 
-registerShortcuts()
-
-const { next, prev, isEmbedded, isPrintMode } = useNav()
+const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
@@ -25,7 +23,7 @@ function onClick(e: MouseEvent) {
 
   if (e.button === 0 && (e.target as HTMLElement)?.id === 'slide-container') {
     // click right to next, left to previous
-    if ((e.pageX / window.innerWidth) > 0.6)
+    if ((e.pageX / window.innerWidth) > 0.5)
       next()
     else
       prev()
@@ -33,16 +31,13 @@ function onClick(e: MouseEvent) {
 }
 
 useSwipeControls(root)
+registerShortcuts()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
-
-const DrawingControls = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>
@@ -52,16 +47,15 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
     :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
   >
     <SlideContainer
-      class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="isPrintMode ? windowSize.width.value : undefined"
-      :scale="slideScale"
-      :is-main="true"
+      is-main
       @pointerdown="onClick"
       @contextmenu="onContextMenu"
     >
       <template #default>
         <SlidesShow render-context="slide" />
+        <PresenterMouse />
       </template>
       <template #controls>
         <div
@@ -74,15 +68,9 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         >
           <NavControls class="m-auto" :persist="persistNav" />
         </div>
-        <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded && DrawingControls">
-          <DrawingControls class="ml-0" />
-        </template>
       </template>
     </SlideContainer>
-
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
-      <SideEditor :resize="true" />
-    </template>
+    <SideEditor v-if="SideEditor && showEditor" :resize="true" />
   </div>
   <Controls v-if="!isPrintMode" />
 </template>
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index c94fc39990..ef0ff50479 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -4,11 +4,10 @@ import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs } from '../env'
+import { slidesTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { onContextMenu } from '../logic/contextMenu'
-import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { createFixedClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -44,10 +43,7 @@ const {
 } = useNav()
 const { isDrawing } = useDrawings()
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-useHead({
-  title: `Presenter - ${slideTitle}`,
-})
+useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
@@ -113,12 +109,11 @@ onMounted(() => {
       <div ref="main" class="relative grid-section main flex flex-col">
         <SlideContainer
           key="main"
-          class="h-full w-full p-2 lg:p-4 flex-auto"
+          class="p-2 lg:p-4 flex-auto"
+          is-main
           @contextmenu="onContextMenu"
         >
-          <template #default>
-            <SlidesShow render-context="presenter" />
-          </template>
+          <SlidesShow render-context="presenter" />
         </SlideContainer>
         <ClicksSlider
           :key="currentSlideRoute?.no"
@@ -130,16 +125,10 @@ onMounted(() => {
         </div>
       </div>
       <div class="relative grid-section next flex flex-col p-2 lg:p-4">
-        <SlideContainer
-          v-if="nextFrame && nextFrameClicksCtx"
-          key="next"
-          class="h-full w-full"
-        >
+        <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
           <SlideWrapper
-            :is="nextFrame[0].component!"
             :key="nextFrame[0].no"
             :clicks-context="nextFrameClicksCtx"
-            :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />
@@ -148,8 +137,7 @@ onMounted(() => {
           Next
         </div>
       </div>
-      <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+      <div v-if="SideEditor && showEditor" class="grid-section note of-auto">
         <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
@@ -206,7 +194,7 @@ onMounted(() => {
     <div class="progress-bar">
       <div
         class="progress h-3px bg-primary transition-all"
-        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100}%` }"
+        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100 + 1}%` }"
       />
     </div>
   </div>
@@ -227,10 +215,6 @@ onMounted(() => {
   opacity: 1;
 }
 
-.section-title {
-  --uno: px-4 py-2 text-xl;
-}
-
 .grid-container {
   --uno: bg-gray/20;
   height: 100%;
@@ -303,4 +287,4 @@ onMounted(() => {
 .grid-section.bottom {
   grid-area: bottom;
 }
-</style>../composables/drawings
+</style>
diff --git a/packages/client/setup/root.ts b/packages/client/setup/root.ts
index 8a443127b8..6903fac351 100644
--- a/packages/client/setup/root.ts
+++ b/packages/client/setup/root.ts
@@ -1,7 +1,7 @@
 import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useHead } from '@unhead/vue'
 import { useRouter } from 'vue-router'
-import { configs } from '../env'
+import { configs, slidesTitle } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
 import { TRUST_ORIGINS, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
@@ -51,8 +51,6 @@ export default function setupRoot() {
   for (const setup of setups)
     setup()
 
-  const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-
   const {
     clicksContext,
     currentSlideNo,
@@ -62,12 +60,12 @@ export default function setupRoot() {
   } = useNav()
 
   useHead({
-    title,
+    title: slidesTitle,
     htmlAttrs: configs.htmlAttrs,
   })
 
-  initSharedState(`${title} - shared`)
-  initDrawingState(`${title} - drawings`)
+  initSharedState(`${slidesTitle} - shared`)
+  initDrawingState(`${slidesTitle} - drawings`)
 
   const id = `${location.origin}_${makeId()}`
 
diff --git a/packages/client/styles/index.css b/packages/client/styles/index.css
index d3d0ef0b5d..8830dcacd0 100644
--- a/packages/client/styles/index.css
+++ b/packages/client/styles/index.css
@@ -116,3 +116,7 @@ html {
 .rough-annotation {
   transform: scale(calc(1 / var(--slidev-slide-scale)));
 }
+
+#twoslash-container {
+  position: fixed;
+}
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
index 265215a8e1..531c42ca9a 100644
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -113,8 +113,8 @@ export type RenderContext = 'none' | 'slide' | 'overview' | 'presenter' | 'previ
 
 export interface SlideRoute {
   no: number
-  meta: RouteMeta
-  component: () => Promise<RouteComponent>
+  meta: RouteMeta & Required<Pick<RouteMeta, 'slide'>>
+  component: () => Promise<{ default: RouteComponent }>
 }
 
 export type LoadedSnippets = Record<string, string>
diff --git a/test/_tutils.ts b/test/_tutils.ts
index 1caa8dc9fd..47f8560201 100644
--- a/test/_tutils.ts
+++ b/test/_tutils.ts
@@ -7,10 +7,6 @@ export function createTransformContext(code: string): MarkdownTransformContext {
   return {
     s,
     id: '1.md',
-    ignores: [],
-    isIgnored(index: number) {
-      return this.ignores.some(([start, end]) => index >= start && index < end)
-    },
     options: {
       userRoot: path.join(__dirname, './fixtures/'),
       data: {

From 2ead82f6364afbb0b0e3783fb5c0e0069750315d Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 24 Apr 2024 14:48:05 +0800
Subject: [PATCH 2/4] fix: Drawing Controls

---
 packages/client/internals/Controls.vue    | 4 +---
 packages/client/internals/NavControls.vue | 4 ----
 packages/client/pages/play.vue            | 2 +-
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/client/internals/Controls.vue b/packages/client/internals/Controls.vue
index f914fa504b..5aacd7e9fe 100644
--- a/packages/client/internals/Controls.vue
+++ b/packages/client/internals/Controls.vue
@@ -23,9 +23,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <template v-if="drawingEnabled && DrawingControls">
-    <DrawingControls class="ml-0" />
-  </template>
+  <DrawingControls v-if="drawingEnabled && DrawingControls" />
   <QuickOverview v-model="showOverview" />
   <Goto />
   <WebCamera v-if="WebCamera" />
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index b3e7b5c0d8..72444736fb 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/internals/NavControls.vue
@@ -53,10 +53,6 @@ const barStyle = computed(() => props.persist
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
   import('./RecordingControls.vue').then(v => RecordingControls.value = v.default)
-
-const DrawingControls = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('./DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index a49af9330e..18d6817c84 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -66,7 +66,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
             isDrawing ? 'pointer-events-none' : '',
           ]"
         >
-          <NavControls class="m-auto" :persist="persistNav" />
+          <NavControls :persist="persistNav" />
         </div>
       </template>
     </SlideContainer>

From 77b846663ad3ddc570631bab900cab96bd250f93 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 24 Apr 2024 14:50:37 +0800
Subject: [PATCH 3/4] chore: QuickOverview

---
 packages/client/internals/Controls.vue      |  4 ++--
 packages/client/internals/QuickOverview.vue | 16 ++++++----------
 packages/client/pages/presenter.vue         |  4 ++--
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/client/internals/Controls.vue b/packages/client/internals/Controls.vue
index 5aacd7e9fe..dc840ae011 100644
--- a/packages/client/internals/Controls.vue
+++ b/packages/client/internals/Controls.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
+import { showInfoDialog, showRecordingDialog } from '../state'
 import { configs } from '../env'
 import { useNav } from '../composables/useNav'
 import QuickOverview from './QuickOverview.vue'
@@ -24,7 +24,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 
 <template>
   <DrawingControls v-if="drawingEnabled && DrawingControls" />
-  <QuickOverview v-model="showOverview" />
+  <QuickOverview />
   <Goto />
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index a74d41d1f9..0464c78647 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEventListener, useVModel } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { breakpoints, showOverview, windowSize } from '../state'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
@@ -11,14 +11,10 @@ import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
-const props = defineProps<{ modelValue: boolean }>()
-const emit = defineEmits(['update:modelValue'])
-const value = useVModel(props, 'modelValue', emit)
-
 const { currentSlideNo, go: goSlide, slides } = useNav()
 
 function close() {
-  value.value = false
+  showOverview.value = false
 }
 
 function go(page: number) {
@@ -116,10 +112,10 @@ setTimeout(() => {
     leave-to-class="opacity-0 scale-102 !backdrop-blur-0px"
   >
     <div
-      v-if="value || activeSlidesLoaded"
-      v-show="value"
+      v-if="showOverview || activeSlidesLoaded"
+      v-show="showOverview"
       class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
-      @click="close()"
+      @click="close"
     >
       <div
         class="grid gap-y-4 gap-x-8 w-full"
@@ -164,7 +160,7 @@ setTimeout(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="value" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
+  <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
       <carbon:close />
     </IconButton>
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index ef0ff50479..6e905306be 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -3,7 +3,7 @@ import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { slidesTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -199,7 +199,7 @@ onMounted(() => {
     </div>
   </div>
   <Goto />
-  <QuickOverview v-model="showOverview" />
+  <QuickOverview />
   <ContextMenu />
 </template>
 

From fc4b1019dc905c280fcd91d2a0d36f2c40a92870 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 24 Apr 2024 14:54:25 +0800
Subject: [PATCH 4/4] fix: condition of overview page link

---
 packages/client/internals/QuickOverview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 0464c78647..b8cc9f2bcc 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -165,7 +165,7 @@ setTimeout(() => {
       <carbon:close />
     </IconButton>
     <IconButton
-      v-if="__DEV__"
+      v-if="__SLIDEV_FEATURE_PRESENTER__"
       as="a"
       title="Slides Overview"
       target="_blank"