@slidev/client 52.14.1 → 52.15.0

package/internals/PresenterMouse.vue

@@ -4,7 +4,7 @@ import { sharedState } from '../state/shared'
 
 <template>
   <div
-    v-if="sharedState.cursor"
+    v-if="sharedState.cursor?.style === 'cursor'"
     class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none text-xl"
   >
     <ph-cursor-fill

package/internals/Settings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useWakeLock } from '@vueuse/core'
 import { useNav } from '../composables/useNav'
-import { hideCursorIdle, slideScale, viewerCssFilter, viewerCssFilterDefaults, wakeLockEnabled } from '../state'
+import { cursorStyle, hideCursorIdle, slideScale, viewerCssFilter, viewerCssFilterDefaults, wakeLockEnabled } from '../state'
 import FormCheckbox from './FormCheckbox.vue'
 import FormItem from './FormItem.vue'
 import FormSlider from './FormSlider.vue'
@@ -86,6 +86,15 @@ const { isSupported } = useWakeLock()
       />
     </FormItem>
     <div class="h-1px opacity-5 bg-current w-full my2" />
+    <FormItem title="Cursor Style">
+      <SegmentControl
+        v-model="cursorStyle"
+        :options="[
+          { label: 'Cursor', value: 'cursor' },
+          { label: 'Laser', value: 'laser' },
+        ]"
+      />
+    </FormItem>
     <FormItem
       v-if="!isPresenter"
       title="Slide Scale"

