@slidev/client 0.48.0-beta.0 → 0.48.0-beta.2

package/builtin/VClicks.ts

@@ -62,12 +62,12 @@ export default defineComponent({
       }) as T
     }
 
-    let defaults = this.$slots.default?.()
+    let elements = this.$slots.default?.()
 
-    if (!defaults)
+    if (!elements)
       return
 
-    defaults = openAllTopLevelSlots(toArray(defaults))
+    elements = openAllTopLevelSlots(toArray(elements))
 
     const mapSubList = (children: VNodeArrayChildren, depth = 1): VNodeArrayChildren => {
       const vNodes = openAllTopLevelSlots(children).map((i) => {
@@ -96,7 +96,7 @@ export default defineComponent({
         if (depth < +this.depth && Array.isArray(i.children))
           vNode = h(i, {}, mapSubList(i.children, depth))
         else
-          vNode = h(i)
+          vNode = i
 
         const delta = thisShowIdx - execIdx
         execIdx = thisShowIdx
@@ -116,23 +116,23 @@ export default defineComponent({
     })
 
     // handle ul, ol list
-    if (defaults.length === 1 && listTags.includes(defaults[0].type as string) && Array.isArray(defaults[0].children))
-      return h(defaults[0], {}, [mapChildren(defaults[0].children), lastGap()])
+    if (elements.length === 1 && listTags.includes(elements[0].type as string) && Array.isArray(elements[0].children))
+      return h(elements[0], {}, [...mapChildren(elements[0].children), lastGap()])
 
-    if (defaults.length === 1 && defaults[0].type as string === 'table') {
-      const tableNode = defaults[0]
+    if (elements.length === 1 && elements[0].type as string === 'table') {
+      const tableNode = elements[0]
       if (Array.isArray(tableNode.children)) {
         return h(tableNode, {}, tableNode.children.map((i) => {
           if (!isVNode(i))
             return i
           else if (i.type === 'tbody' && Array.isArray(i.children))
-            return h(i, {}, [mapChildren(i.children), lastGap()])
+            return h(i, {}, [...mapChildren(i.children), lastGap()])
           else
             return h(i)
         }))
       }
     }
 
-    return [mapChildren(defaults)[0], lastGap()]
+    return [...mapChildren(elements), lastGap()]
   },
 })

package/internals/DrawingControls.vue

@@ -13,7 +13,7 @@ import {
 } from '../logic/drawings'
 import VerticalDivider from './VerticalDivider.vue'
 import Draggable from './Draggable.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 function undo() {
   drauu.undo()
@@ -40,81 +40,69 @@ function setBrushColor(color: typeof brush.color) {
     :initial-x="10"
     :initial-y="10"
   >
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
-      <HiddenText text="Draw with stylus" />
+    <IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
       <carbon:pen />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
-      <HiddenText text="Draw a line" />
+    </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">
         <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
-      <HiddenText text="Draw an arrow" />
+    </IconButton>
+    <IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
       <carbon:arrow-up-right />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
-      <HiddenText text="Draw an ellipse" />
+    </IconButton>
+    <IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
       <carbon:radio-button />
-    </button>
-    <button class="slidev-icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
-      <HiddenText text="Draw a rectangle" />
+    </IconButton>
+    <IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
-    </button>
+    </IconButton>
     <!-- TODO: not sure why it's not working! -->
-    <!-- <button class="slidev-icon-btn" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
-      <HiddenText text="Erase" />
+    <!-- <IconButton title="Erase" :class="{ shallow: drawingMode != 'eraseLine' }" @click="setDrawingMode('eraseLine')">
       <carbon:erase />
-    </button> -->
+    </IconButton> -->
 
     <VerticalDivider />
 
-    <button
+    <IconButton
       v-for="color of brushColors"
       :key="color"
-      class="slidev-icon-btn"
+      title="Set brush color"
       :class="brush.color === color ? 'active' : 'shallow'"
       @click="setBrushColor(color)"
     >
-      <HiddenText text="Set brush color" />
       <div
         class="w-6 h-6 transition-all transform border border-gray-400/50"
         :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
         :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
-    </button>
+    </IconButton>
 
     <VerticalDivider />
 
-    <button class="slidev-icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
-      <HiddenText text="Undo" />
+    <IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
       <carbon:undo />
-    </button>
-    <button class="slidev-icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
-      <HiddenText text="Redo" />
+    </IconButton>
+    <IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
       <carbon:redo />
-    </button>
-    <button class="slidev-icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
-      <HiddenText text="Delete" />
+    </IconButton>
+    <IconButton title="Delete" :class="{ disabled: !canClear }" @click="clearDrauu()">
       <carbon:delete />
-    </button>
+    </IconButton>
 
     <VerticalDivider />
-    <button class="slidev-icon-btn" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
-      <HiddenText :text="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" />
+    <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" />
-    </button>
-    <button
+    </IconButton>
+    <IconButton
       v-if="drawingEnabled"
-      class="slidev-icon-btn"
+      :title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
       :class="{ shallow: !drawingEnabled }"
       @click="drawingEnabled = !drawingEnabled"
     >
-      <HiddenText :text="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'" />
       <carbon:error v-show="drawingPinned" />
       <carbon:close-outline v-show="!drawingPinned" />
-    </button>
+    </IconButton>
   </Draggable>
 </template>

package/internals/Editor.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { throttledWatch, useEventListener } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
-import { activeElement, editorWidth, isInputting, showEditor } from '../state'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideId, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../logic/note'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{
-  resize: boolean
+  resize?: boolean
 }>()
 
 const tab = ref<'content' | 'note'>('content')
@@ -56,8 +56,8 @@ useEventListener('keydown', (e) => {
   }
 })
 
-onMounted(() => {
-  useCodeMirror(
+onMounted(async () => {
+  const contentEditor = await useCodeMirror(
     contentInput,
     computed({
       get() { return content.value },
@@ -77,7 +77,7 @@ onMounted(() => {
     },
   )
 
-  useCodeMirror(
+  const noteEditor = await useCodeMirror(
     noteInput,
     computed({
       get() { return note.value },
@@ -94,14 +94,26 @@ onMounted(() => {
       fencedCodeBlockDefaultMode: 'javascript',
     },
   )
+
+  watch([tab, vertical], () => {
+    nextTick(() => {
+      if (tab.value === 'content')
+        contentEditor.refresh()
+      else
+        noteEditor.refresh()
+    })
+  })
 })
 
 const handlerDown = ref(false)
 function onHandlerDown() {
   handlerDown.value = true
 }
-function updateWidth(v: number) {
-  editorWidth.value = Math.min(Math.max(200, v), window.innerWidth - 200)
+function updateSize(v?: number) {
+  if (vertical.value)
+    editorHeight.value = Math.min(Math.max(300, v ?? editorHeight.value), window.innerHeight - 200)
+  else
+    editorWidth.value = Math.min(Math.max(318, v ?? editorWidth.value), window.innerWidth - 200)
 }
 function switchTab(newTab: typeof tab.value) {
   tab.value = newTab
@@ -111,14 +123,17 @@ function switchTab(newTab: typeof tab.value) {
 
 if (props.resize) {
   useEventListener('pointermove', (e) => {
-    if (handlerDown.value)
-      updateWidth(window.innerWidth - e.pageX)
+    if (handlerDown.value) {
+      updateSize(vertical.value
+        ? window.innerHeight - e.pageY
+        : window.innerWidth - e.pageX)
+    }
   }, { passive: true })
   useEventListener('pointerup', () => {
     handlerDown.value = false
   })
   useEventListener('resize', () => {
-    updateWidth(editorWidth.value)
+    updateSize()
   })
 }
 
@@ -134,46 +149,61 @@ throttledWatch(
 
 <template>
   <div
-    v-if="resize"
-    class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
-    :class="{ '!opacity-30': handlerDown }"
-    :style="{ right: `${editorWidth - 5}px`, cursor: 'col-resize' }"
-    @pointerdown="onHandlerDown"
+    v-if="resize" class="fixed bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
+    :class="vertical ? 'left-0 right-0 w-full h-10px' : 'top-0 bottom-0 w-10px h-full'" :style="{
+      opacity: handlerDown ? '0.3' : undefined,
+      bottom: vertical ? `${editorHeight - 5}px` : undefined,
+      right: !vertical ? `${editorWidth - 5}px` : undefined,
+      cursor: vertical ? 'row-resize' : 'col-resize',
+    }" @pointerdown="onHandlerDown"
   />
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
     :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
-    :style="resize ? { width: `${editorWidth}px` } : {}"
+    :style="resize ? {
+      height: vertical ? `${editorHeight}px` : undefined,
+      width: !vertical ? `${editorWidth}px` : undefined,
+    } : {}"
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">
-        <button class="slidev-icon-btn" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('content')">
-          <HiddenText text="Switch to content tab" />
+        <IconButton
+          title="Switch to content tab" :class="tab === 'content' ? 'text-$slidev-theme-primary' : ''"
+          @click="switchTab('content')"
+        >
           <carbon:account />
-        </button>
-        <button class="slidev-icon-btn" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''" @click="switchTab('note')">
-          <HiddenText text="Switch to notes tab" />
+        </IconButton>
+        <IconButton
+          title="Switch to notes tab" :class="tab === 'note' ? 'text-$slidev-theme-primary' : ''"
+          @click="switchTab('note')"
+        >
           <carbon:align-box-bottom-right />
-        </button>
+        </IconButton>
       </div>
       <span class="text-2xl pt-1">
         {{ tab === 'content' ? 'Slide' : 'Notes' }}
       </span>
       <div class="flex-auto" />
-      <button class="slidev-icon-btn" @click="openInEditor()">
-        <HiddenText text="Open in editor" />
+      <template v-if="resize">
+        <IconButton v-if="vertical" title="Dock to right" @click="vertical = false">
+          <carbon:open-panel-right />
+        </IconButton>
+        <IconButton v-else title="Dock to bottom" @click="vertical = true">
+          <carbon:open-panel-bottom />
+        </IconButton>
+      </template>
+      <IconButton title="Open in editor" @click="openInEditor()">
         <carbon:launch />
-      </button>
-      <button class="slidev-icon-btn" @click="close">
-        <HiddenText text="Close" />
+      </IconButton>
+      <IconButton title="Close" @click="close">
         <carbon:close />
-      </button>
+      </IconButton>
     </div>
-    <div class="h-full overflow-auto">
-      <div v-show="tab === 'content'" class="h-full overflow-auto">
+    <div class="overflow-hidden">
+      <div v-show="tab === 'content'" class="w-full h-full">
         <textarea ref="contentInput" placeholder="Create slide content..." />
       </div>
-      <div v-show="tab === 'note'" class="h-full overflow-auto">
+      <div v-show="tab === 'note'" class="w-full h-full">
         <textarea ref="noteInput" placeholder="Write some notes..." />
       </div>
     </div>

package/internals/IconButton.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
+    <span class="sr-only">{{ title }}</span>
+    <slot />
+  </button>
+</template>

package/internals/NavControls.vue

@@ -8,7 +8,7 @@ import { configs } from '../env'
 import Settings from './Settings.vue'
 import MenuButton from './MenuButton.vue'
 import VerticalDivider from './VerticalDivider.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 // @ts-expect-error virtual module
 import CustomNavControls from '/@slidev/custom-nav-controls'
@@ -52,47 +52,27 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >
-      <button v-if="!isEmbedded" class="slidev-icon-btn" @click="toggleFullscreen">
-        <template v-if="isFullscreen">
-          <HiddenText text="Close fullscreen" />
-          <carbon:minimize />
-        </template>
-        <template v-else>
-          <HiddenText text="Enter fullscreen" />
-          <carbon:maximize />
-        </template>
-      </button>
-
-      <button class="slidev-icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
-        <HiddenText text="Go to previous slide" />
+      <IconButton v-if="!isEmbedded" :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
+        <carbon:minimize v-if="isFullscreen" />
+        <carbon:maximize v-else />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasPrev }" title="Go to previous slide" @click="prev">
         <carbon:arrow-left />
-      </button>
-
-      <button class="slidev-icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
-        <HiddenText text="Go to next slide" />
+      </IconButton>
+      <IconButton :class="{ disabled: !hasNext }" title="Go to next slide" @click="next">
         <carbon:arrow-right />
-      </button>
-
-      <button v-if="!isEmbedded" class="slidev-icon-btn" title="Slides overview" @click="toggleOverview()">
-        <HiddenText text="Show slide overview" />
+      </IconButton>
+      <IconButton v-if="!isEmbedded" title="Show slide overview" @click="toggleOverview()">
         <carbon:apps />
-      </button>
-
-      <button
+      </IconButton>
+      <IconButton
         v-if="!isColorSchemaConfigured"
-        class="slidev-icon-btn"
-        title="Toggle dark mode"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
         @click="toggleDark()"
       >
-        <template v-if="isDark">
-          <HiddenText text="Switch to light theme" />
-          <carbon-moon />
-        </template>
-        <template v-else>
-          <HiddenText text="Switch to dark mode theme" />
-          <carbon-sun />
-        </template>
-      </button>
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
 
       <VerticalDivider />
 
@@ -102,33 +82,25 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <VerticalDivider />
         </template>
 
-        <button
+        <IconButton
           v-if="isPresenter"
-          class="slidev-icon-btn"
-          title="Show presenter cursor"
+          :title="showPresenterCursor ? 'Hide presenter cursor' : 'Show presenter cursor'"
           @click="showPresenterCursor = !showPresenterCursor"
         >
-          <template v-if="showPresenterCursor">
-            <HiddenText text="Hide presenter cursor" />
-            <ph-cursor-fill />
-          </template>
-          <template v-else>
-            <HiddenText text="Show presenter cursor" />
-            <ph-cursor-duotone />
-          </template>
-        </button>
+          <ph-cursor-fill v-if="showPresenterCursor" />
+          <ph-cursor-duotone v-else />
+        </IconButton>
       </template>
 
       <template v-if="__SLIDEV_FEATURE_DRAWINGS__ && (!configs.drawings.presenterOnly || isPresenter) && !isEmbedded">
-        <button class="slidev-icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
-          <HiddenText v-if="drawingEnabled" :text="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" />
+        <IconButton class="relative" :title="drawingEnabled ? 'Hide drawing toolbar' : 'Show drawing toolbar'" @click="drawingEnabled = !drawingEnabled">
           <carbon:pen />
           <div
             v-if="drawingEnabled"
             class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
             :style="{ background: brush.color }"
           />
-        </button>
+        </IconButton>
         <VerticalDivider />
       </template>
 
@@ -140,43 +112,40 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <carbon:user-speaker />
         </RouterLink>
 
-        <button
+        <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
-          class="slidev-icon-btn <md:hidden"
+          :title="showEditor ? 'Hide editor' : 'Show editor'"
+          class="<md:hidden"
           @click="showEditor = !showEditor"
         >
-          <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
-        </button>
+        </IconButton>
 
-        <button v-if="isPresenter" class="slidev-icon-btn" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
-        </button>
+        </IconButton>
       </template>
       <template v-if="!__DEV__">
-        <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">
-          <HiddenText text="Download as PDF" />
+        <IconButton v-if="configs.download" title="Download as PDF" @click="downloadPDF">
           <carbon:download />
-        </button>
+        </IconButton>
       </template>
 
-      <button
+      <IconButton
         v-if="!isPresenter && configs.info && !isEmbedded"
-        class="slidev-icon-btn"
+        title="Show info"
         @click="showInfoDialog = !showInfoDialog"
       >
-        <HiddenText text="Show info" />
         <carbon:information />
-      </button>
+      </IconButton>
 
       <template v-if="!isPresenter && !isEmbedded">
         <MenuButton>
           <template #button>
-            <button class="slidev-icon-btn">
-              <HiddenText text="Adjust settings" />
+            <IconButton title="Adjust settings">
               <carbon:settings-adjust />
-            </button>
+            </IconButton>
           </template>
           <template #menu>
             <Settings />

package/internals/NotesView.vue

@@ -8,7 +8,7 @@ import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
 import NoteDisplay from './NoteDisplay.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -55,19 +55,16 @@ function decreaseFontSize() {
     </div>
     <div class="flex-none border-t border-gray-400 border-opacity-20">
       <div class="flex gap-1 items-center px-6 py-3">
-        <button class="slidev-icon-btn" @click="toggleFullscreen">
-          <HiddenText :text="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" />
+        <IconButton :title="isFullscreen ? 'Close fullscreen' : 'Enter fullscreen'" @click="toggleFullscreen">
           <carbon:minimize v-if="isFullscreen" />
           <carbon:maximize v-else />
-        </button>
-        <button class="slidev-icon-btn" @click="increaseFontSize">
-          <HiddenText text="Increase font size" />
+        </IconButton>
+        <IconButton title="Increase font size" @click="increaseFontSize">
           <carbon:zoom-in />
-        </button>
-        <button class="slidev-icon-btn" @click="decreaseFontSize">
-          <HiddenText text="Decrease font size" />
+        </IconButton>
+        <IconButton title="Decrease font size" @click="decreaseFontSize">
           <carbon:zoom-out />
-        </button>
+        </IconButton>
         <div class="flex-auto" />
         <div class="p2 text-center">
           {{ pageNo }} / {{ total }}

package/internals/Play.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isScreenVertical, showEditor, slideScale, windowSize } from '../state'
+import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize } from '../state'
 import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -42,7 +42,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
+  <div id="page-root" ref="root" class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" :style="themeVars">
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
@@ -58,7 +58,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <div
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
           :class="[
-            persistNav ? 'opacity-100 right-0' : 'opacity-0 p-2',
+            persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
             isDrawing ? 'pointer-events-none' : '',
           ]"
         >

package/internals/Presenter.vue

@@ -20,7 +20,7 @@ import Goto from './Goto.vue'
 import SlidesShow from './SlidesShow.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingControls from './DrawingControls.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -150,21 +150,19 @@ onMounted(() => {
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <div class="border-t border-main py-1 px-2 text-sm">
-          <button class="slidev-icon-btn" @click="increasePresenterFontSize">
-            <HiddenText text="Increase font size" />
+          <IconButton title="Increase font size" @click="increasePresenterFontSize">
             <carbon:zoom-in />
-          </button>
-          <button class="slidev-icon-btn" @click="decreasePresenterFontSize">
-            <HiddenText text="Decrease font size" />
+          </IconButton>
+          <IconButton title="Decrease font size" @click="decreasePresenterFontSize">
             <carbon:zoom-out />
-          </button>
-          <button
+          </IconButton>
+          <IconButton
             v-if="__DEV__"
-            class="slidev-icon-btn" @click="notesEditing = !notesEditing"
+            title="Edit Notes"
+            @click="notesEditing = !notesEditing"
           >
-            <HiddenText text="Edit Notes" />
             <carbon:edit />
-          </button>
+          </IconButton>
         </div>
       </div>
       <div class="grid-section bottom">

package/internals/RecordingControls.vue

@@ -5,7 +5,7 @@ import { recorder } from '../logic/recording'
 import { currentCamera, showRecordingDialog } from '../state'
 import DevicesList from './DevicesList.vue'
 import MenuButton from './MenuButton.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const {
   recording,
@@ -34,33 +34,29 @@ onMounted(() => {
 </script>
 
 <template>
-  <button
+  <IconButton
     v-if="currentCamera !== 'none'"
-    class="slidev-icon-btn <md:hidden"
+    class="<md:hidden"
     :class="{ 'text-green-500': Boolean(showAvatar && streamCamera) }"
-    title="Show camera view"
+    title="Toggle camera view"
     @click="toggleAvatar"
   >
-    <HiddenText text="Toggle camera view" />
     <carbon:user-avatar />
-  </button>
+  </IconButton>
 
-  <button
-    class="slidev-icon-btn"
+  <IconButton
     :class="{ 'text-red-500': recording }"
-    title="Recording"
+    :title="recording ? 'Stop record video' : 'Record video'"
     @click="toggleRecording"
   >
-    <HiddenText :text="recording ? 'Stop record video' : 'Record video'" />
     <carbon:stop-outline v-if="recording" />
     <carbon:video v-else />
-  </button>
+  </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <button class="slidev-icon-btn h-full !text-sm !px-0">
-        <HiddenText text="Select recording device" />
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
         <carbon:chevron-up class="opacity-50" />
-      </button>
+      </IconButton>
     </template>
     <template #menu>
       <DevicesList />

package/internals/SlidesOverview.vue

@@ -10,7 +10,7 @@ import { getSlideClass } from '../utils'
 import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
-import HiddenText from './HiddenText.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -163,8 +163,7 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <button v-if="value" class="fixed text-2xl top-4 right-4 slidev-icon-btn text-gray-400" @click="close">
-    <HiddenText text="Close" />
+  <IconButton v-if="value" title="Close" class="fixed text-2xl top-4 right-4 text-gray-400" @click="close">
     <carbon:close />
-  </button>
+  </IconButton>
 </template>

package/logic/nav.ts

@@ -83,9 +83,9 @@ watch(currentRoute, (next, prev) => {
   navDirection.value = Number(next?.path) - Number(prev?.path)
 })
 
-export function next() {
+export async function next() {
   if (clicksTotal.value <= queryClicks.value)
-    nextSlide()
+    await nextSlide()
   else
     queryClicks.value += 1
 }
@@ -101,9 +101,9 @@ export function getPath(no: number | string) {
   return isPresenter.value ? `/presenter/${no}` : `/${no}`
 }
 
-export function nextSlide() {
-  const next = Math.min(rawRoutes.length, currentPage.value + 1)
-  return go(next)
+export async function nextSlide() {
+  if (currentPage.value < rawRoutes.length)
+    await go(currentPage.value + 1)
 }
 
 export async function prevSlide(lastClicks = true) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.48.0-beta.0",
+  "version": "0.48.0-beta.2",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -22,13 +22,13 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.2",
+    "@shikijs/vitepress-twoslash": "^1.1.3",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.7.2",
     "@vueuse/math": "^10.7.2",
     "@vueuse/motion": "^2.0.0",
-    "codemirror": "^5.65.5",
+    "codemirror": "^5.65.16",
     "defu": "^6.1.4",
     "drauu": "^0.3.7",
     "file-saver": "^2.0.5",
@@ -46,10 +46,10 @@
     "unocss": "^0.58.5",
     "vue": "^3.4.19",
     "vue-router": "^4.2.5",
-    "@slidev/types": "0.48.0-beta.0",
-    "@slidev/parser": "0.48.0-beta.0"
+    "@slidev/parser": "0.48.0-beta.2",
+    "@slidev/types": "0.48.0-beta.2"
   },
   "devDependencies": {
-    "vite": "^5.1.1"
+    "vite": "^5.1.3"
   }
 }

package/state/index.ts

@@ -13,7 +13,7 @@ export const breakpoints = useBreakpoints({
 })
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 180)
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 120)
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
@@ -27,7 +27,9 @@ export const slideScale = useLocalStorage<number>('slidev-scale', 0)
 export const showOverview = useLocalStorage('slidev-show-overview', false)
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true)
 export const showEditor = useLocalStorage('slidev-show-editor', false)
-export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)
+export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false)
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318)
+export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300)
 
 export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1)
 export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1)

package/internals/HiddenText.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  text: string
-}>()
-</script>
-
-<template>
-  <span class="sr-only">{{ text }}</span>
-</template>