@slidev/client 0.50.0 → 0.51.0-beta.2

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" />
@@ -238,8 +244,8 @@ if (import.meta.hot) {
       <div class="min-w-fit" flex="~ col gap-3">
         <div border="~ main rounded-lg" p3 flex="~ col gap-2">
           <h2>Export as Vector File</h2>
-          <div class="flex flex-col gap-2 items-start min-w-max">
-            <button @click="pdf">
+          <div class="flex flex-col gap-2 min-w-max">
+            <button class="slidev-form-button" @click="pdf">
               PDF
             </button>
           </div>
@@ -253,27 +259,27 @@ if (import.meta.hot) {
             If you encounter issues, please use a modern Chromium-based browser,
             or export via the CLI.
           </div>
-          <div class="flex flex-col gap-2 items-start min-w-max">
-            <button @click="pptx">
+          <div class="flex flex-col gap-2 min-w-max">
+            <button class="slidev-form-button" @click="pptx">
               PPTX
             </button>
-            <button @click="pngsGz">
+            <button class="slidev-form-button" @click="pngsGz">
               PNGs.gz
             </button>
           </div>
           <div w-full h-1px border="t main" my2 />
           <div class="relative flex flex-col gap-2 flex-nowrap">
-            <div class="flex flex-col gap-2 items-start min-w-max">
-              <button v-if="capturedImages" class="flex justify-center items-center gap-2" @click="capturedImages = null">
+            <div class="flex flex-col gap-2 min-w-max">
+              <button v-if="capturedImages" class="slidev-form-button flex justify-center items-center gap-2" @click="capturedImages = null">
                 <span class="i-carbon:trash-can inline-block text-xl" />
                 Clear Captured Images
               </button>
-              <button v-else class="flex justify-center items-center gap-2" @click="capturePngs">
+              <button v-else class="slidev-form-button flex justify-center items-center gap-2" @click="capturePngs">
                 <div class="i-carbon:camera-action inline-block text-xl" />
                 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>
@@ -325,10 +331,6 @@ if (import.meta.hot) {
   }
 }
 
-button {
-  --uno: 'w-full rounded bg-gray:10 px-4 py-2 hover:bg-gray/20';
-}
-
 label {
   --uno: text-xl flex gap-2 items-center select-none;
 

package/pages/notes.vue

@@ -19,7 +19,7 @@ const { isFullscreen, toggle: toggleFullscreen } = fullscreen
 
 const scroller = ref<HTMLDivElement>()
 const fontSize = useLocalStorage('slidev-notes-font-size', 18)
-const pageNo = computed(() => sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerPage : sharedState.page)
+const pageNo = computed(() => sharedState.page)
 const currentRoute = computed(() => slides.value.find(i => i.no === pageNo.value))
 
 watch(pageNo, () => {
@@ -36,8 +36,8 @@ function decreaseFontSize() {
 }
 
 const clicksContext = computed(() => {
-  const clicks = sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerClicks : sharedState.clicks
-  const total = sharedState.lastUpdate?.type === 'viewer' ? sharedState.viewerClicksTotal : sharedState.clicksTotal
+  const clicks = sharedState.clicks
+  const total = sharedState.clicksTotal
   return createClicksContextBase(ref(clicks), undefined, total)
 })
 </script>

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/pages/presenter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useMouse, useWindowFocus } from '@vueuse/core'
+import { useLocalStorage, useMouse, useWindowFocus } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
@@ -18,6 +18,8 @@ import NavControls from '../internals/NavControls.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import QuickOverview from '../internals/QuickOverview.vue'
+import ScreenCaptureMirror from '../internals/ScreenCaptureMirror.vue'
+import SegmentControl from '../internals/SegmentControl.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -26,6 +28,7 @@ import { registerShortcuts } from '../logic/shortcuts'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
+const inFocus = useWindowFocus()
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
@@ -49,7 +52,7 @@ useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
-const { timer, isTimerAvctive, resetTimer, toggleTimer } = useTimer()
+const { timer, isTimerActive, resetTimer, toggleTimer } = useTimer()
 
 const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
@@ -74,6 +77,7 @@ watch(
   { immediate: true },
 )
 
+const mainSlideMode = useLocalStorage<'slides' | 'mirror'>('slidev-presenter-main-slide-mode', 'slides')
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
@@ -86,7 +90,7 @@ onMounted(() => {
 
   watch(
     () => {
-      if (!focus.value || isDrawing.value || !showPresenterCursor.value)
+      if (!focus.value || isDrawing.value || !showPresenterCursor.value || !slidesContainer)
         return undefined
 
       const rect = slidesContainer.getBoundingClientRect()
@@ -106,25 +110,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-main h-full slidev-presenter">
+  <div class="bg-main h-full slidev-presenter" pt-2px>
     <div class="grid-container" :class="`layout${presenterLayout}`">
       <div ref="main" class="relative grid-section main flex flex-col">
-        <SlideContainer
-          key="main"
-          class="p-2 lg:p-4 flex-auto"
-          is-main
-          @contextmenu="onContextMenu"
-        >
-          <SlidesShow render-context="presenter" />
-        </SlideContainer>
+        <div flex="~ gap-4 items-center" border="b main" p1>
+          <span op50 px2>Current</span>
+          <div flex-auto />
+          <SegmentControl
+            v-model="mainSlideMode"
+            :options="[
+              { label: 'Slides', value: 'slides' },
+              { label: 'Screen Mirror', value: 'mirror' },
+            ]"
+          />
+        </div>
+        <template v-if="mainSlideMode === 'mirror'">
+          <ScreenCaptureMirror />
+        </template>
+        <template v-else>
+          <SlideContainer
+            key="main"
+            class="p-2 lg:p-4 flex-auto"
+            is-main
+            @contextmenu="onContextMenu"
+          >
+            <SlidesShow render-context="presenter" />
+          </SlideContainer>
+        </template>
+
         <ClicksSlider
           :key="currentSlideRoute?.no"
           :clicks-context="getPrimaryClicks(currentSlideRoute)"
           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-section next flex flex-col p-2 lg:p-4">
         <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
@@ -165,7 +183,8 @@ onMounted(() => {
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
           :clicks-context="clicksContext"
         />
-        <div class="border-t border-main py-1 px-2 text-sm">
+        <div border-t border-main />
+        <div class="py-1 px-2 text-sm transition" :class="inFocus ? '' : 'op25'">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
             <div class="i-carbon:zoom-in" />
           </IconButton>
@@ -182,14 +201,14 @@ onMounted(() => {
         </div>
       </div>
       <div class="grid-section bottom flex">
-        <NavControls :persist="true" />
+        <NavControls :persist="true" class="transition" :class="inFocus ? '' : 'op25'" />
         <div flex-auto />
         <div class="group flex items-center justify-center pl-4 select-none">
           <div class="w-22px cursor-pointer">
             <div class="i-carbon:time group-hover:hidden text-xl" />
             <div class="group-not-hover:hidden flex flex-col items-center">
               <div class="relative op-80 hover:op-100" @click="toggleTimer">
-                <div v-if="isTimerAvctive" class="i-carbon:pause text-lg" />
+                <div v-if="isTimerActive" class="i-carbon:pause text-lg" />
                 <div v-else class="i-carbon:play" />
               </div>
               <div class="op-80 hover:op-100" @click="resetTimer">

package/setup/root.ts

@@ -8,9 +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 { hmrSkipTransition, syncDirections } from '../state'
 import { initDrawingState } from '../state/drawings'
 import { initSharedState, onPatch, patch } from '../state/shared'
 
@@ -58,30 +58,28 @@ export default function setupRoot() {
   initDrawingState(`${slidesTitle} - drawings`)
 
   const id = `${location.origin}_${makeId()}`
+  const syncType = computed(() => isPresenter.value ? 'presenter' : 'viewer')
 
   // update shared state
   function updateSharedState() {
+    const shouldSend = isPresenter.value
+      ? syncDirections.value.presenterSend
+      : syncDirections.value.viewerSend
+
+    if (!shouldSend)
+      return
     if (isNotesViewer.value || isPrintMode.value)
       return
-
     // we allow Presenter mode, or Viewer mode from trusted origins to update the shared state
     if (!isPresenter.value && !TRUST_ORIGINS.includes(location.host.split(':')[0]))
       return
 
-    if (isPresenter.value) {
-      patch('page', +currentSlideNo.value)
-      patch('clicks', clicksContext.value.current)
-      patch('clicksTotal', clicksContext.value.total)
-    }
-    else {
-      patch('viewerPage', +currentSlideNo.value)
-      patch('viewerClicks', clicksContext.value.current)
-      patch('viewerClicksTotal', clicksContext.value.total)
-    }
-
+    patch('page', +currentSlideNo.value)
+    patch('clicks', clicksContext.value.current)
+    patch('clicksTotal', clicksContext.value.total)
     patch('lastUpdate', {
       id,
-      type: isPresenter.value ? 'presenter' : 'viewer',
+      type: syncType.value,
       time: new Date().getTime(),
     })
   }
@@ -90,17 +88,26 @@ export default function setupRoot() {
   watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
+    const shouldReceive = isPresenter.value
+      ? syncDirections.value.presenterReceive
+      : syncDirections.value.viewerReceive
+    if (!shouldReceive)
+      return
     if (!hasPrimarySlide.value || isPrintMode.value)
       return
-    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
-      skipTransition.value = false
-      router.replace({
-        path: getSlidePath(state.page, isPresenter.value),
-        query: {
-          ...router.currentRoute.value.query,
-          clicks: state.clicks || 0,
-        },
-      })
-    }
+    if (state.lastUpdate?.type === syncType.value)
+      return
+    if ((+state.page === +currentSlideNo.value && +clicksContext.value.current === +state.clicks))
+      return
+    // if (state.lastUpdate?.type === 'presenter') {
+    hmrSkipTransition.value = false
+    router.replace({
+      path: getSlidePath(state.page, isPresenter.value),
+      query: {
+        ...router.currentRoute.value.query,
+        clicks: state.clicks || 0,
+      },
+    })
+    // }
   })
 }

package/state/drawings.ts

@@ -9,4 +9,8 @@ export const {
   onUpdate: onDrawingUpdate,
   patch: patchDrawingState,
   state: drawingState,
-} = createSyncState<DrawingsState>(serverDrawingState, serverDrawingState, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+} = createSyncState<DrawingsState>(
+  serverDrawingState,
+  serverDrawingState,
+  __SLIDEV_FEATURE_DRAWINGS_PERSIST__,
+)

package/state/index.ts

@@ -1,56 +1 @@
-import type { DragElementState } from '../composables/useDragElements'
-import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
-import { slideAspect } from '../env'
-
-export const showRecordingDialog = ref(false)
-export const showInfoDialog = ref(false)
-export const showGotoDialog = ref(false)
-export const showOverview = ref(false)
-
-export const shortcutsEnabled = ref(true)
-export const breakpoints = useBreakpoints({
-  xs: 460,
-  ...breakpointsTailwind,
-})
-export const windowSize = useWindowSize()
-export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
-export const fullscreen = useFullscreen(isClient ? document.body : null)
-
-export const activeElement = useActiveElement()
-export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
-export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
-
-export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
-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 skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', false)
-
-export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
-export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
-export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
-export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
-export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
-
-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 function togglePresenterLayout() {
-  presenterLayout.value = presenterLayout.value + 1
-  if (presenterLayout.value > 3)
-    presenterLayout.value = 1
-}
-
-export function increasePresenterFontSize() {
-  presenterNotesFontSize.value = Math.min(2, presenterNotesFontSize.value + 0.1)
-}
-
-export function decreasePresenterFontSize() {
-  presenterNotesFontSize.value = Math.max(0.5, presenterNotesFontSize.value - 0.1)
-}
-
-export const toggleOverview = useToggle(showOverview)
+export * from './storage'

package/state/shared.ts

@@ -11,10 +11,6 @@ export interface SharedState {
     y: number
   }
 
-  viewerPage: number
-  viewerClicks: number
-  viewerClicksTotal: number
-
   lastUpdate?: {
     id: string
     type: 'presenter' | 'viewer'
@@ -26,9 +22,6 @@ const { init, onPatch, onUpdate, patch, state } = createSyncState<SharedState>(s
   page: 1,
   clicks: 0,
   clicksTotal: 0,
-  viewerPage: 1,
-  viewerClicks: 0,
-  viewerClicksTotal: 0,
 })
 
 export {

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

@@ -0,0 +1,97 @@
+import type { DragElementState } from '../composables/useDragElements'
+import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
+import { computed, ref, shallowRef } from 'vue'
+import { slideAspect } from '../env'
+
+export const showRecordingDialog = ref(false)
+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,
+  ...breakpointsTailwind,
+})
+export const windowSize = useWindowSize()
+export const magicKeys = useMagicKeys()
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
+export const fullscreen = useFullscreen(isClient ? document.body : null)
+
+export const activeElement = useActiveElement()
+export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
+export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
+
+export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
+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 })
+export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
+export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
+
+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)
+    presenterLayout.value = 1
+}
+
+export function increasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.min(2, presenterNotesFontSize.value + 0.1)
+}
+
+export function decreasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.max(0.5, presenterNotesFontSize.value - 0.1)
+}
+
+export const toggleOverview = useToggle(showOverview)
+
+export const syncDirections = useLocalStorage(
+  'slidev-sync-directions',
+  {
+    viewerSend: true,
+    viewerReceive: true,
+    presenterSend: true,
+    presenterReceive: true,
+  },
+  {
+    listenToStorageChanges: false,
+    mergeDefaults: true,
+  },
+)

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;
@@ -121,6 +121,16 @@ html {
   transform: translateY(0.1em);
 }
 
+.slidev-form-button {
+  --uno: text-white px-4 py-1 rounded border-b-2;
+  --uno: 'bg-gray-400:50 border-gray-800:50';
+  --uno: 'hover:(bg-gray-400:75 border-gray8:75)';
+}
+.slidev-form-button.primary {
+  --uno: bg-teal-600 border-teal-800;
+  --uno: 'hover:(bg-teal-500 border-teal-700)';
+}
+
 /* Transform the position back for Rough Notation (v-mark) */
 .rough-annotation {
   transform: scale(calc(1 / var(--slidev-slide-scale)));

package/uno.config.ts

@@ -39,6 +39,7 @@ export default defineConfig({
     'z-nav': 'z-50',
     'z-context-menu': 'z-60',
     'z-modal': 'z-70',
+    'z-focus-indicator': 'z-200',
 
     'slidev-glass-effect': 'shadow-xl backdrop-blur-8 border border-main bg-main bg-opacity-75!',
   },

package/logic/hmr.ts

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