From 7f03f741bb55f532880d1b3f9d7beb0f9d7ea4bf Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 10 Apr 2024 22:32:38 +0800
Subject: [PATCH 01/20] feat: custom page templates

---
 packages/client/internals/Controls.vue       |  10 +
 packages/client/internals/QuickOverview.vue  |   2 +-
 packages/client/internals/SlideContainer.vue |  10 +-
 packages/client/page-templates/play.vue      |  20 ++
 packages/client/page-templates/presenter.vue |  89 ++++++++
 packages/client/pages/play.vue               |  81 +++----
 packages/client/pages/presenter.vue          | 219 ++++++-------------
 packages/slidev/node/resolver.ts             |  35 ++-
 packages/slidev/node/virtual/types.ts        |   1 +
 packages/slidev/node/vite/loaders.ts         |  49 ++---
 packages/types/client.d.ts                   |   7 +
 11 files changed, 280 insertions(+), 243 deletions(-)
 create mode 100644 packages/client/page-templates/play.vue
 create mode 100644 packages/client/page-templates/presenter.vue

diff --git a/packages/client/internals/Controls.vue b/packages/client/internals/Controls.vue
index dc8d83c28b..9894159eae 100644
--- a/packages/client/internals/Controls.vue
+++ b/packages/client/internals/Controls.vue
@@ -2,10 +2,17 @@
 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'
 
+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__) {
@@ -15,6 +22,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/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 6e07f8dde1..e4bacdfdee 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -113,7 +113,7 @@ watchEffect(() => {
   >
     <div
       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="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)] z-20"
       @click="close()"
     >
       <div
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index 9ee65faf6c..d4e81f2b35 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/internals/SlideContainer.vue
@@ -20,6 +20,7 @@ const props = defineProps({
     default: false,
   },
 })
+const emit = defineEmits(['update:slide-element'])
 
 const { clicksDirection, isPrintMode } = useNav()
 
@@ -72,11 +73,12 @@ if (props.isMain) {
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
+watchEffect(() => emit('update:slide-element', slideElement.value))
 </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 ref="root" class="slidev-slides-container" :class="className">
+    <div ref="slideElement" class="slidev-slide-content" :style="style">
       <slot />
     </div>
     <slot name="controls" />
@@ -84,11 +86,11 @@ provideLocal(injectionSlideElement, slideElement)
 </template>
 
 <style lang="postcss">
-#slide-container {
+.slidev-slides-container {
   @apply relative overflow-hidden break-after-page;
 }
 
-#slide-content {
+.slidev-slide-content {
   @apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
 }
 </style>
diff --git a/packages/client/page-templates/play.vue b/packages/client/page-templates/play.vue
new file mode 100644
index 0000000000..8b0851ba1d
--- /dev/null
+++ b/packages/client/page-templates/play.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { isEditorVertical, slideScale, windowSize } from '../state'
+import { useNav } from '../composables/useNav'
+
+const { isPrintMode } = useNav()
+</script>
+
+<template>
+  <div class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" v-bind="$attrs">
+    <slot
+      name="slides"
+      class="w-full h-full"
+      :style="{ background: 'var(--slidev-slide-container-background, black)' }"
+      :width="isPrintMode ? windowSize.width.value : undefined"
+      :scale="slideScale"
+    />
+    <slot name="editor" />
+  </div>
+  <slot name="floating" />
+</template>
diff --git a/packages/client/page-templates/presenter.vue b/packages/client/page-templates/presenter.vue
new file mode 100644
index 0000000000..be1d63d3a8
--- /dev/null
+++ b/packages/client/page-templates/presenter.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { presenterLayout } from '../state'
+</script>
+
+<template>
+  <div class="slidev-presenter bg-main h-full">
+    <div class="grid-container children:bg-main" :class="`layout${presenterLayout}`">
+      <div class="relative grid-area-[main] flex flex-col">
+        <slot name="this-slide" class="h-full w-full p-2 lg:p-4 flex-auto" />
+        <slot name="clicks-slider" class="w-full pb2 px4 flex-none" />
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Current
+        </div>
+      </div>
+      <div class="relative grid-area-[next] flex flex-col p-2 lg:p-4">
+        <slot name="next-slide" class="h-full w-full" />
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Next
+        </div>
+      </div>
+      <!-- Notes -->
+      <slot name="notes" class="grid-area-[note]" />
+      <div class="grid-area-[bottom] flex">
+        <slot name="nav-controls" />
+        <div class="flex-auto" />
+        <slot name="timer" />
+      </div>
+    </div>
+    <div class="fixed left-0 right-0 top-0">
+      <slot name="progress-bar" />
+    </div>
+  </div>
+  <slot name="floating" />
+</template>
+
+<style scoped>
+.slidev-presenter {
+  --slidev-controls-foreground: current;
+}
+
+.grid-container {
+  --uno: bg-gray/20;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  gap: 1px 1px;
+}
+
+.grid-container.layout1 {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 2fr 1fr min-content;
+  grid-template-areas:
+    'main main'
+    'note next'
+    'bottom bottom';
+}
+
+.grid-container.layout2 {
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: 2fr 1fr min-content;
+  grid-template-areas:
+    'note main'
+    'note next'
+    'bottom bottom';
+}
+
+@media (max-aspect-ratio: 3/5) {
+  .grid-container.layout1 {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr min-content;
+    grid-template-areas:
+      'main'
+      'note'
+      'next'
+      'bottom';
+  }
+}
+
+@media (min-aspect-ratio: 1/1) {
+  .grid-container.layout1 {
+    grid-template-columns: 1fr 1.1fr 0.9fr;
+    grid-template-rows: 1fr 2fr min-content;
+    grid-template-areas:
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
+  }
+}
+</style>
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index 87c6b2c12e..9fd6f0e675 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 { isScreenVertical, showEditor } 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'
@@ -11,13 +10,16 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import PlayTemplate from '#slidev/page-templates/play'
 
-registerShortcuts()
-
-const { next, prev, isEmbedded, isPrintMode } = useNav()
+const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
+
+useSwipeControls(root)
+registerShortcuts()
+
 function onClick(e: MouseEvent) {
   if (showEditor.value)
     return
@@ -31,56 +33,45 @@ function onClick(e: MouseEvent) {
   }
 }
 
-useSwipeControls(root)
-
 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>
   <PrintStyle v-if="isPrintMode" />
-  <div
-    id="page-root" ref="root" class="grid"
-    :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"
-      @pointerdown="onClick"
-    >
-      <template #default>
-        <SlidesShow render-context="slide" />
-      </template>
-      <template #controls>
-        <div
-          v-if="!isPrintMode"
-          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
-          :class="[
-            persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
-            isDrawing ? 'pointer-events-none' : '',
-          ]"
-        >
-          <NavControls class="m-auto" :persist="persistNav" />
-        </div>
-        <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded && DrawingControls">
-          <DrawingControls class="ml-0" />
+  <PlayTemplate id="page-root">
+    <template #slides="attrs">
+      <SlideContainer
+        is-main
+        v-bind="attrs"
+        @pointerdown="onClick"
+        @update:slide-element="el => (root = el)"
+      >
+        <template #default>
+          <SlidesShow render-context="slide" />
         </template>
-      </template>
-    </SlideContainer>
-
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
+        <template #controls>
+          <div
+            v-if="!isPrintMode"
+            class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
+            :class="[
+              persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
+              isDrawing ? 'pointer-events-none' : '',
+            ]"
+          >
+            <NavControls class="m-auto" :persist="persistNav" />
+          </div>
+        </template>
+      </SlideContainer>
+    </template>
+    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" #editor>
       <SideEditor :resize="true" />
     </template>
-  </div>
-  <Controls v-if="!isPrintMode" />
+    <template #floating>
+      <Controls v-if="!isPrintMode" />
+    </template>
+  </PlayTemplate>
 </template>
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index 9ab56b5ebd..1b8c58b204 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { computed, reactive, ref, shallowRef, watch, watchEffect } 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, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -23,6 +23,7 @@ import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import PresenterTemplate from '#slidev/page-templates/presenter'
 
 const main = ref<HTMLDivElement>()
 
@@ -79,77 +80,49 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 // sync presenter cursor
-onMounted(() => {
-  const slidesContainer = main.value!.querySelector('#slide-content')!
-  const mouse = reactive(useMouse())
-  const focus = useWindowFocus()
+const mouse = reactive(useMouse())
+const focus = useWindowFocus()
+watchEffect(() => {
+  const slidesContainer = main.value?.querySelector('slidev-slide-content')
 
-  watch(
-    () => {
-      if (!focus.value || isDrawing.value || !showPresenterCursor.value)
-        return undefined
+  if (!slidesContainer || !focus.value || isDrawing.value || !showPresenterCursor.value)
+    return undefined
 
-      const rect = slidesContainer.getBoundingClientRect()
-      const x = (mouse.x - rect.left) / rect.width * 100
-      const y = (mouse.y - rect.top) / rect.height * 100
+  const rect = slidesContainer.getBoundingClientRect()
+  const x = (mouse.x - rect.left) / rect.width * 100
+  const y = (mouse.y - rect.top) / rect.height * 100
 
-      if (x < 0 || x > 100 || y < 0 || y > 100)
-        return undefined
+  if (x < 0 || x > 100 || y < 0 || y > 100)
+    return undefined
 
-      return { x, y }
-    },
-    (pos) => {
-      sharedState.cursor = pos
-    },
-  )
+  sharedState.cursor = { x, y }
 })
 </script>
 
 <template>
-  <div class="bg-main h-full slidev-presenter">
-    <div class="grid-container" :class="`layout${presenterLayout}`">
-      <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"
-        >
-          <template #default>
-            <SlidesShow render-context="presenter" />
-          </template>
-        </SlideContainer>
-        <ClicksSlider
-          :key="currentSlideRoute?.no"
-          :clicks-context="getPrimaryClicks(currentSlideRoute)"
-          class="w-full pb2 px4 flex-none"
+  <PresenterTemplate>
+    <template #this-slide="attrs">
+      <SlideContainer is-main v-bind="attrs" @update:slide-element="el => (main = el)">
+        <SlidesShow render-context="presenter" />
+      </SlideContainer>
+    </template>
+    <template v-if="nextFrame && nextFrameClicksCtx" #next-slide="attrs">
+      <SlideContainer v-bind="attrs">
+        <SlideWrapper
+          :is="nextFrame[0].component!"
+          :key="nextFrame[0].no"
+          :clicks-context="nextFrameClicksCtx"
+          :class="getSlideClass(nextFrame[0])"
+          :route="nextFrame[0]"
+          render-context="previewNext"
         />
-        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
-          Current
-        </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"
-        >
-          <SlideWrapper
-            :is="nextFrame[0].component!"
-            :key="nextFrame[0].no"
-            :clicks-context="nextFrameClicksCtx"
-            :class="getSlideClass(nextFrame[0])"
-            :route="nextFrame[0]"
-            render-context="previewNext"
-          />
-        </SlideContainer>
-        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
-          Next
-        </div>
-      </div>
-      <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+      </SlideContainer>
+    </template>
+    <template #notes="attrs">
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="of-auto" v-bind="attrs">
         <SideEditor />
       </div>
-      <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
+      <div v-else class="grid grid-rows-[1fr_min-content] overflow-hidden" v-bind="attrs">
         <NoteEditable
           v-if="__DEV__"
           :key="`edit-${currentSlideNo}`"
@@ -183,120 +156,52 @@ onMounted(() => {
           </IconButton>
         </div>
       </div>
-      <div class="grid-section bottom flex">
-        <NavControls :persist="true" />
-        <div flex-auto />
+    </template>
+    <template #clicks-slider="attrs">
+      <ClicksSlider
+        :key="currentSlideRoute?.no"
+        :clicks-context="getPrimaryClicks(currentSlideRoute)"
+        v-bind="attrs"
+      />
+    </template>
+    <template #nav-controls="attrs">
+      <NavControls :persist="true" v-bind="attrs" />
+    </template>
+    <template #timer="attrs">
+      <div class="flex items-center" v-bind="attrs">
         <div
-          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
+          class="timer-btn relative w-22px h-22px cursor-pointer text-lg"
           opacity="50 hover:100"
           @click="resetTimer"
         >
           <carbon:time class="absolute" />
           <carbon:renew class="absolute opacity-0" />
         </div>
-        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
+        <div class="text-2xl pl-2 pr-6 tabular-nums">
           {{ timer }}
         </div>
       </div>
-      <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
-    </div>
-    <div class="progress-bar">
+    </template>
+    <template #progress-bar="attrs">
       <div
-        class="progress h-3px bg-primary transition-all"
+        class="h-3px bg-primary transition-all"
         :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100}%` }"
+        v-bind="attrs"
       />
-    </div>
-  </div>
-  <Goto />
-  <QuickOverview v-model="showOverview" />
+    </template>
+    <template #floating>
+      <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
+      <Goto />
+      <QuickOverview v-model="showOverview" />
+    </template>
+  </PresenterTemplate>
 </template>
 
 <style scoped>
-.slidev-presenter {
-  --slidev-controls-foreground: current;
-}
-
 .timer-btn:hover > :first-child {
   opacity: 0;
 }
 .timer-btn:hover > :last-child {
   opacity: 1;
 }
-
-.section-title {
-  --uno: px-4 py-2 text-xl;
-}
-
-.grid-container {
-  --uno: bg-gray/20;
-  height: 100%;
-  width: 100%;
-  display: grid;
-  gap: 1px 1px;
-}
-
-.grid-container.layout1 {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 2fr 1fr min-content;
-  grid-template-areas:
-    'main main'
-    'note next'
-    'bottom bottom';
-}
-
-.grid-container.layout2 {
-  grid-template-columns: 3fr 2fr;
-  grid-template-rows: 2fr 1fr min-content;
-  grid-template-areas:
-    'note main'
-    'note next'
-    'bottom bottom';
-}
-
-@media (max-aspect-ratio: 3/5) {
-  .grid-container.layout1 {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 1fr min-content;
-    grid-template-areas:
-      'main'
-      'note'
-      'next'
-      'bottom';
-  }
-}
-
-@media (min-aspect-ratio: 1/1) {
-  .grid-container.layout1 {
-    grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: 1fr 2fr min-content;
-    grid-template-areas:
-      'main main next'
-      'main main note'
-      'bottom bottom bottom';
-  }
-}
-
-.progress-bar {
-  --uno: fixed left-0 right-0 top-0;
-}
-
-.grid-section {
-  --uno: bg-main;
-}
-
-.grid-section.top {
-  grid-area: top;
-}
-.grid-section.main {
-  grid-area: main;
-}
-.grid-section.next {
-  grid-area: next;
-}
-.grid-section.note {
-  grid-area: note;
-}
-.grid-section.bottom {
-  grid-area: bottom;
-}
-</style>../composables/drawings
+</style>
diff --git a/packages/slidev/node/resolver.ts b/packages/slidev/node/resolver.ts
index 68beb4a89d..d8b66c272f 100644
--- a/packages/slidev/node/resolver.ts
+++ b/packages/slidev/node/resolver.ts
@@ -1,4 +1,4 @@
-import { dirname, join, resolve } from 'node:path'
+import { basename, dirname, join, resolve } from 'node:path'
 import * as fs from 'node:fs'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
@@ -11,7 +11,8 @@ import globalDirs from 'global-directory'
 import prompts from 'prompts'
 import { parseNi, run } from '@antfu/ni'
 import { underline, yellow } from 'kolorist'
-import type { RootsInfo } from '@slidev/types'
+import fg from 'fast-glob'
+import type { ResolvedSlidevOptions, RootsInfo } from '@slidev/types'
 
 const cliRoot = fileURLToPath(new URL('..', import.meta.url))
 
@@ -240,3 +241,33 @@ export async function getRoots(entry?: string): Promise<RootsInfo> {
   }
   return rootsInfo
 }
+
+export function createGlobResolver(source: string, { roots, clientRoot }: ResolvedSlidevOptions) {
+  let cache_time = 0
+  let cache_data: Record<string, string> = {}
+  return async function () {
+    const now = Date.now()
+    if (now - cache_time < 2000)
+      return cache_data
+
+    const fileMap: Record<string, string> = {}
+
+    const allFiles = await Promise.all([...roots, clientRoot].map(cwd => fg(source, {
+      cwd,
+      absolute: true,
+      suppressErrors: true,
+    })))
+
+    for (const filePath of allFiles.flat()) {
+      const name = basename(filePath).replace(/\.\w+$/, '')
+      if (fileMap[name])
+        continue
+      fileMap[name] = filePath
+    }
+
+    cache_time = now
+    cache_data = fileMap
+
+    return fileMap
+  }
+}
diff --git a/packages/slidev/node/virtual/types.ts b/packages/slidev/node/virtual/types.ts
index 1a38b63127..f4e8091f1a 100644
--- a/packages/slidev/node/virtual/types.ts
+++ b/packages/slidev/node/virtual/types.ts
@@ -10,4 +10,5 @@ export interface VirtualModuleTemplate {
 export interface VirtualModuleTempalteContext {
   md: MarkdownIt
   getLayouts: () => Promise<Record<string, string>>
+  getPageTemplates: () => Promise<Record<string, string>>
 }
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
index 2b2467df86..834c81efa7 100644
--- a/packages/slidev/node/vite/loaders.ts
+++ b/packages/slidev/node/vite/loaders.ts
@@ -1,7 +1,5 @@
-import { basename } from 'node:path'
 import type { Connect, HtmlTagDescriptor, ModuleNode, Plugin, Update, ViteDevServer } from 'vite'
 import { isString, isTruthy, notNullish, range } from '@antfu/utils'
-import fg from 'fast-glob'
 import fs from 'fs-extra'
 import Markdown from 'markdown-it'
 import YAML from 'js-yaml'
@@ -15,7 +13,7 @@ import equal from 'fast-deep-equal'
 
 import type { LoadResult } from 'rollup'
 import { stringifyMarkdownTokens } from '../utils'
-import { toAtFS } from '../resolver'
+import { createGlobResolver, toAtFS } from '../resolver'
 import { templates } from '../virtual'
 import type { VirtualModuleTempalteContext } from '../virtual/types'
 import { templateTitleRendererMd } from '../virtual/titles'
@@ -101,42 +99,14 @@ export function createSlidesLoader(
   const hmrPages = new Set<number>()
   let server: ViteDevServer | undefined
 
-  let _layouts_cache_time = 0
-  let _layouts_cache: Record<string, string> = {}
-
   let skipHmr: { filePath: string, fileContent: string } | null = null
 
-  const { data, clientRoot, roots, mode } = options
+  const { data, mode } = options
 
   const templateCtx: VirtualModuleTempalteContext = {
     md,
-    async getLayouts() {
-      const now = Date.now()
-      if (now - _layouts_cache_time < 2000)
-        return _layouts_cache
-
-      const layouts: Record<string, string> = {}
-
-      for (const root of [...roots, clientRoot]) {
-        const layoutPaths = await fg('layouts/**/*.{vue,ts}', {
-          cwd: root,
-          absolute: true,
-          suppressErrors: true,
-        })
-
-        for (const layoutPath of layoutPaths) {
-          const layout = basename(layoutPath).replace(/\.\w+$/, '')
-          if (layouts[layout])
-            continue
-          layouts[layout] = layoutPath
-        }
-      }
-
-      _layouts_cache_time = now
-      _layouts_cache = layouts
-
-      return layouts
-    },
+    getLayouts: createGlobResolver('layouts/**/*.{vue,ts}', options),
+    getPageTemplates: createGlobResolver('page-templates/**/*.{vue,ts}', options),
   }
 
   return [
@@ -402,6 +372,17 @@ export function createSlidesLoader(
             map: { mappings: '' },
           }
         }
+
+        // page templates
+        const VIRTUAL_PAGE_TEMPLATES_PREFIX = '/@slidev/page-templates/'
+        if (id.startsWith(VIRTUAL_PAGE_TEMPLATES_PREFIX)) {
+          const templateName = id.slice(VIRTUAL_PAGE_TEMPLATES_PREFIX.length)
+          const template = (await templateCtx.getPageTemplates())[templateName]
+          return {
+            code: `import PageTemplate from "${toAtFS(template)}"\nexport default PageTemplate`,
+            map: { mappings: '' },
+          }
+        }
       },
     },
     {
diff --git a/packages/types/client.d.ts b/packages/types/client.d.ts
index 39a864d563..bfe2b94e86 100644
--- a/packages/types/client.d.ts
+++ b/packages/types/client.d.ts
@@ -44,6 +44,13 @@ declare module '#slidev/custom-nav-controls' {
   export default component
 }
 
+declare module '#slidev/page-templates/*' {
+  import type { Component } from 'vue'
+
+  const component: Component
+  export default component
+}
+
 declare module '#slidev/shiki' {
   import type { ShikiHighlighterCore } from 'shiki/core'
   import type { BundledLanguage, BundledTheme } from 'shiki'

From 1c237dfb760fe973d4690d964d989ae1ee6aa081 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Thu, 11 Apr 2024 16:43:15 +0800
Subject: [PATCH 02/20] rewrite notes page

---
 packages/client/env.ts                       |  2 +
 packages/client/page-templates/notes.vue     | 15 +++++
 packages/client/page-templates/presenter.vue |  1 -
 packages/client/pages/notes.vue              | 64 +++++++++++---------
 packages/client/pages/overview.vue           |  3 +-
 packages/client/pages/presenter.vue          |  7 +--
 packages/client/setup/root.ts                | 10 ++-
 7 files changed, 60 insertions(+), 42 deletions(-)
 create mode 100644 packages/client/page-templates/notes.vue

diff --git a/packages/client/env.ts b/packages/client/env.ts
index a8cee09168..3845bf3e24 100644
--- a/packages/client/env.ts
+++ b/packages/client/env.ts
@@ -14,3 +14,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 slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
diff --git a/packages/client/page-templates/notes.vue b/packages/client/page-templates/notes.vue
new file mode 100644
index 0000000000..f6bfb0973d
--- /dev/null
+++ b/packages/client/page-templates/notes.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-col h-full">
+    <slot name="progress-bar" />
+    <div class="flex flex-col flex-grow">
+      <slot name="content" class="p-5" />
+      <div class="flex-none border-t border-main">
+        <div class="flex gap-1 items-center px-6 py-3">
+          <slot name="controls" />
+          <div class="flex-auto" />
+          <slot name="slide-no" class="pa-2 text-center" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/client/page-templates/presenter.vue b/packages/client/page-templates/presenter.vue
index be1d63d3a8..adb4f8ea8a 100644
--- a/packages/client/page-templates/presenter.vue
+++ b/packages/client/page-templates/presenter.vue
@@ -18,7 +18,6 @@ import { presenterLayout } from '../state'
           Next
         </div>
       </div>
-      <!-- Notes -->
       <slot name="notes" class="grid-area-[note]" />
       <div class="grid-area-[bottom] flex">
         <slot name="nav-controls" />
diff --git a/packages/client/pages/notes.vue b/packages/client/pages/notes.vue
index 90f83b4f89..434348a132 100644
--- a/packages/client/pages/notes.vue
+++ b/packages/client/pages/notes.vue
@@ -2,15 +2,14 @@
 import { useHead } from '@unhead/vue'
 import { computed, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { configs } from '../env'
+import { slideTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
-
+import { useNav } from '../composables/useNav'
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
-import { useNav } from '../composables/useNav'
+import NotesTemplate from '#slidev/page-templates/notes'
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Notes - ${slideTitle}`,
 })
@@ -38,26 +37,32 @@ function decreaseFontSize() {
 </script>
 
 <template>
-  <div
-    class="fixed top-0 left-0 h-2px bg-teal-500 transition-all duration-500"
-    :style="{ width: `${(pageNo - 1) / total * 100}%` }"
-  />
-  <div class="h-full 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"
-        :placeholder="`No notes for Slide ${pageNo}.`"
-        :clicks-context="currentRoute?.meta?.__clicksContext"
-        :auto-scroll="true"
+  <NotesTemplate>
+    <template #progress-bar="attrs">
+      <div
+        class="h-3px bg-primary transition-all duration-500"
+        :style="{ width: `${(pageNo - 1) / (total - 1) * 100 + 1}%` }"
+        v-bind="attrs"
       />
-    </div>
-    <div class="flex-none border-t border-main">
-      <div class="flex gap-1 items-center px-6 py-3">
+    </template>
+    <template #content="attrs">
+      <div
+        ref="scroller"
+        class="flex-auto h-full overflow-auto"
+        :style="{ fontSize: `${fontSize}px` }"
+        v-bind="attrs"
+      >
+        <NoteDisplay
+          :note="currentRoute?.meta?.slide?.note"
+          :note-html="currentRoute?.meta?.slide?.noteHTML"
+          :placeholder="`No notes for Slide ${pageNo}.`"
+          :clicks-context="currentRoute?.meta?.__clicksContext"
+          :auto-scroll="true"
+        />
+      </div>
+    </template>
+    <template #controls="attrs">
+      <div v-bind="attrs">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
@@ -68,11 +73,12 @@ function decreaseFontSize() {
         <IconButton title="Decrease font size" @click="decreaseFontSize">
           <carbon:zoom-out />
         </IconButton>
-        <div class="flex-auto" />
-        <div class="p2 text-center">
-          {{ pageNo }} / {{ total }}
-        </div>
       </div>
-    </div>
-  </div>
+    </template>
+    <template #slide-no="attrs">
+      <div v-bind="attrs">
+        {{ pageNo }} / {{ total }}
+      </div>
+    </template>
+  </NotesTemplate>
 </template>
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 74a1fbcc35..44a4c81215 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -2,7 +2,7 @@
 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 { slideTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -18,7 +18,6 @@ import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Overview - ${slideTitle}`,
 })
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index 1b8c58b204..65b722f282 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -4,7 +4,7 @@ import { computed, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs } from '../env'
+import { slideTitle } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
@@ -43,7 +43,6 @@ const {
 } = useNav()
 const { isDrawing } = useDrawings()
 
-const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Presenter - ${slideTitle}`,
 })
@@ -184,8 +183,8 @@ watchEffect(() => {
     </template>
     <template #progress-bar="attrs">
       <div
-        class="h-3px bg-primary transition-all"
-        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100}%` }"
+        class="h-3px bg-primary transition-all duration-500"
+        :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100 + 1}%` }"
         v-bind="attrs"
       />
     </template>
diff --git a/packages/client/setup/root.ts b/packages/client/setup/root.ts
index 8a443127b8..6cbd2c807d 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, slideTitle } 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: slideTitle,
     htmlAttrs: configs.htmlAttrs,
   })
 
-  initSharedState(`${title} - shared`)
-  initDrawingState(`${title} - drawings`)
+  initSharedState(`${slideTitle} - shared`)
+  initDrawingState(`${slideTitle} - drawings`)
 
   const id = `${location.origin}_${makeId()}`
 

From 604bee426eef969ee6eef6df7ae21fa526e7aca8 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Thu, 11 Apr 2024 16:54:05 +0800
Subject: [PATCH 03/20] fix: overview style

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

diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 44a4c81215..2458dd7c0d 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -101,7 +101,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"

From ef9c67ccaf1fdd00f53d1b65e59704d5bcc47788 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sun, 14 Apr 2024 12:29:22 +0800
Subject: [PATCH 04/20] feat: implement print template

---
 packages/client/composables/useNav.ts         |  9 ++-
 packages/client/composables/useSlideScale.ts  | 38 +++++++++
 packages/client/internals/DrawingControls.vue |  2 +-
 packages/client/internals/DrawingLayer.vue    |  2 +-
 packages/client/internals/DrawingPreview.vue  |  2 +-
 packages/client/internals/PrintContainer.vue  | 58 --------------
 packages/client/internals/PrintSlideClick.vue |  6 ++
 packages/client/internals/PrintStyle.vue      | 23 +++---
 packages/client/internals/SlideContainer.vue  | 71 ++++------------
 packages/client/internals/SlideWrapper.vue    |  7 +-
 packages/client/internals/SlidesShow.vue      |  8 +-
 packages/client/page-templates/play.vue       | 15 +---
 .../client/page-templates/print/default.vue   | 21 +++++
 .../client/page-templates/print/notes.vue     | 53 ++++++++++++
 packages/client/pages/overview.vue            |  5 +-
 packages/client/pages/play.vue                |  7 +-
 packages/client/pages/presenter.vue           |  2 +
 packages/client/pages/presenter/print.vue     | 70 ----------------
 packages/client/pages/print.vue               | 49 +++++-------
 packages/client/routes.ts                     |  4 -
 packages/client/styles/index.css              |  4 +
 packages/slidev/node/cli.ts                   | 75 ++++-------------
 packages/slidev/node/commands/build.ts        |  2 +-
 packages/slidev/node/commands/export.ts       | 80 +++----------------
 packages/slidev/node/options.ts               |  2 +
 packages/slidev/node/virtual/types.ts         |  1 +
 packages/slidev/node/vite/loaders.ts          |  9 ++-
 packages/types/src/cli.ts                     |  1 +
 packages/types/src/options.ts                 |  1 +
 packages/types/src/types.ts                   |  2 +-
 30 files changed, 239 insertions(+), 390 deletions(-)
 create mode 100644 packages/client/composables/useSlideScale.ts
 delete mode 100644 packages/client/internals/PrintContainer.vue
 create mode 100644 packages/client/page-templates/print/default.vue
 create mode 100644 packages/client/page-templates/print/notes.vue
 delete mode 100644 packages/client/pages/presenter/print.vue

diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 8653bb6b20..4132b4b7b8 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/composables/useNav.ts
@@ -6,6 +6,7 @@ import type { RouteLocationNormalized, Router } from 'vue-router'
 import { createSharedComposable } from '@vueuse/core'
 import { logicOr } from '@vueuse/math'
 import { clamp } from '@antfu/utils'
+import { parseRangeString } from '@slidev/parser'
 import { getCurrentTransition } from '../logic/transition'
 import { getSlide, getSlidePath } from '../logic/slides'
 import { CLICKS_MAX } from '../constants'
@@ -67,6 +68,7 @@ export interface SlidevContextNavState {
   currentRoute: ComputedRef<RouteLocationNormalized>
   isPrintMode: ComputedRef<boolean>
   isPrintWithClicks: ComputedRef<boolean>
+  slidesToPrint: ComputedRef<SlideRoute[]>
   isEmbedded: ComputedRef<boolean>
   isPlaying: ComputedRef<boolean>
   isPresenter: ComputedRef<boolean>
@@ -258,7 +260,11 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     return new URLSearchParams(location.search)
   })
   const isPrintMode = computed(() => query.value.has('print'))
-  const isPrintWithClicks = computed(() => query.value.get('print') === 'clicks')
+  const isPrintWithClicks = computed(() => query.value.get('clicks') === 'true')
+  const slidesToPrint = computed(() => {
+    const range = query.value.get('range')
+    return range ? parseRangeString(slides.value.length, range).map(i => slides.value[i - 1]) : slides.value
+  })
   const isEmbedded = computed(() => query.value.has('embedded'))
   const isPlaying = computed(() => currentRoute.value.name === 'play')
   const isPresenter = computed(() => currentRoute.value.name === 'presenter')
@@ -328,6 +334,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     currentRoute,
     isPrintMode,
     isPrintWithClicks,
+    slidesToPrint,
     isEmbedded,
     isPlaying,
     isPresenter,
