<script setup lang="ts">
// Met à l'échelle le canvas A3 paysage (1587,4×1122,5) pour l'aperçu (§8.4).
const PAGE_W = 1587.4
const wrapper = ref<HTMLElement>()
const scale = ref(0.5)

let observer: ResizeObserver | undefined
onMounted(() => {
  observer = new ResizeObserver(([entry]) => {
    scale.value = entry.contentRect.width / PAGE_W
  })
  if (wrapper.value) observer.observe(wrapper.value)
})
onBeforeUnmount(() => observer?.disconnect())
</script>

<template>
  <div ref="wrapper" class="relative w-full overflow-hidden" style="aspect-ratio: 1190.55 / 841.89">
    <div class="absolute left-0 top-0 origin-top-left" :style="{ transform: `scale(${scale})` }">
      <slot />
    </div>
  </div>
</template>
