<template>
  <Teleport to="body">
    <component
      :is="entry.component"
      v-for="entry in modals.stack"
      :key="entry.id"
      v-bind="entry.props"
      @close="modals.close(entry.id)"
    />
  </Teleport>
</template>

<script setup lang="ts">
// Hôte de la pile de modals : rend chaque entrée via <component :is>. Les modals fournissent
// eux-mêmes leur backdrop plein écran (fixed inset-0 z-50), donc l'hôte ne dessine rien. Escape
// ferme le sommet de la pile. Monté une seule fois par IdeShell (via Teleport, l'emplacement dans
// le template importe peu, mais l'hôte doit rester monté tant que l'IDE vit).
import { onBeforeUnmount, onMounted } from 'vue';
import { useModalsStore } from '../../stores/modals';

const modals = useModalsStore();

function onKey(e: KeyboardEvent): void {
  if (e.key === 'Escape' && modals.stack.length > 0) modals.close();
}
onMounted(() => window.addEventListener('keydown', onKey));
onBeforeUnmount(() => window.removeEventListener('keydown', onKey));
</script>