diff --git a/packages/client/composables/useSlideScale.ts b/packages/client/composables/useSlideScale.ts
new file mode 100644
index 0000000000..f4f9316155
--- /dev/null
+++ b/packages/client/composables/useSlideScale.ts
@@ -0,0 +1,38 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import { useStyleTag } from '@vueuse/core'
+import { slideAspect, slideHeight, slideWidth } from '../env'
+import { slideScale } from '../state'
+import { useNav } from './useNav'
+
+export function useSlideScale(
+  containerSize: { width: Ref<number>, height: Ref<number> },
+  expectedWidth?: number,
+  isMain: boolean = false,
+) {
+  const { isPrintMode } = useNav()
+
+  const width = computed(() => expectedWidth ?? containerSize.width.value)
+  const height = computed(() => expectedWidth ? expectedWidth / slideAspect.value : containerSize.height.value)
+
+  const scale = computed(() => {
+    if (slideScale.value && !isPrintMode.value)
+      return +slideScale.value
+    return Math.min(width.value / slideWidth.value, height.value / slideHeight.value)
+  })
+
+  const style = computed(() => ({
+    'height': `${slideHeight.value}px`,
+    'width': `${slideWidth.value}px`,
+    'transform': `translate(-50%, -50%) scale(${scale.value})`,
+    '--slidev-slide-scale': scale.value,
+  }))
+
+  if (isMain)
+    useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))
+
+  return {
+    scale,
+    style,
+  }
+}
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/PrintContainer.vue b/packages/client/internals/PrintContainer.vue
deleted file mode 100644
index 76666cff86..0000000000
--- a/packages/client/internals/PrintContainer.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { parseRangeString } from '@slidev/parser/core'
-import { computed } from 'vue'
-import { provideLocal } from '@vueuse/core'
-import { configs, slideAspect, slideWidth } from '../env'
-import { injectionSlideScale } from '../constants'
-import { useNav } from '../composables/useNav'
-import PrintSlide from './PrintSlide.vue'
-
-const props = defineProps<{
-  width: number
-}>()
-
-const { slides, currentRoute } = useNav()
-
-const width = computed(() => props.width)
-const height = computed(() => props.width / slideAspect.value)
-
-const screenAspect = computed(() => width.value / height.value)
-
-const scale = computed(() => {
-  if (screenAspect.value < slideAspect.value)
-    return width.value / slideWidth.value
-  return (height.value * slideAspect.value) / slideWidth.value
-})
-
-// 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])
-}
-
-const className = computed(() => ({
-  'select-none': !configs.selectable,
-}))
-
-provideLocal(injectionSlideScale, scale)
-</script>
-
-<template>
-  <div id="print-container" :class="className">
-    <div id="print-content">
-      <PrintSlide v-for="route of routes" :key="route.no" :route="route" />
-    </div>
-    <slot name="controls" />
-  </div>
-</template>
-
-<style lang="postcss">
-#print-content {
-  @apply bg-main;
-}
-
-.print-slide-container {
-  @apply relative overflow-hidden break-after-page translate-0;
-}
-</style>
diff --git a/packages/client/internals/PrintSlideClick.vue b/packages/client/internals/PrintSlideClick.vue
index 49dd1101d1..e04821447f 100644
--- a/packages/client/internals/PrintSlideClick.vue
+++ b/packages/client/internals/PrintSlideClick.vue
@@ -59,3 +59,9 @@ provideLocal(injectionSlidevContext, reactive({
     <GlobalTop />
   </div>
 </template>
+
+<style scoped lang="postcss">
+.print-slide-container {
+  @apply relative overflow-hidden break-after-page translate-0;
+}
+</style>
diff --git a/packages/client/internals/PrintStyle.vue b/packages/client/internals/PrintStyle.vue
index 9331ac19c6..f9f659106c 100644
--- a/packages/client/internals/PrintStyle.vue
+++ b/packages/client/internals/PrintStyle.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import type { Slots } from 'vue'
-import { h } from 'vue'
-import { slideHeight, slideWidth } from '../env'
-
-function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
-  if (slots.default)
-    return h('style', slots.default())
-}
+defineProps<{
+  pageWidth: number
+  pageHeight: number
+}>()
 </script>
 
-<template>
-  <vStyle>
-    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
-  </vStyle>
-</template>
+<style>
+@page {
+  size: v-bind('`${pageWidth}px`') v-bind('`${pageHeight}px`');
+  margin: 0;
+}
+</style>
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index d4e81f2b35..cf2c1f3a2f 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/internals/SlideContainer.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
+import { provideLocal, useElementSize } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { configs, slideAspect, slideHeight, slideWidth } from '../env'
+import { useSlideScale } from '../composables/useSlideScale'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
-import { useNav } from '../composables/useNav'
+import { slideAspect } from '../env'
 
 const props = defineProps({
   width: {
@@ -12,9 +12,6 @@ const props = defineProps({
   meta: {
     default: () => ({}) as any,
   },
-  scale: {
-    type: [Number, String],
-  },
   isMain: {
     type: Boolean,
     default: false,
@@ -22,54 +19,19 @@ const props = defineProps({
 })
 const emit = defineEmits(['update:slide-element'])
 
-const { clicksDirection, 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)
+const { scale, style: contentStyle } = useSlideScale(containerSize, props.width, props.isMain)
 
-if (props.width) {
-  watchEffect(() => {
-    if (root.value) {
-      root.value.style.width = `${width.value}px`
-      root.value.style.height = `${height.value}px`
+const containerStyle = computed(() => props.width
+  ? {
+      width: `${props.width}px`,
+      height: `${props.width / slideAspect.value}px`,
     }
-  })
-}
-
-const screenAspect = computed(() => width.value / 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
-})
-
-const style = 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};
-    }
-  `))
-}
+  : {},
+)
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
@@ -77,8 +39,8 @@ watchEffect(() => emit('update:slide-element', slideElement.value))
 </script>
 
 <template>
-  <div ref="root" class="slidev-slides-container" :class="className">
-    <div ref="slideElement" class="slidev-slide-content" :style="style">
+  <div ref="container" class="slidev-slide-container" :style="containerStyle">
+    <div ref="slideElement" class="slidev-slide-content" :style="contentStyle">
       <slot />
     </div>
     <slot name="controls" />
@@ -86,8 +48,9 @@ watchEffect(() => emit('update:slide-element', slideElement.value))
 </template>
 
 <style lang="postcss">
-.slidev-slides-container {
-  @apply relative overflow-hidden break-after-page;
+.slidev-slide-container {
+  @apply relative w-full h-full overflow-hidden;
+  background: var(--slidev-slide-container-background, black);
 }
 
 .slidev-slide-content {
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index 047566cdcb..0759fa83d8 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -5,6 +5,7 @@ import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
 import { getSlideClass } from '../utils'
+import { configs } from '../env'
 import SlideLoading from './SlideLoading.vue'
 
 const props = defineProps({
@@ -39,7 +40,7 @@ provideLocal(injectionActive, toRef(props, 'active'))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
-const style = computed(() => {
+const zoomStyle = computed(() => {
   return zoom.value === 1
     ? undefined
     : {
@@ -49,6 +50,10 @@ const style = computed(() => {
         transform: `scale(${zoom.value})`,
       }
 })
+const style = computed(() => ({
+  ...zoomStyle.value,
+  'user-select': configs.selectable ? undefined : 'none',
+}))
 
 const SlideComponent = defineAsyncComponent({
   loader: async () => {
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index 4cc6fb4819..c9abccaa42 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,6 +63,10 @@ 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
@@ -87,7 +90,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/page-templates/play.vue b/packages/client/page-templates/play.vue
index 8b0851ba1d..a328fe7ddb 100644
--- a/packages/client/page-templates/play.vue
+++ b/packages/client/page-templates/play.vue
@@ -1,19 +1,10 @@
 <script setup lang="ts">
-import { isEditorVertical, slideScale, windowSize } from '../state'
-import { useNav } from '../composables/useNav'
-
-const { isPrintMode } = useNav()
+import { isEditorVertical } from '../state'
 </script>
 
 <template>
-  <div class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" v-bind="$attrs">
-    <slot
-      name="slides"
-      class="w-full h-full"
-      :style="{ background: 'var(--slidev-slide-container-background, black)' }"
-      :width="isPrintMode ? windowSize.width.value : undefined"
-      :scale="slideScale"
-    />
+  <div class="grid" :class="isEditorVertical ? 'grid grid-rows-[1fr_max-content]' : 'grid grid-cols-[1fr_max-content]'" v-bind="$attrs">
+    <slot name="slides" />
     <slot name="editor" />
   </div>
   <slot name="floating" />
diff --git a/packages/client/page-templates/print/default.vue b/packages/client/page-templates/print/default.vue
new file mode 100644
index 0000000000..910c413926
--- /dev/null
+++ b/packages/client/page-templates/print/default.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { provideLocal } from '@vueuse/core'
+import { computed } from 'vue'
+import { injectionSlideScale } from '../../constants'
+import { slideHeight, slideWidth } from '../../env'
+import { useNav } from '../../composables/useNav'
+import PrintStyle from '../../internals/PrintStyle.vue'
+import PrintSlide from '../../internals/PrintSlide.vue'
+
+provideLocal(injectionSlideScale, computed(() => 1))
+
+const { slidesToPrint } = useNav()
+</script>
+
+<template>
+  <PrintStyle :page-width="slideWidth" :page-height="slideHeight" />
+  <div>
+    <PrintSlide v-for="route of slidesToPrint" :key="route.no" :route="route" />
+    <slot name="floating" />
+  </div>
+</template>
diff --git a/packages/client/page-templates/print/notes.vue b/packages/client/page-templates/print/notes.vue
new file mode 100644
index 0000000000..b4a0ed5ec3
--- /dev/null
+++ b/packages/client/page-templates/print/notes.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNav } from '../../composables/useNav'
+import { configs } from '../../env'
+import NoteDisplay from '../../internals/NoteDisplay.vue'
+
+const { slidesToPrint, total } = useNav()
+
+const slidesWithNote = computed(() => slidesToPrint.value
+  .map(route => route.meta.slide)
+  .filter(slide => slide.noteHTML),
+)
+</script>
+
+<template>
+  <div class="m-4">
+    <div class="mb-10">
+      <h1 class="text-4xl font-bold mt-2">
+        {{ configs.title }}
+      </h1>
+      <div class="opacity-50">
+        {{ new Date().toLocaleString() }}
+      </div>
+    </div>
+
+    <div v-for="(slide, index) of slidesWithNote" :key="slide.no" class="flex flex-col gap-4 break-inside-avoid-page">
+      <div>
+        <h2 class="text-lg">
+          <div class="font-bold flex gap-2">
+            <div class="opacity-50">
+              {{ slide.no }}/{{ total }}
+            </div>
+            {{ slide.title }}
+            <div class="flex-auto" />
+          </div>
+        </h2>
+        <NoteDisplay
+          :note-html="slide.noteHTML"
+          class="max-w-full"
+        />
+      </div>
+      <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
+    </div>
+  </div>
+</template>
+
+<style>
+@page {
+  size: A4;
+  margin-top: 1.5cm;
+  margin-bottom: 1cm;
+}
+</style>
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 2458dd7c0d..8553466079 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -163,7 +163,7 @@ onMounted(() => {
             v-if="route.meta?.slide"
             class="mr--3 op0 group-hover:op80"
             title="Open in editor"
-            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide!.start}`)"
           >
             <carbon:cics-program />
           </IconButton>
@@ -190,9 +190,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 9fd6f0e675..0b67be2cff 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -7,12 +7,11 @@ import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 import PlayTemplate from '#slidev/page-templates/play'
 
-const { next, prev, isPrintMode } = useNav()
+const { next, prev } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
@@ -41,7 +40,6 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <PlayTemplate id="page-root">
     <template #slides="attrs">
       <SlideContainer
@@ -55,7 +53,6 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
         </template>
         <template #controls>
           <div
-            v-if="!isPrintMode"
             class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
             :class="[
               persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
@@ -71,7 +68,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
       <SideEditor :resize="true" />
     </template>
     <template #floating>
-      <Controls v-if="!isPrintMode" />
+      <Controls />
     </template>
   </PlayTemplate>
 </template>
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index 65b722f282..b0f4964e77 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -21,6 +21,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import IconButton from '../internals/IconButton.vue'
 import ClicksSlider from '../internals/ClicksSlider.vue'
+import PresenterMouse from '../internals/PresenterMouse.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 import PresenterTemplate from '#slidev/page-templates/presenter'
@@ -192,6 +193,7 @@ watchEffect(() => {
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
       <Goto />
       <QuickOverview v-model="showOverview" />
+      <PresenterMouse />
     </template>
   </PresenterTemplate>
 </template>
diff --git a/packages/client/pages/presenter/print.vue b/packages/client/pages/presenter/print.vue
deleted file mode 100644
index b168f4ee53..0000000000
--- a/packages/client/pages/presenter/print.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useStyleTag } from '@vueuse/core'
-import { useHead } from '@unhead/vue'
-import { useNav } from '../../composables/useNav'
-import { configs } from '../../env'
-import NoteDisplay from '../../internals/NoteDisplay.vue'
-
-const { slides, total } = useNav()
-
-useStyleTag(`
-@page {
-  size: A4;
-  margin-top: 1.5cm;
-  margin-bottom: 1cm;
-}
-* {
-  -webkit-print-color-adjust: exact;
-}
-html,
-html body,
-html #app,
-html #page-root {
-  height: auto;
-  overflow: auto !important;
-}
-`)
-
-useHead({
-  title: `Notes - ${configs.title}`,
-})
-
-const slidesWithNote = computed(() => slides.value
-  .map(route => route.meta?.slide)
-  .filter(slide => slide !== undefined && slide.noteHTML !== ''))
-</script>
-
-<template>
-  <div id="page-root">
-    <div class="m-4">
-      <div class="mb-10">
-        <h1 class="text-4xl font-bold mt-2">
-          {{ configs.title }}
-        </h1>
-        <div class="opacity-50">
-          {{ new Date().toLocaleString() }}
-        </div>
-      </div>
-
-      <div v-for="(slide, index) of slidesWithNote" :key="index" class="flex flex-col gap-4 break-inside-avoid-page">
-        <div>
-          <h2 class="text-lg">
-            <div class="font-bold flex gap-2">
-              <div class="opacity-50">
-                {{ slide?.no }}/{{ total }}
-              </div>
-              {{ slide?.title }}
-              <div class="flex-auto" />
-            </div>
-          </h2>
-          <NoteDisplay
-            :note-html="slide!.noteHTML"
-            class="max-w-full"
-          />
-        </div>
-        <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index d3958efcae..2ad1cc40e4 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -1,57 +1,46 @@
 <script setup lang="ts">
-import { onMounted, watchEffect } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
-import { windowSize } from '../state'
-import PrintContainer from '../internals/PrintContainer.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
-import { useNav } from '../composables/useNav'
+import { onMounted } from 'vue'
+import PrintTemplate from '#slidev/page-templates/print'
 
-const { isPrintMode } = useNav()
-
-watchEffect(() => {
-  if (isPrintMode)
-    (document.body.parentNode as HTMLElement).classList.add('print')
-  else
-    (document.body.parentNode as HTMLElement).classList.remove('print')
-})
+document.documentElement.classList.add('print')
 
 onMounted(() => {
-  recomputeAllPoppers()
+  setTimeout(recomputeAllPoppers, 300)
 })
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" class="grid grid-cols-[1fr_max-content]">
-    <PrintContainer
-      class="w-full h-full"
-      :style="{ background: 'var(--slidev-slide-container-background, black)' }"
-      :width="windowSize.width.value"
-    />
-    <div id="twoslash-container" />
+  <div id="page-root">
+    <PrintTemplate>
+      <template #floating="attrs">
+        <div id="twoslash-container" v-bind="attrs" />
+      </template>
+    </PrintTemplate>
   </div>
 </template>
 
-<style lang="postcss">
-html.print,
-html.print body,
-html.print #app {
+<style>
+html,
+html body,
+html #app {
   height: auto;
   overflow: auto;
 }
-html.print #page-root {
+html #page-root {
   height: auto;
   overflow: hidden;
 }
-html.print * {
+html * {
+  print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
 }
-html.print {
+html {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-html.print body {
+html body {
   margin: 0 auto;
   border: 0;
   padding: 0;
diff --git a/packages/client/routes.ts b/packages/client/routes.ts
index e178c4fa4d..4b5c3eaacf 100644
--- a/packages/client/routes.ts
+++ b/packages/client/routes.ts
@@ -27,10 +27,6 @@ if (__SLIDEV_FEATURE_PRESENTER__) {
     return { path: '' }
   }
 
-  routes.push({
-    path: '/presenter/print',
-    component: () => import('./pages/presenter/print.vue'),
-  })
   if (__SLIDEV_HAS_SERVER__) {
     routes.push({
       name: 'entry',
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/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index 61966b85c1..8a804080f4 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -8,7 +8,7 @@ import fs from 'fs-extra'
 import openBrowser from 'open'
 import type { Argv } from 'yargs'
 import yargs from 'yargs'
-import { blue, bold, cyan, dim, gray, green, underline, yellow } from 'kolorist'
+import { blue, bold, cyan, dim, gray, green, red, underline, yellow } from 'kolorist'
 import type { LogLevel, ViteDevServer } from 'vite'
 import type { ResolvedSlidevOptions, SlidevConfig, SlidevData, SlidevPreparserExtension } from '@slidev/types'
 import isInstalledGlobally from 'is-installed-globally'
@@ -451,17 +451,17 @@ cli.command(
 
 cli.command(
   'export [entry..]',
-  'Export slides to PDF',
+  'Export slides to PDF, PNG or Markdown',
   args => exportOptions(commonOptions(args))
     .strict()
     .help(),
   async (args) => {
-    const { entry, theme } = args
+    const { entry, theme, template } = args
     const { exportSlides, getExportOptions } = await import('./commands/export')
     const port = await getPort(12445)
 
     for (const entryFile of entry as unknown as string) {
-      const options = await resolveOptions({ entry: entryFile, theme }, 'export')
+      const options = await resolveOptions({ entry: entryFile, theme }, 'export', template)
       const server = await createServer(
         options,
         {
@@ -486,62 +486,10 @@ cli.command(
 cli.command(
   'export-notes [entry..]',
   'Export slide notes to PDF',
-  args => args
-    .positional('entry', {
-      default: 'slides.md',
-      type: 'string',
-      describe: 'path to the slides markdown entry',
-    })
-    .option('output', {
-      type: 'string',
-      describe: 'path to the output',
-    })
-    .option('timeout', {
-      default: 30000,
-      type: 'number',
-      describe: 'timeout for rendering the print page',
-    })
-    .option('wait', {
-      default: 0,
-      type: 'number',
-      describe: 'wait for the specified ms before exporting',
-    })
-    .strict()
-    .help(),
-  async ({
-    entry,
-    output,
-    timeout,
-    wait,
-  }) => {
-    const { exportNotes } = await import('./commands/export')
-    const port = await getPort(12445)
-
-    for (const entryFile of entry as unknown as string[]) {
-      const options = await resolveOptions({ entry: entryFile }, 'export')
-      const server = await createServer(
-        options,
-        {
-          server: { port },
-          clearScreen: false,
-        },
-      )
-      await server.listen(port)
-
-      printInfo(options)
-
-      const result = await exportNotes({
-        port,
-        output: output || (options.data.config.exportFilename ? `${options.data.config.exportFilename}-notes` : `${path.basename(entryFile, '.md')}-export-notes`),
-        timeout,
-        wait,
-      })
-      console.log(`${green('  ✓ ')}${dim('exported to ')}./${result}\n`)
-
-      server.close()
-    }
-
-    process.exit(0)
+  args => args,
+  () => {
+    console.error(red('[Slidev] the `export-notes` command has been removed. Please run `slidev export -t notes` instead.'))
+    process.exit(1)
   },
 )
 
@@ -557,7 +505,6 @@ function commonOptions(args: Argv<object>) {
       describe: 'path to the slides markdown entry',
     })
     .option('theme', {
-      alias: 't',
       type: 'string',
       describe: 'override theme',
     })
@@ -574,6 +521,12 @@ function exportOptions<T>(args: Argv<T>) {
       choices: ['pdf', 'png', 'md'],
       describe: 'output format',
     })
+    .option('template', {
+      type: 'string',
+      alias: 't',
+      default: 'default',
+      describe: 'the export layout template',
+    })
     .option('timeout', {
       type: 'number',
       describe: 'timeout for rendering the print page',
diff --git a/packages/slidev/node/commands/build.ts b/packages/slidev/node/commands/build.ts
index 4e702acda3..3fffa8018a 100644
--- a/packages/slidev/node/commands/build.ts
+++ b/packages/slidev/node/commands/build.ts
@@ -89,7 +89,7 @@ export async function build(
     await exportSlides({
       port,
       base: config.base,
-      ...getExportOptions(args, options, outDir, 'slidev-exported.pdf'),
+      ...getExportOptions(args, options, outDir),
     })
     server.close()
   }
diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts
index d89ef3e6b1..c5b2310dba 100644
--- a/packages/slidev/node/commands/export.ts
+++ b/packages/slidev/node/commands/export.ts
@@ -20,6 +20,7 @@ export interface ExportOptions {
   port?: number
   base?: string
   format?: 'pdf' | 'png' | 'md'
+  template?: string
   output?: string
   timeout?: number
   wait?: number
@@ -65,14 +66,6 @@ function makeOutline(tree: TocItem[]): string {
   }).filter(outline => !!outline).join('\n')
 }
 
-export interface ExportNotesOptions {
-  port?: number
-  base?: string
-  output?: string
-  timeout?: number
-  wait?: number
-}
-
 function createSlidevProgress(indeterminate = false) {
   function getSpinner(n = 0) {
     return [cyan('●'), green('◆'), blue('■'), yellow('▲')][n % 4]
@@ -109,50 +102,6 @@ function createSlidevProgress(indeterminate = false) {
   }
 }
 
-export async function exportNotes({
-  port = 18724,
-  base = '/',
-  output = 'notes',
-  timeout = 30000,
-  wait = 0,
-}: ExportNotesOptions): Promise<string> {
-  const { chromium } = await importPlaywright()
-  const browser = await chromium.launch()
-  const context = await browser.newContext()
-  const page = await context.newPage()
-
-  const progress = createSlidevProgress(true)
-
-  progress.start(1)
-
-  if (!output.endsWith('.pdf'))
-    output = `${output}.pdf`
-
-  await page.goto(`http://localhost:${port}${base}presenter/print`, { waitUntil: 'networkidle', timeout })
-  await page.waitForLoadState('networkidle')
-  await page.emulateMedia({ media: 'screen' })
-
-  if (wait)
-    await page.waitForTimeout(wait)
-
-  await page.pdf({
-    path: output,
-    margin: {
-      left: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-    },
-    printBackground: true,
-    preferCSSPageSize: true,
-  })
-
-  progress.stop()
-  browser.close()
-
-  return output
-}
-
 export async function exportSlides({
   port = 18724,
   total = 0,
@@ -191,20 +140,15 @@ export async function exportSlides({
   const progress = createSlidevProgress(!perSlide)
 
   async function go(no: number | string, clicks?: string) {
-    const query = new URLSearchParams()
-    if (withClicks)
-      query.set('print', 'clicks')
-    else
-      query.set('print', 'true')
+    let query = 'print'
     if (range)
-      query.set('range', range)
+      query += `&range=${range}`
     if (clicks)
-      query.set('clicks', clicks)
+      query += `&clicks=${clicks}`
+    else if (withClicks)
+      query += `&clicks`
 
-    const path = `${no}?${query.toString()}`
-    const url = routerMode === 'hash'
-      ? `http://localhost:${port}${base}#${path}`
-      : `http://localhost:${port}${base}${path}`
+    const url = `http://localhost:${port}${base}${routerMode === 'hash' ? '#' : ''}${no}?${query}`
     await page.goto(url, {
       waitUntil: 'networkidle',
       timeout,
@@ -213,7 +157,7 @@ export async function exportSlides({
     await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
     const slide = no === 'print'
       ? page.locator('body')
-      : page.locator(`[data-slidev-no="${no}"]`)
+      : page.locator(`#slideshow [data-slidev-no="${no}"]`)
     await slide.waitFor()
 
     // Wait for slides to be loaded
@@ -497,7 +441,7 @@ export async function exportSlides({
   return output
 }
 
-export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOptions, outDir?: string, outFilename?: string): Omit<ExportOptions, 'port' | 'base'> {
+export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOptions, outDir?: string): Omit<ExportOptions, 'port' | 'base'> {
   const config = {
     ...options.data.config.export,
     ...args,
@@ -512,6 +456,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     entry,
     output,
     format,
+    template = 'default',
     timeout,
     wait,
     range,
@@ -522,7 +467,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     perSlide,
     scale,
   } = config
-  outFilename = output || options.data.config.exportFilename || outFilename || `${path.basename(entry, '.md')}-export`
+  let outFilename = output || options.data.config.exportFilename || `${path.basename(entry, '.md')}-export${template === 'default' ? '' : `-${template}`}`
   if (outDir)
     outFilename = path.join(outDir, outFilename)
   return {
@@ -531,6 +476,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     total: options.data.slides.length,
     range,
     format: (format || 'pdf') as 'pdf' | 'png' | 'md',
+    template,
     timeout: timeout ?? 30000,
     wait: wait ?? 0,
     dark: dark || options.data.config.colorSchema === 'dark',
@@ -540,7 +486,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     withClicks: withClicks || false,
     executablePath,
     withToc: withToc || false,
-    perSlide: perSlide || false,
+    perSlide: template === 'per-slide' || perSlide || false,
     scale: scale || 1,
   }
 }
diff --git a/packages/slidev/node/options.ts b/packages/slidev/node/options.ts
index d2d5c3ebd6..e9a7c8d436 100644
--- a/packages/slidev/node/options.ts
+++ b/packages/slidev/node/options.ts
@@ -11,6 +11,7 @@ const debug = Debug('slidev:options')
 export async function resolveOptions(
   options: SlidevEntryOptions,
   mode: ResolvedSlidevOptions['mode'],
+  exportTemplate: string = 'default',
 ): Promise<ResolvedSlidevOptions> {
   const entry = await resolveEntry(options.entry)
   const rootsInfo = await getRoots(entry)
@@ -49,6 +50,7 @@ export async function resolveOptions(
       themeMeta,
     },
     mode,
+    exportTemplate,
     entry,
     themeRaw,
     theme,
diff --git a/packages/slidev/node/virtual/types.ts b/packages/slidev/node/virtual/types.ts
index f4e8091f1a..e020f37af4 100644
--- a/packages/slidev/node/virtual/types.ts
+++ b/packages/slidev/node/virtual/types.ts
@@ -11,4 +11,5 @@ export interface VirtualModuleTempalteContext {
   md: MarkdownIt
   getLayouts: () => Promise<Record<string, string>>
   getPageTemplates: () => Promise<Record<string, string>>
+  getPrintTemplates: () => Promise<Record<string, string>>
 }
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
index 834c81efa7..11a246c007 100644
--- a/packages/slidev/node/vite/loaders.ts
+++ b/packages/slidev/node/vite/loaders.ts
@@ -105,8 +105,9 @@ export function createSlidesLoader(
 
   const templateCtx: VirtualModuleTempalteContext = {
     md,
-    getLayouts: createGlobResolver('layouts/**/*.{vue,ts}', options),
-    getPageTemplates: createGlobResolver('page-templates/**/*.{vue,ts}', options),
+    getLayouts: createGlobResolver('layouts/*.{vue,ts}', options),
+    getPageTemplates: createGlobResolver('page-templates/*.{vue,ts}', options),
+    getPrintTemplates: createGlobResolver('page-templates/print/*.{vue,ts}', options),
   }
 
   return [
@@ -377,7 +378,9 @@ export function createSlidesLoader(
         const VIRTUAL_PAGE_TEMPLATES_PREFIX = '/@slidev/page-templates/'
         if (id.startsWith(VIRTUAL_PAGE_TEMPLATES_PREFIX)) {
           const templateName = id.slice(VIRTUAL_PAGE_TEMPLATES_PREFIX.length)
-          const template = (await templateCtx.getPageTemplates())[templateName]
+          const template = templateName === 'print'
+            ? (await templateCtx.getPrintTemplates())[options.exportTemplate]
+            : (await templateCtx.getPageTemplates())[templateName]
           return {
             code: `import PageTemplate from "${toAtFS(template)}"\nexport default PageTemplate`,
             map: { mappings: '' },
diff --git a/packages/types/src/cli.ts b/packages/types/src/cli.ts
index c2de0ec31f..9462d753ed 100644
--- a/packages/types/src/cli.ts
+++ b/packages/types/src/cli.ts
@@ -6,6 +6,7 @@ export interface CommonArgs {
 export interface ExportArgs extends CommonArgs {
   'output'?: string
   'format'?: string
+  'template'?: string
   'timeout'?: number
   'wait'?: number
   'range'?: string
diff --git a/packages/types/src/options.ts b/packages/types/src/options.ts
index 93d76d6660..521bc9595f 100644
--- a/packages/types/src/options.ts
+++ b/packages/types/src/options.ts
@@ -42,6 +42,7 @@ export interface ResolvedSlidevOptions extends RootsInfo {
    */
   roots: string[]
   mode: 'dev' | 'build' | 'export'
+  exportTemplate: string
   remote?: string
   inspect?: boolean
 }
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
index d258ca6559..e070ceec4f 100644
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -101,7 +101,7 @@ export type RenderContext = 'none' | 'slide' | 'overview' | 'presenter' | 'previ
 
 export interface SlideRoute {
   no: number
-  meta: RouteMeta
+  meta: RouteMeta & Required<Pick<RouteMeta, 'slide'>>
   component: () => Promise<RouteComponent>
 }
 

From 0c235e95bc77b40f5dddffc6e99f21c222a2d76d Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sun, 14 Apr 2024 12:30:02 +0800
Subject: [PATCH 05/20] feat: implement entry template

---
 packages/client/page-templates/entry.vue | 26 ++++++++++++++++++
 packages/client/pages/entry.vue          | 35 ++++--------------------
 2 files changed, 31 insertions(+), 30 deletions(-)
 create mode 100644 packages/client/page-templates/entry.vue

diff --git a/packages/client/page-templates/entry.vue b/packages/client/page-templates/entry.vue
new file mode 100644
index 0000000000..4a5ec32421
--- /dev/null
+++ b/packages/client/page-templates/entry.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
+    <RouterLink to="/" class="link">
+      <carbon:presentation-file /> Slides
+    </RouterLink>
+    <RouterLink to="/presenter" class="link">
+      <carbon:user-speaker /> Presenter
+    </RouterLink>
+    <RouterLink to="/notes" class="link">
+      <carbon:catalog /> Notes
+    </RouterLink>
+    <RouterLink to="/overview" class="link">
+      <carbon:list-boxes /> Overview
+    </RouterLink>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.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;
+}
+
+.link > :first-child {
+  @apply text-3em op50;
+}
+</style>
diff --git a/packages/client/pages/entry.vue b/packages/client/pages/entry.vue
index 921380245e..f4408d5a64 100644
--- a/packages/client/pages/entry.vue
+++ b/packages/client/pages/entry.vue
@@ -1,32 +1,7 @@
+<script setup lang="ts">
+import EntryTemplate from '#slidev/page-templates/entry'
+</script>
+
 <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>
-    <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>
-    <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>
-    <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>
-  </div>
+  <EntryTemplate />
 </template>

From 8cf763cca03deb47807855f8a0ed4a61ab807ca3 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sun, 14 Apr 2024 13:24:53 +0800
Subject: [PATCH 06/20] fix: print styles

---
 packages/client/internals/PrintStyle.vue         | 9 ++++++---
 packages/client/page-templates/print/default.vue | 3 +--
 packages/client/pages/play.vue                   | 1 +
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/client/internals/PrintStyle.vue b/packages/client/internals/PrintStyle.vue
index f9f659106c..a7c7c37234 100644
--- a/packages/client/internals/PrintStyle.vue
+++ b/packages/client/internals/PrintStyle.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import { slideHeight, slideWidth } from '../env'
+
 defineProps<{
-  pageWidth: number
-  pageHeight: number
+  pageWidth?: number
+  pageHeight?: number
 }>()
 </script>
 
 <style>
 @page {
-  size: v-bind('`${pageWidth}px`') v-bind('`${pageHeight}px`');
+  size: v-bind('`${pageWidth ?? slideWidth}px`')
+    v-bind('`${pageHeight ?? slideHeight}px`');
   margin: 0;
 }
 </style>
diff --git a/packages/client/page-templates/print/default.vue b/packages/client/page-templates/print/default.vue
index 910c413926..87f432915c 100644
--- a/packages/client/page-templates/print/default.vue
+++ b/packages/client/page-templates/print/default.vue
@@ -2,7 +2,6 @@
 import { provideLocal } from '@vueuse/core'
 import { computed } from 'vue'
 import { injectionSlideScale } from '../../constants'
-import { slideHeight, slideWidth } from '../../env'
 import { useNav } from '../../composables/useNav'
 import PrintStyle from '../../internals/PrintStyle.vue'
 import PrintSlide from '../../internals/PrintSlide.vue'
@@ -13,7 +12,7 @@ const { slidesToPrint } = useNav()
 </script>
 
 <template>
-  <PrintStyle :page-width="slideWidth" :page-height="slideHeight" />
+  <PrintStyle />
   <div>
     <PrintSlide v-for="route of slidesToPrint" :key="route.no" :route="route" />
     <slot name="floating" />
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index eec59b532e..4038a1decf 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -42,6 +42,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
+  <PrintStyle />
   <PlayTemplate id="page-root">
     <template #slides="attrs">
       <SlideContainer

From 6d326db42800510d3b3686cd19ec2695b9f3ee9a Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sun, 14 Apr 2024 13:41:35 +0800
Subject: [PATCH 07/20] fix: warnings

---
 packages/client/composables/usePrintStyle.ts     | 11 +++++++++++
 packages/client/internals/PrintStyle.vue         | 16 ----------------
 packages/client/page-templates/print/default.vue |  5 +++--
 packages/client/pages/play.vue                   |  4 ++--
 4 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 packages/client/composables/usePrintStyle.ts
 delete mode 100644 packages/client/internals/PrintStyle.vue

diff --git a/packages/client/composables/usePrintStyle.ts b/packages/client/composables/usePrintStyle.ts
new file mode 100644
index 0000000000..0b28178abf
--- /dev/null
+++ b/packages/client/composables/usePrintStyle.ts
@@ -0,0 +1,11 @@
+import { useStyleTag } from '@vueuse/core'
+import { slideHeight, slideWidth } from '../env'
+
+export function usePrintStyle() {
+  return useStyleTag(`
+    @page {
+      size: ${slideWidth}px ${slideHeight}px;
+      margin: 0;
+    }
+  `)
+}
diff --git a/packages/client/internals/PrintStyle.vue b/packages/client/internals/PrintStyle.vue
deleted file mode 100644
index a7c7c37234..0000000000
--- a/packages/client/internals/PrintStyle.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { slideHeight, slideWidth } from '../env'
-
-defineProps<{
-  pageWidth?: number
-  pageHeight?: number
-}>()
-</script>
-
-<style>
-@page {
-  size: v-bind('`${pageWidth ?? slideWidth}px`')
-    v-bind('`${pageHeight ?? slideHeight}px`');
-  margin: 0;
-}
-</style>
diff --git a/packages/client/page-templates/print/default.vue b/packages/client/page-templates/print/default.vue
index 87f432915c..a729ad85a7 100644
--- a/packages/client/page-templates/print/default.vue
+++ b/packages/client/page-templates/print/default.vue
@@ -3,16 +3,17 @@ import { provideLocal } from '@vueuse/core'
 import { computed } from 'vue'
 import { injectionSlideScale } from '../../constants'
 import { useNav } from '../../composables/useNav'
-import PrintStyle from '../../internals/PrintStyle.vue'
+import { usePrintStyle } from '../../composables/usePrintStyle'
 import PrintSlide from '../../internals/PrintSlide.vue'
 
 provideLocal(injectionSlideScale, computed(() => 1))
 
+usePrintStyle()
+
 const { slidesToPrint } = useNav()
 </script>
 
 <template>
-  <PrintStyle />
   <div>
     <PrintSlide v-for="route of slidesToPrint" :key="route.no" :route="route" />
     <slot name="floating" />
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index 4038a1decf..c0ce1608a2 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -2,12 +2,12 @@
 import { computed, ref, shallowRef } from 'vue'
 import { isScreenVertical, showEditor } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
+import { usePrintStyle } from '../composables/usePrintStyle'
 import { registerShortcuts } from '../logic/shortcuts'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
@@ -20,6 +20,7 @@ const root = ref<HTMLDivElement>()
 
 useSwipeControls(root)
 registerShortcuts()
+usePrintStyle()
 
 function onClick(e: MouseEvent) {
   if (showEditor.value)
@@ -42,7 +43,6 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
-  <PrintStyle />
   <PlayTemplate id="page-root">
     <template #slides="attrs">
       <SlideContainer

From 05e7b7a1fc0083fb04af85c0d7fa8c0a6609618e Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sun, 14 Apr 2024 13:42:09 +0800
Subject: [PATCH 08/20] fix: e2e test

---
 cypress/e2e/examples/basic.spec.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/examples/basic.spec.ts b/cypress/e2e/examples/basic.spec.ts
index c87d6c211d..6e71d24ec5 100644
--- a/cypress/e2e/examples/basic.spec.ts
+++ b/cypress/e2e/examples/basic.spec.ts
@@ -39,8 +39,6 @@ context('Basic', () => {
     cy.contains('Global Footer')
       .should('exist')
 
-    cy.get('#page-root > #slide-container > #slide-content')
-
     cy.rightArrow()
       .url()
       .should('eq', `${BASE}/2`)
@@ -48,15 +46,15 @@ context('Basic', () => {
     cy.contains('Global Footer')
       .should('not.exist')
 
-    cy.get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-2 > div > p')
+    cy.get('#slideshow .slidev-page-2 > div > p')
       .should('have.css', 'border-color', 'rgb(0, 128, 0)')
       .should('not.have.css', 'color', 'rgb(128, 0, 0)')
 
     goPage(5)
 
-    cy.get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-5 .slidev-code')
+    cy.get('#slideshow .slidev-page-5 .slidev-code')
       .should('have.text', '<div>{{$slidev.nav.currentPage}}</div>')
-      .get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-5 > div > p')
+      .get('#slideshow .slidev-page-5 > div > p')
       .should('have.text', 'Current Page: 5')
   })
 

From 98f3bc9631f07ec917d9de4f9f36cd4cb78a2758 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sun, 14 Apr 2024 14:46:17 +0800
Subject: [PATCH 09/20] feat: implement slide top & bottom layer

---
 packages/client/internals/SlideWrapper.vue | 23 +++++++++++-----------
 packages/slidev/node/vite/loaders.ts       |  4 +++-
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index 0759fa83d8..7f48a45d9d 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -1,12 +1,14 @@
 <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 { getSlideClass } from '../utils'
 import { configs } from '../env'
 import SlideLoading from './SlideLoading.vue'
+import SlideBottomTemplate from '#slidev/page-templates/slide-bottom'
+import SlideTopTemplate from '#slidev/page-templates/slide-top'
 
 const props = defineProps({
   clicksContext: {
@@ -50,7 +52,7 @@ const zoomStyle = computed(() => {
         transform: `scale(${zoom.value})`,
       }
 })
-const style = computed(() => ({
+const style = computed<CSSProperties>(() => ({
   ...zoomStyle.value,
   'user-select': configs.selectable ? undefined : 'none',
 }))
@@ -73,13 +75,13 @@ const SlideComponent = defineAsyncComponent({
 </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')"
+  >
+    <SlideBottomTemplate :style="style" />
+    <SlideComponent :style="style" />
+    <SlideTopTemplate :style="style" />
   </div>
 </template>
 
@@ -90,7 +92,6 @@ const SlideComponent = defineAsyncComponent({
 
 .slidev-page {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 }
 </style>
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
index 4144fa67d6..802230fce7 100644
--- a/packages/slidev/node/vite/loaders.ts
+++ b/packages/slidev/node/vite/loaders.ts
@@ -382,7 +382,9 @@ export function createSlidesLoader(
             ? (await templateCtx.getPrintTemplates())[options.exportTemplate]
             : (await templateCtx.getPageTemplates())[templateName]
           return {
-            code: `import PageTemplate from "${toAtFS(template)}"\nexport default PageTemplate`,
+            code: template
+              ? `import PageTemplate from "${toAtFS(template)}"\nexport default PageTemplate`
+              : `export default { render: () => [] }`,
             map: { mappings: '' },
           }
         }

From 06d2e7294c8051f3cbfb908381c852349b2828c4 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 16 Apr 2024 14:42:13 +0800
Subject: [PATCH 10/20] fix: restore id

---
 packages/client/internals/SlideContainer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index cf2c1f3a2f..5d15609d16 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/internals/SlideContainer.vue
@@ -39,8 +39,8 @@ watchEffect(() => emit('update:slide-element', slideElement.value))
 </script>
 
 <template>
-  <div ref="container" class="slidev-slide-container" :style="containerStyle">
-    <div ref="slideElement" class="slidev-slide-content" :style="contentStyle">
+  <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" />

From 4ed3e8bca21b101bfed5a2e17295f90b17b403ca Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Tue, 16 Apr 2024 16:11:08 +0800
Subject: [PATCH 11/20] fix

---
 packages/slidev/node/resolver.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/slidev/node/resolver.ts b/packages/slidev/node/resolver.ts
index d8b66c272f..cbf768c2c7 100644
--- a/packages/slidev/node/resolver.ts
+++ b/packages/slidev/node/resolver.ts
@@ -259,7 +259,7 @@ export function createGlobResolver(source: string, { roots, clientRoot }: Resolv
     })))
 
     for (const filePath of allFiles.flat()) {
-      const name = basename(filePath).replace(/\.\w+$/, '')
+      const name = basename(filePath).replace(/\.\w+$/, '').toLowerCase()
       if (fileMap[name])
         continue
       fileMap[name] = filePath

From 51129462bab1d96f602bfe54dfde63c98398e221 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 17 Apr 2024 20:02:54 +0800
Subject: [PATCH 12/20] chore: update

---
 demo/starter/package.json                     |   2 +-
 demo/vue-runner/package.json                  |   2 +-
 docs/.vitepress/config.ts                     |  16 +-
 docs/custom/directory-structure.md            |   6 +-
 docs/custom/global-layers.md                  |  16 +-
 docs/custom/print-templates.md                |   7 +
 docs/guide/exporting.md                       |  31 +--
 docs/guide/install.md                         |   4 +-
 packages/client/internals/SlideContainer.vue  |   7 +-
 packages/client/internals/SlideWrapper.vue    |  14 +-
 packages/client/page-templates/entry.vue      |  26 ---
 packages/client/page-templates/notes.vue      |  15 --
 packages/client/page-templates/play.vue       |  11 -
 packages/client/page-templates/presenter.vue  |  88 -------
 packages/client/pages/entry.vue               |  29 ++-
 packages/client/pages/notes.vue               |  64 +++---
 packages/client/pages/play.vue                |  79 +++----
 packages/client/pages/presenter.vue           | 217 +++++++++++++-----
 packages/client/pages/print.vue               |   2 +-
 .../print/default.vue                         |   0
 .../{page-templates => pages}/print/notes.vue |   0
 packages/slidev/node/cli.ts                   |  64 +++---
 packages/slidev/node/options.ts               |   4 +-
 packages/slidev/node/resolver.ts              |  14 +-
 packages/slidev/node/virtual/index.ts         |   4 +
 packages/slidev/node/virtual/layouts.ts       |  19 +-
 .../slidev/node/virtual/print-template.ts     |  10 +
 packages/slidev/node/virtual/slide-layers.ts  |  19 ++
 packages/slidev/node/virtual/types.ts         |   3 +-
 packages/slidev/node/vite/loaders.ts          |  20 +-
 packages/types/client.d.ts                    |   9 +-
 packages/types/src/options.ts                 |   2 +-
 32 files changed, 412 insertions(+), 392 deletions(-)
 create mode 100644 docs/custom/print-templates.md
 delete mode 100644 packages/client/page-templates/entry.vue
 delete mode 100644 packages/client/page-templates/notes.vue
 delete mode 100644 packages/client/page-templates/play.vue
 delete mode 100644 packages/client/page-templates/presenter.vue
 rename packages/client/{page-templates => pages}/print/default.vue (100%)
 rename packages/client/{page-templates => pages}/print/notes.vue (100%)
 create mode 100644 packages/slidev/node/virtual/print-template.ts
 create mode 100644 packages/slidev/node/virtual/slide-layers.ts

diff --git a/demo/starter/package.json b/demo/starter/package.json
index 4514f8ac62..8809ded54d 100644
--- a/demo/starter/package.json
+++ b/demo/starter/package.json
@@ -5,7 +5,7 @@
     "build": "slidev build",
     "dev": "nodemon -w '../../packages/slidev/dist/*.mjs' --exec \"slidev ./slides.md --open=false --log=info --inspect\"",
     "export": "slidev export",
-    "export-notes": "slidev export-notes"
+    "export-notes": "slidev export -t notes"
   },
   "devDependencies": {
     "@slidev/cli": "workspace:*",
diff --git a/demo/vue-runner/package.json b/demo/vue-runner/package.json
index 1c8db7655e..24c1780565 100644
--- a/demo/vue-runner/package.json
+++ b/demo/vue-runner/package.json
@@ -4,7 +4,7 @@
     "build": "slidev build",
     "dev": "nodemon -w '../../packages/slidev/dist/*.mjs' --exec \"slidev ./slides.md --open=false --log=info --inspect\"",
     "export": "slidev export",
-    "export-notes": "slidev export-notes"
+    "export-notes": "slidev export -t notes"
   },
   "devDependencies": {
     "@slidev/cli": "workspace:*",
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 888f6e7983..0fdb35e6b5 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -113,8 +113,12 @@ const Customizations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildr
     link: '/custom/directory-structure',
   },
   {
-    text: 'Fonts',
-    link: '/custom/fonts',
+    text: 'Vue Global Context',
+    link: '/custom/vue-context',
+  },
+  {
+    text: 'Global Layers',
+    link: '/custom/global-layers',
   },
   {
     text: 'Highlighters',
@@ -165,12 +169,12 @@ const Customizations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildr
     link: '/custom/config-context-menu',
   },
   {
-    text: 'Vue Global Context',
-    link: '/custom/vue-context',
+    text: 'Custom Print Templates',
+    link: '/custom/print-templates',
   },
   {
-    text: 'Global Layers',
-    link: '/custom/global-layers',
+    text: 'Fonts',
+    link: '/custom/fonts',
   },
 ]
 
diff --git a/docs/custom/directory-structure.md b/docs/custom/directory-structure.md
index d8d6a1db7b..d14aef7151 100644
--- a/docs/custom/directory-structure.md
+++ b/docs/custom/directory-structure.md
@@ -10,10 +10,12 @@ your-slidev/
   ├── layouts/          # custom layouts
   ├── public/           # static assets
   ├── setup/            # custom setup / hooks
-  ├── styles/           # custom style
+  ├── styles/           # custom styles
+  ├── snippets/         # code snippets
+  ├── pages/print/      # custom print templates
   ├── index.html        # injections to index.html
   ├── slides.md         # the main slides entry
-  └── vite.config.ts    # extending vite config
+  └── vite.config.ts    # extending the vite config
 ```
 
 All of them are optional.
diff --git a/docs/custom/global-layers.md b/docs/custom/global-layers.md
index 5be7e7475c..80e439efa5 100644
--- a/docs/custom/global-layers.md
+++ b/docs/custom/global-layers.md
@@ -6,10 +6,14 @@ Global layers allow you to have custom components that **persist** across slides
 
 Slidev provides three layers for this usage, create `global-top.vue`, `global-bottom.vue` or `custom-nav-controls.vue` under your project root and it will pick up automatically.
 
+There are also layers for **each** slide: `layouts/slide-top.vue` and `layouts/slide-bottom.vue`. The usage is similar to the global layers, but they are applied to every slide, so there may be more than one instance of them.
+
 Layers relationship:
 
 - Global Top (`global-top.vue`)
+- Slide Top (`layouts/slide-top.vue`)
 - Slides
+- Slide Bottom (`layouts/slide-bottom.vue`)
 - Global Bottom (`global-bottom.vue`)
 - NavControls
   - Customized Navigation Controls (`custom-nav-controls.vue`)
@@ -28,7 +32,7 @@ The text `Your Name` will appear on all your slides.
 ```html
 <!-- custom-nav-controls -->
 <template>
-  <button class="icon-btn" title="Next" @click="$slidev.nav.next">
+  <button class="icon-btn" title="Next" @click="$nav.next">
     <carbon:arrow-right />
   </button>
 </template>
@@ -42,7 +46,7 @@ To enable it conditionally, you can apply it with the [Vue Global Context](/cust
 <!-- hide the footer from Page 4 -->
 <template>
   <footer
-    v-if="$slidev.nav.currentPage !== 4"
+    v-if="$nav.currentPage !== 4"
     class="absolute bottom-0 left-0 right-0 p-2"
   >
     Your Name
@@ -54,7 +58,7 @@ To enable it conditionally, you can apply it with the [Vue Global Context](/cust
 <!-- hide the footer from "cover" layout -->
 <template>
   <footer
-    v-if="$slidev.nav.currentLayout !== 'cover'"
+    v-if="$nav.currentLayout !== 'cover'"
     class="absolute bottom-0 left-0 right-0 p-2"
   >
     Your Name
@@ -66,10 +70,10 @@ To enable it conditionally, you can apply it with the [Vue Global Context](/cust
 <!-- an example footer for pages -->
 <template>
   <footer
-    v-if="$slidev.nav.currentLayout !== 'cover'"
+    v-if="$nav.currentLayout !== 'cover'"
     class="absolute bottom-0 left-0 right-0 p-2"
   >
-    {{ $slidev.nav.currentPage }} / {{ $slidev.nav.total }}
+    {{ $nav.currentPage }} / {{ $nav.total }}
   </footer>
 </template>
 ```
@@ -78,7 +82,7 @@ To enable it conditionally, you can apply it with the [Vue Global Context](/cust
 <!-- custom-nav-controls -->
 <!-- hide the button in Presenter model -->
 <template>
-  <button v-if="!$slidev.nav.isPresenter" class="icon-btn" title="Next" @click="$slidev.nav.next">
+  <button v-if="!$nav.isPresenter" class="icon-btn" title="Next" @click="$nav.next">
     <carbon:arrow-right />
   </button>
 </template>
diff --git a/docs/custom/print-templates.md b/docs/custom/print-templates.md
new file mode 100644
index 0000000000..1e0b0acdb2
--- /dev/null
+++ b/docs/custom/print-templates.md
@@ -0,0 +1,7 @@
+# Custom Print Templates
+
+You can create custom print templates for your documents via custom print templates. To start, create a new file in the `./pages/print` directory, for example, `./pages/print/my-template.vue`.
+
+To print your slides using the custom template, use the `--template` option in the CLI, more details in the [exporting guide](/guide/exporting#print-template).
+
+To debug your print template, you can use the `--print-template` option in dev mode, and access `http://localhost:3030/print?print` to see the print preview.
diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md
index 50aed43c76..83f2c83cbb 100644
--- a/docs/guide/exporting.md
+++ b/docs/guide/exporting.md
@@ -53,6 +53,21 @@ By default, Slidev exports one page per slide with clicks animations disabled. I
 $ slidev export --with-clicks
 ```
 
+### Print Template
+
+By default, Slidev uses the `default` template to print your slides to PDF. You can also specify the print template with the `--template` (`-t`) option:
+
+```bash
+$ slidev export --template notes
+```
+
+Currently, Slidev provides the following templates:
+
+- `default`: Slides only template. Each
+- `notes`: Notes only.
+
+But it is also possible to create your own print template. See [Custom Print Templates](/guide/custom/print-templates) for details.
+
 ### Slide range
 
 You can also specify a range of slides to export with the `--range` option:
@@ -104,29 +119,17 @@ The example above would export slides 1,6,7,8 and 10.
 You can also export multiple slides at once:
 
 ```bash
-$ slidev export slides1.md slides1.md
+$ slidev export slides1.md slides2.md
 ```
 
 Or
 
 ```bash
-$ slidev export *.md
+$ slidev export *.md      # This based on your shell
 ```
 
 In this case, each input file will generate its own PDf file.
 
-## Presenter notes
-
-> Available since v0.36.8
-
-Export only the presenter notes (the last comment block for each slide) into a text document in PDF:
-
-```bash
-$ slidev export-notes
-```
-
-This command also accepts multiple entries like for the [export command](#multiple-entries)
-
 ## Single-Page Application (SPA)
 
 See [Static Hosting](/guide/hosting).
diff --git a/docs/guide/install.md b/docs/guide/install.md
index ada4c415c0..10850044d7 100644
--- a/docs/guide/install.md
+++ b/docs/guide/install.md
@@ -173,6 +173,7 @@ Options:
 - `--log` (`'error', 'warn', 'info', 'silent'`, default: `'warn'`): Log level.
 - `--force`, `-f` (`boolean`, default: `false`): force the optimizer to ignore the cache and re-bundle.
 - `--theme`, `-t` (`string`): override theme.
+- `--print-template` (`string`): specify [the print template](/guide/exporting#print-template).
 
 ### `slidev build [entry]`
 
@@ -202,7 +203,8 @@ Options:
 - `--range` (`string`): page ranges to export (example: `'1,4-5,6'`).
 - `--dark` (`boolean`, default: `false`): export as dark theme.
 - `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every click animation (see https://sli.dev/guide/animations.html#click-animations).
-- `--theme`, `-t` (`string`): override theme.
+- `--theme` (`string`): override theme.
+- `--template`, `-t` (`string`, default: `default`): specify [the print template](/guide/exporting#print-template).
 
 ### `slidev format [entry]`
 
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index 5d15609d16..d6203d4e23 100644
--- a/packages/client/internals/SlideContainer.vue
+++ b/packages/client/internals/SlideContainer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize } from '@vueuse/core'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import { useSlideScale } from '../composables/useSlideScale'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect } from '../env'
@@ -17,7 +17,6 @@ const props = defineProps({
     default: false,
   },
 })
-const emit = defineEmits(['update:slide-element'])
 
 const container = ref<HTMLDivElement | null>(null)
 const containerSize = useElementSize(container)
@@ -35,7 +34,6 @@ const containerStyle = computed(() => props.width
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
-watchEffect(() => emit('update:slide-element', slideElement.value))
 </script>
 
 <template>
@@ -47,10 +45,9 @@ watchEffect(() => emit('update:slide-element', slideElement.value))
   </div>
 </template>
 
-<style lang="postcss">
+<style scoped lang="postcss">
 .slidev-slide-container {
   @apply relative w-full h-full overflow-hidden;
-  background: var(--slidev-slide-container-background, black);
 }
 
 .slidev-slide-content {
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index 7f48a45d9d..e9a441360e 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -7,8 +7,7 @@ import { injectionActive, injectionClicksContext, injectionCurrentPage, injectio
 import { getSlideClass } from '../utils'
 import { configs } from '../env'
 import SlideLoading from './SlideLoading.vue'
-import SlideBottomTemplate from '#slidev/page-templates/slide-bottom'
-import SlideTopTemplate from '#slidev/page-templates/slide-top'
+import { SlideBottom, SlideTop } from '#slidev/slide-layers'
 
 const props = defineProps({
   clicksContext: {
@@ -78,10 +77,15 @@ const SlideComponent = defineAsyncComponent({
   <div
     :data-slidev-no="props.route.no"
     :class="getSlideClass(route, ['slide', 'presenter'].includes(props.renderContext) ? '' : 'disable-view-transition')"
+    :style="style"
   >
-    <SlideBottomTemplate :style="style" />
-    <SlideComponent :style="style" />
-    <SlideTopTemplate :style="style" />
+    <div v-if="SlideBottom" class="absolute inset-0">
+      <SlideBottom />
+    </div>
+    <SlideComponent />
+    <div v-if="SlideTop" class="absolute inset-0">
+      <SlideTop />
+    </div>
   </div>
 </template>
 
diff --git a/packages/client/page-templates/entry.vue b/packages/client/page-templates/entry.vue
deleted file mode 100644
index 4a5ec32421..0000000000
--- a/packages/client/page-templates/entry.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
-    <RouterLink to="/" class="link">
-      <carbon:presentation-file /> Slides
-    </RouterLink>
-    <RouterLink to="/presenter" class="link">
-      <carbon:user-speaker /> Presenter
-    </RouterLink>
-    <RouterLink to="/notes" class="link">
-      <carbon:catalog /> Notes
-    </RouterLink>
-    <RouterLink to="/overview" class="link">
-      <carbon:list-boxes /> Overview
-    </RouterLink>
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.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;
-}
-
-.link > :first-child {
-  @apply text-3em op50;
-}
-</style>
diff --git a/packages/client/page-templates/notes.vue b/packages/client/page-templates/notes.vue
deleted file mode 100644
index f6bfb0973d..0000000000
--- a/packages/client/page-templates/notes.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="flex flex-col h-full">
-    <slot name="progress-bar" />
-    <div class="flex flex-col flex-grow">
-      <slot name="content" class="p-5" />
-      <div class="flex-none border-t border-main">
-        <div class="flex gap-1 items-center px-6 py-3">
-          <slot name="controls" />
-          <div class="flex-auto" />
-          <slot name="slide-no" class="pa-2 text-center" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/packages/client/page-templates/play.vue b/packages/client/page-templates/play.vue
deleted file mode 100644
index a328fe7ddb..0000000000
--- a/packages/client/page-templates/play.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { isEditorVertical } from '../state'
-</script>
-
-<template>
-  <div class="grid" :class="isEditorVertical ? 'grid grid-rows-[1fr_max-content]' : 'grid grid-cols-[1fr_max-content]'" v-bind="$attrs">
-    <slot name="slides" />
-    <slot name="editor" />
-  </div>
-  <slot name="floating" />
-</template>
diff --git a/packages/client/page-templates/presenter.vue b/packages/client/page-templates/presenter.vue
deleted file mode 100644
index adb4f8ea8a..0000000000
--- a/packages/client/page-templates/presenter.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import { presenterLayout } from '../state'
-</script>
-
-<template>
-  <div class="slidev-presenter bg-main h-full">
-    <div class="grid-container children:bg-main" :class="`layout${presenterLayout}`">
-      <div class="relative grid-area-[main] flex flex-col">
-        <slot name="this-slide" class="h-full w-full p-2 lg:p-4 flex-auto" />
-        <slot name="clicks-slider" class="w-full pb2 px4 flex-none" />
-        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
-          Current
-        </div>
-      </div>
-      <div class="relative grid-area-[next] flex flex-col p-2 lg:p-4">
-        <slot name="next-slide" class="h-full w-full" />
-        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
-          Next
-        </div>
-      </div>
-      <slot name="notes" class="grid-area-[note]" />
-      <div class="grid-area-[bottom] flex">
-        <slot name="nav-controls" />
-        <div class="flex-auto" />
-        <slot name="timer" />
-      </div>
-    </div>
-    <div class="fixed left-0 right-0 top-0">
-      <slot name="progress-bar" />
-    </div>
-  </div>
-  <slot name="floating" />
-</template>
-
-<style scoped>
-.slidev-presenter {
-  --slidev-controls-foreground: current;
-}
-
-.grid-container {
-  --uno: bg-gray/20;
-  height: 100%;
-  width: 100%;
-  display: grid;
-  gap: 1px 1px;
-}
-
-.grid-container.layout1 {
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 2fr 1fr min-content;
-  grid-template-areas:
-    'main main'
-    'note next'
-    'bottom bottom';
-}
-
-.grid-container.layout2 {
-  grid-template-columns: 3fr 2fr;
-  grid-template-rows: 2fr 1fr min-content;
-  grid-template-areas:
-    'note main'
-    'note next'
-    'bottom bottom';
-}
-
-@media (max-aspect-ratio: 3/5) {
-  .grid-container.layout1 {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr 1fr min-content;
-    grid-template-areas:
-      'main'
-      'note'
-      'next'
-      'bottom';
-  }
-}
-
-@media (min-aspect-ratio: 1/1) {
-  .grid-container.layout1 {
-    grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: 1fr 2fr min-content;
-    grid-template-areas:
-      'main main next'
-      'main main note'
-      'bottom bottom bottom';
-  }
-}
-</style>
diff --git a/packages/client/pages/entry.vue b/packages/client/pages/entry.vue
index f4408d5a64..84b42984fc 100644
--- a/packages/client/pages/entry.vue
+++ b/packages/client/pages/entry.vue
@@ -1,7 +1,26 @@
-<script setup lang="ts">
-import EntryTemplate from '#slidev/page-templates/entry'
-</script>
-
 <template>
-  <EntryTemplate />
+  <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
+    <RouterLink to="/">
+      <carbon:presentation-file /> Slides
+    </RouterLink>
+    <RouterLink to="/presenter">
+      <carbon:user-speaker /> Presenter
+    </RouterLink>
+    <RouterLink to="/notes">
+      <carbon:catalog /> Notes
+    </RouterLink>
+    <RouterLink to="/overview">
+      <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 :first-child {
+  @apply text-3em op50;
+}
+</style>
diff --git a/packages/client/pages/notes.vue b/packages/client/pages/notes.vue
index 434348a132..c7844abc85 100644
--- a/packages/client/pages/notes.vue
+++ b/packages/client/pages/notes.vue
@@ -2,14 +2,15 @@
 import { useHead } from '@unhead/vue'
 import { computed, ref, watch } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { slideTitle } from '../env'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
-import { useNav } from '../composables/useNav'
+
 import NoteDisplay from '../internals/NoteDisplay.vue'
 import IconButton from '../internals/IconButton.vue'
-import NotesTemplate from '#slidev/page-templates/notes'
+import { useNav } from '../composables/useNav'
 
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Notes - ${slideTitle}`,
 })
@@ -37,32 +38,26 @@ function decreaseFontSize() {
 </script>
 
 <template>
-  <NotesTemplate>
-    <template #progress-bar="attrs">
-      <div
-        class="h-3px bg-primary transition-all duration-500"
-        :style="{ width: `${(pageNo - 1) / (total - 1) * 100 + 1}%` }"
-        v-bind="attrs"
+  <div
+    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
+      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"
+        :placeholder="`No notes for Slide ${pageNo}.`"
+        :clicks-context="currentRoute?.meta?.__clicksContext"
+        :auto-scroll="true"
       />
-    </template>
-    <template #content="attrs">
-      <div
-        ref="scroller"
-        class="flex-auto h-full overflow-auto"
-        :style="{ fontSize: `${fontSize}px` }"
-        v-bind="attrs"
-      >
-        <NoteDisplay
-          :note="currentRoute?.meta?.slide?.note"
-          :note-html="currentRoute?.meta?.slide?.noteHTML"
-          :placeholder="`No notes for Slide ${pageNo}.`"
-          :clicks-context="currentRoute?.meta?.__clicksContext"
-          :auto-scroll="true"
-        />
-      </div>
-    </template>
-    <template #controls="attrs">
-      <div v-bind="attrs">
+    </div>
+    <div class="flex-none border-t border-main">
+      <div class="flex gap-1 items-center px-6 py-3">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
@@ -73,12 +68,11 @@ function decreaseFontSize() {
         <IconButton title="Decrease font size" @click="decreaseFontSize">
           <carbon:zoom-out />
         </IconButton>
+        <div class="flex-auto" />
+        <div class="p2 text-center">
+          {{ pageNo }} / {{ total }}
+        </div>
       </div>
-    </template>
-    <template #slide-no="attrs">
-      <div v-bind="attrs">
-        {{ pageNo }} / {{ total }}
-      </div>
-    </template>
-  </NotesTemplate>
+    </div>
+  </div>
 </template>
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index c0ce1608a2..d4c38c6d15 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isScreenVertical, showEditor } from '../state'
+import { isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { usePrintStyle } from '../composables/usePrintStyle'
 import { registerShortcuts } from '../logic/shortcuts'
 import Controls from '../internals/Controls.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
@@ -11,17 +10,12 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
-import PlayTemplate from '#slidev/page-templates/play'
+import { usePrintStyle } from '../composables/usePrintStyle'
 
-const { next, prev } = useNav()
+const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
-
-useSwipeControls(root)
-registerShortcuts()
-usePrintStyle()
-
 function onClick(e: MouseEvent) {
   if (showEditor.value)
     return
@@ -35,6 +29,10 @@ function onClick(e: MouseEvent) {
   }
 }
 
+useSwipeControls(root)
+registerShortcuts()
+usePrintStyle()
+
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()
@@ -43,36 +41,35 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 </script>
 
 <template>
-  <PlayTemplate id="page-root">
-    <template #slides="attrs">
-      <SlideContainer
-        is-main
-        v-bind="attrs"
-        @pointerdown="onClick"
-        @contextmenu="onContextMenu"
-        @update:slide-element="el => (root = el)"
-      >
-        <template #default>
-          <SlidesShow render-context="slide" />
-        </template>
-        <template #controls>
-          <div
-            class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
-            :class="[
-              persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
-              isDrawing ? 'pointer-events-none' : '',
-            ]"
-          >
-            <NavControls class="m-auto" :persist="persistNav" />
-          </div>
-        </template>
-      </SlideContainer>
-    </template>
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" #editor>
-      <SideEditor :resize="true" />
-    </template>
-    <template #floating>
-      <Controls />
-    </template>
-  </PlayTemplate>
+  <div
+    id="page-root" ref="root" class="grid"
+    :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"
+      is-main
+      @pointerdown="onClick"
+      @contextmenu="onContextMenu"
+    >
+      <template #default>
+        <SlidesShow render-context="slide" />
+      </template>
+      <template #controls>
+        <div
+          v-if="!isPrintMode"
+          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
+          :class="[
+            persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
+            isDrawing ? 'pointer-events-none' : '',
+          ]"
+        >
+          <NavControls class="m-auto" :persist="persistNav" />
+        </div>
+      </template>
+    </SlideContainer>
+    <SideEditor v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && 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 4ad20118d7..bdf69d51b5 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { computed, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
+import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { slideTitle } from '../env'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { onContextMenu } from '../logic/contextMenu'
@@ -25,7 +25,6 @@ import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
-import PresenterTemplate from '#slidev/page-templates/presenter'
 
 const main = ref<HTMLDivElement>()
 
@@ -45,6 +44,7 @@ const {
 } = useNav()
 const { isDrawing } = useDrawings()
 
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
   title: `Presenter - ${slideTitle}`,
 })
@@ -81,49 +81,76 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 // sync presenter cursor
-const mouse = reactive(useMouse())
-const focus = useWindowFocus()
-watchEffect(() => {
-  const slidesContainer = main.value?.querySelector('slidev-slide-content')
+onMounted(() => {
+  const slidesContainer = main.value!.querySelector('#slide-content')!
+  const mouse = reactive(useMouse())
+  const focus = useWindowFocus()
 
-  if (!slidesContainer || !focus.value || isDrawing.value || !showPresenterCursor.value)
-    return undefined
+  watch(
+    () => {
+      if (!focus.value || isDrawing.value || !showPresenterCursor.value)
+        return undefined
 
-  const rect = slidesContainer.getBoundingClientRect()
-  const x = (mouse.x - rect.left) / rect.width * 100
-  const y = (mouse.y - rect.top) / rect.height * 100
+      const rect = slidesContainer.getBoundingClientRect()
+      const x = (mouse.x - rect.left) / rect.width * 100
+      const y = (mouse.y - rect.top) / rect.height * 100
 
-  if (x < 0 || x > 100 || y < 0 || y > 100)
-    return undefined
+      if (x < 0 || x > 100 || y < 0 || y > 100)
+        return undefined
 
-  sharedState.cursor = { x, y }
+      return { x, y }
+    },
+    (pos) => {
+      sharedState.cursor = pos
+    },
+  )
 })
 </script>
 
 <template>
-  <PresenterTemplate>
-    <template #this-slide="attrs">
-      <SlideContainer is-main v-bind="attrs" @update:slide-element="el => (main = el)">
-        <SlidesShow render-context="presenter" />
-      </SlideContainer>
-    </template>
-    <template v-if="nextFrame && nextFrameClicksCtx" #next-slide="attrs">
-      <SlideContainer v-bind="attrs" @contextmenu="onContextMenu">
-        <SlideWrapper
-          :is="nextFrame[0].component!"
-          :key="nextFrame[0].no"
-          :clicks-context="nextFrameClicksCtx"
-          :class="getSlideClass(nextFrame[0])"
-          :route="nextFrame[0]"
-          render-context="previewNext"
+  <div class="bg-main h-full slidev-presenter">
+    <div class="grid-container" :class="`layout${presenterLayout}`">
+      <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"
+          is-main
+          @contextmenu="onContextMenu"
+        >
+          <SlidesShow render-context="presenter" />
+        </SlideContainer>
+        <ClicksSlider
+          :key="currentSlideRoute?.no"
+          :clicks-context="getPrimaryClicks(currentSlideRoute)"
+          class="w-full pb2 px4 flex-none"
         />
-      </SlideContainer>
-    </template>
-    <template #notes="attrs">
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="of-auto" v-bind="attrs">
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Current
+        </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"
+        >
+          <SlideWrapper
+            :is="nextFrame[0].component!"
+            :key="nextFrame[0].no"
+            :clicks-context="nextFrameClicksCtx"
+            :class="getSlideClass(nextFrame[0])"
+            :route="nextFrame[0]"
+            render-context="previewNext"
+          />
+        </SlideContainer>
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Next
+        </div>
+      </div>
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
         <SideEditor />
       </div>
-      <div v-else class="grid grid-rows-[1fr_min-content] overflow-hidden" v-bind="attrs">
+      <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
         <NoteEditable
           v-if="__DEV__"
           :key="`edit-${currentSlideNo}`"
@@ -157,53 +184,117 @@ watchEffect(() => {
           </IconButton>
         </div>
       </div>
-    </template>
-    <template #clicks-slider="attrs">
-      <ClicksSlider
-        :key="currentSlideRoute?.no"
-        :clicks-context="getPrimaryClicks(currentSlideRoute)"
-        v-bind="attrs"
-      />
-    </template>
-    <template #nav-controls="attrs">
-      <NavControls :persist="true" v-bind="attrs" />
-    </template>
-    <template #timer="attrs">
-      <div class="flex items-center" v-bind="attrs">
+      <div class="grid-section bottom flex">
+        <NavControls :persist="true" />
+        <div flex-auto />
         <div
-          class="timer-btn relative w-22px h-22px cursor-pointer text-lg"
+          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
           opacity="50 hover:100"
           @click="resetTimer"
         >
           <carbon:time class="absolute" />
           <carbon:renew class="absolute opacity-0" />
         </div>
-        <div class="text-2xl pl-2 pr-6 tabular-nums">
+        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
           {{ timer }}
         </div>
       </div>
-    </template>
-    <template #progress-bar="attrs">
+      <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
+    </div>
+    <div class="progress-bar">
       <div
-        class="h-3px bg-primary transition-all duration-500"
+        class="progress h-3px bg-primary transition-all"
         :style="{ width: `${(currentSlideNo - 1) / (total - 1) * 100 + 1}%` }"
-        v-bind="attrs"
       />
-    </template>
-    <template #floating>
-      <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
-      <Goto />
-      <ContextMenu />
-      <QuickOverview v-model="showOverview" />
-    </template>
-  </PresenterTemplate>
+    </div>
+  </div>
+  <Goto />
+  <QuickOverview v-model="showOverview" />
+  <ContextMenu />
 </template>
 
 <style scoped>
+.slidev-presenter {
+  --slidev-controls-foreground: current;
+}
+
 .timer-btn:hover > :first-child {
   opacity: 0;
 }
 .timer-btn:hover > :last-child {
   opacity: 1;
 }
+
+.grid-container {
+  --uno: bg-gray/20;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  gap: 1px 1px;
+}
+
+.grid-container.layout1 {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 2fr 1fr min-content;
+  grid-template-areas:
+    'main main'
+    'note next'
+    'bottom bottom';
+}
+
+.grid-container.layout2 {
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: 2fr 1fr min-content;
+  grid-template-areas:
+    'note main'
+    'note next'
+    'bottom bottom';
+}
+
+@media (max-aspect-ratio: 3/5) {
+  .grid-container.layout1 {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr 1fr min-content;
+    grid-template-areas:
+      'main'
+      'note'
+      'next'
+      'bottom';
+  }
+}
+
+@media (min-aspect-ratio: 1/1) {
+  .grid-container.layout1 {
+    grid-template-columns: 1fr 1.1fr 0.9fr;
+    grid-template-rows: 1fr 2fr min-content;
+    grid-template-areas:
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
+  }
+}
+
+.progress-bar {
+  --uno: fixed left-0 right-0 top-0;
+}
+
+.grid-section {
+  --uno: bg-main;
+}
+
+.grid-section.top {
+  grid-area: top;
+}
+.grid-section.main {
+  grid-area: main;
+}
+.grid-section.next {
+  grid-area: next;
+}
+.grid-section.note {
+  grid-area: note;
+}
+.grid-section.bottom {
+  grid-area: bottom;
+}
 </style>
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index 2ad1cc40e4..6113a6f9ef 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { recomputeAllPoppers } from 'floating-vue'
 import { onMounted } from 'vue'
-import PrintTemplate from '#slidev/page-templates/print'
+import PrintTemplate from '#slidev/print-template'
 
 document.documentElement.classList.add('print')
 
diff --git a/packages/client/page-templates/print/default.vue b/packages/client/pages/print/default.vue
similarity index 100%
rename from packages/client/page-templates/print/default.vue
rename to packages/client/pages/print/default.vue
diff --git a/packages/client/page-templates/print/notes.vue b/packages/client/pages/print/notes.vue
similarity index 100%
rename from packages/client/page-templates/print/notes.vue
rename to packages/client/pages/print/notes.vue
diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index 8a804080f4..e72a147277 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -41,8 +41,9 @@ const CONFIG_RESTART_FIELDS: (keyof SlidevConfig)[] = [
  * Files that triggers a restart when added or removed
  */
 const FILES_CREATE_RESTART_GLOBS = [
-  'global-bottom.vue',
-  'global-top.vue',
+  'global-bottom.{vue,ts}',
+  'global-top.{vue,ts}',
+  'layouts/*.{vue,ts}',
   'uno.config.js',
   'uno.config.ts',
   'unocss.config.js',
@@ -122,9 +123,14 @@ cli.command(
       default: '0.0.0.0',
       describe: 'specify which IP addresses the server should listen on in remote mode',
     })
+    .option('print-template', {
+      type: 'string',
+      default: 'default',
+      description: 'specify the print template to load',
+    })
     .strict()
     .help(),
-  async ({ entry, theme, port: userPort, open, log, remote, tunnel, force, inspect, bind }) => {
+  async ({ entry, theme, port: userPort, open, log, remote, tunnel, force, inspect, bind, printTemplate }) => {
     let server: ViteDevServer | undefined
     let port = 3030
 
@@ -142,7 +148,7 @@ cli.command(
     async function initServer() {
       if (server)
         await server.close()
-      const options = await resolveOptions({ entry, remote, theme, inspect }, 'dev')
+      const options = await resolveOptions({ entry, remote, theme, inspect }, 'dev', printTemplate)
       const host = remote !== undefined ? bind : 'localhost'
       port = userPort || await getPort({
         port: 3030,
@@ -211,6 +217,8 @@ cli.command(
         publicIp = await import('public-ip').then(r => r.publicIpv4())
 
       lastRemoteUrl = printInfo(options, port, remote, tunnelUrl, publicIp)
+
+      watchFileChange(options.userRoot)
     }
 
     async function openTunnel(port: number) {
@@ -300,32 +308,32 @@ cli.command(
       })
     }
 
+    async function watchFileChange(userRoot: string) {
+      // Start watcher to restart server on file changes
+      const { watch } = await import('chokidar')
+      const watchOptions = {
+        cwd: userRoot,
+        ignored: ['node_modules', '.git'],
+        ignoreInitial: true,
+      }
+      watch(FILES_CREATE_RESTART_GLOBS, watchOptions)
+        .on('unlink', (file) => {
+          console.log(yellow(`\n  file ${file} removed, restarting...\n`))
+          restartServer()
+        })
+        .on('add', (file) => {
+          console.log(yellow(`\n  file ${file} added, restarting...\n`))
+          restartServer()
+        })
+      watch(FILES_CHANGE_RESTART_GLOBS, watchOptions)
+        .on('change', (file) => {
+          console.log(yellow(`\n  file ${file} changed, restarting...\n`))
+          restartServer()
+        })
+    }
+
     initServer()
     bindShortcut()
-
-    // Start watcher to restart server on file changes
-    const { watch } = await import('chokidar')
-    const watcher = watch([
-      ...FILES_CREATE_RESTART_GLOBS,
-      ...FILES_CHANGE_RESTART_GLOBS,
-    ], {
-      ignored: ['node_modules', '.git'],
-      ignoreInitial: true,
-    })
-    watcher.on('unlink', (file) => {
-      console.log(yellow(`\n  file ${file} removed, restarting...\n`))
-      restartServer()
-    })
-    watcher.on('add', (file) => {
-      console.log(yellow(`\n  file ${file} added, restarting...\n`))
-      restartServer()
-    })
-    watcher.on('change', (file) => {
-      if (FILES_CREATE_RESTART_GLOBS.includes(file))
-        return
-      console.log(yellow(`\n  file ${file} changed, restarting...\n`))
-      restartServer()
-    })
   },
 )
 
diff --git a/packages/slidev/node/options.ts b/packages/slidev/node/options.ts
index e9a7c8d436..3030abf54e 100644
--- a/packages/slidev/node/options.ts
+++ b/packages/slidev/node/options.ts
@@ -11,7 +11,7 @@ const debug = Debug('slidev:options')
 export async function resolveOptions(
   options: SlidevEntryOptions,
   mode: ResolvedSlidevOptions['mode'],
-  exportTemplate: string = 'default',
+  printTemplate: string = 'default',
 ): Promise<ResolvedSlidevOptions> {
   const entry = await resolveEntry(options.entry)
   const rootsInfo = await getRoots(entry)
@@ -50,7 +50,7 @@ export async function resolveOptions(
       themeMeta,
     },
     mode,
-    exportTemplate,
+    printTemplate,
     entry,
     themeRaw,
     theme,
diff --git a/packages/slidev/node/resolver.ts b/packages/slidev/node/resolver.ts
index cbf768c2c7..22f69d46c1 100644
--- a/packages/slidev/node/resolver.ts
+++ b/packages/slidev/node/resolver.ts
@@ -10,7 +10,7 @@ import { resolvePath } from 'mlly'
 import globalDirs from 'global-directory'
 import prompts from 'prompts'
 import { parseNi, run } from '@antfu/ni'
-import { underline, yellow } from 'kolorist'
+import { red, underline, yellow } from 'kolorist'
 import fg from 'fast-glob'
 import type { ResolvedSlidevOptions, RootsInfo } from '@slidev/types'
 
@@ -271,3 +271,15 @@ export function createGlobResolver(source: string, { roots, clientRoot }: Resolv
     return fileMap
   }
 }
+
+export async function getPrintTemplate(options: ResolvedSlidevOptions) {
+  if (options.mode !== 'export')
+    return null
+  const templates = await createGlobResolver('pages/print/*.{vue,ts}', options)()
+  const template = templates[options.printTemplate.toLocaleLowerCase()]
+  if (!template) {
+    console.error(red(`Print template ${options.printTemplate} not found. Available templates: ${Object.keys(templates)}`))
+    process.exit(1)
+  }
+  return template
+}
diff --git a/packages/slidev/node/virtual/index.ts b/packages/slidev/node/virtual/index.ts
index 462bb73302..317facc8d7 100644
--- a/packages/slidev/node/virtual/index.ts
+++ b/packages/slidev/node/virtual/index.ts
@@ -4,8 +4,10 @@ import { templateGlobalBottom, templateGlobalTop, templateNavControls } from './
 import { templateLayouts } from './layouts'
 import { templateMonacoRunDeps } from './monaco-deps'
 import { templateMonacoTypes } from './monaco-types'
+import { templatePrintTemplate } from './print-template'
 import { templateSetups } from './setups'
 import { templateShiki } from './shiki'
+import { templateSlideLayers } from './slide-layers'
 import { templateSlides } from './slides'
 import { templateStyle } from './styles'
 import { templateTitleRenderer, templateTitleRendererMd } from './titles'
@@ -23,6 +25,8 @@ export const templates = [
   templateLayouts,
   templateTitleRenderer,
   templateTitleRendererMd,
+  templatePrintTemplate,
+  templateSlideLayers,
   ...templateSetups,
 
   // Deprecated
diff --git a/packages/slidev/node/virtual/layouts.ts b/packages/slidev/node/virtual/layouts.ts
index 3e2a9c1ce5..90b4ab0a21 100644
--- a/packages/slidev/node/virtual/layouts.ts
+++ b/packages/slidev/node/virtual/layouts.ts
@@ -1,22 +1,15 @@
-import { objectMap } from '@antfu/utils'
 import { toAtFS } from '../resolver'
 import type { VirtualModuleTemplate } from './types'
 
 export const templateLayouts: VirtualModuleTemplate = {
   id: '/@slidev/layouts',
   async getContent(_, { getLayouts }) {
-    const imports: string[] = []
-    const layouts = objectMap(
-      await getLayouts(),
-      (k, v) => {
-        imports.push(`import __layout_${k} from "${toAtFS(v)}"`)
-        return [k, `__layout_${k}`]
-      },
-    )
-
+    const layouts = await getLayouts()
     return [
-      imports.join('\n'),
-      `export default {\n${Object.entries(layouts).map(([k, v]) => `"${k}": ${v}`).join(',\n')}\n}`,
-    ].join('\n\n')
+      ...Object.values(layouts).map((path, idx) => `import _${idx} from "${toAtFS(path)}"`),
+      'export default {',
+      ...Object.keys(layouts).map((name, idx) => `"${name}": _${idx},`),
+      '}\n',
+    ].join('\n')
   },
 }
diff --git a/packages/slidev/node/virtual/print-template.ts b/packages/slidev/node/virtual/print-template.ts
new file mode 100644
index 0000000000..6d0ef5b08f
--- /dev/null
+++ b/packages/slidev/node/virtual/print-template.ts
@@ -0,0 +1,10 @@
+import { toAtFS } from '../resolver'
+import type { VirtualModuleTemplate } from './types'
+
+export const templatePrintTemplate: VirtualModuleTemplate = {
+  id: '/@slidev/print-template',
+  async getContent(_, { printTemplate }) {
+    const template = await printTemplate
+    return `import PrintTemplate from "${toAtFS(template!)}"\nexport default PrintTemplate`
+  },
+}
diff --git a/packages/slidev/node/virtual/slide-layers.ts b/packages/slidev/node/virtual/slide-layers.ts
new file mode 100644
index 0000000000..bc19012309
--- /dev/null
+++ b/packages/slidev/node/virtual/slide-layers.ts
@@ -0,0 +1,19 @@
+import { toAtFS } from '../resolver'
+import type { VirtualModuleTemplate } from './types'
+
+export const templateSlideLayers: VirtualModuleTemplate = {
+  id: '/@slidev/slide-layers',
+  async getContent(_, { getLayouts }) {
+    const layouts = await getLayouts()
+    const top = layouts['slide-top']
+    const bottom = layouts['slide-bottom']
+    return [
+      top ? `import SlideTop from '${toAtFS(top)}'` : `const SlideTop = null`,
+      bottom ? `import SlideBottom from '${toAtFS(bottom)}'` : `const SlideBottom = null`,
+      'export {',
+      '  SlideTop,',
+      '  SlideBottom,',
+      '}\n',
+    ].join('\n')
+  },
+}
diff --git a/packages/slidev/node/virtual/types.ts b/packages/slidev/node/virtual/types.ts
index e34e13d0c0..d5efd17455 100644
--- a/packages/slidev/node/virtual/types.ts
+++ b/packages/slidev/node/virtual/types.ts
@@ -11,6 +11,5 @@ export interface VirtualModuleTemplate {
 export interface VirtualModuleTempalteContext {
   md: MarkdownIt
   getLayouts: () => Promise<Record<string, string>>
-  getPageTemplates: () => Promise<Record<string, string>>
-  getPrintTemplates: () => Promise<Record<string, string>>
+  printTemplate: Promise<string | null>
 }
diff --git a/packages/slidev/node/vite/loaders.ts b/packages/slidev/node/vite/loaders.ts
index d13d19cb15..263c2b715f 100644
--- a/packages/slidev/node/vite/loaders.ts
+++ b/packages/slidev/node/vite/loaders.ts
@@ -11,7 +11,7 @@ import equal from 'fast-deep-equal'
 
 import type { LoadResult } from 'rollup'
 import { stringifyMarkdownTokens, updateFrontmatterPatch } from '../utils'
-import { createGlobResolver, toAtFS } from '../resolver'
+import { createGlobResolver, getPrintTemplate, toAtFS } from '../resolver'
 import { templates } from '../virtual'
 import type { VirtualModuleTempalteContext } from '../virtual/types'
 import { templateTitleRendererMd } from '../virtual/titles'
@@ -106,8 +106,7 @@ export function createSlidesLoader(
   const templateCtx: VirtualModuleTempalteContext = {
     md,
     getLayouts: createGlobResolver('layouts/*.{vue,ts}', options),
-    getPageTemplates: createGlobResolver('page-templates/*.{vue,ts}', options),
-    getPrintTemplates: createGlobResolver('page-templates/print/*.{vue,ts}', options),
+    printTemplate: getPrintTemplate(options),
   }
 
   return [
@@ -358,21 +357,6 @@ export function createSlidesLoader(
             map: { mappings: '' },
           }
         }
-
-        // page templates
-        const VIRTUAL_PAGE_TEMPLATES_PREFIX = '/@slidev/page-templates/'
-        if (id.startsWith(VIRTUAL_PAGE_TEMPLATES_PREFIX)) {
-          const templateName = id.slice(VIRTUAL_PAGE_TEMPLATES_PREFIX.length)
-          const template = templateName === 'print'
-            ? (await templateCtx.getPrintTemplates())[options.exportTemplate]
-            : (await templateCtx.getPageTemplates())[templateName]
-          return {
-            code: template
-              ? `import PageTemplate from "${toAtFS(template)}"\nexport default PageTemplate`
-              : `export default { render: () => [] }`,
-            map: { mappings: '' },
-          }
-        }
       },
     },
     {
diff --git a/packages/types/client.d.ts b/packages/types/client.d.ts
index 60d231cc88..1372ba4b45 100644
--- a/packages/types/client.d.ts
+++ b/packages/types/client.d.ts
@@ -44,13 +44,20 @@ declare module '#slidev/custom-nav-controls' {
   export default component
 }
 
-declare module '#slidev/page-templates/*' {
+declare module '#slidev/print-template' {
   import type { Component } from 'vue'
 
   const component: Component
   export default component
 }
 
+declare module '#slidev/slide-layers' {
+  import type { Component } from 'vue'
+
+  export const SlideTop: Component | null
+  export const SlideBottom: Component | null
+}
+
 declare module '#slidev/shiki' {
   import type { ShikiHighlighterCore } from 'shiki/core'
   import type { BundledLanguage, BundledTheme } from 'shiki'
diff --git a/packages/types/src/options.ts b/packages/types/src/options.ts
index 521bc9595f..a8042df5e8 100644
--- a/packages/types/src/options.ts
+++ b/packages/types/src/options.ts
@@ -42,7 +42,7 @@ export interface ResolvedSlidevOptions extends RootsInfo {
    */
   roots: string[]
   mode: 'dev' | 'build' | 'export'
-  exportTemplate: string
+  printTemplate: string
   remote?: string
   inspect?: boolean
 }

From 3b491b39111d2f243c490f33dcfc238a2f3ff196 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 17 Apr 2024 20:05:08 +0800
Subject: [PATCH 13/20] docs: fix dead link

---
 docs/guide/exporting.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md
index 83f2c83cbb..508c6ca02b 100644
--- a/docs/guide/exporting.md
+++ b/docs/guide/exporting.md
@@ -66,7 +66,7 @@ Currently, Slidev provides the following templates:
 - `default`: Slides only template. Each
 - `notes`: Notes only.
 
-But it is also possible to create your own print template. See [Custom Print Templates](/guide/custom/print-templates) for details.
+But it is also possible to create your own print template. See [Custom Print Templates](/custom/print-templates) for details.
 
 ### Slide range
 

From cecfcedddc417329d380988906bd70fe0c92cebc Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Wed, 17 Apr 2024 20:21:56 +0800
Subject: [PATCH 14/20] fix

---
 packages/slidev/node/resolver.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/slidev/node/resolver.ts b/packages/slidev/node/resolver.ts
index 22f69d46c1..120e36c5e0 100644
--- a/packages/slidev/node/resolver.ts
+++ b/packages/slidev/node/resolver.ts
@@ -273,8 +273,6 @@ export function createGlobResolver(source: string, { roots, clientRoot }: Resolv
 }
 
 export async function getPrintTemplate(options: ResolvedSlidevOptions) {
-  if (options.mode !== 'export')
-    return null
   const templates = await createGlobResolver('pages/print/*.{vue,ts}', options)()
   const template = templates[options.printTemplate.toLocaleLowerCase()]
   if (!template) {

From dec41e1c5ef59757dfea7fd3a71c928fc66af672 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 19 Apr 2024 00:14:23 +0800
Subject: [PATCH 15/20] feat: handout print template (wip)

---
 .../{usePrintStyle.ts => useSlidePageSize.ts} |  2 +-
 packages/client/composables/useSlideScale.ts  | 38 ---------
 packages/client/constants.ts                  |  1 -
 packages/client/internals/NoteDisplay.vue     |  2 +-
 packages/client/internals/PrintSlide.vue      | 29 -------
 packages/client/internals/PrintSlideClick.vue | 67 ---------------
 packages/client/internals/PrintSlides.vue     | 47 ++++++++++
 packages/client/internals/SlideContainer.vue  | 30 +++++--
 packages/client/internals/SlideWrapper.vue    |  7 +-
 packages/client/pages/play.vue                |  4 +-
 packages/client/pages/print.vue               |  8 +-
 packages/client/pages/print/default.vue       | 53 +++++++++---
 packages/client/pages/print/handout.vue       | 85 +++++++++++++++++++
 13 files changed, 208 insertions(+), 165 deletions(-)
 rename packages/client/composables/{usePrintStyle.ts => useSlidePageSize.ts} (84%)
 delete mode 100644 packages/client/composables/useSlideScale.ts
 delete mode 100644 packages/client/internals/PrintSlide.vue
 delete mode 100644 packages/client/internals/PrintSlideClick.vue
 create mode 100644 packages/client/internals/PrintSlides.vue
 create mode 100644 packages/client/pages/print/handout.vue

diff --git a/packages/client/composables/usePrintStyle.ts b/packages/client/composables/useSlidePageSize.ts
similarity index 84%
rename from packages/client/composables/usePrintStyle.ts
rename to packages/client/composables/useSlidePageSize.ts
index 0b28178abf..ac0fe2f862 100644
--- a/packages/client/composables/usePrintStyle.ts
+++ b/packages/client/composables/useSlidePageSize.ts
@@ -1,7 +1,7 @@
 import { useStyleTag } from '@vueuse/core'
 import { slideHeight, slideWidth } from '../env'
 
-export function usePrintStyle() {
+export function useSlidePageSize() {
   return useStyleTag(`
     @page {
       size: ${slideWidth}px ${slideHeight}px;
diff --git a/packages/client/composables/useSlideScale.ts b/packages/client/composables/useSlideScale.ts
deleted file mode 100644
index f4f9316155..0000000000
--- a/packages/client/composables/useSlideScale.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Ref } from 'vue'
-import { computed } from 'vue'
-import { useStyleTag } from '@vueuse/core'
-import { slideAspect, slideHeight, slideWidth } from '../env'
-import { slideScale } from '../state'
-import { useNav } from './useNav'
-
-export function useSlideScale(
-  containerSize: { width: Ref<number>, height: Ref<number> },
-  expectedWidth?: number,
-  isMain: boolean = false,
-) {
-  const { isPrintMode } = useNav()
-
-  const width = computed(() => expectedWidth ?? containerSize.width.value)
-  const height = computed(() => expectedWidth ? expectedWidth / slideAspect.value : containerSize.height.value)
-
-  const scale = computed(() => {
-    if (slideScale.value && !isPrintMode.value)
-      return +slideScale.value
-    return Math.min(width.value / slideWidth.value, height.value / slideHeight.value)
-  })
-
-  const style = computed(() => ({
-    'height': `${slideHeight.value}px`,
-    'width': `${slideWidth.value}px`,
-    'transform': `translate(-50%, -50%) scale(${scale.value})`,
-    '--slidev-slide-scale': scale.value,
-  }))
-
-  if (isMain)
-    useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))
-
-  return {
-    scale,
-    style,
-  }
-}
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/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/PrintSlide.vue b/packages/client/internals/PrintSlide.vue
deleted file mode 100644
index ea0f199868..0000000000
--- a/packages/client/internals/PrintSlide.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { SlideRoute } from '@slidev/types'
-import { useFixedNav, useNav } from '../composables/useNav'
-import { createFixedClicks } from '../composables/useClicks'
-import { CLICKS_MAX } from '../constants'
-import PrintSlideClick from './PrintSlideClick.vue'
-
-const { route } = defineProps<{ route: SlideRoute }>()
-const { isPrintWithClicks } = useNav()
-const clicks0 = createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)
-</script>
-
-<template>
-  <PrintSlideClick
-    :clicks-context="clicks0"
-    :nav="useFixedNav(route, clicks0)"
-  />
-  <template v-if="isPrintWithClicks">
-    <!--
-      clicks0.total can be any number >=0 when rendering.
-      So total-clicksStart can be negative in intermediate states.
-    -->
-    <PrintSlideClick
-      v-for="i in Math.max(0, clicks0.total - clicks0.clicksStart)"
-      :key="i"
-      :nav="useFixedNav(route, createFixedClicks(route, i + clicks0.clicksStart))"
-    />
-  </template>
-</template>
diff --git a/packages/client/internals/PrintSlideClick.vue b/packages/client/internals/PrintSlideClick.vue
deleted file mode 100644
index e04821447f..0000000000
--- a/packages/client/internals/PrintSlideClick.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, shallowRef } from 'vue'
-import { provideLocal } from '@vueuse/core'
-import { injectionSlidevContext } from '../constants'
-import { configs, slideHeight, slideWidth } from '../env'
-import { getSlideClass } from '../utils'
-import type { SlidevContextNav } from '../composables/useNav'
-import SlideWrapper from './SlideWrapper.vue'
-
-import GlobalTop from '#slidev/global-components/top'
-import GlobalBottom from '#slidev/global-components/bottom'
-
-const { nav } = defineProps<{
-  nav: SlidevContextNav
-}>()
-
-const route = computed(() => nav.currentSlideRoute.value)
-
-const style = computed(() => ({
-  height: `${slideHeight.value}px`,
-  width: `${slideWidth.value}px`,
-}))
-
-const DrawingPreview = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-  import('./DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
-
-const id = computed(() =>
-  `${route.value.no.toString().padStart(3, '0')}-${(nav.clicks.value + 1).toString().padStart(2, '0')}`,
-)
-
-provideLocal(injectionSlidevContext, reactive({
-  nav,
-  configs,
-  themeConfigs: computed(() => configs.themeConfig),
-}))
-</script>
-
-<template>
-  <div :id="id" class="print-slide-container" :style="style">
-    <GlobalBottom />
-
-    <SlideWrapper
-      :is="route.component!"
-      :clicks-context="nav.clicksContext.value"
-      :class="getSlideClass(route)"
-      :route="route"
-    />
-    <template
-      v-if="
-        (__SLIDEV_FEATURE_DRAWINGS__
-          || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-          && DrawingPreview
-      "
-    >
-      <DrawingPreview :page="route.no" />
-    </template>
-
-    <GlobalTop />
-  </div>
-</template>
-
-<style scoped lang="postcss">
-.print-slide-container {
-  @apply relative overflow-hidden break-after-page translate-0;
-}
-</style>
diff --git a/packages/client/internals/PrintSlides.vue b/packages/client/internals/PrintSlides.vue
new file mode 100644
index 0000000000..3849a16393
--- /dev/null
+++ b/packages/client/internals/PrintSlides.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, defineComponent, provide, reactive } from 'vue'
+import type { SlidevContextNav } from '../composables/useNav'
+import { useFixedNav, useNav } from '../composables/useNav'
+import { createFixedClicks } from '../composables/useClicks'
+import { CLICKS_MAX, injectionSlidevContext } from '../constants'
+import { configs } from '../env'
+
+const { slidesToPrint, isPrintWithClicks } = useNav()
+const clicks0 = computed(() =>
+  slidesToPrint.value.map(route => createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)),
+)
+
+const ProvideSlidevContext = defineComponent<{
+  nav: SlidevContextNav
+}>(({ nav }, { slots }) => {
+  provide(injectionSlidevContext, reactive({
+    nav,
+    configs,
+    themeConfigs: computed(() => configs.themeConfig),
+  }))
+  return () => slots?.default?.({ nav, clicks0 })
+}, {
+  props: ['nav'],
+})
+</script>
+
+<template>
+  <template v-for="(route, i) of slidesToPrint" :key="route.no">
+    <ProvideSlidevContext v-slot="{ nav }" :nav="useFixedNav(route, clicks0[i])">
+      <slot :route="route" :nav="nav" />
+    </ProvideSlidevContext>
+    <template v-if="isPrintWithClicks">
+      <!--
+        clicks0.total can be any number >=0 when rendering.
+        So total-clicksStart can be negative in intermediate states.
+      -->
+      <ProvideSlidevContext
+        v-for="click in Math.max(0, clicks0[i].total - clicks0[i].clicksStart)"
+        :key="click" v-slot="{ nav }"
+        :nav="useFixedNav(route, createFixedClicks(route, click + clicks0[i].clicksStart))"
+      >
+        <slot :route="route" :nav="nav" />
+      </ProvideSlidevContext>
+    </template>
+  </template>
+</template>
diff --git a/packages/client/internals/SlideContainer.vue b/packages/client/internals/SlideContainer.vue
index d6203d4e23..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 } from '@vueuse/core'
+import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import { useSlideScale } from '../composables/useSlideScale'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
-import { slideAspect } from '../env'
+import { slideAspect, slideHeight, slideWidth } from '../env'
+import { useNav } from '../composables/useNav'
+import { slideScale } from '../state'
 
 const props = defineProps({
   width: {
@@ -18,11 +19,27 @@ const props = defineProps({
   },
 })
 
+const { isPrintMode } = useNav()
+
 const container = ref<HTMLDivElement | null>(null)
 const containerSize = useElementSize(container)
 const slideElement = ref<HTMLElement | null>(null)
 
-const { scale, style: contentStyle } = useSlideScale(containerSize, props.width, props.isMain)
+const width = computed(() => props.width ?? containerSize.width.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : containerSize.height.value)
+
+const scale = computed(() => {
+  if (slideScale.value && !isPrintMode.value)
+    return +slideScale.value
+  return Math.min(width.value / slideWidth.value, height.value / slideHeight.value)
+})
+
+const contentStyle = computed(() => ({
+  'height': `${slideHeight.value}px`,
+  'width': `${slideWidth.value}px`,
+  'transform': `translate(-50%, -50%) scale(${scale.value})`,
+  '--slidev-slide-scale': scale.value,
+}))
 
 const containerStyle = computed(() => props.width
   ? {
@@ -32,6 +49,9 @@ const containerStyle = computed(() => props.width
   : {},
 )
 
+if (props.isMain)
+  useStyleTag(computed(() => `:root { --slidev-slide-scale: ${scale.value}; }`))
+
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 </script>
@@ -51,6 +71,6 @@ provideLocal(injectionSlideElement, slideElement)
 }
 
 .slidev-slide-content {
-  @apply relative overflow-hidden bg-main absolute left-1/2 top-1/2;
+  @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 e9a441360e..fcac076f2c 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -3,7 +3,7 @@ import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toR
 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'
@@ -18,10 +18,6 @@ const props = defineProps({
     type: String as PropType<RenderContext>,
     default: 'slide',
   },
-  active: {
-    type: Boolean,
-    default: false,
-  },
   is: {
     type: Function as PropType<() => any>,
     required: true,
@@ -37,7 +33,6 @@ 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(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index d4c38c6d15..f8aecf3aac 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -10,7 +10,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
-import { usePrintStyle } from '../composables/usePrintStyle'
+import { useSlidePageSize } from '../composables/useSlidePageSize'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
@@ -31,7 +31,7 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 registerShortcuts()
-usePrintStyle()
+useSlidePageSize()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index 6113a6f9ef..3f9ebe8f90 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -12,11 +12,8 @@ onMounted(() => {
 
 <template>
   <div id="page-root">
-    <PrintTemplate>
-      <template #floating="attrs">
-        <div id="twoslash-container" v-bind="attrs" />
-      </template>
-    </PrintTemplate>
+    <PrintTemplate />
+    <div id="twoslash-container" />
   </div>
 </template>
 
@@ -46,5 +43,6 @@ html body {
   padding: 0;
   float: none;
   overflow: visible;
+  background-color: white;
 }
 </style>
diff --git a/packages/client/pages/print/default.vue b/packages/client/pages/print/default.vue
index a729ad85a7..b4d6cb3399 100644
--- a/packages/client/pages/print/default.vue
+++ b/packages/client/pages/print/default.vue
@@ -1,21 +1,54 @@
 <script setup lang="ts">
 import { provideLocal } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, shallowRef } from 'vue'
 import { injectionSlideScale } from '../../constants'
-import { useNav } from '../../composables/useNav'
-import { usePrintStyle } from '../../composables/usePrintStyle'
-import PrintSlide from '../../internals/PrintSlide.vue'
+import { useSlidePageSize } from '../../composables/useSlidePageSize'
+import { getSlideClass } from '../../utils'
+import { slideHeight, slideWidth } from '../../env'
+import PrintSlides from '../../internals/PrintSlides.vue'
+import SlideWrapper from '../../internals/SlideWrapper.vue'
+
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
+useSlidePageSize()
 
 provideLocal(injectionSlideScale, computed(() => 1))
 
-usePrintStyle()
+function getElementId(no: number, clicks: number) {
+  return `${no.toString().padStart(3, '0')}-${(clicks + 1).toString().padStart(2, '0')}`
+}
 
-const { slidesToPrint } = useNav()
+const DrawingPreview = shallowRef<any>()
+if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+  import('../../internals/DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
 </script>
 
 <template>
-  <div>
-    <PrintSlide v-for="route of slidesToPrint" :key="route.no" :route="route" />
-    <slot name="floating" />
-  </div>
+  <PrintSlides v-slot="{ nav, route }">
+    <div :id="getElementId(route.no, nav.clicks.value + 1)" class="print-slide-container">
+      <GlobalBottom />
+
+      <SlideWrapper
+        :is="route.component!"
+        :clicks-context="nav.clicksContext.value"
+        :class="getSlideClass(route)"
+        :route="route"
+      />
+      <DrawingPreview
+        v-if="DrawingPreview"
+        :page="route.no"
+      />
+
+      <GlobalTop />
+    </div>
+  </PrintSlides>
 </template>
+
+<style scoped lang="postcss">
+.print-slide-container {
+  @apply relative overflow-hidden break-after-page translate-0;
+  width: v-bind('`${slideWidth}px`');
+  height: v-bind('`${slideHeight}px`');
+}
+</style>
diff --git a/packages/client/pages/print/handout.vue b/packages/client/pages/print/handout.vue
new file mode 100644
index 0000000000..835c28d888
--- /dev/null
+++ b/packages/client/pages/print/handout.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useNav } from '../../composables/useNav'
+import { useSlideInfo } from '../../composables/useSlideInfo'
+import { configs } from '../../env'
+import PrintSlides from '../../internals/PrintSlides.vue'
+import SlideContainer from '../../internals/SlideContainer.vue'
+import SlideWrapper from '../../internals/SlideWrapper.vue'
+import NoteStatic from '../../internals/NoteStatic.vue'
+
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
+const { isPrintWithClicks } = useNav()
+const { info } = useSlideInfo(1)
+</script>
+
+<template>
+  <div class="text-black">
+    <div class="handout-page px-25 b b-black">
+      <div class="text-5xl text-black mt-48">
+        {{ configs.title }}
+      </div>
+      <div v-if="configs.info" class="mt-10" v-html="configs.info" />
+      <div v-if="info?.frontmatter.author" class="mt-5">
+        {{ info.frontmatter.author }}
+      </div>
+    </div>
+    <PrintSlides v-slot="{ nav, route }">
+      <div class="handout-page px-8 py-[15mm] b b-black">
+        <div class="tabular-nums mb-1">
+          <span v-if="isPrintWithClicks" class="op-70 text-sm">
+            Page
+          </span>
+          {{ route.no }} / {{ nav.total }}
+          <span v-if="isPrintWithClicks && nav.clicksContext.value.total" class="ml-4">
+            <span class="op-70 text-sm">
+              Clicks
+            </span>
+            {{ nav.clicksContext.value.current }} / {{ nav.clicksContext.value.total }}
+          </span>
+        </div>
+
+        <SlideContainer :width="728" class="light:children:(border b-dark box-border)">
+          <GlobalBottom />
+
+          <SlideWrapper
+            :is="route.component!"
+            :clicks-context="nav.clicksContext.value"
+            :route="route"
+          />
+
+          <GlobalTop />
+        </SlideContainer>
+
+        <NoteStatic
+          class="mt-10 mx-2 text-lg"
+          :no="route.no"
+          :clicks-context="isPrintWithClicks ? nav.clicksContext.value : undefined"
+        />
+
+        <div class="absolute bottom-4 left-6 right-6 px-2 pt-2 b-t b-gray">
+          <div v-if="configs.title" class="text-right text-sm">
+            {{ configs.title }}
+          </div>
+          <div class="text-right text-sm tabular-nums">
+            {{ route.no }} / {{ nav.total }}
+          </div>
+        </div>
+      </div>
+    </PrintSlides>
+  </div>
+</template>
+
+<style scoped>
+@page {
+  size: A4;
+  margin: 0;
+}
+
+.handout-page {
+  position: relative;
+  width: 210mm;
+  height: 297mm;
+}
+</style>

From 8b8637bc86ef93ba9208352824f09dad88035a0a Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 19 Apr 2024 13:37:32 +0800
Subject: [PATCH 16/20] chore: update

Co-authored-by: Oliver-Tobias Ripka <contact@oripka.de>
---
 .../client/composables/useSlidePageSize.ts    |  2 +-
 packages/client/pages/print/default.vue       |  2 +-
 packages/client/pages/print/handout.vue       | 20 ++++++++++++++-----
 packages/slidev/node/commands/export.ts       |  2 --
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/client/composables/useSlidePageSize.ts b/packages/client/composables/useSlidePageSize.ts
index ac0fe2f862..20e5189206 100644
--- a/packages/client/composables/useSlidePageSize.ts
+++ b/packages/client/composables/useSlidePageSize.ts
@@ -4,7 +4,7 @@ import { slideHeight, slideWidth } from '../env'
 export function useSlidePageSize() {
   return useStyleTag(`
     @page {
-      size: ${slideWidth}px ${slideHeight}px;
+      size: ${slideWidth.value}px ${slideHeight.value}px;
       margin: 0;
     }
   `)
diff --git a/packages/client/pages/print/default.vue b/packages/client/pages/print/default.vue
index b4d6cb3399..cd49320309 100644
--- a/packages/client/pages/print/default.vue
+++ b/packages/client/pages/print/default.vue
@@ -47,7 +47,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
 
 <style scoped lang="postcss">
 .print-slide-container {
-  @apply relative overflow-hidden break-after-page translate-0;
+  @apply relative overflow-hidden break-before-page translate-0;
   width: v-bind('`${slideWidth}px`');
   height: v-bind('`${slideHeight}px`');
 }
diff --git a/packages/client/pages/print/handout.vue b/packages/client/pages/print/handout.vue
index 835c28d888..160941f379 100644
--- a/packages/client/pages/print/handout.vue
+++ b/packages/client/pages/print/handout.vue
@@ -15,7 +15,7 @@ const { info } = useSlideInfo(1)
 </script>
 
 <template>
-  <div class="text-black">
+  <div class="text-black w-min">
     <div class="handout-page px-25 b b-black">
       <div class="text-5xl text-black mt-48">
         {{ configs.title }}
@@ -40,7 +40,7 @@ const { info } = useSlideInfo(1)
           </span>
         </div>
 
-        <SlideContainer :width="728" class="light:children:(border b-dark box-border)">
+        <SlideContainer :width="728" class="light:children:(border b-dark)">
           <GlobalBottom />
 
           <SlideWrapper
@@ -71,15 +71,25 @@ const { info } = useSlideInfo(1)
   </div>
 </template>
 
-<style scoped>
+<style>
 @page {
   size: A4;
   margin: 0;
 }
 
 .handout-page {
+  width: 794px;
+  height: 1123px;
+  overflow: hidden;
+  break-before: page;
   position: relative;
-  width: 210mm;
-  height: 297mm;
+}
+
+.slidev-note-click-mark.slidev-note-click-mark-past {
+  filter: none;
+  opacity: 0.5;
+}
+.slidev-note-click-mark.slidev-note-click-mark-next {
+  opacity: 0.5;
 }
 </style>
diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts
index c5b2310dba..54e4a33345 100644
--- a/packages/slidev/node/commands/export.ts
+++ b/packages/slidev/node/commands/export.ts
@@ -300,8 +300,6 @@ export async function exportSlides({
     await go('print')
     await page.pdf({
       path: output,
-      width,
-      height,
       margin: {
         left: 0,
         top: 0,

From 869da0e3d19c57be98c8e96a3ce9f3737b926ab9 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Fri, 19 Apr 2024 19:27:06 +0800
Subject: [PATCH 17/20] chore: update

---
 cypress/e2e/examples/basic.spec.ts          |  8 +++++---
 packages/client/env.ts                      |  2 +-
 packages/client/internals/PrintSlides.vue   | 16 +++++++---------
 packages/client/internals/QuickOverview.vue |  2 +-
 packages/client/internals/SlideWrapper.vue  |  2 +-
 packages/client/pages/notes.vue             |  7 ++-----
 packages/client/pages/overview.vue          |  6 ++----
 packages/client/pages/play.vue              |  7 ++++---
 packages/client/pages/presenter.vue         | 17 +++++------------
 packages/client/pages/print.vue             |  1 -
 packages/client/pages/print/handout.vue     |  2 +-
 packages/client/setup/root.ts               |  8 ++++----
 12 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/cypress/e2e/examples/basic.spec.ts b/cypress/e2e/examples/basic.spec.ts
index 6e71d24ec5..c87d6c211d 100644
--- a/cypress/e2e/examples/basic.spec.ts
+++ b/cypress/e2e/examples/basic.spec.ts
@@ -39,6 +39,8 @@ context('Basic', () => {
     cy.contains('Global Footer')
       .should('exist')
 
+    cy.get('#page-root > #slide-container > #slide-content')
+
     cy.rightArrow()
       .url()
       .should('eq', `${BASE}/2`)
@@ -46,15 +48,15 @@ context('Basic', () => {
     cy.contains('Global Footer')
       .should('not.exist')
 
-    cy.get('#slideshow .slidev-page-2 > div > p')
+    cy.get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-2 > div > p')
       .should('have.css', 'border-color', 'rgb(0, 128, 0)')
       .should('not.have.css', 'color', 'rgb(128, 0, 0)')
 
     goPage(5)
 
-    cy.get('#slideshow .slidev-page-5 .slidev-code')
+    cy.get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-5 .slidev-code')
       .should('have.text', '<div>{{$slidev.nav.currentPage}}</div>')
-      .get('#slideshow .slidev-page-5 > div > p')
+      .get('#page-root > #slide-container > #slide-content > #slideshow .slidev-page-5 > div > p')
       .should('have.text', 'Current Page: 5')
   })
 
diff --git a/packages/client/env.ts b/packages/client/env.ts
index a73dfc5ddd..59dad897df 100644
--- a/packages/client/env.ts
+++ b/packages/client/env.ts
@@ -17,4 +17,4 @@ export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])
 })
 
-export const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+export const slidesTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
diff --git a/packages/client/internals/PrintSlides.vue b/packages/client/internals/PrintSlides.vue
index 3849a16393..e986583521 100644
--- a/packages/client/internals/PrintSlides.vue
+++ b/packages/client/internals/PrintSlides.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, defineComponent, provide, reactive } from 'vue'
-import type { SlidevContextNav } from '../composables/useNav'
 import { useFixedNav, useNav } from '../composables/useNav'
 import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX, injectionSlidevContext } from '../constants'
@@ -11,9 +10,7 @@ const clicks0 = computed(() =>
   slidesToPrint.value.map(route => createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)),
 )
 
-const ProvideSlidevContext = defineComponent<{
-  nav: SlidevContextNav
-}>(({ nav }, { slots }) => {
+const ProvideSlidevContext = defineComponent(({ navValue: nav }, { slots }) => {
   provide(injectionSlidevContext, reactive({
     nav,
     configs,
@@ -21,14 +18,15 @@ const ProvideSlidevContext = defineComponent<{
   }))
   return () => slots?.default?.({ nav, clicks0 })
 }, {
-  props: ['nav'],
+  // Avoid warnings caused by eslint bug
+  props: ['navValue'],
 })
 </script>
 
 <template>
   <template v-for="(route, i) of slidesToPrint" :key="route.no">
-    <ProvideSlidevContext v-slot="{ nav }" :nav="useFixedNav(route, clicks0[i])">
-      <slot :route="route" :nav="nav" />
+    <ProvideSlidevContext v-slot="{ nav }" :nav-value="useFixedNav(route, clicks0[i])">
+      <slot :route :nav />
     </ProvideSlidevContext>
     <template v-if="isPrintWithClicks">
       <!--
@@ -38,9 +36,9 @@ const ProvideSlidevContext = defineComponent<{
       <ProvideSlidevContext
         v-for="click in Math.max(0, clicks0[i].total - clicks0[i].clicksStart)"
         :key="click" v-slot="{ nav }"
-        :nav="useFixedNav(route, createFixedClicks(route, click + clicks0[i].clicksStart))"
+        :nav-value="useFixedNav(route, createFixedClicks(route, click + clicks0[i].clicksStart))"
       >
-        <slot :route="route" :nav="nav" />
+        <slot :route :nav />
       </ProvideSlidevContext>
     </template>
   </template>
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index d29f280c8f..96e55025f0 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -168,7 +168,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 text-gray-400 flex flex-col items-center gap-2 z-20">
     <IconButton title="Close" class="text-2xl" @click="close">
       <carbon:close />
     </IconButton>
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index fcac076f2c..8203a8af58 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -32,7 +32,7 @@ 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(injectionRenderContext, ref(props.renderContext))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
diff --git a/packages/client/pages/notes.vue b/packages/client/pages/notes.vue
index c7844abc85..b0470a776e 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
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 8553466079..6d3294ba60 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { slideTitle } from '../env'
+import { slidesTitle } from '../env'
 import { getSlidePath } from '../logic/slides'
 import { createFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -18,9 +18,7 @@ import { useNav } from '../composables/useNav'
 
 const cardWidth = 450
 
-useHead({
-  title: `Overview - ${slideTitle}`,
-})
+useHead({ title: `Overview - ${slidesTitle}` })
 
 const { openInEditor, slides } = useNav()
 
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index f8aecf3aac..87fd42172b 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -11,8 +11,9 @@ import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
 import { useSlidePageSize } from '../composables/useSlidePageSize'
+import PresenterMouse from '../internals/PresenterMouse.vue'
 
-const { next, prev, isPrintMode } = useNav()
+const { next, prev, isPrintMode, isPresenter } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
@@ -46,7 +47,6 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
     :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"
       is-main
@@ -55,6 +55,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
     >
       <template #default>
         <SlidesShow render-context="slide" />
+        <PresenterMouse v-if="!isPresenter" />
       </template>
       <template #controls>
         <div
@@ -69,7 +70,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
         </div>
       </template>
     </SlideContainer>
-    <SideEditor v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" :resize="true" />
+    <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 bdf69d51b5..d379040820 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -4,7 +4,7 @@ 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'
@@ -44,10 +44,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,7 +110,7 @@ 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"
         >
@@ -129,11 +126,7 @@ 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"
@@ -147,7 +140,7 @@ onMounted(() => {
           Next
         </div>
       </div>
-      <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">
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index 3f9ebe8f90..df060cef58 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -29,7 +29,6 @@ html #page-root {
   overflow: hidden;
 }
 html * {
-  print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
 }
 html {
diff --git a/packages/client/pages/print/handout.vue b/packages/client/pages/print/handout.vue
index 160941f379..ec24bdf673 100644
--- a/packages/client/pages/print/handout.vue
+++ b/packages/client/pages/print/handout.vue
@@ -40,7 +40,7 @@ const { info } = useSlideInfo(1)
           </span>
         </div>
 
-        <SlideContainer :width="728" class="light:children:(border b-dark)">
+        <SlideContainer :width="728" class="light:children:(border b-dark) dark:text-white">
           <GlobalBottom />
 
           <SlideWrapper
diff --git a/packages/client/setup/root.ts b/packages/client/setup/root.ts
index 6cbd2c807d..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, slideTitle } 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'
@@ -60,12 +60,12 @@ export default function setupRoot() {
   } = useNav()
 
   useHead({
-    title: slideTitle,
+    title: slidesTitle,
     htmlAttrs: configs.htmlAttrs,
   })
 
-  initSharedState(`${slideTitle} - shared`)
-  initDrawingState(`${slideTitle} - drawings`)
+  initSharedState(`${slidesTitle} - shared`)
+  initDrawingState(`${slidesTitle} - drawings`)
 
   const id = `${location.origin}_${makeId()}`
 

From c6c151d8c9810dbd1617bf0e4e5e6ea00c7da9ab Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sat, 20 Apr 2024 00:18:33 +0800
Subject: [PATCH 18/20] wip: rewrite export function

---
 docs/.vitepress/theme/components/Demo.vue |   1 -
 packages/client/composables/useNav.ts     |  58 +++-
 packages/client/internals/PrintSlides.vue |  21 +-
 packages/client/pages/print.vue           |   2 +
 packages/client/pages/print/default.vue   |   6 +-
 packages/client/pages/print/handout.vue   |  10 +-
 packages/client/setup/context-menu.ts     |   8 +-
 packages/client/setup/root.ts             |   2 +-
 packages/slidev/node/cli.ts               |  17 +-
 packages/slidev/node/commands/build.ts    |   1 -
 packages/slidev/node/commands/export.ts   | 386 ++++++++--------------
 packages/types/src/cli.ts                 |  20 +-
 12 files changed, 225 insertions(+), 307 deletions(-)

diff --git a/docs/.vitepress/theme/components/Demo.vue b/docs/.vitepress/theme/components/Demo.vue
index ef93e2eaec..7e48433324 100644
--- a/docs/.vitepress/theme/components/Demo.vue
+++ b/docs/.vitepress/theme/components/Demo.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 
-// @ts-expect-error missing types
 import TypeIt from 'typeit'
 import Markdown from 'markdown-it'
 import type { SlidevMarkdown } from '@slidev/types'
diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 2df1681476..9d41d2a977 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/composables/useNav.ts
@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { createSharedComposable } from '@vueuse/core'
-import { logicOr } from '@vueuse/math'
+import { logicAnd, logicOr } from '@vueuse/math'
 import { clamp } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser'
 import { getCurrentTransition } from '../logic/transition'
@@ -30,6 +30,8 @@ export interface SlidevContextNav {
 
   nextRoute: ComputedRef<SlideRoute>
   prevRoute: ComputedRef<SlideRoute>
+  hasNextSlide: ComputedRef<boolean>
+  hasPrevSlide: ComputedRef<boolean>
   hasNext: ComputedRef<boolean>
   hasPrev: ComputedRef<boolean>
 
@@ -73,6 +75,7 @@ export interface SlidevContextNavState {
   currentRoute: ComputedRef<RouteLocationNormalized>
   isPrintMode: ComputedRef<boolean>
   isPrintWithClicks: ComputedRef<boolean>
+  isPrintPerSlide: ComputedRef<boolean>
   slidesToPrint: ComputedRef<SlideRoute[]>
   isEmbedded: ComputedRef<boolean>
   isPlaying: ComputedRef<boolean>
@@ -95,7 +98,7 @@ export function useNavBase(
   clicksContext: ComputedRef<ClicksContext>,
   queryClicks: Ref<number> = ref(0),
   isPresenter: Ref<boolean>,
-  isPrint: Ref<boolean>,
+  isPrintMode: Ref<boolean>,
   router?: Router,
 ): SlidevContextNav {
   const total = computed(() => slides.value.length)
@@ -112,8 +115,10 @@ export function useNavBase(
   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 hasNextSlide = computed(() => currentSlideNo.value < slides.value.length)
+  const hasPrevSlide = computed(() => currentSlideNo.value > 1)
+  const hasNext = computed(() => hasNextSlide.value || clicks.value < clicksTotal.value)
+  const hasPrev = computed(() => hasPrevSlide.value || clicks.value > 0)
 
   const currentTransition = computed(() => getCurrentTransition(navDirection.value, currentSlideRoute.value, prevRoute.value))
 
@@ -168,7 +173,7 @@ export function useNavBase(
     await go(
       next,
       lastClicks
-        ? isPrint.value
+        ? isPrintMode.value
           ? undefined
           : getSlide(next)?.meta.__clicksContext?.total ?? CLICKS_MAX
         : undefined,
@@ -190,14 +195,25 @@ export function useNavBase(
     const meta = getSlide(page)?.meta
     const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
+    const clicksQuery = clicks === 0 ? undefined : clicks.toString()
     if (pageChanged || clicksChanged) {
-      await router?.push({
-        path: getSlidePath(page, isPresenter.value),
-        query: {
-          ...router.currentRoute.value.query,
-          clicks: clicks === 0 ? undefined : clicks.toString(),
-        },
-      })
+      await router?.push(isPrintMode.value
+        ? {
+            path: '/print',
+            query: {
+              ...router.currentRoute.value.query,
+              page: page.toString(),
+              clicks: clicksQuery,
+            },
+          }
+        : {
+            path: getSlidePath(page, isPresenter.value),
+            query: {
+              ...router.currentRoute.value.query,
+              clicks: clicksQuery,
+            },
+          },
+      )
     }
   }
 
@@ -230,6 +246,8 @@ export function useNavBase(
     clicks,
     clicksStart,
     clicksTotal,
+    hasNextSlide,
+    hasPrevSlide,
     hasNext,
     hasPrev,
     tocTree,
@@ -280,7 +298,8 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     return new URLSearchParams(location.search)
   })
   const isPrintMode = computed(() => query.value.has('print'))
-  const isPrintWithClicks = computed(() => query.value.get('clicks') === 'true')
+  const isPrintWithClicks = computed(() => query.value.has('with-clicks'))
+  const isPrintPerSlide = computed(() => query.value.has('per-slide'))
   const slidesToPrint = computed(() => {
     const range = query.value.get('range')
     return range ? parseRangeString(slides.value.length, range).map(i => slides.value[i - 1]) : slides.value
@@ -290,9 +309,15 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   const isPresenter = computed(() => currentRoute.value.name === 'presenter')
   const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
   const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || query.value.get('password') === configs.remote))
-  const hasPrimarySlide = logicOr(isPlaying, isPresenter)
-
-  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
+  const hasPrimarySlide = logicOr(isPlaying, isPresenter, logicAnd(isPrintMode, isPrintPerSlide))
+
+  const currentSlideNo = computed(() => hasPrimarySlide.value
+    ? getSlide(
+      isPrintMode.value
+        ? currentRoute.value.query.page as string
+        : currentRoute.value.params.no as string,
+    )?.no ?? 1
+    : 1)
   const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])
 
   const queryClicksRaw = useRouteQuery<string>('clicks', '0')
@@ -354,6 +379,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     currentRoute,
     isPrintMode,
     isPrintWithClicks,
+    isPrintPerSlide,
     slidesToPrint,
     isEmbedded,
     isPlaying,
diff --git a/packages/client/internals/PrintSlides.vue b/packages/client/internals/PrintSlides.vue
index e986583521..48599497da 100644
--- a/packages/client/internals/PrintSlides.vue
+++ b/packages/client/internals/PrintSlides.vue
@@ -5,12 +5,13 @@ import { createFixedClicks } from '../composables/useClicks'
 import { CLICKS_MAX, injectionSlidevContext } from '../constants'
 import { configs } from '../env'
 
-const { slidesToPrint, isPrintWithClicks } = useNav()
+const globalNav = useNav()
+const { slidesToPrint, isPrintWithClicks, isPrintPerSlide, currentSlideNo, currentSlideRoute } = globalNav
 const clicks0 = computed(() =>
   slidesToPrint.value.map(route => createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)),
 )
 
-const ProvideSlidevContext = defineComponent(({ navValue: nav }, { slots }) => {
+const ProvideSlidevContext = defineComponent(({ scopedNav: nav }, { slots }) => {
   provide(injectionSlidevContext, reactive({
     nav,
     configs,
@@ -18,25 +19,23 @@ const ProvideSlidevContext = defineComponent(({ navValue: nav }, { slots }) => {
   }))
   return () => slots?.default?.({ nav, clicks0 })
 }, {
-  // Avoid warnings caused by eslint bug
-  props: ['navValue'],
+  props: ['scopedNav'],
 })
 </script>
 
 <template>
-  <template v-for="(route, i) of slidesToPrint" :key="route.no">
-    <ProvideSlidevContext v-slot="{ nav }" :nav-value="useFixedNav(route, clicks0[i])">
+  <template v-if="isPrintPerSlide">
+    <slot :key="currentSlideNo" :route="currentSlideRoute" :nav="globalNav" />
+  </template>
+  <template v-for="(route, i) of slidesToPrint" v-else :key="route.no">
+    <ProvideSlidevContext v-slot="{ nav }" :scoped-nav="useFixedNav(route, clicks0[i])">
       <slot :route :nav />
     </ProvideSlidevContext>
     <template v-if="isPrintWithClicks">
-      <!--
-        clicks0.total can be any number >=0 when rendering.
-        So total-clicksStart can be negative in intermediate states.
-      -->
       <ProvideSlidevContext
         v-for="click in Math.max(0, clicks0[i].total - clicks0[i].clicksStart)"
         :key="click" v-slot="{ nav }"
-        :nav-value="useFixedNav(route, createFixedClicks(route, click + clicks0[i].clicksStart))"
+        :scoped-nav="useFixedNav(route, createFixedClicks(route, click + clicks0[i].clicksStart))"
       >
         <slot :route :nav />
       </ProvideSlidevContext>
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index df060cef58..5b2ffc993f 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -30,6 +30,8 @@ html #page-root {
 }
 html * {
   -webkit-print-color-adjust: exact;
+  transition-delay: 0 !important;
+  transition-duration: 0 !important;
 }
 html {
   width: 100%;
diff --git a/packages/client/pages/print/default.vue b/packages/client/pages/print/default.vue
index cd49320309..6df56d27e3 100644
--- a/packages/client/pages/print/default.vue
+++ b/packages/client/pages/print/default.vue
@@ -15,10 +15,6 @@ useSlidePageSize()
 
 provideLocal(injectionSlideScale, computed(() => 1))
 
-function getElementId(no: number, clicks: number) {
-  return `${no.toString().padStart(3, '0')}-${(clicks + 1).toString().padStart(2, '0')}`
-}
-
 const DrawingPreview = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
   import('../../internals/DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
@@ -26,7 +22,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
 
 <template>
   <PrintSlides v-slot="{ nav, route }">
-    <div :id="getElementId(route.no, nav.clicks.value + 1)" class="print-slide-container">
+    <div class="print-slide-container">
       <GlobalBottom />
 
       <SlideWrapper
diff --git a/packages/client/pages/print/handout.vue b/packages/client/pages/print/handout.vue
index ec24bdf673..d9aa084de1 100644
--- a/packages/client/pages/print/handout.vue
+++ b/packages/client/pages/print/handout.vue
@@ -10,13 +10,13 @@ import NoteStatic from '../../internals/NoteStatic.vue'
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'
 
-const { isPrintWithClicks } = useNav()
+const { isPrintWithClicks, isPrintPerSlide } = useNav()
 const { info } = useSlideInfo(1)
 </script>
 
 <template>
   <div class="text-black w-min">
-    <div class="handout-page px-25 b b-black">
+    <div v-if="!isPrintPerSlide" class="handout-page px-25">
       <div class="text-5xl text-black mt-48">
         {{ configs.title }}
       </div>
@@ -26,7 +26,7 @@ const { info } = useSlideInfo(1)
       </div>
     </div>
     <PrintSlides v-slot="{ nav, route }">
-      <div class="handout-page px-8 py-[15mm] b b-black">
+      <div class="handout-page px-8 py-[15mm]">
         <div class="tabular-nums mb-1">
           <span v-if="isPrintWithClicks" class="op-70 text-sm">
             Page
@@ -40,11 +40,11 @@ const { info } = useSlideInfo(1)
           </span>
         </div>
 
-        <SlideContainer :width="728" class="light:children:(border b-dark) dark:text-white">
+        <SlideContainer :width="728" class="light:children:(b b-dark) dark:text-white !overflow-visible">
           <GlobalBottom />
 
           <SlideWrapper
-            :is="route.component!"
+            :is="route.component"
             :clicks-context="nav.clicksContext.value"
             :route="route"
           />
diff --git a/packages/client/setup/context-menu.ts b/packages/client/setup/context-menu.ts
index 48a63e36aa..4bde881a75 100644
--- a/packages/client/setup/context-menu.ts
+++ b/packages/client/setup/context-menu.ts
@@ -30,10 +30,10 @@ export default () => {
     nextSlide,
     prev,
     prevSlide,
+    hasNextSlide,
+    hasPrevSlide,
     hasNext,
     hasPrev,
-    currentPage,
-    total,
     isPresenter,
     enterPresenter,
     exitPresenter,
@@ -68,14 +68,14 @@ export default () => {
         icon: IconArrowUp,
         label: 'Previous Slide',
         action: prevSlide,
-        disabled: currentPage.value <= 1,
+        disabled: !hasPrevSlide.value,
       },
       {
         small: true,
         icon: IconArrowDown,
         label: 'Next Slide',
         action: nextSlide,
-        disabled: currentPage.value >= total.value,
+        disabled: !hasNextSlide.value,
       },
       'separator',
       {
diff --git a/packages/client/setup/root.ts b/packages/client/setup/root.ts
index 6903fac351..c250485a82 100644
--- a/packages/client/setup/root.ts
+++ b/packages/client/setup/root.ts
@@ -27,7 +27,7 @@ export default function setupRoot() {
   app.provide(injectionClicksContext, shallowRef(createFixedClicks()))
 
   // allows controls from postMessages
-  if (__DEV__) {
+  if (__SLIDEV_HAS_SERVER__) {
     // @ts-expect-error expose global
     window.__slidev__ = context
     window.addEventListener('message', ({ data }) => {
diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index e72a147277..45d738ecdc 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -352,10 +352,6 @@ cli.command(
       default: 'dist',
       describe: 'output dir',
     })
-    .option('base', {
-      type: 'string',
-      describe: 'output base',
-    })
     .option('download', {
       alias: 'd',
       type: 'boolean',
@@ -527,6 +523,7 @@ function exportOptions<T>(args: Argv<T>) {
     .option('format', {
       type: 'string',
       choices: ['pdf', 'png', 'md'],
+      default: 'pdf',
       describe: 'output format',
     })
     .option('template', {
@@ -535,16 +532,24 @@ function exportOptions<T>(args: Argv<T>) {
       default: 'default',
       describe: 'the export layout template',
     })
+    .option('base', {
+      type: 'string',
+      default: '/',
+      describe: 'output base',
+    })
     .option('timeout', {
       type: 'number',
+      default: 30000,
       describe: 'timeout for rendering the print page',
     })
     .option('wait', {
       type: 'number',
+      default: 0,
       describe: 'wait for the specified ms before exporting',
     })
     .option('range', {
       type: 'string',
+      default: 'all',
       describe: 'page ranges to export, for example "1,4-5,6"',
     })
     .option('dark', {
@@ -554,6 +559,7 @@ function exportOptions<T>(args: Argv<T>) {
     .option('with-clicks', {
       alias: 'c',
       type: 'boolean',
+      default: false,
       describe: 'export pages for every clicks',
     })
     .option('executable-path', {
@@ -562,14 +568,17 @@ function exportOptions<T>(args: Argv<T>) {
     })
     .option('with-toc', {
       type: 'boolean',
+      default: true,
       describe: 'export pages with outline',
     })
     .option('per-slide', {
       type: 'boolean',
+      default: false,
       describe: 'slide slides slide by slide. Works better with global components, but will break cross slide links and TOC in PDF',
     })
     .option('scale', {
       type: 'number',
+      default: 1,
       describe: 'scale factor for image export',
     })
 }
diff --git a/packages/slidev/node/commands/build.ts b/packages/slidev/node/commands/build.ts
index 3fffa8018a..950ccca8af 100644
--- a/packages/slidev/node/commands/build.ts
+++ b/packages/slidev/node/commands/build.ts
@@ -88,7 +88,6 @@ export async function build(
     server.listen(port)
     await exportSlides({
       port,
-      base: config.base,
       ...getExportOptions(args, options, outDir),
     })
     server.close()
diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts
index 54e4a33345..b5893663f5 100644
--- a/packages/slidev/node/commands/export.ts
+++ b/packages/slidev/node/commands/export.ts
@@ -4,7 +4,7 @@ import process from 'node:process'
 import fs from 'fs-extra'
 import { blue, cyan, dim, green, yellow } from 'kolorist'
 import { Presets, SingleBar } from 'cli-progress'
-import { clearUndefined } from '@antfu/utils'
+import { clearUndefined, ensureSuffix } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/core'
 import type { ExportArgs, ResolvedSlidevOptions, SlideInfo, TocItem } from '@slidev/types'
 import { outlinePdfFactory } from '@lillallol/outline-pdf'
@@ -14,56 +14,35 @@ import { resolve } from 'mlly'
 import { getRoots } from '../resolver'
 
 export interface ExportOptions {
-  total: number
-  range?: string
   slides: SlideInfo[]
-  port?: number
-  base?: string
-  format?: 'pdf' | 'png' | 'md'
-  template?: string
-  output?: string
-  timeout?: number
-  wait?: number
-  dark?: boolean
-  routerMode?: 'hash' | 'history'
-  width?: number
-  height?: number
-  withClicks?: boolean
-  executablePath?: string
-  withToc?: boolean
+  total: number
+  range: string
+  port: number
+  base: string
+  format: 'pdf' | 'png' | 'md'
+  template: string
+  output: string
+  timeout: number
+  wait: number
+  dark: boolean
+  routerMode: 'hash' | 'history'
+  withClicks: boolean
+  executablePath: string | undefined
+  withToc: boolean
   /**
    * Render slides slide by slide. Works better with global components, but will break cross slide links and TOC in PDF.
    * @default false
    */
-  perSlide?: boolean
-  scale?: number
-}
-
-function addToTree(tree: TocItem[], info: SlideInfo, slideIndexes: Record<number, number>, level = 1) {
-  const titleLevel = info.level
-  if (titleLevel && titleLevel > level && tree.length > 0) {
-    addToTree(tree[tree.length - 1].children, info, slideIndexes, level + 1)
-  }
-  else {
-    tree.push({
-      no: info.index,
-      children: [],
-      level,
-      path: String(slideIndexes[info.index + 1]),
-      hideInToc: Boolean(info.frontmatter?.hideInToc),
-      title: info.title,
-    })
-  }
+  perSlide: boolean
+  scale: number
 }
 
 function makeOutline(tree: TocItem[]): string {
-  return tree.map(({ title, path, level, children }) => {
-    const rootOutline = title ? `${path}|${'-'.repeat(level - 1)}|${title}` : null
-
+  return tree.map(({ title, no, level, children }) => {
+    const rootOutline = title ? `${no}|${'-'.repeat(level - 1)}|${title}` : null
     const childrenOutline = makeOutline(children)
-
-    return childrenOutline.length > 0 ? `${rootOutline}\n${childrenOutline}` : rootOutline
-  }).filter(outline => !!outline).join('\n')
+    return childrenOutline ? `${rootOutline}\n${childrenOutline}` : rootOutline
+  }).filter(Boolean).join('\n')
 }
 
 function createSlidevProgress(indeterminate = false) {
@@ -103,73 +82,63 @@ function createSlidevProgress(indeterminate = false) {
 }
 
 export async function exportSlides({
-  port = 18724,
-  total = 0,
+  port,
+  total,
   range,
-  format = 'pdf',
-  output = 'slides',
+  format,
+  output,
   slides,
-  base = '/',
-  timeout = 30000,
-  wait = 0,
-  dark = false,
-  routerMode = 'history',
-  width = 1920,
-  height = 1080,
-  withClicks = false,
-  executablePath = undefined,
-  withToc = false,
-  perSlide = false,
-  scale = 1,
+  base,
+  timeout,
+  wait,
+  dark,
+  routerMode,
+  withClicks,
+  executablePath,
+  withToc,
+  perSlide,
+  scale,
 }: ExportOptions) {
-  const pages: number[] = parseRangeString(total, range)
+  const pages = parseRangeString(total, range)
 
   const { chromium } = await importPlaywright()
   const browser = await chromium.launch({
     executablePath,
   })
   const context = await browser.newContext({
-    viewport: {
-      width,
-      // Calculate height for every slides to be in the viewport to trigger the rendering of iframes (twitter, youtube...)
-      height: perSlide ? height : height * pages.length,
-    },
     deviceScaleFactor: scale,
   })
   const page = await context.newPage()
+  page.setDefaultNavigationTimeout(timeout)
+  await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
+
   const progress = createSlidevProgress(!perSlide)
 
-  async function go(no: number | string, clicks?: string) {
+  async function gotoPrintPage() {
     let query = 'print'
     if (range)
       query += `&range=${range}`
-    if (clicks)
-      query += `&clicks=${clicks}`
-    else if (withClicks)
-      query += `&clicks`
-
-    const url = `http://localhost:${port}${base}${routerMode === 'hash' ? '#' : ''}${no}?${query}`
-    await page.goto(url, {
-      waitUntil: 'networkidle',
-      timeout,
-    })
-    await page.waitForLoadState('networkidle')
-    await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
-    const slide = no === 'print'
-      ? page.locator('body')
-      : page.locator(`#slideshow [data-slidev-no="${no}"]`)
-    await slide.waitFor()
+    if (withClicks)
+      query += `&with-clicks`
+    if (perSlide)
+      query += `&per-slide`
+
+    const url = `http://localhost:${port}${base}${routerMode === 'hash' ? '#' : ''}print?${query}`
+    await page.goto(url)
+    await waitForReady()
+  }
 
+  async function waitForReady() {
     // Wait for slides to be loaded
     {
-      const elements = slide.locator('.slidev-slide-loading')
+      const elements = page.locator('.slidev-slide-loading')
       const count = await elements.count()
       for (let index = 0; index < count; index++)
         await elements.nth(index).waitFor({ state: 'detached' })
     }
     // Check for "data-waitfor" attribute and wait for given element to be loaded
     {
-      const elements = slide.locator('[data-waitfor]')
+      const elements = page.locator('[data-waitfor]')
       const count = await elements.count()
       for (let index = 0; index < count; index++) {
         const element = elements.nth(index)
@@ -190,7 +159,7 @@ export async function exportSlides({
     }
     // Wait for Mermaid graphs to be rendered
     {
-      const container = slide.locator('#mermaid-rendering-container')
+      const container = page.locator('#mermaid-rendering-container')
       const count = await container.count()
       if (count > 0) {
         while (true) {
@@ -204,166 +173,94 @@ export async function exportSlides({
     }
     // Hide Monaco aria container
     {
-      const elements = slide.locator('.monaco-aria-container')
+      const elements = page.locator('.monaco-aria-container')
       const count = await elements.count()
       for (let index = 0; index < count; index++) {
         const element = elements.nth(index)
         await element.evaluate(node => node.style.display = 'none')
       }
     }
+    // TODO: make this configurable
+    page.waitForLoadState('networkidle')
     // Wait for the given time
     if (wait)
       await page.waitForTimeout(wait)
   }
 
-  async function getSlidesIndex() {
-    const clicksBySlide: Record<string, number> = {}
-    const slides = page.locator('.print-slide-container')
-    const count = await slides.count()
-    for (let i = 0; i < count; i++) {
-      const id = (await slides.nth(i).getAttribute('id')) || ''
-      const path = Number(id.split('-')[0])
-      clicksBySlide[path] = (clicksBySlide[path] || 0) + 1
-    }
-
-    const slideIndexes = Object.fromEntries(Object.entries(clicksBySlide)
-      .reduce<[string, number][]>((acc, [path, clicks], i) => {
-        acc.push([path, clicks + (acc[i - 1]?.[1] ?? 0)])
-        return acc
-      }, []))
-    return slideIndexes
-  }
-
-  function getClicksFromUrl(url: string) {
-    return url.match(/clicks=([1-9][0-9]*)/)?.[1]
-  }
-
-  async function genPageWithClicks(
-    fn: (i: number, clicks?: string) => Promise<any>,
-    i: number,
-    clicks?: string,
-  ) {
-    await fn(i, clicks)
-    if (withClicks) {
-      await page.keyboard.press('ArrowRight', { delay: 100 })
-      const _clicks = getClicksFromUrl(page.url())
-      if (_clicks && clicks !== _clicks)
-        await genPageWithClicks(fn, i, _clicks)
-    }
+  async function perSlideNext() {
+    const suffix = withClicks ? '' : 'Slide'
+    const hasNext = await page.evaluate(`__slidev__.nav.hasNext${suffix}`)
+    if (!hasNext)
+      return false
+    await page.evaluate(`__slidev__.nav.next${suffix}()`)
+    return true
   }
 
   async function genPagePdfPerSlide() {
-    const buffers: Buffer[] = []
-    const genPdfBuffer = async (i: number, clicks?: string) => {
-      await go(i, clicks)
-      const pdf = await page.pdf({
-        width,
-        height,
-        margin: {
-          left: 0,
-          top: 0,
-          right: 0,
-          bottom: 0,
-        },
-        pageRanges: '1',
-        printBackground: true,
-        preferCSSPageSize: true,
-      })
-      buffers.push(pdf)
-    }
-    let idx = 0
-    for (const i of pages) {
-      await genPageWithClicks(genPdfBuffer, i)
-      progress.update(++idx)
-    }
-
-    let mergedPdf = await PDFDocument.create({})
-    for (const pdfBytes of buffers) {
-      const pdf = await PDFDocument.load(pdfBytes)
-      const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
-      copiedPages.forEach((page) => {
-        mergedPdf.addPage(page)
-      })
+    progress.start(pages.length)
+    const mergedPdf = await PDFDocument.create()
+    while (true) {
+      const currentPage = await page.evaluate<number>(`__slidev__.nav.currentSlideNo`)
+      const indexInRange = pages.indexOf(currentPage)
+      if (indexInRange !== -1) {
+        await waitForReady()
+        const pdfBuffer = await page.pdf({
+          pageRanges: '1',
+          printBackground: true,
+          preferCSSPageSize: true,
+        })
+        const [pdfPage] = await mergedPdf.copyPages(await PDFDocument.load(pdfBuffer), [0])
+        mergedPdf.addPage(pdfPage)
+        progress.update(indexInRange + 1)
+      }
+      if (!await perSlideNext())
+        break
     }
-
-    // Edit generated PDF: add metadata and (optionally) TOC
-    addPdfMetadata(mergedPdf)
-
-    if (withToc)
-      mergedPdf = await addTocToPdf(mergedPdf)
-
-    const buffer = await mergedPdf.save()
-    await fs.writeFile(output, buffer)
+    return mergedPdf
   }
 
   async function genPagePdfOnePiece() {
-    await go('print')
-    await page.pdf({
-      path: output,
-      margin: {
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-      },
+    const pdfBuffer = await page.pdf({
       printBackground: true,
       preferCSSPageSize: true,
     })
+    return await PDFDocument.load(pdfBuffer)
+  }
 
-    // Edit generated PDF: add metadata and (optionally) TOC
-    let pdfData = await fs.readFile(output)
-    let pdf = await PDFDocument.load(pdfData)
-
-    addPdfMetadata(pdf)
-
+  async function savePdf(pdf: PDFDocument) {
     if (withToc)
       pdf = await addTocToPdf(pdf)
-
-    pdfData = Buffer.from(await pdf.save())
-    await fs.writeFile(output, pdfData)
+    addPdfMetadata(pdf)
+    await fs.writeFile(output, Buffer.from(await pdf.save()))
   }
 
   async function genPagePngOnePiece() {
-    await go('print')
-    await fs.emptyDir(output)
-    const slides = await page.locator('.print-slide-container')
-    const count = await slides.count()
-    for (let i = 0; i < count; i++) {
-      progress.update(i + 1)
-      let id = (await slides.nth(i).getAttribute('id')) || ''
-      id = withClicks ? id : id.split('-')[0]
-      const buffer = await slides.nth(i).screenshot()
-      await fs.writeFile(path.join(output, `${id}.png`), buffer)
-    }
+    // await go('print')
+    // await fs.emptyDir(output)
+    // const slides = page.locator('.print-slide-container')
+    // const count = await slides.count()
+    // for (let i = 0; i < count; i++) {
+    //   progress.update(i + 1)
+    //   let id = (await slides.nth(i).getAttribute('id')) || ''
+    //   id = withClicks ? id : id.split('-')[0]
+    //   const buffer = await slides.nth(i).screenshot()
+    //   await fs.writeFile(path.join(output, `${id}.png`), buffer)
+    // }
   }
 
   async function genPagePngPerSlide() {
-    const genScreenshot = async (i: number, clicks?: string) => {
-      await go(i, clicks)
-      await page.screenshot({
-        omitBackground: false,
-        path: path.join(
-          output,
-          `${i.toString().padStart(2, '0')}${clicks ? `-${clicks}` : ''}.png`,
-        ),
-      })
-    }
-    for (const i of pages)
-      await genPageWithClicks(genScreenshot, i)
-  }
-
-  function genPagePdf() {
-    if (!output.endsWith('.pdf'))
-      output = `${output}.pdf`
-    return perSlide
-      ? genPagePdfPerSlide()
-      : genPagePdfOnePiece()
-  }
-
-  function genPagePng() {
-    return perSlide
-      ? genPagePngPerSlide()
-      : genPagePngOnePiece()
+    // const genScreenshot = async (i: number, clicks?: string) => {
+    //   await go(i, clicks)
+    //   await page.screenshot({
+    //     omitBackground: false,
+    //     path: path.join(
+    //       output,
+    //       `${i.toString().padStart(2, '0')}${clicks ? `-${clicks}` : ''}.png`,
+    //     ),
+    //   })
+    // }
+    // for (const i of pages)
+    //   await genPageWithClicks(genScreenshot, i)
   }
 
   async function genPageMd(slides: SlideInfo[]) {
@@ -376,8 +273,6 @@ export async function exportSlides({
       return mdImg
     })
 
-    if (!output.endsWith('.md'))
-      output = `${output}.md`
     await fs.writeFile(output, mds.join(''))
   }
 
@@ -405,33 +300,25 @@ export async function exportSlides({
 
   async function addTocToPdf(pdf: PDFDocument): Promise<PDFDocument> {
     const outlinePdf = outlinePdfFactory(pdfLib)
-    const slideIndexes = await getSlidesIndex()
-
-    const tocTree = slides.filter(slide => slide.title)
-      .reduce((acc: TocItem[], slide) => {
-        addToTree(acc, slide, slideIndexes)
-        return acc
-      }, [])
-
+    const tocTree = await page.evaluate('__slidev__.nav.tocTree') as TocItem[]
     const outline = makeOutline(tocTree)
-
     return await outlinePdf({ outline, pdf })
   }
 
-  progress.start(pages.length)
-
+  await gotoPrintPage()
   if (format === 'pdf') {
-    await genPagePdf()
-  }
-  else if (format === 'png') {
-    await genPagePng()
-  }
-  else if (format === 'md') {
-    await genPagePng()
-    await genPageMd(slides)
+    await savePdf(
+      perSlide
+        ? await genPagePdfPerSlide()
+        : await genPagePdfOnePiece(),
+    )
   }
   else {
-    throw new Error(`Unsupported exporting format "${format}"`)
+    if (perSlide)
+      await genPagePngPerSlide()
+    else await genPagePngOnePiece()
+    if (format === 'md')
+      await genPageMd(slides)
   }
 
   progress.stop()
@@ -439,7 +326,7 @@ export async function exportSlides({
   return output
 }
 
-export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOptions, outDir?: string): Omit<ExportOptions, 'port' | 'base'> {
+export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOptions, outDir?: string): Omit<ExportOptions, 'port'> {
   const config = {
     ...options.data.config.export,
     ...args,
@@ -454,7 +341,8 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     entry,
     output,
     format,
-    template = 'default',
+    template,
+    base,
     timeout,
     wait,
     range,
@@ -466,26 +354,26 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     scale,
   } = config
   let outFilename = output || options.data.config.exportFilename || `${path.basename(entry, '.md')}-export${template === 'default' ? '' : `-${template}`}`
+  outFilename = ensureSuffix(`.${format}`, outFilename)
   if (outDir)
-    outFilename = path.join(outDir, outFilename)
+    outFilename = path.resolve(outDir, outFilename)
   return {
     output: outFilename,
     slides: options.data.slides,
     total: options.data.slides.length,
     range,
-    format: (format || 'pdf') as 'pdf' | 'png' | 'md',
+    format: format as 'pdf' | 'png' | 'md',
     template,
-    timeout: timeout ?? 30000,
-    wait: wait ?? 0,
-    dark: dark || options.data.config.colorSchema === 'dark',
+    base,
+    timeout,
+    wait,
+    dark: dark ?? options.data.config.colorSchema === 'dark',
     routerMode: options.data.config.routerMode,
-    width: options.data.config.canvasWidth,
-    height: Math.round(options.data.config.canvasWidth / options.data.config.aspectRatio),
-    withClicks: withClicks || false,
+    withClicks,
     executablePath,
-    withToc: withToc || false,
-    perSlide: template === 'per-slide' || perSlide || false,
-    scale: scale || 1,
+    withToc,
+    perSlide,
+    scale,
   }
 }
 
diff --git a/packages/types/src/cli.ts b/packages/types/src/cli.ts
index 9462d753ed..5eac9493eb 100644
--- a/packages/types/src/cli.ts
+++ b/packages/types/src/cli.ts
@@ -5,23 +5,23 @@ export interface CommonArgs {
 
 export interface ExportArgs extends CommonArgs {
   'output'?: string
-  'format'?: string
-  'template'?: string
-  'timeout'?: number
-  'wait'?: number
-  'range'?: string
+  'format': string
+  'template': string
+  'base': string
+  'timeout': number
+  'wait': number
+  'range': string
   'dark'?: boolean
-  'with-clicks'?: boolean
+  'with-clicks': boolean
   'executable-path'?: string
-  'with-toc'?: boolean
-  'per-slide'?: boolean
-  'scale'?: number
+  'with-toc': boolean
+  'per-slide': boolean
+  'scale': number
 }
 
 export interface BuildArgs extends ExportArgs {
   watch: boolean
   out: string
-  base?: string
   download?: boolean
   inspect: boolean
 }

From 152d6fd7b412d64270a5704455d353651e1a6720 Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sat, 20 Apr 2024 01:38:16 +0800
Subject: [PATCH 19/20] chore: update

---
 packages/client/composables/useNav.ts         |  2 +-
 .../client/composables/useSlidePageSize.ts    | 11 --------
 packages/client/internals/QuickOverview.vue   |  2 --
 packages/client/pages/overview.vue            |  2 --
 packages/client/pages/play.vue                |  2 --
 packages/client/pages/presenter.vue           |  2 --
 packages/client/pages/print/default.vue       | 10 +++----
 packages/slidev/node/commands/export.ts       | 28 ++++++++++---------
 8 files changed, 21 insertions(+), 38 deletions(-)
 delete mode 100644 packages/client/composables/useSlidePageSize.ts

diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 9d41d2a977..75ea302970 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/composables/useNav.ts
@@ -297,7 +297,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     router.currentRoute.value.query
     return new URLSearchParams(location.search)
   })
-  const isPrintMode = computed(() => query.value.has('print'))
+  const isPrintMode = computed(() => currentRoute.value.name === 'print')
   const isPrintWithClicks = computed(() => query.value.has('with-clicks'))
   const isPrintPerSlide = computed(() => query.value.has('per-slide'))
   const slidesToPrint = computed(() => {
diff --git a/packages/client/composables/useSlidePageSize.ts b/packages/client/composables/useSlidePageSize.ts
deleted file mode 100644
index 20e5189206..0000000000
--- a/packages/client/composables/useSlidePageSize.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useStyleTag } from '@vueuse/core'
-import { slideHeight, slideWidth } from '../env'
-
-export function useSlidePageSize() {
-  return useStyleTag(`
-    @page {
-      size: ${slideWidth.value}px ${slideHeight.value}px;
-      margin: 0;
-    }
-  `)
-}
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index 96e55025f0..c67990a376 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'
@@ -145,7 +144,6 @@ setTimeout(() => {
                 :is="route.component"
                 v-if="route?.component"
                 :clicks-context="createFixedClicks(route, CLICKS_MAX)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 6d3294ba60..358b1398d6 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -6,7 +6,6 @@ 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'
@@ -179,7 +178,6 @@ onMounted(() => {
               <SlideWrapper
                 :is="route.component!"
                 :clicks-context="getClicksContext(route)"
-                :class="getSlideClass(route)"
                 :route="route"
                 render-context="overview"
               />
diff --git a/packages/client/pages/play.vue b/packages/client/pages/play.vue
index 87fd42172b..007f19cc62 100644
--- a/packages/client/pages/play.vue
+++ b/packages/client/pages/play.vue
@@ -10,7 +10,6 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
-import { useSlidePageSize } from '../composables/useSlidePageSize'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 
 const { next, prev, isPrintMode, isPresenter } = useNav()
@@ -32,7 +31,6 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 registerShortcuts()
-useSlidePageSize()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index d379040820..b314d912b7 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -8,7 +8,6 @@ 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'
@@ -131,7 +130,6 @@ onMounted(() => {
             :is="nextFrame[0].component!"
             :key="nextFrame[0].no"
             :clicks-context="nextFrameClicksCtx"
-            :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />
diff --git a/packages/client/pages/print/default.vue b/packages/client/pages/print/default.vue
index 6df56d27e3..1cd272216d 100644
--- a/packages/client/pages/print/default.vue
+++ b/packages/client/pages/print/default.vue
@@ -2,8 +2,6 @@
 import { provideLocal } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
 import { injectionSlideScale } from '../../constants'
-import { useSlidePageSize } from '../../composables/useSlidePageSize'
-import { getSlideClass } from '../../utils'
 import { slideHeight, slideWidth } from '../../env'
 import PrintSlides from '../../internals/PrintSlides.vue'
 import SlideWrapper from '../../internals/SlideWrapper.vue'
@@ -11,8 +9,6 @@ import SlideWrapper from '../../internals/SlideWrapper.vue'
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'
 
-useSlidePageSize()
-
 provideLocal(injectionSlideScale, computed(() => 1))
 
 const DrawingPreview = shallowRef<any>()
@@ -28,7 +24,6 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
       <SlideWrapper
         :is="route.component!"
         :clicks-context="nav.clicksContext.value"
-        :class="getSlideClass(route)"
         :route="route"
       />
       <DrawingPreview
@@ -42,6 +37,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
 </template>
 
 <style scoped lang="postcss">
+@page {
+  size: v-bind('`${slideWidth}px`') v-bind('`${slideHeight}px`');
+  margin: 0;
+}
+
 .print-slide-container {
   @apply relative overflow-hidden break-before-page translate-0;
   width: v-bind('`${slideWidth}px`');
diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts
index b5893663f5..b31b8899ef 100644
--- a/packages/slidev/node/commands/export.ts
+++ b/packages/slidev/node/commands/export.ts
@@ -115,26 +115,28 @@ export async function exportSlides({
   const progress = createSlidevProgress(!perSlide)
 
   async function gotoPrintPage() {
-    let query = 'print'
-    if (range)
-      query += `&range=${range}`
-    if (withClicks)
-      query += `&with-clicks`
-    if (perSlide)
-      query += `&per-slide`
-
+    const query = [
+      range && `range=${range}`,
+      range && `page=${pages[0]}`,
+      withClicks && `with-clicks`,
+      perSlide && `per-slide`,
+    ].filter(Boolean).join('&')
     const url = `http://localhost:${port}${base}${routerMode === 'hash' ? '#' : ''}print?${query}`
     await page.goto(url)
     await waitForReady()
   }
 
   async function waitForReady() {
+    await page.locator('#page-root').waitFor({ state: 'visible' })
     // Wait for slides to be loaded
     {
-      const elements = page.locator('.slidev-slide-loading')
+      const elements = page.locator('.slidev-page')
       const count = await elements.count()
-      for (let index = 0; index < count; index++)
-        await elements.nth(index).waitFor({ state: 'detached' })
+      for (let index = 0; index < count; index++) {
+        const element = elements.nth(index)
+        await element.waitFor({ state: 'visible' })
+        await element.locator('.slidev-slide-loading').nth(0).waitFor({ state: 'detached' })
+      }
     }
     // Check for "data-waitfor" attribute and wait for given element to be loaded
     {
@@ -180,11 +182,11 @@ export async function exportSlides({
         await element.evaluate(node => node.style.display = 'none')
       }
     }
-    // TODO: make this configurable
-    page.waitForLoadState('networkidle')
     // Wait for the given time
     if (wait)
       await page.waitForTimeout(wait)
+    // TODO: make this configurable
+    await page.waitForLoadState('networkidle')
   }
 
   async function perSlideNext() {

From 408f0e3faef381391bc8052fc30712cf05984c0c Mon Sep 17 00:00:00 2001
From: _Kerman <kermanx@qq.com>
Date: Sat, 20 Apr 2024 19:34:34 +0800
Subject: [PATCH 20/20] wip

---
 demo/starter/package.json                     |   1 +
 packages/client/composables/useNav.ts         |  62 ++---
 .../client/composables/usePrintContext.ts     |  69 ++++++
 packages/client/composables/useTocTree.ts     |   2 +-
 packages/client/internals/CodeRunner.vue      |   1 -
 packages/client/internals/PrintSlides.vue     |  44 ----
 packages/client/internals/QuickOverview.vue   |   2 -
 packages/client/internals/SlideWrapper.vue    |  14 +-
 packages/client/internals/SlidesPrintShow.vue |  35 +++
 packages/client/internals/SlidesShow.vue      |   7 +-
 packages/client/logic/slides.ts               |   4 +-
 packages/client/pages/overview.vue            |   5 +-
 packages/client/pages/presenter.vue           |   1 -
 packages/client/pages/print.vue               |  11 +-
 packages/client/pages/print/default.vue       |  33 +--
 packages/client/pages/print/handout.vue       |  78 +++---
 packages/client/pages/print/notes.vue         |   2 +
 packages/client/setup/routes.ts               |  16 +-
 packages/slidev/node/cli.ts                   |   6 +-
 packages/slidev/node/commands/export.ts       | 224 +++++++-----------
 packages/types/src/cli.ts                     |   1 -
 packages/types/src/types.ts                   |   2 +-
 22 files changed, 281 insertions(+), 339 deletions(-)
 create mode 100644 packages/client/composables/usePrintContext.ts
 delete mode 100644 packages/client/internals/PrintSlides.vue
 create mode 100644 packages/client/internals/SlidesPrintShow.vue

diff --git a/demo/starter/package.json b/demo/starter/package.json
index 3b0070ba72..ccf022cc47 100644
--- a/demo/starter/package.json
+++ b/demo/starter/package.json
@@ -1,5 +1,6 @@
 {
   "name": "slidev-demo",
+  "type": "module",
   "private": true,
   "scripts": {
     "build": "slidev build",
diff --git a/packages/client/composables/useNav.ts b/packages/client/composables/useNav.ts
index 75ea302970..70c361a4f2 100644
--- a/packages/client/composables/useNav.ts
+++ b/packages/client/composables/useNav.ts
@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { createSharedComposable } from '@vueuse/core'
-import { logicAnd, logicOr } from '@vueuse/math'
+import { logicOr } from '@vueuse/math'
 import { clamp } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser'
 import { getCurrentTransition } from '../logic/transition'
@@ -75,7 +75,6 @@ export interface SlidevContextNavState {
   currentRoute: ComputedRef<RouteLocationNormalized>
   isPrintMode: ComputedRef<boolean>
   isPrintWithClicks: ComputedRef<boolean>
-  isPrintPerSlide: ComputedRef<boolean>
   slidesToPrint: ComputedRef<SlideRoute[]>
   isEmbedded: ComputedRef<boolean>
   isPlaying: ComputedRef<boolean>
@@ -106,7 +105,8 @@ export function useNavBase(
   const navDirection = ref(0)
   const clicksDirection = ref(0)
 
-  const currentPath = computed(() => getSlidePath(currentSlideRoute.value, isPresenter.value))
+  const pathPrefix = computed(() => isPresenter.value ? '/presenter' : isPrintMode.value ? '/print' : '')
+  const currentPath = computed(() => getSlidePath(currentSlideRoute.value, pathPrefix.value))
   const currentSlideNo = computed(() => currentSlideRoute.value.no)
   const currentLayout = computed(() => currentSlideRoute.value.meta?.layout || (currentSlideNo.value === 1 ? 'cover' : 'default'))
 
@@ -195,37 +195,26 @@ export function useNavBase(
     const meta = getSlide(page)?.meta
     const clicksStart = meta?.slide?.frontmatter.clicksStart ?? 0
     clicks = clamp(clicks, clicksStart, meta?.__clicksContext?.total ?? CLICKS_MAX)
-    const clicksQuery = clicks === 0 ? undefined : clicks.toString()
     if (pageChanged || clicksChanged) {
-      await router?.push(isPrintMode.value
-        ? {
-            path: '/print',
-            query: {
-              ...router.currentRoute.value.query,
-              page: page.toString(),
-              clicks: clicksQuery,
-            },
-          }
-        : {
-            path: getSlidePath(page, isPresenter.value),
-            query: {
-              ...router.currentRoute.value.query,
-              clicks: clicksQuery,
-            },
-          },
-      )
+      await router?.push({
+        path: getSlidePath(page, pathPrefix.value),
+        query: {
+          ...router.currentRoute.value.query,
+          clicks: clicks === 0 ? undefined : clicks.toString(),
+        },
+      })
     }
   }
 
   function enterPresenter() {
     router?.push({
-      path: getSlidePath(currentSlideNo.value, true),
+      path: getSlidePath(currentSlideNo.value, '/presenter'),
       query: { ...router.currentRoute.value.query },
     })
   }
   function exitPresenter() {
     router?.push({
-      path: getSlidePath(currentSlideNo.value, false),
+      path: getSlidePath(currentSlideNo.value, ''),
       query: { ...router.currentRoute.value.query },
     })
   }
@@ -299,7 +288,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   })
   const isPrintMode = computed(() => currentRoute.value.name === 'print')
   const isPrintWithClicks = computed(() => query.value.has('with-clicks'))
-  const isPrintPerSlide = computed(() => query.value.has('per-slide'))
   const slidesToPrint = computed(() => {
     const range = query.value.get('range')
     return range ? parseRangeString(slides.value.length, range).map(i => slides.value[i - 1]) : slides.value
@@ -309,15 +297,9 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   const isPresenter = computed(() => currentRoute.value.name === 'presenter')
   const isNotesViewer = computed(() => currentRoute.value.name === 'notes')
   const isPresenterAvailable = computed(() => !isPresenter.value && (!configs.remote || query.value.get('password') === configs.remote))
-  const hasPrimarySlide = logicOr(isPlaying, isPresenter, logicAnd(isPrintMode, isPrintPerSlide))
-
-  const currentSlideNo = computed(() => hasPrimarySlide.value
-    ? getSlide(
-      isPrintMode.value
-        ? currentRoute.value.query.page as string
-        : currentRoute.value.params.no as string,
-    )?.no ?? 1
-    : 1)
+  const hasPrimarySlide = logicOr(isPlaying, isPresenter, isPrintMode)
+
+  const currentSlideNo = computed(() => hasPrimarySlide.value ? getSlide(currentRoute.value.params.no as string)?.no ?? 1 : 1)
   const currentSlideRoute = computed(() => slides.value[currentSlideNo.value - 1])
 
   const queryClicksRaw = useRouteQuery<string>('clicks', '0')
@@ -379,7 +361,6 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     currentRoute,
     isPrintMode,
     isPrintWithClicks,
-    isPrintPerSlide,
     slidesToPrint,
     isEmbedded,
     isPlaying,
@@ -412,9 +393,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.goLast()
+        }
+        else {
+          // Redirect to the first slide
+          await nav.goFirst()
+        }
       }
     },
     { flush: 'pre', immediate: true },
diff --git a/packages/client/composables/usePrintContext.ts b/packages/client/composables/usePrintContext.ts
new file mode 100644
index 0000000000..808b30c355
--- /dev/null
+++ b/packages/client/composables/usePrintContext.ts
@@ -0,0 +1,69 @@
+import type { ComputedRef, Ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useNav } from './useNav'
+
+declare global {
+  interface Window {
+    __slidev_print__: {
+      printState: Ref<'before' | 'slides' | 'after'>
+      pageIndex: Ref<number>
+      subIndex: ComputedRef<number>
+      readonly slideNo: number
+      next: () => Promise<boolean>
+    }
+  }
+}
+
+export function usePrintContext(lengthBefore = 0, lengthAfter = 0) {
+  if (window.__slidev_print__)
+    return window.__slidev_print__
+
+  const { isPrintWithClicks, currentSlideNo, hasNextSlide, hasNext, nextSlide, next, goFirst } = useNav()
+
+  goFirst()
+  const pageIndex = ref(-1)
+  const printState = ref<'before' | 'slides' | 'after'>('before')
+  const endOfSlides = ref(-1)
+  const subIndex = computed(() =>
+    printState.value === 'before'
+      ? pageIndex.value
+      : printState.value === 'slides'
+        ? pageIndex.value - lengthBefore
+        : pageIndex.value - endOfSlides.value)
+
+  const context = {
+    printState,
+    pageIndex,
+    subIndex,
+    get slideNo() {
+      return printState.value === 'slides' ? currentSlideNo.value : -1
+    },
+    async next() {
+      pageIndex.value++
+      if (pageIndex.value === lengthBefore) {
+        // First slide
+        printState.value = 'slides'
+      }
+      else if (pageIndex.value > lengthBefore) {
+        if (isPrintWithClicks.value ? hasNext.value : hasNextSlide.value) {
+          // Next slide
+          await (isPrintWithClicks.value ? next() : nextSlide())
+        }
+        else {
+          if (endOfSlides.value === -1) {
+            // First page after slides
+            endOfSlides.value = pageIndex.value
+            printState.value = 'after'
+          }
+          if (pageIndex.value === endOfSlides.value + lengthAfter) {
+            // No more pages
+            return false
+          }
+        }
+      }
+      return true
+    },
+  }
+  window.__slidev_print__ = context
+  return context
+}
diff --git a/packages/client/composables/useTocTree.ts b/packages/client/composables/useTocTree.ts
index 125d68475e..bfcf30e1f9 100644
--- a/packages/client/composables/useTocTree.ts
+++ b/packages/client/composables/useTocTree.ts
@@ -13,7 +13,7 @@ function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
       no: route.no,
       children: [],
       level,
-      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no, false),
+      path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no),
       hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
       title: route.meta?.slide?.title,
     })
diff --git a/packages/client/internals/CodeRunner.vue b/packages/client/internals/CodeRunner.vue
index fb27295919..f1ed1ee126 100644
--- a/packages/client/internals/CodeRunner.vue
+++ b/packages/client/internals/CodeRunner.vue
@@ -84,7 +84,6 @@ else if (autorun)
     v-show="!hidden"
     class="relative flex flex-col rounded-b border-t border-main"
     :style="{ height: props.height }"
-    data-waitfor=".slidev-runner-output"
   >
     <div v-if="disabled" class="text-sm text-center opacity-50">
       Code is disabled in the "{{ $renderContext }}" mode
diff --git a/packages/client/internals/PrintSlides.vue b/packages/client/internals/PrintSlides.vue
deleted file mode 100644
index 48599497da..0000000000
--- a/packages/client/internals/PrintSlides.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { computed, defineComponent, provide, reactive } from 'vue'
-import { useFixedNav, useNav } from '../composables/useNav'
-import { createFixedClicks } from '../composables/useClicks'
-import { CLICKS_MAX, injectionSlidevContext } from '../constants'
-import { configs } from '../env'
-
-const globalNav = useNav()
-const { slidesToPrint, isPrintWithClicks, isPrintPerSlide, currentSlideNo, currentSlideRoute } = globalNav
-const clicks0 = computed(() =>
-  slidesToPrint.value.map(route => createFixedClicks(route, isPrintWithClicks.value ? 0 : CLICKS_MAX)),
-)
-
-const ProvideSlidevContext = defineComponent(({ scopedNav: nav }, { slots }) => {
-  provide(injectionSlidevContext, reactive({
-    nav,
-    configs,
-    themeConfigs: computed(() => configs.themeConfig),
-  }))
-  return () => slots?.default?.({ nav, clicks0 })
-}, {
-  props: ['scopedNav'],
-})
-</script>
-
-<template>
-  <template v-if="isPrintPerSlide">
-    <slot :key="currentSlideNo" :route="currentSlideRoute" :nav="globalNav" />
-  </template>
-  <template v-for="(route, i) of slidesToPrint" v-else :key="route.no">
-    <ProvideSlidevContext v-slot="{ nav }" :scoped-nav="useFixedNav(route, clicks0[i])">
-      <slot :route :nav />
-    </ProvideSlidevContext>
-    <template v-if="isPrintWithClicks">
-      <ProvideSlidevContext
-        v-for="click in Math.max(0, clicks0[i].total - clicks0[i].clicksStart)"
-        :key="click" v-slot="{ nav }"
-        :scoped-nav="useFixedNav(route, createFixedClicks(route, click + clicks0[i].clicksStart))"
-      >
-        <slot :route :nav />
-      </ProvideSlidevContext>
-    </template>
-  </template>
-</template>
diff --git a/packages/client/internals/QuickOverview.vue b/packages/client/internals/QuickOverview.vue
index c67990a376..364050c0c1 100644
--- a/packages/client/internals/QuickOverview.vue
+++ b/packages/client/internals/QuickOverview.vue
@@ -141,8 +141,6 @@ setTimeout(() => {
               class="pointer-events-none"
             >
               <SlideWrapper
-                :is="route.component"
-                v-if="route?.component"
                 :clicks-context="createFixedClicks(route, CLICKS_MAX)"
                 :route="route"
                 render-context="overview"
diff --git a/packages/client/internals/SlideWrapper.vue b/packages/client/internals/SlideWrapper.vue
index 8203a8af58..d448d09680 100644
--- a/packages/client/internals/SlideWrapper.vue
+++ b/packages/client/internals/SlideWrapper.vue
@@ -18,10 +18,6 @@ const props = defineProps({
     type: String as PropType<RenderContext>,
     default: 'slide',
   },
-  is: {
-    type: Function as PropType<() => any>,
-    required: true,
-  },
   route: {
     type: Object as PropType<SlideRoute>,
     required: true,
@@ -51,21 +47,19 @@ const style = computed<CSSProperties>(() => ({
   '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>
diff --git a/packages/client/internals/SlidesPrintShow.vue b/packages/client/internals/SlidesPrintShow.vue
new file mode 100644
index 0000000000..c0369f7a83
--- /dev/null
+++ b/packages/client/internals/SlidesPrintShow.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'
+import { recomputeAllPoppers } from 'floating-vue'
+import { useNav } from '../composables/useNav'
+import { createFixedClicks } from '../composables/useClicks'
+import { CLICKS_MAX } from '../constants'
+import SlideWrapper from './SlideWrapper.vue'
+
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
+const { isPrintWithClicks, slidesToPrint, currentSlideNo, currentSlideRoute, getPrimaryClicks } = useNav()
+
+watch(currentSlideRoute, () => {
+  setTimeout(recomputeAllPoppers, 100)
+}, { immediate: true })
+
+const DrawingPreview = shallowRef<any>()
+if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+  import('./DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
+</script>
+
+<template>
+  <GlobalBottom />
+  <template v-for="route of slidesToPrint" :key="route.no">
+    <SlideWrapper
+      v-if="route.no >= currentSlideNo && route.no < currentSlideNo + 2"
+      v-show="route === currentSlideRoute"
+      :clicks-context="isPrintWithClicks ? getPrimaryClicks(route) : createFixedClicks(route, CLICKS_MAX)"
+      :route="route"
+    />
+  </template>
+  <DrawingPreview v-if="DrawingPreview" :page="currentSlideNo" />
+  <GlobalTop />
+</template>
diff --git a/packages/client/internals/SlidesShow.vue b/packages/client/internals/SlidesShow.vue
index c9abccaa42..5222fc240d 100644
--- a/packages/client/internals/SlidesShow.vue
+++ b/packages/client/internals/SlidesShow.vue
@@ -4,9 +4,7 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { useNav } from '../composables/useNav'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../logic/hmr'
-import { createFixedClicks } from '../composables/useClicks'
 import { activeDragElement } from '../state'
-import { CLICKS_MAX } from '../constants'
 import SlideWrapper from './SlideWrapper.vue'
 import DragControl from './DragControl.vue'
 
@@ -23,8 +21,6 @@ const {
   getPrimaryClicks,
   nextRoute,
   slides,
-  isPrintMode,
-  isPrintWithClicks,
   clicksDirection,
 } = useNav()
 
@@ -70,11 +66,10 @@ function onAfterLeave() {
     @after-leave="onAfterLeave"
   >
     <SlideWrapper
-      :is="route.component!"
       v-for="route of loadedRoutes"
       v-show="route === currentSlideRoute"
       :key="route.no"
-      :clicks-context="isPrintMode && !isPrintWithClicks ? createFixedClicks(route, CLICKS_MAX) : getPrimaryClicks(route)"
+      :clicks-context="getPrimaryClicks(route)"
       :route="route"
       :render-context="renderContext"
     />
diff --git a/packages/client/logic/slides.ts b/packages/client/logic/slides.ts
index 7a50a13180..6e579e7d51 100644
--- a/packages/client/logic/slides.ts
+++ b/packages/client/logic/slides.ts
@@ -11,10 +11,10 @@ export function getSlide(no: number | string) {
 
 export function getSlidePath(
   route: SlideRoute | number | string,
-  presenter: boolean,
+  prefix = '',
 ) {
   if (typeof route === 'number' || typeof route === 'string')
     route = getSlide(route)!
   const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
-  return presenter ? `/presenter/${no}` : `/${no}`
+  return `${prefix}/${no}`
 }
diff --git a/packages/client/pages/overview.vue b/packages/client/pages/overview.vue
index 358b1398d6..ea75ece114 100644
--- a/packages/client/pages/overview.vue
+++ b/packages/client/pages/overview.vue
@@ -152,7 +152,7 @@ onMounted(() => {
           <IconButton
             class="mr--3 op0 group-hover:op80"
             title="Play in new tab"
-            @click="openSlideInNewTab(getSlidePath(route, false))"
+            @click="openSlideInNewTab(getSlidePath(route))"
           >
             <carbon:presentation-file />
           </IconButton>
@@ -168,7 +168,7 @@ onMounted(() => {
         <div class="flex flex-col gap-2 my5">
           <div
             class="border rounded border-main overflow-hidden bg-main select-none h-max"
-            @dblclick="openSlideInNewTab(getSlidePath(route, false))"
+            @dblclick="openSlideInNewTab(getSlidePath(route))"
           >
             <SlideContainer
               :key="route.no"
@@ -176,7 +176,6 @@ onMounted(() => {
               class="pointer-events-none important:[&_*]:select-none"
             >
               <SlideWrapper
-                :is="route.component!"
                 :clicks-context="getClicksContext(route)"
                 :route="route"
                 render-context="overview"
diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
index b314d912b7..ef0ff50479 100644
--- a/packages/client/pages/presenter.vue
+++ b/packages/client/pages/presenter.vue
@@ -127,7 +127,6 @@ onMounted(() => {
       <div class="relative grid-section next flex flex-col p-2 lg:p-4">
         <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
           <SlideWrapper
-            :is="nextFrame[0].component!"
             :key="nextFrame[0].no"
             :clicks-context="nextFrameClicksCtx"
             :route="nextFrame[0]"
diff --git a/packages/client/pages/print.vue b/packages/client/pages/print.vue
index 5b2ffc993f..bce2e2de3d 100644
--- a/packages/client/pages/print.vue
+++ b/packages/client/pages/print.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
-import { recomputeAllPoppers } from 'floating-vue'
-import { onMounted } from 'vue'
 import PrintTemplate from '#slidev/print-template'
 
 document.documentElement.classList.add('print')
-
-onMounted(() => {
-  setTimeout(recomputeAllPoppers, 300)
-})
 </script>
 
 <template>
@@ -30,8 +24,8 @@ html #page-root {
 }
 html * {
   -webkit-print-color-adjust: exact;
-  transition-delay: 0 !important;
-  transition-duration: 0 !important;
+  transition-delay: 0ms !important;
+  transition-duration: 50ms !important;
 }
 html {
   width: 100%;
@@ -44,6 +38,5 @@ html body {
   padding: 0;
   float: none;
   overflow: visible;
-  background-color: white;
 }
 </style>
diff --git a/packages/client/pages/print/default.vue b/packages/client/pages/print/default.vue
index 1cd272216d..1cc50da1db 100644
--- a/packages/client/pages/print/default.vue
+++ b/packages/client/pages/print/default.vue
@@ -1,39 +1,20 @@
 <script setup lang="ts">
 import { provideLocal } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
+import { computed } from 'vue'
 import { injectionSlideScale } from '../../constants'
 import { slideHeight, slideWidth } from '../../env'
-import PrintSlides from '../../internals/PrintSlides.vue'
-import SlideWrapper from '../../internals/SlideWrapper.vue'
+import { usePrintContext } from '../../composables/usePrintContext'
+import SlidesPrintShow from '../../internals/SlidesPrintShow.vue'
 
-import GlobalTop from '#slidev/global-components/top'
-import GlobalBottom from '#slidev/global-components/bottom'
+usePrintContext()
 
 provideLocal(injectionSlideScale, computed(() => 1))
-
-const DrawingPreview = shallowRef<any>()
-if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-  import('../../internals/DrawingPreview.vue').then(v => (DrawingPreview.value = v.default))
 </script>
 
 <template>
-  <PrintSlides v-slot="{ nav, route }">
-    <div class="print-slide-container">
-      <GlobalBottom />
-
-      <SlideWrapper
-        :is="route.component!"
-        :clicks-context="nav.clicksContext.value"
-        :route="route"
-      />
-      <DrawingPreview
-        v-if="DrawingPreview"
-        :page="route.no"
-      />
-
-      <GlobalTop />
-    </div>
-  </PrintSlides>
+  <div class="print-slide-container">
+    <SlidesPrintShow />
+  </div>
 </template>
 
 <style scoped lang="postcss">
diff --git a/packages/client/pages/print/handout.vue b/packages/client/pages/print/handout.vue
index d9aa084de1..164a18f824 100644
--- a/packages/client/pages/print/handout.vue
+++ b/packages/client/pages/print/handout.vue
@@ -1,22 +1,20 @@
 <script setup lang="ts">
 import { useNav } from '../../composables/useNav'
 import { useSlideInfo } from '../../composables/useSlideInfo'
+import { usePrintContext } from '../../composables/usePrintContext'
 import { configs } from '../../env'
-import PrintSlides from '../../internals/PrintSlides.vue'
 import SlideContainer from '../../internals/SlideContainer.vue'
-import SlideWrapper from '../../internals/SlideWrapper.vue'
 import NoteStatic from '../../internals/NoteStatic.vue'
+import SlidesPrintShow from '../../internals/SlidesPrintShow.vue'
 
-import GlobalTop from '#slidev/global-components/top'
-import GlobalBottom from '#slidev/global-components/bottom'
-
-const { isPrintWithClicks, isPrintPerSlide } = useNav()
+const { isPrintWithClicks, clicksContext, total, currentSlideNo } = useNav()
+const { printState } = usePrintContext(1)
 const { info } = useSlideInfo(1)
 </script>
 
 <template>
   <div class="text-black w-min">
-    <div v-if="!isPrintPerSlide" class="handout-page px-25">
+    <div v-if="printState === 'before'" class="handout-page px-25">
       <div class="text-5xl text-black mt-48">
         {{ configs.title }}
       </div>
@@ -25,49 +23,40 @@ const { info } = useSlideInfo(1)
         {{ info.frontmatter.author }}
       </div>
     </div>
-    <PrintSlides v-slot="{ nav, route }">
-      <div class="handout-page px-8 py-[15mm]">
-        <div class="tabular-nums mb-1">
-          <span v-if="isPrintWithClicks" class="op-70 text-sm">
-            Page
-          </span>
-          {{ route.no }} / {{ nav.total }}
-          <span v-if="isPrintWithClicks && nav.clicksContext.value.total" class="ml-4">
-            <span class="op-70 text-sm">
-              Clicks
-            </span>
-            {{ nav.clicksContext.value.current }} / {{ nav.clicksContext.value.total }}
+    <div v-show="printState === 'slides'" class="handout-page px-8 py-[15mm]">
+      <div class="tabular-nums mb-1">
+        <span v-if="isPrintWithClicks" class="op-70 text-sm">
+          Page
+        </span>
+        {{ currentSlideNo }} / {{ total }}
+        <span v-if="isPrintWithClicks && clicksContext.total" class="ml-4">
+          <span class="op-70 text-sm">
+            Clicks
           </span>
-        </div>
-
-        <SlideContainer :width="728" class="light:children:(b b-dark) dark:text-white !overflow-visible">
-          <GlobalBottom />
-
-          <SlideWrapper
-            :is="route.component"
-            :clicks-context="nav.clicksContext.value"
-            :route="route"
-          />
+          {{ clicksContext.current }} / {{ clicksContext.total }}
+        </span>
+      </div>
 
-          <GlobalTop />
-        </SlideContainer>
+      <SlideContainer :width="728" class="light:children:(b b-dark) dark:text-white !overflow-visible">
+        <SlidesPrintShow />
+      </SlideContainer>
 
-        <NoteStatic
-          class="mt-10 mx-2 text-lg"
-          :no="route.no"
-          :clicks-context="isPrintWithClicks ? nav.clicksContext.value : undefined"
-        />
+      <NoteStatic
+        :key="currentSlideNo"
+        class="mt-10 mx-2 text-lg"
+        :no="currentSlideNo"
+        :clicks-context="isPrintWithClicks ? clicksContext : undefined"
+      />
 
-        <div class="absolute bottom-4 left-6 right-6 px-2 pt-2 b-t b-gray">
-          <div v-if="configs.title" class="text-right text-sm">
-            {{ configs.title }}
-          </div>
-          <div class="text-right text-sm tabular-nums">
-            {{ route.no }} / {{ nav.total }}
-          </div>
+      <div class="absolute bottom-4 left-6 right-6 px-2 pt-2 b-t b-gray">
+        <div v-if="configs.title" class="text-right text-sm">
+          {{ configs.title }}
+        </div>
+        <div class="text-right text-sm tabular-nums">
+          {{ currentSlideNo }} / {{ total }}
         </div>
       </div>
-    </PrintSlides>
+    </div>
   </div>
 </template>
 
@@ -83,6 +72,7 @@ const { info } = useSlideInfo(1)
   overflow: hidden;
   break-before: page;
   position: relative;
+  background-color: white;
 }
 
 .slidev-note-click-mark.slidev-note-click-mark-past {
diff --git a/packages/client/pages/print/notes.vue b/packages/client/pages/print/notes.vue
index b4a0ed5ec3..06f7981c0c 100644
--- a/packages/client/pages/print/notes.vue
+++ b/packages/client/pages/print/notes.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useNav } from '../../composables/useNav'
+import { usePrintContext } from '../../composables/usePrintContext'
 import { configs } from '../../env'
 import NoteDisplay from '../../internals/NoteDisplay.vue'
 
 const { slidesToPrint, total } = useNav()
+usePrintContext()
 
 const slidesWithNote = computed(() => slidesToPrint.value
   .map(route => route.meta.slide)
diff --git a/packages/client/setup/routes.ts b/packages/client/setup/routes.ts
index 4e5c6990fc..fa38c78bdd 100644
--- a/packages/client/setup/routes.ts
+++ b/packages/client/setup/routes.ts
@@ -51,11 +51,17 @@ export default function setupRoutes() {
   }
 
   if (__SLIDEV_HAS_SERVER__) {
-    routes.push({
-      name: 'print',
-      path: '/print',
-      component: () => import('../pages/print.vue'),
-    })
+    routes.push(
+      {
+        name: 'print',
+        path: '/print/:no',
+        component: () => import('../pages/print.vue'),
+      },
+      {
+        path: '/print',
+        redirect: { path: '/print/1' },
+      },
+    )
   }
 
   routes.push(
diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index 45d738ecdc..02cf01dec9 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -544,7 +544,7 @@ function exportOptions<T>(args: Argv<T>) {
     })
     .option('wait', {
       type: 'number',
-      default: 0,
+      default: 100,
       describe: 'wait for the specified ms before exporting',
     })
     .option('range', {
@@ -573,8 +573,8 @@ function exportOptions<T>(args: Argv<T>) {
     })
     .option('per-slide', {
       type: 'boolean',
-      default: false,
-      describe: 'slide slides slide by slide. Works better with global components, but will break cross slide links and TOC in PDF',
+      deprecated: 'Always enabled now',
+      describe: 'print slides one by one',
     })
     .option('scale', {
       type: 'number',
diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts
index b31b8899ef..0c3ca150b5 100644
--- a/packages/slidev/node/commands/export.ts
+++ b/packages/slidev/node/commands/export.ts
@@ -1,6 +1,5 @@
 import path from 'node:path'
 import { Buffer } from 'node:buffer'
-import process from 'node:process'
 import fs from 'fs-extra'
 import { blue, cyan, dim, green, yellow } from 'kolorist'
 import { Presets, SingleBar } from 'cli-progress'
@@ -29,22 +28,9 @@ export interface ExportOptions {
   withClicks: boolean
   executablePath: string | undefined
   withToc: boolean
-  /**
-   * Render slides slide by slide. Works better with global components, but will break cross slide links and TOC in PDF.
-   * @default false
-   */
-  perSlide: boolean
   scale: number
 }
 
-function makeOutline(tree: TocItem[]): string {
-  return tree.map(({ title, no, level, children }) => {
-    const rootOutline = title ? `${no}|${'-'.repeat(level - 1)}|${title}` : null
-    const childrenOutline = makeOutline(children)
-    return childrenOutline ? `${rootOutline}\n${childrenOutline}` : rootOutline
-  }).filter(Boolean).join('\n')
-}
-
 function createSlidevProgress(indeterminate = false) {
   function getSpinner(n = 0) {
     return [cyan('●'), green('◆'), blue('■'), yellow('▲')][n % 4]
@@ -96,7 +82,6 @@ export async function exportSlides({
   withClicks,
   executablePath,
   withToc,
-  perSlide,
   scale,
 }: ExportOptions) {
   const pages = parseRangeString(total, range)
@@ -110,102 +95,84 @@ export async function exportSlides({
   })
   const page = await context.newPage()
   page.setDefaultNavigationTimeout(timeout)
+  page.setDefaultTimeout(timeout)
   await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
 
-  const progress = createSlidevProgress(!perSlide)
+  const progress = createSlidevProgress()
+  await gotoPrintPage()
+  if (format === 'pdf') {
+    await genPagePdfPerSlide()
+  }
+  else {
+    await genPagePngPerSlide()
+    if (format === 'md')
+      await genPageMd(slides)
+  }
+
+  progress.stop()
+  browser.close()
 
   async function gotoPrintPage() {
     const query = [
       range && `range=${range}`,
-      range && `page=${pages[0]}`,
       withClicks && `with-clicks`,
-      perSlide && `per-slide`,
     ].filter(Boolean).join('&')
     const url = `http://localhost:${port}${base}${routerMode === 'hash' ? '#' : ''}print?${query}`
     await page.goto(url)
     await waitForReady()
   }
 
-  async function waitForReady() {
-    await page.locator('#page-root').waitFor({ state: 'visible' })
-    // Wait for slides to be loaded
-    {
-      const elements = page.locator('.slidev-page')
-      const count = await elements.count()
-      for (let index = 0; index < count; index++) {
-        const element = elements.nth(index)
-        await element.waitFor({ state: 'visible' })
-        await element.locator('.slidev-slide-loading').nth(0).waitFor({ state: 'detached' })
+  async function waitForReady(slideNo = -1) {
+    try {
+      // Wait for the given time
+      if (wait)
+        await page.waitForTimeout(wait)
+      await page.locator('#page-root').waitFor({ state: 'visible' })
+      // Wait for slides to be loaded
+      if (slideNo >= 0) {
+        const element = page.locator(`.slidev-page-${slideNo}`).first()
+        await element.waitFor()
+        const loading = element.locator('.slidev-slide-loading')
+        if (await loading.count() > 0)
+          await element.locator('.slidev-slide-loading').nth(0).waitFor({ state: 'detached' })
       }
-    }
-    // Check for "data-waitfor" attribute and wait for given element to be loaded
-    {
-      const elements = page.locator('[data-waitfor]')
-      const count = await elements.count()
-      for (let index = 0; index < count; index++) {
-        const element = elements.nth(index)
-        const attribute = await element.getAttribute('data-waitfor')
-        if (attribute) {
-          await element.locator(attribute).waitFor({ state: 'visible' })
-            .catch((e) => {
-              console.error(e)
-              process.exitCode = 1
-            })
-        }
+      // Wait for frames to load
+      {
+        const frames = page.frames()
+        await Promise.all(frames.map(frame => frame.waitForLoadState()))
       }
-    }
-    // Wait for frames to load
-    {
-      const frames = page.frames()
-      await Promise.all(frames.map(frame => frame.waitForLoadState()))
-    }
-    // Wait for Mermaid graphs to be rendered
-    {
-      const container = page.locator('#mermaid-rendering-container')
-      const count = await container.count()
-      if (count > 0) {
-        while (true) {
-          const element = container.locator('div').first()
-          if (await element.count() === 0)
-            break
-          await element.waitFor({ state: 'detached' })
+      // Hide Monaco aria container
+      {
+        const elements = page.locator('.monaco-aria-container')
+        const count = await elements.count()
+        for (let index = 0; index < count; index++) {
+          const element = elements.nth(index)
+          await element.evaluate(node => node.style.display = 'none')
         }
-        await container.evaluate(node => node.style.display = 'none')
       }
+      // TODO: make this configurable
+      await page.waitForLoadState('load')
     }
-    // Hide Monaco aria container
-    {
-      const elements = page.locator('.monaco-aria-container')
-      const count = await elements.count()
-      for (let index = 0; index < count; index++) {
-        const element = elements.nth(index)
-        await element.evaluate(node => node.style.display = 'none')
-      }
+    catch (e) {
+      if (e instanceof Error && e.message.includes('Timeout'))
+        console.warn(`Page ${slideNo} did not reach load state. You may need to increase the timeout or use the --wait option.`)
+      else
+        throw e
     }
-    // Wait for the given time
-    if (wait)
-      await page.waitForTimeout(wait)
-    // TODO: make this configurable
-    await page.waitForLoadState('networkidle')
-  }
-
-  async function perSlideNext() {
-    const suffix = withClicks ? '' : 'Slide'
-    const hasNext = await page.evaluate(`__slidev__.nav.hasNext${suffix}`)
-    if (!hasNext)
-      return false
-    await page.evaluate(`__slidev__.nav.next${suffix}()`)
-    return true
   }
 
   async function genPagePdfPerSlide() {
     progress.start(pages.length)
     const mergedPdf = await PDFDocument.create()
-    while (true) {
-      const currentPage = await page.evaluate<number>(`__slidev__.nav.currentSlideNo`)
-      const indexInRange = pages.indexOf(currentPage)
-      if (indexInRange !== -1) {
-        await waitForReady()
+    const tocMap: Record<number, number> = {}
+    let index = 0
+    while (await page.evaluate(`__slidev_print__.next()`)) {
+      const currentSlideNo = await page.evaluate<number>(`__slidev_print__.slideNo`)
+      const indexInRange = pages.indexOf(currentSlideNo)
+      if (currentSlideNo < 0 || indexInRange !== -1) {
+        progress.update(indexInRange + 1)
+        tocMap[currentSlideNo] ??= index + 1
+        await waitForReady(currentSlideNo)
         const pdfBuffer = await page.pdf({
           pageRanges: '1',
           printBackground: true,
@@ -213,42 +180,27 @@ export async function exportSlides({
         })
         const [pdfPage] = await mergedPdf.copyPages(await PDFDocument.load(pdfBuffer), [0])
         mergedPdf.addPage(pdfPage)
-        progress.update(indexInRange + 1)
+        index++
       }
-      if (!await perSlideNext())
-        break
     }
-    return mergedPdf
-  }
-
-  async function genPagePdfOnePiece() {
-    const pdfBuffer = await page.pdf({
-      printBackground: true,
-      preferCSSPageSize: true,
-    })
-    return await PDFDocument.load(pdfBuffer)
+    const outputPdf = withToc ? await addTocToPdf(mergedPdf, tocMap) : mergedPdf
+    addPdfMetadata(outputPdf)
+    await fs.writeFile(output, Buffer.from(await outputPdf.save()))
   }
 
-  async function savePdf(pdf: PDFDocument) {
-    if (withToc)
-      pdf = await addTocToPdf(pdf)
-    addPdfMetadata(pdf)
-    await fs.writeFile(output, Buffer.from(await pdf.save()))
-  }
-
-  async function genPagePngOnePiece() {
-    // await go('print')
-    // await fs.emptyDir(output)
-    // const slides = page.locator('.print-slide-container')
-    // const count = await slides.count()
-    // for (let i = 0; i < count; i++) {
-    //   progress.update(i + 1)
-    //   let id = (await slides.nth(i).getAttribute('id')) || ''
-    //   id = withClicks ? id : id.split('-')[0]
-    //   const buffer = await slides.nth(i).screenshot()
-    //   await fs.writeFile(path.join(output, `${id}.png`), buffer)
-    // }
-  }
+  // async function genPagePngOnePiece() {
+  //   // await go('print')
+  //   // await fs.emptyDir(output)
+  //   // const slides = page.locator('.print-slide-container')
+  //   // const count = await slides.count()
+  //   // for (let i = 0; i < count; i++) {
+  //   //   progress.update(i + 1)
+  //   //   let id = (await slides.nth(i).getAttribute('id')) || ''
+  //   //   id = withClicks ? id : id.split('-')[0]
+  //   //   const buffer = await slides.nth(i).screenshot()
+  //   //   await fs.writeFile(path.join(output, `${id}.png`), buffer)
+  //   // }
+  // }
 
   async function genPagePngPerSlide() {
     // const genScreenshot = async (i: number, clicks?: string) => {
@@ -300,31 +252,20 @@ export async function exportSlides({
     }
   }
 
-  async function addTocToPdf(pdf: PDFDocument): Promise<PDFDocument> {
+  async function addTocToPdf(pdf: PDFDocument, tocMap: Record<number, number>): Promise<PDFDocument> {
+    function makeOutline(tree: TocItem[]): string {
+      return tree.map(({ title, no, level, children }) => {
+        const rootOutline = title ? `${tocMap[no]}|${'-'.repeat(level - 1)}|${title}` : null
+        const childrenOutline = makeOutline(children)
+        return childrenOutline ? `${rootOutline}\n${childrenOutline}` : rootOutline
+      }).filter(Boolean).join('\n')
+    }
+
     const outlinePdf = outlinePdfFactory(pdfLib)
-    const tocTree = await page.evaluate('__slidev__.nav.tocTree') as TocItem[]
+    const tocTree = await page.evaluate<TocItem[]>('__slidev__.nav.tocTree')
     const outline = makeOutline(tocTree)
     return await outlinePdf({ outline, pdf })
   }
-
-  await gotoPrintPage()
-  if (format === 'pdf') {
-    await savePdf(
-      perSlide
-        ? await genPagePdfPerSlide()
-        : await genPagePdfOnePiece(),
-    )
-  }
-  else {
-    if (perSlide)
-      await genPagePngPerSlide()
-    else await genPagePngOnePiece()
-    if (format === 'md')
-      await genPageMd(slides)
-  }
-
-  progress.stop()
-  browser.close()
   return output
 }
 
@@ -336,7 +277,6 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
       withClicks: args['with-clicks'],
       executablePath: args['executable-path'],
       withToc: args['with-toc'],
-      perSlide: args['per-slide'],
     }),
   }
   const {
@@ -352,7 +292,6 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     withClicks,
     executablePath,
     withToc,
-    perSlide,
     scale,
   } = config
   let outFilename = output || options.data.config.exportFilename || `${path.basename(entry, '.md')}-export${template === 'default' ? '' : `-${template}`}`
@@ -374,7 +313,6 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     withClicks,
     executablePath,
     withToc,
-    perSlide,
     scale,
   }
 }
diff --git a/packages/types/src/cli.ts b/packages/types/src/cli.ts
index 5eac9493eb..2252e39aa3 100644
--- a/packages/types/src/cli.ts
+++ b/packages/types/src/cli.ts
@@ -15,7 +15,6 @@ export interface ExportArgs extends CommonArgs {
   'with-clicks': boolean
   'executable-path'?: string
   'with-toc': boolean
-  'per-slide': boolean
   'scale': number
 }
 
diff --git a/packages/types/src/types.ts b/packages/types/src/types.ts
index ff65a3db25..531c42ca9a 100644
--- a/packages/types/src/types.ts
+++ b/packages/types/src/types.ts
@@ -114,7 +114,7 @@ export type RenderContext = 'none' | 'slide' | 'overview' | 'presenter' | 'previ
 export interface SlideRoute {
   no: number
   meta: RouteMeta & Required<Pick<RouteMeta, 'slide'>>
-  component: () => Promise<RouteComponent>
+  component: () => Promise<{ default: RouteComponent }>
 }
 
 export type LoadedSnippets = Record<string, string>