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

package/internals/SlidesShow.vue

@@ -6,14 +6,11 @@ import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
 import SlideWrapper from './SlideWrapper'
-
-// @ts-expect-error virtual module
-import GlobalTop from '/@slidev/global-components/top'
-
-// @ts-expect-error virtual module
-import GlobalBottom from '/@slidev/global-components/bottom'
 import PresenterMouse from './PresenterMouse.vue'
 
+import GlobalTop from '#slidev/global-components/top'
+import GlobalBottom from '#slidev/global-components/bottom'
+
 defineProps<{
   renderContext: 'slide' | 'presenter'
 }>()
@@ -77,10 +74,12 @@ function onAfterLeave() {
 
 <style scoped>
 #slideshow {
-  @apply h-full;
+  height: 100%;
 }
 
 #slideshow > div {
-  @apply h-full w-full absolute;
+  position: absolute;
+  height: 100%;
+  width: 100%;
 }
 </style>

package/layouts/two-cols-header.vue

@@ -51,9 +51,15 @@ const props = defineProps({
   grid-template-rows: repeat(2, 1fr);
 }
 
-.col-header { grid-area: 1 / 1 / 2 / 3; }
-.col-left { grid-area: 2 / 1 / 3 / 2; }
-.col-right { grid-area: 2 / 2 / 3 / 3; }
+.col-header {
+  grid-area: 1 / 1 / 2 / 3;
+}
+.col-left {
+  grid-area: 2 / 1 / 3 / 2;
+}
+.col-right {
+  grid-area: 2 / 2 / 3 / 3;
+}
 .col-bottom {
   align-self: end;
   grid-area: 3 / 1 / 3 / 3;

package/logic/drawings.ts

@@ -4,6 +4,7 @@ import { createDrauu } from 'drauu'
 import { toReactive, useLocalStorage } from '@vueuse/core'
 import { drawingState, onPatch, patch } from '../state/drawings'
 import { configs } from '../env'
+import { isInputting } from '../state'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -40,11 +41,13 @@ export const drawingMode = computed({
   set(v: DrawingMode | 'arrow') {
     _mode.value = v
     if (v === 'arrow') {
-      brush.mode = 'line'
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = 'line'
       brush.arrowEnd = true
     }
     else {
-      brush.mode = v
+      // eslint-disable-next-line ts/no-use-before-define
+      drauu.mode = v
       brush.arrowEnd = false
     }
   },
@@ -110,7 +113,7 @@ drauu.on('start', () => isDrawing.value = true)
 drauu.on('end', () => isDrawing.value = false)
 
 window.addEventListener('keydown', (e) => {
-  if (!drawingEnabled.value)
+  if (!drawingEnabled.value || isInputting.value)
     return
 
   const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey

package/logic/nav.ts

@@ -7,6 +7,7 @@ import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
+import { CLICKS_MAX } from '../constants'
 import { useRouteQuery } from './route'
 import { isDrawing } from './drawings'
 
@@ -22,6 +23,7 @@ nextTick(() => {
 })
 
 export const navDirection = ref(0)
+export const clicksDirection = ref(0)
 
 export const route = computed(() => router.currentRoute.value)
 
@@ -38,7 +40,7 @@ export const queryClicks = computed({
   get() {
     // eslint-disable-next-line ts/no-use-before-define
     if (clicksContext.value.disabled)
-      return 99999
+      return CLICKS_MAX
     let v = +(queryClicksRaw.value || 0)
     if (Number.isNaN(v))
       v = 0
@@ -84,6 +86,7 @@ watch(currentRoute, (next, prev) => {
 })
 
 export async function next() {
+  clicksDirection.value = 1
   if (clicksTotal.value <= queryClicks.value)
     await nextSlide()
   else
@@ -91,6 +94,7 @@ export async function next() {
 }
 
 export async function prev() {
+  clicksDirection.value = -1
   if (queryClicks.value <= 0)
     await prevSlide()
   else
@@ -102,11 +106,13 @@ export function getPath(no: number | string) {
 }
 
 export async function nextSlide() {
+  clicksDirection.value = 1
   if (currentPage.value < rawRoutes.length)
     await go(currentPage.value + 1)
 }
 
 export async function prevSlide(lastClicks = true) {
+  clicksDirection.value = -1
   const next = Math.max(1, currentPage.value - 1)
   await go(next)
   if (lastClicks && clicksTotal.value)
@@ -129,16 +135,13 @@ export function go(page: number | string, clicks?: number) {
 export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
   const swipeBegin = ref(0)
   const { direction, distanceX, distanceY } = usePointerSwipe(root, {
-    onSwipeStart(e) {
-      if (e.pointerType !== 'touch')
-        return
+    pointerTypes: ['touch'],
+    onSwipeStart() {
       if (isDrawing.value)
         return
       swipeBegin.value = timestamp()
     },
-    onSwipeEnd(e) {
-      if (e.pointerType !== 'touch')
-        return
+    onSwipeEnd() {
       if (!swipeBegin.value)
         return
       if (isDrawing.value)
@@ -177,7 +180,7 @@ export async function downloadPDF() {
 export async function openInEditor(url?: string) {
   if (url == null) {
     const slide = currentRoute.value?.meta?.slide
-    if (!slide?.filepath)
+    if (!slide)
       return false
     url = `${slide.filepath}:${slide.start}`
   }

package/logic/note.ts

@@ -2,17 +2,17 @@ import type { MaybeRef } from '@vueuse/core'
 import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
+import type { SlideInfo, SlidePatch } from '@slidev/types'
 
 export interface UseSlideInfo {
-  info: Ref<SlideInfoExtended | undefined>
-  update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
+  info: Ref<SlideInfo | undefined>
+  update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
 export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
-      info: ref() as Ref<SlideInfoExtended | undefined>,
+      info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
@@ -21,7 +21,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   execute()
 
-  const update = async (data: Partial<SlideInfo>) => {
+  const update = async (data: SlidePatch) => {
     return await fetch(
       url,
       {
@@ -41,7 +41,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
         info.value = payload.data
     })
     import.meta.hot?.on('slidev-update-note', (payload) => {
-      if (payload.id === id && info.value.note.trim() !== payload.note.trim())
+      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -64,7 +64,7 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: async (data: Partial<SlideInfo>, newId?: number) => {
+    update: async (data: SlidePatch, newId?: number) => {
       const info = get(newId ?? unref(id))
       const newData = await info.update(data)
       if (newData)

package/main.ts

@@ -1,17 +1,21 @@
+/// <reference types="@slidev/types/client" />
+
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
 import App from './App.vue'
 import setupMain from './setup/main'
 import { router } from './routes'
-import createDirectives from './modules/directives'
-import createSlidevContext from './modules/context'
+import { createVClickDirectives } from './modules/v-click'
+import { createVMarkDirective } from './modules/v-mark'
+import { createSlidevContext } from './modules/context'
 
-import '/@slidev/styles'
+import '#slidev/styles'
 
 const app = createApp(App)
 app.use(router)
 app.use(createHead())
-app.use(createDirectives())
+app.use(createVClickDirectives())
+app.use(createVMarkDirective())
 app.use(createSlidevContext())
 
 setupMain({ app, router })

package/modules/context.ts

@@ -1,12 +1,12 @@
 import type { App } from 'vue'
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
 import { route } from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionCurrentPage, injectionSlidevContext } from '../constants'
+import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
 export type SlidevContextNavKey = 'path' | 'total' | 'clicksContext' | 'clicks' | 'clicksTotal' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide' | 'rawRoutes' | 'go'
@@ -21,10 +21,11 @@ export interface SlidevContext {
   themeConfigs: ComputedRef<typeof configs['themeConfig']>
 }
 
-export default function createSlidevContext() {
+export function createSlidevContext() {
   return {
     install(app: App) {
       const context = reactive(useContext(route))
+      app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentPage))
 

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 lz 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 = lz.decompressFromBase64(lzEncoded)
+  const id = makeId()
   const { svg } = await mermaid.render(id, code)
   cache.set(key, svg)
   return svg

package/modules/{directives.ts → v-click.ts}

@@ -11,19 +11,21 @@ import {
   injectionClicksContext,
 } from '../constants'
 
-function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
+export type VClickValue = string | [string | number, string | number] | boolean
+
+export function dirInject<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, defaultValue?: T): T | undefined {
   return (dir.instance?.$ as any).provides[key as any] ?? defaultValue
 }
 
-export default function createDirectives() {
+export function createVClickDirectives() {
   return {
     install(app: App) {
-      app.directive('click', {
+      app.directive<HTMLElement, VClickValue>('click', {
         // @ts-expect-error extra prop
         name: 'v-click',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value)
           if (resolved == null)
             return
 
@@ -55,12 +57,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('after', {
+      app.directive<HTMLElement, VClickValue>('after', {
         // @ts-expect-error extra prop
         name: 'v-after',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, true)
           if (resolved == null)
             return
 
@@ -86,12 +88,12 @@ export default function createDirectives() {
         unmounted,
       })
 
-      app.directive('click-hide', {
+      app.directive<HTMLElement, VClickValue>('click-hide', {
         // @ts-expect-error extra prop
         name: 'v-click-hide',
 
-        mounted(el: HTMLElement, dir) {
-          const resolved = resolveClick(el, dir, false, true)
+        mounted(el, dir) {
+          const resolved = resolveClick(el, dir, dir.value, false, true)
           if (resolved == null)
             return
 
@@ -127,14 +129,12 @@ function isCurrent(thisClick: number | [number, number], clicks: number) {
     : thisClick === clicks
 }
 
-function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
+export function resolveClick(el: Element, dir: DirectiveBinding<any>, value: VClickValue, clickAfter = false, flagHide = false): ResolvedClicksInfo | null {
   const ctx = dirInject(dir, injectionClicksContext)?.value
 
   if (!el || !ctx || ctx.disabled)
     return null
 
-  let value = dir.value
-
   if (value === false || value === 'false')
     return null
 
@@ -153,7 +153,7 @@ function resolveClick(el: Element, dir: DirectiveBinding<any>, clickAfter = fals
     // range (absolute)
     delta = 0
     thisClick = value as [number, number]
-    maxClick = value[1]
+    maxClick = +value[1]
   }
   else {
     ({ start: thisClick, end: maxClick, delta } = ctx.resolve(value))

package/modules/v-mark.ts

@@ -0,0 +1,159 @@
+import type { RoughAnnotationConfig } from '@slidev/rough-notation'
+import { annotate } from '@slidev/rough-notation'
+import type { App } from 'vue'
+import { computed, watchEffect } from 'vue'
+import type { VClickValue } from './v-click'
+import { resolveClick } from './v-click'
+
+export interface RoughDirectiveOptions extends Partial<RoughAnnotationConfig> {
+  at: VClickValue
+}
+
+export type RoughDirectiveValue = VClickValue | RoughDirectiveOptions
+
+function addClass(options: RoughDirectiveOptions, cls: string) {
+  options.class = [options.class, cls].filter(Boolean).join(' ')
+  return options
+}
+
+// Definitions of supported modifiers
+const vMarkModifiers: Record<string, (options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions> = {
+  // Types
+  'box': options => Object.assign(options, { type: 'box' }),
+  'circle': options => Object.assign(options, { type: 'circle' }),
+  'underline': options => Object.assign(options, { type: 'underline' }),
+  'highlight': options => Object.assign(options, { type: 'highlight' }),
+  'strike-through': options => Object.assign(options, { type: 'strike-through' }),
+  'crossed-off': options => Object.assign(options, { type: 'crossed-off' }),
+  'bracket': options => Object.assign(options, { type: 'bracket' }),
+
+  // Type Aliases
+  'strike': options => Object.assign(options, { type: 'strike-through' }),
+  'cross': options => Object.assign(options, { type: 'crossed-off' }),
+  'crossed': options => Object.assign(options, { type: 'crossed-off' }),
+  'linethrough': options => Object.assign(options, { type: 'strike-through' }),
+  'line-through': options => Object.assign(options, { type: 'strike-through' }),
+
+  // Colors
+  // @unocss-include
+  'black': options => addClass(options, 'text-black'),
+  'blue': options => addClass(options, 'text-blue'),
+  'cyan': options => addClass(options, 'text-cyan'),
+  'gray': options => addClass(options, 'text-gray'),
+  'green': options => addClass(options, 'text-green'),
+  'indigo': options => addClass(options, 'text-indigo'),
+  'lime': options => addClass(options, 'text-lime'),
+  'orange': options => addClass(options, 'text-orange'),
+  'pink': options => addClass(options, 'text-pink'),
+  'purple': options => addClass(options, 'text-purple'),
+  'red': options => addClass(options, 'text-red'),
+  'teal': options => addClass(options, 'text-teal'),
+  'white': options => addClass(options, 'text-white'),
+  'yellow': options => addClass(options, 'text-yellow'),
+}
+
+const vMarkModifiersDynamic: [RegExp, (match: RegExpMatchArray, options: RoughDirectiveOptions, value?: any) => RoughDirectiveOptions][] = [
+  // Support setting delay like `v-mark.delay300="1"`
+  [/^delay-?(\d+)?$/, (match, options, value) => {
+    const ms = (match[1] ? Number.parseInt(match[1]) : value) || 300
+    options.delay = ms
+    return options
+  }],
+  // Support setting opacity like `v-mark.op50="1"`
+  [/^(?:op|opacity)-?(\d+)?$/, (match, options, value) => {
+    const opacity = (match[1] ? Number.parseInt(match[1]) : value) || 100
+    options.opacity = opacity / 100
+    return options
+  }],
+]
+
+/**
+ * This supports v-mark directive to add notations to elements, powered by `rough-notation`.
+ */
+export function createVMarkDirective() {
+  return {
+    install(app: App) {
+      app.directive<HTMLElement, RoughDirectiveValue>('mark', {
+        // @ts-expect-error extra prop
+        name: 'v-mark',
+
+        mounted: (el, binding) => {
+          const options = computed(() => {
+            const bindingOptions = (typeof binding.value === 'object' && !Array.isArray(binding.value))
+              ? { ...binding.value }
+              : { at: binding.value }
+
+            let modifierOptions: RoughDirectiveOptions = { at: bindingOptions.at }
+            const unknownModifiers = Object.entries(binding.modifiers)
+              .filter(([k, v]) => {
+                if (vMarkModifiers[k]) {
+                  modifierOptions = vMarkModifiers[k](modifierOptions, v)
+                  return false
+                }
+                for (const [re, fn] of vMarkModifiersDynamic) {
+                  const match = k.match(re)
+                  if (match) {
+                    modifierOptions = fn(match, modifierOptions, v)
+                    return false
+                  }
+                }
+                return true
+              })
+
+            if (unknownModifiers.length)
+              console.warn('[Slidev] Invalid modifiers for v-mark:', unknownModifiers)
+
+            const options = {
+              ...modifierOptions,
+              ...bindingOptions,
+            }
+            options.type ||= 'underline'
+
+            return options
+          })
+
+          const annotation = annotate(el, options.value as RoughAnnotationConfig)
+
+          const resolvedClick = resolveClick(el, binding, options.value.at)
+          if (!resolvedClick) {
+            console.error('[Slidev] Invalid value for v-mark:', options.value.at)
+            return
+          }
+
+          watchEffect(() => {
+            let shouldShow: boolean | undefined
+
+            if (options.value.class)
+              annotation.class = options.value.class
+            if (options.value.color)
+              annotation.color = options.value.color
+
+            const at = options.value.at
+
+            if (at === true) {
+              shouldShow = true
+            }
+            else if (at === false) {
+              shouldShow = false
+            }
+            else if (resolvedClick) {
+              shouldShow = resolvedClick.isActive.value
+            }
+            else {
+              console.error('[Slidev] Invalid value for v-mark:', at)
+              return
+            }
+
+            if (shouldShow == null)
+              return
+
+            if (shouldShow)
+              annotation.show()
+            else
+              annotation.hide()
+          })
+        },
+      })
+    },
+  }
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@slidev/client",
-  "version": "0.48.0-beta.2",
+  "type": "module",
+  "version": "0.48.0-beta.20",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -13,6 +14,12 @@
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "exports": {
     "./package.json": "./package.json",
+    "./constants": "./constants.ts",
+    "./context": "./context.ts",
+    "./env": "./env.ts",
+    "./layoutHelper": "./layoutHelper.ts",
+    "./routes": "./routes.ts",
+    "./utils": "./utils.ts",
     "./*": "./*"
   },
   "engines": {
@@ -22,34 +29,37 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
-    "@shikijs/vitepress-twoslash": "^1.1.3",
+    "@shikijs/monaco": "^1.1.7",
+    "@shikijs/vitepress-twoslash": "^1.1.7",
+    "@slidev/rough-notation": "^0.1.0",
+    "@typescript/ata": "^0.9.4",
     "@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",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/math": "^10.9.0",
+    "@vueuse/motion": "^2.1.0",
     "codemirror": "^5.65.16",
-    "defu": "^6.1.4",
-    "drauu": "^0.3.7",
+    "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-base64": "^3.7.6",
     "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.5",
+    "monaco-editor": "^0.46.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
-    "resolve": "^1.22.8",
+    "shiki": "^1.1.7",
+    "shiki-magic-move": "^0.1.0",
+    "typescript": "^5.3.3",
     "unocss": "^0.58.5",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
-    "@slidev/parser": "0.48.0-beta.2",
-    "@slidev/types": "0.48.0-beta.2"
+    "vue": "^3.4.20",
+    "vue-router": "^4.3.0",
+    "@slidev/types": "0.48.0-beta.20",
+    "@slidev/parser": "0.48.0-beta.20"
   },
   "devDependencies": {
-    "vite": "^5.1.3"
+    "vite": "^5.1.4"
   }
 }

package/{internals/EntrySelect.vue → pages/entry.vue}

@@ -21,5 +21,12 @@
       <carbon:catalog class="text-3em op50" />
       Notes
     </RouterLink>
+    <RouterLink
+      to="/overview"
+      class="flex flex-col gap-2 items-center justify-center h-40 min-w-40 rounded bg-gray:10 p4 hover:bg-gray/20"
+    >
+      <carbon:list-boxes class="text-3em op50" />
+      Overview
+    </RouterLink>
   </div>
 </template>

package/{internals/NotesView.vue → pages/notes.vue}

@@ -7,8 +7,8 @@ import { sharedState } from '../state/shared'
 import { fullscreen } from '../state'
 import { total } from '../logic/nav'
 import { rawRoutes } from '../routes'
-import NoteDisplay from './NoteDisplay.vue'
-import IconButton from './IconButton.vue'
+import NoteDisplay from '../internals/NoteDisplay.vue'
+import IconButton from '../internals/IconButton.vue'
 
 const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
 useHead({
@@ -51,9 +51,11 @@ function decreaseFontSize() {
         :note="currentRoute?.meta?.slide?.note"
         :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-gray-400 border-opacity-20">
+    <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" />