@slidev/client 0.49.28 → 0.50.0-beta.1

package/internals/DrawingControls.vue

@@ -1,139 +1,140 @@
-<script setup lang="ts">
-import { Menu } from 'floating-vue'
-import { useDrawings } from '../composables/useDrawings'
-import VerticalDivider from './VerticalDivider.vue'
-import Draggable from './Draggable.vue'
-import IconButton from './IconButton.vue'
-
-const {
-  brush,
-  canClear,
-  canRedo,
-  canUndo,
-  clear,
-  drauu,
-  drawingEnabled,
-  drawingMode,
-  drawingPinned,
-  brushColors,
-} = useDrawings()
-
-function undo() {
-  drauu.undo()
-}
-function redo() {
-  drauu.redo()
-}
-
-let lastDrawingMode: typeof drawingMode.value = 'stylus'
-function setDrawingMode(mode: typeof drawingMode.value) {
-  drawingMode.value = mode
-  drawingEnabled.value = true
-  if (mode !== 'eraseLine')
-    lastDrawingMode = mode
-}
-function setBrushColor(color: typeof brush.color) {
-  brush.color = color
-  drawingEnabled.value = true
-  drawingMode.value = lastDrawingMode
-}
-</script>
-
-<template>
-  <Draggable
-    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
-    :class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
-    storage-key="slidev-drawing-pos"
-    :initial-x="10"
-    :initial-y="10"
-  >
-    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <carbon:pen />
-    </IconButton>
-    <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
-      <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
-        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
-      </svg>
-    </IconButton>
-    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <carbon:arrow-up-right />
-    </IconButton>
-    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <carbon:radio-button />
-    </IconButton>
-    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <carbon:checkbox />
-    </IconButton>
-    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <carbon:erase />
-    </IconButton>
-
-    <VerticalDivider />
-
-    <Menu>
-      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
-        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
-          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
-          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-        </svg>
-      </IconButton>
-      <template #popper>
-        <div class="flex bg-main p-2">
-          <div class="inline-block w-7 text-center">
-            {{ brush.size }}
-          </div>
-          <div class="pt-.5">
-            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
-          </div>
-        </div>
-      </template>
-    </Menu>
-    <IconButton
-      v-for="color of brushColors"
-      :key="color"
-      title="Set brush color"
-      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
-      @click="setBrushColor(color)"
-    >
-      <div
-        class="w-6 h-6 transition-all transform border"
-        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
-        :style="drawingEnabled ? { background: color } : { borderColor: color }"
-      />
-    </IconButton>
-
-    <VerticalDivider />
-
-    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
-      <carbon:undo />
-    </IconButton>
-    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
-      <carbon:redo />
-    </IconButton>
-    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
-      <carbon:trash-can />
-    </IconButton>
-
-    <VerticalDivider />
-    <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
-      <carbon:pin v-show="!drawingPinned" />
-    </IconButton>
-    <IconButton
-      v-if="drawingEnabled"
-      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
-      :class="{ shallow: !drawingEnabled }"
-      @click="drawingEnabled = !drawingEnabled"
-    >
-      <carbon:error v-show="drawingPinned" />
-      <carbon:close-outline v-show="!drawingPinned" />
-    </IconButton>
-  </Draggable>
-</template>
-
-<style>
-.v-popper--theme-menu .v-popper__arrow-inner {
-  --uno: border-main;
-}
-</style>
+<script setup lang="ts">
+import { Menu } from 'floating-vue'
+import { useDrawings } from '../composables/useDrawings'
+import Draggable from './Draggable.vue'
+import IconButton from './IconButton.vue'
+import VerticalDivider from './VerticalDivider.vue'
+
+const {
+  brush,
+  canClear,
+  canRedo,
+  canUndo,
+  clear,
+  drauu,
+  drawingEnabled,
+  drawingMode,
+  drawingPinned,
+  brushColors,
+} = useDrawings()
+
+function undo() {
+  drauu.undo()
+}
+function redo() {
+  drauu.redo()
+}
+
+let lastDrawingMode: typeof drawingMode.value = 'stylus'
+function setDrawingMode(mode: typeof drawingMode.value) {
+  drawingMode.value = mode
+  drawingEnabled.value = true
+  if (mode !== 'eraseLine')
+    lastDrawingMode = mode
+}
+function setBrushColor(color: typeof brush.color) {
+  brush.color = color
+  drawingEnabled.value = true
+  drawingMode.value = lastDrawingMode
+}
+</script>
+
+<template>
+  <Draggable
+    v-if="drawingEnabled || drawingPinned"
+    class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
+    :class="!drawingEnabled && drawingPinned ? 'opacity-40 hover:opacity-90' : ''"
+    storage-key="slidev-drawing-pos"
+    :initial-x="10"
+    :initial-y="10"
+  >
+    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
+      <carbon:pen />
+    </IconButton>
+    <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
+      <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+        <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
+      </svg>
+    </IconButton>
+    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
+      <carbon:arrow-up-right />
+    </IconButton>
+    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
+      <carbon:radio-button />
+    </IconButton>
+    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
+      <carbon:checkbox />
+    </IconButton>
+    <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
+      <carbon:erase />
+    </IconButton>
+
+    <VerticalDivider />
+
+    <Menu>
+      <IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
+        <svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
+          <line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
+          <line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+          <line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </IconButton>
+      <template #popper>
+        <div class="flex bg-main p-2">
+          <div class="inline-block w-7 text-center">
+            {{ brush.size }}
+          </div>
+          <div class="pt-.5">
+            <input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
+          </div>
+        </div>
+      </template>
+    </Menu>
+    <IconButton
+      v-for="color of brushColors"
+      :key="color"
+      title="Set brush color"
+      :class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
+      @click="setBrushColor(color)"
+    >
+      <div
+        class="w-6 h-6 transition-all transform border"
+        :class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
+        :style="drawingEnabled ? { background: color } : { borderColor: color }"
+      />
+    </IconButton>
+
+    <VerticalDivider />
+
+    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
+      <carbon:undo />
+    </IconButton>
+    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
+      <carbon:redo />
+    </IconButton>
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
+      <carbon:trash-can />
+    </IconButton>
+
+    <VerticalDivider />
+    <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
+      <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
+      <carbon:pin v-show="!drawingPinned" />
+    </IconButton>
+    <IconButton
+      v-if="drawingEnabled"
+      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
+      :class="{ shallow: !drawingEnabled }"
+      @click="drawingEnabled = !drawingEnabled"
+    >
+      <carbon:error v-show="drawingPinned" />
+      <carbon:close-outline v-show="!drawingPinned" />
+    </IconButton>
+  </Draggable>
+</template>
+
+<style>
+.v-popper--theme-menu .v-popper__arrow-inner {
+  --uno: border-main;
+}
+</style>

