<template>
  <div class="safe-viewport-wrapper">
    <slot />
  </div>
</template>

<script setup>
// SafeViewport.vue
// Wrapper-component die de chatapplicatie omhult en de viewport-/keyboard-logica
// initialiseert via de useChatViewport composable.

// Belangrijk: de composable zelf leeft onder nginx/frontend_src/js zodat hij
// binnen dezelfde npm-package valt als de bundel (en zo @vueuse/core kan resolven).
// Daarom gebruiken we hier een relatieve pad vanuit de Vue-component naar die map.

import useChatViewport from '../js/composables/useChatViewport.js';

// Initialiseer de viewport-logica zodra deze wrapper instantiëert.
useChatViewport();
</script>

<style scoped>
.safe-viewport-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
