Timestamp hover card with active relative time

<!--
  Порт c-hover-card-7 ("Hover card with live clock") —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/hover-card/c-hover-card-7.tsx

  `date-fns`/`setInterval` перенесены без изменений (тот же приём, что
  `block-popover` паттерн 9): референсное время фиксировано смещением
  -2 часа от момента рендера, `formatDistanceToNow` в этом диапазоне
  стабильно даёт "about 2 hours ago" независимо от точной секунды снятия
  скриншота.

  Правило 3 (текст одним узлом, docs/PORTING.md): "Last deployed "/
  " by CI/CD pipeline." собраны единым текстовым узлом на стыке с
  `<HoverCard>` — то же, что в react.tsx (адаптированная копия там же).
-->
<script setup lang="ts">
import { onBeforeUnmount, ref } from "vue"
import { format, formatDistanceToNow } from "date-fns"
import { Badge } from "@/components/reui/badge"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
import { Separator } from "@/components/ui/separator"

const now = ref(new Date())
const timer = setInterval(() => {
  now.value = new Date()
}, 1000)
onBeforeUnmount(() => clearInterval(timer))

// Static reference time for the "last deployed" example
const referenceTime = new Date(now.value.getTime() - 1000 * 60 * 120) // 2 hours ago

const localTz =
  Intl.DateTimeFormat().resolvedOptions().timeZone.split("/").pop()?.replace("_", " ") || "Local"
</script>

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <p class="text-muted-foreground text-sm">Last deployed <HoverCard :open-delay="100" :close-delay="100">
      <HoverCardTrigger class="text-foreground cursor-default underline decoration-dashed decoration-1 underline-offset-4">{{ formatDistanceToNow(referenceTime, { addSuffix: true }) }}</HoverCardTrigger>
      <HoverCardContent class="w-78 p-0">
        <p class="text-foreground px-2 py-1 font-medium">{{ formatDistanceToNow(referenceTime, { addSuffix: true }) }}</p>
        <Separator />
        <div class="px-2 py-1.5">
          <table>
            <tbody>
              <tr>
                <td class="pr-4 pb-1.5">
                  <Badge variant="outline">UTC</Badge>
                </td>
                <td class="pr-6 pb-1.5">{{ format(referenceTime, "MMM d, yyyy") }}</td>
                <td class="text-muted-foreground pb-1.5">{{ format(referenceTime, "hh:mm:ss a") }}</td>
              </tr>
              <tr>
                <td class="pr-4">
                  <span class="bg-muted rounded px-1.5 py-0.5 font-medium">{{ localTz }}</span>
                </td>
                <td class="pr-6">{{ format(now, "MMM d, yyyy") }}</td>
                <td class="text-muted-foreground w-28">{{ format(now, "hh:mm:ss a") }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </HoverCardContent>
    </HoverCard> by CI/CD pipeline.</p>
  </div>
</template>