package/internals/DrawingLayer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useSlideContext } from '../context'
 import { useDrawings } from '../composables/useDrawings'
+import { useSlideContext } from '../context'
 
 const { drauu, drawingEnabled, loadCanvas } = useDrawings()
 

package/internals/Goto.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import TitleRenderer from '#slidev/title-renderer'
 import Fuse from 'fuse.js'
-import { activeElement, showGotoDialog } from '../state'
+import { computed, ref, watch } from 'vue'
 import { useNav } from '../composables/useNav'
-import TitleRenderer from '#slidev/title-renderer'
+import { activeElement, showGotoDialog } from '../state'
 
 const container = ref<HTMLDivElement>()
 const input = ref<HTMLInputElement>()

package/internals/NavControls.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
+import CustomNavControls from '#slidev/custom-nav-controls'
 import { computed, ref, shallowRef } from 'vue'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
+import { configs } from '../env'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { downloadPDF } from '../utils'
 import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
-import { configs } from '../env'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
-import Settings from './Settings.vue'
-import MenuButton from './MenuButton.vue'
-import VerticalDivider from './VerticalDivider.vue'
+import { downloadPDF } from '../utils'
 import IconButton from './IconButton.vue'
+import MenuButton from './MenuButton.vue'
+import Settings from './Settings.vue'
 
