@slidev/client 0.48.0-beta.13 → 0.48.0-beta.15

package/builtin/Arrow.vue

@@ -9,7 +9,7 @@ Simple Arrow
 -->
 
 <script setup lang="ts">
-import { customAlphabet } from 'nanoid'
+import { makeId } from '../logic/utils'
 
 defineProps<{
   x1: number | string
@@ -20,9 +20,7 @@ defineProps<{
   color?: string
 }>()
 
-const nanoid = customAlphabet('abcedfghijklmn', 10)
-
-const id = nanoid()
+const id = makeId()
 </script>
 
 <template>

package/builtin/Mermaid.vue

@@ -19,7 +19,7 @@ import ShadowRoot from '../internals/ShadowRoot.vue'
 import { isDark } from '../logic/dark'
 
 const props = defineProps<{
-  code: string
+  codeLz: string
   scale?: number
   theme?: string
 }>()
@@ -37,7 +37,7 @@ watchEffect(async (onCleanup) => {
   error.value = null
   try {
     const svg = await renderMermaid(
-      props.code || '',
+      props.codeLz || '',
       {
         theme: props.theme || (isDark.value ? 'dark' : undefined),
         ...vm!.attrs,

package/builtin/Monaco.vue

@@ -14,30 +14,30 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { decode } from 'js-base64'
-import { nanoid } from 'nanoid'
 import type * as monaco from 'monaco-editor'
+import { decompressFromBase64 } from 'lz-string'
 import { isDark } from '../logic/dark'
+import { makeId } from '../logic/utils'
 
 const props = withDefaults(defineProps<{
-  code: string
-  diff?: string
+  codeLz: string
+  diffLz?: string
   lang?: string
   readonly?: boolean
   lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
   height?: number | string
   editorOptions?: monaco.editor.IEditorOptions
 }>(), {
-  code: '',
+  codeLz: '',
   lang: 'typescript',
   readonly: false,
   lineNumbers: 'off',
   height: 'auto',
 })
 
-const id = nanoid()
-const code = ref(decode(props.code).trimEnd())
-const diff = ref(props.diff ? decode(props.diff).trimEnd() : null)
+const id = makeId()
+const code = ref(decompressFromBase64(props.codeLz))
+const diff = ref(props.diffLz ? decompressFromBase64(props.diffLz) : null)
 const lineHeight = +(getComputedStyle(document.body).getPropertyValue('--slidev-code-line-height') || '18').replace('px', '') || 18
 const editorHeight = ref(0)
 const calculatedHeight = computed(() => code.value.split(/\r?\n/g).length * lineHeight)

package/builtin/ShikiMagicMove.vue

@@ -2,16 +2,18 @@
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { decompressFromBase64 } from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId } from '../logic/utils'
 
 import 'shiki-magic-move/style.css'
 
 const props = defineProps<{
-  steps: KeyedTokensInfo[]
+  stepsLz: string
   at?: string | number
 }>()
 
+const steps = JSON.parse(decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
 const { $clicksContext: clicks, $scale: scale } = useSlideContext()
 const id = makeId()
 const index = ref(0)
@@ -24,14 +26,14 @@ onMounted(() => {
   if (!clicks || clicks.disabled)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at || '+1', props.steps.length - 1)
+  const { start, end, delta } = clicks.resolve(props.at || '+1', steps.length - 1)
   clicks.register(id, { max: end, delta })
 
   watchEffect(() => {
     if (clicks.disabled)
-      index.value = props.steps.length - 1
+      index.value = steps.length - 1
     else
-      index.value = Math.min(Math.max(0, clicks.current - start + 1), props.steps.length - 1)
+      index.value = Math.min(Math.max(0, clicks.current - start + 1), steps.length - 1)
   })
 })
 </script>

package/composables/useClicks.ts

@@ -69,7 +69,9 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
   const thisPath = +(route?.path ?? CLICKS_MAX)
   const current = computed({
     get() {
-      const currentPath = +(currentRoute.value?.path ?? CLICKS_MAX)
+      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
+      if (!currentPath || Number.isNaN(currentPath))
+        return 0
       if (currentPath === thisPath)
         return queryClicks.value
       else if (currentPath > thisPath)
@@ -78,7 +80,7 @@ export function usePrimaryClicks(route: RouteRecordRaw | undefined): ClicksConte
         return 0
     },
     set(v) {
-      const currentPath = +(currentRoute.value?.path ?? CLICKS_MAX)
+      const currentPath = +(currentRoute.value?.path ?? Number.NaN)
       if (currentPath === thisPath)
         queryClicks.value = v
     },

package/internals/Controls.vue

@@ -2,7 +2,7 @@
 import { shallowRef } from 'vue'
 import { showInfoDialog, showOverview, showRecordingDialog } from '../state'
 import { configs } from '../env'
-import SlidesOverview from './SlidesOverview.vue'
+import QuickOverview from './QuickOverview.vue'
 import InfoDialog from './InfoDialog.vue'
 import Goto from './Goto.vue'
 
@@ -15,7 +15,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
   <Goto />
   <WebCamera v-if="WebCamera" />
   <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />

package/internals/IconButton.vue

@@ -2,14 +2,15 @@
 defineProps<{
   title: string
   icon?: string
+  as?: string
 }>()
 </script>
 
 <template>
-  <button class="slidev-icon-btn" :title="title" v-bind="$attrs">
+  <component :is="as || 'button'" class="slidev-icon-btn" :title="title" v-bind="$attrs">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />
     </slot>
-  </button>
+  </component>
 </template>

package/internals/NavControls.vue

@@ -114,13 +114,13 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <IconButton
           v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__"
           :title="showEditor ? 'Hide editor' : 'Show editor'"
-          class="<md:hidden"
+          class="lt-md:hidden"
           @click="showEditor = !showEditor"
         >
           <carbon:text-annotation-toggle />
         </IconButton>
 
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
           <carbon:template />
           {{ presenterLayout }}
         </IconButton>

package/internals/NoteDisplay.vue

@@ -9,9 +9,13 @@ const props = defineProps<{
   note?: string
   placeholder?: string
   clicksContext?: ClicksContext
+  autoScroll?: boolean
 }>()
 
-defineEmits(['click'])
+const emit = defineEmits<{
+  (type: 'markerDblclick', e: MouseEvent, clicks: number): void
+  (type: 'markerClick', e: MouseEvent, clicks: number): void
+}>()
 
 const withClicks = computed(() => props.clicksContext?.current != null && props.noteHtml?.includes('slidev-note-click-mark'))
 const noteDisplay = ref<HTMLElement | null>(null)
@@ -20,16 +24,13 @@ const CLASS_FADE = 'slidev-note-fade'
 const CLASS_MARKER = 'slidev-note-click-mark'
 
 function highlightNote() {
-  if (!noteDisplay.value || !withClicks.value || props.clicksContext?.current == null)
+  if (!noteDisplay.value || !withClicks.value)
     return
 
-  const current = +props.clicksContext?.current ?? CLICKS_MAX
+  const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
+
+  const current = +(props.clicksContext?.current ?? CLICKS_MAX)
   const disabled = current < 0 || current >= CLICKS_MAX
-  if (disabled) {
-    Array.from(noteDisplay.value.querySelectorAll('*'))
-      .forEach(el => el.classList.remove(CLASS_FADE))
-    return
-  }
 
   const nodeToIgnores = new Set<Element>()
   function ignoreParent(node: Element) {
@@ -40,7 +41,6 @@ function highlightNote() {
       ignoreParent(node.parentElement)
   }
 
-  const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
   const markersMap = new Map<number, HTMLElement>()
 
   // Convert all sibling text nodes to spans, so we attach classes to them
@@ -77,25 +77,39 @@ function highlightNote() {
 
   // Apply
   for (const [count, els] of segments) {
-    els.forEach(el => el.classList.toggle(
-      CLASS_FADE,
-      nodeToIgnores.has(el)
-        ? false
-        : count !== current,
-    ))
+    if (disabled) {
+      els.forEach(el => el.classList.remove(CLASS_FADE))
+    }
+    else {
+      els.forEach(el => el.classList.toggle(
+        CLASS_FADE,
+        nodeToIgnores.has(el)
+          ? false
+          : count !== current,
+      ))
+    }
   }
 
   for (const [clicks, marker] of markersMap) {
     marker.classList.remove(CLASS_FADE)
-    marker.classList.toggle(`${CLASS_MARKER}-past`, clicks < current)
-    marker.classList.toggle(`${CLASS_MARKER}-active`, clicks === current)
-    marker.classList.toggle(`${CLASS_MARKER}-next`, clicks === current + 1)
-    marker.classList.toggle(`${CLASS_MARKER}-future`, clicks > current + 1)
-    marker.addEventListener('dblclick', (e) => {
+    marker.classList.toggle(`${CLASS_MARKER}-past`, disabled ? false : clicks < current)
+    marker.classList.toggle(`${CLASS_MARKER}-active`, disabled ? false : clicks === current)
+    marker.classList.toggle(`${CLASS_MARKER}-next`, disabled ? false : clicks === current + 1)
+    marker.classList.toggle(`${CLASS_MARKER}-future`, disabled ? false : clicks > current + 1)
+    marker.ondblclick = (e) => {
+      emit('markerDblclick', e, clicks)
+      if (e.defaultPrevented)
+        return
       props.clicksContext!.current = clicks
       e.stopPropagation()
       e.stopImmediatePropagation()
-    })
+    }
+    marker.onclick = (e) => {
+      emit('markerClick', e, clicks)
+    }
+
+    if (props.autoScroll && clicks === current)
+      marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
   }
 }
 
@@ -120,23 +134,26 @@ onMounted(() => {
     ref="noteDisplay"
     class="prose overflow-auto outline-none slidev-note"
     :class="[props.class, withClicks ? 'slidev-note-with-clicks' : '']"
-    @click="$emit('click')"
     v-html="noteHtml"
   />
   <div
     v-else-if="note"
-    class="prose overflow-auto outline-none"
+    class="prose overflow-auto outline-none slidev-note"
     :class="props.class"
-    @click="$emit('click')"
   >
     <p v-text="note" />
   </div>
   <div
     v-else
-    class="prose overflow-auto outline-none opacity-50 italic select-none"
+    class="prose overflow-auto outline-none opacity-50 italic select-none slidev-note"
     :class="props.class"
-    @click="$emit('click')"
   >
     <p v-text="props.placeholder || 'No notes.'" />
   </div>
 </template>
+
+<style>
+.slidev-note :first-child {
+  margin-top: 0;
+}
+</style>

package/internals/{NoteEditor.vue → NoteEditable.vue}

@@ -30,9 +30,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits([
-  'update:editing',
-])
+const emit = defineEmits<{
+  (type: 'update:editing', value: boolean): void
+  (type: 'markerDblclick', e: MouseEvent, clicks: number): void
+  (type: 'markerClick', e: MouseEvent, clicks: number): void
+}>()
+
 const editing = useVModel(props, 'editing', emit, { passive: true })
 
 const { info, update } = useDynamicSlideInfo(props.no)
@@ -40,9 +43,12 @@ const { info, update } = useDynamicSlideInfo(props.no)
 const note = ref('')
 let timer: any
 
+// Send back the note on changes
 const { ignoreUpdates } = ignorableWatch(
   note,
   (v) => {
+    if (!editing.value)
+      return
     const id = props.no
     clearTimeout(timer)
     timer = setTimeout(() => {
@@ -51,72 +57,70 @@ const { ignoreUpdates } = ignorableWatch(
   },
 )
 
+// Update note value when info changes
 watch(
-  info,
-  (v) => {
+  () => info.value?.note,
+  (value = '') => {
     if (editing.value)
       return
     clearTimeout(timer)
     ignoreUpdates(() => {
-      note.value = v?.note || ''
+      note.value = value
     })
   },
   { immediate: true, flush: 'sync' },
 )
 
-const input = ref<HTMLTextAreaElement>()
+const inputEl = ref<HTMLTextAreaElement>()
+const inputHeight = ref<number | null>()
 
 watchEffect(() => {
   if (editing.value)
-    input.value?.focus()
+    inputEl.value?.focus()
 })
 
-onClickOutside(input, () => {
+onClickOutside(inputEl, () => {
   editing.value = false
 })
 
-function calculateHeight() {
-  if (!props.autoHeight || !input.value || !editing.value)
+function calculateEditorHeight() {
+  if (!props.autoHeight || !inputEl.value || !editing.value)
     return
-  if (input.value.scrollHeight > input.value.clientHeight)
-    input.value.style.height = `${input.value.scrollHeight}px`
+  if (inputEl.value.scrollHeight > inputEl.value.clientHeight)
+    inputEl.value.style.height = `${inputEl.value.scrollHeight}px`
 }
 
-const inputHeight = ref<number | null>()
-watchEffect(() => {
-  calculateHeight()
-})
 watch(
   note,
-  () => {
-    nextTick(() => {
-      calculateHeight()
-    })
-  },
-  { flush: 'post' },
+  () => nextTick(() => {
+    calculateEditorHeight()
+  }),
+  { flush: 'post', immediate: true },
 )
 </script>
 
 <template>
   <NoteDisplay
     v-if="!editing"
-    class="my--4 border-transparent border-2"
+    class="border-transparent border-2"
     :class="[props.class, note ? '' : 'opacity-25 italic select-none']"
     :style="props.style"
     :note="note || placeholder"
     :note-html="info?.noteHTML"
     :clicks-context="clicksContext"
+    :auto-scroll="!autoHeight"
+    @marker-click="(e, clicks) => emit('markerClick', e, clicks)"
+    @marker-dblclick="(e, clicks) => emit('markerDblclick', e, clicks)"
   />
   <textarea
     v-else
-    ref="input"
+    ref="inputEl"
     v-model="note"
     class="prose resize-none overflow-auto outline-none bg-transparent block border-primary border-2"
     style="line-height: 1.75;"
     :style="[props.style, inputHeight != null ? { height: `${inputHeight}px` } : {}]"
     :class="props.class"
     :placeholder="placeholder"
-    @keydown.esc=" editing = false"
-    @focus="editing = true"
+    @keydown.esc="editing = false"
   />
 </template>

package/internals/{SlidesOverview.vue → QuickOverview.vue}

@@ -164,18 +164,19 @@ watchEffect(() => {
       </div>
     </div>
   </Transition>
-  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex items-center gap-4">
-    <RouterLink
-      v-if="__DEV__"
+  <div v-if="value" class="fixed top-4 right-4 text-gray-400 flex flex-col items-center gap-2">
+    <IconButton title="Close" class="text-2xl" @click="close">
+      <carbon:close />
+    </IconButton>
+    <IconButton
+      as="a"
+      title="Slides Overview"
       target="_blank"
-      to="/overview"
+      href="/overview"
       tab-index="-1"
-      class="border-main border px3 py1 rounded hover:bg-gray/5 hover:text-primary"
+      class="text-2xl"
     >
-      List overview
-    </RouterLink>
-    <IconButton title="Close" class="text-2xl" @click="close">
-      <carbon:close />
+      <carbon:list-boxes />
     </IconButton>
   </div>
 </template>

package/internals/RecordingControls.vue

@@ -54,7 +54,7 @@ onMounted(() => {
   </IconButton>
   <MenuButton :disabled="recording">
     <template #button>
-      <IconButton title="Select recording device" class="h-full !text-sm !px-0">
+      <IconButton title="Select recording device" class="h-full !text-sm !px-0 aspect-initial">
         <carbon:chevron-up class="opacity-50" />
       </IconButton>
     </template>

package/modules/mermaid.ts

@@ -1,17 +1,16 @@
 import mermaid from 'mermaid/dist/mermaid.esm.mjs'
-import { customAlphabet } from 'nanoid'
-import { decode } from 'js-base64'
+import { decompressFromBase64 } from 'lz-string'
 import { clearUndefined } from '@antfu/utils'
 import setupMermaid from '../setup/mermaid'
+import { makeId } from '../logic/utils'
 
 mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })
 
-const nanoid = customAlphabet('abcedfghicklmn', 10)
 const cache = new Map<string, string>()
 
-export async function renderMermaid(encoded: string, options: any) {
-  const key = encoded + JSON.stringify(options)
+export async function renderMermaid(lzEncoded: string, options: any) {
+  const key = lzEncoded + JSON.stringify(options)
   const _cache = cache.get(key)
   if (_cache)
     return _cache
@@ -21,8 +20,8 @@ export async function renderMermaid(encoded: string, options: any) {
     ...clearUndefined(setupMermaid() || {}),
     ...clearUndefined(options),
   })
-  const code = decode(encoded)
-  const id = nanoid()
+  const code = decompressFromBase64(lzEncoded)
+  const id = makeId()
   const { svg } = await mermaid.render(id, code)
   cache.set(key, svg)
   return svg

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.13",
+  "version": "0.48.0-beta.15",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -42,12 +42,11 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
+    "lz-string": "^1.5.0",
     "mermaid": "^10.8.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
@@ -55,8 +54,8 @@
     "unocss": "^0.58.5",
     "vue": "^3.4.20",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.13",
-    "@slidev/parser": "0.48.0-beta.13"
+    "@slidev/types": "0.48.0-beta.15",
+    "@slidev/parser": "0.48.0-beta.15"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/pages/notes.vue

@@ -52,6 +52,7 @@ function decreaseFontSize() {
         :note-html="currentRoute?.meta?.slide?.noteHTML"
         :placeholder="`No notes for Slide ${pageNo}.`"
         :clicks-context="currentRoute?.meta?.__clicksContext"
+        :auto-scroll="true"
       />
     </div>
     <div class="flex-none border-t border-main">

package/pages/overview.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { RouteRecordRaw } from 'vue-router'
 import type { ClicksContext } from 'packages/types'
-import { themeVars } from '../env'
+import { configs, themeVars } from '../env'
 import { openInEditor, rawRoutes } from '../logic/nav'
 import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
@@ -12,14 +12,15 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
-import NoteEditor from '../internals/NoteEditor.vue'
+import NoteEditable from '../internals/NoteEditable.vue'
 import OverviewClicksSlider from '../internals/OverviewClicksSlider.vue'
 import { CLICKS_MAX } from '../constants'
 
 const cardWidth = 450
 
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
-  title: 'List Overview',
+  title: `Overview - ${slideTitle}`,
 })
 
 const blocks: Map<number, HTMLElement> = reactive(new Map())
@@ -79,6 +80,15 @@ function scrollToSlide(idx: number) {
     el.scrollIntoView({ behavior: 'smooth', block: 'start' })
 }
 
+function onMarkerClick(e: MouseEvent, clicks: number, route: RouteRecordRaw) {
+  const ctx = getClicksContext(route)
+  if (ctx.current === clicks)
+    ctx.current = CLICKS_MAX
+  else
+    ctx.current = clicks
+  e.preventDefault()
+}
+
 onMounted(() => {
   nextTick(() => {
     checkActiveBlocks()
@@ -191,7 +201,7 @@ onMounted(() => {
             <carbon:pen />
           </IconButton>
         </div>
-        <NoteEditor
+        <NoteEditable
           :no="idx"
           class="max-w-250 w-250 text-lg rounded p3"
           :auto-height="true"
@@ -199,6 +209,7 @@ onMounted(() => {
           :clicks-context="getClicksContext(route)"
           @dblclick="edittingNote !== idx ? edittingNote = idx : null"
           @update:editing="edittingNote = null"
+          @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
         />
         <div
           v-if="wordCounts[idx] > 0"

package/pages/presenter/print.vue

@@ -56,7 +56,10 @@ const slidesWithNote = computed(() => rawRoutes
               <div class="flex-auto" />
             </div>
           </h2>
-          <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
+          <NoteDisplay
+            :note-html="slide!.noteHTML"
+            class="max-w-full"
+          />
         </div>
         <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
       </div>

package/pages/presenter.vue

@@ -14,8 +14,8 @@ import { useFixedClicks } from '../composables/useClicks'
 import SlideWrapper from '../internals/SlideWrapper'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
-import SlidesOverview from '../internals/SlidesOverview.vue'
-import NoteEditor from '../internals/NoteEditor.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 SlidesShow from '../internals/SlidesShow.vue'
@@ -45,12 +45,19 @@ const nextFrame = computed(() => {
   else
     return null
 })
+
 const nextFrameClicksCtx = computed(() => {
   return nextFrame.value && clicksCtxMap[+nextFrame.value[0].path - 1]
 })
-watch([currentRoute, queryClicks], () => {
-  nextFrameClicksCtx.value && (nextFrameClicksCtx.value.current = nextFrame.value![1])
-}, { immediate: true })
+
+watch(
+  [currentRoute, queryClicks],
+  () => {
+    if (nextFrameClicksCtx.value)
+      nextFrameClicksCtx.value.current = nextFrame.value![1]
+  },
+  { immediate: true },
+)
 
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
@@ -86,21 +93,6 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
-        <div class="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>
-      </div>
       <div ref="main" class="relative grid-section main flex flex-col p-2 lg:p-4" :style="themeVars">
         <SlideContainer
           key="main"
@@ -110,8 +102,8 @@ onMounted(() => {
             <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
-        <div class="context">
-          current
+        <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" :style="themeVars">
@@ -129,8 +121,8 @@ onMounted(() => {
             render-context="previewNext"
           />
         </SlideContainer>
-        <div class="context">
-          next
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Next
         </div>
       </div>
       <!-- Notes -->
@@ -138,12 +130,12 @@ onMounted(() => {
         <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
-        <NoteEditor
+        <NoteEditable
           v-if="__DEV__"
           :key="`edit-${currentSlideId}`"
+          v-model:editing="notesEditing"
           :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
-          :editing="notesEditing"
           :clicks-context="clicksContext"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
@@ -171,8 +163,20 @@ onMounted(() => {
           </IconButton>
         </div>
       </div>
-      <div class="grid-section bottom">
+      <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>
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
     </div>
@@ -184,7 +188,7 @@ onMounted(() => {
     </div>
   </div>
   <Goto />
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
 </template>
 
 <style scoped>
@@ -204,7 +208,7 @@ onMounted(() => {
 }
 
 .grid-container {
-  --uno: bg-active;
+  --uno: bg-gray/20;
   height: 100%;
   width: 100%;
   display: grid;
@@ -213,9 +217,8 @@ onMounted(() => {
 
 .grid-container.layout1 {
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    'top top'
     'main main'
     'note next'
     'bottom bottom';
@@ -223,9 +226,8 @@ onMounted(() => {
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    'top top'
     'note main'
     'note next'
     'bottom bottom';
@@ -234,9 +236,8 @@ onMounted(() => {
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;
-    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-rows: 1fr 1fr 1fr min-content;
     grid-template-areas:
-      'top'
       'main'
       'note'
       'next'
@@ -247,9 +248,8 @@ onMounted(() => {
 @media (min-aspect-ratio: 1/1) {
   .grid-container.layout1 {
     grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: min-content 1fr 2fr min-content;
+    grid-template-rows: 1fr 2fr min-content;
     grid-template-areas:
-      'top top top'
       'main main next'
       'main main note'
       'bottom bottom bottom';
@@ -279,10 +279,4 @@ onMounted(() => {
 .grid-section.bottom {
   grid-area: bottom;
 }
-.context {
-  position: absolute;
-  top: 0;
-  left: 0;
-  --uno: px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
-}
 </style>

package/setup/root.ts

@@ -1,7 +1,6 @@
 /* __imports__ */
 import { watch } from 'vue'
 import { useHead } from '@unhead/vue'
-import { nanoid } from 'nanoid'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
 import { initDrawingState } from '../state/drawings'
@@ -9,6 +8,7 @@ import { clicksContext, currentPage, getPath, isNotesViewer, isPresenter } from
 import { router } from '../routes'
 import { TRUST_ORIGINS } from '../constants'
 import { skipTransition } from '../composables/hmr'
+import { makeId } from '../logic/utils'
 
 export default function setupRoot() {
   // @ts-expect-error injected in runtime
@@ -25,7 +25,7 @@ export default function setupRoot() {
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 
-  const id = `${location.origin}_${nanoid()}`
+  const id = `${location.origin}_${makeId()}`
 
   // update shared state
   function updateSharedState() {