@slidev/client 0.49.29 → 0.50.0-beta.10

package/pages/overview.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
-import { useHead } from '@unhead/vue'
 import type { ClicksContext, SlideRoute } from '@slidev/types'
-import { pathPrefix, slidesTitle } from '../env'
-import { getSlidePath } from '../logic/slides'
+import { useHead } from '@unhead/vue'
+import { computed, nextTick, onMounted, reactive, ref, shallowRef } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
-import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
-import SlideContainer from '../internals/SlideContainer.vue'
-import SlideWrapper from '../internals/SlideWrapper.vue'
+import { useNav } from '../composables/useNav'
+import { CLICKS_MAX } from '../constants'
+import { pathPrefix, slidesTitle } from '../env'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
-import ClicksSlider from '../internals/ClicksSlider.vue'
-import { CLICKS_MAX } from '../constants'
-import { useNav } from '../composables/useNav'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlideWrapper from '../internals/SlideWrapper.vue'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { getSlidePath } from '../logic/slides'
 
 const cardWidth = 450
 
@@ -49,7 +49,20 @@ function toggleRoute(route: SlideRoute) {
 }
 
 function wordCount(str: string) {
-  return str.match(/[\w`'\-]+/g)?.length || 0
+  const pattern = /[\w`'\-\u0392-\u03C9\u00C0-\u00FF\u0600-\u06FF\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF\u3040-\u309F\uAC00-\uD7AF]+/g
+  const m = str.match(pattern)
+  let count = 0
+  if (!m)
+    return 0
+  for (let i = 0; i < m.length; i++) {
+    if (m[i].charCodeAt(0) >= 0x4E00) {
+      count += m[i].length
+    }
+    else {
+      count += 1
+    }
+  }
+  return count
 }
 
 function isElementInViewport(el: HTMLElement) {
@@ -170,7 +183,7 @@ onMounted(() => {
             title="Play in new tab"
             @click="openSlideInNewTab(getSlidePath(route, false))"
           >
-            <carbon:presentation-file />
+            <div class="i-carbon:presentation-file" />
           </IconButton>
           <IconButton
             v-if="__DEV__ && route.meta?.slide"
@@ -178,7 +191,7 @@ onMounted(() => {
             title="Open in editor"
             @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
           >
-            <carbon:cics-program />
+            <div class="i-carbon:cics-program" />
           </IconButton>
         </div>
         <div class="flex flex-col gap-2 my5" :style="{ width: `${cardWidth}px` }">
@@ -215,7 +228,7 @@ onMounted(() => {
             :class="edittingNote === route.no ? 'important:op0' : ''"
             @click="edittingNote = route.no"
           >
-            <carbon:pen />
+            <div class="i-carbon:pen" />
           </IconButton>
         </div>
         <NoteEditable

package/pages/play.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef } from 'vue'
 import { useStyleTag } from '@vueuse/core'
-import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { computed, ref, shallowRef } from 'vue'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { registerShortcuts } from '../logic/shortcuts'
+import { useWakeLock } from '../composables/useWakeLock'
 import Controls from '../internals/Controls.vue'
-import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
-import SlidesShow from '../internals/SlidesShow.vue'
+import PresenterMouse from '../internals/PresenterMouse.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
 import { onContextMenu } from '../logic/contextMenu'
-import { useNav } from '../composables/useNav'
-import { useWakeLock } from '../composables/useWakeLock'
-import { useDrawings } from '../composables/useDrawings'
-import PresenterMouse from '../internals/PresenterMouse.vue'
+import { registerShortcuts } from '../logic/shortcuts'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 
 const { next, prev, isPrintMode } = useNav()
 const { isDrawing } = useDrawings()
@@ -38,7 +38,8 @@ if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
 
 if (import.meta.hot) {
-  useStyleTag(computed(() => `
+  useStyleTag(computed(() => showEditor.value
+    ? `
     vite-error-overlay {
       --width: calc(100vw - ${isEditorVertical.value ? 0 : editorWidth.value}px);
       --height: calc(100vh - ${isEditorVertical.value ? editorHeight.value : 0}px);
@@ -49,7 +50,8 @@ if (import.meta.hot) {
       height: calc(var(--height) / var(--slidev-slide-scale));
       transform-origin: top left;
       transform: scale(var(--slidev-slide-scale));
-    }`,
+    }`
+    : '',
   ))
 }
 
@@ -80,7 +82,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
       <template #controls>
         <div
           v-if="!isPrintMode"
-          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
+          class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100 focus-within:opacity-100 focus-visible:opacity-100"
           :class="[
             persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
             isDrawing ? 'pointer-events-none' : '',

package/pages/presenter/print.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
+import { useStyleTag } from '@vueuse/core'
+import { computed } from 'vue'
 import { useNav } from '../../composables/useNav'
 import { configs } from '../../env'
 import NoteDisplay from '../../internals/NoteDisplay.vue'

package/pages/presenter.vue

@@ -1,30 +1,30 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
+import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
+import { createFixedClicks } from '../composables/useClicks'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
-import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { useTimer } from '../composables/useTimer'
+import { useWakeLock } from '../composables/useWakeLock'
 import { slidesTitle } from '../env'
-import { sharedState } from '../state/shared'
-import { registerShortcuts } from '../logic/shortcuts'
-import { onContextMenu } from '../logic/contextMenu'
-import { useTimer } from '../logic/utils'
-import { createFixedClicks } from '../composables/useClicks'
-import SlideWrapper from '../internals/SlideWrapper.vue'
-import SlideContainer from '../internals/SlideContainer.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
+import ContextMenu from '../internals/ContextMenu.vue'
+import DrawingControls from '../internals/DrawingControls.vue'
+import Goto from '../internals/Goto.vue'
+import IconButton from '../internals/IconButton.vue'
 import NavControls from '../internals/NavControls.vue'
-import QuickOverview from '../internals/QuickOverview.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
-import Goto from '../internals/Goto.vue'
+import QuickOverview from '../internals/QuickOverview.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
-import DrawingControls from '../internals/DrawingControls.vue'
-import IconButton from '../internals/IconButton.vue'
-import ClicksSlider from '../internals/ClicksSlider.vue'
-import ContextMenu from '../internals/ContextMenu.vue'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
-import { useWakeLock } from '../composables/useWakeLock'
+import SlideWrapper from '../internals/SlideWrapper.vue'
+import { onContextMenu } from '../logic/contextMenu'
+import { registerShortcuts } from '../logic/shortcuts'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
+import { sharedState } from '../state/shared'
 
 const main = ref<HTMLDivElement>()
 
@@ -49,7 +49,7 @@ useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
-const { timer, resetTimer } = useTimer()
+const { timer, isTimerAvctive, resetTimer, toggleTimer } = useTimer()
 
 const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
@@ -167,33 +167,39 @@ onMounted(() => {
         />
         <div class="border-t border-main py-1 px-2 text-sm">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
-            <carbon:zoom-in />
+            <div class="i-carbon:zoom-in" />
           </IconButton>
           <IconButton title="Decrease font size" @click="decreasePresenterFontSize">
-            <carbon:zoom-out />
+            <div class="i-carbon:zoom-out" />
           </IconButton>
           <IconButton
             v-if="__DEV__"
             title="Edit Notes"
             @click="notesEditing = !notesEditing"
           >
-            <carbon:edit />
+            <div class="i-carbon:edit" />
           </IconButton>
         </div>
       </div>
       <div class="grid-section bottom flex">
         <NavControls :persist="true" />
         <div flex-auto />
-        <div
-          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
-          opacity="50 hover:100"
-          @click="resetTimer"
-        >
-          <carbon:time class="absolute" />
-          <carbon:renew class="absolute opacity-0" />
-        </div>
-        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
-          {{ timer }}
+        <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-else class="i-carbon:play" />
+              </div>
+              <div class="op-80 hover:op-100" @click="resetTimer">
+                <div class="i-carbon:renew" />
+              </div>
+            </div>
+          </div>
+          <div class="text-2xl px-3 my-auto tabular-nums">
+            {{ timer }}
+          </div>
         </div>
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
@@ -215,13 +221,6 @@ onMounted(() => {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover > :first-child {
-  opacity: 0;
-}
-.timer-btn:hover > :last-child {
-  opacity: 1;
-}
-
 .grid-container {
   --uno: bg-gray/20;
   height: 100%;

package/pages/print.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted, watchEffect } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
-import { windowSize } from '../state'
+import { onMounted, watchEffect } from 'vue'
+import { useNav } from '../composables/useNav'
 import PrintContainer from '../internals/PrintContainer.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
-import { useNav } from '../composables/useNav'
+import { windowSize } from '../state'
 
 const { isPrintMode } = useNav()
 

package/setup/code-runners.ts

@@ -1,10 +1,10 @@
-import { createSingletonPromise } from '@antfu/utils'
-import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
-
+import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputs, CodeRunnerOutputText } from '@slidev/types'
 import type ts from 'typescript'
-import { ref } from 'vue'
+
 import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
+import { createSingletonPromise } from '@antfu/utils'
+import { ref } from 'vue'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {

package/setup/context-menu.ts

@@ -1,23 +1,14 @@
 /// <reference types="unplugin-icons/types/vue3" />
+
+import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
+import setups from '#slidev/setups/context-menu'
 import { computed } from 'vue'
-import type { ContextMenuItem } from '@slidev/types'
-import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { fullscreen, showEditor, toggleOverview } from '../state'
-import setups from '#slidev/setups/context-menu'
 
-import IconArrowLeft from '~icons/carbon/arrow-left'
-import IconArrowRight from '~icons/carbon/arrow-right'
-import IconArrowUp from '~icons/carbon/arrow-up'
-import IconArrowDown from '~icons/carbon/arrow-down'
-import IconPen from '~icons/carbon/pen'
-import IconTextNotationToggle from '~icons/carbon/text-annotation-toggle'
-import IconApps from '~icons/carbon/apps'
-import IconPresentationFile from '~icons/carbon/presentation-file'
-import IconUserSpeaker from '~icons/carbon/user-speaker'
-import IconMaximize from '~icons/carbon/maximize'
-import IconMinimize from '~icons/carbon/minimize'
+// @unocss-include
 
 let items: ComputedRef<ContextMenuItem[]> | undefined
 
@@ -51,60 +42,60 @@ export default () => {
     computed(() => [
       {
         small: true,
-        icon: IconArrowLeft,
+        icon: 'i-carbon:arrow-left',
         label: 'Previous Click',
         action: prev,
         disabled: !hasPrev.value,
       },
       {
         small: true,
-        icon: IconArrowRight,
+        icon: 'i-carbon:arrow-right',
         label: 'Next Click',
         action: next,
         disabled: !hasNext.value,
       },
       {
         small: true,
-        icon: IconArrowUp,
+        icon: 'i-carbon:arrow-up',
         label: 'Previous Slide',
         action: prevSlide,
         disabled: currentPage.value <= 1,
       },
       {
         small: true,
-        icon: IconArrowDown,
+        icon: 'i-carbon:arrow-down',
         label: 'Next Slide',
         action: nextSlide,
         disabled: currentPage.value >= total.value,
       },
       'separator',
       {
-        icon: IconTextNotationToggle,
+        icon: 'i-carbon:text-annotation-toggle', // IconTextNotationToggle,
         label: showEditor.value ? 'Hide editor' : 'Show editor',
         action: () => (showEditor.value = !showEditor.value),
       },
       {
-        icon: IconPen,
+        icon: 'i-carbon:pen',
         label: drawingEnabled.value ? 'Hide drawing toolbar' : 'Show drawing toolbar',
         action: () => (drawingEnabled.value = !drawingEnabled.value),
       },
       {
-        icon: IconApps,
+        icon: 'i-carbon:apps',
         label: 'Show slide overview',
         action: toggleOverview,
       },
       isPresenter.value && {
-        icon: IconPresentationFile,
+        icon: 'i-carbon:presentation-file',
         label: 'Exit Presenter Mode',
         action: exitPresenter,
       },
       __SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable.value && {
-        icon: IconUserSpeaker,
+        icon: 'i-carbon:user-speaker',
         label: 'Enter Presenter Mode',
         action: enterPresenter,
       },
       !isEmbedded.value && {
-        icon: isFullscreen.value ? IconMinimize : IconMaximize,
+        icon: isFullscreen.value ? 'i-carbon:minimize' : 'i-carbon:maximize',
         label: isFullscreen.value ? 'Close fullscreen' : 'Enter fullscreen',
         action: toggleFullscreen,
       },

package/setup/main.ts

@@ -1,14 +1,14 @@
 import type { AppContext } from '@slidev/types'
-import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import type { App } from 'vue'
-import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import setups from '#slidev/setups/main'
+import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
 import { createHead } from '@unhead/vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { createVClickDirectives } from '../modules/v-click'
-import { createVMarkDirective } from '../modules/v-mark'
 import { createVDragDirective } from '../modules/v-drag'
+import { createVMarkDirective } from '../modules/v-mark'
 import { createVMotionDirectives } from '../modules/v-motion'
 import setupRoutes from '../setup/routes'
-import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
 

package/setup/mermaid.ts

@@ -1,6 +1,6 @@
 import type { MermaidConfig } from 'mermaid'
-import { createSingletonPromise } from '@antfu/utils'
 import setups from '#slidev/setups/mermaid'
+import { createSingletonPromise } from '@antfu/utils'
 
 export default createSingletonPromise(async () => {
   const setupReturn: MermaidConfig = {

package/setup/monaco.ts

@@ -1,28 +1,25 @@
-import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
-import * as monaco from 'monaco-editor'
-import { watchEffect } from 'vue'
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
+import { createSingletonPromise } from '@antfu/utils'
 import { setupTypeAcquisition } from '@typescript/ata'
-import ts from 'typescript'
+import * as monaco from 'monaco-editor'
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// @ts-expect-error missing types
+import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-
 // @ts-expect-error missing types
 import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
-
 // @ts-expect-error missing types
 import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
 
-// @ts-expect-error missing types
-import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
-
+import ts from 'typescript'
+import { watchEffect } from 'vue'
 import { isDark } from '../logic/dark'
-import configs from '#slidev/configs'
-import setups from '#slidev/setups/monaco'
 
 window.MonacoEnvironment = {
   getWorker(_, label) {
@@ -51,14 +48,13 @@ class ContextViewService2 extends ContextViewService {
   }
 }
 
-const setup = createSingletonPromise(async () => {
-  // Initialize services first, otherwise we can't override them.
-  StandaloneServices.initialize({
-    contextViewService: new SyncDescriptor(ContextViewService2, [], true),
-  })
+// Initialize services first, otherwise we can't override them.
+StandaloneServices.initialize({
+  contextViewService: new SyncDescriptor(ContextViewService2, [], true),
+})
 
+const setup = createSingletonPromise(async () => {
   const defaults = monaco.languages.typescript.typescriptDefaults
-
   defaults.setCompilerOptions({
     ...defaults.getCompilerOptions(),
     strict: true,
@@ -92,7 +88,7 @@ const setup = createSingletonPromise(async () => {
   monaco.languages.register({ id: 'typescript' })
   monaco.languages.register({ id: 'javascript' })
 
-  const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
+  const { shiki, languages, themes, shikiToMonaco } = await import('#slidev/shiki')
   const highlighter = await shiki
 
   const editorOptions: MonacoSetupReturn['editorOptions'] & object = {}
@@ -113,6 +109,10 @@ const setup = createSingletonPromise(async () => {
         : themes.light || 'vitesse-light')
     })
   }
+  // Register all languages, otherwise Monaco will not highlight them
+  for (const lang of languages) {
+    monaco.languages.register({ id: lang })
+  }
 
   return {
     monaco,

package/setup/root.ts

@@ -1,17 +1,17 @@
-import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
+import setups from '#slidev/setups/root'
 import { useHead } from '@unhead/vue'
+import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { createFixedClicks } from '../composables/useClicks'
+import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
+import { useNav } from '../composables/useNav'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext, TRUST_ORIGINS } from '../constants'
 import { configs, slidesTitle } from '../env'
-import { initSharedState, onPatch, patch } from '../state/shared'
-import { initDrawingState } from '../state/drawings'
-import { TRUST_ORIGINS, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { skipTransition } from '../logic/hmr'
-import { makeId } from '../logic/utils'
 import { getSlidePath } from '../logic/slides'
-import { createFixedClicks } from '../composables/useClicks'
-import { useNav } from '../composables/useNav'
-import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
-import setups from '#slidev/setups/root'
+import { makeId } from '../logic/utils'
+import { initDrawingState } from '../state/drawings'
+import { initSharedState, onPatch, patch } from '../state/shared'
 
 export default function setupRoot() {
   const app = getCurrentInstance()!.appContext.app

package/setup/shortcuts.ts

@@ -1,12 +1,12 @@
-import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF } from '../utils'
+import setups from '#slidev/setups/shortcuts'
+import { and, not, or } from '@vueuse/math'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { toggleDark } from '../logic/dark'
 import { activeDragElement, magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
+import { downloadPDF } from '../utils'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
-import setups from '#slidev/setups/shortcuts'
 
 export default function setupShortcuts() {
   const { go, goFirst, goLast, next, nextSlide, prev, prevSlide } = useNav()
@@ -63,8 +63,7 @@ export default function setupShortcuts() {
   const baseShortcutNames = new Set(shortcuts.map(s => s.name))
 
   for (const setup of setups) {
-    const result = setup(context, shortcuts)
-    shortcuts = shortcuts.concat(result)
+    shortcuts = setup(context, shortcuts)
   }
 
   const remainingBaseShortcutNames = shortcuts.filter(s => s.name && baseShortcutNames.has(s.name))

package/state/drawings.ts

@@ -6,6 +6,7 @@ export type DrawingsState = Record<number, string | undefined>
 export const {
   init: initDrawingState,
   onPatch: onPatchDrawingState,
+  onUpdate: onDrawingUpdate,
   patch: patchDrawingState,
   state: drawingState,
 } = createSyncState<DrawingsState>(serverDrawingState, serverDrawingState, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)

package/state/index.ts

@@ -1,7 +1,7 @@
+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'
-import type { DragElementState } from '../composables/useDragElements'
 
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)

package/state/shared.ts

@@ -22,7 +22,7 @@ export interface SharedState {
   }
 }
 
-const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState, {
+const { init, onPatch, onUpdate, patch, state } = createSyncState<SharedState>(serverState, {
   page: 1,
   clicks: 0,
   clicksTotal: 0,
@@ -34,6 +34,7 @@ const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState
 export {
   init as initSharedState,
   onPatch,
+  onUpdate as onSharedUpdate,
   patch,
   state as sharedState,
 }

package/state/snapshot.ts

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