@slidev/client 0.51.0-beta.1 → 0.51.0-beta.2

package/builtin/VSwitch.ts

@@ -3,9 +3,9 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { defineComponent, h, onMounted, onUnmounted, ref, TransitionGroup, watchEffect } from 'vue'
 import { CLASS_VCLICK_CURRENT, CLASS_VCLICK_DISPLAY_NONE, CLASS_VCLICK_PRIOR, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
-import { skipTransition } from '../logic/hmr'
 import { resolveTransition } from '../logic/transition'
 import { makeId } from '../logic/utils'
+import { hmrSkipTransition } from '../state'
 
 export default defineComponent({
   props: {
@@ -77,7 +77,7 @@ export default defineComponent({
 
     function onAfterLeave() {
       // Refer to SlidesShow.vue
-      skipTransition.value = true
+      hmrSkipTransition.value = true
       recomputeAllPoppers()
     }
     const transitionProps = transition && {
@@ -107,7 +107,7 @@ export default defineComponent({
         }, slot?.()))
       }
       return transitionProps
-        ? h(TransitionGroup, skipTransition.value ? {} : transitionProps, () => children)
+        ? h(TransitionGroup, hmrSkipTransition.value ? {} : transitionProps, () => children)
         : h(tag, children)
     }
   },

package/composables/useHideCursorIdle.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { computed } from 'vue'
+import { hideCursorIdle } from '../state'
+
+const TIMEOUT = 2000
+
+export function useHideCursorIdle(
+  enabled: Ref<boolean>,
+) {
+  const shouldHide = computed(() => enabled.value && hideCursorIdle.value)
+
+  function hide() {
+    document.body.style.cursor = 'none'
+  }
+  function show() {
+    document.body.style.cursor = ''
+  }
+
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  useEventListener(
+    document.body,
+    ['pointermove', 'pointerdown'],
+    () => {
+      show()
+      if (!shouldHide.value)
+        return
+      if (timer)
+        clearTimeout(timer)
+      timer = setTimeout(hide, TIMEOUT)
+    },
+    { passive: true },
+  )
+}

package/composables/useNav.ts

@@ -9,10 +9,10 @@ import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { CLICKS_MAX } from '../constants'
 import { configs } from '../env'
-import { skipTransition } from '../logic/hmr'
 import { useRouteQuery } from '../logic/route'
 import { getSlide, getSlidePath } from '../logic/slides'
 import { getCurrentTransition } from '../logic/transition'
+import { hmrSkipTransition } from '../state'
 import { createClicksContextBase } from './useClicks'
 import { useTocTree } from './useTocTree'
 
@@ -184,7 +184,7 @@ export function useNavBase(
   }
 
   async function go(no: number | string, clicks: number = 0, force = false) {
-    skipTransition.value = false
+    hmrSkipTransition.value = false
     const pageChanged = currentSlideNo.value !== no
     const clicksChanged = clicks !== queryClicks.value
     const meta = getSlide(no)?.meta
@@ -304,7 +304,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
       return v
     },
     set(v) {
-      skipTransition.value = false
+      hmrSkipTransition.value = false
       queryClicksRaw.value = v.toString()
     },
   })

package/composables/useWakeLock.ts

@@ -5,10 +5,14 @@ import { wakeLockEnabled } from '../state'
 export function useWakeLock() {
   const { request, release } = useVueUseWakeLock()
 
-  watch(wakeLockEnabled, (enabled) => {
-    if (enabled)
-      request('screen')
-    else
-      release()
-  }, { immediate: true })
+  watch(
+    wakeLockEnabled,
+    (enabled) => {
+      if (enabled)
+        request('screen')
+      else
+        release()
+    },
+    { immediate: true },
+  )
 }

package/constants.ts

@@ -83,5 +83,4 @@ export const HEADMATTER_FIELDS = [
   'mdc',
   'contextMenu',
   'wakeLock',
-  'overviewSnapshots',
 ]

package/internals/DevicesSelectors.vue

@@ -49,11 +49,13 @@ ensureDevicesListPermissions()
       title="Camera"
       :items="camerasItems"
     />
+    <div class="h-1px opacity-10 bg-current w-full" />
     <SelectList
       v-model="currentMic"
       title="Microphone"
       :items="microphonesItems"
     />
+    <div class="h-1px opacity-10 bg-current w-full" />
     <SelectList
       v-if="mimeTypeItems.length"
       v-model="mimeType"

package/internals/FormItem.vue

@@ -6,6 +6,7 @@ defineProps<{
   nested?: boolean | number
   div?: boolean
   description?: string
+  dot?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -19,17 +20,19 @@ function reset() {
 
 <template>
   <component :is="div ? 'div' : 'label'" flex="~ row gap-2 items-center" select-none>
-    <div w-30 h-10 flex="~ gap-1 items-center">
+    <div w-30 h-8 flex="~ gap-1 items-center">
       <div
         v-if="nested" i-ri-corner-down-right-line op40
         :style="typeof nested === 'number' ? { marginLeft: `${nested * 0.5 + 0.5}rem` } : { marginLeft: '0.25rem' }"
       />
-      <div v-if="!description" op75 @dblclick="reset">
+      <div v-if="!description" op75 relative @dblclick="reset">
         {{ title }}
+        <div v-if="dot" w-1.5 h-1.5 bg-primary rounded absolute top-0 right--2 />
       </div>
       <Tooltip v-else distance="10">
-        <div op75 text-right @dblclick="reset">
+        <div op75 text-right relative @dblclick="reset">
           {{ title }}
+          <div v-if="dot" w-1.5 h-1.5 bg-primary rounded absolute top-0 right--2 />
         </div>
         <template #popper>
           <div text-sm min-w-90 v-html="description" />

package/internals/FormSlider.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  max: number
+  min: number
+  step: number
+  unit?: string
+  default?: number
+}>()
+
+const value = defineModel<number>('modelValue', {
+  type: Number,
+})
+</script>
+
+<template>
+  <div relative h-22px w-60 flex-auto @dblclick="props.default !== undefined ? value = props.default : null">
+    <input
+      v-model.number="value" type="range" class="slider"
+      v-bind="props"
+      absolute bottom-0 left-0 right-0 top-0 z-10 w-full align-top
+    >
+    <span
+      v-if="props.default != null"
+      border="r main" absolute bottom-0 top-0 h-full w-1px op75
+      :style="{
+        left: `${(props.default - min) / (max - min) * 100}%`,
+      }"
+    />
+  </div>
+  <div relative h-22px>
+    <input v-model.number="value" type="number" v-bind="props" border="~ base rounded" m0 w-20 bg-gray:5 pl2 align-top text-sm>
+    <span v-if="props.unit" pointer-events-none absolute right-1 top-0.5 text-xs op25>{{ props.unit }}</span>
+  </div>
+</template>
+
+<style>
+.slider {
+  appearance: none;
+  height: 22px;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  --uno: border border-main rounded of-hidden bg-gray/5;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 5px;
+  height: 22px;
+  background: var(--slidev-theme-primary);
+  cursor: pointer;
+  z-index: 10;
+}
+
+.slider::-moz-range-thumb {
+  width: 5px;
+  height: 22px;
+  background: var(--slidev-theme-primary);
+  cursor: pointer;
+  z-index: 10;
+}
+</style>

package/internals/MenuButton.vue

@@ -30,7 +30,7 @@ onClickOutside(el, () => {
     <KeepAlive>
       <div
         v-if="value"
-        class="bg-main text-main shadow-xl absolute bottom-10 left-0 z-menu"
+        class="bg-main text-main shadow-xl absolute bottom-10 left-0 z-menu py2"
         border="~ main rounded-md"
       >
         <slot name="menu" />

package/internals/NavControls.vue

@@ -5,7 +5,7 @@ import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { configs } from '../env'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
+import { activeElement, breakpoints, fullscreen, hasViewerCssFilter, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { downloadPDF } from '../utils'
 import IconButton from './IconButton.vue'
 import MenuButton from './MenuButton.vue'
@@ -167,6 +167,7 @@ if (__SLIDEV_FEATURE_RECORD__)
           <template #button>
             <IconButton title="More Options">
               <div class="i-carbon:settings-adjust" />
+              <div v-if="hasViewerCssFilter" w-2 h-2 bg-primary rounded-full absolute top-0.5 right-0.5 />
             </IconButton>
           </template>
           <template #menu>

package/internals/QuickOverview.vue

@@ -4,15 +4,18 @@ import { computed, ref, watchEffect } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
-import { configs, pathPrefix } from '../env'
+import { pathPrefix } from '../env'
 import { currentOverviewPage, overviewRowCount } from '../logic/overview'
+import { isScreenshotSupported } from '../logic/screenshot'
+import { snapshotManager } from '../logic/snapshot'
 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()
+const nav = useNav()
+const { currentSlideNo, go: goSlide, slides } = nav
 
 function close() {
   showOverview.value = false
@@ -48,6 +51,12 @@ const rowCount = computed(() => {
 
 const keyboardBuffer = ref<string>('')
 
+async function captureSlidesOverview() {
+  showOverview.value = false
+  await snapshotManager.startCapturing(nav)
+  showOverview.value = true
+}
+
 useEventListener('keypress', (e) => {
   if (!showOverview.value) {
     keyboardBuffer.value = ''
@@ -129,7 +138,7 @@ watchEffect(() => {
             <SlideContainer
               :key="route.no"
               :no="route.no"
-              :use-snapshot="configs.overviewSnapshots"
+              :use-snapshot="true"
               :width="cardWidth"
               class="pointer-events-none"
             >
@@ -157,7 +166,10 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="showOverview" class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2">
+  <div
+    v-show="showOverview"
+    class="fixed top-4 right-4 z-modal text-gray-400 flex flex-col items-center gap-2"
+  >
     <IconButton title="Close" class="text-2xl" @click="close">
       <div class="i-carbon:close" />
     </IconButton>
@@ -172,5 +184,13 @@ watchEffect(() => {
     >
       <div class="i-carbon:list-boxes" />
     </IconButton>
+    <IconButton
+      v-if="__DEV__ && isScreenshotSupported"
+      title="Capture slides as images"
+      class="text-2xl"
+      @click="captureSlidesOverview"
+    >
+      <div class="i-carbon:drop-photo" />
+    </IconButton>
   </div>
 </template>

package/internals/SegmentControl.vue

@@ -12,7 +12,7 @@ defineEmits<{
 </script>
 
 <template>
-  <div flex="~ gap-1 items-center" rounded bg-gray:2 p1>
+  <div flex="~ gap-1 items-center" rounded bg-gray:4 p1 m--1>
     <Badge
       v-for="option in options"
       :key="option.value"

package/internals/SelectList.vue

@@ -46,13 +46,9 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 <style lang="postcss" scoped>
 .item {
   @apply flex rounded whitespace-nowrap py-1 gap-1 px-2 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
-
-  svg {
-    @apply mr-1 -ml-2 my-auto;
-  }
 }
 
 .title {
-  @apply text-sm op75 px4 pt2 pb1 select-none text-nowrap font-bold border-t border-main;
+  @apply text-sm op75 px3 py1 select-none text-nowrap font-bold;
 }
 </style>

package/internals/Settings.vue

@@ -1,50 +1,114 @@
 <script setup lang="ts">
-import type { SelectionItem } from './types'
 import { useWakeLock } from '@vueuse/core'
 import { useNav } from '../composables/useNav'
-import { slideScale, wakeLockEnabled } from '../state'
-import SelectList from './SelectList.vue'
+import { hideCursorIdle, slideScale, viewerCssFilter, viewerCssFilterDefaults, wakeLockEnabled } from '../state'
+import FormCheckbox from './FormCheckbox.vue'
+import FormItem from './FormItem.vue'
+import FormSlider from './FormSlider.vue'
+import SegmentControl from './SegmentControl.vue'
 
 const { isPresenter } = useNav()
-
-const scaleItems: SelectionItem<number>[] = [
-  {
-    display: 'Fit',
-    value: 0,
-  },
-  {
-    display: '1:1',
-    value: 1,
-  },
-]
-
 const { isSupported } = useWakeLock()
-
-const wakeLockItems: SelectionItem<boolean>[] = [
-  {
-    display: 'Enabled',
-    value: true,
-  },
-  {
-    display: 'Disabled',
-    value: false,
-  },
-]
 </script>
 
 <template>
-  <div text-sm select-none flex="~ col gap-2" min-w-30>
-    <SelectList
+  <div text-sm select-none flex="~ col gap-1" min-w-30 px4>
+    <FormItem
+      title="Invert"
+      :dot="viewerCssFilter.invert !== viewerCssFilterDefaults.invert"
+      @reset="viewerCssFilter.invert = viewerCssFilterDefaults.invert"
+    >
+      <FormCheckbox v-model="viewerCssFilter.invert" />
+    </FormItem>
+    <FormItem
+      title="Brightness"
+      :dot="viewerCssFilter.brightness !== viewerCssFilterDefaults.brightness"
+      @reset="viewerCssFilter.brightness = viewerCssFilterDefaults.brightness"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.brightness"
+        :max="1.5"
+        :min="0.5"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.brightness"
+      />
+    </FormItem>
+    <FormItem
+      title="Contrast"
+      :dot="viewerCssFilter.contrast !== viewerCssFilterDefaults.contrast"
+      @reset="viewerCssFilter.contrast = viewerCssFilterDefaults.contrast"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.contrast"
+        :max="1.5"
+        :min="0.5"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.contrast"
+      />
+    </FormItem>
+    <FormItem
+      title="Saturation"
+      :dot="viewerCssFilter.saturate !== viewerCssFilterDefaults.saturate"
+      @reset="viewerCssFilter.saturate = viewerCssFilterDefaults.saturate"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.saturate"
+        :max="1.5"
+        :min="0.5"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.saturate"
+      />
+    </FormItem>
+    <FormItem
+      title="Sepia"
+      :dot="viewerCssFilter.sepia !== viewerCssFilterDefaults.sepia"
+      @reset="viewerCssFilter.sepia = viewerCssFilterDefaults.sepia"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.sepia"
+        :max="2"
+        :min="-2"
+        :step="0.02"
+        :default="viewerCssFilterDefaults.sepia"
+      />
+    </FormItem>
+    <FormItem
+      title="Hue Rotate"
+      :dot="viewerCssFilter.hueRotate !== viewerCssFilterDefaults.hueRotate"
+      @reset="viewerCssFilter.hueRotate = viewerCssFilterDefaults.hueRotate"
+    >
+      <FormSlider
+        v-model="viewerCssFilter.hueRotate"
+        :max="180"
+        :min="-180"
+        :step="0.1"
+        :default="viewerCssFilterDefaults.hueRotate"
+      />
+    </FormItem>
+    <div class="h-1px opacity-5 bg-current w-full my2" />
+    <FormItem
       v-if="!isPresenter"
-      v-model="slideScale"
-      title="Scale"
-      :items="scaleItems"
-    />
-    <SelectList
+      title="Slide Scale"
+    >
+      <SegmentControl
+        v-model="slideScale"
+        :options="[
+          { label: 'Fit', value: 0 },
+          { label: '1:1', value: 1 },
+        ]"
+      />
+    </FormItem>
+    <FormItem
       v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported"
-      v-model="wakeLockEnabled"
-      title="Wake lock"
-      :items="wakeLockItems"
-    />
+      title="Wake Lock"
+    >
+      <FormCheckbox v-model="wakeLockEnabled" />
+    </FormItem>
+    <FormItem
+      v-if="!isPresenter"
+      title="Hide Idle Cursor"
+    >
+      <FormCheckbox v-model="hideCursorIdle" />
+    </FormItem>
   </div>
 </template>

package/internals/SlideContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { provideLocal, useElementSize, useStyleTag } from '@vueuse/core'
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useNav } from '../composables/useNav'
 import { injectionSlideElement, injectionSlideScale } from '../constants'
 import { slideAspect, slideHeight, slideWidth } from '../env'
+import { isDark } from '../logic/dark'
 import { snapshotManager } from '../logic/snapshot'
 import { slideScale } from '../state'
 
@@ -26,6 +27,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  contentStyle: {
+    type: Object,
+    default: () => ({}),
+  },
 })
 
 const { isPrintMode } = useNav()
@@ -44,6 +49,7 @@ const scale = computed(() => {
 })
 
 const contentStyle = computed(() => ({
+  ...props.contentStyle,
   'height': `${slideHeight.value}px`,
   'width': `${slideWidth.value}px`,
   'transform': `translate(-50%, -50%) scale(${scale.value})`,
@@ -65,32 +71,41 @@ provideLocal(injectionSlideScale, scale)
 provideLocal(injectionSlideElement, slideElement)
 
 const snapshot = computed(() => {
-  if (!props.useSnapshot || props.no == null)
+  if (props.no == null || !props.useSnapshot)
     return undefined
-  return snapshotManager.getSnapshot(props.no)
-})
-
-onMounted(() => {
-  if (container.value && props.useSnapshot && props.no != null) {
-    snapshotManager.captureSnapshot(props.no, container.value)
-  }
+  return snapshotManager.getSnapshot(props.no, isDark.value)
 })
 </script>
 
 <template>
-  <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">
+  <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 -->
-  <img
-    v-else
-    :src="snapshot"
-    class="w-full object-cover"
-    :style="containerStyle"
-  >
+  <!-- Image Snapshot -->
+  <div v-else class="slidev-slide-container w-full h-full relative">
+    <img
+      :src="snapshot"
+      class="w-full h-full object-cover"
+      :style="containerStyle"
+    >
+    <div absolute bottom-1 right-1 p0.5 text-cyan:75 bg-cyan:10 rounded title="Snapshot">
+      <div class="i-carbon-camera" />
+    </div>
+  </div>
 </template>
 
 <style scoped lang="postcss">

package/internals/SlidesShow.vue

@@ -7,8 +7,7 @@ import { createFixedClicks } from '../composables/useClicks'
 import { useNav } from '../composables/useNav'
 import { useViewTransition } from '../composables/useViewTransition'
 import { CLICKS_MAX } from '../constants'
-import { skipTransition } from '../logic/hmr'
-import { activeDragElement } from '../state'
+import { activeDragElement, disableTransition, hmrSkipTransition } from '../state'
 import DragControl from './DragControl.vue'
 import SlideWrapper from './SlideWrapper.vue'
 
@@ -64,7 +63,7 @@ const loadedRoutes = computed(() => isPrintMode.value
 function onAfterLeave() {
   // After transition, we disable it so HMR won't trigger it again
   // We will turn it back on `nav.go` so the normal navigation would still work
-  skipTransition.value = true
+  hmrSkipTransition.value = true
   // recompute poppers after transition
   recomputeAllPoppers()
 }
@@ -76,8 +75,8 @@ function onAfterLeave() {
 
   <!-- Slides -->
   <component
-    :is="hasViewTransition && !isPrintMode ? 'div' : TransitionGroup"
-    v-bind="skipTransition || isPrintMode ? {} : currentTransition"
+    :is="(hasViewTransition && !isPrintMode && !hmrSkipTransition && !disableTransition) ? 'div' : TransitionGroup"
+    v-bind="(hmrSkipTransition || disableTransition || isPrintMode) ? {} : currentTransition"
     id="slideshow"
     tag="div"
     :class="{

package/internals/SyncControls.vue

@@ -35,6 +35,41 @@ const shouldSend = computed({
     }
   },
 })
+
+const state = computed({
+  get: () => {
+    if (shouldReceive.value && shouldSend.value) {
+      return 'bidirectional'
+    }
+    if (shouldReceive.value && !shouldSend.value) {
+      return 'receive-only'
+    }
+    if (!shouldReceive.value && shouldSend.value) {
+      return 'send-only'
+    }
+    return 'off'
+  },
+  set(v) {
+    switch (v) {
+      case 'bidirectional':
+        shouldReceive.value = true
+        shouldSend.value = true
+        break
+      case 'receive-only':
+        shouldReceive.value = true
+        shouldSend.value = false
+        break
+      case 'send-only':
+        shouldReceive.value = false
+        shouldSend.value = true
+        break
+      case 'off':
+        shouldReceive.value = false
+        shouldSend.value = false
+        break
+    }
+  },
+})
 </script>
 
 <template>
@@ -47,24 +82,19 @@ const shouldSend = computed({
     </template>
     <template #menu>
       <div text-sm flex="~ col gap-2">
-        <div px4 pt3 pb1 ws-nowrap>
+        <div px3 ws-nowrap>
           <span op75>Slides navigation syncing for </span>
           <span font-bold text-primary>{{ isPresenter ? 'presenter' : 'viewer' }}</span>
         </div>
+        <div class="h-1px opacity-10 bg-current w-full" />
         <SelectList
-          v-model="shouldSend"
-          title="Send Changes"
-          :items="[
-            { value: true, display: 'On' },
-            { value: false, display: 'Off' },
-          ]"
-        />
-        <SelectList
-          v-model="shouldReceive"
-          title="Receive Changes"
+          v-model="state"
+          title="Sync Mode"
           :items="[
-            { value: true, display: 'On' },
-            { value: false, display: 'Off' },
+            { value: 'bidirectional', display: 'Bidirectional Sync' },
+            { value: 'receive-only', display: 'Receive Only' },
+            { value: 'send-only', display: 'Send Only' },
+            { value: 'off', display: 'Disable' },
           ]"
         />
       </div>

package/logic/color.ts

@@ -18,6 +18,8 @@ import { isDark } from './dark'
 const predefinedColorMap = {
   error: 0,
   client: 60,
+  Light: 60,
+  Dark: 240,
 } as Record<string, number>
 
 export function getHashColorFromString(

package/logic/snapshot.ts

@@ -1,11 +1,24 @@
+import type { SlidevContextNavFull } from '../composables/useNav'
+import type { ScreenshotSession } from './screenshot'
+import { sleep } from '@antfu/utils'
+import { slideHeight, slideWidth } from '../env'
+import { captureDelay, disableTransition } from '../state'
 import { snapshotState } from '../state/snapshot'
+import { isDark } from './dark'
+import { startScreenshotSession } from './screenshot'
 import { getSlide } from './slides'
 
+const chromeVersion = window.navigator.userAgent.match(/Chrome\/(\d+)/)?.[1]
+export const isScreenshotSupported = chromeVersion ? Number(chromeVersion) >= 94 : false
+
+const initialWait = 100
+
 export class SlideSnapshotManager {
-  private _capturePromises = new Map<number, Promise<void>>()
+  private _screenshotSession: ScreenshotSession | null = null
 
-  getSnapshot(slideNo: number) {
-    const data = snapshotState.state[slideNo]
+  getSnapshot(slideNo: number, isDark: boolean) {
+    const id = slideNo + (isDark ? '-dark' : '-light')
+    const data = snapshotState.state[id]
     if (!data) {
       return
     }
@@ -18,67 +31,75 @@ export class SlideSnapshotManager {
     }
   }
 
-  async captureSnapshot(slideNo: number, el: HTMLElement, delay = 1000) {
+  private async saveSnapshot(slideNo: number, dataUrl: string, isDark: boolean) {
     if (!__DEV__)
-      return
-    if (this.getSnapshot(slideNo)) {
-      return
-    }
-    if (this._capturePromises.has(slideNo)) {
-      await this._capturePromises.get(slideNo)
-    }
-    const promise = this._captureSnapshot(slideNo, el, delay)
-      .finally(() => {
-        this._capturePromises.delete(slideNo)
-      })
-    this._capturePromises.set(slideNo, promise)
-    await promise
-  }
-
-  private async _captureSnapshot(slideNo: number, el: HTMLElement, delay: number) {
-    if (!__DEV__)
-      return
+      return false
     const slide = getSlide(slideNo)
     if (!slide)
-      return
+      return false
 
+    const id = slideNo + (isDark ? '-dark' : '-light')
     const revision = slide.meta.slide.revision
+    snapshotState.patch(id, {
+      revision,
+      image: dataUrl,
+    })
+  }
 
-    // Retry until the slide is loaded
-    let retries = 100
-    while (retries-- > 0) {
-      if (!el.querySelector('.slidev-slide-loading'))
-        break
-      await new Promise(r => setTimeout(r, 100))
-    }
+  async startCapturing(nav: SlidevContextNavFull) {
+    if (!__DEV__)
+      return false
 
-    // Artificial delay for the content to be loaded
-    await new Promise(r => setTimeout(r, delay))
+    // TODO: show a dialog to confirm
+
+    if (this._screenshotSession) {
+      this._screenshotSession.dispose()
+      this._screenshotSession = null
+    }
 
-    // Capture the snapshot
-    const toImage = await import('html-to-image')
     try {
-      const dataUrl = await toImage.toPng(el, {
-        width: el.offsetWidth,
-        height: el.offsetHeight,
-        skipFonts: true,
-        cacheBust: true,
-        pixelRatio: 1.5,
-      })
-      if (revision !== slide.meta.slide.revision) {
-        // eslint-disable-next-line no-console
-        console.info('[Slidev] Slide', slideNo, 'changed, discarding the snapshot')
-        return
+      this._screenshotSession = await startScreenshotSession(
+        slideWidth.value,
+        slideHeight.value,
+      )
+
+      disableTransition.value = true
+      nav.go(1, 0, true)
+
+      await sleep(initialWait + captureDelay.value)
+      while (true) {
+        if (!this._screenshotSession) {
+          break
+        }
+        this.saveSnapshot(
+          nav.currentSlideNo.value,
+          this._screenshotSession.screenshot(document.getElementById('slide-content')!),
+          isDark.value,
+        )
+        if (nav.hasNext.value) {
+          await sleep(captureDelay.value)
+          nav.nextSlide(true)
+          await sleep(captureDelay.value)
+        }
+        else {
+          break
+        }
       }
-      snapshotState.patch(slideNo, {
-        revision,
-        image: dataUrl,
-      })
-      // eslint-disable-next-line no-console
-      console.info('[Slidev] Snapshot captured for slide', slideNo)
+
+      // TODO: show a message when done
+
+      return true
     }
     catch (e) {
-      console.error('[Slidev] Failed to capture snapshot for slide', slideNo, e)
+      console.error(e)
+      return false
+    }
+    finally {
+      disableTransition.value = false
+      if (this._screenshotSession) {
+        this._screenshotSession.dispose()
+        this._screenshotSession = null
+      }
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.51.0-beta.1",
+  "version": "0.51.0-beta.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -45,7 +45,6 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "html-to-image": "^1.11.11",
     "katex": "^0.16.18",
     "lz-string": "^1.5.0",
     "mermaid": "^11.4.1",
@@ -61,8 +60,8 @@
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "yaml": "^2.6.1",
-    "@slidev/parser": "0.51.0-beta.1",
-    "@slidev/types": "0.51.0-beta.1"
+    "@slidev/parser": "0.51.0-beta.2",
+    "@slidev/types": "0.51.0-beta.2"
   },
   "devDependencies": {
     "vite": "^6.0.6"

package/pages/export.vue

@@ -3,8 +3,7 @@ import type { ScreenshotSession } from '../logic/screenshot'
 import { sleep } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/utils'
 import { useHead } from '@unhead/vue'
-import { provideLocal, useElementSize, useLocalStorage, useStyleTag, watchDebounced } from '@vueuse/core'
-
+import { provideLocal, useElementSize, useStyleTag, watchDebounced } from '@vueuse/core'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useDarkMode } from '../composables/useDarkMode'
@@ -16,8 +15,9 @@ import ExportPdfTip from '../internals/ExportPdfTip.vue'
 import FormCheckbox from '../internals/FormCheckbox.vue'
 import FormItem from '../internals/FormItem.vue'
 import PrintSlide from '../internals/PrintSlide.vue'
+import SegmentControl from '../internals/SegmentControl.vue'
 import { isScreenshotSupported, startScreenshotSession } from '../logic/screenshot'
-import { skipExportPdfTip } from '../state'
+import { captureDelay, skipExportPdfTip } from '../state'
 import Play from './play.vue'
 
 const { slides, isPrintWithClicks, hasNext, go, next, currentSlideNo, clicks, printRange } = useNav()
@@ -29,7 +29,6 @@ const scale = computed(() => containerWidth.value / slideWidth.value)
 const contentMarginBottom = computed(() => `${contentHeight.value * (scale.value - 1)}px`)
 const rangesRaw = ref('')
 const initialWait = ref(1000)
-const delay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
 type ScreenshotResult = { slideIndex: number, clickIndex: number, dataUrl: string }[]
 const screenshotSession = ref<ScreenshotSession | null>(null)
 const capturedImages = ref<ScreenshotResult | null>(null)
@@ -70,7 +69,7 @@ async function capturePngs() {
 
     go(1, 0, true)
 
-    await sleep(initialWait.value + delay.value)
+    await sleep(initialWait.value + captureDelay.value)
     while (true) {
       if (!screenshotSession.value) {
         break
@@ -81,9 +80,9 @@ async function capturePngs() {
         dataUrl: screenshotSession.value.screenshot(document.getElementById('slide-content')!),
       })
       if (hasNext.value) {
-        await sleep(delay.value)
+        await sleep(captureDelay.value)
         next()
-        await sleep(delay.value)
+        await sleep(captureDelay.value)
       }
       else {
         break
@@ -227,8 +226,15 @@ if (import.meta.hot) {
         <FormItem title="Range">
           <input v-model="rangesRaw" type="text" :placeholder="`1-${slides.length}`">
         </FormItem>
-        <FormItem title="Dark mode">
-          <FormCheckbox v-model="isDark" :disabled="isColorSchemaConfigured" />
+        <FormItem title="Color Mode">
+          <SegmentControl
+            v-model="isDark"
+            :options="[
+              { value: false, label: 'Light' },
+              { value: true, label: 'Dark' },
+            ]"
+            :disabled="isColorSchemaConfigured"
+          />
         </FormItem>
         <FormItem title="With clicks">
           <FormCheckbox v-model="isPrintWithClicks" />
@@ -273,7 +279,7 @@ if (import.meta.hot) {
                 Pre-capture Slides as Images
               </button>
               <FormItem title="Delay" description="Delay between capturing each slide in milliseconds.<br>Increase this value if slides are captured incompletely. <br>(Not related to PDF export)">
-                <input v-model="delay" type="number" step="50" min="50">
+                <input v-model="captureDelay" type="number" step="50" min="50">
               </FormItem>
             </div>
           </div>

package/pages/play.vue

@@ -2,6 +2,7 @@
 import { useStyleTag } from '@vueuse/core'
 import { computed, ref, shallowRef } from 'vue'
 import { useDrawings } from '../composables/useDrawings'
+import { useHideCursorIdle } from '../composables/useHideCursorIdle'
 import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { useWakeLock } from '../composables/useWakeLock'
@@ -12,9 +13,9 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor } from '../state'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, viewerCssFilter, viewerCssFilterDefaults } from '../state'
 
-const { next, prev, isPrintMode } = useNav()
+const { next, prev, isPrintMode, isPresenter } = useNav()
 const { isDrawing } = useDrawings()
 
 const root = ref<HTMLDivElement>()
@@ -35,6 +36,7 @@ useSwipeControls(root)
 registerShortcuts()
 if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
+useHideCursorIdle(computed(() => !isPresenter.value && !isPrintMode.value))
 
 if (import.meta.hot) {
   useStyleTag(computed(() => showEditor.value
@@ -59,6 +61,25 @@ 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 contentStyle = computed(() => {
+  let filter = ''
+
+  if (viewerCssFilter.value.brightness !== viewerCssFilterDefaults.brightness)
+    filter += `brightness(${viewerCssFilter.value.brightness}) `
+  if (viewerCssFilter.value.contrast !== viewerCssFilterDefaults.contrast)
+    filter += `contrast(${viewerCssFilter.value.contrast}) `
+  if (viewerCssFilter.value.sepia !== viewerCssFilterDefaults.sepia)
+    filter += `sepia(${viewerCssFilter.value.sepia}) `
+  if (viewerCssFilter.value.hueRotate !== viewerCssFilterDefaults.hueRotate)
+    filter += `hue-rotate(${viewerCssFilter.value.hueRotate}deg) `
+  if (viewerCssFilter.value.invert)
+    filter += 'invert(1) '
+
+  return {
+    filter,
+  }
+})
 </script>
 
 <template>
@@ -69,6 +90,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
     <SlideContainer
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       is-main
+      :content-style="contentStyle"
       @pointerdown="onClick"
       @contextmenu="onContextMenu"
     >

package/setup/root.ts

@@ -8,10 +8,9 @@ import { useNav } from '../composables/useNav'
 import { usePrintStyles } from '../composables/usePrintStyles'
 import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext, TRUST_ORIGINS } from '../constants'
 import { configs, slidesTitle } from '../env'
-import { skipTransition } from '../logic/hmr'
 import { getSlidePath } from '../logic/slides'
 import { makeId } from '../logic/utils'
-import { syncDirections } from '../state'
+import { hmrSkipTransition, syncDirections } from '../state'
 import { initDrawingState } from '../state/drawings'
 import { initSharedState, onPatch, patch } from '../state/shared'
 
@@ -101,7 +100,7 @@ export default function setupRoot() {
     if ((+state.page === +currentSlideNo.value && +clicksContext.value.current === +state.clicks))
       return
     // if (state.lastUpdate?.type === 'presenter') {
-    skipTransition.value = false
+    hmrSkipTransition.value = false
     router.replace({
       path: getSlidePath(state.page, isPresenter.value),
       query: {

package/state/snapshot.ts

@@ -1,7 +1,7 @@
 import serverSnapshotState from 'server-reactive:snapshots?diff'
 import { createSyncState } from './syncState'
 
-export type SnapshotState = Record<number, {
+export type SnapshotState = Record<string, {
   revision: string
   image: string
 }>

package/state/storage.ts

@@ -8,6 +8,13 @@ export const showInfoDialog = ref(false)
 export const showGotoDialog = ref(false)
 export const showOverview = ref(false)
 
+/**
+ * Skip slides transition when triggered by HMR.
+ * Will reset automatically after user navigations
+ */
+export const hmrSkipTransition = ref(false)
+export const disableTransition = ref(false)
+
 export const shortcutsEnabled = ref(true)
 export const breakpoints = useBreakpoints({
   xs: 460,
@@ -26,7 +33,9 @@ export const currentCamera = useLocalStorage<string>('slidev-camera', 'default',
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
+export const hideCursorIdle = useLocalStorage('slidev-hide-cursor-idle', true)
 export const skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', false)
+export const captureDelay = useLocalStorage('slidev-export-capture-delay', 400, { listenToStorageChanges: false })
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
@@ -39,6 +48,24 @@ export const activeDragElement = shallowRef<DragElementState | null>(null)
 export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
 export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
 
+export const viewerCssFilterDefaults = {
+  invert: false,
+  contrast: 1,
+  brightness: 1,
+  hueRotate: 0,
+  saturate: 1,
+  sepia: 0,
+}
+export const viewerCssFilter = useLocalStorage(
+  'slidev-viewer-css-filter',
+  viewerCssFilterDefaults,
+  { listenToStorageChanges: false, mergeDefaults: true, deep: true },
+)
+export const hasViewerCssFilter = computed(() => {
+  return (Object.keys(viewerCssFilterDefaults) as (keyof typeof viewerCssFilterDefaults)[])
+    .some(k => viewerCssFilter.value[k] !== viewerCssFilterDefaults[k])
+})
+
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1
   if (presenterLayout.value > 3)

package/styles/index.css

@@ -22,7 +22,7 @@ html {
   user-select: none;
   outline: none;
   cursor: pointer;
-  @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
+  @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1 relative;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
   @apply md:p-2;

package/logic/hmr.ts

@@ -1,3 +0,0 @@
-import { ref } from 'vue'
-
-export const skipTransition = ref(false)