@slidev/client 0.49.29 → 0.50.0-beta.10

package/builtin/Arrow.vue

@@ -9,8 +9,8 @@ Simple Arrow
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
+import { ref } from 'vue'
 import { makeId } from '../logic/utils'
 
 defineProps<{

package/builtin/CodeBlockWrapper.vue

@@ -12,13 +12,13 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 -->
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
 import { useClipboard } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
-import type { PropType } from 'vue'
-import { configs } from '../env'
-import { makeId, updateCodeHighlightRange } from '../logic/utils'
 import { CLASS_VCLICK_HIDDEN, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
+import { configs } from '../env'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
 
 const props = defineProps({
   ranges: {

package/builtin/KaTexBlockWrapper.vue

@@ -20,12 +20,12 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
-import { parseRangeString } from '@slidev/parser'
+import { parseRangeString } from '@slidev/parser/utils'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
-import { makeId } from '../logic/utils'
 import { useSlideContext } from '../context'
+import { makeId } from '../logic/utils'
 
 const props = defineProps({
   ranges: {

package/builtin/Mermaid.vue

@@ -14,9 +14,9 @@ pie
 
 <script setup lang="ts">
 import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
-import { renderMermaid } from '../modules/mermaid'
 import ShadowRoot from '../internals/ShadowRoot.vue'
 import { isDark } from '../logic/dark'
+import { renderMermaid } from '../modules/mermaid'
 
 const props = defineProps<{
   codeLz: string

package/builtin/Monaco.vue

@@ -12,15 +12,15 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
+import type { RawAtValue } from '@slidev/types'
+import type * as monaco from 'monaco-editor'
 import { debounce } from '@antfu/utils'
+import { whenever } from '@vueuse/core'
 import lz from 'lz-string'
-import type * as monaco from 'monaco-editor'
 import { computed, defineAsyncComponent, nextTick, onMounted, ref } from 'vue'
-import type { RawAtValue } from '@slidev/types'
-import { whenever } from '@vueuse/core'
-import { makeId } from '../logic/utils'
-import { useSlideContext } from '../context'
 import { useNav } from '../composables/useNav'
+import { useSlideContext } from '../context'
+import { makeId } from '../logic/utils'
 
 const props = withDefaults(defineProps<{
   codeLz: string
@@ -197,6 +197,7 @@ onMounted(async () => {
   })
 
   nextTick(() => monaco.editor.remeasureFonts())
+  setTimeout(() => monaco.editor.remeasureFonts(), 1000)
 })
 </script>
 

package/builtin/RenderWhen.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { RenderContext } from '@slidev/types'
-import { computed, ref } from 'vue'
 import { useElementVisibility } from '@vueuse/core'
-import { useSlideContext } from '../context'
+import { computed, ref } from 'vue'
 import { useNav } from '../composables/useNav'
+import { useSlideContext } from '../context'
 
 type Context = 'main' | 'visible' | 'print' | RenderContext
 

package/builtin/ShikiMagicMove.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import type { PropType } from 'vue'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import lz from 'lz-string'
 import { sleep } from '@antfu/utils'
-import { useSlideContext } from '../context'
-import { makeId, updateCodeHighlightRange } from '../logic/utils'
+import lz from 'lz-string'
+import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useNav } from '../composables/useNav'
 import { CLICKS_MAX } from '../constants'
+import { useSlideContext } from '../context'
 import { configs } from '../env'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
 
 const props = defineProps({
   at: {

package/builtin/SlidevVideo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
 import { and } from '@vueuse/math'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useNav } from '../composables/useNav'
 import { useSlideContext } from '../context'
 import { resolvedClickMap } from '../modules/v-click'
-import { useNav } from '../composables/useNav'
 
 const props = defineProps<{
   autoplay?: boolean | 'once'

package/builtin/Toc.vue

@@ -8,8 +8,8 @@ Usage:
 <Toc columns='2' maxDepth='3' mode='onlySiblings'/>
 -->
 <script setup lang='ts'>
-import { computed } from 'vue'
 import type { TocItem } from '@slidev/types'
+import { computed } from 'vue'
 import { useSlideContext } from '../context'
 import TocList from './TocList.vue'
 

package/builtin/TocList.vue

@@ -7,10 +7,11 @@ Usage:
 <TocList :list="list"/>
 -->
 <script setup lang="ts">
-import { computed } from 'vue'
-import { toArray } from '@antfu/utils'
 import type { TocItem } from '@slidev/types'
 import TitleRenderer from '#slidev/title-renderer'
+import { toArray } from '@antfu/utils'
+import { computed } from 'vue'
+import { useNav } from '../composables/useNav'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -20,6 +21,8 @@ const props = withDefaults(defineProps<{
   listClass?: string | string[]
 }>(), { level: 1 })
 
+const { isPresenter } = useNav()
+
 const classes = computed(() => {
   return [
     ...toArray(props.listClass || []),
@@ -47,7 +50,7 @@ const styles = computed(() => {
       :key="item.path" class="slidev-toc-item"
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
-      <Link :to="item.path">
+      <Link :to="isPresenter ? `/presenter${item.path}` : item.path">
         <TitleRenderer :no="item.no" />
       </Link>
       <TocList

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/builtin/VAfter.ts

@@ -4,8 +4,8 @@
  * Learn more: https://sli.dev/guide/animations.html#click-animation
  */
 
-import { toArray } from '@antfu/utils'
 import type { Directive, VNode } from 'vue'
+import { toArray } from '@antfu/utils'
 import { defineComponent, h, resolveDirective, withDirectives } from 'vue'
 
 export default defineComponent({

package/builtin/VClick.ts

@@ -5,7 +5,7 @@
  */
 
 import type { PropType, VNode } from 'vue'
-import { Text, defineComponent, h } from 'vue'
+import { defineComponent, h, Text } from 'vue'
 import { CLICKS_MAX } from '../constants'
 import VClicks from './VClicks'
 

package/builtin/VClickGap.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Fragment, onMounted, onUnmounted } from 'vue'
-import { makeId } from '../logic/utils'
 import { useSlideContext } from '../context'
+import { makeId } from '../logic/utils'
 
 const props = defineProps({
   size: {

package/builtin/VClicks.ts

@@ -4,8 +4,8 @@
  * Learn more: https://sli.dev/guide/animations.html#click-animation
  */
 
-import { toArray } from '@antfu/utils'
 import type { VNode, VNodeArrayChildren } from 'vue'
+import { toArray } from '@antfu/utils'
 import { Comment, createVNode, defineComponent, h, isVNode, resolveDirective, withDirectives } from 'vue'
 import { normalizeSingleAtValue } from '../composables/useClicks'
 import VClickGap from './VClickGap.vue'

package/builtin/VDrag.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
 import type { DragElementMarkdownSource } from '../composables/useDragElements'
+import { onMounted, onUnmounted } from 'vue'
 import { useDragElement } from '../composables/useDragElements'
 
 const props = defineProps<{

package/builtin/VDragArrow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
 import type { DragElementMarkdownSource } from '../composables/useDragElements'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useDragElement } from '../composables/useDragElements'
 import Arrow from './Arrow.vue'
 

package/builtin/VSwitch.ts

@@ -1,11 +1,11 @@
 import type { PropType, Ref, Slot, TransitionGroupProps, VNode } from 'vue'
-import { TransitionGroup, defineComponent, h, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { recomputeAllPoppers } from 'floating-vue'
+import { defineComponent, h, onMounted, onUnmounted, ref, TransitionGroup, watchEffect } from 'vue'
+import { CLASS_VCLICK_CURRENT, CLASS_VCLICK_DISPLAY_NONE, CLASS_VCLICK_PRIOR, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'
-import { makeId } from '../logic/utils'
-import { resolveTransition } from '../logic/transition'
 import { skipTransition } from '../logic/hmr'
-import { CLASS_VCLICK_CURRENT, CLASS_VCLICK_DISPLAY_NONE, CLASS_VCLICK_PRIOR, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
+import { resolveTransition } from '../logic/transition'
+import { makeId } from '../logic/utils'
 
 export default defineComponent({
   props: {

package/composables/useClicks.ts

@@ -1,6 +1,6 @@
-import { clamp, sum } from '@antfu/utils'
 import type { ClicksContext, NormalizedRangeClickValue, NormalizedSingleClickValue, RawAtValue, RawSingleAtValue, SlideRoute } from '@slidev/types'
 import type { Ref } from 'vue'
+import { clamp, sum } from '@antfu/utils'
 import { computed, onMounted, onUnmounted, ref, shallowReactive } from 'vue'
 
 export function normalizeSingleAtValue(at: RawSingleAtValue): NormalizedSingleClickValue {

package/composables/useDragElements.ts

@@ -1,7 +1,7 @@
-import { debounce, ensureSuffix } from '@antfu/utils'
 import type { SlidePatch } from '@slidev/types'
-import { injectLocal, onClickOutside, useWindowFocus } from '@vueuse/core'
 import type { CSSProperties, DirectiveBinding, InjectionKey, WatchStopHandle } from 'vue'
+import { debounce, ensureSuffix } from '@antfu/utils'
+import { injectLocal, onClickOutside, useWindowFocus } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { injectionCurrentPage, injectionFrontmatter, injectionRenderContext, injectionSlideElement, injectionSlideScale, injectionSlideZoom } from '../constants'
 import { makeId } from '../logic/utils'
@@ -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/useDrawings.ts

@@ -1,10 +1,10 @@
-import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
-import { createDrauu } from 'drauu'
 import { createSharedComposable, toReactive, useLocalStorage } from '@vueuse/core'
-import { drawingState, onPatchDrawingState, patchDrawingState } from '../state/drawings'
+import { createDrauu } from 'drauu'
+import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import { configs } from '../env'
 import { isInputting } from '../state'
+import { drawingState, onPatchDrawingState, patchDrawingState } from '../state/drawings'
 import { useNav } from './useNav'
 
 export const useDrawings = createSharedComposable(() => {

package/composables/useNav.ts

@@ -1,20 +1,20 @@
 import type { ClicksContext, SlideRoute, TocItem } from '@slidev/types'
 import type { ComputedRef, Ref, TransitionGroupProps, WritableComputedRef } from 'vue'
-import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import type { RouteLocationNormalized, Router } from 'vue-router'
+import { slides } from '#slidev/slides'
+import { clamp } from '@antfu/utils'
 import { createSharedComposable } from '@vueuse/core'
 import { logicOr } from '@vueuse/math'
-import { clamp } from '@antfu/utils'
-import { getCurrentTransition } from '../logic/transition'
-import { getSlide, getSlidePath } from '../logic/slides'
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { CLICKS_MAX } from '../constants'
-import { skipTransition } from '../logic/hmr'
 import { configs } from '../env'
+import { skipTransition } from '../logic/hmr'
 import { useRouteQuery } from '../logic/route'
-import { useTocTree } from './useTocTree'
+import { getSlide, getSlidePath } from '../logic/slides'
+import { getCurrentTransition } from '../logic/transition'
 import { createClicksContextBase } from './useClicks'
-import { slides } from '#slidev/slides'
+import { useTocTree } from './useTocTree'
 
 export interface SlidevContextNav {
   slides: Ref<SlideRoute[]>

package/composables/useSlideInfo.ts

@@ -1,8 +1,8 @@
+import type { SlideInfo, SlidePatch } from '@slidev/types'
 import type { MaybeRef } from '@vueuse/core'
-import { useFetch } from '@vueuse/core'
 import type { Ref } from 'vue'
+import { useFetch } from '@vueuse/core'
 import { computed, ref, unref } from 'vue'
-import type { SlideInfo, SlidePatch } from '@slidev/types'
 import { getSlide } from '../logic/slides'
 
 export interface UseSlideInfo {

package/composables/useSwipeControls.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
-import { ref } from 'vue'
 import { timestamp, usePointerSwipe } from '@vueuse/core'
+import { ref } from 'vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from './useDrawings'
 

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/composables/useViewTransition.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { getSlide } from '../logic/slides'
 import { configs } from '../env'
+import { getSlide } from '../logic/slides'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -17,7 +17,7 @@ export function useViewTransition() {
     const toMeta = getSlide(to.params.no as string)?.meta
     const fromNo = fromMeta?.slide?.no
     const toNo = toMeta?.slide?.no
-    const transitionType = fromNo != null && toNo != null
+    const transitionType = fromNo != null && toNo != null && fromNo !== toNo
       && ((fromNo < toNo ? fromMeta?.transition : toMeta?.transition) ?? configs.transition)
     if (transitionType !== 'view-transition') {
       isViewTransition.value = false
@@ -41,7 +41,6 @@ export function useViewTransition() {
 
     // Wait for `TransitionGroup` to become normal `div`
     setTimeout(() => {
-      // @ts-expect-error missing types
       document.startViewTransition(() => {
         changeRoute()
         return promise

package/constants.ts

@@ -1,5 +1,5 @@
-import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import type { ComputedRef, InjectionKey, Ref, UnwrapNestedRefs } from 'vue'
 import type { SlidevContext } from './modules/context'
 
 // Here we use string literal instead of symbols to make HMR more stable
@@ -45,6 +45,7 @@ export const FRONTMATTER_FIELDS = [
   'transition',
   'zoom',
   'dragPos',
+  'lang',
 ]
 
 export const HEADMATTER_FIELDS = [
@@ -81,4 +82,5 @@ export const HEADMATTER_FIELDS = [
   'mdc',
   'contextMenu',
   'wakeLock',
+  'overviewSnapshots',
 ]

package/context.ts

@@ -1,5 +1,5 @@
-import { computed, ref, toRef } from 'vue'
 import { injectLocal, objectOmit } from '@vueuse/core'
+import { computed, ref, toRef } from 'vue'
 import {
   FRONTMATTER_FIELDS,
   HEADMATTER_FIELDS,
@@ -9,8 +9,8 @@ import {
   injectionRenderContext,
   injectionRoute,
   injectionSlideScale,
-  injectionSlideZoom,
   injectionSlidevContext,
+  injectionSlideZoom,
 } from './constants'
 
 /**

package/env.ts

@@ -1,6 +1,6 @@
-import { computed } from 'vue'
-import { objectMap } from '@antfu/utils'
 import configs from '#slidev/configs'
+import { objectMap } from '@antfu/utils'
+import { computed } from 'vue'
 
 export { configs }
 

package/index.ts

@@ -3,11 +3,29 @@
  *
  * The other files despite they are accessable, are not meant to be used directly, breaking changes might happen.
  */
-export { useSlideContext } from './context'
-export { useNav } from './composables/useNav'
-export { useDrawings } from './composables/useDrawings'
+
 export { useDarkMode } from './composables/useDarkMode'
-export { useIsSlideActive, onSlideEnter, onSlideLeave } from './logic/slides'
+export { useDrawings } from './composables/useDrawings'
+export { useNav } from './composables/useNav'
+
+export { useSlideContext } from './context'
 
-export * from './layoutHelper'
 export * from './env'
+export * from './layoutHelper'
+
+export {
+  onSlideEnter,
+  onSlideLeave,
+  useIsSlideActive,
+} from './logic/slides'
+
+export type { DrawingsState } from './state/drawings'
+export { drawingState, onDrawingUpdate } from './state/drawings'
+export type { SharedState } from './state/shared'
+export { onSharedUpdate, sharedState } from './state/shared'
+
+export {
+  addSyncMethod,
+  createSyncState,
+  disableBuiltinSync,
+} from './state/syncState'

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
+import type { CodeRunnerOutputs, RawAtValue } from '@slidev/types'
 import { debounce, toArray } from '@antfu/utils'
 import { useVModel } from '@vueuse/core'
-import type { CodeRunnerOutputs, RawAtValue } from '@slidev/types'
 import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch, watchSyncEffect } from 'vue'
-import { useSlideContext } from '../context'
-import setupCodeRunners from '../setup/code-runners'
 import { useNav } from '../composables/useNav'
+import { useSlideContext } from '../context'
 import { makeId } from '../logic/utils'
-import IconButton from './IconButton.vue'
+import setupCodeRunners from '../setup/code-runners'
 import DomElement from './DomElement.vue'
+import IconButton from './IconButton.vue'
 
 const props = defineProps<{
   modelValue: string
@@ -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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onClickOutside, useElementBounding, useEventListener, useWindowFocus } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
-import { closeContextMenu, currentContextMenu } from '../logic/contextMenu'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
-import { windowSize } from '../state'
 import { configs } from '../env'
+import { closeContextMenu, currentContextMenu } from '../logic/contextMenu'
+import { windowSize } from '../state'
 
 const container = ref<HTMLElement>()
 
@@ -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/Controls.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { showInfoDialog, showRecordingDialog } from '../state'
-import { configs } from '../env'
 import { useNav } from '../composables/useNav'
-import QuickOverview from './QuickOverview.vue'
-import InfoDialog from './InfoDialog.vue'
-import Goto from './Goto.vue'
+import { configs } from '../env'
+import { showInfoDialog, showRecordingDialog } from '../state'
 import ContextMenu from './ContextMenu.vue'
+import Goto from './Goto.vue'
+import InfoDialog from './InfoDialog.vue'
+import QuickOverview from './QuickOverview.vue'
 
 const { isEmbedded } = useNav()
 const drawingEnabled = __SLIDEV_FEATURE_DRAWINGS__ && !configs.drawings.presenterOnly && !isEmbedded.value
@@ -23,7 +23,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
 </script>
 
 <template>
-  <DrawingControls v-if="drawingEnabled && DrawingControls" />
+  <DrawingControls v-if="DrawingControls" />
   <QuickOverview />
   <Goto />
   <WebCamera v-if="WebCamera" />

package/internals/DevicesList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { SelectionItem } from './types'
 import { computed } from 'vue'
-import { currentCamera, currentMic } from '../state'
 import {
   cameras,
   ensureDevicesListPermissions,
@@ -9,8 +9,8 @@ import {
   mimeType,
   supportedMimeTypes,
 } from '../logic/recording'
+import { currentCamera, currentMic } from '../state'
 import SelectList from './SelectList.vue'
-import type { SelectionItem } from './types'
 
 const camerasItems = computed<SelectionItem<string>[]>(() => [
   {

package/internals/DragControl.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { clamp } from '@antfu/utils'
 import type { Pausable } from '@vueuse/core'
+import type { DragElementState } from '../composables/useDragElements'
+import { clamp } from '@antfu/utils'
 import { useIntervalFn } from '@vueuse/core'
 import { computed, inject, ref, watchEffect } from 'vue'
-import type { DragElementState } from '../composables/useDragElements'
 import { useSlideBounds } from '../composables/useSlideBounds'
 import { injectionSlideScale } from '../constants'
 import { slideHeight, slideWidth } from '../env'

package/internals/Draggable.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { useDraggable, useLocalStorage } from '@vueuse/core'
+import { ref } from 'vue'
 
 const props = defineProps<{
   storageKey?: string