@datagouv/components-next 1.0.2-dev.19 → 1.0.2-dev.191

package/src/components/ResourceExplorer/ResourceMainAction.vue

@@ -0,0 +1,240 @@
+<template>
+  <!-- A resource that is only a link is visited, not downloaded. -->
+  <BrandedButton
+    v-if="isResourceUrl"
+    :href="resource.latest"
+    :title="t('Lien du fichier - ouvre une nouvelle fenêtre')"
+    rel="ugc nofollow noopener"
+    new-tab
+    size="xs"
+    external
+    @click="trackEvent('Jeux de données', 'Télécharger un fichier', 'Bouton : télécharger un fichier')"
+  >
+    {{ t('Visiter') }}
+  </BrandedButton>
+
+  <!-- An OGC endpoint with nothing to export: its URL is the only useful thing to
+       hand over, to paste into a GIS. -->
+  <BrandedButton
+    v-else-if="!groups.length"
+    :icon="RiFileCopyLine"
+    color="primary"
+    size="xs"
+    @click="copyServiceUrl"
+  >
+    {{ t('Copier le lien') }}
+  </BrandedButton>
+
+  <!-- A single downloadable format needs no menu: a plain download button links
+       straight to it, matching the previous behaviour. -->
+  <BrandedButton
+    v-else-if="singleDownload"
+    :href="singleDownload.url"
+    :icon="RiDownloadLine"
+    rel="ugc nofollow noopener"
+    download
+    external
+    class="matomo_download"
+    size="xs"
+    color="primary"
+    @click="trackDownload(singleDownload.format)"
+  >
+    {{ t('Télécharger') }}
+  </BrandedButton>
+
+  <Popover
+    v-else
+    ref="anchor"
+    class="relative"
+  >
+    <PopoverButton
+      :as="BrandedButton"
+      :icon="RiDownloadLine"
+      size="xs"
+      color="primary"
+      aria-haspopup="menu"
+    >
+      {{ t('Télécharger') }}
+    </PopoverButton>
+
+    <ClientOnly>
+      <Teleport to="#tooltips">
+        <PopoverPanel
+          v-slot="{ close }"
+          ref="panel"
+          class="absolute z-[800] w-72 overflow-hidden rounded border border-gray-default bg-white shadow-lg"
+          :style="floatingStyles"
+        >
+          <div
+            v-for="group in groups"
+            :key="group.title"
+          >
+            <div class="border-b border-gray-default bg-gray-some px-2 py-1.5 text-[12px] font-bold uppercase leading-tight text-gray-title">
+              {{ group.title }}
+            </div>
+            <div
+              v-for="item in group.items"
+              :key="item.url"
+              class="group/dl flex items-center border-b border-gray-default last:border-b-0 hover:bg-gray-some"
+            >
+              <a
+                :href="item.url"
+                class="matomo_download flex min-w-0 flex-1 items-center gap-2 py-2 pl-2 pr-1 text-[14px] leading-tight text-gray-title !bg-none !no-underline"
+                rel="ugc nofollow noopener"
+                download
+                @click="trackDownload(item.format); close()"
+              >
+                <span class="min-w-0 flex-1 truncate">{{ t('Format {format}', { format: item.format }) }}</span>
+                <span
+                  v-if="item.size"
+                  class="shrink-0 rounded bg-gray-lower px-1 text-[13px] tabular-nums text-gray-medium"
+                >{{ filesize(item.size) }}</span>
+              </a>
+              <CopyButton
+                :label="t('Copier le lien')"
+                :copied-label="t('Lien copié !')"
+                :text="item.url"
+                icon-only
+                class="mr-1.5 shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/dl:opacity-100"
+              />
+            </div>
+          </div>
+
+          <!-- The exports above are files; the service itself is consumed live by a GIS,
+               so its URL stays reachable next to them. -->
+          <div v-if="ogcService">
+            <div class="border-y border-gray-default bg-gray-some px-2 py-1.5 text-[12px] font-bold uppercase leading-tight text-gray-title">
+              {{ t('Service') }}
+            </div>
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 px-2 py-2 text-left text-[14px] leading-tight text-gray-title hover:bg-gray-some"
+              @click="copyServiceUrl(); close()"
+            >
+              <RiFileCopyLine
+                class="size-4 shrink-0 text-gray-medium"
+                aria-hidden="true"
+              />
+              {{ t('Copier le lien du service') }}
+            </button>
+          </div>
+        </PopoverPanel>
+      </Teleport>
+    </ClientOnly>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiDownloadLine, RiFileCopyLine } from '@remixicon/vue'
+import { toast } from 'vue-sonner'
+import BrandedButton from '../BrandedButton.vue'
+import CopyButton from '../CopyButton.vue'
+import ClientOnly from '../ClientOnly.vue'
+import { filesize } from '../../functions/helpers'
+import { getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+type DownloadItem = { url: string, format: string, size?: number }
+type DownloadGroup = { title: string, items: DownloadItem[] }
+
+// The one action a resource offers, whatever its kind: the two explorer headers mount
+// this so the triage lives in a single place instead of drifting between them.
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+}>()
+
+const { t } = useTranslation()
+
+const {
+  generatedFormats,
+  wfsFormats,
+  defaultWfsProjection,
+  isResourceUrl,
+  ogcService,
+} = useResourceCapabilities(() => props.resource, () => props.dataset)
+
+const groups = computed<DownloadGroup[]>(() => {
+  const result: DownloadGroup[] = []
+
+  // An OGC endpoint is not a file: `latest` points at its GetCapabilities, which is
+  // nothing a visitor wants to download. Only its exports below are.
+  if (!ogcService.value) {
+    result.push({
+      title: t('Format original'),
+      items: [{
+        url: props.resource.latest,
+        format: props.resource.format,
+        size: getResourceFilesize(props.resource) ?? undefined,
+      }],
+    })
+  }
+
+  if (generatedFormats.value.length) {
+    result.push({
+      title: t('Formats générés automatiquement'),
+      items: generatedFormats.value.map(format => ({
+        url: format.url,
+        format: format.format,
+        size: format.size,
+      })),
+    })
+  }
+
+  if (wfsFormats.value.length) {
+    const projection = defaultWfsProjection.value
+    result.push({
+      title: projection
+        ? t('Formats exportés depuis le service WFS (projection {crs})', { crs: projection })
+        : t('Formats exportés depuis le service WFS'),
+      items: wfsFormats.value.map(format => ({
+        url: format.url,
+        format: format.format,
+      })),
+    })
+  }
+
+  return result
+})
+
+// A single downloadable format needs no menu: expose it directly for the plain button.
+// Never for an OGC service, whose menu also carries the link to the service itself.
+const singleDownload = computed<DownloadItem | null>(() => {
+  if (ogcService.value) return null
+  if (groups.value.length !== 1) return null
+  const items = groups.value[0]!.items
+  return items.length === 1 ? items[0]! : null
+})
+
+const trackDownload = (format: string) => {
+  trackEvent('Jeux de données', 'Télécharger un fichier', `Bouton : format ${format}`)
+}
+
+const copyServiceUrl = async () => {
+  try {
+    await navigator.clipboard.writeText(props.resource.url)
+    toast.success(t('Lien copié !'))
+  }
+  catch {
+    toast.error(t('Impossible de copier dans le presse-papier'))
+  }
+}
+
+// The panel is teleported, so it is positioned against its trigger with floating-ui.
+const anchor = useTemplateRef<InstanceType<typeof Popover>>('anchor')
+const panel = useTemplateRef<InstanceType<typeof PopoverPanel>>('panel')
+const anchorEl = computed(() => anchor.value?.$el as HTMLElement | undefined)
+const panelEl = computed(() => panel.value?.$el as HTMLElement | undefined)
+const { floatingStyles } = useFloating(anchorEl, panelEl, {
+  placement: 'bottom-end',
+  middleware: [flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+})
+</script>

package/src/components/ResourceExplorer/ResourceSelector.vue

@@ -0,0 +1,51 @@
+<template>
+  <Popover
+    v-slot="{ open, close }"
+    class="relative inline-block"
+  >
+    <PopoverButton
+      class="inline-flex items-center justify-center size-6 rounded text-gray-plain hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-new-primary"
+      :aria-label="t('Choisir une autre ressource')"
+    >
+      <RiArrowDownSLine
+        class="size-4"
+        :class="{ 'rotate-180': open }"
+        aria-hidden="true"
+      />
+    </PopoverButton>
+    <PopoverPanel class="absolute left-0 top-full z-50 mt-1 w-80 max-h-96 overflow-auto bg-white border border-gray-default rounded shadow-lg p-1">
+      <ul class="list-none p-0 m-0 space-y-0.5 max-h-80 overflow-y-auto">
+        <li
+          v-for="r in resources"
+          :key="r.id"
+        >
+          <ResourceListItem
+            :resource="r"
+            :to="resourceTo(r)"
+            :replace
+            :selected="r.id === selectedId"
+            @click="close()"
+          />
+        </li>
+      </ul>
+    </PopoverPanel>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { RiArrowDownSLine } from '@remixicon/vue'
+import { useTranslation } from '../../composables/useTranslation'
+import ResourceListItem from '../ResourceListItem.vue'
+import type { Resource } from '../../types/resources'
+
+defineProps<{
+  resources: Resource[]
+  selectedId: string
+  resourceTo: (resource: Resource) => RouteLocationRaw
+  replace?: boolean
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/ResourceExplorer/ResourceViewerHeader.vue

@@ -0,0 +1,115 @@
+<template>
+  <header class="flex h-14 shrink-0 items-center justify-between gap-2 border-b border-gray-default bg-gray-some px-3">
+    <div class="flex min-w-0 items-center gap-1.5 overflow-hidden text-[13px] text-gray-medium">
+      <ResourceIcon
+        :resource
+        class="size-4 shrink-0"
+      />
+      <span
+        class="min-w-0 truncate font-medium text-gray-title"
+        :title="resource.title || t('Fichier sans nom')"
+      >{{ resource.title || t('Fichier sans nom') }}</span>
+      <ResourceSelector
+        v-if="resources && resources.length > 1 && resourceTo"
+        :resources
+        :selected-id="resource.id"
+        :resource-to
+        :replace
+        class="shrink-0 md:hidden"
+      />
+      <!-- Metadata gives way long before the title does (hence the shrink factor), so
+           the resource name stays readable — and the title truncates rather than being
+           clipped by the row, which would push the copy button out of view.
+           Inline flow (not flex) so text-overflow renders the ellipsis; spacing is
+           carried by the separators' margins. -->
+      <div class="min-w-0 truncate [flex-shrink:9999]">
+        <span class="mr-1.5">·</span>
+        <span :title="formatDate(resource.last_modified)">{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
+        <template v-if="resourceFilesize">
+          <span class="mx-1.5">·</span>
+          <span>{{ filesize(resourceFilesize) }}</span>
+        </template>
+        <template v-if="resource.format">
+          <span class="mx-1.5">·</span>
+          <span class="rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium">{{ resource.format }}</span>
+        </template>
+        <template v-if="resource.schema?.name || resource.schema?.url">
+          <span class="mx-1.5">·</span>
+          <SchemaBadge :resource />
+        </template>
+        <span class="mx-1.5">·</span>
+        <span class="inline-flex items-center gap-0.5 align-middle">
+          <RiDownloadLine class="size-3" />
+          {{ summarize(resource.metrics.views) }}
+        </span>
+      </div>
+      <CopyButton
+        :label="t('Copier le lien')"
+        :copied-label="t('Lien copié !')"
+        :text="resourceExternalUrl"
+        icon-only
+        class="hidden shrink-0 md:inline-flex"
+      />
+    </div>
+    <div
+      v-if="!fullscreen"
+      class="flex shrink-0 items-center gap-2"
+    >
+      <ResourceMainAction
+        :resource="resource"
+        :dataset="dataset"
+      />
+      <BrandedButton
+        v-if="exploreTo"
+        :href="exploreTo(resource)"
+        :icon="RiFullscreenLine"
+        icon-only
+        color="secondary"
+        size="xs"
+        :title="t('Explorer les données')"
+        @click="trackEvent('Jeux de données', 'Explorer les données', 'Bouton : explorer les données')"
+      >
+        {{ t('Explorer les données') }}
+      </BrandedButton>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RiDownloadLine, RiFullscreenLine } from '@remixicon/vue'
+import BrandedButton from '../BrandedButton.vue'
+import CopyButton from '../CopyButton.vue'
+import ResourceIcon from '../ResourceAccordion/ResourceIcon.vue'
+import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
+import ResourceSelector from './ResourceSelector.vue'
+import ResourceMainAction from './ResourceMainAction.vue'
+import { filesize, summarize } from '../../functions/helpers'
+import { getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
+import { trackEvent } from '../../functions/matomo'
+import { useFormatDate } from '../../functions/dates'
+import { useTranslation } from '../../composables/useTranslation'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+// Shared by the viewer and its loading skeleton: everything here comes from the
+// resource itself, so the skeleton renders the real header instead of pulsing
+// placeholders over data it already holds.
+const props = defineProps<{
+  dataset: Dataset | DatasetV2
+  resource: Resource
+  resources?: Resource[]
+  resourceTo?: (resource: Resource) => RouteLocationRaw
+  exploreTo?: (resource: Resource) => string
+  replace?: boolean
+  // Fullscreen mode hides the inline actions — they live in the dataset context bar above.
+  fullscreen?: boolean
+}>()
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate, formatDate } = useFormatDate()
+
+const resourceFilesize = computed(() => getResourceFilesize(props.resource))
+const resourceExternalUrl = computed(() => getResourceExternalUrl(props.dataset, props.resource))
+</script>

package/src/components/ResourceExplorer/ResourceViewerSkeleton.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :class="fullscreen ? 'flex min-h-0 flex-1 flex-col' : ''">
+    <!-- Header and tabs are the real ones: everything they show comes from the
+         resource we already hold, so there is nothing to wait for. Only the preview
+         body below is a placeholder. -->
+    <ResourceViewerHeader
+      :dataset
+      :resource
+      :resources
+      :resource-to
+      :explore-to="exploreTo"
+      :replace
+      :fullscreen
+    />
+
+    <!-- Inert copy of the viewer's tab row: same components, so the pills keep their
+         exact size and labels, but nothing to select until the viewer resolves. -->
+    <TabGroup
+      size="sm"
+      aria-hidden="true"
+      class="pointer-events-none"
+    >
+      <div class="flex shrink-0 items-center border-b border-gray-default p-2">
+        <TabList class="max-w-full overflow-x-auto">
+          <Tab
+            v-for="tab in tabsOptions"
+            :key="tab.key"
+          >
+            {{ tab.label }}
+          </Tab>
+        </TabList>
+      </div>
+    </TabGroup>
+
+    <!-- Tabular preview: the same toolbar + table skeleton the data tab shows while
+         TabularExplorer loads. Other previews fall back below. -->
+    <TabularSkeleton
+      v-if="previewKind === 'tabular'"
+      :fill="fullscreen"
+    />
+
+    <!-- PDF preview: the same A4 skeleton the PdfPreview shows while pdfjs loads. -->
+    <PdfSkeleton
+      v-else-if="previewKind === 'pdf'"
+      :fill="fullscreen"
+    />
+
+    <!-- Other non-tabular previews (JSON, map…) — a simple placeholder for now. -->
+    <div
+      v-else
+      class="animate-pulse-placeholder p-4"
+      :class="fullscreen ? 'min-h-0 flex-1' : ''"
+      role="status"
+      :aria-label="t('Chargement de l\'aperçu…')"
+    >
+      <div
+        class="w-full rounded bg-gray-200"
+        :class="fullscreen ? 'h-full' : 'h-96'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PdfSkeleton from '../ResourceAccordion/PdfSkeleton.vue'
+import TabularSkeleton from '../TabularExplorer/TabularSkeleton.vue'
+import TabGroup from '../Tabs/TabGroup.vue'
+import TabList from '../Tabs/TabList.vue'
+import Tab from '../Tabs/Tab.vue'
+import ResourceViewerHeader from './ResourceViewerHeader.vue'
+import { useTranslation } from '../../composables/useTranslation'
+import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
+import type { RouteLocationRaw } from 'vue-router'
+import type { Resource } from '../../types/resources'
+import type { Dataset, DatasetV2 } from '../../types/datasets'
+
+const props = defineProps<{
+  resource: Resource
+  dataset: Dataset | DatasetV2
+  resources?: Resource[]
+  resourceTo?: (resource: Resource) => RouteLocationRaw
+  exploreTo?: (resource: Resource) => string
+  replace?: boolean
+  fullscreen?: boolean
+}>()
+
+const { t } = useTranslation()
+// `previewKind` is the viewer's own decision, so the skeleton always picks the
+// shape the resolved viewer will show.
+const { previewKind, tabsOptions } = useResourceCapabilities(
+  () => props.resource,
+  () => props.dataset,
+)
+</script>

package/src/components/ResourceListItem.vue

@@ -0,0 +1,161 @@
+<template>
+  <AppLink
+    ref="row"
+    v-bind="$attrs"
+    :to
+    :replace
+    :class="selected ? '[&&]:!bg-gray-200' : '[&&]:hover:!bg-gray-100'"
+    class="grid h-7 w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 rounded px-1 py-1 text-left !bg-none !no-underline"
+    @pointerenter="openOnHover"
+    @pointerleave="closeTooltip"
+    @focus="show = true"
+    @blur="closeTooltip"
+  >
+    <span
+      :class="[iconColor, '[&_svg]:fill-current']"
+      class="flex size-5 shrink-0 items-center justify-center rounded-[1px]"
+    >
+      <component
+        :is="iconComponent"
+        class="size-4"
+        aria-hidden="true"
+      />
+    </span>
+    <div class="flex min-w-0 items-baseline gap-0.5 whitespace-nowrap leading-4">
+      <span
+        class="truncate text-[13px]"
+        :class="selected ? 'font-extrabold text-gray-title' : 'font-medium text-gray-medium'"
+      >{{ resource.title || t('Fichier sans nom') }}</span>
+      <template v-if="humanFilesize">
+        <span class="shrink-0 text-[13px] text-gray-medium">·</span>
+        <span class="shrink-0 text-[12px] text-gray-medium">{{ humanFilesize }}</span>
+      </template>
+    </div>
+    <!-- Capped and truncated: an `auto` grid track floors at its content width, so an
+         unusually long format (`www:link-1.0-http--samples`) would otherwise squeeze
+         the title track to nothing and overflow the fixed-height row. -->
+    <span
+      v-if="resource.format"
+      class="max-w-24 truncate rounded bg-gray-lower px-1.5 py-0.5 text-[12px] uppercase leading-4 text-gray-medium"
+      :title="resource.format"
+    >{{ resource.format }}</span>
+  </AppLink>
+
+  <!-- Hover card: the row truncates the title, so surface the full name plus the
+       same metadata line as the viewer header. Placed beside the row (not below) so
+       it doesn't hide the sibling rows we're scanning.
+       ClientOnly: Vue hydrates a teleport by scanning the target from its first child,
+       so an SSR-rendered teleport to `body` breaks as soon as anything else is prepended
+       there — and Nuxt emits the `bodyOpen` head tags before it. The card only ever opens
+       on hover, so there is nothing to render on the server anyway. -->
+  <ClientOnly>
+    <Teleport to="body">
+      <div
+        v-if="show"
+        ref="card"
+        role="tooltip"
+        class="pointer-events-none z-[80] w-max rounded border border-gray-default bg-white p-2 text-left shadow-[0_2px_4px_rgba(0,0,0,0.04),2px_4px_16px_rgba(0,0,0,0.12)]"
+        :style="floatingStyles"
+      >
+        <span class="block whitespace-nowrap text-[13px] font-medium leading-5 text-gray-title">{{ resource.title || t('Fichier sans nom') }}</span>
+        <div class="mt-1 flex items-center gap-1 text-[12px] leading-4 text-gray-medium">
+          <span>{{ t('mis à jour {date}', { date: formatRelativeIfRecentDate(resource.last_modified) }) }}</span>
+          <template v-if="humanFilesize">
+            <span>·</span>
+            <span>{{ humanFilesize }}</span>
+          </template>
+          <template v-if="resource.format">
+            <span>·</span>
+            <span class="rounded bg-gray-lower px-1.5 py-0.5 uppercase leading-4">{{ resource.format }}</span>
+          </template>
+          <span>·</span>
+          <span class="inline-flex items-center gap-0.5">
+            <RiDownloadLine
+              class="size-3"
+              aria-hidden="true"
+            />
+            {{ summarize(resource.metrics.views) }}
+          </span>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
+import { useEventListener } from '@vueuse/core'
+import type { RouteLocationRaw } from 'vue-router'
+import { RiDownloadLine } from '@remixicon/vue'
+import AppLink from './AppLink.vue'
+import ClientOnly from './ClientOnly.vue'
+import File from './Icons/File.vue'
+import { getResourceFormatIcon, getResourceIconColor, getResourceFilesize } from '../functions/resources'
+import { filesize, summarize } from '../functions/helpers'
+import { useFormatDate } from '../functions/dates'
+import { useTranslation } from '../composables/useTranslation'
+import type { Resource } from '../types/resources'
+
+// The hover card below is a second root node, so Vue drops fallthrough attributes
+// unless we place them ourselves: without this, a listener bound by the parent
+// (the selector's `@click="close()"`) would silently never fire.
+defineOptions({ inheritAttrs: false })
+
+// Shared row for a single resource (sidebar + resource selector). Renders as a
+// navigation link so switching resource is a real link — the URL is the source of
+// truth for the selection.
+const props = withDefaults(defineProps<{
+  resource: Resource
+  to: RouteLocationRaw
+  selected?: boolean
+  replace?: boolean
+}>(), {
+  selected: false,
+  replace: false,
+})
+
+const { t } = useTranslation()
+const { formatRelativeIfRecentDate } = useFormatDate()
+
+// Render the icon directly (not via ResourceIcon which forces a gray color) so the
+// colored badge can tint it through currentColor + [&_svg]:fill-current.
+const iconComponent = computed(() => (props.resource.format ? getResourceFormatIcon(props.resource.format) : null) ?? File)
+const iconColor = computed(() => getResourceIconColor(props.resource.format))
+
+const humanFilesize = computed(() => {
+  const size = getResourceFilesize(props.resource)
+  return size ? filesize(size) : null
+})
+
+// Hover card teleported to <body> so the sidebar's `overflow` doesn't clip it, hence
+// the fixed strategy. `shift` keeps it inside the viewport for a row near an edge, and
+// `autoUpdate` follows the row when its scrollable container moves under the pointer.
+const show = ref(false)
+const row = useTemplateRef<InstanceType<typeof AppLink>>('row')
+const card = useTemplateRef<HTMLElement>('card')
+const rowEl = computed(() => row.value?.$el as HTMLElement | undefined)
+const { floatingStyles } = useFloating(rowEl, card, {
+  placement: 'right-start',
+  strategy: 'fixed',
+  middleware: [offset(16), flip(), shift({ padding: 8 })],
+  whileElementsMounted: autoUpdate,
+})
+
+// A tap fires a pointer enter too, so the card would flash on every touch selection
+// in the mobile resource picker. Only a real pointer opens it — keyboard focus still
+// does, through @focus.
+function openOnHover(event: PointerEvent) {
+  if (event.pointerType === 'mouse') show.value = true
+}
+
+function closeTooltip() {
+  show.value = false
+}
+
+// A hover-shown card gets no `mouseleave` when the window loses focus (alt-tab) or
+// the pointer leaves the document, so it would linger on return — close it in those
+// cases too.
+useEventListener(window, 'blur', closeTooltip)
+useEventListener(document, 'mouseleave', closeTooltip)
+</script>