@slidev/client 0.50.0 → 0.51.0-beta.1

package/composables/useClicks.ts

@@ -165,7 +165,7 @@ export function createFixedClicks(
 ): ClicksContext {
   const clicksStart = route?.meta.slide?.frontmatter.clicksStart ?? 0
   return createClicksContextBase(
-    computed(() => Math.max(toValue(currentInit), clicksStart)),
+    ref(Math.max(toValue(currentInit), clicksStart)),
     clicksStart,
     route?.meta?.clicks,
   )

package/composables/useTimer.ts

@@ -13,7 +13,7 @@ export function useTimer() {
 
   return {
     timer,
-    isTimerAvctive: isActive,
+    isTimerActive: isActive,
     resetTimer: reset,
     toggleTimer: () => (isActive.value ? pause() : resume()),
   }

package/internals/Badge.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  getHashColorFromString,
+  getHsla,
+} from '../logic/color'
+
+const props = withDefaults(
+  defineProps<{
+    text?: string
+    color?: boolean | number
+    as?: string
+    size?: string
+  }>(),
+  {
+    color: true,
+  },
+)
+
+const style = computed(() => {
+  if (!props.text || props.color === false)
+    return {}
+  return {
+    color: typeof props.color === 'number'
+      ? getHsla(props.color)
+      : getHashColorFromString(props.text),
+    background: typeof props.color === 'number'
+      ? getHsla(props.color, 0.1)
+      : getHashColorFromString(props.text, 0.1),
+  }
+})
+
+const sizeClasses = computed(() => {
+  switch (props.size || 'sm') {
+    case 'sm':
+      return 'px-1.5 text-11px leading-1.6em'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <component :is="as || 'span'" ws-nowrap rounded :class="sizeClasses" :style>
+    <slot>
+      <span v-text="props.text" />
+    </slot>
+  </component>
+</template>

package/internals/{DevicesList.vue → DevicesSelectors.vue}

@@ -43,13 +43,21 @@ ensureDevicesListPermissions()
 </script>
 
 <template>
-  <div class="text-sm">
-    <SelectList v-model="currentCamera" title="Camera" :items="camerasItems" />
-    <SelectList v-model="currentMic" title="Microphone" :items="microphonesItems" />
+  <div text-sm flex="~ col gap-2">
+    <SelectList
+      v-model="currentCamera"
+      title="Camera"
+      :items="camerasItems"
+    />
+    <SelectList
+      v-model="currentMic"
+      title="Microphone"
+      :items="microphonesItems"
+    />
     <SelectList
       v-if="mimeTypeItems.length"
       v-model="mimeType"
-      title="mimeType"
+      title="Video Format"
       :items="mimeTypeItems"
     />
   </div>

package/internals/MenuButton.vue

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

package/internals/NavControls.vue

@@ -10,6 +10,7 @@ import { downloadPDF } from '../utils'
 import IconButton from './IconButton.vue'
 import MenuButton from './MenuButton.vue'
 import Settings from './Settings.vue'
+import SyncControls from './SyncControls.vue'
 
 import VerticalDivider from './VerticalDivider.vue'
 
@@ -48,7 +49,7 @@ function onMouseLeave() {
 
 const barStyle = computed(() => props.persist
   ? 'text-$slidev-controls-foreground bg-transparent'
-  : 'rounded-md bg-main shadow-xl dark:border dark:border-main')
+  : 'rounded-md bg-main shadow-xl border border-main')
 
 const RecordingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_RECORD__)
@@ -130,19 +131,15 @@ if (__SLIDEV_FEATURE_RECORD__)
         >
           <div class="i-carbon:text-annotation-toggle" />
         </IconButton>
-
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial flex items-center" @click="togglePresenterLayout">
-          <div class="i-carbon:template" />
-          {{ presenterLayout }}
-        </IconButton>
       </template>
+
       <template v-if="!__DEV__">
         <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
           <div class="i-carbon:download" />
         </IconButton>
       </template>
 
-      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__">
+      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__ && !isEmbedded && !isPresenter">
         <IconButton title="Browser Exporter" to="/export">
           <div class="i-carbon:document-pdf" />
         </IconButton>
@@ -156,7 +153,16 @@ if (__SLIDEV_FEATURE_RECORD__)
         <div class="i-carbon:information" />
       </IconButton>
 
-      <template v-if="!isPresenter && !isEmbedded">
+      <template v-if="!isEmbedded">
+        <VerticalDivider />
+
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial flex items-center" @click="togglePresenterLayout">
+          <div class="i-carbon:template" />
+          {{ presenterLayout }}
+        </IconButton>
+
+        <SyncControls v-if="__SLIDEV_FEATURE_PRESENTER__" />
+
         <MenuButton>
           <template #button>
             <IconButton title="More Options">

package/internals/RecordingControls.vue

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@vueuse/core'
 import { onMounted, watch } from 'vue'
 import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
-import DevicesList from './DevicesList.vue'
+import DevicesSelectors from './DevicesSelectors.vue'
 import IconButton from './IconButton.vue'
 import MenuButton from './MenuButton.vue'
 
@@ -59,7 +59,7 @@ onMounted(() => {
       </IconButton>
     </template>
     <template #menu>
-      <DevicesList />
+      <DevicesSelectors />
     </template>
   </MenuButton>
 </template>

package/internals/RecordingDialog.vue

@@ -2,7 +2,7 @@
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
 import { getFilename, mimeType, recordCamera, recorder, recordingName } from '../logic/recording'
-import DevicesList from './DevicesList.vue'
+import DevicesSelectors from './DevicesSelectors.vue'
 import Modal from './Modal.vue'
 
 const props = defineProps({
@@ -72,14 +72,14 @@ async function start() {
           </div>
         </div>
       </div>
-      <DevicesList />
+      <DevicesSelectors />
     </div>
     <div class="flex my-1">
-      <button class="cancel" @click="close">
+      <button class="slidev-form-button" @click="close">
         Cancel
       </button>
       <div class="flex-auto" />
-      <button @click="start">
+      <button class="slidev-form-button primary" @click="start">
         Start
       </button>
     </div>
@@ -111,15 +111,5 @@ async function start() {
   input[type='text'] {
     @apply border border-main rounded px-2 py-1;
   }
-
-  button {
-    @apply bg-orange-400 text-white px-4 py-1 rounded border-b-2 border-orange-600;
-    @apply hover:(bg-orange-500 border-orange-700);
-  }
-
-  button.cancel {
-    @apply bg-gray-400 bg-opacity-50 text-white px-4 py-1 rounded border-b-2 border-main;
-    @apply hover:(bg-opacity-75 border-opacity-75);
-  }
 }
 </style>

package/internals/ScreenCaptureMirror.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { shallowRef, useTemplateRef } from 'vue'
+
+const video = useTemplateRef('video')
+const stream = shallowRef<MediaStream | null>(null)
+const started = shallowRef(false)
+
+async function startCapture() {
+  stream.value = await navigator.mediaDevices.getDisplayMedia({
+    video: {
+      // @ts-expect-error missing types
+      cursor: 'always',
+    },
+    audio: false,
+    selfBrowserSurface: 'include',
+    preferCurrentTab: false,
+  })
+  video.value!.srcObject = stream.value
+  video.value!.play()
+  started.value = true
+  stream.value.addEventListener('inactive', () => {
+    video.value!.srcObject = null
+    started.value = false
+  })
+  stream.value.addEventListener('ended', () => {
+    video.value!.srcObject = null
+    started.value = false
+  })
+}
+</script>
+
+<template>
+  <div h-full w-full>
+    <video v-show="started" ref="video" class="w-full h-full object-contain" />
+    <div v-if="!started" w-full h-full flex="~ col gap-4 items-center justify-center">
+      <div op50>
+        Use screen capturing to mirror your main screen back to presenter view.<br>
+        Click the button below and <b>select your other monitor or window</b>.
+      </div>
+      <button class="slidev-form-button" @click="startCapture">
+        Start Screen Mirroring
+      </button>
+    </div>
+  </div>
+</template>

package/internals/SegmentControl.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import Badge from './Badge.vue'
+
+defineProps<{
+  options: { label: string, value: any }[]
+  modelValue: any
+}>()
+
+defineEmits<{
+  (event: 'update:modelValue', newValue: any): void
+}>()
+</script>
+
+<template>
+  <div flex="~ gap-1 items-center" rounded bg-gray:2 p1>
+    <Badge
+      v-for="option in options"
+      :key="option.value"
+      class="px-2 py-1 text-xs font-mono"
+      :class="option.value === modelValue ? '' : 'op50'"
+      :color="option.value === modelValue"
+      :aria-pressed="option.value === modelValue"
+      size="none"
+      :text="option.label"
+      as="button"
+      @click="$emit('update:modelValue', option.value)"
+    />
+  </div>
+</template>

package/internals/SelectList.vue

@@ -44,10 +44,6 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 </template>
 
 <style lang="postcss" scoped>
-.select-list {
-  @apply my-2;
-}
-
 .item {
   @apply flex rounded whitespace-nowrap py-1 gap-1 px-2 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
 
@@ -57,6 +53,6 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .title {
-  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1 select-none text-nowrap;
+  @apply text-sm op75 px4 pt2 pb1 select-none text-nowrap font-bold border-t border-main;
 }
 </style>

package/internals/Settings.vue

@@ -1,9 +1,12 @@
 <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'
 
+const { isPresenter } = useNav()
+
 const scaleItems: SelectionItem<number>[] = [
   {
     display: 'Fit',
@@ -30,11 +33,18 @@ const wakeLockItems: SelectionItem<boolean>[] = [
 </script>
 
 <template>
-  <div class="text-sm select-none mb-2">
-    <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
+  <div text-sm select-none flex="~ col gap-2" min-w-30>
+    <SelectList
+      v-if="!isPresenter"
+      v-model="slideScale"
+      title="Scale"
+      :items="scaleItems"
+    />
     <SelectList
       v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported"
-      v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems"
+      v-model="wakeLockEnabled"
+      title="Wake lock"
+      :items="wakeLockItems"
     />
   </div>
 </template>

package/internals/SyncControls.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
+import { syncDirections } from '../state'
+import IconButton from './IconButton.vue'
+import MenuButton from './MenuButton.vue'
+import SelectList from './SelectList.vue'
+
+const { isPresenter } = useNav()
+
+const shouldReceive = computed({
+  get: () => isPresenter.value
+    ? syncDirections.value.presenterReceive
+    : syncDirections.value.viewerReceive,
+  set(v) {
+    if (isPresenter.value) {
+      syncDirections.value.presenterReceive = v
+    }
+    else {
+      syncDirections.value.viewerReceive = v
+    }
+  },
+})
+
+const shouldSend = computed({
+  get: () => isPresenter.value
+    ? syncDirections.value.presenterSend
+    : syncDirections.value.viewerSend,
+  set(v) {
+    if (isPresenter.value) {
+      syncDirections.value.presenterSend = v
+    }
+    else {
+      syncDirections.value.viewerSend = v
+    }
+  },
+})
+</script>
+
+<template>
+  <MenuButton>
+    <template #button>
+      <IconButton title="Change sync settings">
+        <div class="i-ph:arrow-up-bold mx--1.2 scale-x-80" :class="shouldSend ? 'text-green6 dark:text-green' : 'op30'" />
+        <div class="i-ph:arrow-down-bold mx--1.2 scale-x-80" :class="shouldReceive ? 'text-green6 dark:text-green' : 'op30'" />
+      </IconButton>
+    </template>
+    <template #menu>
+      <div text-sm flex="~ col gap-2">
+        <div px4 pt3 pb1 ws-nowrap>
+          <span op75>Slides navigation syncing for </span>
+          <span font-bold text-primary>{{ isPresenter ? 'presenter' : 'viewer' }}</span>
+        </div>
+        <SelectList
+          v-model="shouldSend"
+          title="Send Changes"
+          :items="[
+            { value: true, display: 'On' },
+            { value: false, display: 'Off' },
+          ]"
+        />
+        <SelectList
+          v-model="shouldReceive"
+          title="Receive Changes"
+          :items="[
+            { value: true, display: 'On' },
+            { value: false, display: 'Off' },
+          ]"
+        />
+      </div>
+    </template>
+  </MenuButton>
+</template>

package/logic/color.ts

@@ -0,0 +1,62 @@
+import { isDark } from './dark'
+
+/**
+ * Predefined color map for matching the branding
+ *
+ * Accpet a 6-digit hex color string or a hue number
+ * Hue numbers are preferred because they will adapt better contrast in light/dark mode
+ *
+ * Hue numbers reference:
+ * - 0: red
+ * - 30: orange
+ * - 60: yellow
+ * - 120: green
+ * - 180: cyan
+ * - 240: blue
+ * - 270: purple
+ */
+const predefinedColorMap = {
+  error: 0,
+  client: 60,
+} as Record<string, number>
+
+export function getHashColorFromString(
+  name: string,
+  opacity: number | string = 1,
+) {
+  if (predefinedColorMap[name])
+    return getHsla(predefinedColorMap[name], opacity)
+
+  let hash = 0
+  for (let i = 0; i < name.length; i++)
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  const hue = hash % 360
+  return getHsla(hue, opacity)
+}
+
+export function getHsla(
+  hue: number,
+  opacity: number | string = 1,
+) {
+  const saturation = hue === -1
+    ? 0
+    : isDark.value ? 50 : 100
+  const lightness = isDark.value ? 60 : 20
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`
+}
+
+export function getPluginColor(name: string, opacity = 1): string {
+  if (predefinedColorMap[name]) {
+    const color = predefinedColorMap[name]
+    if (typeof color === 'number') {
+      return getHsla(color, opacity)
+    }
+    else {
+      if (opacity === 1)
+        return color
+      const opacityHex = Math.floor(opacity * 255).toString(16).padStart(2, '0')
+      return color + opacityHex
+    }
+  }
+  return getHashColorFromString(name, opacity)
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.50.0",
+  "version": "0.51.0-beta.1",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -32,21 +32,21 @@
     "@iconify-json/carbon": "^1.2.5",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.2",
-    "@shikijs/monaco": "^1.24.2",
-    "@shikijs/vitepress-twoslash": "^1.24.2",
+    "@shikijs/monaco": "^1.24.4",
+    "@shikijs/vitepress-twoslash": "^1.24.4",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
     "@unhead/vue": "^1.11.14",
-    "@unocss/reset": "^0.65.1",
-    "@vueuse/core": "^12.0.0",
-    "@vueuse/math": "^12.0.0",
+    "@unocss/reset": "^0.65.3",
+    "@vueuse/core": "^12.2.0",
+    "@vueuse/math": "^12.2.0",
     "@vueuse/motion": "^2.2.6",
     "drauu": "^0.4.2",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "html-to-image": "^1.11.11",
-    "katex": "^0.16.17",
+    "katex": "^0.16.18",
     "lz-string": "^1.5.0",
     "mermaid": "^11.4.1",
     "monaco-editor": "0.51.0",
@@ -54,17 +54,17 @@
     "pptxgenjs": "^3.12.0",
     "prettier": "^3.4.2",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.24.2",
+    "shiki": "^1.24.4",
     "shiki-magic-move": "^0.5.2",
     "typescript": "5.6.3",
-    "unocss": "^0.65.1",
+    "unocss": "^0.65.3",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "yaml": "^2.6.1",
-    "@slidev/parser": "0.50.0",
-    "@slidev/types": "0.50.0"
+    "@slidev/parser": "0.51.0-beta.1",
+    "@slidev/types": "0.51.0-beta.1"
   },
   "devDependencies": {
-    "vite": "^6.0.3"
+    "vite": "^6.0.6"
   }
 }

package/pages/export.vue

@@ -238,8 +238,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,22 +253,22 @@ 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>
@@ -325,10 +325,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/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

@@ -11,6 +11,7 @@ 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 { initDrawingState } from '../state/drawings'
 import { initSharedState, onPatch, patch } from '../state/shared'
 
@@ -58,30 +59,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 +89,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') {
+    skipTransition.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/storage.ts

@@ -0,0 +1,70 @@
+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 const syncDirections = useLocalStorage(
+  'slidev-sync-directions',
+  {
+    viewerSend: true,
+    viewerReceive: true,
+    presenterSend: true,
+    presenterReceive: true,
+  },
+  {
+    listenToStorageChanges: false,
+    mergeDefaults: true,
+  },
+)

package/styles/index.css

@@ -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!',
   },