package/internals/ShikiEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, shallowRef } from 'vue'
+import { shallowRef } from 'vue'
 import { useIME } from '../composables/useIME'
 
 const props = defineProps<{
@@ -8,8 +8,6 @@ const props = defineProps<{
 const content = defineModel<string>({ required: true })
 const { composingContent, onInput, onCompositionEnd } = useIME(content)
 
-const textareaEl = ref<HTMLTextAreaElement | null>(null)
-
 const highlight = shallowRef<((code: string) => string) | null>(null)
 import('../setup/shiki').then(async (m) => {
   const { getEagerHighlighter, defaultHighlightOptions } = await m.default()
@@ -26,7 +24,7 @@ import('../setup/shiki').then(async (m) => {
     <div v-if="highlight" class="relative w-full h-max min-h-full">
       <div class="relative w-full h-max" v-html="`${highlight(composingContent)}&nbsp;`" />
       <textarea
-        ref="textareaEl" v-model="composingContent" :placeholder="props.placeholder"
+        v-model="composingContent" :placeholder="props.placeholder"
         class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
         @input="onInput"
         @compositionend="onCompositionEnd"

package/internals/SideEditor.vue

@@ -11,6 +11,8 @@ const props = defineProps<{
   resize?: boolean
 }>()
 
+const RE_FRONTMATTER_BLOCK = /^---\n([\s\S]*?)\n---\n/
+
 const { currentSlideNo, openInEditor } = useNav()
 
 const tab = ref<'content' | 'note'>('content')
@@ -37,7 +39,7 @@ async function save() {
   dirty.value = false
 
   let frontmatterRaw: string | undefined
-  const contentOnly = content.value.trim().replace(/^---\n([\s\S]*?)\n---\n/, (_, f) => {
+  const contentOnly = content.value.trim().replace(RE_FRONTMATTER_BLOCK, (_, f) => {
     frontmatterRaw = f
     return ''
   })

package/internals/SlideContainer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize } from '@vueuse/core'
-import { computed, onUnmounted, ref, watchEffect } from 'vue'
+import { recomputeAllPoppers } from 'floating-vue'
+import { computed, onMounted, onUnmounted, ref, watch, watchEffect, watchSyncEffect } from 'vue'
 import { useNav } from '../composables/useNav'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect, slideHeight, slideWidth } from '../env'
@@ -72,6 +73,18 @@ if (props.isMain) {
 provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 
+watchSyncEffect(() => {
+  if (props.isMain) {
+    mainSlideElement.value = slideElement.value
+  }
+})
+
+onMounted(() => {
+  watch(() => props.isMain && scale.value, () => {
+    recomputeAllPoppers()
+  })
+})
+
 const snapshot = computed(() => {
   if (props.no == null || !props.useSnapshot)
     return undefined
@@ -79,6 +92,10 @@ const snapshot = computed(() => {
 })
 </script>
 
+<script lang="ts">
+export const mainSlideElement = ref<HTMLElement | null>(null)
+</script>
+
 <template>
   <div
     v-if="!snapshot"

package/logic/recording.ts

@@ -3,6 +3,7 @@ import type { Options as RecorderOptions } from 'recordrtc'
 import type { Ref } from 'vue'
 import { isTruthy } from '@antfu/utils'
 import { useDevicesList, useEventListener, useLocalStorage } from '@vueuse/core'
+import fixWebmDuration from 'fix-webm-duration'
 import { nextTick, ref, shallowRef, watch } from 'vue'
 import { currentCamera, currentMic } from '../state'
 
@@ -50,11 +51,11 @@ export const {
 } = useDevicesList({
   onUpdated() {
     if (currentCamera.value !== 'none') {
-      if (!cameras.value.find(i => i.deviceId === currentCamera.value))
+      if (!cameras.value.some(i => i.deviceId === currentCamera.value))
         currentCamera.value = cameras.value[0]?.deviceId || 'default'
     }
     if (currentMic.value !== 'none') {
-      if (!microphones.value.find(i => i.deviceId === currentMic.value))
+      if (!microphones.value.some(i => i.deviceId === currentMic.value))
         currentMic.value = microphones.value[0]?.deviceId || 'default'
     }
   },
@@ -78,6 +79,7 @@ export function useRecording() {
   const streamCamera: Ref<MediaStream | undefined> = shallowRef()
   const streamCapture: Ref<MediaStream | undefined> = shallowRef()
   const streamSlides: Ref<MediaStream | undefined> = shallowRef()
+  let recordingStartTime = 0
 
   const config: RecorderOptions = {
     type: 'video',
@@ -183,17 +185,18 @@ export function useRecording() {
     )
 
     recorderSlides.value.startRecording()
+    recordingStartTime = Date.now()
     recording.value = true
   }
 
   async function stopRecording() {
     recording.value = false
+    const duration = Date.now() - recordingStartTime
+
     recorderCamera.value?.stopRecording(() => {
       if (recordCamera.value) {
         const blob = recorderCamera.value!.getBlob()
-        const url = URL.createObjectURL(blob)
-        download(getFilename('camera', config.mimeType), url)
-        window.URL.revokeObjectURL(url)
+        downloadBlob(blob, duration, getFilename('camera', config.mimeType))
       }
       recorderCamera.value = undefined
       if (!showAvatar.value)
@@ -201,15 +204,20 @@ export function useRecording() {
     })
     recorderSlides.value?.stopRecording(() => {
       const blob = recorderSlides.value!.getBlob()
-      const url = URL.createObjectURL(blob)
-      download(getFilename('screen', config.mimeType), url)
-      window.URL.revokeObjectURL(url)
+      downloadBlob(blob, duration, getFilename('screen', config.mimeType))
       closeStream(streamCapture)
       closeStream(streamSlides)
       recorderSlides.value = undefined
     })
   }
 
+  async function downloadBlob(blob: Blob, duration: number, filename: string) {
+    const fixedBlob = await fixWebmDuration(blob, duration, { logger: false })
+    const url = URL.createObjectURL(fixedBlob)
+    download(filename, url)
+    window.URL.revokeObjectURL(url)
+  }
+
   function closeStream(stream: Ref<MediaStream | undefined>) {
     const s = stream.value
     if (!s)

package/logic/slides.ts

@@ -1,7 +1,7 @@
 import type { SlideRoute } from '@slidev/types'
 import { slides } from '#slidev/slides'
-import { computed, watch, watchEffect } from 'vue'
-import { useNav } from '../composables/useNav'
+import { tryOnMounted } from '@vueuse/core'
+import { computed, watch } from 'vue'
 import { useSlideContext } from '../context'
 
 export { slides }
@@ -24,17 +24,29 @@ export function getSlidePath(
 }
 
 export function useIsSlideActive() {
-  const { $page } = useSlideContext()
-  const { currentSlideNo } = useNav()
-  return computed(() => $page.value === currentSlideNo.value)
+  const { $page, $nav } = useSlideContext()
+  // Use `$nav.value.currentSlideNo` rather than `useNav().currentSlideNo` to make it work in print/export mode. See https://github.com/slidevjs/slidev/issues/2310.
+  return computed(() => $page.value === $nav.value.currentSlideNo)
 }
 
-export function onSlideEnter(cb: () => void) {
-  const isActive = useIsSlideActive()
-  watchEffect(() => isActive.value && cb())
+export function onSlideEnter(cb: (to: number, from: number | undefined) => any) {
+  const { $page, $nav } = useSlideContext()
+
+  tryOnMounted(() => {
+    watch(() => $nav.value.currentSlideNo, (to, from) => {
+      if ($page.value === to)
+        cb(to, from)
+    }, { immediate: true })
+  })
 }
 
-export function onSlideLeave(cb: () => void) {
-  const isActive = useIsSlideActive()
-  watch(isActive, () => !isActive.value && cb())
+export function onSlideLeave(cb: (to: number, from: number | undefined) => any) {
+  const { $page, $nav } = useSlideContext()
+
+  tryOnMounted(() => {
+    watch(() => $nav.value.currentSlideNo, (to, from) => {
+      if ($page.value === from)
+        cb(to, from)
+    })
+  })
 }

package/modules/v-click.ts

@@ -2,16 +2,29 @@ import type { ClicksElement, RawAtValue } from '@slidev/types'
 import type { App, DirectiveBinding } from 'vue'
 import { computed, watchEffect } from 'vue'
 import {
+  CLASS_VCLICK_ANIMATION_PREFIX,
   CLASS_VCLICK_CURRENT,
-  CLASS_VCLICK_FADE,
   CLASS_VCLICK_HIDDEN,
   CLASS_VCLICK_HIDDEN_EXP,
   CLASS_VCLICK_PRIOR,
   CLASS_VCLICK_TARGET,
   injectionClicksContext,
+  injectionFrontmatter,
 } from '../constants'
+import { configs } from '../env'
 import { directiveInject } from '../utils'
 
+const RE_WHITESPACE_OR_COMMA = /[\s,]+/
+
+function syncAnimationClasses(el: HTMLElement, animations: string[]) {
+  const targetClasses = animations.map(a => `${CLASS_VCLICK_ANIMATION_PREFIX}${a}`)
+  el.classList.forEach((c) => {
+    if (c.startsWith(CLASS_VCLICK_ANIMATION_PREFIX) && !targetClasses.includes(c))
+      el.classList.remove(c)
+  })
+  targetClasses.forEach(c => el.classList.add(c))
+}
+
 export function createVClickDirectives() {
   return {
     install(app: App) {
@@ -38,13 +51,15 @@ export function createVClickDirectives() {
             const prior = active && !current
 
             if (resolved.flagHide) {
-              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, active)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN, active)
               el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, active)
             }
             else {
-              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, !active)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN, !active)
             }
 
+            syncAnimationClasses(el, resolved.flagAnimations.value)
+
             el.classList.toggle(CLASS_VCLICK_CURRENT, current)
             el.classList.toggle(CLASS_VCLICK_PRIOR, prior)
           })
@@ -70,13 +85,15 @@ export function createVClickDirectives() {
             const prior = active && !current
 
             if (resolved.flagHide) {
-              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, active)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN, active)
               el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, active)
             }
             else {
-              el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, !active)
+              el.classList.toggle(CLASS_VCLICK_HIDDEN, !active)
             }
 
+            syncAnimationClasses(el, resolved.flagAnimations.value)
+
             el.classList.toggle(CLASS_VCLICK_CURRENT, current)
             el.classList.toggle(CLASS_VCLICK_PRIOR, prior)
           })
@@ -101,9 +118,11 @@ export function createVClickDirectives() {
             const current = resolved.isCurrent.value
             const prior = active && !current
 
-            el.classList.toggle(resolved.flagFade ? CLASS_VCLICK_FADE : CLASS_VCLICK_HIDDEN, active)
+            el.classList.toggle(CLASS_VCLICK_HIDDEN, active)
             el.classList.toggle(CLASS_VCLICK_HIDDEN_EXP, active)
 
+            syncAnimationClasses(el, resolved.flagAnimations.value)
+
             el.classList.toggle(CLASS_VCLICK_CURRENT, current)
             el.classList.toggle(CLASS_VCLICK_PRIOR, prior)
           })
@@ -118,12 +137,27 @@ export const resolvedClickMap = new Map<ClicksElement, ReturnType<typeof resolve
 
 export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, value: RawAtValue, explicitHide = false) {
   const ctx = directiveInject(dir, injectionClicksContext)?.value
+  const frontmatter = directiveInject(dir, injectionFrontmatter)
 
   if (!el || !ctx)
     return null
 
   const flagHide = explicitHide || (dir.modifiers.hide !== false && dir.modifiers.hide != null)
-  const flagFade = dir.modifiers.fade !== false && dir.modifiers.fade != null
+
+  /**
+   * Resolves the animation presets for this element.
+   * Priority: directive modifiers (stacked) > slide frontmatter > global config.
+   * Modifiers allow composition, e.g., v-click.fade.up.scale.
+   */
+  const elModifiers = Object.keys({ ...dir.modifiers }).filter(m => m !== 'hide')
+  const flagAnimations = computed(() => {
+    if (elModifiers.length > 0)
+      return elModifiers
+    const preset = frontmatter?.clickAnimation || configs.clickAnimation
+    if (preset)
+      return preset.split(RE_WHITESPACE_OR_COMMA).filter(Boolean)
+    return []
+  })
 
   const info = ctx.calculate(value)
   if (!info)
@@ -145,8 +179,8 @@ export function resolveClick(el: Element | string, dir: DirectiveBinding<any>, v
     ...info,
     isShown,
     visibilityState,
-    flagFade,
     flagHide,
+    flagAnimations,
   }
   resolvedClickMap.set(el, resolved)
   return resolved

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.14.1",
+  "version": "52.15.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -25,48 +25,49 @@
   },
   "main": "./public.ts",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.12.0"
   },
   "dependencies": {
     "@antfu/utils": "^9.3.0",
-    "@iconify-json/carbon": "^1.2.19",
+    "@iconify-json/carbon": "^1.2.20",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@shikijs/engine-javascript": "^4.0.1",
-    "@shikijs/monaco": "^4.0.1",
-    "@shikijs/vitepress-twoslash": "^4.0.1",
+    "@shikijs/engine-javascript": "^4.0.2",
+    "@shikijs/monaco": "^4.0.2",
+    "@shikijs/vitepress-twoslash": "^4.0.2",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
-    "@unhead/vue": "^2.1.10",
-    "@unocss/extractor-mdc": "^66.6.3",
-    "@unocss/preset-mini": "^66.6.3",
-    "@unocss/reset": "^66.6.3",
+    "@unhead/vue": "^2.1.13",
+    "@unocss/extractor-mdc": "^66.6.8",
+    "@unocss/preset-mini": "^66.6.8",
+    "@unocss/reset": "^66.6.8",
     "@vueuse/core": "^14.2.1",
     "@vueuse/math": "^14.2.1",
     "@vueuse/motion": "^3.0.3",
     "ansis": "^4.2.0",
     "drauu": "^1.0.0",
     "file-saver": "^2.0.5",
+    "fix-webm-duration": "^1.0.6",
     "floating-vue": "^5.2.2",
-    "fuse.js": "^7.1.0",
-    "katex": "^0.16.33",
+    "fuse.js": "^7.3.0",
+    "katex": "^0.16.45",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.12.3",
+    "mermaid": "^11.14.0",
     "monaco-editor": "^0.55.1",
     "nanotar": "^0.3.0",
     "pptxgenjs": "^4.0.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^4.0.1",
-    "shiki-magic-move": "^1.2.1",
+    "shiki": "^4.0.2",
+    "shiki-magic-move": "^1.3.0",
     "typescript": "^5.9.3",
-    "unocss": "^66.6.2",
-    "vue": "^3.5.29",
-    "vue-router": "^5.0.3",
-    "yaml": "^2.8.2",
-    "@slidev/parser": "52.14.1",
-    "@slidev/types": "52.14.1"
+    "unocss": "^66.6.8",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.6",
+    "yaml": "^2.8.3",
+    "@slidev/parser": "52.15.0",
+    "@slidev/types": "52.15.0"
   },
   "devDependencies": {
-    "vite": "^7.3.1"
+    "vite": "^8.0.10"
   }
 }

package/pages/404.vue

@@ -3,12 +3,14 @@ import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNav } from '../composables/useNav'
 
+const RE_DIGITS = /\d+/
+
 const { currentRoute } = useRouter()
 const { total } = useNav()
 
 const guessedSlide = computed(() => {
   const path = currentRoute.value.path
-  const match = path.match(/\d+/)
+  const match = path.match(RE_DIGITS)
   if (match) {
     const slideNo = +match[0]
     if (slideNo > 0 && slideNo <= total.value)

package/pages/export.vue

@@ -161,7 +161,7 @@ async function pngsGz() {
     })),
   )
   const a = document.createElement('a')
-  const blob = new Blob([data], { type: 'application/gzip' })
+  const blob = new Blob([data as any], { type: 'application/gzip' })
   a.href = URL.createObjectURL(blob)
   a.download = `${title.value}.tar.gz`
   a.click()
@@ -351,6 +351,10 @@ h2 {
 #export-content {
   --uno: pointer-events-none;
 }
+
+#export-container {
+  --slidev-slide-container-scale: var(--slidev-slide-scale);
+}
 </style>
 
 <style>

package/pages/notes-edit.vue

@@ -9,6 +9,8 @@ import { slidesTitle } from '../env'
 import IconButton from '../internals/IconButton.vue'
 import Modal from '../internals/Modal.vue'
 
+const RE_SLIDE_HEADER = /^---\s*#(\d+)\s*$/
+
 useHead({ title: `Notes Edit - ${slidesTitle}` })
 
 const { slides } = useNav()
@@ -35,7 +37,7 @@ function deserializeNotes(notes: string, slides: SlideRoute[]) {
   const lines = notes.split(/^(---\s*#\d+\s*)$/gm)
 
   lines.forEach((line, index) => {
-    const match = line.match(/^---\s*#(\d+)\s*$/)
+    const match = line.match(RE_SLIDE_HEADER)
     if (match) {
       const no = Number.parseInt(match[1])
       const note = lines[index + 1].trim()

package/pages/play.vue

@@ -7,6 +7,7 @@ import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { useWakeLock } from '../composables/useWakeLock'
 import Controls from '../internals/Controls.vue'
+import LaserPointer from '../internals/LaserPointer.vue'
 import NavControls from '../internals/NavControls.vue'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
@@ -97,6 +98,7 @@ const contentStyle = computed(() => {
       <template #default>
         <SlidesShow render-context="slide" />
         <PresenterMouse />
+        <LaserPointer />
       </template>
       <template #controls>
         <div

package/pages/presenter.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useEventListener, useLocalStorage, useMediaQuery, useMouse, useWindowFocus } from '@vueuse/core'
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useEventListener, useLocalStorage, useMediaQuery, useWindowFocus } from '@vueuse/core'
+import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { createClicksContextBase } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
+import { useMousePosInSlide } from '../composables/useMousePosInSlide'
 import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { useWakeLock } from '../composables/useWakeLock'
@@ -14,6 +15,7 @@ import CurrentProgressBar from '../internals/CurrentProgressBar.vue'
 import DrawingControls from '../internals/DrawingControls.vue'
 import Goto from '../internals/Goto.vue'
 import IconButton from '../internals/IconButton.vue'
+import LaserPointer from '../internals/LaserPointer.vue'
 import NavControls from '../internals/NavControls.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
@@ -27,7 +29,7 @@ import TimerBar from '../internals/TimerBar.vue'
 import TimerInlined from '../internals/TimerInlined.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { cursorStyle, decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
 const inFocus = useWindowFocus()
@@ -244,28 +246,20 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
 
 // sync presenter cursor
 onMounted(() => {
-  const slidesContainer = main.value!.querySelector('#slide-content')!
-  const mouse = reactive(useMouse())
+  const mouse = useMousePosInSlide()
   const focus = useWindowFocus()
 
-  watch(
-    () => {
-      if (!focus.value || isDrawing.value || !showPresenterCursor.value || !slidesContainer)
-        return undefined
-
-      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
-
-      return { x, y }
-    },
-    (pos) => {
-      sharedState.cursor = pos
-    },
-  )
+  watchEffect(() => {
+    if (!mouse.value || !focus.value || isDrawing.value || !showPresenterCursor.value) {
+      sharedState.cursor = undefined
+    }
+    else {
+      sharedState.cursor = {
+        ...mouse.value,
+        style: cursorStyle.value,
+      }
+    }
+  })
 })
 </script>
 
@@ -328,6 +322,7 @@ onMounted(() => {
           @contextmenu="onContextMenu"
         >
           <SlidesShow render-context="presenter" />
+          <LaserPointer />
         </SlideContainer>
 
         <ClicksSlider

package/setup/main.ts

@@ -9,8 +9,7 @@ import { createVDragDirective } from '../modules/v-drag'
 import { createVMarkDirective } from '../modules/v-mark'
 import { createVMotionDirectives } from '../modules/v-motion'
 import setupRoutes from '../setup/routes'
-
-import '#slidev/styles'
+import '../styles'
 
 export default async function setupMain(app: App) {
   function setMaxHeight() {

package/setup/monaco.ts

@@ -56,12 +56,12 @@ StandaloneServices.initialize({
 })
 
 const setup = createSingletonPromise(async () => {
-  const defaults = monaco.languages.typescript.typescriptDefaults
+  const defaults = monaco.typescript.typescriptDefaults
   defaults.setCompilerOptions({
     ...defaults.getCompilerOptions(),
     strict: true,
-    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    module: monaco.languages.typescript.ModuleKind.ESNext,
+    moduleResolution: monaco.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.typescript.ModuleKind.ESNext,
   })
 
   const ata = configs.monacoTypesSource === 'cdn'
@@ -137,7 +137,7 @@ const setup = createSingletonPromise(async () => {
 async function _addFile(raw: () => Promise<{ default: string }>, path: string) {
   const uri = monaco.Uri.file(path)
   const code = (await raw()).default
-  monaco.languages.typescript.typescriptDefaults.addExtraLib(code, `file:///${path}`)
+  monaco.typescript.typescriptDefaults.addExtraLib(code, `file:///${path}`)
   monaco.editor.createModel(code, 'javascript', uri)
 }
 

package/setup/root.ts

@@ -80,7 +80,7 @@ export default function setupRoot() {
     patch('lastUpdate', {
       id,
       type: syncType.value,
-      time: new Date().getTime(),
+      time: Date.now(),
     })
   }
   const router = useRouter()

package/shim-vue.d.ts

@@ -1,5 +1,7 @@
 declare module 'vue' {
-  type SlideContext = import('./context').SlideContext
+  import type { ShallowUnwrapRef } from 'vue'
+
+  type SlideContext = ShallowUnwrapRef<import('./context').SlideContext>
   interface ComponentCustomProperties extends SlideContext {
   }
 }

package/state/shared.ts

@@ -20,6 +20,7 @@ export interface SharedState {
   cursor?: {
     x: number
     y: number
+    style?: 'cursor' | 'laser'
   }
 
   lastUpdate?: {