@slidev/client 0.50.0-beta.6 → 0.50.0-beta.8

package/builtin/Monaco.vue

@@ -197,6 +197,7 @@ onMounted(async () => {
   })
 
   nextTick(() => monaco.editor.remeasureFonts())
+  setTimeout(() => monaco.editor.remeasureFonts(), 1000)
 })
 </script>
 

package/builtin/Tweet.vue

@@ -55,7 +55,7 @@ onMounted(() => {
     <div ref="tweet" class="tweet slidev-tweet">
       <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
-          <carbon:logo-twitter />
+          <div class="i-carbon:logo-twitter" />
           <span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
         </div>
       </div>

package/composables/useDragElements.ts

@@ -69,7 +69,7 @@ export function useDragElementsUpdater(no: number) {
 
       section = type === 'prop'
       // eslint-disable-next-line regexp/no-super-linear-backtracking
-        ? section.replace(/<(v-?drag-?\w*)(.*?)(\/)?>/gi, (full, tag, attrs, selfClose, index) => {
+        ? section.replace(/<(v-?drag-?\w*)(.*?)(\/)?>/gi, (full, tag, attrs, selfClose = '', index) => {
           if (index === idx) {
             replaced = true
             const posMatch = attrs.match(/pos=".*?"/)

package/composables/useTimer.ts

@@ -0,0 +1,20 @@
+import { useInterval } from '@vueuse/core'
+import { computed } from 'vue'
+
+export function useTimer() {
+  const { counter, isActive, reset, pause, resume } = useInterval(1000, { controls: true })
+
+  const timer = computed(() => {
+    const passed = counter.value
+    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
+    const min = Math.floor(passed / 60).toString().padStart(2, '0')
+    return `${min}:${sec}`
+  })
+
+  return {
+    timer,
+    isTimerAvctive: isActive,
+    resetTimer: reset,
+    toggleTimer: () => (isActive.value ? pause() : resume()),
+  }
+}

package/constants.ts

@@ -45,6 +45,7 @@ export const FRONTMATTER_FIELDS = [
   'transition',
   'zoom',
   'dragPos',
+  'lang',
 ]
 
 export const HEADMATTER_FIELDS = [

package/internals/ClicksSlider.vue

@@ -42,7 +42,7 @@ function onMousedown() {
     :class="length && props.clicksContext.isMounted ? '' : 'op50'"
   >
     <div class="flex gap-0.2 items-center min-w-16 font-mono mr1">
-      <carbon:cursor-1 text-sm op50 />
+      <div class="i-carbon:cursor-1 text-sm op50" />
       <template v-if="current >= 0 && current !== CLICKS_MAX && active">
         <div flex-auto />
         <span text-primary>{{ current }}</span>

package/internals/CodeRunner.vue

@@ -119,7 +119,7 @@ else if (autorun)
   </div>
   <div v-if="code.trim()" class="absolute right-1 top-1 max-h-full flex gap-1">
     <IconButton class="w-8 h-8 max-h-full flex justify-center items-center" title="Run code" @click="triggerRun">
-      <carbon:play />
+      <div class="i-carbon:play" />
     </IconButton>
   </div>
 </template>

package/internals/ContextMenu.vue

@@ -69,12 +69,13 @@ const top = computed(() => {
       <div v-if="item === 'separator'" :key="index" class="w-full my1 border-t border-main" />
       <div
         v-else-if="item.small"
-        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded"
+        class="p-2 w-[40px] h-[40px] inline-block text-center cursor-pointer rounded flex"
         :class="item.disabled ? `op40` : `hover:bg-active`"
         :title="(item.label as string)"
         @click="item.action"
       >
-        <component :is="item.icon" />
+        <div v-if="typeof item.icon === 'string'" :class="item.icon" class="text-1.2em ma" />
+        <component :is="item.icon" v-else />
       </div>
       <div
         v-else
@@ -82,8 +83,9 @@ const top = computed(() => {
         :class="item.disabled ? `op40` : `hover:bg-active`"
         @click="item.action"
       >
-        <div class="mx-auto">
-          <component :is="item.icon" />
+        <div class="mx-auto flex">
+          <div v-if="typeof item.icon === 'string'" :class="item.icon" class="text-1.2em ma" />
+          <component :is="item.icon" v-else />
         </div>
         <div v-if="typeof item.label === 'string'">
           {{ item.label }}

package/internals/DrawingControls.vue

@@ -49,7 +49,7 @@ function setBrushColor(color: typeof brush.color) {
     :initial-y="10"
   >
     <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <carbon:pen />
+      <div class="i-carbon:pen" />
     </IconButton>
     <IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
@@ -57,16 +57,16 @@ function setBrushColor(color: typeof brush.color) {
       </svg>
     </IconButton>
     <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <carbon:arrow-up-right />
+      <div class="i-carbon:arrow-up-right" />
     </IconButton>
     <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <carbon:radio-button />
+      <div class="i-carbon:radio-button" />
     </IconButton>
     <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <carbon:checkbox />
+      <div class="i-carbon:checkbox" />
     </IconButton>
     <IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <carbon:erase />
+      <div class="i-carbon:erase" />
     </IconButton>
 
     <VerticalDivider />
@@ -107,19 +107,19 @@ function setBrushColor(color: typeof brush.color) {
     <VerticalDivider />
 
     <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
-      <carbon:undo />
+      <div class="i-carbon:undo" />
     </IconButton>
     <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
-      <carbon:redo />
+      <div class="i-carbon:redo" />
     </IconButton>
     <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
-      <carbon:trash-can />
+      <div class="i-carbon:trash-can" />
     </IconButton>
 
     <VerticalDivider />
     <IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
-      <carbon:pin v-show="!drawingPinned" />
+      <div v-show="drawingPinned" class="i-carbon:pin-filled transform -rotate-45" />
+      <div v-show="!drawingPinned" class="i-carbon:pin" />
     </IconButton>
     <IconButton
       v-if="drawingEnabled"
@@ -127,8 +127,8 @@ function setBrushColor(color: typeof brush.color) {
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
-      <carbon:error v-show="drawingPinned" />
-      <carbon:close-outline v-show="!drawingPinned" />
+      <div v-show="drawingPinned" class="i-carbon:error" />
+      <div v-show="!drawingPinned" class="i-carbon:close-outline" />
     </IconButton>
   </Draggable>
 </template>

package/internals/NavControls.vue

@@ -63,17 +63,17 @@ if (__SLIDEV_FEATURE_RECORD__)
       @mouseleave="onMouseLeave"
     >
       <IconButton v-if="!isEmbedded" :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
-        <carbon:minimize v-if="isFullscreen" />
-        <carbon:maximize v-else />
+        <div v-if="isFullscreen" class="i-carbon:minimize" />
+        <div v-else class="i-carbon:maximize" />
       </IconButton>
       <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prev">
-        <carbon:arrow-left />
+        <div class="i-carbon:arrow-left" />
       </IconButton>
       <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="next">
-        <carbon:arrow-right />
+        <div class="i-carbon:arrow-right" />
       </IconButton>
       <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
-        <carbon:apps />
+        <div class="i-carbon:apps" />
       </IconButton>
       <IconButton
         v-if="!isColorSchemaConfigured"
@@ -104,7 +104,7 @@ if (__SLIDEV_FEATURE_RECORD__)
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
         <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
-          <carbon:pen />
+          <div class="i-carbon:pen" />
           <div
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
@@ -116,10 +116,10 @@ if (__SLIDEV_FEATURE_RECORD__)
 
       <template v-if="!isEmbedded">
         <IconButton v-if="isPresenter" title="Play Mode" @click="exitPresenter">
-          <carbon:presentation-file />
+          <div class="i-carbon:presentation-file" />
         </IconButton>
         <IconButton v-if="__SLIDEV_FEATURE_PRESENTER__ && isPresenterAvailable" title="Presenter Mode" @click="enterPresenter">
-          <carbon:user-speaker />
+          <div class="i-carbon:user-speaker" />
         </IconButton>
 
         <IconButton
@@ -128,17 +128,17 @@ if (__SLIDEV_FEATURE_RECORD__)
           class="lt-md:hidden"
           @click="showEditor = !showEditor"
         >
-          <carbon:text-annotation-toggle />
+          <div class="i-carbon:text-annotation-toggle" />
         </IconButton>
 
         <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
-          <carbon:template />
+          <div class="i-carbon:template" />
           {{ presenterLayout }}
         </IconButton>
       </template>
       <template v-if="!__DEV__">
         <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
-          <carbon:download />
+          <div class="i-carbon:download" />
         </IconButton>
       </template>
 
@@ -147,14 +147,14 @@ if (__SLIDEV_FEATURE_RECORD__)
         title="Show info"
         @click="showInfoDialog = !showInfoDialog"
       >
-        <carbon:information />
+        <div class="i-carbon:information" />
       </IconButton>
 
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
             <IconButton title="Adjust settings">
-              <carbon:settings-adjust />
+              <div class="i-carbon:settings-adjust" />
             </IconButton>
           </template>
           <template #menu>

package/internals/QuickOverview.vue

@@ -159,7 +159,7 @@ watchEffect(() => {
   </Transition>
   <div v-if="showOverview" class="fixed top-4 right-4 z-20 text-gray-400 flex flex-col items-center gap-2">
     <IconButton title="Close" class="text-2xl" @click="close">
-      <carbon:close />
+      <div class="i-carbon:close" />
     </IconButton>
     <IconButton
       v-if="__SLIDEV_FEATURE_PRESENTER__"
@@ -170,7 +170,7 @@ watchEffect(() => {
       tab-index="-1"
       class="text-2xl"
     >
-      <carbon:list-boxes />
+      <div class="i-carbon:list-boxes" />
     </IconButton>
   </div>
 </template>

package/internals/RecordingControls.vue

@@ -41,7 +41,7 @@ onMounted(() => {
     title="Toggle camera view"
     @click="toggleAvatar"
   >
-    <carbon:user-avatar />
+    <div class="i-carbon:user-avatar" />
   </IconButton>
 
   <IconButton
@@ -49,13 +49,13 @@ onMounted(() => {
     :title="recording ? 'Stop record video' : 'Record video'"
     @click="toggleRecording"
   >
-    <carbon:stop-outline v-if="recording" />
-    <carbon:video v-else />
+    <div v-if="recording" class="i-carbon:stop-outline" />
+    <div v-else class="i-carbon:video" />
   </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
       <IconButton title="Select recording device" class="h-full !text-sm !px-0 aspect-initial">
-        <carbon:chevron-up class="opacity-50" />
+        <div class="i-carbon:chevron-up opacity-50" />
       </IconButton>
     </template>
     <template #menu>

package/internals/RecordingDialog.vue

@@ -34,7 +34,7 @@ async function start() {
 <template>
   <Modal v-model="value" class="px-6 py-4 recording-dialog flex flex-col gap-2">
     <div class="flex gap-2 text-xl">
-      <carbon:video class="my-auto" />Recording
+      <div class="i-carbon:video my-auto" />Recording
     </div>
     <div class="grid grid-cols-2 gap-4">
       <div class="flex flex-col gap-2 py-2">

package/internals/SelectList.vue

@@ -34,8 +34,10 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
         :class="{ active: value === item.value }"
         @click="() => { value = item.value; item.onClick?.() }"
       >
-        <carbon:checkmark class="text-green-500" :class="{ 'opacity-0': value !== item.value }" />
-        {{ item.display || item.value }}
+        <div class="i-carbon:checkmark text-green-500 mya" :class="{ 'opacity-0': value !== item.value }" />
+        <div :class="{ 'opacity-50': value !== item.value }">
+          {{ item.display || item.value }}
+        </div>
       </div>
     </div>
   </div>
@@ -47,7 +49,7 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .item {
-  @apply flex rounded whitespace-nowrap py-1 px-4 cursor-default hover:bg-gray-400 hover:bg-opacity-10;
+  @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;

package/internals/SideEditor.vue

@@ -143,13 +143,13 @@ throttledWatch(
           title="Switch to content tab" :class="tab === 'content' ? 'text-primary' : ''"
           @click="switchTab('content')"
         >
-          <carbon:account />
+          <div class="i-carbon:account" />
         </IconButton>
         <IconButton
           title="Switch to notes tab" :class="tab === 'note' ? 'text-primary' : ''"
           @click="switchTab('note')"
         >
-          <carbon:align-box-bottom-right />
+          <div class="i-carbon:align-box-bottom-right" />
         </IconButton>
       </div>
       <span class="text-2xl pt-1">
@@ -158,17 +158,17 @@ throttledWatch(
       <div class="flex-auto" />
       <template v-if="resize">
         <IconButton v-if="vertical" title="Dock to right" @click="vertical = false">
-          <carbon:open-panel-right />
+          <div class="i-carbon:open-panel-right" />
         </IconButton>
         <IconButton v-else title="Dock to bottom" @click="vertical = true">
-          <carbon:open-panel-bottom />
+          <div class="i-carbon:open-panel-bottom" />
         </IconButton>
       </template>
       <IconButton title="Open in editor" @click="openInEditor()">
-        <carbon:launch />
+        <div class="i-carbon:launch" />
       </IconButton>
       <IconButton title="Close" @click="close">
-        <carbon:close />
+        <div class="i-carbon:close" />
       </IconButton>
     </div>
     <div class="relative overflow-hidden rounded" style="background-color: var(--slidev-code-background)">

package/internals/SlideWrapper.vue

@@ -53,6 +53,7 @@ const style = computed<CSSProperties>(() => ({
     :data-slidev-no="props.route.no"
     :class="getSlideClass(route, ['slide', 'presenter'].includes(props.renderContext) ? '' : 'disable-view-transition')"
     :style="style"
+    :lang="props.route.meta.slide.frontmatter.lang"
   >
     <SlideBottom />
     <component :is="props.route.component" />

package/logic/utils.ts

@@ -1,27 +1,4 @@
 import { parseRangeString } from '@slidev/parser/core'
-import { useTimestamp } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-export function useTimer() {
-  const tsStart = ref(Date.now())
-  const now = useTimestamp({
-    interval: 1000,
-  })
-  const timer = computed(() => {
-    const passed = (now.value - tsStart.value) / 1000
-    const sec = Math.floor(passed % 60).toString().padStart(2, '0')
-    const min = Math.floor(passed / 60).toString().padStart(2, '0')
-    return `${min}:${sec}`
-  })
-  function resetTimer() {
-    tsStart.value = now.value
-  }
-
-  return {
-    timer,
-    resetTimer,
-  }
-}
 
 export function makeId(length = 5) {
   const result = []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.50.0-beta.6",
+  "version": "0.50.0-beta.8",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,40 +29,40 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.10",
-    "@iconify-json/carbon": "^1.2.3",
+    "@iconify-json/carbon": "^1.2.4",
     "@iconify-json/ph": "^1.2.1",
     "@iconify-json/svg-spinners": "^1.2.1",
-    "@shikijs/monaco": "^1.22.1",
-    "@shikijs/vitepress-twoslash": "^1.22.1",
+    "@shikijs/monaco": "^1.24.0",
+    "@shikijs/vitepress-twoslash": "^1.24.0",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.7",
-    "@unhead/vue": "^1.11.10",
-    "@unocss/reset": "^0.63.6",
-    "@vueuse/core": "^11.1.0",
-    "@vueuse/math": "^11.1.0",
+    "@unhead/vue": "^1.11.13",
+    "@unocss/reset": "^0.65.0-beta.2",
+    "@vueuse/core": "^12.0.0",
+    "@vueuse/math": "^12.0.0",
     "@vueuse/motion": "^2.2.6",
-    "drauu": "^0.4.1",
+    "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.11",
     "lz-string": "^1.5.0",
-    "mermaid": "^11.3.0",
-    "monaco-editor": "^0.52.0",
-    "prettier": "^3.3.3",
+    "mermaid": "^11.4.1",
+    "monaco-editor": "0.51.0",
+    "prettier": "^3.4.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.22.0",
+    "shiki": "^1.24.0",
     "shiki-magic-move": "^0.5.0",
-    "typescript": "^5.6.3",
-    "unocss": "^0.63.4",
-    "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
-    "yaml": "^2.6.0",
-    "@slidev/types": "0.50.0-beta.6",
-    "@slidev/parser": "0.50.0-beta.6"
+    "typescript": "5.6.3",
+    "unocss": "^0.65.0-beta.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "yaml": "^2.6.1",
+    "@slidev/parser": "0.50.0-beta.8",
+    "@slidev/types": "0.50.0-beta.8"
   },
   "devDependencies": {
-    "vite": "^5.4.9"
+    "vite": "^6.0.1"
   }
 }

package/pages/entry.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="h-full w-full flex items-center justify-center gap-5 lt-md:flex-col">
     <RouterLink to="/" class="page-link">
-      <carbon:presentation-file /> Slides
+      <div class="i-carbon:presentation-file" /> Slides
     </RouterLink>
     <RouterLink to="/presenter" class="page-link">
-      <carbon:user-speaker /> Presenter
+      <div class="i-carbon:user-speaker" /> Presenter
     </RouterLink>
     <RouterLink to="/notes" class="page-link">
-      <carbon:catalog /> Notes
+      <div class="i-carbon:catalog" /> Notes
     </RouterLink>
     <RouterLink to="/overview" class="page-link">
-      <carbon:list-boxes /> Overview
+      <div class="i-carbon:list-boxes" /> Overview
     </RouterLink>
   </div>
 </template>

package/pages/notes.vue

@@ -67,14 +67,14 @@ const clicksContext = computed(() => {
     <div class="flex-none border-t border-main">
       <div class="flex gap-1 items-center px-6 py-3">
         <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
-          <carbon:minimize v-if="isFullscreen" />
-          <carbon:maximize v-else />
+          <div v-if="isFullscreen" class="i-carbon:minimize" />
+          <div v-else class="i-carbon:maximize" />
         </IconButton>
         <IconButton title="Increase font size" @click="increaseFontSize">
-          <carbon:zoom-in />
+          <div class="i-carbon:zoom-in" />
         </IconButton>
         <IconButton title="Decrease font size" @click="decreaseFontSize">
-          <carbon:zoom-out />
+          <div class="i-carbon:zoom-out" />
         </IconButton>
         <div class="flex-auto" />
         <div class="p2 text-center">

package/pages/overview.vue

@@ -183,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"
@@ -191,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` }">
@@ -228,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/presenter.vue

@@ -6,6 +6,7 @@ import { createFixedClicks } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { useSwipeControls } from '../composables/useSwipeControls'
+import { useTimer } from '../composables/useTimer'
 import { useWakeLock } from '../composables/useWakeLock'
 import { slidesTitle } from '../env'
 import ClicksSlider from '../internals/ClicksSlider.vue'
@@ -22,7 +23,6 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { registerShortcuts } from '../logic/shortcuts'
-import { useTimer } from '../logic/utils'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
@@ -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/setup/context-menu.ts

@@ -3,22 +3,13 @@
 import type { ContextMenuItem } from '@slidev/types'
 import type { ComputedRef } from 'vue'
 import setups from '#slidev/setups/context-menu'
-import IconApps from '~icons/carbon/apps'
-import IconArrowDown from '~icons/carbon/arrow-down'
-import IconArrowLeft from '~icons/carbon/arrow-left'
-import IconArrowRight from '~icons/carbon/arrow-right'
-import IconArrowUp from '~icons/carbon/arrow-up'
-import IconMaximize from '~icons/carbon/maximize'
-import IconMinimize from '~icons/carbon/minimize'
-import IconPen from '~icons/carbon/pen'
-import IconPresentationFile from '~icons/carbon/presentation-file'
-import IconTextNotationToggle from '~icons/carbon/text-annotation-toggle'
-import IconUserSpeaker from '~icons/carbon/user-speaker'
 import { computed } from 'vue'
 import { useDrawings } from '../composables/useDrawings'
 import { useNav } from '../composables/useNav'
 import { fullscreen, showEditor, toggleOverview } from '../state'
 
+// @unocss-include
+
 let items: ComputedRef<ContextMenuItem[]> | undefined
 
 export default () => {
@@ -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/monaco.ts

@@ -6,22 +6,19 @@ import { setupTypeAcquisition } from '@typescript/ata'
 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'
-
-import ts from 'typescript'
-
-import { watchEffect } from 'vue'
-
 // @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'
 
 window.MonacoEnvironment = {

package/setup/shortcuts.ts

@@ -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))