@slidev/client 0.50.0-beta.9 → 0.51.0-beta.1

package/pages/presenter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
-import { useMouse, useWindowFocus } from '@vueuse/core'
+import { useLocalStorage, useMouse, useWindowFocus } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { createFixedClicks } from '../composables/useClicks'
 import { useDrawings } from '../composables/useDrawings'
@@ -18,6 +18,8 @@ import NavControls from '../internals/NavControls.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
 import NoteStatic from '../internals/NoteStatic.vue'
 import QuickOverview from '../internals/QuickOverview.vue'
+import ScreenCaptureMirror from '../internals/ScreenCaptureMirror.vue'
+import SegmentControl from '../internals/SegmentControl.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import SlidesShow from '../internals/SlidesShow.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
@@ -26,6 +28,7 @@ import { registerShortcuts } from '../logic/shortcuts'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showPresenterCursor } from '../state'
 import { sharedState } from '../state/shared'
 
+const inFocus = useWindowFocus()
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
@@ -49,7 +52,7 @@ useHead({ title: `Presenter - ${slidesTitle}` })
 
 const notesEditing = ref(false)
 
-const { timer, isTimerAvctive, resetTimer, toggleTimer } = useTimer()
+const { timer, isTimerActive, resetTimer, toggleTimer } = useTimer()
 
 const clicksCtxMap = computed(() => slides.value.map(route => createFixedClicks(route)))
 const nextFrame = computed(() => {
@@ -74,6 +77,7 @@ watch(
   { immediate: true },
 )
 
+const mainSlideMode = useLocalStorage<'slides' | 'mirror'>('slidev-presenter-main-slide-mode', 'slides')
 const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
   import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
@@ -86,7 +90,7 @@ onMounted(() => {
 
   watch(
     () => {
-      if (!focus.value || isDrawing.value || !showPresenterCursor.value)
+      if (!focus.value || isDrawing.value || !showPresenterCursor.value || !slidesContainer)
         return undefined
 
       const rect = slidesContainer.getBoundingClientRect()
@@ -106,25 +110,39 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-main h-full slidev-presenter">
+  <div class="bg-main h-full slidev-presenter" pt-2px>
     <div class="grid-container" :class="`layout${presenterLayout}`">
       <div ref="main" class="relative grid-section main flex flex-col">
-        <SlideContainer
-          key="main"
-          class="p-2 lg:p-4 flex-auto"
-          is-main
-          @contextmenu="onContextMenu"
-        >
-          <SlidesShow render-context="presenter" />
-        </SlideContainer>
+        <div flex="~ gap-4 items-center" border="b main" p1>
+          <span op50 px2>Current</span>
+          <div flex-auto />
+          <SegmentControl
+            v-model="mainSlideMode"
+            :options="[
+              { label: 'Slides', value: 'slides' },
+              { label: 'Screen Mirror', value: 'mirror' },
+            ]"
+          />
+        </div>
+        <template v-if="mainSlideMode === 'mirror'">
+          <ScreenCaptureMirror />
+        </template>
+        <template v-else>
+          <SlideContainer
+            key="main"
+            class="p-2 lg:p-4 flex-auto"
+            is-main
+            @contextmenu="onContextMenu"
+          >
+            <SlidesShow render-context="presenter" />
+          </SlideContainer>
+        </template>
+
         <ClicksSlider
           :key="currentSlideRoute?.no"
           :clicks-context="getPrimaryClicks(currentSlideRoute)"
           class="w-full pb2 px4 flex-none"
         />
-        <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">
         <SlideContainer v-if="nextFrame && nextFrameClicksCtx" key="next">
@@ -165,7 +183,8 @@ onMounted(() => {
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
           :clicks-context="clicksContext"
         />
-        <div class="border-t border-main py-1 px-2 text-sm">
+        <div border-t border-main />
+        <div class="py-1 px-2 text-sm transition" :class="inFocus ? '' : 'op25'">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
             <div class="i-carbon:zoom-in" />
           </IconButton>
@@ -182,14 +201,14 @@ onMounted(() => {
         </div>
       </div>
       <div class="grid-section bottom flex">
-        <NavControls :persist="true" />
+        <NavControls :persist="true" class="transition" :class="inFocus ? '' : 'op25'" />
         <div flex-auto />
         <div class="group flex items-center justify-center pl-4 select-none">
           <div class="w-22px cursor-pointer">
             <div class="i-carbon:time group-hover:hidden text-xl" />
             <div class="group-not-hover:hidden flex flex-col items-center">
               <div class="relative op-80 hover:op-100" @click="toggleTimer">
-                <div v-if="isTimerAvctive" class="i-carbon:pause text-lg" />
+                <div v-if="isTimerActive" class="i-carbon:pause text-lg" />
                 <div v-else class="i-carbon:play" />
               </div>
               <div class="op-80 hover:op-100" @click="resetTimer">
@@ -247,6 +266,15 @@ onMounted(() => {
     'bottom bottom';
 }
 
+.grid-container.layout3 {
+  grid-template-columns: 2fr 3fr;
+  grid-template-rows: 1fr 1fr min-content;
+  grid-template-areas:
+    'note next'
+    'main next'
+    'bottom bottom';
+}
+
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;

package/pages/print.vue

@@ -3,7 +3,6 @@ import { recomputeAllPoppers } from 'floating-vue'
 import { onMounted, watchEffect } from 'vue'
 import { useNav } from '../composables/useNav'
 import PrintContainer from '../internals/PrintContainer.vue'
-import PrintStyle from '../internals/PrintStyle.vue'
 import { windowSize } from '../state'
 
 const { isPrintMode } = useNav()
@@ -21,7 +20,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <PrintStyle v-if="isPrintMode" />
   <div id="page-root" class="grid grid-cols-[1fr_max-content]">
     <PrintContainer
       class="w-full h-full"

package/setup/monaco.ts

@@ -64,22 +64,22 @@ const setup = createSingletonPromise(async () => {
 
   const ata = configs.monacoTypesSource === 'cdn'
     ? setupTypeAcquisition({
-      projectName: 'TypeScript Playground',
-      typescript: ts as any, // Version mismatch. No problem found so far.
-      logger: console,
-      delegate: {
-        receivedFile: (code: string, path: string) => {
-          defaults.addExtraLib(code, `file://${path}`)
-          const uri = monaco.Uri.file(path)
-          if (monaco.editor.getModel(uri) === null)
-            monaco.editor.createModel(code, 'javascript', uri)
-        },
-        progress: (downloaded: number, total: number) => {
+        projectName: 'TypeScript Playground',
+        typescript: ts as any, // Version mismatch. No problem found so far.
+        logger: console,
+        delegate: {
+          receivedFile: (code: string, path: string) => {
+            defaults.addExtraLib(code, `file://${path}`)
+            const uri = monaco.Uri.file(path)
+            if (monaco.editor.getModel(uri) === null)
+              monaco.editor.createModel(code, 'javascript', uri)
+          },
+          progress: (downloaded: number, total: number) => {
           // eslint-disable-next-line no-console
-          console.debug(`[Typescript ATA] ${downloaded} / ${total}`)
+            console.debug(`[Typescript ATA] ${downloaded} / ${total}`)
+          },
         },
-      },
-    })
+      })
     : () => { }
 
   monaco.languages.register({ id: 'vue' })

package/setup/root.ts

@@ -5,11 +5,13 @@ import { useRouter } from 'vue-router'
 import { createFixedClicks } from '../composables/useClicks'
 import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
 import { useNav } from '../composables/useNav'
+import { usePrintStyles } from '../composables/usePrintStyles'
 import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext, TRUST_ORIGINS } from '../constants'
 import { configs, slidesTitle } from '../env'
 import { skipTransition } from '../logic/hmr'
 import { getSlidePath } from '../logic/slides'
 import { makeId } from '../logic/utils'
+import { syncDirections } from '../state'
 import { initDrawingState } from '../state/drawings'
 import { initSharedState, onPatch, patch } from '../state/shared'
 
@@ -43,6 +45,7 @@ export default function setupRoot() {
     hasPrimarySlide,
     isNotesViewer,
     isPresenter,
+    isPrintMode,
   } = useNav()
 
   useHead({
@@ -50,34 +53,34 @@ export default function setupRoot() {
     htmlAttrs: configs.htmlAttrs,
   })
 
+  usePrintStyles()
+
   initSharedState(`${slidesTitle} - shared`)
   initDrawingState(`${slidesTitle} - drawings`)
 
   const id = `${location.origin}_${makeId()}`
+  const syncType = computed(() => isPresenter.value ? 'presenter' : 'viewer')
 
   // update shared state
   function updateSharedState() {
-    if (isNotesViewer.value)
-      return
+    const shouldSend = isPresenter.value
+      ? syncDirections.value.presenterSend
+      : syncDirections.value.viewerSend
 
+    if (!shouldSend)
+      return
+    if (isNotesViewer.value || isPrintMode.value)
+      return
     // we allow Presenter mode, or Viewer mode from trusted origins to update the shared state
     if (!isPresenter.value && !TRUST_ORIGINS.includes(location.host.split(':')[0]))
       return
 
-    if (isPresenter.value) {
-      patch('page', +currentSlideNo.value)
-      patch('clicks', clicksContext.value.current)
-      patch('clicksTotal', clicksContext.value.total)
-    }
-    else {
-      patch('viewerPage', +currentSlideNo.value)
-      patch('viewerClicks', clicksContext.value.current)
-      patch('viewerClicksTotal', clicksContext.value.total)
-    }
-
+    patch('page', +currentSlideNo.value)
+    patch('clicks', clicksContext.value.current)
+    patch('clicksTotal', clicksContext.value.total)
     patch('lastUpdate', {
       id,
-      type: isPresenter.value ? 'presenter' : 'viewer',
+      type: syncType.value,
       time: new Date().getTime(),
     })
   }
@@ -86,17 +89,26 @@ export default function setupRoot() {
   watch(clicksContext, updateSharedState)
 
   onPatch((state) => {
-    if (!hasPrimarySlide.value)
+    const shouldReceive = isPresenter.value
+      ? syncDirections.value.presenterReceive
+      : syncDirections.value.viewerReceive
+    if (!shouldReceive)
       return
-    if (state.lastUpdate?.type === 'presenter' && (+state.page !== +currentSlideNo.value || +clicksContext.value.current !== +state.clicks)) {
-      skipTransition.value = false
-      router.replace({
-        path: getSlidePath(state.page, isPresenter.value),
-        query: {
-          ...router.currentRoute.value.query,
-          clicks: state.clicks || 0,
-        },
-      })
-    }
+    if (!hasPrimarySlide.value || isPrintMode.value)
+      return
+    if (state.lastUpdate?.type === syncType.value)
+      return
+    if ((+state.page === +currentSlideNo.value && +clicksContext.value.current === +state.clicks))
+      return
+    // if (state.lastUpdate?.type === 'presenter') {
+    skipTransition.value = false
+    router.replace({
+      path: getSlidePath(state.page, isPresenter.value),
+      query: {
+        ...router.currentRoute.value.query,
+        clicks: state.clicks || 0,
+      },
+    })
+    // }
   })
 }

package/setup/routes.ts

@@ -5,21 +5,21 @@ import setups from '#slidev/setups/routes'
 export default function setupRoutes() {
   const routes: RouteRecordRaw[] = []
 
-  if (__SLIDEV_FEATURE_PRESENTER__) {
-    function passwordGuard(to: RouteLocationNormalized) {
-      if (!configs.remote || configs.remote === to.query.password)
+  function passwordGuard(to: RouteLocationNormalized) {
+    if (!configs.remote || configs.remote === to.query.password)
+      return true
+    if (configs.remote && to.query.password === undefined) {
+      // eslint-disable-next-line no-alert
+      const password = prompt('Enter password')
+      if (configs.remote === password)
         return true
-      if (configs.remote && to.query.password === undefined) {
-        // eslint-disable-next-line no-alert
-        const password = prompt('Enter password')
-        if (configs.remote === password)
-          return true
-      }
-      if (to.params.no)
-        return { path: `/${to.params.no}` }
-      return { path: '' }
     }
+    if (to.params.no)
+      return { path: `/${to.params.no}` }
+    return { path: '' }
+  }
 
+  if (__SLIDEV_FEATURE_PRESENTER__) {
     routes.push(
       {
         name: 'entry',
@@ -64,6 +64,17 @@ export default function setupRoutes() {
     )
   }
 
+  if (__SLIDEV_FEATURE_BROWSER_EXPORTER__) {
+    routes.push(
+      {
+        name: 'export',
+        path: '/export/:no?',
+        component: () => import('../pages/export.vue'),
+        beforeEnter: passwordGuard,
+      },
+    )
+  }
+
   routes.push(
     {
       name: 'play',

package/state/drawings.ts

@@ -9,4 +9,8 @@ export const {
   onUpdate: onDrawingUpdate,
   patch: patchDrawingState,
   state: drawingState,
-} = createSyncState<DrawingsState>(serverDrawingState, serverDrawingState, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+} = createSyncState<DrawingsState>(
+  serverDrawingState,
+  serverDrawingState,
+  __SLIDEV_FEATURE_DRAWINGS_PERSIST__,
+)

package/state/index.ts

@@ -1,55 +1 @@
-import type { DragElementState } from '../composables/useDragElements'
-import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
-import { slideAspect } from '../env'
-
-export const showRecordingDialog = ref(false)
-export const showInfoDialog = ref(false)
-export const showGotoDialog = ref(false)
-export const showOverview = ref(false)
-
-export const shortcutsEnabled = ref(true)
-export const breakpoints = useBreakpoints({
-  xs: 460,
-  ...breakpointsTailwind,
-})
-export const windowSize = useWindowSize()
-export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
-export const fullscreen = useFullscreen(isClient ? document.body : null)
-
-export const activeElement = useActiveElement()
-export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
-export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
-
-export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
-export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
-export const slideScale = useLocalStorage<number>('slidev-scale', 0)
-export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
-
-export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
-export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
-export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
-export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
-export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
-
-export const activeDragElement = shallowRef<DragElementState | null>(null)
-
-export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
-export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
-
-export function togglePresenterLayout() {
-  presenterLayout.value = presenterLayout.value + 1
-  if (presenterLayout.value > 2)
-    presenterLayout.value = 1
-}
-
-export function increasePresenterFontSize() {
-  presenterNotesFontSize.value = Math.min(2, presenterNotesFontSize.value + 0.1)
-}
-
-export function decreasePresenterFontSize() {
-  presenterNotesFontSize.value = Math.max(0.5, presenterNotesFontSize.value - 0.1)
-}
-
-export const toggleOverview = useToggle(showOverview)
+export * from './storage'

package/state/shared.ts

@@ -11,10 +11,6 @@ export interface SharedState {
     y: number
   }
 
-  viewerPage: number
-  viewerClicks: number
-  viewerClicksTotal: number
-
   lastUpdate?: {
     id: string
     type: 'presenter' | 'viewer'
@@ -26,9 +22,6 @@ const { init, onPatch, onUpdate, patch, state } = createSyncState<SharedState>(s
   page: 1,
   clicks: 0,
   clicksTotal: 0,
-  viewerPage: 1,
-  viewerClicks: 0,
-  viewerClicksTotal: 0,
 })
 
 export {

package/state/storage.ts

@@ -0,0 +1,70 @@
+import type { DragElementState } from '../composables/useDragElements'
+import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
+import { computed, ref, shallowRef } from 'vue'
+import { slideAspect } from '../env'
+
+export const showRecordingDialog = ref(false)
+export const showInfoDialog = ref(false)
+export const showGotoDialog = ref(false)
+export const showOverview = ref(false)
+
+export const shortcutsEnabled = ref(true)
+export const breakpoints = useBreakpoints({
+  xs: 460,
+  ...breakpointsTailwind,
+})
+export const windowSize = useWindowSize()
+export const magicKeys = useMagicKeys()
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
+export const fullscreen = useFullscreen(isClient ? document.body : null)
+
+export const activeElement = useActiveElement()
+export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
+export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
+
+export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
+export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
+export const slideScale = useLocalStorage<number>('slidev-scale', 0)
+export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
+export const skipExportPdfTip = useLocalStorage('slidev-skip-export-pdf-tip', false)
+
+export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
+export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })
+export const isEditorVertical = useLocalStorage('slidev-editor-vertical', false, { listenToStorageChanges: false })
+export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 318, { listenToStorageChanges: false })
+export const editorHeight = useLocalStorage('slidev-editor-height', isClient ? window.innerHeight * 0.4 : 300, { listenToStorageChanges: false })
+
+export const activeDragElement = shallowRef<DragElementState | null>(null)
+
+export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1, { listenToStorageChanges: false })
+export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { listenToStorageChanges: false })
+
+export function togglePresenterLayout() {
+  presenterLayout.value = presenterLayout.value + 1
+  if (presenterLayout.value > 3)
+    presenterLayout.value = 1
+}
+
+export function increasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.min(2, presenterNotesFontSize.value + 0.1)
+}
+
+export function decreasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.max(0.5, presenterNotesFontSize.value - 0.1)
+}
+
+export const toggleOverview = useToggle(showOverview)
+
+export const syncDirections = useLocalStorage(
+  'slidev-sync-directions',
+  {
+    viewerSend: true,
+    viewerReceive: true,
+    presenterSend: true,
+    presenterReceive: true,
+  },
+  {
+    listenToStorageChanges: false,
+    mergeDefaults: true,
+  },
+)

package/styles/index.css

@@ -8,7 +8,9 @@ body,
   height: 100vh;
   height: calc(var(--vh, 1vh) * 100);
   overflow: hidden;
-  @apply font-sans;
+  print-color-adjust: exact;
+  -webkit-print-color-adjust: exact;
+  --uno: font-sans bg-main;
 }
 
 html {
@@ -17,11 +19,10 @@ html {
 
 .slidev-icon-btn {
   aspect-ratio: 1;
-  display: inline-block;
   user-select: none;
   outline: none;
   cursor: pointer;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
+  @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
   @apply md:p-2;
@@ -120,6 +121,16 @@ html {
   transform: translateY(0.1em);
 }
 
+.slidev-form-button {
+  --uno: text-white px-4 py-1 rounded border-b-2;
+  --uno: 'bg-gray-400:50 border-gray-800:50';
+  --uno: 'hover:(bg-gray-400:75 border-gray8:75)';
+}
+.slidev-form-button.primary {
+  --uno: bg-teal-600 border-teal-800;
+  --uno: 'hover:(bg-teal-500 border-teal-700)';
+}
+
 /* Transform the position back for Rough Notation (v-mark) */
 .rough-annotation {
   transform: scale(calc(1 / var(--slidev-slide-scale)));
@@ -129,7 +140,7 @@ html {
   position: fixed;
 }
 
-#twoslash-container .v-popper__wrapper {
+#twoslash-container .v-popper__wrapper:not(.no-slide-scale > *) {
   transform: scale(calc(1 * var(--slidev-slide-scale)));
   transform-origin: 30px top;
 }

package/uno.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
   safelist: [
     '!opacity-0',
     'prose',
+    // See https://github.com/slidevjs/slidev/issues/1705
+    'grid-rows-[1fr_max-content]',
+    'grid-cols-[1fr_max-content]',
   ],
   shortcuts: {
     'bg-main': 'bg-white dark:bg-[#121212]',
@@ -27,6 +30,18 @@ export default defineConfig({
     'abs-b': 'absolute bottom-0 left-0 right-0',
     'abs-bl': 'absolute bottom-0 left-0',
     'abs-br': 'absolute bottom-0 right-0',
+
+    'z-drawing': 'z-10',
+    'z-camera': 'z-15',
+    'z-dragging': 'z-18',
+    'z-menu': 'z-20',
+    'z-label': 'z-40',
+    'z-nav': 'z-50',
+    'z-context-menu': 'z-60',
+    'z-modal': 'z-70',
+    'z-focus-indicator': 'z-200',
+
+    'slidev-glass-effect': 'shadow-xl backdrop-blur-8 border border-main bg-main bg-opacity-75!',
   },
   // Slidev Specific Variants, probably extrat to a preset later
   variants: [

package/internals/PrintStyle.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { Slots } from 'vue'
-import { h } from 'vue'
-import { slideHeight, slideWidth } from '../env'
-
-function vStyle<Props>(props: Props, { slots }: { slots: Slots }) {
-  if (slots.default)
-    return h('style', slots.default())
-}
-</script>
-
-<template>
-  <vStyle>
-    @page { size: {{ slideWidth }}px {{ slideHeight }}px; margin: 0px; }
-  </vStyle>
-</template>