-import CustomNavControls from '#slidev/custom-nav-controls'
+import VerticalDivider from './VerticalDivider.vue'
 
 const props = defineProps({
   persist: {

package/internals/NoteDisplay.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import type { ClicksContext } from '@slidev/types'
+import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import { CLICKS_MAX } from '../constants'
 
 const props = withDefaults(

package/internals/NoteEditable.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { ClicksContext } from '@slidev/types'
 import type { PropType } from 'vue'
-import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
-import type { ClicksContext } from '@slidev/types'
+import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import NoteDisplay from './NoteDisplay.vue'
 

package/internals/PrintContainer.vue

@@ -1,10 +1,10 @@
 <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 { computed } from 'vue'
 import { useNav } from '../composables/useNav'
+import { injectionSlideScale } from '../constants'
+import { configs, slideAspect, slideWidth } from '../env'
 import PrintSlide from './PrintSlide.vue'
 
 const props = defineProps<{

package/internals/PrintSlide.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SlideRoute } from '@slidev/types'
-import { useFixedNav, useNav } from '../composables/useNav'
 import { createFixedClicks } from '../composables/useClicks'
+import { useFixedNav, useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
 import PrintSlideClick from './PrintSlideClick.vue'
 

package/internals/PrintSlideClick.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, reactive, shallowRef } from 'vue'
+import type { SlidevContextNav } from '../composables/useNav'
+import { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
+import { computed, reactive, shallowRef } from 'vue'
 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 { GlobalBottom, GlobalTop } from '#slidev/global-layers'
 
 const { nav } = defineProps<{
   nav: SlidevContextNav

package/internals/QuickOverview.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { useEventListener } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
-import { breakpoints, showOverview, windowSize } from '../state'
-import { currentOverviewPage, overviewRowCount } from '../logic/overview'
 import { createFixedClicks } from '../composables/useClicks'
-import { CLICKS_MAX } from '../constants'
 import { useNav } from '../composables/useNav'
-import { pathPrefix } from '../env'
-import SlideContainer from './SlideContainer.vue'
-import SlideWrapper from './SlideWrapper.vue'
+import { CLICKS_MAX } from '../constants'
+import { configs, pathPrefix } from '../env'
+import { currentOverviewPage, overviewRowCount } from '../logic/overview'
+import { breakpoints, showOverview, windowSize } from '../state'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
+import SlideContainer from './SlideContainer.vue'
+import SlideWrapper from './SlideWrapper.vue'
 
 const { currentSlideNo, go: goSlide, slides } = useNav()
 
@@ -109,7 +109,7 @@ watchEffect(() => {
   >
     <div
       v-if="showOverview"
-      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px"
+      class="fixed left-0 right-0 top-0 h-[calc(var(--vh,1vh)*100)] z-20 bg-main !bg-opacity-75 p-16 py-20 overflow-y-auto backdrop-blur-5px select-none"
       @click="close"
     >
       <div
@@ -128,6 +128,8 @@ watchEffect(() => {
           >
             <SlideContainer
               :key="route.no"
+              :no="route.no"
+              :use-snapshot="configs.overviewSnapshots"
               :width="cardWidth"
               class="pointer-events-none"
             >

package/internals/RecordingControls.vue

@@ -4,8 +4,8 @@ import { onMounted, watch } from 'vue'
 import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
-import MenuButton from './MenuButton.vue'
 import IconButton from './IconButton.vue'
+import MenuButton from './MenuButton.vue'
 
 const {
   recording,

package/internals/RecordingDialog.vue

@@ -2,8 +2,8 @@
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
 import { getFilename, mimeType, recordCamera, recorder, recordingName } from '../logic/recording'
-import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'
+import Modal from './Modal.vue'
 
 const props = defineProps({
   modelValue: {

package/internals/SelectList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
 import type { PropType } from 'vue'
 import type { SelectionItem } from './types'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps({
   modelValue: {

package/internals/Settings.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { SelectionItem } from './types'
 import { useWakeLock } from '@vueuse/core'
 import { slideScale, wakeLockEnabled } from '../state'
 import SelectList from './SelectList.vue'
-import type { SelectionItem } from './types'
 
 const scaleItems: SelectionItem<number>[] = [
   {

package/internals/ShikiEditor.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
 import { getHighlighter } from '#slidev/shiki'
+import { ref, shallowRef } from 'vue'
 
 const props = defineProps<{
   placeholder?: string

package/internals/SideEditor.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { throttledWatch, useEventListener } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import IconButton from './IconButton.vue'
 import ShikiEditor from './ShikiEditor.vue'
 
@@ -17,18 +17,16 @@ const tab = ref<'content' | 'note'>('content')
 const content = ref('')
 const note = ref('')
 const dirty = ref(false)
-const frontmatter = ref<any>({})
 
 const { info, update } = useDynamicSlideInfo(currentSlideNo)
 
 watch(
   info,
   (v) => {
-    frontmatter.value = v?.frontmatter || {}
-
     if (!isInputting.value) {
       note.value = (v?.note || '').trim()
-      content.value = (v?.content || '').trim()
+      const frontmatterPart = v?.frontmatterRaw?.trim() ? `---\n${v.frontmatterRaw.trim()}\n---\n\n` : ''
+      content.value = frontmatterPart + (v?.content || '').trim()
       dirty.value = false
     }
   },
@@ -37,10 +35,17 @@ watch(
 
 async function save() {
   dirty.value = false
+
+  let frontmatterRaw: string | undefined
+  const contentOnly = content.value.trim().replace(/^---\n([\s\S]*?)\n---\n/, (_, f) => {
+    frontmatterRaw = f
+    return ''
+  })
+
   await update({
     note: note.value || undefined,
-    content: content.value,
-    // frontmatter: frontmatter.value,
+    content: contentOnly,
+    frontmatterRaw,
   })
 }
 

package/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useNav } from '../composables/useNav'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect, slideHeight, slideWidth } from '../env'
-import { useNav } from '../composables/useNav'
+import { snapshotManager } from '../logic/snapshot'
 import { slideScale } from '../state'
 
 const props = defineProps({
@@ -17,6 +18,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  no: {
+    type: Number,
+    required: false,
+  },
+  useSnapshot: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { isPrintMode } = useNav()
@@ -54,15 +63,35 @@ if (props.isMain)
 
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
+
+const snapshot = computed(() => {
+  if (!props.useSnapshot || props.no == null)
+    return undefined
+  return snapshotManager.getSnapshot(props.no)
+})
+
+onMounted(() => {
+  if (container.value && props.useSnapshot && props.no != null) {
+    snapshotManager.captureSnapshot(props.no, container.value)
+  }
+})
 </script>
 
 <template>
-  <div :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
+  <div v-if="!snapshot" :id="isMain ? 'slide-container' : undefined" ref="container" class="slidev-slide-container" :style="containerStyle">
     <div :id="isMain ? 'slide-content' : undefined" ref="slideElement" class="slidev-slide-content" :style="contentStyle">
       <slot />
     </div>
     <slot name="controls" />
   </div>
+  <!-- Image preview -->
+  <template v-else>
+    <img
+      :src="snapshot"
+      class="w-full object-cover"
+      :style="containerStyle"
+    >
+  </template>
 </template>
 
 <style scoped lang="postcss">

package/internals/SlideWrapper.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, toRef } from 'vue'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
 import type { CSSProperties, PropType } from 'vue'
+import { SlideBottom, SlideTop } from '#slidev/global-layers'
 import { provideLocal } from '@vueuse/core'
-import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import { computed, ref, toRef } from 'vue'
 import { injectionClicksContext, injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionRoute, injectionSlideZoom } from '../constants'
-import { getSlideClass } from '../utils'
 import { configs } from '../env'
-import { SlideBottom, SlideTop } from '#slidev/global-layers'
+import { getSlideClass } from '../utils'
 
 const props = defineProps({
   clicksContext: {