Hover card inside a dialog.

<!--
  Порт c-hover-card-6 ("Hover card inside a dialog") —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/hover-card/c-hover-card-6.tsx

  `Dialog` закрыт по умолчанию — `DialogContent` (и вложенный `HoverCard`
  внутри него) не монтируется вовсе (Radix/reka-ui `Content` без
  `forceMount` в закрытом состоянии), поэтому диф проверяет только кнопку-
  триггер диалога. Импортировано без адаптации.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
</script>

<template>
  <div class="flex items-center justify-center">
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Hover Card Example</DialogTitle>
          <DialogDescription>Hover over the button below to see the hover card.</DialogDescription>
        </DialogHeader>
        <HoverCard :open-delay="100" :close-delay="100">
          <HoverCardTrigger as-child>
            <Button variant="outline" class="w-fit">Hover me</Button>
          </HoverCardTrigger>
          <HoverCardContent>
            <div class="flex flex-col gap-1">
              <h4 class="font-medium">Hover Card</h4>
              <p class="text-muted-foreground">
                This hover card appears inside a dialog. Hover over the button to see it.
              </p>
            </div>
          </HoverCardContent>
        </HoverCard>
      </DialogContent>
    </Dialog>
  </div>
</template>